Application d'un style et création de modèles

 

Date de publication : juin 2016

Windows Presentation Foundation (WPF)styles et modèles font référence à une suite de fonctionnalités (styles, modèles, déclencheurs et storyboards) qui permettent aux développeurs et concepteurs pour créer des effets visuellement attrayants et une apparence cohérente pour leur produit. Bien que les développeurs et ou les concepteurs peuvent personnaliser l’apparence largement sur une base application-par-application, un modèle fort est nécessaire pour permettre la maintenance et le partage de l’apparence dans et entre les applications. Windows Presentation Foundation (WPF)fournit ce modèle.

Une autre fonctionnalité de la Entity with relative path '../Token/TLA2%23tla_winclient_md.md' can not be found, for source topic '{"project_id":"3fedad16-eaf1-41a6-8f96-0c1949c68f32","entity_id":"481765e5-5467-4a75-9f7b-e10e2ac410d9","entity_type":"Article","locale":"fr-FR"}'. modèle de style est la séparation de la présentation et logique. Cela signifie que 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 programmation logique à l’aide de c# ou Visual Basic.

Cette présentation se concentre sur les aspects de style et de création de l’application et ne traite pas les concepts de liaison de données. Pour plus d’informations sur la liaison de données, consultez vue d’ensemble de la liaison de données.

En outre, il est important de comprendre les ressources, qui permettent que les styles et modèles à réutiliser. Pour plus d’informations sur les ressources, consultez ressources XAML.

Entity with relative path '../Token/autoOutline_md.md' can not be found, for source topic '{"project_id":"3fedad16-eaf1-41a6-8f96-0c1949c68f32","entity_id":"481765e5-5467-4a75-9f7b-e10e2ac410d9","entity_type":"Article","locale":"fr-FR"}'.

Les exemples de code utilisés dans cette vue d’ensemble sont basés sur un exemple de photo simple affiché dans l’illustration suivante :

Le style du ListView

Cet exemple de photo simple utilise des styles et modèles pour créer une expérience utilisateur visuellement attrayante. L’exemple a deux TextBlock éléments et un ListBox contrôle qui est lié à une liste d’images. Pour l’exemple complet, consultez la page Introduction aux styles et modèles exemple.

Vous pouvez considérer un Style comme un moyen pratique pour appliquer un ensemble de valeurs de propriété à plusieurs éléments. Par exemple, considérez les éléments suivants TextBlock éléments et leur apparence par défaut :

    <TextBlock>My Pictures</TextBlock>
    <TextBlock>Check out my new pictures!</TextBlock>

Capture d’écran : exemple de styles

Vous pouvez modifier l’apparence par défaut en définissant les propriétés, telles que FontSize et FontFamily, sur chaque TextBlock élément directement. Toutefois, si vous souhaitez que votre TextBlock éléments partagent certaines propriétés, vous pouvez créer un Style dans les Resources section de votre XAML de fichiers, comme illustré ici :

  <Window.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>

  </Window.Resources>

Lorsque vous définissez la TargetType de votre style pour le TextBlock type, le style est appliqué à tous les le TextBlock éléments dans la fenêtre.

Maintenant le TextBlock éléments apparaissent comme suit :

Capture d’écran : exemple de styles

Extension de Styles

Vous pouvez choisir de vos deux TextBlock éléments partagent certaines valeurs de propriété, tels que les FontFamily et le texte centré HorizontalAlignment, mais vous souhaitez également le texte « Mes images » ait quelques propriétés supplémentaires. Que faire en créant un nouveau style est basé sur le premier style, comme illustré ici :

  <Window.Resources>

    <!--A Style that extends the previous TextBlock Style-->
    <!--This is a "named 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>

Notez que le style précédent reçoit un x:Key. Pour appliquer le style, vous définissez la Style propriété sur votre TextBlock à la x:Key valeur, comme illustré ici :

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

Cela TextBlock style a maintenant un HorizontalAlignment valeur Center, un FontFamily valeur de Comic Sans MS, un FontSize valeur 26 et un premier plan la valeur la LinearGradientBrush indiqué dans l’exemple. Notez qu’il remplace le FontSize valeur du style de base. S’il existe plusieurs Setter définissent la même propriété un Style, le Setter qui est déclaré dernière est prioritaire.

L’exemple suivant montre que la TextBlock éléments maintenant ressembler à :

Un style TextBlocks

Cela TitleText style étend le style qui a été créé pour le TextBlock type. Vous pouvez également étendre un style qui a un x:Key à l’aide de la x:Key valeur. Pour obtenir un exemple, consultez l’exemple fourni pour la basé sur propriété.

Relation entre la propriété TargetType et de l’attribut x : Key

Comme indiqué dans le premier exemple, la définition du TargetType propriété TextBlock sans affecter le style un x:Key provoque le style à appliquer à tous les TextBlock éléments. Dans ce cas, le x:Key a implicitement la valeur {x:Type TextBlock}. Cela signifie que si vous définissez explicitement la x:Key valeur autre que n’importe quoi {x:Type TextBlock}, le Style n’est pas appliquée à tous les TextBlock éléments automatiquement. Au lieu de cela, vous devez appliquer le style (à l’aide de la x:Key valeur) à la TextBlock éléments explicitement. Si votre style se trouve dans la section ressources et vous ne définissez pas la TargetType propriété sur votre style, vous devez fournir un x:Key.

En plus de fournir une valeur par défaut pour le x:Key, le TargetType propriété spécifie le type auquel s’appliquent les propriétés d’accesseur Set. Si vous ne spécifiez pas un TargetType, vous devez qualifier les propriétés dans votre Setter objets avec un nom de classe à l’aide de la syntaxe Property="ClassName.Property". Par exemple, au lieu de définir Property="FontSize", vous devez définir propriété à "TextBlock.FontSize" ou "Control.FontSize".

Notez également que de nombreuses Entity with relative path '../Token/TLA2%23tla_winclient_md.md' can not be found, for source topic '{"project_id":"3fedad16-eaf1-41a6-8f96-0c1949c68f32","entity_id":"481765e5-5467-4a75-9f7b-e10e2ac410d9","entity_type":"Article","locale":"fr-FR"}'. contrôles se composent d’une combinaison d’autres Entity with relative path '../Token/TLA2%23tla_winclient_md.md' can not be found, for source topic '{"project_id":"3fedad16-eaf1-41a6-8f96-0c1949c68f32","entity_id":"481765e5-5467-4a75-9f7b-e10e2ac410d9","entity_type":"Article","locale":"fr-FR"}'. contrôles. Si vous créez un style qui s’applique à tous les contrôles d’un type, vous pouvez obtenir des résultats inattendus. Par exemple, si vous créez un style qui cible le TextBlock type dans un fenêtre, le style est appliqué à tous les TextBlock contrôles dans la fenêtre, même si le TextBlock fait partie d’un autre contrôle, tel qu’un ListBox.

Styles et ressources

Vous pouvez utiliser un style sur tout élément qui dérive de FrameworkElement ou FrameworkContentElement. La plus courante pour déclarer un style consiste en tant que ressource dans le Resources section dans un XAML de fichiers, comme indiqué dans les exemples précédents. É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 ; Lorsque vous déclarez un style affecte où le style peut être appliqué. Par exemple, si vous déclarez le style dans l’élément racine de votre définition d’application XAML fichier, le style peut être utilisé n’importe où dans votre application. Si vous créez une application de navigation et déclarez le style dans un de l’application XAML fichiers, le style peuvent être utilisés que dans ce XAML fichier. Pour plus d’informations sur les règles relatives aux ressources de portée, consultez ressources XAML.

En outre, vous trouverez plus d’informations sur les styles et les ressources dans ressources partagées et thèmes plus loin dans cette vue d’ensemble.

Définir des Styles par programmation

Pour attribuer un style nommé à un élément par programmation, obtenez le style de la collection de ressources et l’assigner à l’élément Style propriété. Notez que les éléments dans une collection de ressources sont de type objet. Par conséquent, vous devez effectuer un cast du style extrait un Style avant de l’assigner à la Style propriété. Par exemple, pour définir la période définie par TitleText style sur un TextBlock nommé textblock1, procédez comme suit :

            textblock1.Style = (Style)(this.Resources["TitleText"]);

Notez qu’une fois qu’un style a été appliqué, il est scellé et ne peut pas être modifié. Si vous souhaitez modifier dynamiquement un style qui a déjà été appliqué, vous devez créer un nouveau style pour remplacer celui-ci. Pour plus d’informations, consultez la IsSealed propriété.

Vous pouvez créer un objet qui choisit un style à appliquer selon une logique personnalisée. Pour obtenir un exemple, consultez l’exemple fourni pour la StyleSelector (classe).

Liaisons, ressources dynamiques et gestionnaires d’événements

Notez que vous pouvez utiliser la Setter.Value pour spécifier un Extension de balisage Binding ou un Extension de balisage DynamicResource. Pour plus d’informations, consultez les exemples fournis pour la Setter.Value propriété.

Jusqu'à présent, cette présentation décrit uniquement l’utilisation de méthodes setter pour définir la valeur de la propriété. Vous pouvez également spécifier des gestionnaires d’événements dans un style. Pour plus d’informations, consultez EventSetter.

Dans cet exemple d’application, il existe un ListBox contrôle qui est lié à une liste de photos :

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

Cela ListBox actuellement ressemble à ceci :

ListBox avant application du modèle

La plupart des contrôles ont un type de contenu, et ce contenu vient souvent des données que vous liez à. Dans cet exemple, les données sont la liste des photos. Dans Entity with relative path '../Token/TLA2%23tla_winclient_md.md' can not be found, for source topic '{"project_id":"3fedad16-eaf1-41a6-8f96-0c1949c68f32","entity_id":"481765e5-5467-4a75-9f7b-e10e2ac410d9","entity_type":"Article","locale":"fr-FR"}'., vous utilisez un DataTemplate pour définir la représentation visuelle des données. En fait, vous placez dans un DataTemplate détermine à quoi ressemblent les données dans l’application rendue.

Dans notre exemple d’application, chaque personnalisé Photo objet a un Source propriété de type chaîne qui spécifie le chemin d’accès de l’image. Actuellement, les objets photo apparaissent sous forme de chemins d’accès.

Pour les photos apparaissent comme des images, vous créez un DataTemplate en tant que ressource :

  <Window.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 type de données propriété est très similaire à la TargetType propriété de la Style. Si votre DataTemplate est dans la section ressources, lorsque vous spécifiez le type de données à un type de propriété et ne lui assignez un x:Key, le DataTemplate est appliqué chaque fois que ce type apparaît. Vous avez toujours la possibilité pour affecter le DataTemplate avec un x:Key et définissez-le en tant qu’un StaticResource des propriétés qui acceptent DataTemplate types, tels que les ItemTemplate propriété ou le ContentTemplate propriété.

Essentiellement, le DataTemplate dans l’exemple ci-dessus définit chaque fois qu’il est un Photo de l’objet, elle doit apparaître comme un Image dans un bordure. Avec cette DataTemplate, notre application se présente maintenant comme suit :

Image photo

Le modèle de création de modèles fournit d’autres fonctionnalités. Par exemple, si vous affichez les données de collection qui contient d’autres collections à l’aide un contrôles HeaderedItemsControl tapez comme un Menu ou TreeView, est la HierarchicalDataTemplate. Une autre fonctionnalité de création de modèles de données est la DataTemplateSelector, qui vous permet de choisir un DataTemplate à utiliser selon une logique personnalisée. Pour plus d’informations, consultez vue d’ensemble de la création de modèles de données, qui fournit une discussion plus approfondie sur les fonctionnalités de création de modèles de données différents.

Dans Entity with relative path '../Token/TLA2%23tla_winclient_md.md' can not be found, for source topic '{"project_id":"3fedad16-eaf1-41a6-8f96-0c1949c68f32","entity_id":"481765e5-5467-4a75-9f7b-e10e2ac410d9","entity_type":"Article","locale":"fr-FR"}'., le ControlTemplate d’un contrôle définit l’apparence du contrôle. Vous pouvez modifier la structure et l’apparence d’un contrôle en définissant un nouveau ControlTemplate pour le contrôle. Dans de nombreux cas, cela vous donne suffisamment de souplesse afin que vous n’avez pas à écrire vos propres contrôles personnalisés. Pour plus d’informations, consultez personnalisation de l’apparence d’un contrôle existant en créant un ControlTemplate.

Un déclencheur définit des propriétés ou démarre des actions, comme une animation, lorsqu’une valeur de propriété change ou lorsqu’un événement est déclenché. Style, ControlTemplate, et DataTemplate ont toutes un Triggers propriété pouvant contenir un jeu de déclencheurs. Il existe différents types de déclencheurs.

Déclencheurs de propriété

A déclencheur que jeux de valeurs de propriété ou démarre des actions selon la valeur d’une propriété est appelé un déclencheur de propriété.

Pour illustrer l’utilisation de déclencheurs de propriété, vous pouvez rendre chaque ListBoxItem partiellement transparents, sauf si elle est activée. Le style suivant affecte la opacité valeur un ListBoxItem à 0.5. Lors de la IsSelected propriété est true, toutefois, le opacité est défini sur 1.0:

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

      </Style.Triggers>
    </Style>

Cet exemple utilise un déclencheur pour définir une valeur de propriété, mais notez que la déclencheur classe a également la EnterActions et ExitActions propriétés qui permettent à un déclencheur effectuer des actions.

Notez que la MaxHeight propriétés de la ListBoxItem est défini sur 75. Dans l’illustration suivante, le troisième élément est l’élément sélectionné :

Le style du ListView

EventTriggers et tables de montage séquentiel

Un autre type de déclencheur est le EventTrigger, qui lance un ensemble d’actions en fonction de l’occurrence d’un événement. Par exemple, les éléments suivants EventTrigger objets spécifient que lorsque le pointeur de la souris entre dans le ListBoxItem, le MaxHeight propriété s’anime à la valeur 90 sur une 0.2 seconde période. Lorsque la souris se déplace loin de l’élément, la propriété retourne la valeur d’origine pendant une période de 1 seconde. Notez qu’il n’est pas nécessaire de spécifier un à la valeur pour le MouseLeave animation. Il s’agit, car l’animation est capable d’effectuer le suivi de la valeur d’origine.

        <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>

Pour plus d’informations, consultez la Storyboards Overview.

Dans l’illustration suivante, la souris pointe sur le troisième élément :

Capture d’écran : exemple de styles

MultiTriggers, DataTriggers et MultiDataTriggers

En plus de déclencheur et EventTrigger, il existe d’autres types de déclencheurs. MultiTrigger vous permet de définir des valeurs de propriété selon plusieurs conditions. Vous utilisez DataTrigger et MultiDataTrigger lorsque la propriété de votre condition est liée aux données.

Un type Windows Presentation Foundation (WPF) application peut avoir plusieurs ressources d’interface utilisateur utilisateur sont appliqués à l’application. Collectivement, cet ensemble de ressources peut être considéré comme le thème de l’application. Windows Presentation Foundation (WPF)prend en charge pour l’utilisateur d’empaquetage ressources d’interface utilisateur comme un thème à l’aide d’un dictionnaire de ressources encapsulé en tant que la ResourceDictionary classe.

Windows Presentation Foundation (WPF)les thèmes sont définis en utilisant le mécanisme de styles et modèles qui Windows Presentation Foundation (WPF) expose pour la personnalisation des visuels de tout élément.

Windows Presentation Foundation (WPF)ressources de thème sont stockées dans les dictionnaires de ressources incorporées. Ces dictionnaires de ressources doivent être incorporés dans un assembly signé, et peut être incorporé dans le même assembly que le code lui-même ou dans un assembly côte à côte. Dans le cas de PresentationFramework.dll, l’assembly qui contient Windows Presentation Foundation (WPF) les contrôles, les ressources de thème sont dans une série d’assemblys côte à côte.

Le thème devient la dernière place à consulter lors de la recherche du style d’un élément. En règle générale, la recherche commence en remontant l’arborescence d’éléments pour une ressource appropriée, puis rechercher dans la collection de ressources d’application et enfin interroge le système. Cela permet aux développeurs d’applications de redéfinir le style pour tout objet au niveau de l’arborescence ou une application avant d’atteindre le thème.

Vous pouvez définir des dictionnaires de ressources comme des fichiers individuels qui vous permettent de réutiliser un thème entre plusieurs applications. 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. Redéfinir ces styles ou autres ressources au niveau de l’application est l’approche recommandée pour définir l’apparence une application.

Pour partager un ensemble de ressources, y compris les styles et modèles, entre les applications, vous pouvez créer un XAML de fichiers et définir un ResourceDictionary. Par exemple, un coup de œil sur l’illustration suivante qui montre une partie de la style avec ControlTemplates, exemple:

Exemples de modèle de contrôle

Si vous examinez la XAML des fichiers de l’exemple, vous remarquerez que tous ont les éléments suivants :

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

C’est le partage de shared.xaml, qui définit un ResourceDictionary qui contient un ensemble de ressources de style et un pinceau qui active les contrôles dans l’exemple d’avoir une apparence cohérente.

Pour plus d’informations, consultez dictionnaires de ressources fusionnés.

Si vous créez un thème vous contrôle personnalisé, consultez la section bibliothèque de contrôles externes de la Control Authoring Overview.

URI à en-tête pack dans WPF
Comment : rechercher des éléments générés par ControlTemplate
Rechercher des éléments générés par DataTemplate

Afficher: