Шаблон Model-View-ViewModel (MVVM)

Помимо написания кода в коде программной части, Avalonia поддерживает использование шаблона Model-View-ViewModel (или MVVM). MVVM — это распространенный способ структурирования приложений пользовательского интерфейса, который отделяет логику представления от логики приложения таким образом, что ваши приложения становятся пригодными для модульного тестирования.

MVVM опирается на возможности привязки Avalonia для разделения вашего приложения на уровень View, который отображает стандартные окна и элементы управления Avalonia, и уровень ViewModel, который определяет функциональность приложения независимо от самого Avalonia.

В следующем примере показан код из предыдущего примера, реализованный с использованием шаблона MVVM:

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 Content="{Binding ButtonText}" Command="{Binding ButtonClicked}"/>

</Window>

C#

using System.ComponentModel;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;

namespace AvaloniaApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new MainWindowViewModel();
        }
    }

    public class MainWindowViewModel : INotifyPropertyChanged
    {
        string buttonText = "Click Me!";

        public string ButtonText
        {
            get => buttonText;
            set 
            {
                buttonText = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ButtonText)));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public void ButtonClicked() => ButtonText = "Hello, Avalonia!";
    }
}

В этом примере код программной части присваивает свойство DataContext окна экземпляру MainWindowViewModel. Затем XAML использует Avalonia {Binding} для привязки свойства Content кнопки к свойству ButtonText в MainWindowViewModel. Он также связывает свойство Command кнопки с методом ButtonClicked в MainWindowViewModel.

Когда кнопка нажата, она вызывает свою команду, вызывая связанный метод MainWindowViewModel.ButtonClicked. Затем этот метод устанавливает свойство ButtonText, которое вызывает событие INotifyPropertyChanged.PropertyChanged, в результате чего Button повторно считывает связанное значение и обновляет пользовательский интерфейс.