TOC

This article is currently in the process of being translated into Serbian (~36% done).

XAML:

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

We set the FontWeight property, giving us bold text, and then we set the Content property, which is the same as writing the text between the start and end tag. However, all attributes of a control may also be defined like this, where they appear as child tags of the main control, using the Control-Dot-Property notation:

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

The result is exactly the same as above, so in this case, it's all about syntax and nothing else. However, a lot of controls allow content other than text, for instance other controls. Here's an example where we have text in different colors on the same button by using several TextBlock controls inside of the 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

Hopefully the above examples show you that XAML is pretty easy to write, but with a lot of different ways of doing it, and if you think that the above example is a lot of markup to get a button with text in different colors, then try comparing it to doing the exact same thing in 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);

Of course the above example could be written less explicitly and using more syntactical sugar, but I think the point still stands: XAML is pretty short and concise for describing interfaces.