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:
- Visual Studio 2010 Express for Windows Phone
- XNA Game Studio 4.0
- Silverlight 4.0
- Microsoft .NET Framework 4.0
- Windows Phone 7 Series Emulator
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
MainPage.cs file we see the following class:
public partial class MainPage : PhoneApplicationPage
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
private void ListBoxOne_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
// Capture selected item data
_selectedItem = (sender as ListBox).SelectedItem;
// Start page transition animation
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.
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
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
void PageTransitionDetails_Completed(object sender, EventArgs e)
// Reset root frame to MainPage.xaml
PhoneApplicationFrame root = (PhoneApplicationFrame)Application.Current.RootVisual;
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
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
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.