Basic XAML

U prethodnom poglavlju smo govorili o tome šta je XAML i za šta se koristi, ali kako kreirati grafički kontrolni element u XAML-u? Kao što ćemo videti u sledećem primeru, kreiranje grafičkog kontrolnog elementa u XAML-u nije ništa drugo do pisanje imena tog elementa u izlomljenim zagradama. Na primer, grafički kontrolni element dugme (eng. Button) izleda ovako:

<Button>

XAML tagovi moraju biti zatvoreni, bilo pisanjem zatvorenog taga ili kose crte na kraju otvorenog taga.

<Button></Button>

ili

<Button />

Većina grafičkih kontrolnih elemenata dozvoljava umetanje sadržaja između otvorenog i zatvorenog taga, što čini sadržaj kontrolnog elementa. Na primer, grafički kontrolni element dugme nam dozvoljava da između otvorenog i zatvorenog taga sami definišemo tekst koji se prikazuje na njemu.

<Button>A button</Button>

HTML nije osetljiv na promenu malih i velikih slova, ali XAML jeste, budući da ime grafičkog kontrolnog elementa mora da odgovara određenom tipu radnog okvira .NET. Ovo važi i za imena atributa, koja odgovaraju svojstvima kontrolnih elemenata. Uzmimo za primer dugme, čija ćemo svojstva definisati dodavanjem atributa u tag:

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

Postavljamo FontWeight svojstvo,koje nam daje tekst koji je boldovan,a zatim postavljamo Content svojstvo,koje je isto kao pisanje teksta između pocetnog i krajnjeg taga.Međutim,svi atributi kontrole mogu takođe biti definisani ovako,gde se oni pojavljuju kao deca tagova(child tags) glavne kontrole,koristeci Control-Dot-Property notaciju.

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

Rezultat je potpuno isti kao gore,dakle u ovom slucaju,radi se samo o sintaksi i nicemu drugom.Međutim dosta kontrola sadrzi sadrzaj drugaciji od teksta,na primer druge kontrole.Evo primera gde imamo tekst u razlicitim bojama na istom dugmetu koristeci nekoliko TextBlock kontrola unutar 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>

The Content property only allows for a single child element, so we use a WrapPanel to contain the differently colored blocks of text. Panels, like the WrapPanel, plays an important role in WPF and we will discuss them in much more details later on - for now, just consider them as containers for other controls.

The exact same result can be accomplished with the following markup, which is simply another way of writing the same:

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

Code vs. XAML

Nadamo se da gore navedeni primeri pokazuju kako je lako pisati u XAML,ali sa puno razlicitih nacina da uradimo to,i ako mislis da je gore naveden primer mnogo uređivanja da bi dobili dugme sa tekstom u razlicitim bojama,onda pokusajte uporediti to isto samo sada napisano 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 gore naveden primer je mogao biti napisan manje eksplicitno i koriscenjem vise sintaksnog secera,ali mislim da poenta i dalje stoji:XAML je prilicno kratak i koncizan za opisivanje interfejsa.