Základy jazyka XAML

V předchozí kapitole jsme probrali, co to XAML je a na co se používá. Dnes se podíváme na to, jak XAML používat. Jak uvidíte na následujícím příkladu, vložit do aplikce kontrolku za pomoci XAMLu je velice jednoduché. Stačí napsat jméno dané kontrolky a to obalit do ostrých závorek, např. kontrolku Button (tlačítko) tedy vložíte takto:

<Button>

Takováto notace se, stejně jako v HTML, nazývá tag. XAML tag musí být ukončen, a to buďto ukončovacím tagem nebo přidáním lomítka:

<Button></Button>

nebo

<Button />

Mnoho kontrolek umožňuje vložit nějaký obsah mezi otevírací a ukončovací tag, a tento obsah pak přejde do vlastnosti Content (tedy obsah) dané kontrolky. Např. u kontrolky Button takto můžete specifikovat text, který se na tlačítku objeví:

<Button>A button</Button>

V jazyce XAML je nutné dodržovat velká a malá písmena (narozdíl od zmiňovaného HTML), a to proto, že jméno kontrolky v XAMLu musí korespondovat s daným objektovým typem .NETu. Stejně to platí pro jména atributů, které korespondují s vlastnostmi daných objektových typů. V následujícím příkladu specifikujeme několik vlastností tlačítka přidáním atributů do tagu Button:

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

Nastavili jsme vlastnost FontWeight na Bold, aby byl text na tlačítku tučný. Dále také již zmiňovanou vlastnost Content, která nastavuje text na tlačítku. Zápis je ekvivalentní s předešlým zápisem, kdy jsme text napsali mezi tagy. Ovšem také je možné zadefinovat vlastnosti jako tagy vnořené do hlavního tagu. To zapíšeme syntaxí "Příkaz(tečka)Vlastnost":

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

Rozdíl je pouze v syntaxi, zápisy jsou ekvivaletní a výsledek je stejný jako předtím. Většina kontrolek ovšem umožňuje vložit i jiný obsah, než jen text, např. i další Kontrolky. V následujícím případě vytvoříme Button, který obsahuje vícebarevný text, a to právě vložením několika TextBlocků.

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

Vlastnost Content umožňuje vložit pouze jediný objekt, takže použijeme kontrolku WrapPanel, jež obsahuje jednotlivé barevné části textu. Kontrolky typu panel, jako je právě použitý WrapPanel, hrají velice důležitou roli při tvorbě uživatelského rozhraní ve WPF. Později je v tutoriálu detailně probereme, prozatím je berte jako kontejnery pro jiné kontrolky.

Stejného výsledku je možné dosáhnout i použitím následujícího kódu:

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

Zdrojový kód vs. XAML

Doufáme, že příklady výše vám ukázaly, že psát v XAMLu je snadné, i když je možné napsat totéž vícero způsoby. Pokud si myslíte, že jsme k vytvoření "pouhého tlačítka s vícebarevným textem" napsali zbytečně velké množství kódu, podívejte se nyní, jak je možné napsat jej 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);

Jsme si vědomi toho, že je možné zápis výše zkrátit tak, že nepoužijeme tolik proměnných, nicméně pointa by zůstala stejná, totiž že XAML je jednoduchý a výhodný pro vytvoření uživatelských rozhraní.