Вступ та Налаштування Avalonia UI

Вступ: Навіщо Нам Потрібен Ще Один UI Framework?

Уявіть ситуацію: ви створили чудовий застосунок для Windows, але тепер вам потрібно запустити його на macOS, Linux, а можливо навіть на мобільних платформах або у веб-браузері. Традиційний шлях вимагав би повного переписування інтерфейсу для кожної платформи. Саме цю проблему і вирішує Avalonia UI (Avalonia User Interface) — сучасний кросплатформний UI framework для .NET.

Еволюція Desktop UI у .NET Екосистемі

Щоб зрозуміти місце Avalonia в екосистемі .NET, розгляньмо історичний контекст:

timeline
    title Еволюція UI Frameworks у .NET
    2002 : Windows Forms
         : Перший UI framework для .NET
         : Тільки Windows
    2006 : WPF (Windows Presentation Foundation)
         : XAML-based декларативний UI
         : Потужна графіка через DirectX
         : Тільки Windows
    2011 : Xamarin.Forms
         : Кросплатформний Mobile UI
         : Native controls wrapping
    2020 : .NET MAUI
         : Еволюція Xamarin.Forms
         : Desktop + Mobile
         : Обмежена платформна підтримка
    2016-2024 : Avalonia UI
              : Справжня кросплатформність
              : Desktop, Mobile, Web, Embedded
              : Власний рушій рендерингу
              : Community-driven

Кожен з цих frameworks мав свої переваги та обмеження. Avalonia UI вирішив ключову проблему: як створити один інтерфейс, який працюватиме всюди з консистентною поведінкою.

Мотивація: "Write Once, Run Anywhere" Для UI

"Чому ми не можемо написати UI один раз і запустити його на всіх платформах?"

Саме це питання стояло перед розробниками Avalonia. Відповіддю став framework, який:

• Не залежить від нативних контролів операційної системи
• Малює UI самостійно використовуючи SkiaSharp (потужну 2D графічну бібліотеку)
• Надає консистентний look & feel на всіх платформах
• Дозволяє кастомізацію на рівні, недосяжному для систем з нативними контролями

Цілі Цього Розділу

Після завершення цього розділу ви зможете:

1. ✅ Розуміти архітектуру Avalonia та як вона працює "під капотом"
2. ✅ Пояснити відмінності між Avalonia, WPF та MAUI
3. ✅ Налаштувати середовище розробки для Avalonia
4. ✅ Створити та запустити свій перший Avalonia застосунок
5. ✅ Розуміти життєвий цикл Avalonia застосунку
6. ✅ Використовувати Live Preview для швидкої розробки

Фундаментальні Концепції

Що Таке Avalonia UI?

Avalonia UI — це безкоштовний, відкритий (MIT ліцензія) та кросплатформний UI framework для .NET, який дозволяє створювати графічні застосунки з використанням XAML (eXtensible Application Markup Language) та C#.

Ключові характеристики:

Кросплатформна Природа

На відміну від інших frameworks, Avalonia підтримує найширший спектр платформ:

Порівняння з Іншими Frameworks

Розгляньмо детальне порівняння Avalonia з іншими популярними UI frameworks:

XAML-Based UI vs Code-Based UI

Avalonia підтримує два підходи до створення інтерфейсу:

1. XAML-Based (Декларативний підхід) — Рекомендований

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="MyApp.MainWindow"
        Title="Hello Avalonia"
        Width="400" Height="300">

    <StackPanel Margin="20">
        <TextBlock Text="Введіть ваше ім'я:" />
        <TextBox x:Name="NameTextBox" Margin="0,10" />
        <Button Content="Привітати" Click="OnGreetClick" />
        <TextBlock x:Name="GreetingText" FontSize="18" Foreground="Blue" />
    </StackPanel>

</Window>

Переваги XAML:

• ✅ Візуальна структура UI зрозуміла з першого погляду
• ✅ Підтримка Live Preview в IDE (миттєвий перегляд змін)
• ✅ Separation of Concerns (розділення UI і логіки)
• ✅ Інтеграція з Data Binding та MVVM
• ✅ Designer tools (візуальне редагування)

2. Code-Based (Імперативний підхід)

public partial class MainWindow : Window
{
    public MainWindow()
    {
        Width = 400;
        Height = 300;
        Title = "Hello Avalonia";

        var nameTextBox = new TextBox { Margin = new Thickness(0, 10) };
        var greetingText = new TextBlock { FontSize = 18, Foreground = Brushes.Blue };

        var button = new Button { Content = "Привітати" };
        button.Click += (s, e) =>
        {
            greetingText.Text = $"Привіт, {nameTextBox.Text}!";
        };

        var stack = new StackPanel
        {
            Margin = new Thickness(20),
            Children =
            {
                new TextBlock { Text = "Введіть ваше ім'я:" },
                nameTextBox,
                button,
                greetingText
            }
        };

        Content = stack;
    }
}

Переваги Code-Based:

• ✅ Повний контроль через C#
• ✅ Легше для програмістів без досвіду з XAML
• ✅ Динамічна генерація UI в runtime
• ✅ Краща підтримка IntelliSense

MVVM Pattern як Основа Архітектури

MVVM (Model-View-ViewModel) — це рекомендований архітектурний патерн для Avalonia застосунків.

graph LR
    View[View<br/>XAML + Code-Behind]
    ViewModel[ViewModel<br/>Логіка презентації]
    Model[Model<br/>Бізнес-логіка + Дані]

    View -->|Data Binding| ViewModel
    ViewModel -->|Commands + Properties| View
    ViewModel -->|Використовує| Model
    Model -->|Notification| ViewModel

    style View fill:#3b82f6,stroke:#1d4ed8,color:#ffffff
    style ViewModel fill:#f59e0b,stroke:#b45309,color:#ffffff
    style Model fill:#64748b,stroke:#334155,color:#ffffff

Компоненти MVVM:

• Model — бізнес-логіка, доступ до даних, entities
• View — XAML розмітка, візуальне представлення
• ViewModel — "посередник" між View та Model, містить UI логіку

Чому MVVM важливий для Avalonia?

1. Data Binding — автоматична синхронізація даних між View та ViewModel
2. Testability — ViewModel легко тестувати без UI
3. Separation of Concerns — кожен компонент має свою відповідальність
4. Designer Support — можна передивлятись UI з mock даними

Архітектура та Механіка

Тепер, коли ми розуміємо "навіщо" потрібен Avalonia, давайте розберемо "як" він працює під капотом.

Як Працює Avalonia: Архітектурний Огляд

graph TB
    App[Avalonia Application]
    AppBuilder[AppBuilder<br/>Конфігурація]
    Platform[Platform Backend<br/>Win32/Cocoa/X11/etc]
    Skia[SkiaSharp<br/>2D Rendering Engine]
    Controls[UI Controls<br/>Button, TextBox, etc]
    Layout[Layout Engine<br/>Measure & Arrange]
    Styling[Styling System<br/>Styles & Themes]
    Input[Input Manager<br/>Mouse, Keyboard, Touch]

    App -->|Налаштування| AppBuilder
    AppBuilder -->|Обирає| Platform
    Platform -->|Створює| Window[Native Window]
    Window -->|Надає Surface| Skia
    Controls -->|Розміщення| Layout
    Layout -->|Візуалізація| Skia
    Styling -->|Застосовує стилі| Controls
    Input -->|Обробка подій| Controls

    style App fill:#3b82f6,stroke:#1d4ed8,color:#ffffff
    style Skia fill:#f59e0b,stroke:#b45309,color:#ffffff
    style Platform fill:#64748b,stroke:#334155,color:#ffffff

Ключові компоненти архітектури:

1. SkiaSharp — Серце Рендерингу

SkiaSharp — це .NET обгортка навколо Skia (2D графічної бібліотеки від Google, яка використовується в Chrome, Android, Flutter).

Чому Skia?

• ✅ Кросплатформна — працює однаково на всіх ОС
• ✅ Швидка — hardware-accelerated рендеринг (GPU)
• ✅ Потужна — підтримка векторної графіки, складних ефектів, анімацій
• ✅ Перевірена — використовується мільярдами пристроїв через Android

Як це працює:

1. Avalonia описує UI через controls (Button, TextBox, etc.)
2. Layout Engine обчислює позиції та розміри
3. Rendering System перетворює controls у графічні примітиви (rectangles, paths, text)
4. SkiaSharp малює ці примітиви на canvas
5. Canvas відображається у нативному вікні ОС

// Це спрощена ілюстрація того, як Avalonia малює Button

public class Button : Control
{
    public override void Render(DrawingContext context)
    {
        // 1. Малюємо фон кнопки
        context.DrawRectangle(
            brush: Background,
            pen: new Pen(BorderBrush),
            rect: new Rect(0, 0, Width, Height),
            radiusX: CornerRadius.TopLeft,
            radiusY: CornerRadius.TopRight
        );

        // 2. Малюємо текст
        context.DrawText(
            foreground: Foreground,
            origin: new Point(Padding.Left, Padding.Top),
            text: Content?.ToString()
        );
    }
}

// SkiaSharp під капотом перетворює це в команди для GPU

// Приклад прямого використання Skia (рідко потрібно в Avalonia)

using SkiaSharp;

public void DrawCustomShape(SKCanvas canvas)
{
    using var paint = new SKPaint
    {
        Color = SKColors.Blue,
        IsAntialias = true,
        Style = SKPaintStyle.Fill
    };

    // Малюємо коло
    canvas.DrawCircle(x: 100, y: 100, radius: 50, paint);
}

2. Windowing Protocol — Абстракція Платформ

Avalonia використовує Platform Abstraction Layer для роботи з нативними вікнами різних ОС:

Як це працює:

// Avalonia визначає інтерфейс для вікна
public interface IWindowImpl
{
    void Show();
    void SetTitle(string title);
    void Resize(Size size);
}

// Кожна платформа надає свою реалізацію
public class Win32WindowImpl : IWindowImpl
{
    private IntPtr _hwnd; // Windows window handle

    public void SetTitle(string title)
    {
        // Викликаємо Win32 API
        SetWindowText(_hwnd, title);
    }
}

public class CocoaWindowImpl : IWindowImpl
{
    private NSWindow _nsWindow; // macOS window

    public void SetTitle(string title)
    {
        // Викликаємо Cocoa API
        _nsWindow.Title = title;
    }
}

// Ваш код працює з абстракцією, не знаючи про платформу
window.Title = "My App"; // Працює на всіх ОС!

3. Visual Tree та Logical Tree

Avalonia (як і WPF) має дві ієрархії елементів:

Logical Tree — структура ваших контролів, як ви описали в XAML:

<Window>
    <StackPanel>
        <Button />
        <TextBox />
    </StackPanel>
</Window>

Visual Tree — фактична структура рендерингу (включає внутрішні елементи контролів):

Window
└── Border (частина Window template)
    └── ContentPresenter
        └── StackPanel
            ├── Button
            │   └── ContentPresenter (внутрішня частина Button)
            │       └── TextBlock (Content кнопки)
            └── TextBox
                ├── Border (фон TextBox)
                └── TextPresenter (текстовий рендерер)

graph TD
    Window[Window<br/>Logical + Visual]
    Border[Border<br/>Тільки Visual]
    ContentPresenter[ContentPresenter<br/>Тільки Visual]
    StackPanel[StackPanel<br/>Logical + Visual]
    Button[Button<br/>Logical + Visual]
    ButtonContent[ContentPresenter<br/>Тільки Visual]
    TextBox[TextBox<br/>Logical + Visual]

    Window --> Border
    Border --> ContentPresenter
    ContentPresenter --> StackPanel
    StackPanel --> Button
    Button --> ButtonContent
    StackPanel --> TextBox

    style Window fill:#3b82f6,stroke:#1d4ed8,color:#ffffff
    style StackPanel fill:#3b82f6,stroke:#1d4ed8,color:#ffffff
    style Button fill:#3b82f6,stroke:#1d4ed8,color:#ffffff
    style TextBox fill:#3b82f6,stroke:#1d4ed8,color:#ffffff
    style Border fill:#64748b,stroke:#334155,color:#ffffff
    style ContentPresenter fill:#64748b,stroke:#334155,color:#ffffff
    style ButtonContent fill:#64748b,stroke:#334155,color:#ffffff

Навіщо дві ієрархії?

• Logical Tree — для вашої логіки (navigation, data binding)
• Visual Tree — для рендерингу та стилізації (themes, animations)

Налаштування Середовища Розробки

Перед тим як створити перший Avalonia застосунок, потрібно налаштувати середовище розробки.

Вимоги до Системи

Встановлення .NET SDK

Якщо у вас ще не встановлений .NET SDK:

brew install dotnet-sdk

wget https://dot.net/v1/dotnet-install.sh
chmod +x dotnet-install.sh
sudo ./dotnet-install.sh --channel 8.0

sudo apt-get update
sudo apt-get install -y dotnet-sdk-8.0

::

Перевірка Встановлення

Відкрийте термінал/командний рядок та виконайте:

dotnet --version

Ви маєте побачити версію SDK (наприклад, 8.0.100).

::

Встановлення Avalonia Templates

Avalonia надає офіційні шаблони проєктів через .NET CLI.

dotnet new install Avalonia.Templates

Що це робить:

• Додає шаблони Avalonia до dotnet new
• Дозволяє створювати проєкти з командного рядка
• Оновлює існуючі шаблони (якщо вже встановлені)

Перевірка встановлення:

dotnet new list | grep -i avalonia

Ви маєте побачити список доступних шаблонів:

avalonia.app              Avalonia .NET App
avalonia.mvvm             Avalonia .NET MVVM App
avalonia.xplat            Avalonia Cross-Platform Application
avalonia.usercontrol      Avalonia UserControl
avalonia.window           Avalonia Window
avalonia.resource         Avalonia Resource Dictionary
avalonia.styles           Avalonia Styles

Налаштування IDE

Avalonia підтримує три основні IDE. Розгляньмо кожен:

::

code --install-extension ms-dotnettools.csdevkit
code --install-extension AvaloniaTeam.vscode-avalonia

::

Перевірка Встановлення

Давайте переконаємось, що все налаштовано правильно:

# 1. Перевірка .NET SDK
dotnet --version

# 2. Перевірка Avalonia Templates
dotnet new list | grep avalonia

# 3. Створення тестового проєкту
dotnet new avalonia.mvvm -o AvaloniaTest
cd AvaloniaTest

# 4. Запуск проєкту
dotnet run

Якщо все налаштовано коректно, має відкритися вікно з написом "Welcome to Avalonia!".

Створення Першого Проєкту

Тепер, коли середовище налаштоване, створимо наш перший Avalonia застосунок та детально розберемо його структуру.

Використання dotnet new avalonia

Avalonia надає кілька шаблонів. Почнемо з MVVM template, оскільки він демонструє рекомендовану архітектуру.

dotnet new avalonia.mvvm -o MyFirstAvaloniaApp

cd MyFirstAvaloniaApp

rider .

code .

::

::

Структура Створеного Проєкту

Давайте детально розберемо структуру згенерованого проєкту:

Розгляньмо кожен ключовий файл детально:

1. Program.cs — Точка Входу

Це стандартна точка входу для будь-якого .NET застосунку.

using Avalonia;
using System;

namespace MyFirstAvaloniaApp;

class Program
{
    // Initialization code. Don't use any Avalonia, third-party APIs or any
    // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
    // yet and stuff might break.
    [STAThread]
    public static void Main(string[] args) => BuildAvaloniaApp()
        .StartWithClassicDesktopLifetime(args);

    // Avalonia configuration, don't remove; also used by visual designer.
    public static AppBuilder BuildAvaloniaApp()
        => AppBuilder.Configure<App>()
            .UsePlatformDetect()
            .WithInterFont()
            .LogToTrace()
            .UseReactiveUI();
}

Аналіз коду:

• Main: Викликає BuildAvaloniaApp() і стартує життєвий цикл ClassicDesktopLifetime (стандартний для Desktop).
• BuildAvaloniaApp:
  • Configure<App>(): Вказує, який клас Application використовувати.
  • UsePlatformDetect(): Магія, яка визначає ОС (Windows, Linux, macOS) і завантажує відповідні підсистеми.
  • WithInterFont(): Вмикає вбудований кросплатформний шрифт (щоб текст виглядав однаково всюди).
  • LogToTrace(): Логування помилок у вікно Output IDE.
  • UseReactiveUI(): Підключає ReactiveUI (оскільки ми обрали MVVM шаблон).

2. App.axaml та App.axaml.cs — Глобальна Конфігурація

App.axaml (XAML): Тут визначаються глобальні стилі та ресурси.

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MyFirstAvaloniaApp.App"
             RequestedThemeVariant="Default">
             <!-- "Default" detected from system theme (Light or Dark) -->

    <Application.Styles>
        <FluentTheme />
    </Application.Styles>
</Application>

• FluentTheme: Вмикає сучасний стиль (схожий на Windows 11), який чудово виглядає на всіх платформах.
• RequestedThemeVariant: Може бути Default (системна), Light або Dark.

App.axaml.cs (Code-behind): Тут відбувається ініціалізація.

public override void OnFrameworkInitializationCompleted()
{
    if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
    {
        // Desktop startup logic
        desktop.MainWindow = new MainWindow
        {
            DataContext = new MainWindowViewModel(),
        };
    }
    // Mobile/Plugin startup logic (optional)
    /*
    else if (ApplicationLifetime is ISingleViewApplicationLifetime singleViewPlatform)
    {
        singleViewPlatform.MainView = new MainView
        {
            DataContext = new MainViewModel()
        };
    }
    */

    base.OnFrameworkInitializationCompleted();
}

Важливий момент: OnFrameworkInitializationCompleted — це місце, де ви вирішуєте, що показати користувачу.

• Якщо це Desktop (IClassicDesktopStyleApplicationLifetime) — ми створюємо MainWindow.
• Ми також встановлюємо DataContext (зв'язуємо ViewModel з View).

3. ViewLocator.cs — Магія MVVM

Цей клас допомагає Avalonia знаходити View для кожної ViewModel.

// Якщо у вас є MyViewModel, ViewLocator шукатиме MyView
// Це дозволяє писати у XAML просто <ContentControl Content="{Binding CurrentViewModel}" />

Application Lifecycle (Життєвий Цикл)

Розуміння життєвого циклу критично важливе для уникнення помилок при старті та закритті.

Схема Запуску

sequenceDiagram
    participant Program
    participant AppBuilder
    participant App
    participant Lifetime
    participant Window

    Program->>AppBuilder: BuildAvaloniaApp()
    Note right of AppBuilder: Configure<App>(), UsePlatformDetect()
    Program->>Lifetime: StartWithClassicDesktopLifetime()

    Lifetime->>App: Initialize()
    Note right of App: Load XAML styles

    Lifetime->>App: OnFrameworkInitializationCompleted()

    App->>Window: new MainWindow()
    App->>Window: Set DataContext
    App->>Lifetime: desktop.MainWindow = window

    Lifetime->>Window: Show()

    Note over Program, Window: Application Running

    User->>Window: Close()
    Lifetime->>Program: Main() returns

Application Lifetimes

Avalonia підтримує різні моделі життя, щоб працювати і на Desktop (де є вікна), і на Mobile (де є тільки один екран/View).

Перший Запуск та Live Preview

Прийшов час побачити результат!

1. Натисніть Run (або F5) у вашій IDE.
2. Зачекайте компіляції.
3. Вуаля! Ви маєте працюючий кросплатформний застосунок.

Використання Hot Reload (Live Preview)

Одна з найсильніших сторін Avalonia — можливість бачити зміни UI без перезапуску, прямо під час написання коду.

<TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

<TextBlock Text="Hello from Hot Reload!" Foreground="Red" FontSize="30" ... />

"Hello, Avalonia!" — Перша Модифікація

Давайте перетворимо стандартний шаблон на щось інтерактивне. Ми створимо простий лічильник кліків, щоб зрозуміти, як працює зв'язок між UI та кодом.

Крок 1: Зміна View (Views/MainWindow.axaml)

Ми змінимо XAML, додавши кнопку і текстовий блок для відображення лічильника. Зверніть увагу на використання Binding.

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:MyFirstAvaloniaApp.ViewModels"
        x:Class="MyFirstAvaloniaApp.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="MyFirstAvaloniaApp">

    <Design.DataContext>
        <vm:MainWindowViewModel/>
    </Design.DataContext>

    <!-- StackPanel розміщує елементи один під одним -->
    <StackPanel Margin="30" Spacing="20" HorizontalAlignment="Center" VerticalAlignment="Center">

        <TextBlock Text="{Binding Greeting}"
                   HorizontalAlignment="Center"
                   FontSize="24"/>

        <!-- Прив'язка до властивості CountString -->
        <TextBlock Text="{Binding CountString}"
                   HorizontalAlignment="Center"
                   FontSize="40"
                   FontWeight="Bold"
                   Foreground="#6366f1"/>

        <!-- Прив'язка команди до кнопки -->
        <Button Command="{Binding IncrementCommand}"
                Content="Натисни мене!"
                HorizontalAlignment="Center"
                Padding="20,10"
                FontSize="16"/>

    </StackPanel>

</Window>

Аналіз змін:

• x:DataType="vm:MainWindowViewModel": Ця директива вмикає Compiled Bindings. Це критично важливо, бо дозволяє IDE перевіряти назви властивостей (наприклад, Greeting) під час компіляції, а не падати в runtime, якщо ви зробили одруківку.
• {Binding CountString}: Каже Avalonia взяти значення з властивості CountString у ViewModel.
• Command="{Binding IncrementCommand}": Каже виконувати метод Increment при кліку. Це "чистіший" спосіб, ніж Click="Button_OnClick", бо логіка залишається у ViewModel.

Крок 2: Зміна ViewModel (ViewModels/MainWindowViewModel.cs)

Тепер додамо логіку в ViewModel. Оскільки шаблон використовує пакет CommunityToolkit.Mvvm, ми можемо писати дуже лаконічний код.

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace MyFirstAvaloniaApp.ViewModels;

public partial class MainWindowViewModel : ViewModelBase
{
    // [ObservableProperty] автоматично генерує публічну властивість Greeting
    // та реалізує сповіщення про зміни (INotifyPropertyChanged).
    // Поле _greeting стає властивістю Greeting.
    [ObservableProperty]
    private string _greeting = "Welcome to Avalonia!";

    // Лічильник. Коли він змінюється, ми також хочемо оновити рядок CountString.
    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(CountString))]
    private int _count = 0;

    // Властивість, яка залежить від _count.
    // Завдяки атрибуту вище, View дізнається, що CountString змінився, коли змінюється _count.
    public string CountString => $"Кліків: {Count}";

    // [RelayCommand] перетворює цей метод на ICommand, який можна прив'язати до кнопки.
    [RelayCommand]
    private void Increment()
    {
        Count++;
    }
}

Крок 3: Запуск та Перевірка

Запустіть застосунок. Тепер при натисканні на кнопку число має збільшуватись.

Best Practices для Початківців

Щоб ваш код залишався чистим та професійним, дотримуйтесь цих правил з самого початку:

1. Структура Проєкту

Тримайте файли організовано:

• Views/: Тільки .axaml та .axaml.cs файли.
• ViewModels/: Тільки класи ViewModel.
• Models/: Бізнес-логіка та дані.
• Styles/: Глобальні стилі.
• Services/: Сервіси для доступу до даних, API тощо.

2. ViewLocator

У шаблоні проєкту ви могли помітити файл ViewLocator.cs. Це механізм, який дозволяє Avalonia автоматично знаходити View для ViewModel. Наприклад, якщо у вас є список об'єктів ProductViewModel, ви можете просто відобразити його, а Avalonia сама підставить ProductView для кожного елементу.

public class ViewLocator : IDataTemplate
{
    public Control Build(object data)
    {
        var name = data.GetType().FullName!.Replace("ViewModel", "View");
        var type = Type.GetType(name);
        return (Control)Activator.CreateInstance(type)!;
    }
    // ...
}

3. Уникайте Code-Behind

Намагайтеся не писати логіку в файлах .axaml.cs.

• ❌ Погано: Змінювати TextBlock.Text в Button_Click handler.
• ✅ Добре: Змінювати властивість у ViewModel, до якої прив'язаний TextBlock.

4. Стилізація

Не пишіть стилі (кольори, шрифти) прямо в тегах Button чи TextBlock, якщо вони повторюються. Виносьте їх у <Window.Styles> або App.axaml.

Troubleshooting та Поширені Проблеми

Навіть у професіоналів бувають проблеми. Ось як вирішити найпоширеніші з них на старті.

Практичні Завдання

Закріпіть отримані знання, виконавши завдання. Не бійтеся експериментувати!

Рівень 1: "Кольоровий Привіт" (Легкий)

Мета: Робота з Binding та простими Styles.

1. Створіть застосунок з полем вводу (TextBox) для імені.
2. Додайте кнопку "Змінити колір".
3. Нижче відобразіть текст "Привіт, Ім'я".
4. При натисканні кнопки, колір тексту має змінюватись на випадковий (червоний, зелений або синій).
   • Підказка: Створіть у ViewModel властивість Brush TextColor і прив'яжіть її до Foreground у TextBlock.

Рівень 2: "Список Справ" (Середній)

Мета: Робота з колекціями (ObservableCollection).

1. Створіть простий To-Do List.
2. Додайте TextBox для тексту завдання і кнопку "Додати".
3. Використовуйте ListBox (або ItemsControl) для відображення списку.
4. Прив'яжіть Items до ObservableCollection<string> у вашій ViewModel.
5. (Бонус) Додайте кнопку "Очистити все".

Рівень 3: "Навігатор" (Складний)

Мета: Розуміння підміни контенту (симуляція навігації).

1. Створіть дві окремі UserControl (Views): LoginView та HomeView.
2. У MainWindowViewModel створіть властивість ViewModelBase CurrentPage.
3. У MainWindow використовуйте <ContentControl Content="{Binding CurrentPage}" />.
4. Зробіть так, щоб при натисканні кнопки "Login" на першому екрані, CurrentPage змінювалась на HomeViewModel.
   • Підказка: Це демонструє силу ViewLocator.

Перевірка Знань

Перевірте, наскільки добре ви зрозуміли основи Avalonia UI.

Додаткові Ресурси

• Офіційна Документація: docs.avaloniaui.net — основне джерело істини.
• Avalonia GitHub: github.com/AvaloniaUI/Avalonia — вихідний код та Issues.
• Awesome Avalonia: github.com/AvaloniaCommunity/awesome-avalonia — добірка бібліотек.
• Telegram Форум: t.me/Avalonia — українська та міжнародна спільнота.

Тепер ви створили свій перший Avalonia застосунок! У наступному розділі ми заглибимось у XAML, Binding та Layouts детальніше.

👉 Перейти до наступної теми: 10.2. Core Concepts (Основні Концепції)