Основи XAML

В попередньому розділі ми поговорили про те, що таке мова XAML і для чого вона використовується. Але як створювати елементи керування в XAML? Як Ви побачите в наступному прикладі, створення елемента керування в XAML виглядає так само просто, як написання його імені, обгорнутого в кутові дужки. Наприклад, Кнопка виглядає наступним чином:

<Button>

Теги XAML повинні бути закритими, або за допомогою написання закриваючого тегу, або додавання слешу (косої риски) в кінець відкриваючого тегу:

<Button></Button>

Або

<Button />

Багато елементів керування дозволяють розміщувати вміст між відкриваючим і закриваючим тегами, що в результаті буде вмістом елемента керування. Наприклад, для Кнопки дозволено вказати текст між відкриваючим і закриваючим тегами:

<Button>A button</Button>

XAML, на відміну від HTML, є чутливим до регістру, тому що назва елемента керування має відповідати типу в .NET. Те саме стосується і назв атрибутів, які відповідають властивостям елементів. Нижче показано опис кнопки, для якої ми визначили декілька властивостей шляхом додавання атрибутів в тезі:

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

Ми задали властивість FrontWeight, яка дала нам жирний текст, а потім задали властивість Content, яка є аналогом написання тексту між відкриваючим і закриваючим тегами. Хоча, всі атрибути елементів керування можуть бути визначені як показано нижче, де вони виступають як дочірні теги основного елемента керування, використовуючи позначення "Елемент-Крапка-Властивість" (Control-Dot-Property):

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

Результат є такий самий, як у прикладі вище, в такому випадку це лише синтаксичне вподобання, і нічого більшого. Проте багато елементів керування підтримують вміст не тільки у формі тексту, але й, для прикладу, у формі інших елементів керування. Ось приклад, в якому ми маємо текст в різних кольорах на тій же кнопці. В даному випадку ми використали декілька елементів TextBlock всередині елемента "Кнопка" (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>

Властивість Content може мати всередині лише один дочірній елемент, саме тому ми використовували контейнер WrapPanel для різнокольорових блоків тексту. Панелі, такі як WrapPanel, відіграють важливу роль в WPF, і ми будемо обговорювати їх в деталях трохи пізніше, а зараз просто розглядайте їх як контейнери для інших елементів керування.

Такий самий результат можна досягти з допомогою наступної розмітки, яка є просто іншим варіантом написання того самого:

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

Код vs. XAML

Сподіваюся, вище наведені приклади показують Вам, що XAML є доволі простим для написання, але з різними способами описання тих самих елементів. Якщо Ви думаєте, що в прикладі наведеному вище, є дуже багато розмітки тільки для того, що отримати кнопку з різнокольоровим текстом, то попробуйте порівняти, як те саме можна зробити за допомогою 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);

Звичайно, приклад наведений вище міг бути написаний менш явно і з використанням "синтаксичного цукру", але я думаю, що висновок залишається таким самим: XAML є досить коротка і лаконічна мова для опису користувацького інтерфейсу.