Ink Demo in Windows Phone 7

I’ve been a bit busy with a few iPhone projects lately so I haven’t had much time to blog. I decided to take a short diversion tonight to doodle with the latest Windows Phone 7 bits and ended up doing that, literally. Here’s a demo that uses the Silverlight ink api to create a simple drawing application. On the simulator using a touch screen pc the experience is pretty good.

Here is a screenshot of the app running in the simulator:

For the xaml I just added an InkPresenter to a Grid like this:

        <Grid x:Name="ContentGrid" Grid.Row="1">
            <InkPresenter x:Name="inkSurface" Background="Black">
            </InkPresenter>
        </Grid>

I needed to set the Background explicitly in order to get the touch events to fire.

In the code-behind I handled mouse events on the InkPresenter to create a Stroke object with various attributes, add it to the InkPresenter’s Strokes collection, add points to the stroke as the touch is moved on the screen and clear the Stroke object when the touch completes. Here’s the code-behind’s source:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Windows.Ink;

namespace InkApp
{
    public partial class MainPage : PhoneApplicationPage
    {
        Stroke _inkStroke;

        public MainPage()
        {
            InitializeComponent();

            this.inkSurface.MouseLeftButtonDown += 
                new MouseButtonEventHandler(
                inkSurface_MouseLeftButtonDown);

            this.inkSurface.MouseMove += 
                new MouseEventHandler(inkSurface_MouseMove);

            this.inkSurface.MouseLeftButtonUp += 
                new MouseButtonEventHandler(
                inkSurface_MouseLeftButtonUp);
        }

        void inkSurface_MouseMove(object sender, MouseEventArgs e)
        {
            if (_inkStroke != null)
            {   
                _inkStroke.StylusPoints.Add(
                    e.StylusDevice.GetStylusPoints(inkSurface));
            }
        }

        void inkSurface_MouseLeftButtonDown(object sender, 
            MouseEventArgs e)
        {
                inkSurface.CaptureMouse();

                _inkStroke = new Stroke(
                    e.StylusDevice.GetStylusPoints(inkSurface));
                _inkStroke.DrawingAttributes.Width = 10;
                _inkStroke.DrawingAttributes.Height = 10;
                _inkStroke.DrawingAttributes.Color = Colors.Yellow;
                _inkStroke.DrawingAttributes.OutlineColor = Colors.Cyan;

                inkSurface.Strokes.Add(_inkStroke);
        }

        void inkSurface_MouseLeftButtonUp(object sender, 
            MouseEventArgs e)
        {
            _inkStroke = null;
            inkSurface.ReleaseMouseCapture();
        }
    }
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s