Silverlight for Mobile on Windows Phone 7 InkPresenter fun

After installing the Windows Phone Developer Tools this is a simple test for a bit of fun using Silverlight for Mobile for the first time to capturing user strokes using the InkPresenter.

  1. In Visual Studio 2010 Press File –> New Project –> Silverlight for Windows Phone –> Windows Phone Application
  2. Creating a Silverlight for Mobile Application

    Creating a Silverlight for Mobile Application

  3. Add an InkPresenter and two buttons Undo and Redo to the to the content Grid
  4.  

          <!--ContentGrid is empty. Place new content here-->
            <Grid x:Name="ContentGrid" Grid.Row="1">
                <InkPresenter  Name="inkTest" Background="White" Margin="0,0,0,62" />
                <Button Name="btnUndo" Content="Undo" Grid.Row="1" Height="72" HorizontalAlignment="Left" Margin="44,584,0,0" VerticalAlignment="Top" Width="160" Click="btnUndo_Click" Background="#FF933A3A" />
                <Button Name="btnRedo" Content="Redo" Height="72" HorizontalAlignment="Left" Margin="272,584,0,0" VerticalAlignment="Top" Width="160" Grid.Row="1" Click="btnRedo_Click" Background="#FF933A3A" />
            </Grid>
  5. On the InkPresenter, named inkTest in this example, Add Event handlers for MouseMove, MouseLeftButtonDown, MouseLeftButtonUp to capture the movement from the user
  6.             inkTest.MouseMove += new MouseEventHandler(inkTest_MouseMove);
                inkTest.MouseLeftButtonDown += new MouseButtonEventHandler(inkTest_MouseLeftButtonDown);
                inkTest.MouseLeftButtonUp += new MouseButtonEventHandler(inkTest_MouseLeftButtonUp);
  7. To capture the mouse movements and turn them into Strokes on the InkPresenter the corresponding EventHandlers and member variables are as follows
  8. private Stroke _currentStroke;
    
    private void inkTest_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        _currentStroke = null;
    }
    
    private void inkTest_MouseMove(object sender, MouseEventArgs e)
    {
        if (_currentStroke != null)
            _currentStroke.StylusPoints.Add(GetStylusPoint(e.GetPosition(inkTest)));
    }
    
    private void inkTest_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        inkTest.CaptureMouse();
        _currentStroke = new Stroke();
        _currentStroke.StylusPoints.Add(GetStylusPoint(e.GetPosition(inkTest)));
        _currentStroke.DrawingAttributes.Color = Colors.Blue;
        inkTest.Strokes.Add(_currentStroke);
    }
    
    private StylusPoint GetStylusPoint(Point position)
    {
        return new StylusPoint(position.X, position.Y);
    }
  9. And since its difficult to draw with a mouse I want to be able to undo and redo some of my Strokes I use a simple Stack so implement the following EventHandlers for the Undo and Redo buttons
  10.         private Stack _removedStrokes = new Stack();
    
            private void btnUndo_Click(object sender, RoutedEventArgs e)
            {
                if (inkTest.Strokes != null && inkTest.Strokes.Count > 0)
                {
                    _removedStrokes.Push(inkTest.Strokes.Last());
                    inkTest.Strokes.RemoveAt(inkTest.Strokes.Count - 1);
                }
            }
    
            private void btnRedo_Click(object sender, RoutedEventArgs e)
            {
                if (_removedStrokes != null && _removedStrokes.Count > 0)
                {
                    inkTest.Strokes.Add(_removedStrokes.Pop());
                }
            }
  11. And the final result is :)
  12. InkPresenter on Windows Phone 7

    InkPresenter on Windows Phone 7

This demonstrated a simple application that was faster to code then to blog about and that even with an undo button I am still hopeless at drawing :) . Try implementing the same functionality in the .NET Compact Framework :)

Next posts will look at

  • Reworking this application to use MVVM
  • Using the Microsoft Notification Service