Тема 22 Avalonia 2

Взаємодія з контролами в Avalonia

Avalonia та кнопки

Як прив'язати функцію до кнопки в Avalonia?

На цьому уроці ми поговоримо про те, як зв'язати елементи інтерфейсу користувача (UI) з кодом, зокрема про роботу з кнопками. Ми розглянемо приклад простого зв'язування функції з кнопкою.

Створення простого додатку з однією кнопкою:

Перш за все, створимо простий додаток з однією кнопкою. Додаток буде мати вікно (Window) з однією кнопкою (Button) і текстовим полем (TextBlock).

MainWindow.axaml:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:avaltest1.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="avaltest1.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="avaltest1">
    <StackPanel>
        <TextBlock Text="TestText" />
        <Button Click="Button1Click">TEST_BTN</Button>
    </StackPanel>
</Window>

MainWindow.axaml.cs:

using System;
using Avalonia.Controls;
using Avalonia.Interactivity;

namespace avaltest1.Views
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        public void Button1Click(object source, RoutedEventArgs args)
        {
            Console.WriteLine("Button clicked");
        }
    }
}

У цьому прикладі ми створили кнопку з назвою "TEST_BTN" і зв'язали її з методом Button1Click в коді. Коли користувач натискає на кнопку, в консоль виводиться повідомлення "Button clicked".

Це простий приклад того, як можна прив'язати кнопку та функцію у додатку Avalonia.

Коли ви вказуєте Click="Button1Click" в елементі <Button> у XAML-файлі, ви зв'язуєте подію натискання кнопки (Click) з певною функцією в коді. У цьому випадку, Button1Click - це ім'я методу в коді, який буде викликаний при натисканні кнопки.

Коли ви запускаєте додаток і натискаєте на кнопку, Avalonia автоматично викликає метод Button1Click у вашому коді. Це робить можливим виконання певних дій або обробку події натискання кнопки в вашому додатку.

Отже, через це зв'язування між UI та кодом, ви можете реагувати на події від користувача (наприклад, натискання кнопки) та виконувати відповідні дії в вашому додатку.

Функція Button1Click у прикладі є публічним методом без повернення (void), що означає, що вона не повертає жодного значення після виконання. Цей метод має два параметри: object source і RoutedEventArgs args.

Параметр object source вказує на об'єкт, який викликав подію (у цьому випадку - кнопка). Цей параметр може бути використаний, наприклад, для визначення, який саме елемент викликав подію.
Параметр RoutedEventArgs args містить додаткову інформацію про подію, таку як деталі відправника події та іншу інформацію, яка може бути корисною для обробки події.

У цій конкретній функції Button1Click, ми виводимо просте повідомлення у консоль ("Button clicked"), щоб показати, що функція була викликана успішно при натисканні кнопки. Ви можете використовувати цю функцію для виконання будь-яких інших дій, які вам потрібно відобразити при натисканні кнопки у вашому додатку.

Кнопки та змінна тексту контролів

Як змінювати текст елементів при натисканні кнопки?

Створення простого додатку з кнопкою та текстовим блоком:

Вам потрібно створити розмітку у XAML файлі (MainWindow.axaml):

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:avaltest1.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="avaltest1.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="avaltest1">
    <StackPanel>
        <TextBlock Text="TestText" Name="TextBoxWithName" />
        <Button Click="Button1Click">TEST_BTN</Button>
    </StackPanel>
</Window>

В даному коді ми маємо <TextBlock> з іменем TextBoxWithName та кнопку <Button>, яка має обробник подій Button1Click.

Код C# для зміни тексту після натискання кнопки:
У коді C# (MainWindow.axaml.cs), ми реалізуємо метод Button1Click, який буде викликатися при натисканні кнопки:
```
using System;
using Avalonia.Controls;
using Avalonia.Interactivity;

namespace avaltest1.Views
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        public void Button1Click(object source, RoutedEventArgs args)
        {
            TextBoxWithName.Text = "Button clicked";
            Console.WriteLine("Button clicked");
        }
    }
}
```
У методі Button1Click ми змінюємо текст елементу <TextBlock> з іменем TextBoxWithName на "Button clicked" при натисканні кнопки. Також виводимо повідомлення у консоль.

Кнопки та отримання тексту з поля для вводу (TextBox)

Як отримати ввід від користувача?

У цьому прикладі ми створюємо додаток який містить кнопку, текстове поле та текстовий блок. Користувач може вводити текст у текстове поле, після чого натискає на кнопку. Після натискання кнопки вміст текстового поля додається до вмісту текстового блоку, а текстове поле очищається для введення нового тексту.

Створення розмітки у XAML файлі:

В XAML файлі (MainWindow.axaml) ми маємо таку розмітку:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:avaltest1.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="avaltest1.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="avaltest1">
    <StackPanel>
        <Button Click="Button1Click">TEST_BTN</Button>
        <TextBlock Text="TestText" Name="TextBoxWithName" />
        <TextBox Name="TextInput" />
    </StackPanel>
</Window>

У даній розмітці ми маємо кнопку <Button>, текстовий блок <TextBlock> з іменем TextBoxWithName та текстове поле <TextBox> з іменем TextInput.

Про TextBox:
Елемент <TextBox> використовується для введення тексту користувачем у додатку. В цьому випадку, TextInput є екземпляром класу TextBox, до якого ми можемо звертатися з коду, щоб отримати введений користувачем текст.
Код для обробки події натискання кнопки:
У коді C# (MainWindow.axaml.cs), ми маємо метод Button1Click, який буде викликатися при натисканні кнопки:
```
using System;
using Avalonia.Controls;
using Avalonia.Interactivity;

namespace avaltest1.Views
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        public void Button1Click(object source, RoutedEventArgs args)
        {
            TextBoxWithName.Text = TextBoxWithName.Text + " " + TextInput.Text;
            TextInput.Text = "";
            Console.WriteLine("Button clicked");
        }
    }
}
```
У методі Button1Click ми змінюємо текст елементу <TextBlock> з іменем TextBoxWithName, додаючи до нього текст, який введений у текстове поле TextInput. Після цього очищаємо вміст текстового поля TextInput, щоб користувач міг ввести новий текст. Також виводимо повідомлення у консоль.

build info

compiler: 2.0.5.1 · 4054EF9BF6C4510A
built: 2026-11-08 14:31:25 UTC