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 x:Name="LayoutRoot" Background="White">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="2">

            <StackPanel ManipulationMode="All" Margin="30,50">

                <Border x:Name="bEnteredExited" Background="Red" Height="300" Width="450" CornerRadius="20" HorizontalAlignment="Left">

                    <Grid>

                        <TextBlock Style="{StaticResource BasicTextStyle}" Text="" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="bEnteredExitedTextBlock"/>

                        <Ellipse VerticalAlignment="Bottom" Stroke="Silver" StrokeDashArray="2,2" StrokeThickness="2" Margin="2" x:Name="bEnteredExitedTimer" Width="20" Height="20" RenderTransformOrigin="0.5,0.5">

                            <Ellipse.RenderTransform >

                                <RotateTransform Angle="0" />

                            </Ellipse.RenderTransform>

                        </Ellipse>

                    </Grid>

                </Border>

            </StackPanel>

        </Grid>

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