XAML - Stile

Das XAML-Framework bietet verschiedene Strategien zum Personalisieren und Anpassen des Erscheinungsbilds einer Anwendung. Stile geben uns die Flexibilität, einige Eigenschaften eines Objekts festzulegen und diese spezifischen Einstellungen für ein einheitliches Erscheinungsbild für mehrere Objekte wiederzuverwenden.

• In Stilen können Sie nur die vorhandenen Eigenschaften eines Objekts wie Höhe, Breite und Schriftgröße festlegen.

• Es kann nur das Standardverhalten eines Steuerelements angegeben werden.

• Einem Stil können mehrere Eigenschaften hinzugefügt werden.

Stile werden verwendet, um einer Reihe von Steuerelementen ein einheitliches Aussehen zu verleihen. Implizite Stile werden verwendet, um allen Steuerelementen eines bestimmten Typs ein Erscheinungsbild zuzuweisen und die Anwendung zu vereinfachen.

Stellen Sie sich vor, wir haben drei Schaltflächen, die alle gleich aussehen müssen - gleiche Breite und Höhe, gleiche Schriftgröße und gleiche Vordergrundfarbe. Wir können alle diese Eigenschaften für die Schaltflächenelemente selbst festlegen, und das ist für alle Schaltflächen noch in Ordnung, wie in der folgenden Abbildung dargestellt.

Aber in einer realen App haben Sie normalerweise viel mehr davon, die genau gleich aussehen müssen. Und natürlich nicht nur Schaltflächen, sondern in der Regel möchten Sie, dass Ihre Textblöcke, Textfelder und Kombinationsfelder usw. in Ihrer App gleich aussehen. Sicherlich muss es einen besseren Weg geben, dies zu erreichen - es ist bekannt alsstyling. Sie können sich einen Stil als eine bequeme Möglichkeit vorstellen, eine Reihe von Eigenschaftswerten auf mehr als ein Element anzuwenden, wie in der folgenden Abbildung dargestellt.

Schauen wir uns das Beispiel an, das drei Schaltflächen enthält, die in XAML mit einigen Eigenschaften erstellt wurden.

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

Wenn Sie sich den obigen Code ansehen, werden Sie feststellen, dass für alle Schaltflächen die Eigenschaften Höhe, Breite, Vordergrundfarbe, Schriftgröße und Rand gleich bleiben. Wenn der obige Code kompiliert und ausgeführt wird, wird die folgende Ausgabe angezeigt:

Schauen wir uns jetzt dasselbe Beispiel an, aber dieses Mal werden wir es verwenden 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>

Stile werden im Ressourcenwörterbuch definiert und jeder Stil verfügt über eine eindeutige Schlüsselkennung und einen Zieltyp. In <Stil> können Sie sehen, dass für jede Eigenschaft, die in den Stil aufgenommen wird, mehrere Setter-Tags definiert sind.

Im obigen Beispiel werden jetzt alle allgemeinen Eigenschaften jeder Schaltfläche im Stil definiert. Anschließend wird der Stil jeder Schaltfläche mit einem eindeutigen Schlüssel zugewiesen, indem die Stileigenschaft über die StaticResource-Markup-Erweiterung festgelegt wird.

Wenn der obige Code kompiliert und ausgeführt wird, wird das folgende Fenster erzeugt, das dieselbe Ausgabe ist.

Der Vorteil, dies so zu tun, liegt auf der Hand. Wir können diesen Stil überall in seinem Bereich wiederverwenden, und wenn wir ihn ändern müssen, ändern wir ihn einfach einmal in der Stildefinition anstatt für jedes Element.

In welcher Ebene ein Stil sofort definiert wird, schränkt den Umfang dieses Stils ein. Der Umfang, dh wo Sie den Stil verwenden können, hängt also davon ab, wo Sie ihn definiert haben. Der Stil kann auf den folgenden Ebenen definiert werden:

Sr.Nr.	Levels & Beschreibung
1	Kontrollebene Das Definieren eines Stils auf Steuerungsebene kann nur auf dieses bestimmte Steuerelement angewendet werden.
2	Layout-Ebene Das Definieren eines Stils auf einer beliebigen Layoutebene kann nur von diesem Layout und nur von seinen untergeordneten Elementen aufgerufen werden.
3	Fensterebene Auf das Definieren eines Stils auf Fensterebene können alle Elemente in diesem Fenster zugreifen.
4	Anwendungsebene Durch das Definieren eines Stils auf App-Ebene wird er in der gesamten Anwendung zugänglich.