XAML - Styles

Le framework XAML fournit plusieurs stratégies pour personnaliser et personnaliser l'apparence d'une application. Les styles nous donnent la flexibilité de définir certaines propriétés d'un objet et de réutiliser ces paramètres spécifiques sur plusieurs objets pour un aspect cohérent.

  • Dans les styles, vous ne pouvez définir que les propriétés existantes d'un objet telles que la hauteur, la largeur et la taille de la police.

  • Seul le comportement par défaut d'un contrôle peut être spécifié.

  • Plusieurs propriétés peuvent être ajoutées dans un seul style.

Les styles sont utilisés pour donner un aspect uniforme à un ensemble de contrôles. Les styles implicites sont utilisés pour appliquer une apparence à tous les contrôles d'un type donné et simplifier l'application.

Imaginez que nous ayons trois boutons et qu'ils doivent tous avoir la même apparence: même largeur et hauteur, même taille de police et même couleur de premier plan. Nous pouvons définir toutes ces propriétés sur les éléments de bouton eux-mêmes et c'est toujours tout à fait acceptable pour tous les boutons, comme indiqué dans le diagramme suivant.

Mais dans une application réelle, vous en aurez généralement beaucoup plus qui doivent avoir exactement la même apparence. Et pas seulement les boutons, bien sûr, vous souhaiterez généralement que vos blocs de texte, zones de texte et zones de liste déroulante, etc., aient la même apparence dans votre application. Il doit sûrement y avoir une meilleure façon d'y parvenir - c'est ce qu'on appellestyling. Vous pouvez considérer un style comme un moyen pratique d'appliquer un ensemble de valeurs de propriété à plusieurs éléments, comme illustré dans le diagramme suivant.

Regardons l'exemple qui contient trois boutons créés en XAML avec certaines propriétés.

<Window x:Class = "XAMLStyle.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:local = "clr-namespace:XAMLStyle" mc:Ignorable = "d" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <StackPanel> 
      <Button Content = "Button1" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/>
      
      <Button Content = "Button2" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/>
      
      <Button Content = "Button3" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/> 
   </StackPanel> 
	
</Window>

Lorsque vous regardez le code ci-dessus, vous verrez que pour tous les boutons, la hauteur, la largeur, la couleur de premier plan, la taille de police et les propriétés de marge restent les mêmes. Lorsque le code ci-dessus est compilé et exécuté, il affichera la sortie suivante -

Regardons maintenant le même exemple, mais cette fois, nous allons utiliser style.

<Window x:Class = "XAMLStyle.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:local = "clr-namespace:XAMLStyle" mc:Ignorable = "d" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Window.Resources> 
      <Style x:Key = "myButtonStyle" TargetType = "Button">
         <Setter Property = "Height" Value = "30"/> 
         <Setter Property = "Width" Value = "80"/> 
         <Setter Property = "Foreground" Value = "Blue"/> 
         <Setter Property = "FontSize" Value = "12"/> 
         <Setter Property = "Margin" Value = "10"/> 
      </Style>
   </Window.Resources> 
	
   <StackPanel> 
      <Button Content = "Button1" Style = "{StaticResource myButtonStyle}"/>
      <Button Content = "Button2" Style = "{StaticResource myButtonStyle}"/>
      <Button Content = "Button3" Style = "{StaticResource myButtonStyle}"/>
   </StackPanel>
	
</Window>

Les styles sont définis dans le dictionnaire de ressources et chaque style a un identificateur de clé unique et un type de cible. À l'intérieur de <style>, vous pouvez voir que plusieurs balises setter sont définies pour chaque propriété qui sera incluse dans le style.

Dans l'exemple ci-dessus, toutes les propriétés communes de chaque bouton sont maintenant définies dans le style, puis le style est attribué à chaque bouton avec une clé unique en définissant la propriété style via l'extension de balisage StaticResource.

Lorsque le code ci-dessus est compilé et exécuté, il produira la fenêtre suivante qui est la même sortie.

L'avantage de le faire ainsi est immédiatement évident. Nous pouvons réutiliser ce style n'importe où dans sa portée, et si nous devons le changer, nous le changeons simplement une fois dans la définition de style au lieu de sur chaque élément.

À quel niveau un style est défini instantanément, la portée de ce style est limitée. Ainsi, la portée, c'est-à-dire où vous pouvez utiliser le style, dépend de l'endroit où vous l'avez défini. Le style peut être défini aux niveaux suivants -

Sr. Non Niveaux et description
1 Niveau de contrôle

La définition d'un style au niveau du contrôle ne peut être appliquée qu'à ce contrôle particulier.

2 Niveau de mise en page

La définition d'un style à n'importe quel niveau de mise en page ne peut être accessible que par cette mise en page et par ses éléments enfants uniquement.

3 Niveau de la fenêtre

La définition d'un style au niveau d'une fenêtre peut être accessible par tous les éléments de cette fenêtre.

4 Niveau d'application

La définition d'un style au niveau de l'application le rend accessible dans toute l'application.