XAML alapok

Az előző fejezetben áttekintettük, hogy mi is az XAML, és mire használható, de hogyan készíthetünk vezérlő elemeket XAML-ben? Ahogy a következő példában is látszik, XAML-ben úgy hozható létre vezérlő elem, hogy a nevét csúcsos zárójelbe (<>) írjuk. Például egy gomb (Button) létrehozása így történik:

<Button>

Az XAML tag-eket le is kell zárni, akár lezáró tag segítségével, akár úgy, hogy a nyitó tag végére "/" jelet írunk:

<Button></Button>

Vagy

<Button />

Több vezérlő elemnél is lehetséges, hogy tartalmat írjunk a nyitó és záró tag közé, ami utána a vezérlő tartalma lesz. Például a gombnál így adható meg, hogy milyen felirat legyen rajta:

<Button>A button</Button>

A HTML nem kis-nagybetű érzékeny, az XAML viszont igen, mert minden vezérlő elem neve egy .NET keretrendszerben definiált típushoz van hozzárendelve. Ugyanez igaz az attribútumok nevére, amik a vezérlő elem tulajdonságaihoz (property) vannak hozzárendelve. A következő példában egy olyan gombot hozunk létre, amelynek tulajdonságait attribútumok megadásával állítjuk be a tag-ben:

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

Beállítottuk a betűk vastagságát (FontWeight), hogy félkövér (bold) szöveget kapjunk és a tartalmat (Content), ami ugyanazt eredményezi, mintha a nyitó és záró tag közé írtunk volna szöveget. Ugyanakkor a vezérlő elemek attribútumai megadhatók a Vezérlő-Pont-Tulajdonság (Control-Dot-Property) jelölésrendszerrel is:

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

Az eredmény teljesen ugyanaz, mint feljebb, így ebben az esetben csak a szintaktika különböző. Számos vezérlő elem tartalmazhat további elemeket szövegen kívül, például más vezérlő elemeket. A következő példa szemlélteti, hogy hogyan lehet TextBlock vezérlő segítségével több színű feliratot feltüntetni egyetlen gombon:

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

A Content tulajdonság csak egyetlen elemet foglalhat magában, ezért van szükség a WrapPanel-re, amely magában foglalja az eltérű színű szövegeket. A Panelek, mint a WrapPanel is, fontos szerepet játszanak a WPF-ben, ezeket később részletesen bemutatjuk. Egyelőre csak képzeljük őket úgy, mint vezérlő elemek tárolóját, egységesítőjét.

Ugyanez az eredmény érhető el a következő módon is, csak más jelölésrendszerrel:

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

Kód vs. XAML

Remélhetőleg a fenti példákkal sikerült igazolni, hogy könnyű XAML kódot írni, és többféle lehetőség is van rá. Amennyiben felmerül az a gondolat, hogy sok utasítást kell kiadni egy gomb létrehozásához, amely több színű szöveget tartalmaz, vessük össze az ugyanezt végrehajtó C# kóddal:

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

Természetesen a fenti példát kevésbé explicit módon, más szintaktikával is meg lehet oldani, a végeredmény viszont ugyanaz: az XAML rövid és tömör megoldást ad felületek leírására.