Basi di XAML

Nel capitolo precedente abbiamo parlato di cosa sia XAML e a che cosa serva; ma come si crea un controllo con XAML? Come vedremo nel prossimo esempio, creare un controllo con XAML è facile come scriverne il nome tra due virgolette basse singole. Per esempio, ecco come creare un elemento Button:

<Button>

Le tag XAML devono essere chiuse, scrivendo la tag completa di chiusura oppure inserendo una barra obliqua alla fine della tag di apertura:

<Button></Button>

Oppure:

<Button />

Molti controlli permettono di inserire del testo tra le due tag, che rappresenterà quindi il contenuto del controllo. Per esempio, il controllo Button permette di specificare cosa verrà mostrato sul pulsante scrivendo il testo desiderato tra la tag di apertura e quella di chiusura:

<Button>A button</Button>

L'HTML non fa differenza tra maiuscole e minuscole, ma XAML sì, perché il nome del controllo deve corrispondere a un tipo specifico nel framework .NET. Lo stesso discorso si applica anche ai nomi degli attributi, che equivalgono alle proprietà di un controllo. Qua sotto rappresentiamo un pulsante definendone un paio di proprietà aggiungendo attributi alla tag:

<Button FontWeight="Bold" Content="A button" />

Abbiamo impostato la proprietà FontWeight, ottenendo del testo in grassetto, e la proprietà Content che equivale a scrivere del testo tra le tag. Inoltre, gli attributi di un controllo possono anche essere definiti così, dove compaiono come tag-figlie della tag del controllo principale, usando lo schema Controllo-Punto-Proprietà:

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>A button</Button.Content>
</Button>

Il risultato è identico a quello più sopra, quindi in questo caso si tratta di scelta di sintassi e nulla più. Tuttavia, molti controlli permettono di inserire altro oltre che semplice testo, per esempio altri controlli. Qui di seguito un esempio dove facciamo comparire del testo in vari colori sullo stesso pulsante, usando dei controlli TextBlock all'interno del Button:

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>
        <WrapPanel>
            <TextBlock Foreground="Blue">Multi</TextBlock>
            <TextBlock Foreground="Red">Color</TextBlock>
            <TextBlock>Button</TextBlock>
        </WrapPanel>
    </Button.Content>
</Button>

Poiché la proprietà Content può avere un solo elemento figlio, abbiamo usato un WrapPanel per contenere i diversi blocchi di testo. I Panels, come il WrapPanel, giocano un ruolo importante in WPF e perciò li vedremo in dettaglio nei prossimi capitoli. Per il momento possiamo considerarli come contenitori per altri controlli.

Lo stesso risultato si può ottenere con la scrittura seguente, che è semplicemente un altro modo per scrivere la stessa cosa:

<Button FontWeight="Bold">
    <WrapPanel>
        <TextBlock Foreground="Blue">Multi</TextBlock>
        <TextBlock Foreground="Red">Color</TextBlock>
        <TextBlock>Button</TextBlock>
    </WrapPanel>
</Button>

Codice vs. XAML

Negli esempi precedenti abbiamo visto quanto sia semplice scrivere usando XAML in modi diversi, ma se credi che si tratti comunque di un sacco di testo per un semplice pulsante con delle scritte colorate, allora prova a confrontarlo con il seguente codice C#, che fa la stessa identica cosa:

Button btn = new Button();
btn.FontWeight = FontWeights.Bold;

WrapPanel pnl = new WrapPanel();

TextBlock txt = new TextBlock();
txt.Text = "Multi";
txt.Foreground = Brushes.Blue;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Color";
txt.Foreground = Brushes.Red;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Button";
pnl.Children.Add(txt);

btn.Content = pnl;
pnlMain.Children.Add(btn);

Ovviamente l'esempio qua sopra può essere scritto in maniera meno esplicita compattando le istruzioni, ma il concetto dovrebbe comunque essere chiaro: XAML è un modo veloce e conciso per descrivere interfacce.