Présentation des contrôles et des modèles

Dans le développement d’applications Windows, un contrôle est un élément d’interface utilisateur qui affiche du contenu ou permet une interaction. Vous créez l’interface utilisateur de votre application à l’aide de contrôles tels que des boutons, des zones de texte et des zones de liste modifiable pour afficher des données et obtenir une entrée utilisateur.

API importantes : espace de noms Windows.UI.Xaml.Controls

Un modèle est une recette pour modifier un contrôle ou combiner plusieurs contrôles pour créer quelque chose de nouveau. Par exemple, le modèle liste/détails est un moyen d’utiliser un contrôle SplitView pour la navigation d’application. De même, vous pouvez personnaliser le modèle d’un contrôle NavigationView pour implémenter le modèle d’onglet.

Dans de nombreux cas, vous pouvez utiliser un contrôle tel quel. Toutefois, les contrôles XAML séparent la fonction de la structure et de l’apparence. Vous pouvez donc apporter différents niveaux de modification pour les adapter à vos besoins. Dans la section Style , vous pouvez apprendre à utiliser des styles XAML et des modèles de contrôle pour modifier un contrôle.

Dans cette section, nous fournissons des conseils pour chacun des contrôles XAML que vous pouvez utiliser pour créer votre interface utilisateur d’application. Pour commencer, cet article vous montre comment ajouter des contrôles à votre application. Il existe trois étapes clés pour utiliser des contrôles dans votre application :

• Ajoutez un contrôle à l’interface utilisateur de votre application.
• Définissez des propriétés sur le contrôle, telles que la largeur, la hauteur ou la couleur de premier plan.
• Ajoutez du code aux gestionnaires d’événements du contrôle afin qu’il fasse quelque chose.

Ajouter 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 (Extensible Application Markup Language) de Microsoft Visual Studio.
• Ajoutez le contrôle au balisage XAML dans l’éditeur XAML de Visual Studio.
• Ajoutez le contrôle dans le code. Les contrôles que vous ajoutez du code sont visibles lorsque l’application s’exécute, mais ne sont pas visibles dans le concepteur XAML Visual Studio.

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 la plupart des contrôles que vous pouvez utiliser 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, ce code XAML est ajouté à la vue XAML.

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

Vous pouvez également faire glisser le contrôle de la boîte à outils vers l'éditeur XAML.

Définir le nom d’un contrôle

Pour utiliser un contrôle dans le code, vous définissez son attribut x :Name et référencez-le par 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 définir le nom du contrôle actuellement sélectionné à l’aide de la zone de texte Nom en haut de la fenêtre Propriétés.

Pour nommer un contrôle

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

Voici comment définir le nom d’un contrôle dans l’éditeur XAML en ajoutant l’attribut x :Name.

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

Définir les propriétés du contrôle

Vous utilisez des propriétés pour spécifier l’apparence, 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 pour vous 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 dans la vue Création. Cette illustration montre quelques-uns des outils de redimensionnement disponibles en mode Création.

Vous pourriez laisser le contrôle se dimensionner et se positionner automatiquement. Dans ce cas, vous pouvez réinitialiser les propriétés de taille et de position définies par Visual Studio pour vous.

Pour réinitialiser une propriété

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

Vous pouvez définir des propriétés de 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 bouton, vous définissez la propriété de premier plan du contrôle. Cette illustration montre comment définir la propriété de premier plan à l’aide du sélecteur de couleurs dans la fenêtre Propriétés.

Voici comment définir la propriété de premier plan dans l’éditeur XAML. Notez la fenêtre Visual Studio IntelliSense qui s’ouvre pour vous aider à utiliser la syntaxe.

Voici le code XAML obtenu après avoir défini la propriété de premier plan.

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

Voici comment définir la propriété de premier plan dans le code.

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

Button1().Foreground(Media::SolidColorBrush(Windows::UI::Colors::Beige()));

Créer un gestionnaire d’événements

Chaque contrôle a des événements qui vous permettent de répondre aux actions de votre utilisateur ou d’autres modifications dans votre application. Par exemple, un contrôle Button possède un événement Click qui est déclenché lorsqu'un utilisateur clique sur le 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, consultez la 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 quelques-uns des événements d’un bouton.

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 de l’é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 du gestionnaire d’événements a 2 paramètres. La première est sender, qui est une référence à l’objet où le gestionnaire est attaché. Le sender paramètre est un type d’objet . Vous effectuez généralement un cast sender vers un type plus précis si vous prévoyez de vérifier ou de modifier l’état sur l’objet sender lui-même. En fonction de la conception de votre application, vous vous attendez à ce que sender soit converti en un type sûr, en fonction de l'endroit où le gestionnaire est attaché. La deuxième valeur est les données d’événement, qui apparaissent généralement dans les signatures en tant que e ou args paramètre.

Voici le code qui gère l’événement Click d’un bouton nommé Button1. Lorsque vous cliquez sur le bouton, la propriété de premier plan du bouton sur lequel vous avez cliqué est définie sur bleue.

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

#MainPage.h
struct MainPage : MainPageT<MainPage>
    {
        MainPage();
        ...
        void Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e);
    };
    
#MainPage.cpp
void MainPage::Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e)
    {
        auto b{ sender.as<winrt::Windows::UI::Xaml::Controls::Button>() };
        b.Foreground(Media::SolidColorBrush(Windows::UI::Colors::Blue()));
    }

Vous pouvez également associer un gestionnaire d’événements en XAML. Dans l’éditeur XAML, tapez le nom de l’événement que vous souhaitez 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 <New Event Handler> dans la fenêtre IntelliSense pour créer un gestionnaire d’événements avec le nom par défaut, ou sélectionner un gestionnaire d’événements existant dans la liste.

Voici la fenêtre IntelliSense qui s’affiche. Il vous aide à créer un gestionnaire d’événements ou à sélectionner un gestionnaire d’événements existant.

Cet exemple 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 le code.

Button1.Click += new RoutedEventHandler(Button_Click);

Button1().Click({ this, &MainPage::Button1_Click });

Rubriques connexes

• Index des contrôles par fonction
• Espace de noms Windows.UI.Xaml.Controls
• Mise en page
• Style
• Utilisabilité