UWP Development: Pointer Input Events
Pointer input events are a very important concept in UWP (Universal Windows Platform) development. Since UWP apps support various input methods such as touch, mouse, and stylus, it is essential to learn how to effectively handle these inputs. In this article, we will explain the concept of pointer input events in detail and practice it through example code.
1. What are Pointer Input Events?
Pointer input events are events that occur when users interact with screen elements using a touchscreen or mouse pointer. These events allow us to capture and process user input. The main pointer input events used in the UWP platform include the following:
- PointerPressed: Occurs when the pointer is pressed.
- PointerMoved: Occurs when the pointer is moved.
- PointerReleased: Occurs when the pointer is released.
- PointerEntered: Occurs when the pointer enters the boundary of a UI element.
- PointerExited: Occurs when the pointer exits the boundary of a UI element.
2. Handling Pointer Events
To handle pointer events in UWP, you need to subscribe to the events on the UI elements and implement the corresponding event handlers. The following is a simple example where the color changes when a button is pressed using pointer input events.
2.1 XAML Code
<Page
x:Class="YourNamespace.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button x:Name="MyButton" Content="Pointer Event Test" Width="200" Height="100"
PointerPressed="MyButton_PointerPressed"
PointerReleased="MyButton_PointerReleased"
PointerEntered="MyButton_PointerEntered"
PointerExited="MyButton_PointerExited"/>
</Grid>
</Page>2.2 C# Code
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
namespace YourNamespace
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void MyButton_PointerPressed(object sender, PointerRoutedEventArgs e)
{
MyButton.Background = new SolidColorBrush(Windows.UI.Colors.Red);
}
private void MyButton_PointerReleased(object sender, PointerRoutedEventArgs e)
{
MyButton.Background = new SolidColorBrush(Windows.UI.Colors.Green);
}
private void MyButton_PointerEntered(object sender, PointerRoutedEventArgs e)
{
MyButton.Background = new SolidColorBrush(Windows.UI.Colors.Yellow);
}
private void MyButton_PointerExited(object sender, PointerRoutedEventArgs e)
{
MyButton.Background = new SolidColorBrush(Windows.UI.Colors.Transparent);
}
}
}3. Characteristics of Pointer Events
Pointer input events have various characteristics. In this section, we will take a closer look at these characteristics.
3.1 Pointer Properties
Pointer events provide a PointerRoutedEventArgs object that includes various properties. This allows you to obtain information about the pointer’s state and position. For example:
- Position: You can get the current position of the pointer.
- PointerDeviceType: You can check the type of input device (mouse, touch, etc.).
- IsInContact: Indicates whether the touch input is currently on the screen.
3.2 Event Propagation
Understanding how events propagate in UWP is important. Pointer events follow the basic bubbling and capturing mechanisms. This means that events can propagate from the topmost element to the bottommost element or from the bottommost element to the topmost element.
4. Multi-Pointer Handling
UWP allows processing inputs from multiple pointers simultaneously. In this case, it is important to manage information for each pointer. The following is an example of handling multiple pointers.
4.1 XAML Code
<Page
x:Class="YourNamespace.MultiPointerExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Canvas x:Name="DrawingCanvas" Background="Transparent"
PointerPressed="DrawingCanvas_PointerPressed"
PointerMoved="DrawingCanvas_PointerMoved"
PointerReleased="DrawingCanvas_PointerReleased"/>
</Grid>
</Page>4.2 C# Code
using System.Collections.Generic;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;
namespace YourNamespace
{
public sealed partial class MultiPointerExample : Page
{
private Dictionary activePointers = new Dictionary();
public MultiPointerExample()
{
this.InitializeComponent();
}
private void DrawingCanvas_PointerPressed(object sender, PointerRoutedEventArgs e)
{
uint pointerId = e.PointerDevice.PointerId;
Point position = e.GetCurrentPoint(DrawingCanvas).Position;
Ellipse ellipse = new Ellipse
{
Fill = new SolidColorBrush(Windows.UI.Colors.Blue),
Width = 10,
Height = 10
};
Canvas.SetLeft(ellipse, position.X);
Canvas.SetTop(ellipse, position.Y);
DrawingCanvas.Children.Add(ellipse);
activePointers[pointerId] = ellipse;
}
private void DrawingCanvas_PointerMoved(object sender, PointerRoutedEventArgs e)
{
uint pointerId = e.PointerDevice.PointerId;
if (activePointers.ContainsKey(pointerId))
{
Point position = e.GetCurrentPoint(DrawingCanvas).Position;
Canvas.SetLeft(activePointers[pointerId], position.X);
Canvas.SetTop(activePointers[pointerId], position.Y);
}
}
private void DrawingCanvas_PointerReleased(object sender, PointerRoutedEventArgs e)
{
uint pointerId = e.PointerDevice.PointerId;
if (activePointers.ContainsKey(pointerId))
{
DrawingCanvas.Children.Remove(activePointers[pointerId]);
activePointers.Remove(pointerId);
}
}
}
} 5. Conclusion
In UWP, pointer input events are a crucial factor determining the ability to handle user interactions. Through this article, I hope you have gained a better understanding of the basic concepts and handling methods of pointer events, as well as multi-pointer processing. Now, with practical experience, you should have the foundational knowledge to implement more complex input handling logic.
Additionally, I encourage you to practice various features related to this and the integration with UI elements to grow as a better UWP app developer.