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.

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.

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.

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.

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.

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.

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.

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.

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 and 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>

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!”

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="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Button
        Grid.Column="0"
        Grid.Row="0"
        Content="Tap Me!"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        />
</Grid>

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.

Adding Event Handling

Go back to Visual Studio and make sure that you’ve got MainPage.xaml open in design/code mode. You need to add an event handling attribute to the button that you’ve created. Modify the button declaration, adding a ManipulationStarted attribute. Make sure you allow Visual Studio to create an event handling function for you. Your button markup should now look like this:

<Button
    Grid.Column="0"
    Grid.Row="0"
    Content="Click Me!"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    ManipulationStarted="Button_ManipulationStarted" />

Now, open the code behind file for MainPage.xaml. It is named MainPage.xaml.cs and you can find it in the Solution Explorer by clicking the arrow next to MainPage.xaml.

Inside of MainPage.xaml.cs you’ll see the event handler that Visual Studio created. Visual Studio has most likely named it Button_ManipulationStarted and, for the purposes of this application, that should be just fine. Change your function declaration to the following:

private void Button_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
{
    Button b = sender as Button;
    int col = Grid.GetColumn(b);
    int row = Grid.GetRow(b);
    if (col == row)
    {
        Grid.SetColumn(b, ++col % 2);
    }
    else
    {
        Grid.SetRow(b, ++row % 2);
    }
}

The first thing this method does is create a new variable of type Button and assigns it a reference to the sender variable. This is important because Button derives from UIElement and the next few operations require a UIElement object as the parameter. Next, the method gets the current column and row index by using a static method of the Grid class. Finally, the method uses a simple algorithm to determine where to move the button and change the row or column index as appropriate. You know that if the row and column indices are the same, then the column needs to change. If the row and column indices are different then the row needs to changes. In either case you use another static method of the Grid class to set the button’s row or column. The appropriate index is determined using some simple math.

At this point, we’re done with the sample application. Press CTRL+F5 to compile and launch your application and then try clicking your button. You’ll see it move around the grid each time you click. Try using the emulator’s controls to change the phone’s orientation and you’ll see that the application adapts with no problems at all.

Learning More

We’ve only just touched on the subject of Windows Phone 7 development in this tutorial. While you’re now familiar with the basics of creating an application with Silverlight, you’ll likely want to learn more about XAML, Silverlight, XNA, and Windows Phone 7 development in general. Luckily, there are already several resources you can turn to:

• Windows Phone Developer Center
• XNA Developer Center
• Charles Petzold’s Windows Phone 7 Book
• Scott Gu’s Mix 10 Windows Phone 7 Demo