Silverlight - Gestion des entrées
Dans ce chapitre, nous allons apprendre à gérer les entrées utilisateur dans les applications Silverlight. Silverlight fournit une API puissante à l'aide de laquelle une application peut obtenir des entrées de divers appareils tels que la souris, le clavier et le tactile, etc.
Types d'entrée
Un utilisateur peut interagir avec votre application de différentes manières. Le moyen le plus évident est d'utiliser une souris. Silverlight propose des événements pour le suivi -
- Mouvements de souris
- Clics sur le bouton, et
- Activité de la roue
Il y a aussi le clavier, bien sûr, et Silverlight prend également en charge la saisie sur écran tactile. Si vous êtes familiarisé avec la prise en charge tactile dans Windows, vous savez que la saisie tactile peut être représentée soit comme des événements de bas niveau fournissant des informations détaillées, soit elle peut être résumée en événements de haut niveau appelés gestes.
Événements de souris
Commençons par examiner les événements d'entrée de souris proposés par Silverlight. Certains événements concernent le mouvement du pointeur de la souris.
le MouseMove l'événement est déclenché à chaque fois que le pointeur se déplace alors qu'il se trouve sur les éléments auxquels vous avez attaché le gestionnaire.
Vous obtenez également MouseEnter et MouseLeave événements pour vous avertir lorsque la souris entre et sort de l'élément.
Vous trouverez ci-dessous le code XAML dans lequel l'ellipse et TextBlock sont ajoutés.
<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>Ci-dessous est la mise en œuvre pour différents mouse input événements.
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);
}
}
}Lorsque le code ci-dessus est compilé et exécuté, vous verrez la sortie suivante.
Lorsque la souris entre dans l'ellipse, vous verrez le changement de couleur et de coordonnées.
Lorsque la souris quitte l'ellipse, elle affichera un message 'mouse leave'et changera à la couleur par défaut.
Clavier
Le moyen le plus simple pour un utilisateur de saisir des données textuelles dans votre application consiste à utiliser le clavier, le cas échéant. N'oubliez pas que tous les appareils mobiles n'ont pas de clavier, à l'exception des ordinateurs portables et des ordinateurs de bureau.
Silverlight propose deux événements simples pour la saisie au clavier, KeyUp et KeyDown.
Ces deux passent un KeyEventArgs au gestionnaire, et la propriété Key indique quelle touche a été enfoncée.
Dans l'exemple ci-dessous, certaines entrées du clavier sont gérées.
L'exemple suivant définit un gestionnaire pour l'événement Click et un gestionnaire pour le KeyDown un événement.
Vous trouverez ci-dessous le code XAML dans lequel différents éléments d'interface utilisateur sont ajoutés.
<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>Vous trouverez ci-dessous le code C # dans lequel différents événements de clavier et de clic sont gérés.
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?");
}
}
}Lorsque le code ci-dessus est compilé et exécuté, vous verrez ce qui suit -
Si vous cliquez sur le Open ou cliquez dans la zone de texte et cliquez sur OK, puis il affichera le même message.
Nous vous recommandons d'exécuter l'exemple ci-dessus pour une meilleure compréhension.