Silverlight - Gestione dell'input

In questo capitolo impareremo come gestire l'input dell'utente nelle applicazioni Silverlight. Silverlight fornisce una potente API con l'aiuto della quale un'applicazione può ottenere input da vari dispositivi come mouse, tastiera e tocco, ecc.

Tipi di input

Esistono diversi modi in cui un utente può interagire con la tua applicazione. Il modo più ovvio è con un mouse. Silverlight offre eventi per il monitoraggio:

• Movimenti del mouse
• Il pulsante fa clic e
• Attività della ruota

C'è anche la tastiera, ovviamente, e Silverlight supporta anche l'input touch screen. Se hai familiarità con il supporto tattile in Windows, sai che l'input tattile può essere rappresentato come eventi di basso livello che forniscono informazioni dettagliate oppure può essere riassunto in eventi di alto livello chiamati gesti.

Eventi del mouse

Iniziamo esaminando gli eventi di input del mouse offerti da Silverlight. Alcuni eventi riguardano il movimento del puntatore del mouse.

• Il MouseMove viene generato ogni volta che il puntatore si sposta mentre si trova sugli elementi a cui è stato collegato il gestore.

• Ottieni anche MouseEnter e MouseLeave eventi per notificarti quando il mouse si sposta dentro e fuori l'elemento.

Di seguito è riportato il codice XAML in cui vengono aggiunti ellisse e TextBlock.

<UserControl x:Class="MouseInput.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">  
   
   <Grid x:Name = "LayoutRoot" Background = "White">
	
      <TextBlock x:Name = "mouseText" FontSize = "40" 
         VerticalAlignment = "Top" Height = "76" Margin = "0,10,0,0" />
			 
      <Ellipse
         Name = "myEllipse"  
         Width = "320" Height = "150" HorizontalAlignment = "Left" 
         VerticalAlignment = "Top" Margin = "27,103,0,0" 
         Stroke = "Black" StrokeThickness = "10" Fill = "#00FF0000" 
         MouseEnter = "myEllipse_MouseEnter" 
         MouseLeave = "myEllipse_MouseLeave" 
         MouseMove = "myEllipse_MouseMove" /> 
			
   </Grid> 
	
</UserControl>

Di seguito è riportata l'implementazione per diversi mouse input eventi.

using System.Windows.Controls; 
using System.Windows.Input; 
using System.Windows.Media; 
 
namespace MouseInput { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      } 
     
      private void myEllipse_MouseEnter(object sender, MouseEventArgs e) { 
         mouseText.Text = "Mouse Enter"; 
         myEllipse.Stroke = new SolidColorBrush(Colors.Blue); 
      }  
      
      private void myEllipse_MouseLeave(object sender, MouseEventArgs e) { 
         mouseText.Text = "Mouse Leave"; 
         myEllipse.Stroke = new SolidColorBrush(Colors.Black);  
      }  
      
      private void myEllipse_MouseMove(object sender, MouseEventArgs e) { 
         mouseText.Text = "Mouse Move: " + e.GetPosition(myEllipse);  
      }  
   } 
}

Quando il codice precedente viene compilato ed eseguito, vedrai il seguente output.

Quando il mouse entra nell'ellisse, vedrai il cambiamento di colore e coordinate.

Quando il mouse lascia l'ellisse, mostrerà un messaggio 'mouse leave'e cambierà nel colore predefinito.

Tastiera

Il modo più semplice per un utente di inserire dati testuali nella tua applicazione è tramite la tastiera, se disponibile. Ricorda che non tutti i dispositivi mobili dispongono di tastiere ad eccezione di laptop e desktop.

• Silverlight offre due eventi semplici per l'input da tastiera, KeyUp e KeyDown.

• Entrambi passano a KeyEventArgs al gestore e la proprietà Key indica quale tasto è stato premuto.

• Nell'esempio seguente vengono gestiti alcuni degli input da tastiera.

• L'esempio seguente definisce un gestore per l'evento Click e un gestore per KeyDown evento.

Di seguito è riportato il codice XAML in cui vengono aggiunti diversi elementi dell'interfaccia utente.

<UserControl x:Class = "KeyboardInput.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
	
   <Grid x:Name = "LayoutRoot" Background = "White">
	
      <StackPanel Orientation = "Horizontal" KeyDown = "OnTextInputKeyDown"> 
         <TextBox Width = "400" Height = "30" Margin = "10"/> 
			
         <Button Click = "OnTextInputButtonClick" 
            Content = "Open" Margin = "10" Width = "50" Height = "30"/> 
				
      </StackPanel>
		
   </Grid> 
	
</UserControl>

Di seguito è riportato il codice C # in cui vengono gestiti diversi eventi di tastiera e clic.

using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Input;
  
namespace KeyboardInput {

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      } 
		
      private void OnTextInputKeyDown(object sender, KeyEventArgs e) { 
         if (e.Key == Key.O) { 
            handle(); 
            e.Handled = true; 
         } 
      } 
		
      private void OnTextInputButtonClick(object sender, RoutedEventArgs e) { 
         handle(); 
         //e.Handled = true; 
      } 
		
      public void handle() { 
         MessageBox.Show("Do you want to open a file?"); 
      }  
   } 
}

Quando il codice sopra viene compilato ed eseguito, vedrai quanto segue:

Se fai clic sul file Open o fare clic nella casella di testo e fare clic OK, quindi verrà visualizzato lo stesso messaggio.

Ti consigliamo di eseguire l'esempio sopra per una migliore comprensione.