Windows Phone Developer Tools RTM

The Windows Phone 7 developer tools went RTM (Release to Manufacturing) today. This release includes

  • Visual Studio 2010 Express for Windows Phone 7
  • XNA Game Studio for Windows Phone 7
  • Expression Blend 4 for Windows Phone 7
  • Windows Phone 7 Emulator

Go ahead and download them now! In addition to the developer tools, the Silverlight toolkit for Windows Phone 7 was also released today, they can be downloaded here. Microsoft has also released the Mobile Advertising SDK for use within apps to generate revenue.

The Windows Phone 7 Training Kit for Developers has been refreshed for the RTM release, it is available for download here.

Some useful blog posts announcing the release are –

Updgrading Windows Phone 7 projects developed with Beta/CTP tools

All Windows Phone 7 applications developed with the Beta or CTP tools need to be upgraded & compiled with the release tools before submission to the Windows Phone Marketplace. Applications prepared with Beta or CTP tools submitted to the marketplace will fail application certification. There are no breaking changes from the Beta tools release. The release notes (Pete Brown’s post has a nice summary & details) lists the changes.

New Controls in the Developer Tools Release

There are three new controls in the developer tools release –

  • Panorama control – Useful for building an application’s “Home” screen.
  • Pivot control – Useful for building views that show filtered data.
  • Bing Maps control – This control can be used to add a map to your application, it has a free commercial license.

Silverlight controls toolkit for Windows Phone 7

The Silverlight toolkit for Windows Phone 7 has been released with full source with MS-PL license. Tim Heuer’s post and David Anson’s post discuss in detail the controls that are available in the toolkit. Here is a list of the controls –

  • ContextMenu and ContextMenuService
  • DatePicker and TimePicker
  • ToggleSwitch
  • WrapPanel
  • GestureListener and GestureService
  • WrapPanel –

There is a sample application built with the Silverlight toolkit available here, it shows how the controls can be used in an application. John Papa talks to Kirupa Chinnathambi in this Channel 9 video where a Bing web and image search application is build by only using Expression Blend. The application uses the WrapPanel, Panorama and Pivot controls with the Bing search API.

Uninstalling the Beta Tools and Installing the RTM tools

The Beta tools can be uninstalled through “Programs and Features” item in the Control Panel (Windows 7), selecting the “Microsoft Windows Phone Developer Tools Beta – ENU”, right-click and select Uninstall.

Uninstall Beta Tools

The RTM developer tools can be installed with the online installation tool available here. The ISO of the developer tools is available here. The online installer detects installed Visual Studio tools and downloads & installs the right set of tools required for Windows Phone 7 development.

I will be updating the ListBox pagination post to work with the RTM tools. I am working on a number of Windows Phone 7 applications that are user-centric, with a focus on using the applications in the phone as a companion in the user’s daily activities.

Windows Phone 7 ListBox Pagination with MVVMLight & ApplicationBar

I am currently working on a Windows Phone 7 application where MVVMLight forms the foundation of the application. In a certain part of the application, I have the following requirements –

  1. Items in a ListBox to be loaded on demand by the user, with the user having the ability to paginate through the ListBox.
  2. The page number the user is currently viewing should be displayed in the page.
  3. The application requires a “First Page”, “Next Page” and a “Previous Page” button.
  4. While viewing the first page, the “First Page” and “Previous Page” buttons are disabled.
  5. When the user clicks the “First Page” button & arrives at the first page of the list of items, the “First Page” & “Previous Page” button are disabled.
  6. While browsing through the list of items with the “Previous Page” button, the “First Page” and “Previous Page” buttons are disabled when the user at the first page of the list of items.
  7. The application must show an “application is busy” indicator while data  is being loaded after a button is clicked.

In the process of implementing these requirements & building the application, I learned a lot about MVVM pattern and its usage in an application with MVVMLight. In this post, I illustrate how these requirements can be implemented using MVVMLight. I will use a sample data source (Netflix OData Catalog) to illustrate how I implemented these requirements. Please feel free to comment on the post and the source code (available for download below). Please note that I have used Laurent Bugnion’s MVVMLight Windows Phone 7 project templates (with the WP7 hotfix applied) to develop this sample. I generated the proxy class for the Netflix OData services and followed the steps in Shawn’s OData post. More Windows Phone 7 development resources are available here.

Initial attempt to implement the requirements

My initial attempt to implement these requirements was to wrap the ListBox in a UserControl and add a panel with three buttons required for pagination through the ListBox. However, after reading the user interface guidelines and going through a bunch of design considerations, I decided to use the ApplicationBar to place the ListBox pagination buttons.I went ahead with the plan and added the icons and the three buttons –

The biggest challenge in implementing this requirement using the ApplicationBar is that it is not a Silverlight element and hence binding its properties and events is not possible through the view’s XAML (For a detailed explanation, read Peter Torr’s post – “Why are ApplicationBar objects not FrameworkElements?“). Laurent Bugnion proposes a neat way of binding RelayCommands in the ViewModel through the click events of the button and menu item of ApplicationBar. This approach fulfilled my requirement of binding the click event of the buttons in the ApplicationBar. However, to implement the requirements  #4, #5 & #6 above, I had to bind the “IsEnabled” property of the “ApplicationBarIconButton” to the ViewModel. My first attempt at implementing these three requirements was to check the “PageNumber” property of the ViewModel and set the “IsEnabled” property through the Click event handler of the “ApplicationBarIconButton” –

private void FirstButton_Click(object sender, System.EventArgs e)
   var vm = DataContext as MainViewModel;
   if (vm != null)

public void UpdateMenuButtons(MainViewModel vm)
   if (vm)
      if (PageNumber == 1) // ViewModel DependencyProperty
         ((ApplicationBarIconButton)ApplicationBar.Buttons[0]).IsEnabled = false;
         ((ApplicationBarIconButton)ApplicationBar.Buttons[1]).IsEnabled = false;
         ((ApplicationBarIconButton)ApplicationBar.Buttons[0]).IsEnabled = true;
         ((ApplicationBarIconButton)ApplicationBar.Buttons[1]).IsEnabled = true;

A refinement of the above approach

This approach just works fine, however, I didn’t like the fact that the View was tightly coupled to the ViewModel. I spent some time investigating patterns to decouple the View from the ViewModel & Laurent kindly pointed out a nice way to decouple the View from the ViewModel (read his suggestion here). This is how I implemented it –

public MainPage()
   var vm = DataContext as MainViewModel;
   if (vm != null)
     SetBinding(IsUserInFirstPageProperty, new System.Windows.Data.Binding("IsFirstPage") { Source = vm });

public bool IsUserInFirstPage
   get { return (bool)(GetValue(IsUserInFirstPageProperty)); }
   set { SetValue(IsUserInFirstPageProperty, value); }

public static readonly DependencyProperty IsUserInFirstPageProperty =
   DependencyProperty.Register("IsUserInFirstPage", typeof(bool), typeof(MainPage),
          new PropertyMetadata(new PropertyChangedCallback(OnIsFirstPreviousButtonEnabledChanged)));

private static void OnIsFirstPreviousButtonEnabledChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
   MainPage m = (MainPage)o;

public void UpdateMenuButtons()
   if (IsUserInFirstPage)
      ((ApplicationBarIconButton)ApplicationBar.Buttons[0]).IsEnabled = false;
      ((ApplicationBarIconButton)ApplicationBar.Buttons[1]).IsEnabled = false;
      ((ApplicationBarIconButton)ApplicationBar.Buttons[0]).IsEnabled = true;
      ((ApplicationBarIconButton)ApplicationBar.Buttons[1]).IsEnabled = true;

With this approach, the View is no longer tightly coupled with the ViewModel.

Adding a ProgressBar

I decided to use Jeff Wilcox’s PerformanceProgressBar (discussed in detail in this blog post). The progress bar is added in “MainPage.xaml” through the following XAML –

    IsIndeterminate="{Binding IsProgressBarVisible}"
    Style="{StaticResource PerformanceProgressBar}"
    Visibility="{Binding IsProgressBarVisible, Converter={StaticResource performanceProgressBarVisibilityConverter}}" />

Note that the progress bar style is added to the application resources in “App.xaml”. The progress bar should be visible when the Netflix OData endpoint is queried and must be invisible after data has been loaded. In order to accomplish this, I have used a dependency property on the ViewModel –

   // Do we show the progress bar?
   public const string IsProgressBarVisiblePropertyName = "IsProgressBarVisible";

   private bool _isProgressBarVisible = true;

   public bool IsProgressBarVisible
         return _isProgressBarVisible;
         if (_isProgressBarVisible == value)
         var oldValue = _isProgressBarVisible;
         _isProgressBarVisible = value;

         // Update bindings and broadcast change using GalaSoft.MvvmLight.Messenging
         RaisePropertyChanged(IsProgressBarVisiblePropertyName, oldValue, value, true);

This “IsProgressBarVisible” property is updated before the query on the Netflix OData endpoint is issued and after the query completes & the data has been updated in the ListBox –

private void UpdateCatalog()
   if (IsInDesignMode) // Create design time data for Blendability
      Titles = new ObservableCollection<Title>();
      for (var index = 0; index < 20; index++)
         var title = new Model.Title
            Name = "Loboris adiptis",
            ShortSynopsis = "Facilisi faucibus habitant inceptos interdum lobortis nascetur pharetra placerat pulvinar sagittis senectus sociosqu"

      CurrentPage = 1;
      IsProgressBarVisible = true;

      NetflixCatalog _catalog = new NetflixCatalog(new System.Uri(""));
      var query = _catalog.Titles.Where(t => t.Rating == "PG").OrderByDescending(t => t.AverageRating)
                          .Skip((CurrentPage - 1) * 20) // 20 items to skip
                          .Take(20); // 20 items to fetch
      var dsq = query as DataServiceQuery<Title>;
            (callback) =>
               var results = dsq.EndExecute(callback);
               DispatcherHelper.CheckBeginInvokeOnUI(() =>
                  foreach (var item in results)
                  IsProgressBarVisible = false;
            }, null);

Alternative approach

Nicolas Humman recently published a post where he showed how to wrap the ApplicationBar into a control to provide binding through XAML. While this alternative approache may be suitable for my requirements, I didn’t feel confident that wrapping a non-FrameworkElement into a control is considered good practice.


In this post, I have highlighted a few key points that a Windows Phone 7 developer may encounter while s/he develops an application –

  • Data and Event binding through XAML, minimum code-behind approach.
  • Blendability – allows designers to work independent of the developer. (Note that in my approach, I have constructed the design-time data in code-behind, an alternative is use XAML provide design-time data.)
  • Decoupling of Views and ViewModels.
  • Usage of ApplicationBar for navigating through pages in a ListBox.
  • Usage of PerformanceProgressBar and applying the IsIndeterminate property.

Resources I have referred while working with MVVM & MVVMLight on Windows Phone 7 –

This post does not illustrate –

  • Dependency injection and is usage in ViewModelLocator (@kellabyte has two excellent posts that illustrate how to use NInject and MEF to use dependency injection in ViewModelLocator).
  • Data virtualization best practices (Peter Torr’s post & Shawn Oster’s post are good references for this).
  • Unit testing and testability of a Windows Phone 7 application.

Source Code

The source code for this sample application is available here. Please rename the file to .zip and uncompress.


Quick tip – Set the correct time in Windows Phone 7 emulator

I have been working on building a Windows Phone 7 application that retrieves JSON data from a popular programming community site (Blog post and app source coming soon). I wrote a time span converter and used it to bind the value of the timespan of the occurrence of an event from the current time to a Textblock element in a page in the app. I was surprised to see the converter fail to cast the timespan value to the right format. Debugging through the converter, I found that the current time used for calculation of timespan was 1/08/2010 01:45:23 while the current time was 17/08/2010 23:30:00!

I wanted to make sure DateTime.Now returned the correct value when required. I created a simple single page app for Windows Phone 7, added a button & an event handler for its Click event. The Click event handler formatted the current date & time and set it in the textblock. I compiled & ran the app, clicked on the button and saw the current date to be 01/08/2010 02:02:48 –

I started looking around for clues and recalled the time when I installed the Beta developer tools on the PC I was working on, it was the 1st of August! I started looking for any configuration or settings files that is used by the emulator during the boot process. I ended up finding these files which looked interesting –

I shutdown the emulator, copied out the two files to a safe location and deleted the two files in C:\ProgramData\Microsoft\XDE. I restarted the emulator to see it doing a complete OS boot –

I tried running the test application and found the time was correct –

This seems to a be a bug in the Beta developer tools where the Windows Phone emulator does not pick up the current time from the host operating system or elsewhere. Until the issue is fixed, the workaround is to delete the two saved state files from C:\ProgramData\Microsoft\XDE (Note: The drive letter may be different for your installation) and start the emulator every time you are working with the emulator.

Quick tip : Compile & run Windows Phone 7 Foursquare App with a Bing Maps Key

Foursquare is a popular social application these days. The awesome folks at Foursquare built a Windows Phone 7 application and released the source code to the public. The source code (actually, a fork) was recently updated to work with the Windows Phone 7 Beta Tools, the fork is available here. If you have downloaded and compiled the source code and loaded it on the Windows Phone 7 emulator to run, you will see the following error if you click on any of the links in the main page –

If you head to the URL shown in the message box, sign in with your Live ID and create an AppId, set the AppId in the  “MapHelper.cs” file, expecting that the App to work afterwards, you might be disappointed to the see an exception raised in “ImageryService.cs” (in the method “EndGetMapUri”).

In order to compile and run the Foursquare app on the Windows Phone 7 Emulator, we will need a “Bing Maps API Key” from Once you have logged in with your Live ID, you can create a new key and copy the key into “MapHelper.cs” file, compile the application and run it –

Hope this helps someone.

More Windows Phone 7 development resources