Basal XAML

I forrige artikel diskuterede vi hvad XAML er og hvad det kan bruges til, men hvordan definerer man rent faktisk en kontrol i XAML? Som du kan se i det næste eksempel så er det faktisk utroligt let - du skriver blot kontrollens navn imellem et sæt vinkelparenteser (< >).Her kan du se hvor let det er at lave en knap:

<Button>

XAML tags skal afsluttes, enten ved at skrive en slut-version af tagget eller ved at sætte en skåstreg (forward slash på Engelsk) til sidst i start-tagget:

<Button></Button>

Eller

<Button />

En del XAML kontroller giver dig mulighed for at putte indhold imellem start og slut tag. For eksempel kan du angive teksten på en knap ved at putte den ind imellem start og slut tagget:

<Button>A button</Button>

HTML er ikke case-sensitive (der er ingen forskel på små og store bogstaver), men det er XAML, for de navne du skriver skal matche en type i .NET frameworket, som er case-sensitive. Det gælder naturligvis også attributterne i et XAML tag, som igen skal matche properties på den .NET type som udgør kontrollen. Her er et eksempel på en knap hvor vi definerer et par properties på knappen ved at angive det som attributter på tagget:

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

Vi sætter FontWeight propertien, som giver os fed tekst, og vi sætter også Content propertien, som er præcis det samme som at putte teksten ind imellem start og slut tag. En anden måde at gøre det på er ved at putte de enkelte properties ind som child-tags på hoved-elementet, vha. "Control-Dot-Property" notationen:

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

Resultatet er præcis det samme som i det forrige eksempel, så i dette tilfælde er det kun et spørgsmål om syntax. Der er dog en del kontroller som tillader indhold som ikke bare er tekst - fx andre kontroller. Det kan passende illustereres med det næste eksempel, hvor vi bruger flere forskellige tekst farver på samme knap vha. en række TextBlock elementer der er inde i den samme knap:

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

Content propertien tillader kun ét child element men den løser vi let ved at putte vores TextBlock elementer ind i en enkelt WrapPanel kontrol. Paneler (Panels på engelsk), som fx WrapPanel, spiller en meget vigtig rolle i WPF og derfor vil vi gå meget mere i dybden med dem senere, men indtil videre skal du blot tænke på dem som containere for andre kontroller.

Det samme resultat kan i øvrigt opnåes med følgende markup, som simpelthen bare er en anden måde at beskrive det samme på:

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

Kode vs. XAML

Forhåbentlig illustrerer de ovenstående eksempler hvordan XAML er let at skrive, men at tingene også typisk kan gøres på flere forskellige måder. Hvis du i øvrigt synes at der skal meget markup til for blot at skabe en enkelt knap, så prøv at sammenligne det med hvor meget C# kode der egentlig skal til:

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

C#-versionen kunne naturligvis godt skrives mindre explicit og med lidt mere "syntaktisk sukker", men jeg synes stadig at det beviser min pointe: XAML er kort og præcist når det kommer til at definere en brugergrænseflade.