As noted in earlier posts, Mango represents a move from Silverlight 3+ to Silverlight 4, and with that comes ICommand on ButtonBase and Hyperlink (and classes that derive from these two). 

This is a significant breakthrough, especially if you are programming with MVVM.  

ICommand allows you to bind an action as a property, thus keeping a clean separation from the controlling class (typically the view model) to the presentation class (typically the view). 

To see this at work, we’ll create a program that retrieves data from a (pseudo-) web service, and displays that data when a button is pushed. 

To do this, I created a new program in Mango. The Xaml consists of a button (Load) and a list box (initially empty).  I opted to put a white border on the list box so that it acts as a placeholder.

The heart of the program sits in DelegateCommand.cs where I implement ICommand.

In his excellent article on ICommand John Papa describes 5 steps for Commanding in Silverlight, and I followed the five steps exactly to do the same in Windows Phone. What worked in Silverlight now works in the Phone.

John says, Step 1: Implement ICommand – that is,  implement the interface, which I do in the DelegateCommand class.

using System;
using System.Windows.Input;

namespace ICommandPhone
{
   public class DelegateCommand : ICommand
   {
      Func<object, bool> canExecute;
      Action<object> executeAction;
      bool canExecuteCache;

      public DelegateCommand(
            Action<object> executeAction,
            Func<object, bool> canExecute )
      {
         this.executeAction = executeAction;
         this.canExecute = canExecute;
      }

      public bool CanExecute( object parameter )
      {
         bool temp = canExecute( parameter );

         if ( canExecuteCache != temp )
         {
            canExecuteCache = temp;
            if ( CanExecuteChanged != null )
            {
               CanExecuteChanged( this, new EventArgs() );
            }
         }

         return canExecuteCache;
      }

      public event EventHandler CanExecuteChanged;

      public void Execute( object parameter )
      {
         executeAction( parameter );
      }
   }
}

Key here is that the Silverlight code works as is. In fact, that is true throughout this program.  The only changes for the phone have to do with layout on the MainPage.

The ViewModel class is named BookViewModel, which derives ViewModelBase, which, in turn, implements INotifyPropertyChanged.

Step 2 – Define the Command

In the ViewModel I define the ICommand that I’ll be implementing

public ICommand LoadBooksCommand { get; set; }

Step 3 – Create The Command

Again, I do this in the ViewModel, this time in the constructor.

LoadBooksCommand = new DelegateCommand( LoadBooks, CanLoadBooks );

While I’m in the constructor, I also mimic the creation of data that would normally be retrieved from, e.g., a web service,

public BookViewModel()
{
   Books = new ObservableCollection<Book>();

   AllBooks = new ObservableCollection<Book>();
   AllBooks.Add( new Book { ID = 1, Name = "Programming Rx and Linq" } );
   AllBooks.Add( new Book { ID = 2, Name = "Migrating Windows Phone" } );
   AllBooks.Add( new Book { ID = 3, Name = "Programming C#" } );
   AllBooks.Add( new Book { ID = 4, Name = "Learning C#" } );
   AllBooks.Add( new Book { ID = 5, Name = "Visual C# Notebook" } );
   AllBooks.Add( new Book { ID = 6, Name = "Learning VB.Net" } );
   AllBooks.Add( new Book { ID = 7, Name = "Programming .NET" } );
   AllBooks.Add( new Book { ID = 8, Name = "Programming ASP.NET" } );
   AllBooks.Add( new Book { ID = 9, Name = "TY C++ In 21 Days" } );
   AllBooks.Add( new Book { ID = 10, Name = "TY C++ In 24 Hours" } );
   AllBooks.Add( new Book { ID = 11, Name = "TY C++ In 10 Minutes" } );
   AllBooks.Add( new Book { ID = 12, Name = "Clouds To Code" } );
   AllBooks.Add( new Book { ID = 13, Name = "Beginning OOAD" } );
   AllBooks.Add( new Book { ID = 14, Name = "XML Web Classes From Scratch" } );
   AllBooks.Add( new Book { ID = 15, Name = "C++ From Scratch" } );
   AllBooks.Add( new Book { ID = 16, Name = "Web Classes Fronm Scratch" } );

   }

Step 4 – Create the VM

We are now ready to bind the Command property of the Button to the LoadBooksCommand shown above (which in turn, will invoke the LoadBooks method).  To do this, we must tell the View what its ViewModel is.  Still following John, I took the expedient of using a Resource in the View,

<phone:PhoneApplicationPage.Resources>
    <local:BookViewModel
       x:Key="vm" />
 </phone:PhoneApplicationPage.Resources>

I then set this ViewModel to be the DataContext for the StackPanel that holds the Button,

<StackPanel
   DataContext="{StaticResource vm}"

Step 5 – Bind the Command

Finally, in the button itself, I make the link to the LoadBooksCommand,

<Button
  Name="LoadButton"
  Content="Load"
  Margin="5"
  Command="{Binding LoadBooksCommand}" />

With that, when the button is pressed, the LoadBooksCommand is invoked through the ICommand mechansim, causing the LoadBooks method in the VM to be invoked,

private void LoadBooks( object param )
{
   string filter = param as string ?? string.Empty;
   Books.Clear();
   var query = from p in this.AllBooks
               where p.Name.ToLower().StartsWith( filter.ToLower() )
               select p;
   foreach ( var item in query )
   {
      this.Books.Add( item );
   }
}

As you can see from the illustration at the top of this posting, it works exactly as expected; the view contains a button, the codebehind for that view is empty, and we’ve bound the clicking of that button to the Command property in the View Model.

In a recent posting, I demonstrated how easy it is to add buttons to the phone’s Application Bar.

I went back to that application to disable the “faster” button when the maximum speed was reached. I named the button and then tried to access that button in code. Much to my surprise, the button was null. It was always null.

I’ve recently been turning to search rather than to the standard documentation as my first line of defense when I run into unexpected problems.  Thus, I entered “Windows Phone Application Bar Button Null” into Bing and the first result was a wonderful article on this very issue written by Laurent Bugnion (author of MVVM Light). 

He solves the problem elegantly, and I won’t repeat his work here, but I will walk you through the changes I made to the program.

I first opened the program and, following Laurent’s suggestion, I created an enumeration for the two buttons that were in place,

public enum ButtonTypes
{
   Slower = 0,
   Faster = 1
}

I created a method that retrieves the button from the ApplicationBar’s Buttons property, using an index and casting the result to be of type ApplicationBarIconButton.

 public ApplicationBarIconButton GetButton(
       ButtonTypes whichButton )
 {
    return ApplicationBar.Buttons[(int) whichButton]
       as ApplicationBarIconButton;
 }

Having retrieved the button, I could now set it to disabled if conditions were correct

if ( currentTS <= new TimeSpan( 0, 0, 0, 0, INCREMENT ) )
{
   GetButton( ButtonTypes.Faster ).IsEnabled = false;
}
else
{
   GetButton( ButtonTypes.Faster ).IsEnabled = true;
}

Problem solved, and quickly, thanks to Bing and Laurent. 

In my previous posting, I demonstrated how to register a touch (or tap) on Windows Phone. Today I will extend that to implement Double-Touch.

To begin, I need to go back to the original Touch class and make two changes: the OnTouch method needs to be changed to protected (from private) and needs to be marked virtual so that I can override it in a derived class.

To get started, re-open the Toucher project, and make these two changes in TouchAction.cs.  Next, create a new class, DoubleTouchAction, that derives from TouchAction:

using System;

namespace Toucher
{
   public class DoubleTouchAction : TouchAction

Give your new class its own event (DoubleTouch) and a private nullable-DateTime object to hold the time of the initial touch. We’ll compare that time with the time of the second touch, and if it is within a second we’ll consider that to be a double-touch.

public class DoubleTouchAction : TouchAction
{
   public event EventHandler DoubleTouch;
   const int INTERVAL = 1;

   private DateTime? TimeOfFirstTouch { get; set; }

The heart of this class is in the overridden OnTouch method which begins by calling the base method (to pick up the Touch) and then compares the time of the touch with the time of the first touch.  If there is no time (the DateTime has no value) or if the time between touches exceeds one second then the time of the first touch is reset to the current time, otherwise the event is called.

protected override void OnTouch( )
{
   base.OnTouch( );

   if ( TimeOfFirstTouch.HasValue &&
         DateTime.Now < TimeOfFirstTouch +
         TimeSpan.FromSeconds( INTERVAL ) )
   {
      OnDoubleTouch( );
      TimeOfFirstTouch = null;
   }
   else
   {
      TimeOfFirstTouch = DateTime.Now;
   }
}

The event just checks to make sure that someone has registered to receive the event and then calls the event on the AssociatedObject as you saw in the earlier version,

private void OnDoubleTouch( )
{
   if ( DoubleTouch != null )
   {
      DoubleTouch( AssociatedObject, EventArgs.Empty );
   }
}

You can now return to Blend to wire up the behavior, or if you like,, open MainPage.xaml and just copy the form of the behavior from the existing one:

 <Custom:Interaction.Behaviors>
    <local:TouchAction
       x:Name="TouchActionBehavior"
       Touch="TouchActionBehavior_Touch" />
    <local:DoubleTouchAction
       x:Name="DoubleTouchActionBehavior"
       DoubleTouch="DoubleTouchActionBehavior_DoubleTouch" />
 </Custom:Interaction.Behaviors>

You can now go to the code behind file and add a handler for the DoubleTouch,

private void TouchActionBehavior_Touch(
   object sender, System.EventArgs e )
{
   //System.Windows.MessageBox.Show(
   //   "You touched the panel!" );
}

private void DoubleTouchActionBehavior_DoubleTouch
   ( object sender, System.EventArgs e )
{
   System.Windows.MessageBox.Show(
      "You double-touched the panel!" );
}

While you need not comment out the message box on the first touch, you do have to be quick to register the second touch in under a second.  Commenting out the message box makes this easier.

Following the conventional rules of Conway’s Game Of Life, the screen is divided into cells. Each generation a cell dies of loneliness if it has fewer than 2 neighbors, or of overcrowding if it has more than 3 neighbors.  Live cells stay alive with 2-3 neighbors, and dead cells come to life with 3 neighbors.

Click on the image to download to your phone or to Zune. (Free)

We would like to live in a world in which any time you turn  your phone on the network is there, full strength.  We’d also like to live in a world of peace and harmony.

Until all of this is accomplished, however, you will need to test for network availability and handle those unfortunate moments when the network is not available.

To do so, you can call upon two useful features of the NetworkInformation namespace: the NetworkAddressChanged event and the GetIsNetworkAvailable method.

To see these at work, create a new application that will consist of a TextBox centered in the content panel. Here’s the Xaml,

<phone:PhoneApplicationPage
   x:Class="NetowrkAvailability.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
   xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d"
   d:DesignWidth="480"
   d:DesignHeight="768"
   FontFamily="{StaticResource PhoneFontFamilyNormal}"
   FontSize="{StaticResource PhoneFontSizeNormal}"
   Foreground="{StaticResource PhoneForegroundBrush}"
   SupportedOrientations="Portrait"
   Orientation="Portrait"
   shell:SystemTray.IsVisible="True">

  <Grid
      x:Name="LayoutRoot"
      Background="Transparent">
      <Grid.RowDefinitions>
         <RowDefinition
            Height="Auto" />
         <RowDefinition
            Height="*" />
      </Grid.RowDefinitions>

      <StackPanel
         x:Name="TitlePanel"
         Grid.Row="0"
         Margin="12,17,0,28">
         <TextBlock
            x:Name="ApplicationTitle"
            Text="Network Availability"
            Style="{StaticResource PhoneTextNormalStyle}" />
         <TextBlock
            x:Name="PageTitle"
            Text="Hello, World?"
            Margin="9,-7,0,0"
            Style="{StaticResource PhoneTextTitle1Style}" />
      </StackPanel>

       <Grid
         x:Name="ContentPanel"
         Grid.Row="1"
         Margin="12,0,12,0">

         <TextBox
            Name="Message"
            Background="Yellow"
            Text="Unknown"
            VerticalAlignment="Center"
            HorizontalAlignment="Center" />

      </Grid>
   </Grid>
</phone:PhoneApplicationPage>

Our goal, of course, is to change the text and background color of the Textbox when the network status changes.  We’ve initialized it to yellow in case we can’t determine the status, but in the constructor we’ll immediately test whether or not we’re on line and set it accordingly.

We begin by setting up an event handler which will respond every time the network status changes,

public MainPage( )
{
   InitializeComponent( );
   NetworkChange.NetworkAddressChanged +=
      new NetworkAddressChangedEventHandler(
           NetworkChange_NetworkAddressChanged );

}

private void NetworkChange_NetworkAddressChanged(
    object sender, EventArgs e )
{
   CheckNetworkAvailability( );
}

We then create a method to check whether or not the network is available

 private void CheckNetworkAvailability( )
 {
    networkIsAvailable =
       Microsoft.Phone.Net.NetworkInformation.NetworkInterface.GetIsNetworkAvailable( );
    SetNetworkIndication( );
 }

Finally, we set the background color and the message on the TextBox to correspond to the current state.

 private void SetNetworkIndication( )
 {
    if ( networkIsAvailable )
    {
       Message.Text = "Online";
       Message.Background =
          new SolidColorBrush( Colors.Green );
    }
    else
    {
       Message.Text = "Offline";
       Message.Background =
         new SolidColorBrush( Colors.Red );
    }
 }

Here is the complete source code, for context:

using System;
using System.Net.NetworkInformation;
using System.Windows.Media;
using Microsoft.Phone.Controls;

namespace NetowrkAvailability
{
   public partial class MainPage : PhoneApplicationPage
   {
      private bool networkIsAvailable;

      public MainPage( )
      {
         InitializeComponent( );
         NetworkChange.NetworkAddressChanged +=
            new NetworkAddressChangedEventHandler( NetworkChange_NetworkAddressChanged );
         CheckNetworkAvailability( );
      }

      private void NetworkChange_NetworkAddressChanged( object sender, EventArgs e )
      {
         CheckNetworkAvailability( );
      }

      private void SetNetworkIndication( )
      {
         if ( networkIsAvailable )
         {
            Message.Text = "Online";
            Message.Background = new SolidColorBrush( Colors.Green );
         }
         else
         {
            Message.Text = "Offline";
            Message.Background = new SolidColorBrush( Colors.Red );
         }
      }

      private void CheckNetworkAvailability( )
      {
         networkIsAvailable =
            Microsoft.Phone.Net.NetworkInformation.NetworkInterface.GetIsNetworkAvailable( );
         SetNetworkIndication( );
      }
   }
}

There has been some confusion about how to make the Silverlight Unit Tests work on Windows Phone.  The latest release of the Silverlight Unit Tests comes with the Silverlight Toolkit, and it targeted at Silverlight 4.  Windows Phone is based on an enhanced version of Silverlight 3 and cannot use these DLLs.

Fortunately, Jeff Willcox has made the right DLLs available on his web site.

Silverlight 3 binaries for the Silverlight Unit Test Framework

You will need to ‘unblock’ the zip file before unpacking the files. These binaries are strong named, but are not Authenticode signed, so they are not official

To get started, follow these steps:

• Make sure Visual Studio 2010 is installed
• Download, unblock and install the Silverlight Unit Tests
• Create a new Windows Phone project
• Add references to the two DLLs
  • Microsoft.Silverlight.Testing
  • Microsoft.VisualStudio.QualityTools.UnitTesting.Silverlight
  Be sure to put the unit tests inside the same project as the project you are testing, though it is good programming practice to isolate the tests in their own folder and namespace.
  Be sure to add using statements in each file that must recognize the testing framework (certainly in mainpage.xaml.cs) for the two DLLs

  using Microsoft.Phone.Controls;
  using Microsoft.Silverlight.Testing;

Jeff Willcox has provided the following excellent way to turn on and off the unit testing by flipping a boolean in MainPage.xaml. 

 public MainPage( )
 {
    InitializeComponent( );

    const bool runUnitTests = true;

    if ( runUnitTests )
    {
       Content = UnitTestSystem.CreateTestPage( );
       IMobileTestPage imtp =
                Content as IMobileTestPage;

       if ( imtp != null )
       {
          BackKeyPress += ( x, xe ) => xe.Cancel =
                  imtp.NavigateBack( );
       }
    }
 }

In essence, if the boolean is true, then the unit tests become the content of the main page. 

For an excellent step by step walk through on creating your first unit tests, I highly  recommend David Gadd’s tutorial Building a Windows Phone 7 app with MVVM pattern, using TDD and mock objects

Also available on Channel 9

In yesterday’s posting we looked at the Sterling Database. and how to set up and initialize tables, store an retrieve data.  Today we’ll build on that to set up the database in App.xaml so that we can handle tombstoning.

The key change to yesterday’s program is that rather than initializing the database in the main page, we’ll do so in App.xaml.  To see this at work, create a new Windows Phone application. 

We’ll use the exact same Xaml as we did yesterday, creating a text block and a button. This time, however, open App.xaml.cs to create the sret up code.  We’ll start by creating two static member variables, one private and one public,

private static ISterlingDatabaseInstance _database = null;
private static SterlingEngine _engine = null;

We need a public static property to obtain the underlying database:

public static ISterlingDatabaseInstance Database
{
   get
   {
      return _database;
   }
}

Create  private helper methods to activate and deactivate the database (yesterday we dispensed with deactivation to keep things simpler)

private void _ActivateEngine( )
{
   _engine = new SterlingEngine( );
   _engine.Activate( );
   _database =
      _engine.SterlingDatabase.
      RegisterDatabase<TestDB>( );
}

private void _DeactivateEngine( )
{
   _engine.Dispose( );
   _database = null;
   _engine = null;
}

This references the same database definition (TestDB) that you created yesterday.  Note that Dispose (in _DeactiveEngine) also flushes to isolated storage.

Add a call to _ActivateEngine in both Application_Launching and Application_Activated, and a call to _DeactiveEngine in both Application_Deactivated and Application_Closing.

After re-creating the Customer class and TestDB, you can turn to MainPage.cs and remove all the initialization code, and change all the calls to the database itself to use the static property (e.g.,

 private void SaveCustomer( )
 {
    var key =
       App.Database.Save( cust );
    App.Database.Flush( );
 }

You end up with cleaner usage of the database, and the assurance that the database will be properly flushed on tombstoning and restored when the application resumes.

Nice.

When you wish to persist state across usages of your application, Isolated Storage allows you to write to the disk and stash away key-value pairs.  For state, this is usually sufficient, but if what you wish to persist is data, especially relational data, then Isolated Storage is a bit limiting.

To meet this need for a more robust data storage scheme, a number of libraries have been developed that work on top of isolated storage.  This posting is the first in a series that will examine these options; beginning with the Sterling Database.

The home page for the Sterling Database states that the goal of Sterling is to be non-intrusive, lightweight, flexible and portable.  The list of features is extensive and there is very good documentation, though it isn’t always obvious (or it wasn’t to me) how to get your first database up and running.

To begin, download Sterling from Codeplex.  There are two ways to install, just the dll’s or the entire source code.  If you use the source code, just include the project into your solution and put a reference in your main project to the Sterling project.

You can also install Sterling on a per-project basis using NuGet.  To do so, create a new Windows Phone 7 project and right click on the references and choose Add Library Package Reference. Click on On-Line and then in the search box write Sterling, as shown in the figure

Remember that NuGet installs on a per-project basis.

Let’s create the simplest possible UI to demonstrate storage and retrieval of information. Here’s the complete Xaml:

<phone:PhoneApplicationPage
<!-- headers elided -->
>

   <Grid
      x:Name="LayoutRoot"
      Background="Transparent">
      <Grid.RowDefinitions>
         <RowDefinition
            Height="Auto" />
         <RowDefinition
            Height="*" />
      </Grid.RowDefinitions>

      <StackPanel
         x:Name="TitlePanel"
         Grid.Row="0"
         Margin="12,17,0,28">
         <TextBlock
            x:Name="ApplicationTitle"
            Text="Database Storage"
            Style="{StaticResource PhoneTextNormalStyle}" />
         <TextBlock
            x:Name="PageTitle"
            Text="Sterling"
            Margin="9,-7,0,0"
            Style="{StaticResource PhoneTextTitle1Style}" />
      </StackPanel>

      <Grid
         x:Name="ContentPanel"
         Grid.Row="1"
         Margin="12,0,12,0">

         <StackPanel>
            <TextBlock
               Name="Message"
               Text="Hello"
               HorizontalAlignment="Center"
               VerticalAlignment="Center" />
            <Button
               Name="Test"
               Content="Test"
               Height="Auto"
               Width="100" />
         </StackPanel>

      </Grid>
   </Grid>
</phone:PhoneApplicationPage>

Create three member variables at the top of your code-behidn page. The first two will be for registration of the Database engine and an instance of the database, and the third will be an instance of the Customer class that we’ll create,

private SterlingEngine _engine;
private ISterlingDatabaseInstance _databaseInstance;
private Customer cust;

The customer class will serve as the data we want to store. Its only requirement is that each instance of Customer have a unique ID,

public class Customer
{
   public int CustomerID { get; set; }
   public string CustomerName { get; set; }
}

You also need a class that derives from BaseDatabaseInstance. We’ll call our class TestDB.  The requirement is that you override the Name property and the _RegisterTables method.  The latter is where you will define each table for your database in terms of each class,

public class TestDB : BaseDatabaseInstance
{
   public override string Name
   {
      get
      {
         return "TestDB";
      }
   }

   protected override List<ITableDefinition>
                         _RegisterTables( )
   {
      return new List<ITableDefinition>( )
      {
         CreateTableDefinition<Customer, int>(
                   k => k.CustomerID)
      };
   }
}

CreateTableDefinition takes the name of the class and the type of the key. You pass in a lambda expression that resolves to the unique key.  It is also possible to define indices at this point, but to keep this first example simple, we’ll not implement anything unless it is absolutely required.

In the PageLoaded event we’ll register the click event, and call three methods. The first will start up the Sterling database, the second will create an instance of Customer and the third will store that instance in the database,

 public MainPage( )
 {
    InitializeComponent( );
    Loaded +=
       new RoutedEventHandler( MainPage_Loaded );
 }

 private void MainPage_Loaded(
    object sender, RoutedEventArgs e )
 {
    Test.Click +=
       new System.Windows.RoutedEventHandler(
          Test_Click );
    StartSterling( );
    CreateCustomer( );
    SaveCustomer( );
 }

StartSterling is boilerplate code for starting up the database,

private void StartSterling( )
{
   _engine = new SterlingEngine( );
   _engine.Activate( );
   _databaseInstance =
      _engine
      .SterlingDatabase
      .RegisterDatabase<TestDB>( );
}

Create Customer instantiates the Customer class we created earlier and assigns the instance to the member variable. Save customer calls _databaseInstance.Save passing in the customer, and we follow that call with a call to Flush() to flush the queue to storage.

private void CreateCustomer( )
{
   cust = new Customer( )
   {
      CustomerID = 1,
      CustomerName = "John Doe"
   };
}

private void SaveCustomer( )
{
   var key =
      _databaseInstance.Save( cust );
   _databaseInstance.Flush( );
}

Notice that all you do to save the data is call Save and Sterling takes care of the rest.  You do not interact with isolated storage directly at all.

We’ll wire up the button to call Load on the database instance, passing in the customer ID (in this case hard-wired) and then we’ll retrieve the Customer name from the loaded record and display that in the TextBlock,

private void Test_Click(
   object sender,
   RoutedEventArgs e )
{
   var customer =
      _databaseInstance
      .Load<Customer>( 1 );
   var name = customer.CustomerName;
   Message.Text = name;
}

The net effect is that when  you click the button the customer is retrieved from the database and the name is displayed.

Special thanks to Michael Washington and Jeremy Likness for their help in getting me started with Sterling.

In Part 1 of this 2 part posting we looked at capturing the mouse movements.  The key code in Part 1 was,

var q = from start in mousedown
        from pos in mousemove.StartWith( start )
        .TakeUntil( mouseup )
        select pos;

Now, in part 2, rather than just getting the coordinates of the mouse, we want to find the delta so that we can move the image with the changes in the mouse position. 

For Windows Phone, make sure that you add a reference to Microsoft Phone Reactive and to System Observable and for ths program, you’ll need to ensure that you have using statements for Microsoft.Phone.Reactive, System.Windows.Input, System.Windows.Controls and System.Linq.

We’ll begin by redefining mouseDown and MouseUp

var mousedown = from evt in Observable.FromEvent
                   <MouseButtonEventArgs>(
                   image, "MouseLeftButtonDown" )
                select evt.EventArgs.GetPosition( image );
var mouseup = from evt in Observable.FromEvent
                 <MouseButtonEventArgs>(
                 this, "MouseLeftButtonUp" )
              select evt.EventArgs.GetPosition(
              this );

var mousemove = from evt in Observable.FromEvent
                   <MouseEventArgs>(
                   this, "MouseMove" )
                select evt.EventArgs.GetPosition(
                   this );

Notice that mousedown and mouseup use the MouseLeftButtonDown and MouseLeftButtonUp events, respectively and that mousedown sets the image as the source of the event

We are using a select statement on mouseup, but the truth is we don’t care about the mouse position, just the fact that the event was fired, so we can simplify this middle definition to

var mouseup = Observable.FromEvent
        <MouseButtonEventArgs>(
        this, "MouseLeftButtonUp" );

Our query statement becomes one of finding the start position and end position  (for each movement of the mouse while the button is down) and then subtracting the end from the start to get the change in position for the image.

var q = from start in mousedown
        from end in mousemove.TakeUntil( mouseup )
        select new
        {
           X = end.X - start.X,
           Y = end.Y - start.Y
        };

We can then use that query to subscribe to the mouse as if it were an observable  collection of points. 

q.Subscribe( value =>
{
   Canvas.SetLeft( image, value.X );
   Canvas.SetTop( image, value.Y );
} );

Note that image is the name of the Image object defined in Xaml.

The net effect is that if you click on the image, you can drag it around the phone’s canvas until you release the mouse button.