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.

Advertisements

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)
   {
      vm.GetFirstPage.Execute(null);
      UpdateMenuButtons(vm);
   }
}

public void UpdateMenuButtons(MainViewModel vm)
{
   if (vm)
   {
      if (PageNumber == 1) // ViewModel DependencyProperty
      {
         ((ApplicationBarIconButton)ApplicationBar.Buttons[0]).IsEnabled = false;
         ((ApplicationBarIconButton)ApplicationBar.Buttons[1]).IsEnabled = false;
      }
      else
      {
         ((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()
{
   InitializeComponent();
   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;
   m.UpdateMenuButtons(null);
}

public void UpdateMenuButtons()
{
   if (IsUserInFirstPage)
   {
      ((ApplicationBarIconButton)ApplicationBar.Buttons[0]).IsEnabled = false;
      ((ApplicationBarIconButton)ApplicationBar.Buttons[1]).IsEnabled = false;
   }
   else
   {
      ((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 –


<ProgressBar
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Width="400"
    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
   {
      get
      {
         return _isProgressBarVisible;
      }
      set
      {
         if (_isProgressBarVisible == value)
         {
            return;
         }
         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"
         };

         Titles.Add(title);
      }
      CurrentPage = 1;
   }
   else
   {
      IsProgressBarVisible = true;

      NetflixCatalog _catalog = new NetflixCatalog(new System.Uri("http://odata.netflix.com/catalog"));
      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>;
      dsq.BeginExecute(
            (callback) =>
            {
               var results = dsq.EndExecute(callback);
               DispatcherHelper.CheckBeginInvokeOnUI(() =>
               {
                  Titles.Clear();
                  foreach (var item in results)
                  {
                     Titles.Add(item);
                  }
                  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.

Summary

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.

Screenshots


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 www.bingmapsportal.com. 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

Lawson Smart Office – A WPF Line-Of-Business application

In a recent video posted on Channel 9, Adam Kinney talks to Matthew Allbee from Lawson Software about a smart client application developed entirely in WPF, screenshots of which surfaced earlier this year. In the short video, Matthew demonstrates the application which is similar to a desktop session, one where the user switches between a number of applications (WPF 3D has been used with Visual Brush to preview open forms – awesome!), opens Microsoft Office appllications, etc. The application integrates with the Lawson backend, shorcuts and other user preferences are all stored for the user. The application has 10,000 forms and it is growing! Lawson’s smart office is yet another line-of-business application developed with WPF, after we all saw Billy Hollis showing of StaffLynx which I have blogged about earlier.

Here is a screenshot of the application (Courtesy : Lawson) –

Lawson Smart Office

Lawson Smart Office

Jaieme Rodriguez has posted some more screenshots in a recent post. Head over to Channel 9 and watch the video!

WPF Bootcamp 2008

If you, like me, didn’t have a chance to attend the WPF Bootcamp 2008 (Note: Requires Silverlight 2), or, if you attended and would like to download and watch the sessions again, they are available for download here. The source code used in the demonstrations is also available. Session presenters include Karsten Januszewski, Robbie Ingebretsen, Jonathan Russ, Greg Schechter, Jaime Rodriguez, Adam Smith, Alan Le, Josh Wagoner & Josh Smith. Sessions of particular interest are by Adam Smith (WPF Performance), Josh Wagoner (Real World WPF) and the excellent introductory series by Jonathan Russ and Robbie Ingebretsen.

These free resources are definitely worth going through, I am sure they will help in the WPF journey!

The dreaded AddressAccessDeniedException

About six months ago, I made the switch from developing with the .NET framework on Windows XP to Windows Vista (My main development rig runs Windows Vista Business 64-bit which is rock solid, I use Virtual PC 2007 SP1 to run virtual machines for development, testing, trials, etc. I even have a openSuse VM for Mono work!). I was flying high with Vista Service Pack 1 installed on the development VM until I hit the dreaded AddressAccessDeniedException –

AddressAccessDeniedException in Visual Studio 2008

AddressAccessDeniedException in Visual Studio 2008

Fortunately, this was not the first time I encountered this exception. In the first major project where I developed a workflow-driven business layer exposed with the WCF WorkflowServiceHost, I spent about three hours fighting with the exception during a deployment drill, until I hit the cause of the issue and found a solution. Digging deep to find a nice solution, I initially tried using httpcfg.exe as outlined in this MSDN article but soon gave up.

Fast forward to present – I am using a console application to host a workflow which is exposed to clients using a WCF WorkflowServiceHost. I use WSHttpContextBinding as the binding for the endpoint. The console application runs well within Visual Studio 2008 when I use a Windows XP Service Pack 3 VM for testing. I encounter the exception when I attempt to run the same console application in Vista. I turned off UAC (Yes, you may ask me why do I use Vista then!), restarted Visual Studio and it was all good. Next, I turned on UAC, right-click on the Visual Studio 2008 shortcut, and select “Run as administrator”. The console application runs fine without any exceptions! I coudn’t justify myself running Visual Studio with elevated permissions in Windows Vista without finding a way to add the reserved HTTP namespace to the group of users my logged in account belongs to.

I refreshed my memory of an excellent tool that I used the last time I encountered the same exception during the deployment drill on a server running Windows Server 2003. This tool is called HttpNamespaceManager, developed and shared by Paul. This tool can be used to manage HTTP namespaces. It provides a user interface that is simple and easy to follow. When adding a reserved HTTP namespace to the list, use the string http://+:9000/ (This is only an example; I was using http://localhost:9000 to host the workflow) in the “Enter URL” popup, followed by “BUILTIN\Users” in the “Permissions” popup – “Group or User Names” section. After entering the users group, turn on the “GenericExecute” option. Close all the pop-up windows and try running the application. The exception does not appear again.

In summary, there are two (nice) ways to resolve the exception –

  • Run Visual Studio 2008 as administrator.
  • Run the HttpNamespaceManager tool and the HTTP namespace the group of users your user account belongs to.

I had hoped that with Visual Studio 2008 SP1 this issue will have been resolved. However, this is not the case. I am guessing this is perhaps the a requirement for Visual Studio 2008 – not to allow the user to access reserved HTTP namespaces unless explicit permission is granted.

Have a nice day!
Indy