XAML: stili

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

• Negli stili è possibile impostare solo le proprietà esistenti di un oggetto come Altezza, Larghezza e Dimensione carattere.

• È 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 uniforme a una serie di controlli. Gli stili impliciti vengono utilizzati per applicare un aspetto a tutti i controlli di un determinato tipo e semplificare l'applicazione.

Immagina di avere tre pulsanti e tutti devono avere lo stesso aspetto: stessa larghezza e altezza, stessa dimensione del carattere e stesso colore di primo piano. Possiamo impostare tutte queste proprietà sugli stessi elementi del pulsante e questo è ancora abbastanza ok per tutti i pulsanti come mostrato nel diagramma seguente.

Ma in un'app reale, in genere ne avrai molte di più che devono avere lo stesso identico aspetto. E non solo i pulsanti, naturalmente, in genere vorrai che i tuoi blocchi di testo, caselle di testo e caselle combinate, ecc. Sicuramente ci deve essere un modo migliore per raggiungere questo obiettivo - è noto comestyling. Si può pensare a uno stile come a un modo conveniente per applicare un insieme di valori di proprietà a più di un elemento, come mostrato nel diagramma seguente.

Diamo un'occhiata all'esempio che contiene tre pulsanti creati in XAML con alcune proprietà.

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

Quando guardi il codice sopra, vedrai che per tutti i pulsanti, altezza, larghezza, colore di primo piano, dimensione del carattere e proprietà del margine rimangono le stesse. Quando il codice precedente viene compilato ed eseguito, verrà visualizzato il seguente output:

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 il codice precedente viene compilato ed eseguito, produrrà la seguente finestra che è lo stesso output.

Il vantaggio di farlo in questo modo è immediatamente evidente. Possiamo riutilizzare quello stile ovunque nel suo ambito e, se dobbiamo 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. Lo stile può essere definito 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.
2	Livello layout La definizione di uno stile a qualsiasi livello di layout può essere accessibile solo da quel layout e solo dai suoi elementi figlio.
3	Livello finestra La definizione di uno stile a livello di finestra può essere accessibile da tutti gli elementi di quella finestra.
4	Livello di applicazione La definizione di uno stile a livello di app lo rende accessibile nell'intera applicazione.