Silverlight - Manejo de entrada

En este capítulo, aprenderemos cómo manejar la entrada del usuario en las aplicaciones Silverlight. Silverlight proporciona una poderosa API con la ayuda de la cual una aplicación puede obtener entradas desde varios dispositivos como mouse, teclado y táctil, etc.

Tipos de entrada

Hay varias formas diferentes en las que un usuario puede interactuar con su aplicación. La forma más obvia es con un mouse. Silverlight ofrece eventos para seguimiento:

Movimientos del mouse
Clics de botón y
Actividad de la rueda

También está el teclado, por supuesto, y Silverlight también admite la entrada de pantalla táctil. Si está familiarizado con la compatibilidad táctil en Windows, sabrá que la entrada táctil se puede representar como eventos de bajo nivel que brindan información detallada o se puede resumir en eventos de alto nivel llamados gestos.

Eventos del mouse

Comencemos observando los eventos de entrada del mouse que ofrece Silverlight. Algunos eventos están relacionados con el movimiento del puntero del mouse.

los MouseMove El evento se genera cada vez que el puntero se mueve mientras está sobre los elementos a los que ha adjuntado el controlador.
Tu tambien obtienes MouseEnter y MouseLeave eventos para notificarle cuando el mouse entra y sale del elemento.

A continuación se muestra el código XAML en el que se agrega elipse y 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>

A continuación se muestra la implementación para diferentes mouse input eventos.

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);  
      }  
   } 
}

Cuando se compile y ejecute el código anterior, verá el siguiente resultado.

Cuando el mouse entre en la elipse, verá el cambio de color y coordenadas.

Cuando el mouse sale de la elipse, mostrará un mensaje 'mouse leave'y cambiará al color predeterminado.

Teclado

La forma más fácil para que un usuario ingrese datos textuales en su aplicación es a través del teclado, donde esté disponible. Recuerde que no todos los dispositivos móviles tienen teclados a excepción de las computadoras portátiles y de escritorio.

Silverlight ofrece dos eventos sencillos para la entrada de teclado, KeyUp y KeyDown.
Ambos pasan un KeyEventArgs al controlador, y la propiedad Key indica qué tecla se presionó.
En el siguiente ejemplo, se manejan algunas de las entradas del teclado.
El siguiente ejemplo define un controlador para el evento Click y un controlador para el KeyDown evento.

A continuación se muestra el código XAML en el que se agregan diferentes elementos de la interfaz de usuario.

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

A continuación se muestra el código C # en el que se manejan diferentes eventos de teclado y 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?"); 
      }  
   } 
}

Cuando se compile y ejecute el código anterior, verá lo siguiente:

Si hace clic en el Open o haga clic en el cuadro de texto y haga clic en OK, luego mostrará el mismo mensaje.

Le recomendamos que ejecute el ejemplo anterior para comprenderlo mejor.

↰ Previous page Next page ↱