Процесс программирования

Avalonia позволяет разрабатывать приложения с использованием языка разметки XAML и C# (или другого языка .NET) для кода. Обычно вы используете разметку XAML для реализации внешнего вида приложения, а код — для реализации его поведения.

Разметка

XAML — это язык разметки на основе XML, декларативно реализующий внешний вид приложения. Обычно вы используете его для создания окон и пользовательских элементов управления, а также для их заполнения элементами управления, фигурами и графикой. В следующем примере используется XAML для реализации внешнего вида окна, содержащего одну кнопку:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="AvaloniaApplication1.MainWindow"
        Title="Window with Button"
        Width="250" Height="100">

  <!-- Add button to window -->
  <Button Name="button">Click Me!</Button>

</Window>

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

Поскольку XAML основан на XML, создаваемый с его помощью пользовательский интерфейс собирается в виде иерархии вложенных элементов, известной как дерево элементов. Дерево элементов обеспечивает логичный и интуитивно понятный способ создания и управления пользовательскими интерфейсами.

На следующих изображениях показан пользовательский интерфейс, определенный XAML в предыдущем примере, работающем в Windows.

Код программной части

Основное поведение приложения заключается в реализации функций, которые реагируют на действия пользователя, включая обработку событий (например, нажатие меню, панели инструментов или кнопки) и вызов в ответ бизнес-логики и логики доступа к данным.

В Avalonia это поведение может быть реализовано в коде, связанном с разметкой. Этот тип кода известен как код программной части.

В следующем примере показана обновленная разметка из предыдущего примера и код программной части:

XAML

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="AvaloniaApplication1.MainWindow"
        Title="Window with Button"
        Width="250" Height="100">

  <!-- Add button to window -->
  <Button Name="button" Click="button_Click">Click Me!</Button>

</Window>

C#

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

namespace AvaloniaApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            // Generated with Avalonia.NameGenerator
            InitializeComponent();
        }

        public void button_Click(object sender, RoutedEventArgs e)
        {
            // Change button text when button is clicked.
            var button = (Button)sender;
            button.Content = "Hello, Avalonia!";
        }
    }
}

В этом примере код программной части реализует класс, производный от класса Window. Атрибут x:Class используется для связывания разметки с классом кода программной части. InitializeComponent вызывается из конструктора класса кода программной части для объединения пользовательского интерфейса, определенного в разметке, с классом кода программной части.

Вы могли заметить, что класс MainWindow объявлен как частичный, и нет видимой реализации InitializeComponent. Это связано с тем, что тело InitializeComponent было автоматически сгенерировано в частичном аналоге класса пакетом Avalonia.NameGenerator, который по умолчанию включен в шаблоны Avalonia.

Комбинация x:Class и InitializeComponent гарантирует, что ваша реализация правильно инициализируется всякий раз, когда она создается. Класс кода программной части также реализует обработчик события Click кнопки. При нажатии кнопки обработчик событий изменяет текст кнопки, устанавливая свойство в элементе управления Button.