Hello Silverlight 2.0, again!

Style

In Silverlight 2.0 è stata introdotta la possibilità di definire le caratteristiche di presentazione di un controllo al di fuori del codice XAML del controllo stesso in modo che possa essere modificato facilmente e condiviso con altri controlli dello stesso tipo. Questa funzionalità è possibile attraverso l'uso degli Style, oggetti specifici che trasportano le informazioni grafiche e letteralmente lo stile di un oggetto attraverso una sintassi semplice e concisa:

<Style x:Key="CustomTextBox" TargetType="TextBox"> 
    <Setter Property="Foreground" Value="#FFFFFFFF"></Setter> 
    <Setter Property="Height" Value="50"></Setter> 
    <Setter Property="Width" Value="300"></Setter> 
    <Setter Property="Background"> 
           <Setter.Value> 
               <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" > 
                   <GradientStop Color="#FF000000"/> 
                   <GradientStop Color="#FFEC3315" Offset="1"/> 
               </LinearGradientBrush> 
           </Setter.Value> 
    </Setter> 
</Style>

In questo esempio è possibile vedere che lo Style chiamato CustomTextBox è riferibile ad un controllo di tipo TextBox, con i nodi Setter vengono specificati i valori delle proprietà dei controlli TextBox a cui verrà associato.

Com'è possibile notare anche la proprietà Setter consente la nota sintassi delle Property Element qualora sia necessario specificare come valore un oggetto più complesso di una semplice stringa di testo, ad esempio in questo caso è stato specificato come Background un oggetto LinearGradientBrush.

Gli Style possono essere definiti in più livelli all'interno del markup, possono essere stili specifici di un gruppo di oggetti aggiungendoli alla collezione Resources del controllo di tipo layout di livello superiore, isolandone così l'applicabilità solo agli oggetti sottostanti, oppure possono essere estesi a tutti i controlli dell'applicazione definendoli nel Application.Resources del markup dell'oggetto Application.

Dopo la loro definizione l'uso degli Style è molto semplice, è sufficiente valorizzare la proprietà Style con la Markup Extension StaticResource:

<TextBox x:Name="Textbox1" Style="{StaticResource CustomTextBox}"></TextBox>

In questo modo tutte le proprietà definite nello stile andranno a valorizzare le corrispondenti proprietà della TextBox che assumerà quindi l'aspetto definito.

L'utilizzo degli Style non blocca la ridefinizione di specifiche caratteristiche che un oggetto può avere nei confronti degli altri, è sufficiente valorizzare normalmente una proprietà già definita nello stile associato per eseguirne l'override, in tal modo la proprietà avrà il valore assegnato nel markup del controllo.

Visualizza l'esempio

Template

Tra le funzionalità disponibili in questa versione di Silverlight i Template sono fra quelle che spiccano maggiormente poiché consentono una grande flessibilità nella realizzazione di controlli e nel dare loro con facilità l'impatto estetico-funzionale desiderato.

Un Template è l'insieme di informazioni che descrivono come un controllo deve essere composto e renderizzato a video, ogni controllo ha una propria struttura ed un aspetto nativo, attraverso la proprietà Template è possibile ridefinire radicalmente la gerarchia dei sub-controlli interni per ottenere una "skin" anche complessa pur mantenendo le funzionalità di base del controllo.

Visualizza l'esempio

In questo semplice esempio il Template di una TextBox è stato sostituito per dargli un aspetto arrotondato ed uno sfondo sfumato con un gradiente lineare.

I Template si applicano attraverso gli Style definendo l'oggetto ControlTemplate nel valore della proprietà Template:

<Setter Property="Template"> 
<Setter.Value> 
    <ControlTemplate TargetType="TextBox"> 
        <Grid> 
            <Rectangle Width="300" Canvas.Top="0" Canvas.Left="0" Height="30" RadiusX="10" RadiusY="10"> 
                <Rectangle.Stroke> 
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
                        <GradientStop Color="#FF000000" Offset="1"/> 
                        <GradientStop Color="#FF4D4D4D" Offset="0"/> 
                    </LinearGradientBrush> 
                </Rectangle.Stroke> 
                <Rectangle.Fill> 
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" SpreadMethod="Reflect"> 
                        <GradientStop Color="#FF0C180D" Offset="0.89"/> 
                        <GradientStop Color="#FFFFFFFF" Offset="1"/> 
                        <GradientStop Color="#FF9B9B9B" Offset="0.138"/> 
                    </LinearGradientBrush> 
                </Rectangle.Fill> 
            </Rectangle> 
            <Grid Margin="5,3,5,5"> 
                <Border x:Name="ELEMENT_Content"/> 
            </Grid> 
        </Grid> 
    </ControlTemplate> 
</Setter.Value> 
</Setter>

Le potenzialità dei Template non si limitano solo a quanto appena descritto, nel definire un Template è possibile anche attribuire a runtime molte caratteristiche della "skin" utilizzando i valori definiti nel controllo utilizzando la Markup Extension TemplateBinding con la quale è possibile creare un Template astratto ad esempio per dimensione, colore ed altro lasciando al designer la possibilità di personalizzazione a seconda del contesto del progetto.

Come per ogni altro elemento anche nei Template è possibile definire le animazioni dei controlli in funzione dell'interazione con l'utente; com'è intuibile da questa introduzione l'uso dei Template è di importate aiuto alla separazione della logica applicativa da quella di presentazione consentendo una gestione più semplice del codice ma anche aumentando la robustezza dei progetti migliorando la possibilità di eseguire test sulle singole funzionalità, non è da trascurare inoltre che tale architettura migliora decisamente la collaborazione parallela tra più specialisti all'interno di un team consentendo a ciascuno di occuparsi di uno specifico settore in modo omogeneo ed efficiente.

Sullo stesso argomento

Commenti

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Segnala su: