Modèles de contrôles

Article
07/04/2024

Vous pouvez personnaliser la structure visuelle et le comportement visuel d’un contrôle en créant un modèle de contrôle dans l’infrastructure XAML. Les contrôles ont de nombreuses propriétés, telles que Background, Foreground et FontFamily, que vous pouvez définir pour spécifier différents aspects de l’apparence du contrôle. Toutefois, les modifications que vous pouvez apporter en définissant ces propriétés sont limitées. Vous pouvez spécifier des personnalisations supplémentaires en créant un modèle à l’aide de la classe ControlTemplate. Ici, nous vous montrons comment créer un ControlTemplate pour personnaliser l’apparence d’un contrôle CheckBox .

API importantes : classe ControlTemplate, propriété Control.Template

Exemple de modèle de contrôle personnalisé

Par défaut, un contrôle CheckBox place son contenu (la chaîne ou l’objet en regard de CheckBox) à droite de la zone de sélection, et une coche indique qu’un utilisateur a sélectionné checkBox. Ces caractéristiques représentent la structure visuelle et le comportement visuel de CheckBox.

Voici un CheckBox à l’aide du ControlTemplate par défaut affiché dans les états et Indeterminate les UncheckedCheckedétats.

modèle de case à cocher par défaut

Vous pouvez modifier ces caractéristiques en créant un ControlTemplate pour CheckBox. Par exemple, si vous souhaitez que le contenu de la case à cocher soit sous la zone de sélection et que vous souhaitez utiliser un X pour indiquer qu’un utilisateur a coché la case. Vous spécifiez ces caractéristiques dans le ControlTemplate du CheckBox.

Pour utiliser un modèle personnalisé avec un contrôle, affectez le ControlTemplate à la propriété Template du contrôle. Voici un CheckBox à l’aide d’un ControlTemplate appelé CheckBoxTemplate1. Nous affichons le langage XAML (Extensible Application Markup Language) pour ControlTemplate dans la section suivante.

<CheckBox Content="CheckBox" Template="{StaticResource CheckBoxTemplate1}" IsThreeState="True" Margin="20"/>

Voici comment cette CheckBox s’affiche dans les états et CheckedIndeterminate les Uncheckedétats après l’application de notre modèle.

modèle de case à cocher personnalisé

Spécifier la structure visuelle d’un contrôle

Lorsque vous créez un ControlTemplate, vous combinez des objets FrameworkElement pour générer un seul contrôle. Un ControlTemplate ne doit avoir qu’un seul FrameworkElement comme élément racine. L’élément racine contient généralement d’autres objets FrameworkElement . La combinaison d’objets constitue la structure visuelle du contrôle.

Ce code XAML crée un ControlTemplate pour un CheckBox qui spécifie que le contenu du contrôle se trouve sous la zone de sélection. L’élément racine est une bordure. L’exemple spécifie un chemin d’accès pour créer un X qui indique qu’un utilisateur a sélectionné checkBox et un Ellipse qui indique un état indéterminé. Notez que l’opacité est définie sur 0 sur le chemin d’accès et l’Ellipse afin que, par défaut, aucun n’apparaît.

Un TemplateBinding est un lien spécial qui lie la valeur d’une propriété dans un modèle de contrôle à la valeur d’une autre propriété exposée sur le contrôle basé sur un modèle. TemplateBinding ne peut être utilisé que dans une définition ControlTemplate en XAML. Consultez Extension de balisage TemplateBinding pour plus d’informations.

Remarque

À compter de Windows 10 version 1809 (SDK 17763), vous pouvez utiliser des extensions de balisage x:Bind là où vous utilisez TemplateBinding. Consultez Extension de balisage TemplateBinding pour plus d’informations.

<ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox">
    <Border BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Background="{TemplateBinding Background}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="NormalRectangle" Fill="Transparent" Height="20" Width="20"
                       Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
                       UseLayoutRounding="False"/>
            <!-- Create an X to indicate that the CheckBox is selected. -->
            <Path x:Name="CheckGlyph"
                  Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z"
                  Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                  FlowDirection="LeftToRight"
                  Height="14" Width="16" Opacity="0" Stretch="Fill"/>
            <Ellipse x:Name="IndeterminateGlyph"
                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                     Height="8" Width="8" Opacity="0" UseLayoutRounding="False" />
            <ContentPresenter x:Name="ContentPresenter"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              Content="{TemplateBinding Content}"
                              Margin="{TemplateBinding Padding}" Grid.Row="1"
                              HorizontalAlignment="Center"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
</ControlTemplate>

Spécifier le comportement visuel d’un contrôle

Un comportement visuel spécifie l’apparence d’un contrôle lorsqu’il est dans un certain état. Le contrôle CheckBox a 3 états de vérification : Checked, Uncheckedet Indeterminate. La valeur de la propriété IsChecked détermine l’état de CheckBox et son état détermine ce qui apparaît dans la zone.

Ce tableau répertorie les valeurs possibles d’IsChecked, les états correspondants de CheckBox et l’apparence de CheckBox.

Valeur IsChecked	État de CheckBox	Apparence de CheckBox
true	`Checked`	Contient un « X ».
false	`Unchecked`	Vide.
null	`Indeterminate`	Contient un cercle.

Vous spécifiez l’apparence d’un contrôle lorsqu’il se trouve dans un état donné à l’aide d’objets VisualState . VisualState contient un Setter ou storyboard qui modifie l’apparence des éléments dans ControlTemplate. Lorsque le contrôle entre dans l’état spécifié par la propriété VisualState.Name, la propriété change dans Setter ou Storyboard. Lorsque le contrôle quitte l’état, les modifications sont supprimées. Vous ajoutez des objets VisualState aux objets VisualStateGroup. Vous ajoutez des objets VisualStateGroup à la propriété jointe VisualStateManager.VisualStateGroups, que vous définissez sur le FrameworkElement racine du ControlTemplate.

Ce code XAML affiche les objets VisualState pour les états et Indeterminate les CheckedUncheckedétats. L’exemple définit la propriété jointe VisualStateManager.VisualStateGroups sur la bordure, qui est l’élément racine du ControlTemplate. L’état VisualState Checked indique que la valeur Opacity de l’élément Path nommé CheckGlyph (présenté dans l’exemple précédent) est 1. L’état VisualState Indeterminate indique que la valeur Opacity de l’élément Ellipse nommé IndeterminateGlyph est 1. L’état VisualState Unchecked ne dispose d’aucun élément Setter ou Storyboard. Ainsi, le contrôle CheckBox reprend son apparence par défaut.

<ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox">
    <Border BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Background="{TemplateBinding Background}">

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CheckStates">
                <VisualState x:Name="Checked">
                    <VisualState.Setters>
                        <Setter Target="CheckGlyph.Opacity" Value="1"/>
                    </VisualState.Setters>
                    <!-- This Storyboard is equivalent to the Setter. -->
                    <!--<Storyboard>
                        <DoubleAnimation Duration="0" To="1"
                         Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Opacity"/>
                    </Storyboard>-->
                </VisualState>
                <VisualState x:Name="Unchecked"/>
                <VisualState x:Name="Indeterminate">
                    <VisualState.Setters>
                        <Setter Target="IndeterminateGlyph.Opacity" Value="1"/>
                    </VisualState.Setters>
                    <!-- This Storyboard is equivalent to the Setter. -->
                    <!--<Storyboard>
                        <DoubleAnimation Duration="0" To="1"
                         Storyboard.TargetName="IndeterminateGlyph" Storyboard.TargetProperty="Opacity"/>
                    </Storyboard>-->
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="NormalRectangle" Fill="Transparent" Height="20" Width="20"
                       Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
                       UseLayoutRounding="False"/>
            <!-- Create an X to indicate that the CheckBox is selected. -->
            <Path x:Name="CheckGlyph"
                  Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z"
                  Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                  FlowDirection="LeftToRight"
                  Height="14" Width="16" Opacity="0" Stretch="Fill"/>
            <Ellipse x:Name="IndeterminateGlyph"
                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                     Height="8" Width="8" Opacity="0" UseLayoutRounding="False" />
            <ContentPresenter x:Name="ContentPresenter"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              Content="{TemplateBinding Content}"
                              Margin="{TemplateBinding Padding}" Grid.Row="1"
                              HorizontalAlignment="Center"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
</ControlTemplate>

Pour mieux comprendre le fonctionnement des objets VisualState, réfléchissez à ce qui se passe lorsque CheckBox passe de l’état Unchecked à l’étatChecked, puis à l’étatIndeterminate, puis revenez à l’état.Unchecked Voici les transitions.

Transition d'état	Ce qui se passe	Apparence de CheckBox lorsque la transition se termine
De `Unchecked` à `Checked`.	La valeur Setter de l’état VisualState `Checked` est appliquée. Ainsi, la valeur Opacity de l’élément `CheckGlyph` est 1.	Un X s’affiche.
De `Checked` à `Indeterminate`.	La valeur Setter de l’état VisualState `Indeterminate` est appliquée. Ainsi, la valeur Opacity de l’élément `IndeterminateGlyph` est 1. La valeur Setter de l’état VisualState `Checked` est supprimée. Ainsi, la valeur Opacity de l’élément `CheckGlyph` est 0.	Un cercle s’affiche.
De `Indeterminate` à `Unchecked`.	La valeur Setter de l’état VisualState `Indeterminate` est supprimée. Ainsi, la valeur Opacity de l’élément `IndeterminateGlyph` est 0.	Rien n’est affiché.

Pour plus d’informations sur la création d’états visuels pour les contrôles, et notamment sur l’utilisation de la classe Storyboard et des types d’animation, consultez les animations storyboarded pour les états visuels.

Utiliser facilement des outils pour travailler avec des thèmes

Un moyen rapide d’appliquer des thèmes à vos contrôles consiste à cliquer avec le bouton droit sur un contrôle dans le plan du document Microsoft Visual Studio, puis à sélectionner Modifier le thème ou modifier le style (selon le contrôle sur lequel vous cliquez avec le bouton droit). Vous pouvez ensuite appliquer un thème existant en sélectionnant Appliquer une ressource ou en définissant une nouvelle en sélectionnant Créer vide.

Contrôles et accessibilité

Lorsque vous créez un modèle pour un contrôle, en plus de modifier le comportement et l’apparence visuelle du contrôle, vous pouvez également changer la façon dont le contrôle se représente en infrastructures d’accessibilité. L’application Windows prend en charge l’infrastructure Microsoft UI Automation pour l’accessibilité. Tous les contrôles par défaut et leurs modèles prennent en charge les types et modèles de contrôle UI Automation courants appropriés à l’objectif et à la fonction du contrôle. Ces types et modèles de contrôle sont interprétés par des clients UI Automation tels que des technologies d’assistance, ce qui permet à un contrôle d’être accessible dans le cadre d’une interface utilisateur d’application plus large.

Pour séparer la logique de contrôle de base et également pour satisfaire certaines des exigences architecturales d’UI Automation, les classes de contrôle incluent leur prise en charge de l’accessibilité dans une classe distincte, un homologue Automation. Les homologues d’automatisation ont parfois des interactions avec les modèles de contrôle, car les homologues s’attendent à ce que certaines parties nommées existent dans les modèles, de sorte que les fonctionnalités telles que l’activation des technologies d’assistance pour appeler des actions de boutons sont possibles.

Lorsque vous créez un contrôle personnalisé complètement nouveau, vous souhaiterez parfois également créer un homologue Automation pour y accéder. Pour plus d’informations, consultez Homologues Automation personnalisés.

En savoir plus sur le modèle par défaut d’un contrôle

Les rubriques qui documentent les styles et les modèles des contrôles XAML vous montrent des extraits du même code XAML de départ que vous voyez si vous avez utilisé les techniques Modifier le thème ou Modifier le style expliquées précédemment. Chaque rubrique répertorie les noms des états visuels, les ressources de thème utilisées et le code XAML complet pour le style qui contient le modèle. Les rubriques peuvent être utiles si vous avez déjà commencé à modifier un modèle et que vous souhaitez voir à quoi ressemble le modèle d’origine, ou pour vérifier que votre nouveau modèle a tous les états visuels nommés requis.

Ressources de thème dans les modèles de contrôle

Pour certains des attributs des exemples XAML, vous avez peut-être remarqué des références de ressources qui utilisent l’extension de balisage {ThemeResource}. Il s’agit d’une technique qui permet à un modèle de contrôle unique d’utiliser des ressources qui peuvent être différentes valeurs selon le thème actuellement actif. Cela est particulièrement important pour les pinceaux et les couleurs, car l’objectif principal des thèmes est de permettre aux utilisateurs de choisir s’ils veulent un thème foncé, clair ou à contraste élevé appliqué au système dans l’ensemble. Les applications qui utilisent le système de ressources XAML peuvent utiliser un jeu de ressources approprié pour ce thème, afin que les choix de thème dans l’interface utilisateur d’une application reflètent le choix de thème à l’échelle du système de l’utilisateur.

Partager via