Основы XAML

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

<Button>

Теги XAML должны закрываться либо с помощью добавления закрывающего тега, либо путем добавления слеша в конец "открывающего" тега:

<Button></Button>

Или

<Button />

Для многих элементов разрешено помещать контент между открывающими и закрывающими тегами, который будет являться содержимым элемента управления. Например для кнопки разрешено указывать текст между открывающим и закрывающим тегами:

<Button>A button</Button>

XAML, в отличие от HTML, чувствителен к регистру, так как название элемента управления должно соответствовать типу в .NET. Аналогично будет и с названиями атрибутов, которые соответствуют свойствам элементов. Ниже показано описание кнопки, для которой мы определили несколько свойств путем добавления атрибутов в теге:

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

Мы задали свойство FontWeight, которое вернуло нам жирный текст, и свойство 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 — достаточно лаконичный и ёмкий язык для описания пользовательских интерфейсов.