How to Create a Touch Based Drawing Application in Windows Phone


Windows Phone platform offers rich APIs to capture user input. Not only does the platform offer input via keyboard, but also in the form of touch. Developers can use this ability to create drawing applications using touch inputs.

In "Understanding Touch Support in Windows Phone", we learned about the touch support available on the Windows Phone platform. We will use this information to build a drawing application that uses touch as input.

Let's get hands on.


Create a new Silver for Windows Phone project called WindowsPhoneDemoTouchApp.

When prompted, select OS Version 7.1 and click OK.

Windows Phone Application
Windows Phone Application

Open the default MainPage.xaml and remove the default Grid that is created. We should now have only the following in the MainPage.xaml.

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    <!--LayoutRoot is the root grid where all page content is placed-->
    <!--Sample code showing usage of ApplicationBar-->
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>

Now, we need to add a few objects to enable an area to capture and render the user touches. We need a Grid object to capture user input, and an InkPresenter to render the information we have captured. We also need a dictionary to store which finger strokes we captured so that we can render it appropriately.

Change the MainPage class's declaration as show below.

public partial class MainPage : PhoneApplicationPage
        InkPresenter myInkPresenter = new InkPresenter();
        Grid grid = new Grid { Height = 800, Width = 480 };
        Image backGnd = new Image();
        Popup popup = new Popup { IsOpen = true };
        Dictionary<int, Stroke> strokes = new Dictionary<int, Stroke>();

Next, the constructor needs to be updated so wireup the grid object.

public MainPage()
            this.popup.Child = this.grid;

To capture touches, we need to trap the FrameReported event. We do this in the OnNavigatedTo and OnNavigatedFrom events.

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
            this.popup.IsOpen = true;
            Touch.FrameReported += Touch_Reported;
protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
            this.popup.IsOpen = false;
            Touch.FrameReported -= Touch_Reported;

Finally, we write the code to implement the Touch_Reported method.

We need to capture the touch points using the GetTouchPoints method on the TouchFrameEventArgs object.  For each TouchPoint, we will inspect whether it was a touch action that was down, up or move and process the action accordingly. For down events, we will construct a stroke object and add it to the InkPresenter instance.

void Touch_Reported(object sender, TouchFrameEventArgs e)
            TouchPointCollection tpCollection = e.GetTouchPoints(this.myInkPresenter);
            foreach (TouchPoint tp in tpCollection)
                if (tp.Action == TouchAction.Down)
                    Stroke stroke = new Stroke();
                    stroke.DrawingAttributes.Color = Color.FromArgb(1, 0, 255, 0);
                    stroke.StylusPoints.Add(new StylusPoint(tp.Position.X, tp.Position.Y));
                    this.strokes[tp.TouchDevice.Id] = stroke;
                else if (tp.Action == TouchAction.Move)
                    if (this.strokes.ContainsKey(tp.TouchDevice.Id))
                        this.strokes[tp.TouchDevice.Id].StylusPoints.Add(new StylusPoint(tp.Position.X, tp.Position.Y));
                else if (tp.Action == TouchAction.Down)
                    if (this.strokes.ContainsKey(tp.TouchDevice.Id))

Now, our application is ready. Compile and run this. If you have any issues following along, you can download the source of the application below.

Note that touch events only work with real devices and not in the emulator. When testing the application, please be sure to select Windows Phone Device as the target.

When you run the application on the device, you will notice that all user touches are rendered as strokes on the screen.


In this article, we learned about creating a touch based drawing application in Windows Phone. Please be very careful to detach FrameReported handlers as soon as possible. Unintended consequences can occur if an application navigates away from the page.

About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at

Related Articles



  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Moving from an on-premises environment to Office 365 does not remove the need to plan for disruptions or reduce the business risk requirements for protecting email services. If anything, some risks increase with a move to the cloud. Read how to ease the transition every business faces if considering or already migrating to cloud email. This white paper discusses: Setting expectations when migrating to Office 365 Understanding the implications of relying solely on Exchange Online security Necessary archiving …

  • U.S. companies are desperately trying to recruit and hire skilled software engineers and developers, but there's simply not enough quality talent to go around. In response, companies often resort to inferior solutions -- hiring substandard developers and engineers, recruiting talent on a part-time or temporary basis, poaching people from competitors, or burdening an already stressed IT staff for more of their labor. Fortunately, there's a better solution. Read this white paper to learn the business value of …

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date