Изучение XAML

Наступило самое время взглянуть на сгенерированный шаблоном view код.

Начнем с корня элемента, в нем объявлены пространства имен и настройки:

 <UserControl 
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="250" d:DesignHeight="450"
    x:Class="ToDoList.Views.ToDoListView">

Корневой элемент в XAML-файле начинается с <UserControl и за ним объявляются несколько пространств имен XML xmlns, общих для Avalonia UI controls. Самое важное объявление, на которое стоит обратить внимание, указано первым:

<UserControl xmlns="https://github.com/avaloniaui" ... >

Оно указывает, что данный XAML-файл использует Avalonia UI XAML.

warning

Без данной строки, ваш проект Avalonia UI не будет работать!

Следующее пространство имен - это xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml". Оно используется для импорта Microsoft XAML, используемых Avalonia UI.

к сведению

Подробнее в документации Microsoft, см. здесь.

Оставшиеся два пространства имен, используются для взаимодействия в Avalonia UI между кодом и панелью предварительного просмотра.

<UserControl ...
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" ... > 

К примеру, рассмотрим изменение высоты и ширины control в предварительном просмотре, как вы уже делали ранее:

<UserControl ...
mc:Ignorable="d" d:DesignWidth="250" d:DesignHeight="450" ... >

Запись mc:Ignorable="d", указывает движку Avalonia UI XAML, что записи, начинающиеся с d:, надо пропускать при запуске.

Последняя строка, связывает XAML-файл с его code-behind классом. Обратите внимание, что здесь используется полное имя класса.

<UserControl ...
   x:Class="ToDoList.Views.ToDoListView">

Содержимое Control

В зоне содержимого user control указана dock panel:

<DockPanel>

к сведению

Подробнее о зонах макета, см. здесь.

user control может содержать только один-единственных дочерний control в своей зоне содержимого; По этой причине, вам почти всегда придется использовать panel controls из Avalonia UI, которые которые позволяют указывать внутри себя несколько control.

к сведению

Подробнее о panel controls, используемых в Avalonia UI, см. здесь.

В этом примере, вы используете panel control, называемую <DockPanel>. Данный тип панели, размещает дочерние элементы по краям своей зоны содержимого. Каждому дочернему элементу можно задать привязку: top, bottom, left или right. Она указывается в атрибуте DockPanel.Dock. В указанном ниже примере, кнопка притягивается к нижней части и растягивается по ширине, а ее текст центрируется.

<Button DockPanel.Dock="Bottom"
    HorizontalAlignment="Stretch"
    HorizontalContentAlignment="Center">Add Item</Button>

В dock panel должен быть хотя бы один control в зоне содержимого, который заполнит оставшееся место в зоне содержимого. Иначе он будет отображаться некорректно. Данный control не должен содержать атрибут DockPanel.Dock. Для заполнения свободного места, в руководстве используется stack panel:

<StackPanel>

Stack Panel размещает дочерние элементы друг за другом (по-умолчанию, вертикально). Вы можете указать горизонтальное расположение элементов в атрибуте Orientation. Вы будете часто использовать stack panel в Avalonia UI.

к сведению

Подробную информацию о Stack Panel, см. здесь.

Оставшийся XAML добавит захардкоженные элементы списка дел в виде флажков:

<CheckBox Margin="4">Walk the dog</CheckBox>
<CheckBox Margin="4">Buy some milk</CheckBox>

Обратите внимание, что для указанных выше элементов, указан атрибут margin. Он добавит пространства между элементами, что визуально разделит их.

к сведению

margin является одной из зон макета в control _Avalonia UI`. Подробнее о концепте зон макета, см. здесь.

На следующей страницу узнаете, как отображать созданную view в основном окне приложения.