Introduzione agli stili WPF

Se vieni dal mondo dello sviluppo per il Web, e conosci HTML e CSS , ti renderai presto conto che XAML è molto simile all'HTML: usando i tag, si definisce un layout strutturale della tua applicazione. Puoi persino far apparire i tuoi elementi in un certo modo, usando proprietà incorporate come Foreground, FontSize e così via, proprio come puoi localizzare i tuoi tag HTML.

Ma cosa succede quando si desidera utilizzare la stessa dimensione e colore del carattere esatti su tre diversi controlli TextBlock? Puoi copiare / incollare le proprietà desiderate su ognuna di esse, ma cosa succede quando tre controlli diventano 50 controlli, distribuiti su più finestre? E cosa succede quando ti rendi conto che la dimensione del carattere dovrebbe essere 14 invece di 12?

WPF introduce lo stile, che è per XAML ciò che CSS è per HTML. Utilizzando gli stili, è possibile raggruppare un insieme di proprietà e assegnarle a controlli specifici o a tutti i controlli di un tipo specifico e, proprio come nei CSS, uno stile può ereditare da un altro stile.

Esempio base di utilizzo dello stile

Parleremo molto di più di tutti i dettagli, ma per questo capitolo di introduzione, voglio mostrarvi un esempio molto semplice su come usare lo stile:

<Window x:Class="WpfTutorialSamples.Styles.SimpleStyleSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SimpleStyleSample" Height="200" Width="250">
    <StackPanel Margin="10">
        <StackPanel.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="Foreground" Value="Gray" />
                <Setter Property="FontSize" Value="24" />
            </Style>
        </StackPanel.Resources>
        <TextBlock>Header 1</TextBlock>
        <TextBlock>Header 2</TextBlock>
        <TextBlock Foreground="Blue">Header 3</TextBlock>
    </StackPanel>
</Window>

Per le risorse del mio StackPanel, definisco uno Style . Uso la proprietà TargetType per dire a WPF che questo stile deve essere applicato a tutti i controlli TextBlock all'interno dell'ambito (StackPanel) e quindi aggiungo due elementi Setter allo stile. Gli elementi Setter vengono utilizzati per impostare specifiche proprietà per i controlli target, in questo caso Foreground e FontSize . La Property indica a WPF quale proprietà vogliamo scegliere come target e il Value definisce il valore desiderato.

Si noti che l'ultimo TextBlock è blu anziché grigio. L'ho fatto per mostrarti che mentre un controllo potrebbe ottenere uno stile da uno stile designato, sei completamente libero di sovrascriverlo localmente sul controllo - i valori definiti direttamente sul controllo avranno sempre la precedenza sui valori di stile.

Riassunto

Gli stili WPF permettono molto semplicemente di creare un aspetto specifico e quindi utilizzarlo per diversi controlli. Mentre questo primo esempio era molto locale, ti mostrerò come creare stili globali nei prossimi capitoli.