Silverlight utilizzare le risorse come fogli di stile.

Articolo introduttivo nell'utilizzare degli stili in ambiente Silverlight.

il
Sviluppatore Microsoft .Net, Collaboratore di IProgrammatori

Introduzione

Per chi programma in ambiente web, come Asp.Net, html, php, ed altri linguaggi web, avrà utilizzato o conoscerà i fogli di stile.
Con Silverlight, abbiamo un approccio identico, nel senso che possiamo creare degli stili e poi applicare quella determinata formattazione (colori del carattere, tipo di font, colore di sfondo, ed altro ancora) ai vari controlli.
Ma vediamo qui di seguito qualche esempio.

Stesura di codice

Si crea un nuovo progetto Silverlight o si apre uno già esistente, passiamo in visualizzazione XAML,  inseriamo tra il tag Grid e quello Usercontroll un un tag di tipo  <UserControl.Resources>
 Nel cui interno si troverà la sezione style.
Qui di seguito si riporta un semplice esempio di utilizzo di uno stile in XAML.

<UserControl x:Class="SLStile.MainPage"
    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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
<UserControl.Resources>
<Style x:Name="stileButton" TargetType="Button" >
            <!--Imposto la dimensione del font, la larghezza del controllo, il colore di sfondo ed altezza-->
            <Setter Property="FontSize" Value="20"></Setter>
            <Setter Property="Width" Value="100"></Setter>
            <Setter Property="Background" Value="Red"></Setter>
            <Setter Property="Height" Value="100"></Setter>
        </Style>
       
    </UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
        <Button Content="Esegui"  HorizontalAlignment="Left" Click="btnStile_Click" Margin="255,124,0,76" Name="btnStile"   Style="{StaticResource stileButton}" />
    </Grid>
</UserControl>


Esaminiamo il codice XAML appena illustrato.
All’interno del tag <Usercontrol.Resource> troviamo un tag denominato <Style> , questa sezione ci permette di impostare alcune formattazioni di un determinato controllo.
Gli attributi per il tag style permettono di definire lo stile, nel nostro esempio, abbiamo un attributo per impostare un nome,  tramite il tag x:name, ed un attributo denominato TargetType per impostare il tipo di controllo su cui applicare lo stile, nel nostro caso ad un controllo di tipo Button.
I sotto nodi, denominati <Setter> indicano a quale proprietà impostare un determinato valore, con l’attributo Property, viene indicata la proprietà su cui applicare lo stile, mentre l’attributo value, il valore che verrà impostato. Si fa presente, che nel controllo a cui si applica lo stile, le proprietà non devono essere valorizzate, altrimenti lo stile non ha effetto, proprio come avviene in Html.
Per applicare lo stile al controllo button, utilizzare la proprietà Style impostando il nome dello stile, come visto nell’esempio precedente.

Creazione di stili ereditati

Possiamo creare degli stile che ereditano da altri stili, la possibilità di estendere quelli già presente.
Per esempio se abbiamo uno stile che si applica ad un controllo, possiamo creare uno stile che eredita da quest'ultmo, ma da utilizzare per la classe button.
Qui di seguito si riporta un esempio di codice XAML.

<UserControl x:Class="SLStile.MainPage"
    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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>

<Style x:Name="StilePrincipale" TargetType="Control" >
            <!--Imposto  il colore di sfondo-->
            <Setter Property="Background" Value="Yellow"></Setter>
        </Style>
<Style x:Name="StileEsteso" TargetType="Button"  BasedOn="{StaticResource StilePrincipale}">
            <!-- Imposto la dimensione del font, la larghezza del controllo, ed altezza -->
            <Setter Property="FontSize" Value="20"></Setter>
            <Setter Property="Width" Value="100"></Setter>
            <Setter Property="Height" Value="100"></Setter>
        </Style>
    </UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
        <Button Content="Esegui"  HorizontalAlignment="Left" Click="btnStile_Click" Margin="255,124,0,76" Name="btnStile"   Style="{StaticResource StileEsteso}" />
    </Grid>
</UserControl>

Si è creato uno stile principale impostando la proprietà TargetType ad un controllo di tipo generico (control) ,terminata la creazione dello stile principale, se ne crea un altro, il quale tramite l’attributo BasedOn, abbiamo impostato  il nome dello stile di cui si baserà, in questo caso avremmo ereditato la proprietà background in questo stile.
Per utilizzare lo stile esteso, che eredita da quello principale, nella proprietà Style del controllo button, impostiamo il nome dello stile secondario, in questo modo il controllo avrà le formattazioni dello stile principale e secondario.

Conclusioni.

In questo articolo, è stata illustrata la tecnica per  utilizzare gli stili, molto utile nel caso che si hanno applicazioni con molti controlli simili.
Come avviene per il codice web html, applicando lo stile ai vari controlli possiamo variare la formattazione di tutti controlli in cui è impostato lo stile, solo cambiando la proprietà dello stile, migliorando così la manutenzione dell’applicazione.