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


Creating a Silverlight for Mobile Application

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

 

      <!--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>

3. On the InkPresenter, named inkTest in this example, Add Event handlers for MouseMove, MouseLeftButtonDown, MouseLeftButtonUp to capture the movement from the user

            inkTest.MouseMove += new MouseEventHandler(inkTest_MouseMove);
            inkTest.MouseLeftButtonDown += new MouseButtonEventHandler(inkTest_MouseLeftButtonDown);
            inkTest.MouseLeftButtonUp += new MouseButtonEventHandler(inkTest_MouseLeftButtonUp);

4. To capture the mouse movements and turn them into Strokes on the InkPresenter the corresponding EventHandlers and member variables are as follows

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);
}

5. 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

        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());
            }
        }

6. And the final result is


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