Basic XAML

I det foregående kapittelet, snakket vi om hva XAML er og hordan man kan gjøre nytte av det, men hvordan lager man en kontroll i XAML? Som du vil se av det neste eksempelet, er det å lage en kontroll i XAML like enkelt som å skrive navnet på kontrollen, omgitt av spisparenteser. For eksempel, vil koden for en Button-kontroll se slik ut:

<Button>

XAML tagger må være sluttede, enten ved å legge til en ende-tagg eller ved å legge til en fremover skråstrek på slutten av start taggen.

<Button></Button>

Eller

<Button />

Mange kontroller tillater at man legger innhold mellom start- og endetagg, som da utgjør innholdet i kontrollen. For eksempel tillater Button-kontrollen at du angir knappetekst mellom start- og endetagg:

<Button>A button</Button>

XAML skiller mellom små og store bokstaver i motsetning til HTML. Dette skyldes at navnet på en kontroll må samsvare med en type i .NET rammeverket. Det samme gjelder for XAML attributter, som må samsvare med egenskaper på kontrollen. Dette er en knapp der vi definerer et par egenskaper ved å definere attributter på Button-taggen:

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

Ved å sette FontWeight egenskapen gir det oss uthevet tekst. Vi definerer Content-egenskapen, som er det samme som å skrive tekst innhold mellom start- og endetagger. Legg merke til at alle kontroll attributter også kan defineres som følger; ved å legge dem til som barn av topp kontroll og bruk av "Kontroll-Punkt-Egenskap" notasjon:

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

Resultatet er akkurat det samme som for koden over. I dette tilfellet, handler det kun om syntaks og ingenting annet. Det er imidlertid mange kontroller som tillater innhold som ikke er tekst, for eksempel andre kontroller. Her er et eksempel på hvordan vi kan bygge en knapp med knappetekst i flere farger, ved å bruke flere TextBlock kontroller i innholdsområdet på Button-attributtet:

<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 egenskapen tillater kun bruk av ett enkelt underelement, så vi gjør nytte av et WrapPanel til å holde på blokker med forskjellig farget tekst. Paneler, som WrapPanel, utgjør en viktig rolle i WPF og vi vil dekke dem mer utfyllende senere, men foreløpig kan du se på dem som elementer som er laget for å holde på andre kontroller.

Du kan oppnå nøyaktig samme resultat, med følgende tekst-kode, som kun er en alternativ måte å uttrykke samme kode på:

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

Code vs. XAML

Forhåpentligvis har de foregående eksemplene vist deg at XAML er ganske enkelt å skrive, men at det er flere måter å gjøre ting på. Hvis du syntes at eksempelet over var i overkant omstendelig i forhold til å lage til en knapp med tekst i forskjellige farger; sammenlikn med C# kode for å gjøre nøyaktig det samme:

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

Eksempelet over kunne selvfølgelig vært skrevet mindre eksplisitt og gjort bruk av mer syntaks elementer for å gjøre koden lettere og kortere å lese, men poenget står fremdeles: XAML er en kort og konsis måte å beskrive et brukergrensesnitt på.