Démarrage rapide : modèles de contrôle (XAML)

Applies to Windows and Windows Phone

Dans l’infrastructure XAML, vous créez un modèle de contrôle lorsque vous souhaitez personnaliser la structure et le comportement visuels d’un contrôle. Les contrôles sont dotés de plusieurs propriétés, telles que Background, Foreground, et FontFamily que vous pouvez définir en spécifiant les différents aspects de l’apparence du contrôle. Cependant, les modifications que vous apportez en définissant ces propriétés sont limitées. Vous pouvez utiliser la classe ControlTemplate pour créer un modèle qui offre un niveau supplémentaire de personnalisation. Voici comment créer une classe ControlTemplate pour personnaliser l’apparence d’un contrôle CheckBox.

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

Exemple de modèle de contrôle personnalisé

Par défaut, le contenu (chaîne ou objet situé à côté de CheckBox) d’un contrôle CheckBox figure à droite de la case de sélection. Il s’agit de la structure visuelle de CheckBox. Par défaut, une coche indique qu’un utilisateur a sélectionné la case CheckBox. Il s’agit du comportement visuel de CheckBox. Vous pouvez modifier ces caractéristiques en créant un modèle ControlTemplate pour la case CheckBox. Par exemple, supposons que vous souhaitiez placer le contenu d’une case à cocher en dessous de la case de sélection et utiliser un X pour indiquer qu’un utilisateur a sélectionné la case. Vous spécifiez alors ces caractéristiques dans le modèle ControlTemplate de CheckBox.

Vous trouverez ci-dessous l’exemple d’une case CheckBox avec le modèle ControlTemplate par défaut aux états Unchecked, Checked et Indeterminate.

Modèle CheckBox par défaut

Pour utiliser un modèle personnalisé avec un contrôle, vous devez affecter le modèle ControlTemplate à la propriété Template du contrôle. Vous trouverez ci-dessous l’exemple d’un contrôle CheckBox avec un modèle ControlTemplate appelé CheckBoxTemplate1. Le code XAML (Extensible Application Markup Language) relatif au modèle ControlTemplate est présenté à la section suivante.


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

Voici ce à quoi ressemble ce contrôle CheckBox aux états Unchecked, Checked et Indeterminate une fois le modèle appliqué.

Modèle CheckBox personnalisé

Spécification de la structure visuelle d’un contrôle

Lorsque vous créez un modèle ControlTemplate, vous combinez des objets FrameworkElement afin d’obtenir un contrôle unique. Un modèle ControlTemplate doit uniquement disposer d’un objet FrameworkElement comme élément racine. L’élément racine contient généralement d’autres objets FrameworkElement. La combinaison des objets forme la structure visuelle du contrôle.

Le code XAML suivant permet de créer un modèle ControlTemplate pour un contrôle CheckBox spécifiant que le contenu du contrôle doit être placé dessous la case de sélection. L’élément racine est un élément Border. L’exemple fourni inclut la mention Path pour créer un X indiquant que l’utilisateur a sélectionné la case CheckBox et la mention Ellipse indiquant un état indéterminé. Notez qu’Opacity a la valeur 0 dans les sections Path et Ellipse. Ainsi, par défaut, aucune opacité ne s’affiche dans les deux cas.


<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="{ThemeResource CheckBoxBackgroundThemeBrush}"  
                       Stroke="{ThemeResource CheckBoxBorderThemeBrush}" 
                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}" 
                       UseLayoutRounding="False" Height="21" Width="21"/>
            <!-- 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"/>
             <Rectangle x:Name="IndeterminateGlyph" 
                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}" 
                     Height="9" Width="9" Opacity="0" UseLayoutRounding="False" />
            <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" 
                              Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" Grid.Row="1" 
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
</ControlTemplate>


Spécification du comportement visuel d’un contrôle

Le comportement visuel indique l’apparence d’un contrôle lorsqu’il se trouve dans un état spécifique. Trois états de sélection sont associés au contrôle CheckBox : Checked, Unchecked et Indeterminate. La valeur de la propriété IsChecked détermine l’état du contrôle CheckBox, lequel détermine ce qui s’affiche dans la case.

Le tableau suivant comporte les valeurs IsChecked possibles, les états correspondants du contrôle CheckBox et l’apparence de CheckBox.

Valeur de IsChecked État de CheckBox Apparence de CheckBox
trueCheckedContient un "X".
falseUncheckedVide.
nullIndeterminateContient un rectangle.

 

Vous utilisez des objets VisualState pour indiquer l’apparence d’un contrôle lorsqu’il se trouve dans un état spécifique. Un objet VisualState contient un élément Storyboard changeant l’apparence des éléments dans le modèle ControlTemplate. Lorsque l’état du contrôle devient celui spécifié par la propriété VisualState.Name, l’élément Storyboard démarre. Lorsque le contrôle quitte cet état, l’élément Storyboard s’arrête. Vous ajoutez des objets VisualState à des objets VisualStateGroup. Vous ajoutez des objets VisualStateGroup à la propriété VisualStateManager.VisualStateGroups associée, que vous définissez sur l’élément FrameworkElement racine du modèle ControlTemplate.

Le code XAML suivant montre les objets VisualState correspondant aux états Checked, Unchecked et Indeterminate. Dans cet exemple, la propriété associée VisualStateManager.VisualStateGroups est définie sur Border, à savoir l’élément racine du modèle 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 Storyboard. Ainsi, le contrôle CheckBox reprend son apparence par défaut.


<ControlTemplate TargetType="CheckBox" x:Key="CheckBoxTemplate1">
    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 
            Background="{TemplateBinding Background}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CheckStates">
                <VisualState x:Name="Checked">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" 
                                         Storyboard.TargetName="CheckGlyph"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Unchecked"/>
                <VisualState x:Name="Indeterminate">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" 
                                         Storyboard.TargetName="IndeterminateGlyph"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="NormalRectangle" 
                       Fill="{ThemeResource CheckBoxBackgroundThemeBrush}"  
                       Stroke="{ThemeResource CheckBoxBorderThemeBrush}" 
                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"  
                       UseLayoutRounding="False" Height="21" Width="21"/>
            <!-- 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"/>
            <Rectangle x:Name="IndeterminateGlyph" 
                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}" 
                     Height="9" Width="9" Opacity="0" UseLayoutRounding="False" />
            <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" 
                              Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" Grid.Row="1" 
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
</ControlTemplate>

Pour mieux comprendre le fonctionnement des objets VisualState, observez ce qui se produit lorsque le contrôle CheckBox passe de l’état Unchecked à l’état Checked, puis à l’état Indeterminate, pour revenir ensuite à l’état Unchecked. Voici les transitions entre les états :

TransitionActionApparence du contrôle CheckBox en fin de transition
De Unchecked à CheckedLe Storyboard de l’objet VisualState Checked commence ; la valeur Opacity de CheckGlyph est donc 1. Un X s’affiche.
De Checked à IndeterminateLe Storyboard de l’objet VisualState Indeterminate commence ; la valeur Opacity de IndeterminateGlyph est donc 1. Le Storyboard de l’objet VisualState Checked se termine ; la valeur Opacity de CheckGlyph est donc 0. Un cercle s’affiche.
De Indeterminate à UncheckedLe Storyboard de l’objet VisualState Indeterminate se termine ; la valeur Opacity de IndeterminateGlyph est donc 0. Rien ne s’affiche.

 

Pour plus d’informations sur la façon de créer des états visuels pour des contrôles, notamment la façon d’utiliser la classe Storyboard et les types d’animations, voir Animations dans une table de montage séquentiel pour les états visuels.

Utilisation de thèmes en toute simplicité à l’aide d’outils

Pour appliquer rapidement des thèmes à vos contrôles, cliquez avec le bouton droit sur les aires de conception XAML de Microsoft Visual Studio et sélectionnez Modifier le thème ou Modifier le style (selon le contrôle concerné). Vous pouvez ensuite appliquer un thème existant en sélectionnant Appliquer la ressource ou en définir un nouveau en sélectionnant Créer vide.

Contrôles et accessibilité

Lorsque vous créez un modèle pour un contrôle, vous pouvez modifier non seulement le comportement et l’aspect visuel du contrôle, mais aussi la façon dont il se présente aux infrastructures d’accessibilité. Le Windows Runtime 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 des types et modèles de contrôle UI Automation courants qui sont adaptés à l’objet et à la fonction du contrôle. Ces types et modèles de contrôle sont interprétés par les clients UI Automation, notamment les technologies d’assistance. Un contrôle peut ainsi être accessible au sein d’une interface utilisateur d’application accessible plus importante.

Pour séparer la logique du contrôle de base et satisfaire à une partie des exigences architecturales d’UI Automation, la prise en charge de l’accessibilité des classes de contrôle se trouve dans une classe séparée, à savoir un homologue d’automation. Les homologues d’automation interagissent parfois avec les modèles de contrôle, et ce car les homologues s’attendent à ce que certaines parties nommées soient présentes dans les modèles. Il est donc possible d’implémenter des fonctionnalités telles que des technologies d’assistance pour appeler des actions de boutons.

Lorsque vous créez un contrôle personnalisé de toutes pièces, vous êtes parfois amené à créer un homologue d’automation pour l’accompagner. Pour plus d’informations, voir Homologues d’automation personnalisés.

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

Si vous consultez les diverses rubriques sous Ajout de contrôles et de contenu, vous trouverez des rubriques qui documentent les modèles de contrôle par défaut parmi les contrôles Windows Runtime existants. Par exemple, sous la rubrique Ajout de barres d’application, il existe une rubrique intitulée Styles et modèles de barre de l’application.

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

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 les ressources dont les valeurs peuvent être différentes selon le thème actif. Cela est particulièrement important pour les pinceaux et les couleurs, car le but principal des thèmes est de permettre aux utilisateurs de choisir s’ils veulent appliquer un thème foncé, clair ou à contraste élevé à l’ensemble du système. Les applications qui se servent du système de ressources XAML peuvent utiliser un ensemble de ressources approprié à 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.

D’autres rubriques sous Ajout de contrôles et de contenu se trouvent spécifiquement ici pour documenter les modèles de contrôle par défaut parmi les contrôles Windows Runtime existants. Dans ce cadre, les rubriques listent également les ressources de thème (principalement les pinceaux) utilisées par le modèle par défaut, ainsi que leurs valeurs sous chaque thème. En outre, l’ensemble complet des ressources de thème est documenté dans la référence aux ressources de thème XAML.

Rubriques associées

Feuille de route pour la création d’applications en C#, C++ ou VB
Démarrage rapide : application de styles aux contrôles
Ajout de contrôles et de contenu
Références aux ressources ResourceDictionary et XAML
Control.Template

 

 

Afficher:
© 2014 Microsoft