Welcome to EMC Consulting Blogs Sign in | Join | Help

Jon Sharratt's Blog

Windows Phone 7 MVVM Silverlight Template - Update

After my previous post seems to have gained some interest I decided to update it to add even more functionality.  But rather than just leaving everyone to there own devices I thought I would explain a few things within the template.  So lets begin….

First of all I have now moved the project into CodePlex and can be located at http://wp7template.codeplex.com feel free to post problems or suggestions.

Launcher Manager

The launcher manager exposes all launchers that are available for Windows Phone 7.  If you are not aware of launchers MSDN has a great set of documentation on what is available (http://msdn.microsoft.com/en-us/library/ff769550%28v=VS.92%29.aspx).  To use the launchers all you need to do is add the dependency into your View Model and execute the relevant methods exposed to you.  Launchers are tasks that have no call backs after they are executed.

Below is a simple example of a view model that has a command to launch a phone call task.

   1: public class LauncherChooserViewModel : ViewModelBase
   2: {
   3:     /// <summary>
   4:     /// The injected launcher manager.
   5:     /// </summary>
   6:     private readonly ILauncherManager launcherManager;
   7:  
   8:     /// <summary>
   9:     /// Initializes a new instance of the <see cref="LauncherChooserViewModel"/> class.
  10:     /// </summary>
  11:     /// <param name="launcherManager">The launcher manager.</param>
  12:     public LauncherChooserViewModel(
  13:         ILauncherManager launcherManager)
  14:     {
  15:         this.launcherManager = launcherManager;
  16:  
  17:         this.WireEvents();
  18:         this.WireCommands();
  19:     }
  20:  
  21:     /// <summary>
  22:     /// Wires the events.
  23:     /// </summary>
  24:     private void WireEvents()
  25:     {
  26:     }
  27:  
  28:     /// <summary>
  29:     /// Wires the commands.
  30:     /// </summary>
  31:     private void WireCommands()
  32:     {
  33:         this.MakePhoneCallCommand = new RelayCommand(MakePhoneCall);
  34:     }
  35:  
  36:     /// <summary>
  37:     /// Makes the phone call.
  38:     /// </summary>
  39:     private void MakePhoneCall()
  40:     {
  41:         this.launcherManager.MakeCall(new PhoneNumber("Jon Sharratt", "000000000000"));
  42:     }
  43:  
  44:     /// <summary>
  45:     /// Gets or sets the make phone call command.
  46:     /// </summary>
  47:     /// <value>The make phone call command.</value>
  48:     public ICommand MakePhoneCallCommand { get; private set; }
  49: }

Chooser Manager

The chooser manager has the same principles as the launcher manager but with a subtle difference that they can return a TaskResult.  For example you can execute the choose photo task and upon a user selecting an image this will be returned in the result for you to use.  Lets take this as an example and add it to our View Model.  You will notice we attach to the ChoosePhotoTaskCompleted event.  This will fire once a user has selected a photo returning the appropriate result.

   1: public class LauncherChooserViewModel : ViewModelBase
   2: {
   3:     /// <summary>
   4:     /// The injected launcher manager.
   5:     /// </summary>
   6:     private readonly ILauncherManager launcherManager;
   7:  
   8:     /// <summary>
   9:     /// The injected chooser manager.
  10:     /// </summary>
  11:     private readonly IChooserManager chooserManager;
  12:  
  13:     /// <summary>
  14:     /// Initializes a new instance of the <see cref="LauncherChooserViewModel"/> class.
  15:     /// </summary>
  16:     /// <param name="launcherManager">The launcher manager.</param>
  17:     /// <param name="chooserManager">The chooser manager.</param>
  18:     public LauncherChooserViewModel(
  19:         ILauncherManager launcherManager,
  20:         IChooserManager chooserManager)
  21:     {
  22:         this.launcherManager = launcherManager;
  23:         this.chooserManager = chooserManager;
  24:  
  25:         this.WireEvents();
  26:         this.WireCommands();
  27:     }
  28:  
  29:     /// <summary>
  30:     /// Wires the events.
  31:     /// </summary>
  32:     private void WireEvents()
  33:     {
  34:         this.chooserManager.ChoosePhotoTaskCompleted += ChoosePhotoTaskCompleted;
  35:     }
  36:  
  37:     /// <summary>
  38:     /// Chooses the photo task completed.
  39:     /// </summary>
  40:     /// <param name="sender">The sender.</param>
  41:     /// <param name="e">The <see cref="PhotoResult"/> instance containing the event data.</param>
  42:     private void ChoosePhotoTaskCompleted(object sender, EventArgs<PhotoResult> e)
  43:     {
  44:         if (e.Value.TaskResult == TaskResult.OK)
  45:         {
  46:             MessageBox.Show(e.Value.OriginalFileName);
  47:         }
  48:     }
  49:  
  50:     /// <summary>
  51:     /// Wires the commands.
  52:     /// </summary>
  53:     private void WireCommands()
  54:     {
  55:         this.MakePhoneCallCommand = new RelayCommand(MakePhoneCall);
  56:         this.SelectPhotoCommand = new RelayCommand(SelectPhoto);
  57:     }
  58:  
  59:     /// <summary>
  60:     /// Makes the phone call.
  61:     /// </summary>
  62:     private void MakePhoneCall()
  63:     {
  64:         this.launcherManager.MakeCall(new PhoneNumber("Jon Sharratt", "000000000000"));
  65:     }
  66:  
  67:     /// <summary>
  68:     /// Selects the photo.
  69:     /// </summary>
  70:     private void SelectPhoto()
  71:     {
  72:         this.chooserManager.ChoosePhoto();
  73:     }
  74:  
  75:     /// <summary>
  76:     /// Gets or sets the make phone call command.
  77:     /// </summary>
  78:     /// <value>The make phone call command.</value>
  79:     public ICommand MakePhoneCallCommand { get; private set; }
  80:  
  81:     /// <summary>
  82:     /// Gets or sets the select photo command.
  83:     /// </summary>
  84:     /// <value>The select photo command.</value>
  85:     public ICommand SelectPhotoCommand { get; private set; }
  86: }

Theme Extension

Just a small addition I have within the project is the ability within the view model logic to easily determine the current theme enabled on the phone.  To do this it is as simple as the following:

   1: if (Application.Current.Theme() == Theme.Dark)

Pivot or Panorama

The template itself is based on the default Visual Studio 2010 templates that comes out of the box with the Windows Phone 7 Developer Tools. The template also includes the default view for a Panorama application so you can easily get started whatever route you wish to take.

Basically if you wish to get going on a Panorama style application all you require to do is open the WMAppManifest.xml file and amend the the navigation page from PivotMainPage.xaml to PanoramaMainPage.xml and then delete the PivotMainPage.xaml file located within the Views folder.

That’s all for now folks…. next stop testing and globalization.

Twitter: @jsharratt

Published 11 November 2010 11:51 by jon.sharratt

Comments

No Comments
Anonymous comments are disabled

This Blog

Syndication

News

Powered by Community Server (Personal Edition), by Telligent Systems