Документация по Avalonia UI
< Все темы
Печать

Создание представления

Давайте сначала создадим представление для отображения списка элементов TODO вместе с кнопкой для добавления нового элемента.

Поскольку это первое руководство, мы собираемся сначала просто заполнить представление некоторыми жестко запрограммированными данными. В последующих шагах мы будем использовать шаблон MVVM для заполнения этого представления.

Наше представление будет UserControl.

Создайте пользовательский элемент управления

Мы собираемся создать UserControl из шаблона. Следуйте инструкциям ниже:

Visual Studio

  1. Щелкните правой кнопкой мыши на папке Views вашего проекта в обозревателе решений.
  2. Выберите пункт меню Добавить -> Создать элемент
  3. В появившемся диалоговом окне перейдите в раздел «Avalonia» в дереве категорий.
  4. Выберите «User Control (Avalonia)».
  5. Введите TodoListView в качестве «Имени»
  6. Нажмите кнопку «Добавить»

.NET Core CLI

Запустите эту команду из корневого каталога вашего проекта (каталог, содержащий «Program.cs» и каталог «Views»):

dotnet new avalonia.usercontrol -o Views -n TodoListView --namespace Todo.Views

Пользовательский элемент управления

Шаблон должен создать файл XAML со следующим содержимым в каталоге Views ,  рядом с MainWindow.axaml

<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="800" d:DesignHeight="450"
             x:Class="Todo.Views.TodoListView">
    Welcome to Avalonia!
</UserControl>

Рядом с XAML вы также найдете файл TodoListView.axaml.cs, содержащий код программной части для представления (в Visual Studio он вложен в файл XAML, поэтому щелкните расширитель рядом с файлом XAML в обозревателе решений, чтобы увидеть его) :

using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;

namespace Todo.Views
{
    public partial class TodoListView : UserControl
    {
        public TodoListView()
        {
            InitializeComponent();
        }
    }
}

Мы пока не будем касаться кода программной части, но обратите внимание, что класс называется TodoListView и находится в пространстве имен Todo.Views.

Отредактируйте пользовательский элемент управления

Отредактируйте содержимое Views/TodoListView.axaml, чтобы оно содержало следующее:

<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="200" d:DesignHeight="400"
             x:Class="Todo.Views.TodoListView">
  <DockPanel>
    <Button DockPanel.Dock="Bottom"
            HorizontalAlignment="Center">
        Add an item
    </Button>
    <StackPanel>
      <CheckBox Margin="4">Walk the dog</CheckBox>
      <CheckBox Margin="4">Buy some milk</CheckBox>
    </StackPanel>
  </DockPanel>
</UserControl>

Если вы используете расширение Visual Studio, вы должны увидеть содержимое элемента управления, отображаемое в средстве предварительного просмотра после завершения сборки:

Что все это значит?

Давайте посмотрим на код, который мы только что ввели, строка за строкой:

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

Как и следовало ожидать, корневым элементом в XAML является UserControl. Далее следует куча объявлений xmlns. Каждое из них объявляет пространство имен XML, но наиболее важным является первое: xmlns="https://github.com/avaloniaui" — оно объявляет, что XAML в файле содержит XAML Avalonia; без этой записи ничего не будет работать.

Следующее пространство имен XML — xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml". Это используется для импорта функций XAML, не относящихся к Avalonia. Мы увидим это в использовании позже.

Следующие два пространства имен используются для  информации, специфичной в режиме разработки:

mc:Ignorable="d" d:DesignWidth="200" d:DesignHeight="400"

mc:Ignorable="d" сообщает механизму XAML, что записи, начинающиеся с d:, можно игнорировать, и вы тоже можете игнорировать их!

Атрибуты d:DesignWidth="200" и d:DesignHeight="400" указывают конструктору XAML отображать содержимое размером 200×400 пикселей. Они игнорируются во время выполнения.

x:Class="Todo.Views.TodoListView"

Эта строка сообщает обработчику XAML, где можно найти класс, сопровождающий XAML. Это полное имя класса. Обратите внимание, что этот атрибут имеет префикс x: — это относится к записи xmlns:x, которую мы видели ранее.

Хорошо, этот шаблон в сторону! Теперь о сути кода:

<DockPanel>

Сначала мы добавляем DockPanel в качестве дочернего элемента UserControl. Пользовательский элемент управления может содержать только один дочерний элемент, поэтому часто дочерний элемент является одним из элементов управления панели Avalonia. Панельные элементы управления (Panel) уникальны тем, что могут иметь несколько дочерних элементов.

DockPanel — это тип панели, элементы управления которой расположены сверху, снизу, слева и справа, а оставшееся пространство посередине занимает один элемент управления.

<Button DockPanel.Dock="Bottom" HorizontalAlignment="Center">Add an item</Button>

Теперь мы объявляем кнопку, которая появляется в нижней части представления. Атрибут DockPanel.Dock сообщает содержащей DockPanel, что мы хотим, чтобы кнопка отображалась внизу. HorizontalAlignment центрирует кнопку посередине родителя. В качестве содержимого элемента задаем текст кнопки: "Add an item" («Добавить элемент»).

<StackPanel>

Затем мы добавляем еще одну панель: StackPanel. StackPanel размещает свои дочерние элементы управления — сюрприз — в стеке. По умолчанию он размещает элементы управления вертикально, но вы также можете расположить элементы управления горизонтально, установив свойство Orientation, например <StackPanel Orientation="Horizontal">

Поскольку это последний дочерний элемент в DockPanel, он заполнит оставшееся пространство в центре элемента управления.

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

Наконец, мы добавляем два элемента управления CheckBox для представления элементов TODO. Мы также даем элементам управления отступ, чтобы немного разделить их визуально.

Отображение представления в окне

Чтобы увидеть только что созданное представление, нам нужно добавить его в главное окно приложения. Откройте файл Views/MainWindow.axaml и отредактируйте его следующим образом:

Views/MainWindow.axaml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:views="clr-namespace:Todo.Views"
        x:Class="Todo.Views.MainWindow"
        Icon="/Assets/avalonia-logo.ico"
        Width="200" Height="300"
        Title="Avalonia Todo">
  <views:TodoListView/>
</Window>

Многое здесь похоже на разметку, которую мы уже видели, так что давайте просто посмотрим на интересные части:

xmlns:views="clr-namespace:Todo.Views"

Мы хотим отобразить только что созданный элемент управления TodoListView, который находится в пространстве имен Todo.Views C#. Здесь мы сопоставляем пространство имен Todo.Views с пространством имен представлений XML. Любой элемент управления, не являющийся основным элементом управления Avalonia, обычно нуждается в этом типе сопоставления, чтобы механизм XAML мог найти элемент управления.

<views:TodoListView/>

Используя пространство имен XML, которое мы только что объявили, мы поместим элемент управления TodoListView в качестве содержимого нашего окна.

Запустите приложение

Если вы сейчас запустите приложение (нажав F5 в Visual Studio или выполнив dotnet run в .NET Core), вы должны увидеть, что приложение работает во всей красе:

Оглавление