Basic XAML

U prethodnom poglavlju smo pričali o tome što je XAML i za što se koristi, ali kako kreirati kontrolu u XAMLu? Kao što ćete vidjeti u sljedećem primjeru, kreiranje kontrole u XAMLu je jednostavno poput pisanja imena kontrole u izlomljenim zagradama <>. Na primjer, Button (gumb) izgleda ovako:

<Button>

XAML tag treba imati i završetak, bilo pisanjem krajnjeg taga ili stavljanjem kose crte na kraj početnog taga:

<Button></Button>

Ili

<Button />

Mnoge kontrole omogućuju da se stavi sadržaj između početnog i završnog taga, koji zatim postaje sadržaj kontrole. Na primjer, kontrola Button omogućuje da se definira tekst prikazan na gumbu upisivanjem teksta između početnog i završnog taga:

<Button>A button</Button>

HTML ne razlikuje velika i mala slova, ali XAML razlikuje, zato jer naziv kontrole mora odgovarati tipu u .NET sustavu. Isto vrijedi za imena atributa, koji odgovaraju svojstvima kontrole. Ovdje je gumb kojem definiramo nekoliko svojstava dodajući atribute tagovima:

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

Setiramo FontWeight svojstvo, što nam daje deblji tekst i zatim setiramo Content svojstvo što je isto kao i pisanje teksta između početnog i završnog taga. Međutim, svi atributi kontrole se mogu definirati i na sljedeći način, gdje se ponašaju kao djeca glavne kontrole, koristeći notaciju Kontrola-Točka-Svojstvo:

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

Rezultat je identičan kao i prijašnji, pa u ovom slučaju se radi samo o drukčijoj sintaksi i ničem drugom. Međutim, mnoge kontrole dopuštaju sadržaj drukčiji od teksta, kao naprimjer da sadržaj mogu biti ostale kontrole. Ovdje je primjer gdje imamo tekst u različitim bojama na istom gumbu koristeći nekoliko TextBlock kontrola unutar kontrole Button:

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

Svojstvo Content može sadržavati samo jedan element, te stoga koristimo WrapPanel da sadržimo blokove teksta različitih boja. Paneli, poput WrapPanela, igraju važnu ulogu u WPFu i biti će mnogo detaljnije opisani u kasnijim poglavljima - zasad, smatrajte ih samo kao spremnike za ostale kontrole.

Identičan rezultat se može postići sljedećim označavanjem, što je jednostavno drukčiji način pisanja iste stvari:

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

Kod vs. XAML

Nadamo se da su gornji primjeri pokazali da je XAML prilično jednostavan za pisanje, ali s više različitih mogućnosti, te ako smatrate da gornji primjeri sadržavaju puno označavanja da se dobije gumb s tekstom u različitim bojama, pokušajte usporediti kako bi isti rezultat dobili programiranjem u 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);

Naravno da bi se gornji primjer mogao napisati manje eksplicitno i pomoću raznih sintaktičkih trikova, ali smatram da je poanta jasna: XAML je prilično kratak i jasan za opisivanje sučelja.