Avalonia - UI 1

Avalonia - це мультиплатформенний GUI фреймворк для .NET, який дозволяє розробляти крос-платформенні десктопні застосунки на базі XAML, подібно до WPF (Windows Presentation Foundation). Головна мета Avalonia - це надати розробникам можливість створювати десктопні додатки, які можуть працювати на різних операційних системах, таких як Windows, macOS, і Linux, використовуючи .NET.

Основні переваги Avalonia це:

Для встановлення Avalonia необхідно виконати кілька кроків. Перш за все, відкрийте термінал (термінал вашої операційної системи) та введіть наступну команду:

dotnet new install Avalonia.Templates

Ця команда встановить шаблони проєкт Avalonia у вашу систему, щоб ви могли створювати нові додатки.

Після того як шаблони встановлено, ви можете створити новий проєкт Avalonia, використовуючи команду:

dotnet new avalonia.mvvm -n MyAvaloniaApp

Де MyAvaloniaApp - це назва вашого проєкту. Ви можете обрати будь-яку назву.

Після створення проєкт перейдіть у папку проєкт за допомогою команди cd MyAvaloniaApp (де MyAvaloniaApp - це назва вашого проєкту).

Або просто створіть додаток у поточній папці використовуючи:

dotnet new avalonia.mvvm

Потім запустіть додаток командою:

dotnet run

Ця команда збудує та запустить ваш Avalonia додаток. Якщо все пройшло успішно, ви побачите вікно додатку з базовим інтерфейсом.

Щоб переконатися, що додаток працює, просто перевірте, чи можна відкрити та закрити вікно додатку, що відображається на екрані.

XAML (Extensible Application Markup Language) - це декларативна мова розмітки, яка використовується для опису інтерфейсу користувача у програмуванні на платформі .NET. У контексті Avalonia, мова розмітки для опису інтерфейсу користувача називається AXAML (Avalonia Extensible Application Markup Language), щоб відрізнити її від традиційного XAML, який використовується, наприклад, у WPF (Windows Presentation Foundation).

AXAML є схожою до XAML і дозволяє розробникам описувати візуальний вигляд додатків у декларативному стилі. З його допомогою можна визначати різноманітні елементи інтерфейсу, такі як вікна, кнопки, текстові поля, списки тощо, а також встановлювати їх властивості та розміщення на екрані.

Основна перевага використання AXAML полягає в тому, що вона дозволяє відокремити логіку програми від її візуального представлення, що полегшує роботу розробників та забезпечує більшу читабельність та обслуговуваність коду. Крім того, AXAML підтримує різні технології зв'язування даних, які дозволяють автоматизувати взаємодію між даними та візуальним елементом.

Файли "Views/MainWindow.axaml", "Views/MainWindow.axaml.cs" та "ViewModels/MainWindowViewModel.cs"

Файл "Views/MainWindow.axaml":

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

    <!-- DataContext для попереднього перегляду у середовищі розробки -->
    <Design.DataContext>
        <vm:MainWindowViewModel/>
    </Design.DataContext>

    <!-- Відображення привітання -->
    <TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

</Window>

Файл "Views/MainWindow.axaml.cs":

using Avalonia.Controls;

namespace avaltest.Views
{
    // Клас головного вікна додатку
    public partial class MainWindow : Window
    {
        // Конструктор класу
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

Файл "ViewModels/MainWindowViewModel.cs":

namespace avaltest.ViewModels
{
    // ViewModel для головного вікна
    public class MainWindowViewModel : ViewModelBase
    {
        // Властивість з привітанням
        public string Greeting => "Welcome to Avalonia!";
    }
}

Щоб змінити вітання в додатку, необхідно відкрити файл "ViewModels/MainWindowViewModel.cs" і змінити значення властивості Greeting на нове привітання. Наприклад, якщо ви хочете змінити привітання на "Привіт, це мій перший додаток на Avalonia!", замініть рядок:

public string Greeting => "Welcome to Avalonia!";

на

public string Greeting => "Привіт, це мій перший додаток на Avalonia!";

Після збереження змін, поверніться до терміналу та запустіть додаток командою dotnet run. Це перезбудує ваш додаток з оновленим привітанням та запустить його. Тепер, коли ви відкриєте головне вікно додатку, ви побачите ваше нове привітання.

Щоб змінити вітання безпосередньо у файлі "Views/MainWindow.axaml", вам потрібно знайти елемент TextBlock, який відображає вітання, і змінити його властивість Text. Ось як це зробити:

Для відображення декількох елементів, таких як TextBlock і Button, у файлі "Views/MainWindow.axaml", ви можете розмістити їх всередині контейнера, наприклад, StackPanel або Grid. Ось приклад, як це можна зробити:

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

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

    <!-- Використання StackPanel для розміщення декількох елементів вертикально -->
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <!-- Перший TextBlock -->
        <TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

        <!-- Додавання пробілу між елементами -->
        <TextBlock Text=""/>

        <!-- Кнопка -->
        <Button Content="Натисни мене" Click=""/>
    </StackPanel>

</Window>

У цьому прикладі ми використали StackPanel, щоб розмістити елементи вертикально один після одного. TextBlock відображає привітання, і ми додали пробіл для розділення елементів. Також додали Button, який буде мати текст "Натисни мене".