Getting Started With Windows Phone 7 Series Development

Windows Phone 7 Series Operating System & Silverlight Developer Tools

At the opening keynote for MIX 2010 this year Microsoft provided an extensive demonstration of the new Windows Phone 7 Series operating system and development tools. While the operating system is very impressive, the demonstrations show just how easy it is to create applications. The Windows Phone 7 Series is a complete departure from the prior Windows Mobile operating system and the development environment reflects the change. The new OS allows for two different types of applications to be created using Microsoft Visual Studio 2010 and Silverlight 4.0 or XNA Game Studio 4.0. This article will focus primarily on the Silverlight development as most non-game applications will use it; however, XNA Game Studio will be installed in addition to the other tools needed for development. Microsoft has provided a simple installer which can be accessed at http://developer.windowsphone.com. The install package includes the follwing components needed for development:

In order to be able to install these tools you will need to be running on either Windows Vista or Windows 7. In addition you will need to be running on actual hardware as the Windows Phone 7 Series Emulator is not able to run inside a virtual machine. Download the install package and follow the instructions to install the tools.

Microsoft Visual Studio 2010 Express for Windows Phone 7 Series

To get started we need to launch Visual Studio 2010. To create our first application, click on New Project on the start page. The New Project window should be displayed as shown below in Figure 1.



Figure 1 – New Project Dialog

As you can see there are three templates available forcreating Silverlight applications. The Windows Phone Application template will create an empty application with a single form. The Windows Phone List Application provides setup for a list/detail style application and is the one we will dig into futher. Lastly, the Windows Phone Class Library is used for creating class libraries used by applications. We will go ahead and create the Windows Phone List Application as it provides many of the basics needed in an application.

Now that we have a basic application we can go ahead a start the application by either clicking on the play button or in the Debug menu Start Debugging After a few minutes you should see the Windows Phone 7 Emulator with your application running as shown below.



Figure 2 – Windows Phone 7 Series Emulator

The home screen of the application provides a very simple scrolling list interface. You can use the mouse to scroll up and down or click on one of the items to access the details page. On the details page you can use the back button (left arrow at the bottom) to return to the list. If you click on the Window you will return back to the home screen for the phone. You should see an Internet Explorer icon as well as a right arrow next to it. By the way, Internet Explorer does work in the emulator. To return back to your application, click on the right arrow which will take you the list of all applications. You can click on the name of your project to return back to the application. A couple other things to note at this point is that the emulator is able to accept multi-touch and handle rotating the device. To be able to use multi-touch, you will need to be using Windows 7 with a monitor capable of multi-touch. Rotating the device on the other hand is fairly simple. There are two icons on the floating bar next to the emulator which simulate rotating the phone. You can use these buttons to test your application works properly in the different orientations.

If you rotate the phone while the list application is running you should notice that the main list does not work in landscape mode where as the detail screen does. This is actually intentional and is set in code which we will jump into next.

Basic List Application Code Walkthrough

As this point you can return back to Visual Studio 2010 and stop debugging. It is not necessary to close the emulator each time you stop debugging as the emulator can be used across multiple debugging sessions. After returning to Visual Studio we can start by opening up MainPage.xaml. As you can see editing this page is split in the middle to reflect the design view of the page in phone on the left and the XAML code on the right. The XAML code is your normal Silverlight, just tailored to the phone. If youre a SilverlightDeveloper or a Windows Presentation Foundation (WPF) developer, you should feel right at home.

There are a couple XAML tags which are worth discussing. The first tag contains two Storyboard resources which are used to provide animation when changing away from the MainPage. So what this means is that when changing pages, the phone itself does an immediate page switch. The animation used when changing pages is controlled through your code and not the operating system. The actual content on the page is stored within the grid tag. This grid contains two rows, one for the header and the other for the list box. The list box provides two rows of detail for each item in the list box and is populated using standard Silverlight / WPF data binding. Next, inside the MainPage.cs file we see the following class:


public partial class MainPage : PhoneApplicationPage
{
 object _selectedItem;

  public MainPage()
  {
&n      InitializeComponent();

     SupportedOrientations = SupportedPageOrientation.Portrait;
     Loaded += new RoutedEventHandler(MainPage_Loaded);
     PageTransitionList.Completed += new EventHandler(PageTransitionList_Completed);
    
     // Set the data context of the listbox control to the sample data
     DataContext = new MainViewModel();
  }

  private void MainPage_Loaded(object sender, RoutedEventArgs e)
  {
     // Reset page transition
     ResetPageTransitionList.Begin();
  }

  private void ListBoxOne_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
  {
     // Capture selected item data
     _selectedItem = (sender as ListBox).SelectedItem;

     // Start page transition animation
     PageTransitionList.Begin();
  }

  private void PageTransitionList_Completed(object sender, EventArgs e)
  {
     // Set datacontext of details page to selected listbox item
     NavigationService.Navigate(new Uri(“/DetailsPage.xaml”, UriKind.Relative));
     FrameworkElement root = Application.Current.RootVisual as FrameworkElement;
     root.DataContext = _selectedItem;
  }
}


Starting with the constructor, the first call is to the standard InitializeComponent(). The next method sets the SupportedOperations property, which for this page only allows Portrait mode. Next, we add a handler to the Loaded event and the PageTransitionList storyboard Completed event. The purpose for these handlers will be discussed below. Finally the constructor creates an instance of the MainModelView class and assigns it to the DataContext. Which then provides the form a source for the page to data bind.

Next is the MainPage Loaded event handler. The only function performed in this event handler is to trigger the ResetPageTransitionList storyboard to begin. So you may ask, why is this necessary? The answer is not obvious at first; however, this becomes important when you are returning from another page such as the DetailsPage page. When you go to the DetailsPage by clicking on an item in a list, the code will run the storyboard to animate the transition; however, you need to restore the MainPage back to its normal state for viewing.

The next two event handlers operate in conjunction to jump to the DetailsPage. The first event handler of the pair is the MouseLeftButtonUp event for the list box. This handler first saves the selected item into a local variable to be used in the second handler, then launches the PageTransitionList storyboard. The second event handler of the pair is the Completed for the PageTransitionList storyboard. This event executes at the completion of the transition animation and invokes the NavigationService to switch pages, then it sets the data context of the DetailsPage to the selected item. If you would prefer not to use the PageTransitionList storyboard animation in the change page process you can move the method calls into the MouseLeftButtonUp event handler. One reason you may choose to take this route is to reduce the amount of time needed in page transition.

DetailsPage

The DetailsPage discussed briefly above is setup fairly similar to the MainPage in regard to the layout, storyboards, etc. This import part of this page to bring up is the changes in the C# code as listed below.



public partial class DetailsPage : PhoneApplicationPage
{
  public DetailsPage()
  {
     InitializeComponent();
     PageTransitionDetails.Completed += new EventHandler(PageTransitionDetails_Completed);
     SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;
  }

  // Handle navigating back to content in the two frames private void
  PhoneApplicationPage_BackKeyPress(object sender, System.ComponentModel.CancelEventArgs e)
  {
     // Cancel default navigation
     e.Cancel = true;

     // Do page ransition animation
     PageTransitionDetails.Begin();
  }

  void PageTransitionDetails_Completed(object sender, EventArgs e)
  {
     // Reset root frame to MainPage.xaml
     PhoneApplicationFrame root = (PhoneApplicationFrame)Application.Current.RootVisual;
     root.GoBack();
  }
}


The important items to note about the code above is first the BackKeyPress handler which captures the user pressing the back button. Within this event handler, the first step performed is to cancel the default operation for the back button. Then the handler starts the PageTransitionDetails storyboard. The purpose for handling this event and canceling the base operation is to simply launch the storyboard animation and then actually go back to the prior page in the Completed event for the PageTransitionDetails storyboard.

DataBinding Support Components

There are three components provided out of the box to support databinding for this project. The first component is the MainViewModelSampleData.XAML which is simply used to provide static data so the forms have something to data bind to in design time. This XAML file is not used at runtime as the Constructor for the MainPage changes the data context over to an instance of the MainViewModel class. The MainViewModel class is used to manage and initialize a generic ObservableCollection of type ItemViewModel. The ObservableCollection coupled with a type which implemente INotifyPropertyChange allows the famework to automatically update the UI without explicitly writing code to accomplish this. Essentially, by using this technique you can add/remove items from the ObversableCollection and/or change properies of the items in the list and the framework will automatically make the changes in the UI.

Where to Next? and Conclusion

While the above project provides visual elements and basic animations, it really doesn’t do anything useful yet. To really turn this into a useful project you first need to choose what data your application will store and modify the ItemViewModel class and the sample data used at design time. Next, determine how this information is to be populated (local storage or through web service calls). At this point in the development of the Windows Phone 7 Series platform, it currently does not have a local database as was the case for Windows Mobile devices. However, it does have local storage for both settings and files which can be accessed through the System.IO.IsolatedStorage namespace. Since many applications access data in the cloud using WebServices your application may not need to use local storage at all. In addition, your application will probably need to provide editing capabilities to information within the list. You can simply add another page which can be accessed off the details and use data binding to simplify the process of updating the selected item within the list.

While the developer tools make it very easy to develop applications, this device is a complete departure from prior versions of Windows Mobile. And as such, many of the applications and techniques used on prior versions do not apply. The http://developer.windowsphone.com website provides a large set of resources and the traditional framework documentation. Keep in mind the tools released at this point are currently released as Community Technology Preview (CTP) and may contains bugs. One important thing to note is that other than for development, applications can only be installed on the phone through the Microsoft marketplace. What this means is that your application will need to go through an approval process prior to being able be distributed through the store.

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read