Podstawy XAML

W poprzednim rozdziale omówiliśmy czym jest XAML i do czego go stosujemy. Jednak w jaki sposób tworzymy za jego pomocą kontrolki? Kolejny przykład pokaże tobie, że tworzenie kontrolek za pomocą XAML jest tak samo proste, jak napisanie ich nazwy i zamknięcie jej w ostrych nawiasach. Stworzenie np. przycisku wygląda tak:

<Button>

Znacznik XAML musi zostać zamknięty, albo poprzez odrębny, zamykający znacznik albo dodanie ukośnika na jego końcu, tuż przed nawiasem zamykającym:

<Button></Button>

Lub

<Button />

Wiele kontrolek zezwala na umieszczanie treści pomiędzy znacznikiem otwierającym a zamykającym. W ten sposób staje się ona zawartością samego znacznika. Dla przykładu, kontrolka przycisku zezwala na określenie napisu jaki ma się na nim wyświetlać, poprzez umieszczenie jego treści pomiędzy znacznikiem otwierającym i zamykającym:

<Button>A button</Button>

Język HTML nie jest "case-sensitive", czyli nie odróżnia dużych i małych liter w nazwach elementów języka, ale XAML już tak. Jest to podyktowane tym, że nazwa kontrolki musi odpowiadać typowi należącemu do .NET. To samo dotyczy nazw atrybutów, które odpowiadają właściwościom kontrolki. A tak wygląda kod przycisku z dodanymi do niego atrybutami:

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

Ustawienie właściwości FontWeight bold spowoduje pogrubiebie wyświetlanego na przycisku tekstu. Atrybutowi Content przypisujemy wartość odpowiadającą za napis wyświetlający się na przycisku. Efekt jest taki sam jakbyśmy nasz napis umieścili pomiędzy samymi znacznikami XAML tej kontrolki. To którą z metod wybierzemy nie ma żadnej różnicy. Możemy jednak dodatkowo wszystkie atrybuty kontrolki zdefiniować w postaci znaczników podrzędnych, opisywanej przez nas kontrolki macierzystej. W tym celu wykorzystujemy notację nazwaKontrolki.właściwość.

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

Rezultat pozostaje bez zmian. Także w tym przypadku różnica objawia się w zastosowanej przez nas składni i niczym innym. Jednakże wiele kontrolek zezwala na zawartośc inną niż tekst, np. inne kontrolki. W następnym przykładzie stworzymy dwukolorowy napis na przycisku, wykorzystując do tego kilka kontrolek TextBlock umieszczony wewnątrz kontrolki 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>

Z uwagi na fakt iż atrybut Content zezwala tylko na jeden element, korzystamy z panelu WrapPanel aby w jego zakresie umieścić bloki tekstu o różnych kolorach. Panele takie jak WrapPanel odgrywają ważną rolę w WPF i omówimy je sobie w szczegółach w dalszej części kursu. Póki co patrz na nie jak na kontenery służące do przechowywania innych kontrolek.

Taki sam rezultat możemy osiągnąć za pomocą składni zastosowanej poniżej. Jest to po prostu inny sposób na opisanie tego samego:

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

Kod kontra XAML

Mam nadzieję, że powyższe przykłady przedstawiły ci, w jak łatwy sposób można opisywać kontrolki za pomocą XAML. Oraz że ten sam rezultat można osiągnąć na wiele sposobów. Jeżeli jednak myślisz, że masz do czynienia z pisaniem sporej ilości kodu, porównaj to jak sprawa przedstawiała by się w przypadku, kiedy chciałbyś zrobić dokładnie to samo, jednak za pomocą kodu napisanego w 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);

Rzecz jasna powyższy kod można by zapisać z zastosowaniem mniej jawnej składni, oraz wyorzystując do tego całe dobrodziejstwo samego języka C#. Jednak według mnie powód dla którego XAML istnieje i czemu warto go stosować do opisywania interfejsów broni się sam. XAML jest zwięzły w swojej składni.