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.

  1. <StackPanel Margin="10,10,0,0">  
  2.     <TextBlock Text="Understanding Basic Input" FontSize="25"></TextBlock>  
  3.     <TextBlock Text="Pointer Pressed / Released" FontSize="17" Margin="0,15,0,0" />  
  4.     <Border x:Name="pressedTarget" Background="LightGray" Height="100" Width="150" BorderBrush="Black" BorderThickness="2" HorizontalAlignment="Left" ManipulationMode="None" PointerPressed="pressedTarget_PointerPressed" PointerReleased="pressedTarget_PointerReleased">  
  5.         <TextBlock x:Name="pressedTargetText" HorizontalAlignment="Center" VerticalAlignment="Center" />  
  6.     </Border>  
  7.     <TextBlock Margin="0,15,0,0" FontSize="17" Text="Pointer Enter / Exit" />  
  8.     <Border x:Name="enterExitTarget" Background="LightGray" Height="100" Width="150" BorderBrush="Black" BorderThickness="2" HorizontalAlignment="Left" ManipulationMode="None" PointerEntered="enterExitTarget_PointerEntered" PointerExited="enterExitTarget_PointerExited">  
  9.         <TextBlock x:Name="enterExitTargetText" HorizontalAlignment="Center" VerticalAlignment="Center" />  
  10.     </Border>  
  11.     <TextBlock Margin="0,15,0,0" FontSize="15" Text="Tap / Double-Tap" />  
  12.     <Border x:Name="tapTarget" Background="LightGray" Height="100" Width="150" BorderBrush="Black" BorderThickness="2" HorizontalAlignment="Left" ManipulationMode="None" DoubleTapped="tapTarget_DoubleTapped" Tapped="tapTarget_Tapped">  
  13.         <TextBlock x:Name="tapTargetText" HorizontalAlignment="Center" VerticalAlignment="Center" />  
  14.     </Border>  
  15.     <TextBlock Margin="0,15,0,0" FontSize="15" Text="Right-Tap / Press-and-Hold" />  
  16.     <Border x:Name="holdTarget" Background="LightGray" Height="100" Width="150" BorderBrush="Black" BorderThickness="2" HorizontalAlignment="Left" ManipulationMode="None" RightTapped="holdTarget_RightTapped" Holding="holdTarget_Holding">  
  17.         <TextBlock x:Name="holdTargetText" HorizontalAlignment="Center" VerticalAlignment="Center" />  
  18.     </Border>  
  19. </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.
  1. private void pressedTarget_PointerPressed(object sender, PointerRoutedEventArgs e)   
  2. {  
  3.     pressedTarget.Background = new SolidColorBrush(Windows.UI.Colors.RoyalBlue);  
  4.     pressedTargetText.Text = "Pointer Pressed";  
  5. }  
  6. private void pressedTarget_PointerReleased(object sender, PointerRoutedEventArgs e)  
  7. {  
  8.     pressedTarget.Background = new SolidColorBrush(Windows.UI.Colors.LightGray);  
  9.     pressedTargetText.Text = "Pointer Released";  
  10. }  
  11. private void enterExitTarget_PointerEntered(object sender, PointerRoutedEventArgs e)  
  12. {  
  13.     enterExitTarget.Background = new SolidColorBrush(Windows.UI.Colors.RoyalBlue);  
  14.     enterExitTargetText.Text = "Pointer Entered";  
  15. }  
  16. private void enterExitTarget_PointerExited(object sender, PointerRoutedEventArgs e)  
  17. {  
  18.     enterExitTarget.Background = new SolidColorBrush(Windows.UI.Colors.LightGray);  
  19.     enterExitTargetText.Text = "Pointer Exited";  
  20. }  
  21. private void tapTarget_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)   
  22. {  
  23.     tapTarget.Background = new SolidColorBrush(Windows.UI.Colors.RoyalBlue);  
  24.     tapTargetText.Text = "Double-Tapped";  
  25. }  
  26. private void tapTarget_Tapped(object sender, TappedRoutedEventArgs e)  
  27. {  
  28.     tapTarget.Background = new SolidColorBrush(Windows.UI.Colors.DeepSkyBlue);  
  29.     tapTargetText.Text = "Tapped";  
  30. }  
  31. private void holdTarget_RightTapped(object sender, RightTappedRoutedEventArgs e)  
  32. {  
  33.     holdTarget.Background = new SolidColorBrush(Windows.UI.Colors.RoyalBlue);  
  34.     holdTargetText.Text = "Right Tapped";  
  35. }  
  36. private void holdTarget_Holding(object sender, HoldingRoutedEventArgs e)  
  37. {  
  38.     if (e.HoldingState == Windows.UI.Input.HoldingState.Started)  
  39.     {  
  40.         holdTarget.Background = new SolidColorBrush(Windows.UI.Colors.DeepSkyBlue);  
  41.         holdTargetText.Text = "Holding";  
  42.     } else if (e.HoldingState == Windows.UI.Input.HoldingState.Completed)   
  43.     {  
  44.         holdTarget.Background = new SolidColorBrush(Windows.UI.Colors.LightGray);  
  45.         holdTargetText.Text = "Held";  
  46.     } else   
  47.     {  
  48.         holdTarget.Background = new SolidColorBrush(Windows.UI.Colors.LightGray);  
  49.         holdTargetText.Text = "Hold Canceled";  
  50.     }  
  51. }  

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

 

Next Recommended Readings