WPF - Stili

Il framework .NET fornisce diverse strategie per personalizzare e personalizzare l'aspetto di un'applicazione. Gli stili ci forniscono la flessibilità per impostare alcune proprietà di un oggetto e riutilizzare queste impostazioni specifiche su più oggetti per un aspetto coerente.

• Negli stili, puoi impostare solo le proprietà esistenti di un oggetto come Altezza, Larghezza, Dimensione carattere, ecc.

• È possibile specificare solo il comportamento predefinito di un controllo.

• È possibile aggiungere più proprietà in un unico stile.

Gli stili vengono utilizzati per dare un aspetto o un aspetto uniforme a un set di controlli. Gli stili impliciti vengono utilizzati per applicare un aspetto a tutti i controlli di un determinato tipo e semplificare l'applicazione. Immagina tre pulsanti, tutti devono avere lo stesso aspetto, la stessa larghezza e altezza, la stessa dimensione del carattere, lo stesso colore di primo piano, ecc. Possiamo impostare tutte queste proprietà sugli stessi elementi del pulsante e questo va ancora bene per tutti i pulsanti. Dai un'occhiata al diagramma seguente.

Ma nelle applicazioni della vita reale, in genere ne avrai molti di più che devono avere lo stesso identico aspetto. E non solo i pulsanti, ovviamente, in genere vorrai che i tuoi blocchi di testo, caselle di testo e caselle combinate ecc. Abbiano lo stesso aspetto in tutta l'applicazione. Sicuramente, ci deve essere un modo migliore per raggiungere questo obiettivo ed è noto comestyling. Puoi pensare a uno stile come a un modo conveniente per applicare un insieme di valori di proprietà a più di un elemento. Dai un'occhiata al diagramma seguente.

Esempio

Facciamo un semplice esempio per capire questo concetto. Inizia creando un nuovo progetto WPF.

• Trascina tre pulsanti dalla casella degli strumenti alla finestra di progettazione.

• Il codice XAML seguente crea tre pulsanti e li inizializza con alcune proprietà.

<Window x:Class = "WPFStyle.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: WPFStyle" 
   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>

Quando guardi il codice sopra, vedrai che per tutti i pulsanti altezza, larghezza, colore di primo piano, dimensione del carattere e proprietà del margine sono le stesse. Ora, quando il codice sopra è stato compilato ed eseguito, verrà visualizzata la seguente finestra.

Ora diamo un'occhiata allo stesso esempio, ma questa volta useremo 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>

Gli stili sono definiti nel dizionario delle risorse e ogni stile ha un identificatore di chiave univoco e un tipo di destinazione. All'interno di <style> puoi vedere che più tag setter sono definiti per ogni proprietà che sarà inclusa nello stile.

Nell'esempio precedente, tutte le proprietà comuni di ogni pulsante sono ora definite nello stile e quindi lo stile viene assegnato a ciascun pulsante con una chiave univoca impostando la proprietà dello stile tramite l'estensione di markup StaticResource.

Quando compili ed esegui il codice sopra, verrà visualizzata la seguente finestra (lo stesso output).

Il vantaggio di farlo in questo modo è immediatamente evidente, possiamo riutilizzare quello stile ovunque nel suo ambito; e se abbiamo bisogno di cambiarlo, lo cambiamo semplicemente una volta nella definizione dello stile invece che su ogni elemento.

In quale livello viene definito uno stile limita istantaneamente la portata di quello stile. Quindi l'ambito, cioè dove puoi usare lo stile, dipende da dove lo hai definito. Gli stili possono essere definiti sui seguenti livelli:

Suor n	Livelli e descrizione
1	Livello di controllo La definizione di uno stile a livello di controllo può essere applicata solo a quel particolare controllo. Di seguito è riportato un esempio di un livello di controllo in cui il pulsante e TextBlock hanno il proprio stile.
2	Livello layout La definizione di uno stile a qualsiasi livello di layout lo renderà accessibile solo da quel layout e dai suoi elementi figlio.
3	Livello finestra La definizione di uno stile a livello di finestra può renderlo accessibile a tutti gli elementi di quella finestra.
4	Livello di applicazione La definizione di uno stile a livello di app può renderlo accessibile a tutta l'applicazione. Facciamo lo stesso esempio, ma qui inseriremo gli stili nel file app.xaml per renderlo accessibile in tutta l'applicazione.