Understanding Basic Input Events In Windows 10

Here we are going to understand the press, tap, hold, and entered events of any control in Universal Windows Platform.

Step 1: Open a blank app with four borders with a text block child to it by copying the following XAML code in to your page. Please have a look at the different events assigned for each.

<StackPanel Margin="10,10,0,0">
    <TextBlock Text="Understanding Basic Input" FontSize="25"></TextBlock>
    <TextBlock Text="Pointer Pressed / Released" FontSize="17" Margin="0,15,0,0" />
    <Border x:Name="pressedTarget" Background="LightGray" Height="100" Width="150" BorderBrush="Black" BorderThickness="2" HorizontalAlignment="Left" ManipulationMode="None" PointerPressed="pressedTarget_PointerPressed" PointerReleased="pressedTarget_PointerReleased">
        <TextBlock x:Name="pressedTargetText" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
    <TextBlock Margin="0,15,0,0" FontSize="17" Text="Pointer Enter / Exit" />
    <Border x:Name="enterExitTarget" Background="LightGray" Height="100" Width="150" BorderBrush="Black" BorderThickness="2" HorizontalAlignment="Left" ManipulationMode="None" PointerEntered="enterExitTarget_PointerEntered" PointerExited="enterExitTarget_PointerExited">
        <TextBlock x:Name="enterExitTargetText" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
    <TextBlock Margin="0,15,0,0" FontSize="15" Text="Tap / Double-Tap" />
    <Border x:Name="tapTarget" Background="LightGray" Height="100" Width="150" BorderBrush="Black" BorderThickness="2" HorizontalAlignment="Left" ManipulationMode="None" DoubleTapped="tapTarget_DoubleTapped" Tapped="tapTarget_Tapped">
        <TextBlock x:Name="tapTargetText" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
    <TextBlock Margin="0,15,0,0" FontSize="15" Text="Right-Tap / Press-and-Hold" />
    <Border x:Name="holdTarget" Background="LightGray" Height="100" Width="150" BorderBrush="Black" BorderThickness="2" HorizontalAlignment="Left" ManipulationMode="None" RightTapped="holdTarget_RightTapped" Holding="holdTarget_Holding">
        <TextBlock x:Name="holdTargetText" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
</StackPanel>

 

 

Step 2: Copy and paste the following code to the cs page which will handle each events assigned to each border. We are also doing a change of color for understanding.

private void pressedTarget_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    pressedTarget.Background = new SolidColorBrush(Windows.UI.Colors.RoyalBlue);
    pressedTargetText.Text = "Pointer Pressed";
}
private void pressedTarget_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    pressedTarget.Background = new SolidColorBrush(Windows.UI.Colors.LightGray);
    pressedTargetText.Text = "Pointer Released";
}
private void enterExitTarget_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    enterExitTarget.Background = new SolidColorBrush(Windows.UI.Colors.RoyalBlue);
    enterExitTargetText.Text = "Pointer Entered";
}
private void enterExitTarget_PointerExited(object sender, PointerRoutedEventArgs e)
{
    enterExitTarget.Background = new SolidColorBrush(Windows.UI.Colors.LightGray);
    enterExitTargetText.Text = "Pointer Exited";
}
private void tapTarget_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
{
    tapTarget.Background = new SolidColorBrush(Windows.UI.Colors.RoyalBlue);
    tapTargetText.Text = "Double-Tapped";
}
private void tapTarget_Tapped(object sender, TappedRoutedEventArgs e)
{
    tapTarget.Background = new SolidColorBrush(Windows.UI.Colors.DeepSkyBlue);
    tapTargetText.Text = "Tapped";
}
private void holdTarget_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
    holdTarget.Background = new SolidColorBrush(Windows.UI.Colors.RoyalBlue);
    holdTargetText.Text = "Right Tapped";
}
private void holdTarget_Holding(object sender, HoldingRoutedEventArgs e)
{
    if (e.HoldingState == Windows.UI.Input.HoldingState.Started)
    {
        holdTarget.Background = new SolidColorBrush(Windows.UI.Colors.DeepSkyBlue);
        holdTargetText.Text = "Holding";
    } else if (e.HoldingState == Windows.UI.Input.HoldingState.Completed)
    {
        holdTarget.Background = new SolidColorBrush(Windows.UI.Colors.LightGray);
        holdTargetText.Text = "Held";
    } else
    {
        holdTarget.Background = new SolidColorBrush(Windows.UI.Colors.LightGray);
        holdTargetText.Text = "Hold Canceled";
    }
}

Step 3: Run your application and test yourself with each borders.