Présentation des contrôles et des modèlesIntro to controls and patterns

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.In Windows app development, a control is a UI element that displays content or enables interaction. 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 modifiable pour afficher les données et obtenir les entrées utilisateur.You create the UI for your app by using controls such as buttons, text boxes, and combo boxes to display data and get user input.

API importantes : Espace de noms Windows.UI.Xaml.ControlsImportant APIs: Windows.UI.Xaml.Controls namespace

Un modèle est en quelque sorte une recette qui permet de modifier un contrôle ou d’associer plusieurs contrôles pour créer un élément nouveau.A pattern is a recipe for modifying a control or combining several controls to make something new. Par exemple, le modèle Maître/détails est une façon d’utiliser un contrôle SplitView pour la navigation dans l’application.For example, the master/details pattern is a way that you can use a SplitView control for app navigation. De la même façon, vous pouvez personnaliser le modèle d’un contrôle NavigationView pour implémenter le modèle d’onglet.Similarly, you can customize the template of a NavigationView control to implement the tab pattern.

Dans de nombreux cas, vous pouvez utiliser un contrôle en l’état.In many cases, you can use a control as-is. Toutefois, les contrôles XAML distinguent la fonction de la structure et de l’apparence, vous pouvez donc apporter des modifications à différents niveaux pour les adapter à vos besoins.But XAML controls separate function from structure and appearance, so you can make various levels of modification to make them fit your needs. Dans la section Style, vous pouvez apprendre à utiliser des styles XAML et des modèles de contrôle pour modifier un contrôle.In the Style section, you can learn how to use XAML styles and control templates to modify a control.

Dans cette section, nous fournissons des indications pour chaque contrôle XAML que vous pouvez utiliser pour créer l’interface utilisateur de votre application.In this section, we provide guidance for each of the XAML controls you can use to build your app UI. Pour commencer, cet article explique comment ajouter des contrôles à votre application.To start, this article shows you how to add controls to your app. Il existe 3 étapes principales pour utiliser des contrôles dans votre application :There are 3 key steps to using controls to your app:

  • Ajoutez un contrôle à l’interface utilisateur de votre application.Add a control to your app UI.
  • Définissez des propriétés sur le contrôle, telles que la largeur, la hauteur ou la couleur de premier plan.Set properties on the control, such as width, height, or foreground color.
  • Associez du code aux gestionnaires d’événements du contrôle afin qu’il effectue une opération.Add code to the control's event handlers so that it does something.

Ajouter un contrôleAdd a control

Vous pouvez ajouter un contrôle à une application de plusieurs façons :You can add a control to an app in several ways:

  • Utilisez un outil de conception tel que Blend pour Visual Studio ou le concepteur XAML (Extensible Application Markup Language) Microsoft Visual Studio.Use a design tool like Blend for Visual Studio or the Microsoft Visual Studio Extensible Application Markup Language (XAML) designer.
  • Ajoutez le contrôle au balisage XAML dans l’éditeur XAML Visual Studio.Add the control to the XAML markup in the Visual Studio XAML editor.
  • Ajoutez le contrôle dans du code.Add the control in 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.Controls that you add in code are visible when the app runs, but are not visible in the Visual Studio XAML designer.

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.In Visual Studio, when you add and manipulate controls in your app, you can use many of the program's features, including the Toolbox, XAML designer, XAML editor, and the Properties window.

La boîte à outils Visual Studio affiche de nombreux contrôles utilisables dans votre application.The Visual Studio Toolbox displays many of the controls that you can use in your app. Pour ajouter un contrôle à votre application, double-cliquez dessus dans la boîte à outils.To add a control to your app, double-click it in the Toolbox. Par exemple, lorsque vous double-cliquez sur le contrôle TextBox, le code XAML suivant est ajouté à la vue XAML.For example, when you double-click the TextBox control, this XAML is added to the XAML view.

<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.You can also drag the control from the Toolbox to the XAML designer.

Définir le nom d’un contrôleSet the name of a control

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.To work with a control in code, you set its x:Name attribute and reference it by name in your code. Vous pouvez définir le nom dans la fenêtre Propriétés de Visual Studio ou en XAML.You can set the name in the Visual Studio Properties window or in XAML. Voici comment définir le nom du contrôle actuellement sélectionné en utilisant la zone de texte Nom en haut de la fenêtre Propriétés.Here's how to set the name of the currently selected control by using the Name text box at the top of the Properties window.

Pour affecter un nom à un contrôleTo name a control

  1. Sélectionnez l’élément à nommer.Select the element to name.
  2. Dans le panneau Propriétés, tapez un nom dans la zone de texte Nom.In the Properties panel, type a name into the Name text box.
  3. Appuyez sur Entrée pour valider le nom.Press Enter to commit the name.

Propriété Name dans le concepteur Visual Studio

Voici comment vous pouvez définir le nom d’un contrôle dans l’éditeur XAML en ajoutant l’attribut x:Name.Here's how to set the name of a control in the XAML editor by adding the x:Name attribute.

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

Définir les propriétés de contrôleSet the control properties

Les propriétés vous permettent de spécifier l’aspect, le contenu et d’autres attributs des contrôles.You use properties to specify the appearance, content, and other attributes of controls. 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éfinis automatiquement par Visual Studio.When you add a control using a design tool, some properties that control size, position, and content might be set for you by 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.You can change some properties, such as Width, Height or Margin, by selecting and manipulating the control in the Design view. L’illustration suivante montre certains des outils de redimensionnement disponibles en mode Création.This illustration shows some of the resizing tools available in Design view.

Outils de redimensionnement dans le concepteur Visual Studio

Vous souhaiterez peut-être laisser le contrôle être redimensionné et positionné automatiquement.You might want to let the control be sized and positioned automatically. Dans ce cas, vous pouvez redéfinir les propriétés de taille et de position définies automatiquement par Visual Studio.In this case, you can reset the size and position properties that Visual Studio set for you.

Pour réinitialiser une propriétéTo reset a property

  1. Dans le panneau Propriétés, cliquez sur le marqueur de propriété en regard de la valeur de propriété.In the Properties panel, click the property marker next to the property value. Le menu des propriétés s’ouvre.The property menu opens.
  2. Dans le menu des propriétés, cliquez sur Réinitialiser.In the property menu, click Reset.

Option de menu Réinitialiser de la propriété Visual Studio

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.You can set control properties in the Properties window, in XAML, or in code. Par exemple, pour modifier la couleur de premier plan d’un objet Button, vous définissez la propriété Foreground du contrôle.For example, to change the foreground color for a Button, you set the control's Foreground property. 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.This illustration shows how to set the Foreground property by using the color picker in the Properties window.

Sélecteur de couleur dans le concepteur Visual Studio

Voici comment définir la propriété Foreground dans l’éditeur XAML.Here's how to set the Foreground property in the XAML editor. Notez l’ouverture de la fenêtre Visual Studio IntelliSense pour une entrée plus aisée de la syntaxe.Notice the Visual Studio IntelliSense window that opens to help you with the syntax.

IntelliSense dans XAML partie 1

IntelliSense dans XAML partie 2

Voici la syntaxe XAML issue de la définition de la propriété Foreground.Here's the resulting XAML after you set the Foreground property.

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

Voici comment définir la propriété Foreground dans du code.Here's how to set the Foreground property in code.

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

Créer un gestionnaire d’événementsCreate an event handler

Chaque contrôle possède des événements qui réagissent aux actions de l’utilisateur ou à d’autres modifications dans votre application.Each control has events that enable you to respond to actions from your user or other changes in your app. Par exemple, un contrôle Button contient un événement Click qui est déclenché lorsqu’un utilisateur clique sur l’objet Button.For example, a Button control has a Click event that is raised when a user clicks the Button. Vous créez une méthode, appelée gestionnaire d’événements, pour gérer l’événement.You create a method, called an event handler, to handle the event. 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.You can associate a control's event with an event handler method in the Properties window, in XAML, or in code. Pour plus d’informations sur les événements, voir Vue d’ensemble des événements et des événements routés.For more info about events, see Events and routed events overview.

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.To create an event handler, select the control and then click the Events tab at the top of the Properties window. La fenêtre Propriétés répertorie tous les événements disponibles pour ce contrôle.The Properties window lists all of the events available for that control. Voici une partie des événements associés à un objet Button.Here are some of the events for a Button.

Liste des événements Visual Studio

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.To create an event handler with the default name, double-click the text box next to the event name in the Properties window. 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.To create an event handler with a custom name, type the name of your choice into the text box and press enter. Le gestionnaire d’événements est créé, et le fichier code-behind est ouvert dans l’éditeur de code.The event handler is created and the code-behind file is opened in the code editor. La méthode de gestionnaire d’événements possède 2 paramètres.The event handler method has 2 parameters. Le premier est sender, qui est une référence à l’objet auquel le gestionnaire est attaché.The first is sender, which is a reference to the object where the handler is attached. Le paramètre sender est un type Object.The sender parameter is an Object type. 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.You typically cast sender to a more precise type if you expect to check or change the state on the sender object itself. En fonction de 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é.Based on your own app design, you expect a type that is safe to cast the sender to, based on where the handler is attached. 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 ou args.The second value is event data, which generally appears in signatures as the e or args parameter.

Voici le code qui gère l’événement Click d’un objet Button nommé Button1.Here's code that handles the Click event of a Button named Button1. Lorsque vous cliquez sur le bouton, la propriété Foreground de l’objet Button sur lequel vous avez cliqué a la valeur blue.When you click the button, the Foreground property of the Button you clicked is set to blue.

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.You can also associate an event handler in XAML. Dans l’éditeur XAML, tapez le nom de l’événement à gérer.In the XAML editor, type in the event name that you want to handle. Visual Studio affiche une fenêtre IntelliSense lorsque vous commencez à taper.Visual Studio shows an IntelliSense window when you begin typing. Après avoir spécifié l’événement, vous pouvez double-cliquer sur <New Event Handler> 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.After you specify the event, you can double-click <New Event Handler> in the IntelliSense window to create a new event handler with the default name, or select an existing event handler from the list.

Voici la fenêtre IntelliSense qui apparaît.Here's the IntelliSense window that appears. Elle vous permet de créer un gestionnaire d’événements ou de sélectionner un gestionnaire d’événements existants.It helps you create a new event handler or select an existing event handler.

IntelliSense pour l’événement Click

L’exemple suivant montre comment associer un événement Click à un gestionnaire d’événements nommé Button_Click en XAML.This example shows how to associate a Click event with an event handler named Button_Click in 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.You can also associate an event with its event handler in the code-behind. Voici comment associer un gestionnaire d’événements dans du code.Here's how to associate an event handler in code.

Button1.Click += new RoutedEventHandler(Button_Click);
Button1().Click({ this, &MainPage::Button1_Click });