Pointer Events in Windows Store Apps Using C#

This article demonstrates the mouse pointer events that can be used to update or change the visual state of the application UI in Windows Store Apps using XAML and C#.

In this article I show the uses of pointer events such as Pointer Entered and Pointer Existed and how to associate these with the mouse pointer.

Here is how to create Pointer Events.

Step 1

Here is some XAML markup code that specifies the event that occurs:

<Page

x:Class="drawingapp.BlankPage1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:drawingapp"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid>

<Ellipse.RenderTransform >

</Ellipse.RenderTransform>

</Ellipse>

</Grid>

</Border>

</StackPanel>

</Grid>

</Page>

Step 2

Here is the .cs file code.

Associate the Pointer events in the Page load method, as in:

public BlankPage1()
{
this.InitializeComponent();
bEnteredExited.PointerEntered += new PointerEventHandler(bEnteredExited_PointerEntered);
bEnteredExited.PointerExited += new PointerEventHandler(bEnteredExited_PointerExited);
//To code for multiple Pointers (i.e. Fingers) we track how many entered/exited.
_pointerCount = 0;
}

Coding of Pointer Entered events:

void bEnteredExited_PointerEntered(object sender, PointerRoutedEventArgs e)

{

_pointerCount++;

UpdateVisuals(sender as Border, "Entered");

}

Coding of Pointer Existed events:

void bEnteredExited_PointerExited(object sender, PointerRoutedEventArgs e)

{
_pointerCount--;

UpdateVisuals(sender as Border, "Exited");

}

Here is the code to update the visual state of the application:

void UpdateVisuals(Border border, String eventDescription)

{

switch (eventDescription.ToLower())

{

case "exited":

if (_pointerCount <= 0)

{

border.Background = new SolidColorBrush(Colors.Green);

bEnteredExitedTextBlock.Text = eventDescription;

}

break;

case "moved":

RotateTransform rt = (RotateTransform)bEnteredExitedTimer.RenderTransform;

rt.Angle += 2;

if (rt.Angle > 360) rt.Angle -= 360;

break;

default:

border.Background = new SolidColorBrush(Colors.Red);

bEnteredExitedTextBlock.Text = eventDescription;

break;

}

}

Full code of the .cs file:

using System;

using Windows.Foundation;

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;

namespace drawingapp

{

public sealed partial class BlankPage1 : Page

{

int _pointerCount;

public BlankPage1()

{

this.InitializeComponent();

bEnteredExited.PointerEntered += new PointerEventHandler(bEnteredExited_PointerEntered);

bEnteredExited.PointerExited += new PointerEventHandler(bEnteredExited_PointerExited);

//To code for multiple Pointers (i.e. Fingers) we track how many entered/exited.

_pointerCount = 0;

}

protected override void OnNavigatedTo(NavigationEventArgs e)

{

}

void bEnteredExited_PointerExited(object sender, PointerRoutedEventArgs e)

{

_pointerCount--;

Scenario2UpdateVisuals(sender as Border, "Exited");

}

void bEnteredExited_PointerEntered(object sender, PointerRoutedEventArgs e)

{

_pointerCount++;

Scenario2UpdateVisuals(sender as Border, "Entered");

}

void Scenario2UpdateVisuals(Border border, String eventDescription)

{

switch (eventDescription.ToLower())

{

case "exited":

if (_pointerCount <= 0)

{

border.Background = new SolidColorBrush(Colors.Green);

bEnteredExitedTextBlock.Text = eventDescription;

}

break;

case "moved":

RotateTransform rt = (RotateTransform)bEnteredExitedTimer.RenderTransform;

rt.Angle += 2;

if (rt.Angle > 360) rt.Angle -= 360;

break;

default:

border.Background = new SolidColorBrush(Colors.Red);

bEnteredExitedTextBlock.Text = eventDescription;

break;

}

}

Step 3

Now run the application to see the output.

Hover the mouse pointer over the rectangle. When the pointer enters it, the color of the rectangle becomes red; see:

Move the mouse pointer away from the rectangle. When you exist the pointer from it, the color of rectangle becomes green.