INSTITUTE : UIE

DEPARTMENT : CSE
Bachelor of Engineering (Computer Science &
Engineering)
Mobile Application Development(21CSH-355/21ITH-355)

TOPIC OF PRESENTATION:
Introduction to Windows Mobile 7 Development
Prepared by:
Parveen Kumar Saini(E13339)

DISCOVER . LEARN .
www.cuchd.in EMPOWER
Computer Science and Engineering Department
 Introduction to Windows Mobile 7
Development

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Introduction to Windows Mobile 7 Development
• Mobiletuts+ will be covering all major mobile platforms – iPhone, Windows, Android and
Blackberry. Today we’ll be taking a look at Windows Phone 7 development. Windows Phone 7 is
the latest mobile operating system from Microsoft. It is a clean break from previous Windows
Mobile operating systems, such as WinMo 6.5, and offers .NET developers a chance to get in on
the mobile application explosion that has happened in recent years. This tutorial will introduce you
to the Windows Phone 7 platform, walk you through installing the SDK, and demonstrate the
fundamental code necessary to build a simple application.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 About the Platform
• Windows Mobile 7 development is done using the .NET framework. The .NET framework is a
software framework created by Microsoft for use in creating Windows applications. Programmers
write applications using one of the several languages supported by the .NET framework, like C#,
and the applications then execute inside of a runtime environment called the Common Language
Runtime.
• For Windows Phone 7, there are two distinct development approaches you can take when creating
your application.
• The first approach is to use Silverlight for Windows Phone. Silverlight was originally envisioned
as a way for developers to create rich internet applications. It has seen a sharp increase in market
adoption in recent years, driven mostly by the fact that Netflix uses Silverlight to stream videos
and NBC used Silverlight for its online broadcast of the Olympic games. A Silverlight application
combines declarative markup (called XAML) to construct the user interface and code written in
a .NET framework language to control an application’s behavior. If you’re developing a data
driven application for Windows Phone 7, you should probably use Silverlight.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 • Alternatively, you can use the XNA framework to develop your Windows Phone 7 app. XNA is
Microsoft’s game development framework and has been used in recent years to create both
Windows and Xbox 360 applications. If you’re creating a game for Windows Phone 7, you’ll
likely use the XNA framework. The XNA framework is quite powerful, but that power comes with
a considerable learning curve and longer development cycles.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Getting Set Up
• Let’s get started by making sure your development environment is set up correctly. You’ll need to be
running Windows Vista or Windows 7 and you need to have a DirectX 10 capable graphics card
installed in your computer. After verifying that you meet these requirements, visit
http://bit.ly/9FXxQC to download the development tools.
• Scroll to the bottom of the page and download the file named VM_BOOT\vm_web.exe. Once the file
has downloaded, double click on it to install the complete Windows Phone Developer Tools package.
• The package includes:
– Visual Studio 2010 Express for Windows Phone
– Windows Phone Emulator
– Silverlight for Windows Phone
– XNA 4.0 Game Studio
• Your computer will likely restart at least once while the tools are being installed. After you’ve
installed the developer tools on your system, you are ready to get started.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Opening Visual Studio
• The application you’ll create in this tutorial is a simple one. It displays a simple button that you can
tap. When you tap it, the button rotates around the phone’s interface. We’ll develop this application
using Silverlight for Windows Phone. It should take less than 10 minutes to create.
• To begin, open Microsoft Visual Studio 2010 Express for Windows Phone. The easiest way to find
it is to open the Start menu and begin typing “Visual Studio.” The application should show up in
your search result list, similar to the following:
• Click on the Visual Studio 2010 item to open up the development environment. If this is your first time
opening the application, it may take a few minutes to start as Visual Studio will initialize some settings for
you.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Creating Your Project
• When you open Visual Studio, you’ll be greeted with the application’s start page. There is a lot of
content on this page, including development tips, recent news, and project related actions. It is
sometimes helpful to browse the content here to learn more about the platform, but for now just
click on the “New Project…” link in the left sidebar.
• A dialog box will pop up that guides you through creating your new project. Make sure the
“Windows Phone Application” item is selected as your project template. Then, give your project a
name. For this tutorial, I recommend calling your project “Rotating_Button.” Finally, confirm that
the “Create directory for solution” checkbox is selected. This helps to organize your development
efforts. Your settings should match mine:
• Click “OK” to create your new project.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Navigating the UI Editor
• The template that you’ve selected provides you with a completely working application. To see it in
action, simply press CTRL+F5 to compile the application and launch it in the Windows Phone
Emulator. The emulator launches with a single page containing an application title and a page title.
• That default UI just won’t do for our application, so let’s make some modifications. Visual Studio
should have opened the file MainPage.xaml for editing when you created the project. If not, double
click the file’s name in the Solution Explorer to open it.
• You should see a split screen view. On one side of the development environment you can see how
the current file will look when your application is run. This is design mode. On the other side you
have the XAML markup that declares how your interface should look. Any changes you make on
one side will be represented on the other. This is similar to a WYSIWYG HTML editor like
Dreamweaver.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 • The first thing we want to do is delete everything inside of the layout grid so we can provide our
own markup. You should see a Grid tag named LayoutRoot. Delete everything inside this tag.
• You’ll end up with the following code:
• <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
• </Grid>
• The design mode view should show a blank screen at this point.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Creating Your Application’s Layout
• You now need to add the UI for your application. Our application consists of a single button that
will rotate around a grid. The grid is 2×2, so let’s go ahead and declare that the layout grid should
have two rows two columns. Change your layout grid markup to the following:
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
</Grid>

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Adding the Button
• After you’ve defined your layout grid, it is time to create the button that will be tapped by your users. You
want the button to start in the upper left box of the grid, so you’ll declare that it goes in Row 0 and
Column 0.
• In XAML, you tell an element to place itself within a grid by declaring the element and then assigning it
the appropriate row and column indices. Inside of your layout grid, add a button using the following
markup:
<Button
Grid.Column="0"
Grid.Row="0"
Content="Tap Me!"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
/>
• This markup says the button should position itself in column and row 0, should stretch both horizontally
and vertically within the grid cell it occupies, and that it should have the text “Tap Me!”

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 • Your application’s UI code should now resemble the following:
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>

<RowDefinition Height="*" />

<Button
Grid.Column="0"
Grid.Row="0"
Content="Tap Me!"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
/>
</Grid>
www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 • At this point, you can fire up your application and see that your UI is in place. Just like earlier,
press CTRL+F5 to compile and launch your application in the Windows Phone emulator. If you’ve
done everything correctly, you’ll see a button in your emulator nested firmly in the top left corner.
• You can tap the button by clicking it with your mouse, but nothing will happen. We’ll remedy that
next by adding some event handling code.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 THANK YOU

For queries
Email: [email protected]

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE) 17