Langage: HTML | XAML

Démarrage rapide : ajout de contrôles et gestion des événements (XAML)

Applies to Windows and Windows Phone

Pour créer l’interface utilisateur de votre application, utilisez des contrôles tels que des boutons, des zones de texte et des zones de liste déroulante. Cette rubrique indique comment ajouter des contrôles à votre application. En règle générale, vous recourez à la procédure suivante pour utiliser des contrôles :

  • Vous ajoutez un contrôle à l’interface utilisateur de votre application.
  • Vous définissez des propriétés sur le contrôle, telles que la largeur, la hauteur ou la couleur de premier plan.
  • Vous associez du code au contrôle afin qu’il effectue une opération.

Feuille de route : comment cette rubrique s’articule-t-elle par rapport aux autres ? Voir :

Prérequis

Nous partons du principe que vous savez créer une application de base en Microsoft Visual Basic, C# ou C++, et XAML (Extensible Application Markup Language). Pour obtenir des instructions sur la création de votre première application, voir Créer votre première application du Windows Store en C# ou Visual Basic ou Créer votre première application du Windows Store en C++.

Ajout d’un contrôle

Vous pouvez ajouter un contrôle à une application de plusieurs façons :

  • Utilisez un outil de conception tel que Blend pour Visual Studio ou le concepteur XAML Microsoft Visual Studio.
  • Ajoutez le contrôle au balisage XAML dans l’éditeur XAML Visual Studio.
  • Ajoutez le contrôle dans du code. Les contrôles que vous ajoutez dans du code sont visibles lorsque l’application s’exécute, mais pas dans le concepteur XAML Visual Studio.

La documentation de chaque contrôle inclut une rubrique de procédure qui explique comment ajouter le contrôle en XAML, ajouter du code ou utiliser un outil de conception. Par exemple, pour ajouter un contrôle Button, voir Comment ajouter un bouton.

Nous utilisons ici Visual Studio comme outil de conception, mais vous pouvez effectuer les mêmes tâches, et plus encore, dans Blend pour Visual Studio. Pour plus d’informations, voir Création d’une interface utilisateur à l’aide d’un concepteur XAML.

Dans Visual Studio, lorsque vous ajoutez et manipulez des contrôles dans votre application, vous pouvez utiliser de nombreuses fonctionnalités du programme, notamment la boîte à outils, le concepteur XAML, l’éditeur XAML et la fenêtre Propriétés.

La boîte à outils Visual Studio affiche de nombreux contrôles utilisables dans votre application. Pour ajouter un contrôle à votre application, double-cliquez dessus dans la boîte à outils. Par exemple, lorsque vous double-cliquez sur le contrôle TextBox, le code XAML (Extensible Application Markup Language) suivant est ajouté à la vue XAML.


 <TextBox HorizontalAlignment="Left" Text="TextBox" VerticalAlignment="Top"/>

Vous pouvez également faire glisser le contrôle à partir de la boîte à outils jusqu’au concepteur XAML.

Définition du nom d’un contrôle

Pour utiliser un contrôle dans du code, vous définissez son attribut x:Name, puis vous le référencez par son nom dans votre code. Vous pouvez définir le nom dans la fenêtre Propriétés de Visual Studio ou en XAML. Voici comment changer le nom du contrôle actuellement sélectionné en utilisant la zone de texte Nom en haut de la fenêtre Propriétés.

Hh465336.wedge(fr-fr,WIN.10).gifPour affecter un nom à un contrôle

  1. Sélectionnez l’élément à nommer.
  2. Dans le panneau Propriétés, tapez un nom dans la zone de texte Nom.
  3. Appuyez sur Entrée pour valider le nom.
Définition du nom dans le concepteur

Voici comment vous pouvez changer le nom d’un contrôle dans l’éditeur XAML en modifiant l’attribut x:Name.


<Button x:Name="Button1" Content="Button"/>

Définition des propriétés d’un contrôle

Les propriétés vous permettent de spécifier l’aspect, le contenu et d’autres attributs des contrôles. Lorsque vous ajoutez un contrôle à l’aide d’un outil de conception, certaines propriétés qui contrôlent la taille, la position et le contenu peuvent être définies automatiquement par Visual Studio. Vous pouvez modifier certaines propriétés, telles que Width, Height ou Margin, en sélectionnant et en manipulant le contrôle en mode Création. L’illustration suivante montre certains des outils de redimensionnement disponibles en mode Création.

Zone de texte dans le concepteur

Vous souhaiterez peut-être laisser le contrôle être redimensionné et positionné automatiquement. Dans ce cas, vous pouvez redéfinir les propriétés de taille et de position définies automatiquement par Visual Studio.

Hh465336.wedge(fr-fr,WIN.10).gifPour réinitialiser une propriété

  1. Dans le panneau Propriétés, cliquez sur le marqueur de propriété en regard de la valeur de propriété. Le menu des propriétés s’ouvre.
  2. Dans le menu des propriétés, cliquez sur Réinitialiser.

    Menu des propriétés

Vous pouvez définir les propriétés d’un contrôle dans la fenêtre Propriétés, en XAML ou dans du code. Par exemple, pour modifier la couleur de premier plan d’un objet Button, vous définissez la propriété Foreground du contrôle. L’illustration suivante montre comment définir la propriété Foreground à l’aide du sélecteur de couleurs dans la fenêtre Propriétés.

Définition du premier plan dans le concepteur

Voici comment définir la propriété Foreground dans l’éditeur XAML. Notez l’ouverture de la fenêtre Visual Studio IntelliSense pour une entrée plus aisée de la syntaxe.

Définition du premier plan en XAML

Définition du premier plan en XAML

Voici la syntaxe XAML issue de la définition de la propriété Foreground.


<Button x:Name="Button1" Content="Button" 
    HorizontalAlignment="Left" VerticalAlignment="Top"
    Foreground="Beige"/>

Voici comment définir la propriété Foreground dans du code.


Button1.Foreground = new SolidColorBrush(Windows.UI.Colors.Beige);

Création d’un gestionnaire d’événements

Chaque contrôle possède des événements qui réagissent aux actions de l’utilisateur ou à d’autres modifications dans votre application. Par exemple, un contrôle Button contient un événement Click qui est déclenché lorsqu’un utilisateur clique sur l’objet Button. Vous créez une méthode, appelée gestionnaire d’événements, pour gérer l’événement. Vous pouvez associer l’événement d’un contrôle à une méthode de gestionnaire d’événements dans la fenêtre Propriétés, en XAML ou dans du code. Pour plus d’informations sur les événements, voir Vue d’ensemble des événements et des événements routés.

Pour créer un gestionnaire d’événements, sélectionnez le contrôle, puis cliquez sur l’onglet Événements en haut de la fenêtre Propriétés. La fenêtre Propriétés répertorie tous les événements disponibles pour ce contrôle. Voici une partie des événements associés à un objet Button.

Événements de zone de texte

Pour créer un gestionnaire d’événements avec le nom par défaut, double-cliquez sur la zone de texte en regard du nom d’événement dans la fenêtre Propriétés. Pour créer un gestionnaire d’événements avec un nom personnalisé, tapez le nom de votre choix dans la zone de texte, puis appuyez sur Entrée. Le gestionnaire d’événements est créé, et le fichier code-behind est ouvert dans l’éditeur de code. La méthode de gestionnaire d’événements possède 2 paramètres. Le premier est sender, qui est une référence à l’objet auquel le gestionnaire est attaché. Le paramètre sender est un type Object. Vous effectuez généralement une conversion de type (transtypage) sender en un type plus précis si vous prévoyez de vérifier ou de modifier l’état sur l’objet sender lui-même. Suivant la conception de votre propre application, vous attendez un type vers lequel un transtypage de sender peut être effectué en toute sécurité, en fonction de l’élément auquel le gestionnaire est attaché. La seconde valeur correspond aux données d’événement, qui apparaissent généralement dans les signatures sous la forme du paramètre e.

Voici le code qui gère l’événement Click d’un objet Button nommé Button1. Lorsque vous cliquez sur le bouton, la propriété Foreground de l’objet Button sur lequel vous avez cliqué a la valeur « blue ».


private void Button_Click(object sender, RoutedEventArgs e)
{
    Button b = (Button)sender;
    b.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
}

Vous pouvez également associer un gestionnaire d’événements en XAML. Dans l’éditeur XAML, vous tapez le nom de l’événement à gérer. Visual Studio affiche une fenêtre IntelliSense lorsque vous commencez à taper. Après avoir spécifié l’événement, vous pouvez double-cliquer sur <Nouveau gestionnaire d’événements> dans la fenêtre IntelliSense pour créer un gestionnaire d’événements portant le nom par défaut, ou sélectionner un gestionnaire d’événements existant dans la liste. Voici la fenêtre IntelliSense qui apparaît pour faciliter la création d’un gestionnaire d’événements.

Création du gestionnaire d’événements TextChanged

L’exemple suivant montre comment associer un événement Click à un gestionnaire d’événements nommé Button_Click en XAML.


<Button Name="Button1" Content="Button" Click="Button_Click"/>

Vous pouvez également associer un événement à son gestionnaire d’événements dans le code-behind. Voici comment associer un gestionnaire d’événements dans du code.


Button1.Click += new RoutedEventHandler(Button_Click);

Nouveaux contrôles

Si vous utilisez d’autres plateformes XAML, vous pouvez être intéressé par les contrôles ci-après, qui sont nouveaux pour Windows 8.

Pour plus d’informations sur ces contrôles, ainsi que sur d’autres, voir la liste des contrôles.

Et après ?

Vous avez appris les notions de base liées à l’ajout d’un contrôle à votre application, à la définition des propriétés d’un contrôle et à la création de gestionnaires d’événements. L’étape suivante consiste à découvrir les contrôles disponibles : liste des contrôles ou contrôles par fonction. Vous pouvez également avoir un aperçu de la plupart des contrôles d’interface utilisateur Windows en téléchargeant l’exemple de contrôles de base.

Rubriques associées

Vue d’ensemble des événements et des événements routés
Liste des contrôles
Création d’une interface utilisateur à l’aide d’un concepteur XAML
Feuille de route pour la création d’applications en C#, C++ ou VB

 

 

Afficher:
© 2014 Microsoft