XAML bàsic

Al capítol anterior, vam parlar què és XAML per a què serveix, però es crea un control dins XAML? Com veureu al següent exemple, crear un control dins XAML és tan fàcil com escriure el seu nom, envoltat per claudàtors angulars. Per exemple, un Botó té el següent aspecte:

<Button>

Les etiquetes XAML han de finalitzar, sigui escrivint l'etiqueta de final o posant una "/" abans de tancar l'etiqueta d'inici:

<Button></Button>

O :

<Button />

Molts controls ens permeten posar contingut entre les etiquetes d'inici i final, i que aleshores serà el contingut del control. Per exemple, el control tipus Botó ens permet especificar entre les etiquetes d'inici i final el text que es mostra sobre aquest:

<Button>A button</Button>

HTML no és case-sensitive(no distingeix entre majúscules i minúscules), però XAML sí, perquè el nom de control ha de pertànyer a un tipus dins el framework .NET. El mateix passa amb els noms dels atributs, els quals pertanyen a les propietats del control. A continuació hi ha un botó on definim un parell de propietats afegint atributs a l'etiqueta:

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

Hem utilitzat la propietat FontWeight, obtenint una font en negreta (bold), i a continuació hem establert la propietat de Contingut, el que és el mateix que escriure el text entre les etiquetes d'inici i final. Tanmateix, tots els atributs d'un control també es poden definir així, on semblen etiquetes filles del control principal, usant la notació Control-Punt-Propietat:

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

El resultat és exactament igual a l'obtingut anteriorment, així en aquest cas, tot es redueix a un tema de sintaxi i res més. Tanmateix, molts controls habiliten continguts addicionals al text, per exemple altres controls. A continuació hi ha un exemple on tenim text en diferents colors al mateix botó utilitzant diferents TextBlock dins el Botó:

<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>

La propietat Content només permet un sol element fill, per això hem fet servir un WrapPanel per a contenir els diferents blocs de text per a cada color. Els Panells (Panels), igual que el WrapPanel, juguen un paper important dins WPF i ho veurem amb més detall més endavant, per ara, considereu-los com a contenidors per a altres controls.

Exactament el mateix resultat es pot obtenir amb el següent codi, que només és una altra manera d'escriure el mateix:

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

Codi vs. XAML

Afortunadament els exemples anteriors ens mostren que XAML és força fàcil d'escriure, però amb moltes alternatives per fer-ho, i si penseu que l'exemple anterior és molt codi per a l'obtenció d'un botó amb el text dins seu amb colors diferents, aleshores intenta fer el mateix només amb C#:

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);

Per descomptat, l'exemple anterior podria ser escrit menys explícitament i usant més dolçor sintàctica, però penso que el cas és que XAML és bastant breu i concís per a descriure interfícies.