Pointer Input Events in Windows Store Apps Using XAML

X1 = previousContact.X,

Y1 = previousContact.Y,

X2 = currentContact.X,

Y2 = currentContact.Y,

StrokeThickness = THICKNESS + 12,

Stroke = new SolidColorBrush(Colors.White),

StrokeEndLineCap = PenLineCap.Round

};

contacts[ptrId] = currentContact;

((System.Collections.Generic.IList<UIElement>)DrawingArea.Children).Add(l);

}

}

}

e.Handled = true;

}

Step 4

The complete code of the MainPage.cs file:

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Navigation;

using Windows.UI.Xaml.Shapes;

namespace drawingapp

{

public sealed partial class MainPage : Page

{

const uint CONTACTS = 10;

const double THICKNESS = 5;

uint ActiveContacts;

Dictionary<uint, Point?> contacts;

public MainPage()

{

this.InitializeComponent();

ActiveContacts = 0;

contacts = new Dictionary<uint, Point?>((int)CONTACTS);

DrawingArea.PointerPressed += new PointerEventHandler(DrawingArea_PointerPressed);

DrawingArea.PointerMoved += new PointerEventHandler(DrawingArea_PointerMoved);

DrawingArea.PointerReleased += new PointerEventHandler(DrawingArea_PointerReleased);

DrawingArea.PointerExited += new PointerEventHandler(DrawingArea_PointerReleased);

}

protected override void OnNavigatedTo(NavigationEventArgs e)

{

}

void DrawingArea_PointerReleased(object sender, PointerRoutedEventArgs e)

{

uint ptrId = e.GetCurrentPoint(sender as FrameworkElement).PointerId;

if (contacts.ContainsKey(ptrId))

{

contacts[ptrId] = null;

contacts.Remove(ptrId);

--ActiveContacts;

}

e.Handled = true;

}

void DrawingArea_PointerMoved(object sender, PointerRoutedEventArgs e)

{

if (i == 0)

{

Windows.UI.Input.PointerPoint pt = e.GetCurrentPoint(DrawingArea);

uint ptrId = pt.PointerId;

if (contacts.ContainsKey(ptrId) && contacts[ptrId].HasValue)

{

Point currentContact = pt.Position;

Point previousContact = contacts[ptrId].Value;

if (Distance(currentContact, previousContact) > 4)

{

Line l = new Line()

{

X1 = previousContact.X,

Y1 = previousContact.Y,

X2 = currentContact.X,

Y2 = currentContact.Y,

StrokeThickness = THICKNESS,

Stroke = new SolidColorBrush(Colors.Green),

StrokeEndLineCap = PenLineCap.Round

};

contacts[ptrId] = currentContact;

((System.Collections.Generic.IList<UIElement>)DrawingArea.Children).Add(l);

}

}

}

else

{

Windows.UI.Input.PointerPoint pt = e.GetCurrentPoint(DrawingArea);

uint ptrId = pt.PointerId;

if (contacts.ContainsKey(ptrId) && contacts[ptrId].HasValue)

{

Point currentContact = pt.Position;

Point previousContact = contacts[ptrId].Value;

if (Distance(currentContact, previousContact) > 4)

{

Line l = new Line()

{

X1 = previousContact.X,

Y1 = previousContact.Y,

X2 = currentContact.X,

Y2 = currentContact.Y,

StrokeThickness = THICKNESS + 12,

Stroke = new SolidColorBrush(Colors.White),

StrokeEndLineCap = PenLineCap.Round

};

contacts[ptrId] = currentContact;

((System.Collections.Generic.IList<UIElement>)DrawingArea.Children).Add(l);

}

}

}

e.Handled = true;

}

private double Distance(Point currentContact, Point previousContact)

{

return Math.Sqrt(Math.Pow(currentContact.X - previousContact.X, 2) + Math.Pow(currentContact.Y - previousContact.Y, 2));

}

void DrawingArea_PointerPressed(object sender, PointerRoutedEventArgs e)

{

Windows.UI.Input.PointerPoint pt = e.GetCurrentPoint(DrawingArea);

contacts[pt.PointerId] = pt.Position;

e.Handled = true;

++ActiveContacts;

}

int i = 0;

public void AllClear()

{

((System.Collections.Generic.IList<UIElement>)DrawingArea.Children).Clear();

ActiveContacts = 0;

if (contacts != null)

{

contacts.Clear();

}

}

private void Draw_Click_1(object sender, RoutedEventArgs e)

{

i = 0;

}

private void Erase_Click_1(object sender, RoutedEventArgs e)

{

i = 1;

}

private void Reset_Click_1(object sender, RoutedEventArgs e)

{

AllClear();

}

}

}

Step 5

Output

Now, our Windows Store App is ready to run. Press F5 to run it.

You will see that there are 3 buttons and one white canvas in which you can write or paint.



Select the Draw button to draw onto the given canvas.



Select the Erase button to erase the content of the canvas.



The Reset button is used to remove all the content of the canvas at once.