Тема 24 Avalonia 4

Зображення та як динамічно додавати контроли

Зображення в Avalonia

У Avalonia зображення(Image) використовуються для відображення графічних елементів, таких як фотографії, іконки, або інші графічні зображення.

Для додавання зображення до вашого додатку Avalonia використовується елемент <Image>. Ось приклад використання зображення у XAML-файлі:

xml

<Image Source="Assets/image.jpg" Width="100" Height="100"/>

У цьому прикладі, Source вказує на шлях до файлу зображення (у цьому випадку image.jpg), а Width та Height вказують на розміри зображення.

Додавання зображень до вашого додатку

Для того, щоб використати зображення у вашому додатку, спочатку вам потрібно додати це зображення до папки Assets у вашому проєкті. Після цього, ви можете вказати шлях до зображення у властивості Source елемента <Image>.

Приклад додавання зображення до AXAML

xml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:YourNamespace"
        Title="My Avalonia App" Width="800" Height="600">
    <StackPanel>
        <Image Source="Assets/image.jpg" Width="100" Height="100"/>
    </StackPanel>
</Window>

У цьому прикладі, зображення image.jpg знаходиться у папці Assets, яка знаходиться у кореневій папці вашого проєкту.

Додавання зображень динамічно

Ви також можете додавати зображення до вашого додатку динамічно, наприклад, при завантаженні даних з мережі або при відповіді на дії користувача. Для цього вам потрібно буде створити новий екземпляр Image у вашому коді та встановити його властивість Source на шлях до зображення.

MainWindow.axamlxml

<Image Name="image2"
               Height="200"
               Width="200"
               Source="" />

MainWindow.axaml.cscsharp

using Avalonia.Controls;
using Avalonia.Media.Imaging;

namespace AvaloniaTestsImages.Views;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        image2.Source = new Bitmap("/шлях/назва.png");
    }
}

Приклад програми з зображеннями

Програма з використання зображень.

Файли проекту.

MainWindow.axamlxml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:AvaloniaTestsImages2.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Width="1000"
        Height="600"
        x:Class="AvaloniaTestsImages2.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="AvaloniaTestsImages2">
    <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>
    <StackPanel>
        <Button Content="Click me!"
                VerticalAlignment="Center"
                Click="Button1Click" />
        <WrapPanel Name="MainWrap">
            <Image Height="200"
                   Width="200"
                   Source="/Assets/avalonia-logo.ico" />
        </WrapPanel>
    </StackPanel>
</Window>

MainWindow.axaml.cscsharp

using System;
using Avalonia.Controls;
using Avalonia.Interactivity;
using Avalonia.Media.Imaging;

namespace AvaloniaTestsImages2.Views;

public partial class MainWindow : Window
{
    public Random Random { get; set; } = new Random();

    public MainWindow()
    {
        InitializeComponent();
    }

    public void Button1Click(object sender, RoutedEventArgs e)
    {
        Console.WriteLine("Button 1 Clicked");
        string[] files;

        files = System.IO.Directory.GetFiles("Assets/eos_wallpapers_classic");

        string path = files[Random.Next(0, files.Length)];

        Console.WriteLine("Path: " + path);

        Bitmap bitmap = new Bitmap(path);

        Image image = new Image();
        image.Source = bitmap;
        image.Height = 200;

        MainWrap.Children.Add(image);
    }
}

Додавання контролів динамічно

Використання властивості .Children для додавання контролів динамічно.

У Avalonia ви можете додавати контроли до вашого інтерфейсу динамічно, тобто під час виконання програми. Це може бути корисно, коли вам потрібно створювати або змінювати інтерфейс залежно від даних або дій користувача.

Властивість .Children

У багатьох контролах Avalonia є властивість .Children, яка представляє собою колекцію контролів, які є дочірніми для цього контролу. Наприклад, у StackPanel властивість .Children містить всі контроли, які розміщені у цьому StackPanel.

Як використовувати .Children

Для додавання контролів до іншого контролу, ви можете використовувати властивість .Children. Наприклад, якщо вам потрібно додати кнопку до StackPanel з коду, ви можете зробити це так:

csharp

var button = new Button();
button.Content = "Click me!";
stackPanel.Children.Add(button);

У цьому прикладі, ми створюємо нову кнопку, встановлюємо текст кнопки на "Click me!", і додаємо цю кнопку до StackPanel (stackPanel - це контейнер, до якого ми хочемо додати кнопку).

Приклад програми яка додає та видаляє контроли

Використання .Children для додавання та видалення контролів.

Файли проекту.

MainWindow.axamlxml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:AvaloniaTestsControls.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="AvaloniaTestsControls.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="AvaloniaTestsControls">
    <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>
    <StackPanel>
        <StackPanel>
            <Button Content="Add"
                    Click="ButtonClickedAdd" />
            <Button Content="Remove"
                    Click="ButtonClickedRemove" />
        </StackPanel>
        <WrapPanel Name="MainWrap">
        </WrapPanel>
    </StackPanel>
</Window>

MainWindow.axaml.cscsharp

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

namespace AvaloniaTestsControls.Views;

public partial class MainWindow : Window
{
    public int Counter { get; set; } = 0;

    public MainWindow()
    {
        InitializeComponent();
    }

    public void ButtonClickedAdd(object sender, RoutedEventArgs e)
    {
        // Повідомлення у консоль про натискання кнопки "Add"
        Console.WriteLine("Button clicked - Add.");

        // Створення нового текстового блоку
        TextBlock tb = new TextBlock();

        // Встановлення тексту текстового блоку
        tb.Text = "C: " + Counter;

        // Встановлення відступу текстового блоку
        tb.Margin = new Thickness(3);

        // Встановлення фону текстового блоку
        tb.Background = Brushes.Red;

        // Встановлення розміру шрифту текстового блоку
        tb.FontSize = 25;

        // Додавання текстового блоку до контейнера MainWrap
        MainWrap.Children.Add(tb);

        // Збільшення лічильника
        Counter++;
    }

    public void ButtonClickedRemove(object sender, RoutedEventArgs e)
    {
        // Повідомлення у консоль про натискання кнопки "Remove"
        Console.WriteLine("Button clicked - Remove.");

        // Видалення першого дочірнього елементу контейнера MainWrap
        MainWrap.Children.RemoveAt(0);
    }

}

build info

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