Создание представления
Давайте сначала создадим представление для отображения списка элементов TODO вместе с кнопкой для добавления нового элемента.
Поскольку это первое руководство, мы собираемся сначала просто заполнить представление некоторыми жестко запрограммированными данными. В последующих шагах мы будем использовать шаблон MVVM для заполнения этого представления.
Наше представление будет UserControl
.
Создайте пользовательский элемент управления
Мы собираемся создать UserControl
из шаблона. Следуйте инструкциям ниже:
Visual Studio
- Щелкните правой кнопкой мыши на папке
Views
вашего проекта в обозревателе решений. - Выберите пункт меню
Добавить -> Создать элемент
- В появившемся диалоговом окне перейдите в раздел «Avalonia» в дереве категорий.
- Выберите «User Control (Avalonia)».
- Введите TodoListView в качестве «Имени»
- Нажмите кнопку «Добавить»
.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), вы должны увидеть, что приложение работает во всей красе: