XAML per Silverlight - Prima parte

Esiste un'ulteriore tipologia di attributo che è usata come scorciatoia per ridurre la verbosità del codice delle Property element, si tratta dei Type Converters la cui dichiarazione è elaborata dal parser per generare il tipo di oggetto adatto al valore inserito.

<Ellipse Width="100" Height="100" Fill="Red"/> 

In questo esempio è un Type Converter l'attributo Fill il quale corrisponde al più lungo codice:

<Ellipse Width="100" Height="100"> 
    <Ellipse.Fill> 
        <SolidColorBrush Color="Red"/> 
    </Ellipse.Fill> 
</Ellipse> 

Ridurre la lunghezza del codice XAML semplifica la lettura ma soprattutto riduce i bytes da far scaricare all'utente per consultare il sito.

In generale i nomi degli oggetti nelle Property attribute, Property element e Attached Properties identificano specifiche classi e quindi la loro scrittura è case-sensitive.

È importante conoscere il comportamento degli oggetti grafici per poter scegliere il più adatto ad un determinato scopo, successivamente i tool visuali come Expression Design ed Expression Blend possono aiutare ad essere più veloci nella creazione della grafica e ad avere immediatamente visibile il risultato, riducendo la concentrazione sulla scrittura iniziale del codice ed essere più liberi nella creatività; tuttavia essere a conoscenza del codice sottostante ad un elemento grafico può aiutare a sfruttare al meglio gli strumenti grafici e ad ottenere più facilmente il risultato voluto.

Ogni oggetto ha molteplici caratteristiche, alcune specifiche per se stesso ed altre comuni ad altri oggetti, di seguito saranno analizzati gli oggetti più usuali, nella documentazione allegata all'SDK è possibile trovare un elenco dettagliato con spiegazioni ed esempi.

XAML in Silverlight

Per mantenere una certa leggerezza, il plug-in Silverlight 1.0 supporta un ristretto sottoinsieme delle classi  XAML disponibili nel .NET Framework 3.5 , nella versione 2.0 in corso di sviluppo è stato annunciato un notevole aumento del supporto per equiparare Silverlight a WPF .

Gli oggetti supportati sono paragonabili a primitive grafiche con cui costruire manualmente ogni parte delle interfacce utente, si possono catalogare nei seguenti gruppi:

• Oggetti per il layout;
• Oggetti vettoriali;
• Blocchi di testo;
• Oggetti per le trasformazioni;
• Oggetti multimediali;
• Oggetti per animazioni;

Oggetti per il layout

In Silverlight il layout può essere organizzato con l'oggetto Canvas come raccoglitore di altri oggetti per il posizionamento e per la gestione di eventi. Nel precedente codice di esempio sulle Attached Properties il Canvas è stato usato per raggruppare un rettangolo ed un ellisse per posizionarli nella scena in maniera solidale.

Oltre alle funzioni di gruppo, il Canvas ha anche caratteristiche tali che gli consento un aspetto grafico visibile, è importante notare che alcune proprietà come Visibility e Opacity trasmettono il loro comportamento agli oggetti figlio contenuti:

<Rectangle Width='290' Height="219" StrokeThickness="0" RadiusX="0" RadiusY="0"  
Canvas.Top="130" Canvas.Left="260" x:Name="Rectangle1?> 
<Rectangle.Fill> 
          <ImageBrush ImageSource="Images/small_nebula.png" Stretch="None"/> 
      </Rectangle.Fill> 
</Rectangle> 
<Canvas Width="300" Height="300" Canvas.Top="100" Canvas.Left="200" Opacity="0.7"  
x:Name="Canvas1"> 
    <Canvas.Background> 
        <LinearGradientBrush EndPoint="0.5,1"  
StartPoint="0.5,0"> 
            <GradientStop  
Color="#FFFFFFFF" Offset="0"/> 
            <GradientStop  
Color="#FF000000" Offset="1"/> 
        </LinearGradientBrush> 
    </Canvas.Background> 
    <Rectangle Width="200" Height="200" Canvas.Top="0"> 
        <Rectangle.Fill> 
            <RadialGradientBrush> 
                 
<GradientStop Offset="0" Color="White"/> 
                 
<GradientStop Offset="1" Color="Red" /> 
            </RadialGradientBrush> 
        </Rectangle.Fill> 
    </Rectangle> 
    <Ellipse  Height="100" Width="100" Canvas.Left="50" Canvas.Top="50"> 
        <Ellipse.Fill> 
            <RadialGradientBrush> 
                 
<GradientStop Offset="0" Color="White"/> 
                 
<GradientStop Offset="1" Color="Red" /> 
            </RadialGradientBrush> 
        </Ellipse.Fill> 
    </Ellipse> 
</Canvas> 

In questo esempio gli oggetti rettangolo ed ellisse contenuti nel Canvas "Canvas1" risultano semitrasparenti ereditando l'opacità impostata al 70% nella proprietà Opacity="0.7" :

Attenzione: Questo articolo contiene un allegato

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: