Základy XAML

V predchádzajúcej kapitole sme hovorili o tom, čo je XAML a načo sa používa, ale ako vytvoríte kontrolku v XAML? Ako uvidíte z nasledujúceho príkladu, vytvorenie ovládacieho prvku v XAML je rovnako jednoduché ako napísanie jeho mena, obklopené uhlovými zátvorkami. Napríklad Button (tlačidlo) vypadá takto:

<Button>

Značky XAML sa musia ukončiť buď napísaním koncovej značky alebo umiestnením lomítka na konci začiatočnej značky:

<Button></Button>

alebo

<Button />

Mnoho ovládacích prvkov umožňuje vložiť obsah medzi začiatočné a koncové značky, čo je obsah ovládacieho prvku. Ovládací prvok Button vám napríklad umožňuje určiť na ňom zobrazený text medzi štartovacími a koncovými značkami:

<Button>A button</Button>

HTML nerozlišuje veľké a malé písmená, ale XAML áno, pretože meno kontrolky musí zodpovedať typu v .NET framework. To isté platí pre názvy atribútov, ktoré zodpovedajú vlastnostiam ovládacieho prvku. Tu je tlačidlo, v ktorom definujeme niekoľko vlastností pridaním atribútov do značky:

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

Nastavili sme vlastnosť 'FontWeight', ktorá nám dala tučný text a potom sme nastavili vlastnosť 'Content', ktorá je rovnaká ako písanie textu medzi začiatočnou a koncovou značkou. Avšak všetky atribúty ovládacieho prvku môžu byť tiež definované tak, že sa zobrazia ako podriadené značky hlavného ovládacieho prvku pomocou zápisu "Kontrolka-Bodka-Vlastnosť" (bodková notácia):

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

Výsledok je úplne rovnaký ako vyššie, takže v tomto prípade ide o syntax a nič iné. Mnohé ovládacie prvky však umožňujú vložiť aj iný obsah ako text, napríklad iné ovládacie prvky. Tu je príklad, v ktorom máme text v rôznych farbách na rovnakom tlačidle pomocou niekoľkých ovládacích prvkov TextBlock vnútri tlačidla:

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

Vlastnosť Content umožňuje len jeden podriadený prvok, takže používame WrapPanel, ktorý obsahuje rôzne farebné bloky textu. Panely, rovnako ako WrapPanel, zohrávajú dôležitú úlohu vo WPF a budeme o nich hovoriť oveľa podrobnejšie neskôr - zatiaľ ich považujme za kontajnery pre iné kontrolky.

Presne rovnaký výsledok možno dosiahnuť nasledovne, čo je jednoducho ďalší spôsob písania toho istého:

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

Kód vs. XAML

Dúfajme, že vyššie uvedené príklady vám ukážu, že XAML je veľmi jednoduché písať viacerými spôsobmi, a ak si myslíte, že vo vyššie uvedenom príklade je veľa značiek na to, aby ste dostali tlačidlo s textom v rôznych farbách, skúste urobiť presne to isté v 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);

Samozrejme, uvedený príklad by mohol byť napísaný menej explicitne, ale myslím, že podstata je jasná: XAML je dosť krátky a stručný na vytvorenie užívateľského rozhrania.