Styles et modèles dans WPFStyles and templates in WPF

Le style et la création de modèles de Windows Presentation Foundation (WPF) font référence à une suite de fonctionnalités qui permettent aux développeurs et aux concepteurs de créer des effets visuellement attrayants et une apparence cohérente pour leur produit.Windows Presentation Foundation (WPF) styling and templating refer to a suite of features that let developers and designers create visually compelling effects and a consistent appearance for their product. Lors de la personnalisation de l’apparence d’une application, vous voulez un modèle de création de styles et de modèles puissant qui permet la maintenance et le partage de l’apparence dans et entre les applications.When customizing the appearance of an app, you want a strong styling and templating model that enables maintenance and sharing of appearance within and among apps. WPF fournit ce modèle.WPF provides that model.

Une autre fonctionnalité du modèle de style WPF est la séparation de la présentation et de la logique.Another feature of the WPF styling model is the separation of presentation and logic. Les concepteurs peuvent travailler sur l’apparence d’une application en utilisant uniquement XAML en même temps que les développeurs travaillent sur la logique de programmation à l’aide de C# ou de Visual Basic.Designers can work on the appearance of an app by using only XAML at the same time that developers work on the programming logic by using C# or Visual Basic.

Cette présentation se concentre sur les aspects de style et de création de modèles de l’application et n’aborde pas les concepts de liaison de données.This overview focuses on the styling and templating aspects of the app and doesn't discuss any data-binding concepts. Pour plus d’informations sur la liaison de données, consultez Vue d’ensemble de la liaison de données.For information about data binding, see Data Binding Overview.

Il est important de comprendre les ressources, ce qui permet de réutiliser les styles et les modèles.It's important to understand resources, which are what enable styles and templates to be reused. Pour plus d’informations sur les ressources, consultez Ressources XAML.For more information about resources, see XAML Resources.

Important

La documentation du Guide du Bureau est en cours de construction.The Desktop Guide documentation is under construction.

ExempleSample

L’exemple de code fourni dans cette vue d’ensemble est basé sur une simple application de navigation photo présentée dans l’illustration suivante.The sample code provided in this overview is based on a simple photo browsing application shown in the following illustration.

Vue de la liste mise en forme avec des stylesStyled ListView

Cet exemple de photo simple utilise des styles et des modèles pour créer une expérience utilisateur visuellement attrayante.This simple photo sample uses styling and templating to create a visually compelling user experience. L’exemple comporte deux TextBlock éléments et un ListBox contrôle qui est lié à une liste d’images.The sample has two TextBlock elements and a ListBox control that is bound to a list of images.

Pour accéder à l’exemple complet, consultez la page Introduction to Styling and Templating Sample (Présentation d’un exemple de création de style et de modèle).For the complete sample, see Introduction to Styling and Templating Sample.

StylesStyles

Vous pouvez considérer comme un Style moyen pratique d’appliquer un ensemble de valeurs de propriété à plusieurs éléments.You can think of a Style as a convenient way to apply a set of property values to multiple elements. Vous pouvez utiliser un style sur tout élément qui dérive de FrameworkElement ou FrameworkContentElement tel qu’un Window ou un Button .You can use a style on any element that derives from FrameworkElement or FrameworkContentElement such as a Window or a Button.

La méthode la plus courante pour déclarer un style est la ressource dans la Resources section d’un fichier XAML.The most common way to declare a style is as a resource in the Resources section in a XAML file. Étant donné que les styles sont des ressources, ils obéissent aux mêmes règles de portée qui s’appliquent à toutes les ressources.Because styles are resources, they obey the same scoping rules that apply to all resources. En d’autres termes, lorsque vous déclarez un style affecte l’endroit où le style peut être appliqué.Put simply, where you declare a style affects where the style can be applied. Par exemple, si vous déclarez le style dans l’élément racine de votre fichier XAML de définition d’application, le style peut être utilisé n’importe où dans votre application.For example, if you declare the style in the root element of your app definition XAML file, the style can be used anywhere in your app.

Par exemple, le code XAML suivant déclare deux styles pour un TextBlock , un appliqué automatiquement à tous les TextBlock éléments, et un autre qui doit être explicitement référencé.For example, the following XAML code declares two styles for a TextBlock, one automatically applied to all TextBlock elements, and another that must be explicitly referenced.

<Window.Resources>
    <!-- .... other resources .... -->

    <!--A Style that affects all TextBlocks-->
    <Style TargetType="TextBlock">
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="FontFamily" Value="Comic Sans MS"/>
        <Setter Property="FontSize" Value="14"/>
    </Style>
    
    <!--A Style that extends the previous TextBlock Style with an x:Key of TitleText-->
    <Style BasedOn="{StaticResource {x:Type TextBlock}}"
           TargetType="TextBlock"
           x:Key="TitleText">
        <Setter Property="FontSize" Value="26"/>
        <Setter Property="Foreground">
            <Setter.Value>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <LinearGradientBrush.GradientStops>
                        <GradientStop Offset="0.0" Color="#90DDDD" />
                        <GradientStop Offset="1.0" Color="#5BFFFF" />
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

Voici un exemple des styles déclarés ci-dessus en cours d’utilisation.Here is an example of the styles declared above being used.

<StackPanel>
    <TextBlock Style="{StaticResource TitleText}" Name="textblock1">My Pictures</TextBlock>
    <TextBlock>Check out my new pictures!</TextBlock>
</StackPanel>

TextBlocks stylisés

Pour plus d’informations, consultez créer un style pour un contrôle.For more information, see Create a style for a control.

ControlTemplatesControlTemplates

Dans WPF, le ControlTemplate d’un contrôle définit l’apparence du contrôle.In WPF, the ControlTemplate of a control defines the appearance of the control. Vous pouvez modifier la structure et l’apparence d’un contrôle en définissant un nouveau et en l' ControlTemplate assignant à un contrôle.You can change the structure and appearance of a control by defining a new ControlTemplate and assigning it to a control. Dans de nombreux cas, les modèles vous offrent suffisamment de souplesse pour que vous n’ayez pas à écrire vos propres contrôles personnalisés.In many cases, templates give you enough flexibility so that you do not have to write your own custom controls.

Chaque contrôle a un modèle par défaut affecté à la propriété Control. Template .Each control has a default template assigned to the Control.Template property. Le modèle connecte la présentation visuelle du contrôle avec les fonctionnalités du contrôle.The template connects the visual presentation of the control with the control's capabilities. Étant donné que vous définissez un modèle en XAML, vous pouvez modifier l’apparence du contrôle sans écrire de code.Because you define a template in XAML, you can change the control's appearance without writing any code. Chaque modèle est conçu pour un contrôle spécifique, tel qu’un Button .Each template is designed for a specific control, such as a Button.

En général, vous déclarez un modèle en tant que ressource dans la Resources section d’un fichier XAML.Commonly you declare a template as a resource on the Resources section of a XAML file. Comme avec toutes les ressources, les règles de portée s’appliquent.As with all resources, scoping rules apply.

Les modèles de contrôle sont beaucoup plus impliqués qu’un style.Control templates are a lot more involved than a style. Cela est dû au fait que le modèle de contrôle réécrit l’apparence visuelle de l’ensemble du contrôle, tandis qu’un style applique simplement des modifications de propriétés au contrôle existant.This is because the control template rewrites the visual appearance of the entire control, while a style simply applies property changes to the existing control. Toutefois, étant donné que le modèle d’un contrôle est appliqué en définissant la propriété Control. Template , vous pouvez utiliser un style pour définir ou définir un modèle.However, since the template of a control is applied by setting the Control.Template property, you can use a style to define or set a template.

Les concepteurs vous permettent généralement de créer une copie d’un modèle existant et de le modifier.Designers generally allow you to create a copy of an existing template and modify it. Par exemple, dans le Concepteur WPF Visual Studio, sélectionnez un CheckBox contrôle, puis cliquez avec le bouton droit et sélectionnez modifier le modèle > créer une copie.For example, in the Visual Studio WPF designer, select a CheckBox control, and then right-click and select Edit template > Create a copy. Cette commande génère un style qui définit un modèle.This command generates a style that defines a template.

<Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual1}"/>
    <Setter Property="Background" Value="{StaticResource OptionMark.Static.Background1}"/>
    <Setter Property="BorderBrush" Value="{StaticResource OptionMark.Static.Border1}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Border x:Name="checkBoxBorder" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                        <Grid x:Name="markGrid">
                            <Path x:Name="optionMark" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z " Fill="{StaticResource OptionMark.Static.Glyph1}" Margin="1" Opacity="0" Stretch="None"/>
                            <Rectangle x:Name="indeterminateMark" Fill="{StaticResource OptionMark.Static.Glyph1}" Margin="2" Opacity="0"/>
                        </Grid>
                    </Border>
                    <ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasContent" Value="true">
                        <Setter Property="FocusVisualStyle" Value="{StaticResource OptionMarkFocusVisual1}"/>
                        <Setter Property="Padding" Value="4,-1,0,0"/>

... content removed to save space ...

La modification d’une copie d’un modèle est un excellent moyen d’apprendre comment les modèles fonctionnent.Editing a copy of a template is a great way to learn how templates work. Au lieu de créer un nouveau modèle vide, il est plus facile de modifier une copie et de modifier quelques aspects de la présentation visuelle.Instead of creating a new blank template, it's easier to edit a copy and change a few aspects of the visual presentation.

Pour obtenir un exemple, consultez créer un modèle pour un contrôle.For an example, see Create a template for a control.

TemplateBindingTemplateBinding

Vous avez peut-être remarqué que la ressource de modèle définie dans la section précédente utilise l' extension de balisage TemplateBinding.You may have noticed that the template resource defined in the previous section uses the TemplateBinding Markup Extension. Un TemplateBinding est une forme optimisée d’une liaison pour les scénarios de modèle, analogue à une liaison construite avec {Binding RelativeSource={RelativeSource TemplatedParent}} .A TemplateBinding is an optimized form of a binding for template scenarios, analogous to a binding constructed with {Binding RelativeSource={RelativeSource TemplatedParent}}. TemplateBindingest utile pour lier des parties du modèle aux propriétés du contrôle.TemplateBinding is useful for binding parts of the template to properties of the control. Par exemple, chaque contrôle possède une BorderThickness propriété.For example, each control has a BorderThickness property. Utilisez un TemplateBinding pour gérer l’élément affecté par ce paramètre de contrôle à l’élément du modèle.Use a TemplateBinding to manage which element in the template is affected by this control setting.

ContentControl et ItemsControlContentControl and ItemsControl

Si un ContentPresenter est déclaré dans le ControlTemplate d’un ContentControl , le crée ContentPresenter automatiquement une liaison avec ContentTemplate les Content Propriétés et.If a ContentPresenter is declared in the ControlTemplate of a ContentControl, the ContentPresenter will automatically bind to the ContentTemplate and Content properties. De même, un ItemsPresenter qui se trouve dans le ControlTemplate d’un crée ItemsControl automatiquement une liaison avec les ItemTemplate Items Propriétés et.Likewise, an ItemsPresenter that is in the ControlTemplate of an ItemsControl will automatically bind to the ItemTemplate and Items properties.

DataTemplatesDataTemplates

Dans cet exemple d’application, un ListBox contrôle est lié à une liste de photos.In this sample app, there is a ListBox control that is bound to a list of photos.

<ListBox ItemsSource="{Binding Source={StaticResource MyPhotos}}"
         Background="Silver" Width="600" Margin="10" SelectedIndex="0"/>

Cela ListBox ressemble à ce qui suit.This ListBox currently looks like the following.

ListBox avant application du modèleListBox before applying template

La plupart des contrôles ont un type de contenu, et ce contenu provient souvent des données que vous liez à ces contrôles.Most controls have some type of content, and that content often comes from data that you are binding to. Dans cet exemple, les données sont la liste de photos.In this sample, the data is the list of photos. Dans WPF, vous utilisez un DataTemplate pour définir la représentation visuelle des données.In WPF, you use a DataTemplate to define the visual representation of data. Fondamentalement, ce que vous placez dans un DataTemplate détermine à quoi ressemblent les données dans l’application rendue.Basically, what you put into a DataTemplate determines what the data looks like in the rendered app.

Dans notre exemple d’application, chaque Photo objet personnalisé a une Source propriété de type chaîne qui spécifie le chemin d’accès de l’image.In our sample app, each custom Photo object has a Source property of type string that specifies the file path of the image. Actuellement, les objets photo apparaissent sous forme de chemins d’accès.Currently, the photo objects appear as file paths.

public class Photo
{
    public Photo(string path)
    {
        Source = path;
    }

    public string Source { get; }

    public override string ToString() => Source;
}
Public Class Photo
    Sub New(ByVal path As String)
        Source = path
    End Sub

    Public ReadOnly Property Source As String

    Public Overrides Function ToString() As String
        Return Source
    End Function
End Class

Pour que les photos apparaissent en tant qu’images, vous créez une DataTemplate en tant que ressource.For the photos to appear as images, you create a DataTemplate as a resource.

<Window.Resources>
    <!-- .... other resources .... -->

    <!--DataTemplate to display Photos as images
    instead of text strings of Paths-->
    <DataTemplate DataType="{x:Type local:Photo}">
        <Border Margin="3">
            <Image Source="{Binding Source}"/>
        </Border>
    </DataTemplate>
</Window.Resources>

Notez que la DataType propriété est semblable à la TargetType propriété de Style .Notice that the DataType property is similar to the TargetType property of the Style. Si votre DataTemplate se trouve dans la section des ressources, lorsque vous spécifiez la DataType propriété d’un type et que vous omettez un x:Key , le DataTemplate est appliqué chaque fois que ce type apparaît.If your DataTemplate is in the resources section, when you specify the DataType property to a type and omit an x:Key, the DataTemplate is applied whenever that type appears. Vous avez toujours la possibilité d’assigner le DataTemplate à un, x:Key puis de le définir comme StaticResource pour les propriétés qui acceptent des DataTemplate types, telles que la ItemTemplate propriété ou la ContentTemplate propriété.You always have the option to assign the DataTemplate with an x:Key and then set it as a StaticResource for properties that take DataTemplate types, such as the ItemTemplate property or the ContentTemplate property.

Fondamentalement, le DataTemplate dans l’exemple ci-dessus définit qu’à chaque fois qu’il y a un Photo objet, il doit apparaître comme un Image dans un Border .Essentially, the DataTemplate in the above example defines that whenever there is a Photo object, it should appear as an Image within a Border. Avec cela DataTemplate , notre application se présente maintenant comme suit.With this DataTemplate, our app now looks like this.

Image photoPhoto image

Le modèle de création de modèles fournit d’autres fonctionnalités.The data templating model provides other features. Par exemple, si vous affichez des données de collection qui contiennent d’autres collections à l’aide d’un HeaderedItemsControl type tel qu’un Menu ou un TreeView , il y a le HierarchicalDataTemplate .For example, if you are displaying collection data that contains other collections using a HeaderedItemsControl type such as a Menu or a TreeView, there is the HierarchicalDataTemplate. Une autre fonctionnalité de création de modèles de données est DataTemplateSelector , qui vous permet de choisir un DataTemplate à utiliser en fonction de la logique personnalisée.Another data templating feature is the DataTemplateSelector, which allows you to choose a DataTemplate to use based on custom logic. Pour plus d’informations, consultez l’article Vue d'ensemble des modèles de données, qui fournit une discussion plus approfondie sur les différentes fonctionnalités de création de modèles de données.For more information, see Data Templating Overview, which provides a more in-depth discussion of the different data templating features.

DéclencheursTriggers

Un déclencheur définit des propriétés ou démarre des actions, par exemple une animation, lorsqu’une valeur de propriété change ou lorsqu’un événement est déclenché.A trigger sets properties or starts actions, such as an animation, when a property value changes or when an event is raised. Style, ControlTemplate et DataTemplate ont tous une Triggers propriété qui peut contenir un ensemble de déclencheurs.Style, ControlTemplate, and DataTemplate all have a Triggers property that can contain a set of triggers. Il existe plusieurs types de déclencheurs.There are several types of triggers.

PropertyTriggersPropertyTriggers

Un Trigger qui définit des valeurs de propriété ou démarre des actions basées sur la valeur d’une propriété est appelé un déclencheur de propriété.A Trigger that sets property values or starts actions based on the value of a property is called a property trigger.

Pour illustrer l’utilisation des déclencheurs de propriété, vous pouvez rendre chacun ListBoxItem partiellement transparent, sauf s’il est sélectionné.To demonstrate how to use property triggers, you can make each ListBoxItem partially transparent unless it is selected. Le style suivant affecte Opacity à la valeur d’un la valeur ListBoxItem 0.5 .The following style sets the Opacity value of a ListBoxItem to 0.5. IsSelectedToutefois, lorsque la propriété a la true Opacity valeur 1.0 .When the IsSelected property is true, however, the Opacity is set to 1.0.

<Window.Resources>
    <!-- .... other resources .... -->

    <Style TargetType="ListBoxItem">
        <Setter Property="Opacity" Value="0.5" />
        <Setter Property="MaxHeight" Value="75" />
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Trigger.Setters>
                    <Setter Property="Opacity" Value="1.0" />
                </Trigger.Setters>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

Cet exemple utilise un Trigger pour définir une valeur de propriété, mais notez que la Trigger classe possède également EnterActions les ExitActions Propriétés et qui permettent à un déclencheur d’effectuer des actions.This example uses a Trigger to set a property value, but note that the Trigger class also has the EnterActions and ExitActions properties that enable a trigger to perform actions.

Notez que la MaxHeight propriété de ListBoxItem a la valeur 75 .Notice that the MaxHeight property of the ListBoxItem is set to 75. Dans l’illustration suivante, le troisième élément est l’élément sélectionné.In the following illustration, the third item is the selected item.

Vue de la liste mise en forme avec des stylesStyled ListView

EventTriggers et tables de montage séquentielEventTriggers and Storyboards

Un autre type de déclencheur est EventTrigger , qui démarre un ensemble d’actions en fonction de l’occurrence d’un événement.Another type of trigger is the EventTrigger, which starts a set of actions based on the occurrence of an event. Par exemple, les EventTrigger objets suivants spécifient que lorsque le pointeur de la souris entre dans le ListBoxItem , la MaxHeight propriété s’anime sur une valeur 90 sur une 0.2 seconde période.For example, the following EventTrigger objects specify that when the mouse pointer enters the ListBoxItem, the MaxHeight property animates to a value of 90 over a 0.2 second period. Lorsque la souris s’éloigne de l’élément, la propriété retourne à sa valeur d’origine pendant une période de 1 seconde.When the mouse moves away from the item, the property returns to the original value over a period of 1 second. Notez qu’il n’est pas nécessaire de spécifier une To valeur pour l' MouseLeave Animation.Note how it is not necessary to specify a To value for the MouseLeave animation. L’animation est en effet capable d’effectuer le suivi de la valeur d’origine.This is because the animation is able to keep track of the original value.

<Style.Triggers>
    <Trigger Property="IsSelected" Value="True">
        <Trigger.Setters>
            <Setter Property="Opacity" Value="1.0" />
        </Trigger.Setters>
    </Trigger>
    <EventTrigger RoutedEvent="Mouse.MouseEnter">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Duration="0:0:0.2"
                        Storyboard.TargetProperty="MaxHeight"
                        To="90"  />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="Mouse.MouseLeave">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Duration="0:0:1"
                        Storyboard.TargetProperty="MaxHeight"  />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Style.Triggers>

Pour plus d’informations, consultez vue d’ensemble des storyboards.For more information, see the Storyboards overview.

Dans l’illustration suivante, la souris pointe sur le troisième élément.In the following illustration, the mouse is pointing to the third item.

Capture d’écran de l’exemple de styleStyling sample screenshot

MultiTriggers, DataTriggers et MultiDataTriggersMultiTriggers, DataTriggers, and MultiDataTriggers

Outre Trigger et EventTrigger , il existe d’autres types de déclencheurs.In addition to Trigger and EventTrigger, there are other types of triggers. MultiTriggervous permet de définir des valeurs de propriété en fonction de plusieurs conditions.MultiTrigger allows you to set property values based on multiple conditions. Vous utilisez DataTrigger et MultiDataTrigger lorsque la propriété de votre condition est liée aux données.You use DataTrigger and MultiDataTrigger when the property of your condition is data-bound.

États visuelsVisual States

Les contrôles sont toujours dans un Étatspécifique.Controls are always in a specific state. Par exemple, lorsque la souris se déplace sur la surface d’un contrôle, le contrôle est considéré comme étant dans un État commun de MouseOver .For example, when the mouse moves over the surface of a control, the control is considered to be in a common state of MouseOver. Un contrôle sans état spécifique est considéré comme étant dans l’État commun Normal .A control without a specific state is considered to be in the common Normal state. Les États sont divisés en groupes et les États mentionnés précédemment font partie du groupe d’États CommonStates .States are broken into groups, and the previously mentioned states are part of the state group CommonStates. La plupart des contrôles ont deux groupes d’États : CommonStates et FocusStates .Most controls have two state groups: CommonStates and FocusStates. De chaque groupe d’États appliqué à un contrôle, un contrôle est toujours dans un état de chaque groupe, tel que CommonStates.MouseOver et FocusStates.Unfocused .Of each state group applied to a control, a control is always in one state of each group, such as CommonStates.MouseOver and FocusStates.Unfocused. Toutefois, un contrôle ne peut pas se trouver dans deux États différents au sein du même groupe, tels que CommonStates.Normal et CommonStates.Disabled .However, a control can't be in two different states within the same group, such as CommonStates.Normal and CommonStates.Disabled. Voici un tableau des États que la plupart des contrôles reconnaissent et utilisent.Here is a table of states most controls recognize and use.

Nom VisualStateVisualState Name Nom VisualStateGroupVisualStateGroup Name DescriptionDescription
NormalNormal CommonStatesCommonStates État par défaut.The default state.
MouseOverMouseOver CommonStatesCommonStates Le pointeur de souris est positionné sur le contrôle.The mouse pointer is positioned over the control.
AppuyéPressed CommonStatesCommonStates Le contrôle est enfoncé.The control is pressed.
DésactivéDisabled CommonStatesCommonStates Le contrôle est désactivé.The control is disabled.
Avec focusFocused FocusStatesFocusStates Le contrôle a le focus.The control has focus.
Sans focusUnfocused FocusStatesFocusStates Le contrôle n’a pas le focus.The control does not have focus.

En définissant un System.Windows.VisualStateManager sur l’élément racine d’un modèle de contrôle, vous pouvez déclencher des animations lorsqu’un contrôle passe à un état spécifique.By defining a System.Windows.VisualStateManager on the root element of a control template, you can trigger animations when a control enters a specific state. VisualStateManagerDéclare les combinaisons de VisualStateGroup et VisualState à surveiller.The VisualStateManager declares which combinations of VisualStateGroup and VisualState to watch. Lorsque le contrôle passe à l’État surveillé, l’animation définie par le VisaulStateManager est démarrée.When the control enters a watched state, the animation defined by the VisaulStateManager is started.

Par exemple, le code XAML suivant surveille l' CommonStates.MouseOver État pour animer la couleur de remplissage de l’élément nommé backgroundElement .For example, the following XAML code watches the CommonStates.MouseOver state to animate the fill color of the element named backgroundElement. Lorsque le contrôle retourne à l' CommonStates.Normal État, la couleur de remplissage de l’élément nommé backgroundElement est restaurée.When the control returns to the CommonStates.Normal state, the fill color of the element named backgroundElement is restored.

<ControlTemplate x:Key="roundbutton" TargetType="Button">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal">
                    <ColorAnimation Storyboard.TargetName="backgroundElement"
                                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                    To="{TemplateBinding Background}"
                                    Duration="0:0:0.3"/>
                </VisualState>
                <VisualState Name="MouseOver">
                    <ColorAnimation Storyboard.TargetName="backgroundElement"
                                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                    To="Yellow"
                                    Duration="0:0:0.3"/>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        ...

Pour plus d’informations sur les storyboards, consultez vue d’ensemble des storyboards.For more information about storyboards, see Storyboards Overview.

Ressources partagées et thèmesShared resources and themes

Une application WPF type peut avoir plusieurs ressources d’interface utilisateur qui sont appliquées dans l’ensemble de l’application.A typical WPF app might have multiple UI resources that are applied throughout the app. Collectivement, cet ensemble de ressources peut être considéré comme le thème de l’application.Collectively, this set of resources can be considered the theme for the app. WPF prend en charge l’empaquetage des ressources d’interface utilisateur en tant que thème à l’aide d’un dictionnaire de ressources encapsulé en tant que ResourceDictionary classe.WPF provides support for packaging UI resources as a theme by using a resource dictionary that is encapsulated as the ResourceDictionary class.

Les thèmes WPF sont définis à l’aide du mécanisme de création de styles et de modèles que WPF expose pour la personnalisation des visuels de tout élément.WPF themes are defined by using the styling and templating mechanism that WPF exposes for customizing the visuals of any element.

Les ressources de thème WPF sont stockées dans des dictionnaires de ressources incorporés.WPF theme resources are stored in embedded resource dictionaries. Ces dictionnaires de ressources doivent être incorporés dans un assembly signé, et peuvent être incorporés dans le même assembly que le code lui-même, ou bien dans un assembly parallèle.These resource dictionaries must be embedded within a signed assembly, and can either be embedded in the same assembly as the code itself or in a side-by-side assembly. Pour PresentationFramework.dll, l’assembly qui contient des contrôles WPF, les ressources de thème se trouvent dans une série d’assemblys côte à côte.For PresentationFramework.dll, the assembly that contains WPF controls, theme resources are in a series of side-by-side assemblies.

Le thème est alors le dernier emplacement à consulter lors de la recherche du style d’un élément.The theme becomes the last place to look when searching for the style of an element. En règle générale, la recherche commence en remontant l’arborescence d’éléments qui recherche une ressource appropriée, puis examine la collection de ressources d’application et enfin interroge le système.Typically, the search will begin by walking up the element tree searching for an appropriate resource, then look in the app resource collection and finally query the system. Cela permet aux développeurs d’applications de redéfinir le style d’un objet au niveau de l’arborescence ou de l’application avant d’atteindre le thème.This gives app developers a chance to redefine the style for any object at the tree or app level before reaching the theme.

Vous pouvez définir des dictionnaires de ressources en tant que fichiers individuels qui vous permettent de réutiliser un thème sur plusieurs applications.You can define resource dictionaries as individual files that enable you to reuse a theme across multiple apps. Vous pouvez également créer des thèmes permutables en définissant plusieurs dictionnaires de ressources qui fournissent les mêmes types de ressources mais avec des valeurs différentes.You can also create swappable themes by defining multiple resource dictionaries that provide the same types of resources but with different values. La redéfinition de ces styles ou d’autres ressources au niveau de l’application est l’approche recommandée pour l’apparence d’une application.Redefining these styles or other resources at the app level is the recommended approach for skinning an app.

Pour partager un ensemble de ressources, notamment des styles et des modèles, entre les applications, vous pouvez créer un fichier XAML et définir un ResourceDictionary qui inclut une référence à un shared.xaml fichier.To share a set of resources, including styles and templates, across apps, you can create a XAML file and define a ResourceDictionary that includes reference to a shared.xaml file.

<ResourceDictionary.MergedDictionaries>
  <ResourceDictionary Source="Shared.xaml" />
</ResourceDictionary.MergedDictionaries>

C’est le partage de shared.xaml , qui définit lui-même un ResourceDictionary qui contient un ensemble de ressources de style et de pinceau, qui permet aux contrôles d’une application d’avoir une apparence cohérente.It is the sharing of shared.xaml, which itself defines a ResourceDictionary that contains a set of style and brush resources, that enables the controls in an app to have a consistent look.

Pour plus d’informations, consultez dictionnaires de ressources fusionnés.For more information, see Merged resource dictionaries.

Si vous créez un thème pour votre contrôle personnalisé, consultez la section définition des ressources au niveau du thème de la vue d’ensemblede la création de contrôles.If you are creating a theme for your custom control, see the Defining resources at the theme level section of the Control authoring overview.

Voir aussiSee also