Langage: HTML | XAML

Démarrage rapide : application de styles aux contrôles (XAML)

Applies to Windows and Windows Phone

L’infrastructure XAML offre de nombreuses manières de personnaliser l’apparence de vos applications. Les styles permettent de définir les propriétés des contrôles et de réutiliser ces paramètres pour uniformiser l’apparence de plusieurs contrôles.

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

Cette rubrique contient les sections suivantes :

Prérequis

Il est supposé que vous savez ajouter des contrôles à une interface utilisateur, définir leurs propriétés et joindre des gestionnaires d’événements. Pour obtenir des instructions sur l’ajout de contrôles à une application, voir Démarrage rapide : ajout de contrôles et gestion des événements.

Bases des styles

Les styles permettent d’extraire des paramètres de propriété visuels afin de disposer de ressources réutilisables. Voici un exemple représentant trois boutons avec un style définissant les propriétés BorderBrush, BorderThickness et Foreground. Lorsque vous appliquez un style, vous n’avez pas à définir ces propriétés pour chaque contrôle individuellement et les contrôles ont la même apparence.

Boutons stylés

Vous pouvez définir un style inline en langage XAML (Extensible Application Markup Language) pour un contrôle ou sous la forme de ressource réutilisable. Vous définissez les ressources dans le fichier XAML d’une page individuelle, dans le fichier App.xaml, ou dans le fichier XAML d’un dictionnaire de ressources distinct. Le fichier XAML d’un dictionnaire de ressources peut être partagé entre plusieurs applications et plusieurs dictionnaires de ressources peuvent être fusionnés dans une seule application. L’endroit où la ressource est définie détermine l’étendue (champ d’application) de son utilisation. Les ressources au niveau page sont uniquement disponibles dans la page où elles sont définies. Si des ressources sont définies avec la même clé à la fois dans App.xaml et dans une page, la ressource de la page remplace la ressource de App.xaml. Si une ressource est définie dans un fichier de dictionnaire de ressources distinct, son étendue est déterminée par l’endroit où le dictionnaire de ressources est référencé.

Dans la définition de Style, vous avez besoin d’un attribut TargetType et d’une collection d’un ou de plusieurs éléments Setter. L’attribut TargetType est une chaîne spécifiant le type FrameworkElement auquel appliquer le style. La valeur TargetType doit spécifier un type dérivé de FrameworkElement qui est défini par Windows Runtime ou un type personnalisé disponible dans un assembly référencé. Si vous essayez d’appliquer un style à un contrôle et que le type de ce contrôle ne correspond pas à l’attribut TargetType du style que vous essayez d’appliquer, une exception se produit.

Chaque élément Setter nécessite un élément Property et Value. Ces paramètres de propriété indiquent quelle est la propriété de contrôle à laquelle ce paramètre s’applique, ainsi que la valeur à définir pour cette propriété. Vous pouvez définir la valeur Setter.Value avec une syntaxe d’attribut ou une syntaxe d’élément de propriété. Le langage XAML ci-dessous porte sur le style utilisé lors de l’exemple précédent. Dans ce code XAML, les deux premiers éléments Setter utilisent une syntaxe d’attribut, tandis que le dernier élément Setter, relatif à la propriété BorderBrush, utilise une syntaxe d’élément de propriété. L’attribut x:Key n’étant pas utilisé, le style est appliqué implicitement aux boutons. La section suivante explique la notion d’application implicite et explicite de styles


<Page.Resources>
    <Style TargetType="Button">
        <Setter Property="BorderThickness" Value="5" />
        <Setter Property="Foreground" Value="Blue" />
        <Setter Property="BorderBrush" >
            <Setter.Value>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="Yellow" Offset="0.0" />
                    <GradientStop Color="Red" Offset="0.25" />
                    <GradientStop Color="Blue" Offset="0.75" />
                    <GradientStop Color="LimeGreen" Offset="1.0" />
                </LinearGradientBrush>
            </Setter.Value>
            </Setter>
        </Style>
</Page.Resources>


Application implicite ou explicite d’un style

Si vous définissez un style en tant que ressource, vous pouvez l’appliquer à vos contrôles de deux façons :

  • Implicitement, en spécifiant uniquement un élément TargetType pour Style.
  • Explicitement, en spécifiant un élément TargetType et un attribut x:Key pour Style, puis en définissant la propriété Style du contrôle cible avec une référence StaticResource qui utilise la clé explicite.

Si un style contient l’attribut x:Key, vous ne pouvez l’appliquer à un contrôle qu’en définissant la propriété Style du contrôle sur le style associé à la clé. En revanche, un style sans attribut x:Key est automatiquement appliqué à chaque contrôle de son type cible qui, sinon, n’a pas de paramètre de style explicite.

Voici deux boutons illustrant les styles implicite et explicite.

Boutons aux styles implicite et explicite

Dans cet exemple, l’attribut x:Key est associé au premier style et le type cible de ce dernier est Button. La propriété Style du premier bouton est définie sur cette clé : le style est donc appliqué explicitement. Le type cible du deuxième style est Button et aucun attribut x:Key n’est associé à ce dernier : le style est donc appliqué implicitement au deuxième bouton.


<Page.Resources>
    <Style x:Key="PurpleStyle" TargetType="Button">
        <Setter Property="FontFamily" Value="Lucida Sans Unicode" />
        <Setter Property="FontStyle" Value="Italic" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="Foreground" Value="MediumOrchid" />
    </Style>

    <Style TargetType="Button">
        <Setter Property="FontFamily" Value="Lucida Sans Unicode" />
        <Setter Property="FontStyle" Value="Italic" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="RenderTransform">
            <Setter.Value>
                <RotateTransform Angle="25" />
            </Setter.Value>
        </Setter>
        <Setter Property="BorderBrush" Value="Orange" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Orange" />
    </Style>
</Page.Resources>
<Grid x:Name="LayoutRoot">
    <Button Content="Button" Height="23" Width="75" Style="{StaticResource PurpleStyle}" />
    <Button Content="Button" Height="23" Width="75" />
</Grid>


Utilisation de styles basés sur d’autres styles

Pour faciliter la gestion des styles et optimiser leur réutilisation, vous pouvez créer des styles héritant d’autres styles. Pour créer des styles hérités, vous devez utiliser la propriété BasedOn. Les styles héritant d’autres styles doivent cibler le même type de contrôle ou un contrôle dérivé du type ciblé par le style de référence. Par exemple, si le contrôle cible du style de référence est ContentControl, les styles basés sur ce style peuvent cibler également ContentControl ou des types dérivés de ContentControl, tels que Button et ScrollViewer. Si vous ne définissez aucune valeur dans le style qui hérite, celle du style de référence est utilisée. Pour modifier une valeur issue du style de référence, le style qui hérite écrase cette valeur. L’exemple suivant présente un type Button et un type CheckBox avec des styles basés sur le même style de référence.

Boutons stylés à l’aide de styles basés sur d’autres styles

Le type cible du style de référence est ContentControl, et les propriétés Height et Width sont définies pour ce style. Les styles basés sur ce style ciblent les types CheckBox et Button dérivés de ContentControl. Des couleurs différentes sont définies pour les propriétés BorderBrush et Foreground de ces styles.


<Page.Resources>
    <Style x:Key="BasicStyle" TargetType="ContentControl">
        <Setter Property="Width" Value="100" />
        <Setter Property="Height" Value="30" />
    </Style>
    <Style x:Key="ButtonStyle" TargetType="Button" BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Orange" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Orange" />
    </Style>
    <Style x:Key="CheckBoxStyle" TargetType="CheckBox" BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Green" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Green" />
    </Style>
</Page.Resources>

<Grid Background="White">
    <Button Content="Button" Style="{StaticResource ButtonStyle}"/>
    <CheckBox Content="CheckBox"  Style="{StaticResource CheckBoxStyle}"/>
</Grid>

Utilisation de styles en toute simplicité à l’aide d’outils

Pour appliquer rapidement des styles à vos contrôles, cliquez avec le bouton droit sur l’aire de conception XAML de Microsoft Visual Studio et sélectionnez Modifier le style ou Modifier le modèle (selon le contrôle concerné). Vous pouvez ensuite appliquer un style existant en sélectionnant Appliquer la ressource ou en définir un nouveau en sélectionnant Créer vide. Si vous créez un style vide, vous avez l’option de le définir dans la page, dans le fichier App.xaml ou dans un dictionnaire de ressources distinct.

Modification des styles Windows Runtime par défaut

Lorsque vous le pouvez, vous devez utiliser les styles provenant des ressources XAML Windows Runtime par défaut. Quand vous devez définir vos propres styles, essayez de les baser sur les styles par défaut lorsque cela est possible (en utilisant des styles basés sur d’autres styles, comme expliqué précédemment, ou en commençant par modifier une copie du style par défaut d’origine).

Propriété Template

Il est possible d’utiliser un setter de style pour la propriété Template d’un élément Control. En réalité, cela constitue la majorité d’un style XAML classique et des ressources XAML d’une application . Ce sujet est abordé de manière plus détaillée dans la rubrique Démarrage rapide : modèles de contrôles.

Rubriques associées

Feuille de route pour la création d’applications en C#, C++ ou VB
Ajout de contrôles et de contenu
Démarrage rapide : modèles de contrôles
Références aux ressources ResourceDictionary et XAML
Style
Setter
Attribut x:Key

 

 

Afficher:
© 2014 Microsoft