Тема 23 Avalonia 3

Grid та його використання

`Grid` та його участь в layout'уті

Що таке Grid та як його використовувати?

Layout (структура) - це важливий аспект розробки програмного забезпечення, який визначає, як елементи інтерфейсу користувача розташовуються на екрані. Правильно використаний layout допомагає зробити ваші додатки більш зручними та легкими у використанні для користувачів.

Grid: як він працює та як його використовувати

Grid (сітка) - це механізм, який дозволяє розміщати елементи інтерфейсу у вигляді таблиці з рядками та стовпцями. Кожен елемент може займати одну або кілька клітинок сітки, що дозволяє створювати складні та організовані макети.

Приклад використання Grid:

xml

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <TextBlock Grid.Column="0" Grid.Row="0" Text="Верхній лівий кут" />
    <TextBlock Grid.Column="1" Grid.Row="0" Text="Верхній правий кут" />
    <TextBlock Grid.Column="0" Grid.Row="1" Text="Нижній лівий кут" />
    <TextBlock Grid.Column="1" Grid.Row="1" Text="Нижній правий кут" />
</Grid>

У цьому прикладі ми створюємо Grid з двома стовпцями та двома рядками. Кожен TextBlock розміщується в певній клітинці сітки за допомогою властивостей Grid.Column та Grid.Row.

Grid.ColumnDefinitions та Grid.RowDefinitions:

<Grid.ColumnDefinitions>: Цей тег вказує, які стовпці будуть у сітці. У цьому випадку визначаються два стовпці, обидва з яких мають ширину, що займає всі доступні простори (Width="*"). Це означає, що обидва стовпці будуть рівні за шириною.
<Grid.RowDefinitions>: Цей тег вказує, які рядки будуть у сітці. У цьому випадку також визначаються два рядки, обидва з яких мають висоту, що займає всі доступні простори (Height="*"). Це означає, що обидва рядки будуть рівні за висотою.

Ці визначення стовпців та рядків Grid встановлюють загальну структуру сітки, яка дозволяє розмістити елементи інтерфейсу у вікні вашого додатку Avalonia. Кожен елемент може потім бути розміщений у певній клітинці сітки, використовуючи властивості Grid.Column та Grid.Row.

Більше прикладів використання `Grid`

Grid - 2x2, 3x3.

Grid 2x2:

s2-1.xmlxml

<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>
        <!-- This only sets the DataContext for the previewer in an IDE,
             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
        <vm:MainWindowViewModel />
    </Design.DataContext>
    <Grid Background="LightGray">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <!-- Row 1, Column 1 -->
        <TextBlock Grid.Row="0"
                   Grid.Column="0"
                   Text="1"
                   Background="AliceBlue"
                   Foreground="Black"
                   FontSize="24" />
        <!-- Row 1, Column 2 -->
        <TextBlock Grid.Row="0"
                   Grid.Column="1"
                   Text="2"
                   Background="Beige"
                   Foreground="Black"
                   FontSize="24" />
        <!-- Row 2, Column 1 -->
        <TextBlock Grid.Row="1"
                   Grid.Column="0"
                   Text="3"
                   Background="DarkSalmon"
                   Foreground="Black"
                   FontSize="24" />
        <!-- Row 2, Column 2 -->
        <TextBlock Grid.Row="1"
                   Grid.Column="1"
                   Text="4"
                   Background="LightCoral"
                   Foreground="Black"
                   FontSize="24" />
    </Grid>
</Window>

У цьому прикладі ми використовуємо Grid для створення таблиці з чотирма клітинками, розташованими у два рядки та два стовпці. Кожна клітинка містить елемент TextBlock з числом від 1 до 4. Grid використовує властивості Grid.RowDefinitions та Grid.ColumnDefinitions для визначення кількості та розміру рядків і стовпців в таблиці.

Пояснення стилів TextBlock (кольори та шрифт)

Background (Фон): Властивість Background встановлює колір фону для TextBlock. Наприклад, Background="AliceBlue" встановлює світло-синій колір фону для першого TextBlock і Background="Beige" - бежевий для другого.
Foreground (Передній план): Властивість Foreground встановлює колір тексту у TextBlock. У всіх TextBlock текст встановлений чорним за допомогою Foreground="Black".
FontSize (Розмір шрифту): Властивість FontSize встановлює розмір шрифту у TextBlock. У всіх TextBlock розмір шрифту встановлений на 24 за допомогою FontSize="24".

Grid 3x3:

s2-2.xmlxml

<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>
        <!-- This only sets the DataContext for the previewer in an IDE,
             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
        <vm:MainWindowViewModel />
    </Design.DataContext>
    <Grid Background="LightGray">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <!-- Row 1, Column 1 -->
        <TextBlock Grid.Row="0"
                   Grid.Column="0"
                   Text="1"
                   Background="AliceBlue"
                   Foreground="Black"
                   FontSize="24" />
        <!-- Row 1, Column 2 -->
        <TextBlock Grid.Row="0"
                   Grid.Column="1"
                   Text="2"
                   Background="Beige"
                   Foreground="Black"
                   FontSize="24" />
        <!-- Row 1, Column 3 -->
        <TextBlock Grid.Row="0"
                   Grid.Column="2"
                   Text="3"
                   Background="CadetBlue"
                   Foreground="Black"
                   FontSize="24" />
        <!-- Row 2, Column 1 -->
        <TextBlock Grid.Row="1"
                   Grid.Column="0"
                   Text="4"
                   Background="DarkSalmon"
                   Foreground="Black"
                   FontSize="24" />
        <!-- Row 2, Column 2 -->
        <TextBlock Grid.Row="1"
                   Grid.Column="1"
                   Text="5"
                   Background="LightCoral"
                   Foreground="Black"
                   FontSize="24" />
        <!-- Row 2, Column 3 -->
        <TextBlock Grid.Row="1"
                   Grid.Column="2"
                   Text="6"
                   Background="LightGreen"
                   Foreground="Black"
                   FontSize="24" />
        <!-- Row 3, Column 1 -->
        <TextBlock Grid.Row="2"
                   Grid.Column="0"
                   Text="7"
                   Background="LightPink"
                   Foreground="Black"
                   FontSize="24" />
        <!-- Row 3, Column 2 -->
        <TextBlock Grid.Row="2"
                   Grid.Column="1"
                   Text="8"
                   Background="LightSkyBlue"
                   Foreground="Black"
                   FontSize="24" />
        <!-- Row 3, Column 3 -->
        <TextBlock Grid.Row="2"
                   Grid.Column="2"
                   Text="9"
                   Background="LightSteelBlue"
                   Foreground="Black"
                   FontSize="24" />
    </Grid>
</Window>

У цьому прикладі ми використовуємо Grid для створення таблиці 3x3 з елементами TextBlock, які мають різний фон та розмір шрифту. Grid має три рядки та три стовпці, і кожен TextBlock розміщений у відповідній клітинці сітки за допомогою властивостей Grid.Row та Grid.Column.

Пояснення властивостей Grid

Background="LightGray": Встановлює колір фону для всього Grid.
Grid.RowDefinitions: Визначає кількість та розмір рядків у Grid. У цьому випадку у нас три рядки, кожен з яких має рівну висоту (Height="*").
Grid.ColumnDefinitions: Визначає кількість та розмір стовпців у Grid. У цьому випадку у нас три стовпці, кожен з яких має рівну ширину (Width="*").

Пояснення стилів (кольорів та шрифту) TextBlock

Background: Встановлює колір фону TextBlock.
Foreground: Встановлює колір тексту TextBlock.
FontSize: Встановлює розмір шрифту тексту TextBlock.

'Повноцінна' програма з використанням `Grid`

Grid.ColumnSpan та Grid.RowSpan.

Програма з базовим прикладом використання кнопок для вводу даних:

MainWindow.axamlxml

<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>
        <!-- This only sets the DataContext for the previewer in an IDE,
             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
        <vm:MainWindowViewModel />
    </Design.DataContext>
    <Grid Background="LightGray">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <!-- Row 1, Column 1 -->
        <TextBlock Grid.Row="0"
                   Grid.Column="0"
                   Grid.ColumnSpan="3"
                   Text="1"
                   Background="Red"
                   Foreground="Black"
                   FontSize="24"
                   Name="TextBlock1" />
        <!-- Row 2, Column 1 -->
        <Button Grid.Row="1"
                Grid.Column="0"
                Content="t"
                Background="DarkSalmon"
                Foreground="Black"
                FontSize="24"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                VerticalContentAlignment="Center"
                HorizontalContentAlignment="Center"
                Click="Button_Click" />
        <!-- Row 2, Column 2 -->
        <Button Grid.Row="1"
                Grid.Column="1"
                Content="e"
                Background="LightCoral"
                Foreground="Black"
                FontSize="24"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                VerticalContentAlignment="Center"
                HorizontalContentAlignment="Center"
                Click="Button_Click" />
        <!-- Row 2, Column 3 -->
        <Button Grid.Row="1"
                Grid.Column="2"
                Content="s"
                Background="DarkSalmon"
                Foreground="Black"
                FontSize="24"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                VerticalContentAlignment="Center"
                HorizontalContentAlignment="Center"
                Click="Button_Click" />
        <!-- Row 2, Column 4 -->
        <Button Grid.Row="0"
                Grid.Column="3"
                Grid.RowSpan="2"
                Content=">"
                Background="LightCoral"
                Foreground="Black"
                FontSize="24"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                VerticalContentAlignment="Center"
                HorizontalContentAlignment="Center"
                Click="Button_Click" />
    </Grid>
</Window>

MainWindow.axaml.cscsharp

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

namespace avaltest.Views;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        if (sender is Button button)
        {
            Console.WriteLine($"Button clicked: {button.Content}");

            if (button.Content == ">")
            {
                TextBlock1.Text = TextBlock1.Text + " ";
            }
            else
            {
                TextBlock1.Text = TextBlock1.Text + button.Content;
            }
        }
    }

}

Структура програми та її ціль

Коли користувач натискає на кнопку, її наповнення додається до текстового блоку. А кнопка ">", коли на неї натиснуто, додає новий рядок до тексту.

Grid.ColumnSpan та Grid.RowSpan

Grid.ColumnSpan і Grid.RowSpan - це властивості елементів сітки, які вказують, скільки стовпців або рядків вони повинні охоплювати. Наприклад, якщо Grid.ColumnSpan="3", елемент буде охоплювати три стовпці.

Пояснення роботи програми

Коли користувач натискає на кнопку, викликається метод Button_Click.
Метод перевіряє, чи натиснутий об'єкт є кнопкою.
Якщо натиснута кнопка має вміст ">", програма додає новий рядок до тексту в TextBlock1.
У протилежному випадку, програма додає вміст кнопки до тексту в TextBlock1.

Посилання на файли проєкту.

build info

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

Grid та його участь в layout'уті

Більше прикладів використання Grid

'Повноцінна' програма з використанням Grid

`Grid` та його участь в layout'уті

Більше прикладів використання `Grid`

'Повноцінна' програма з використанням `Grid`