Тема 25 Події та координати

Події та координати королів та їх змінна

Події

Події в C# (events) використовуються для оповіщення інших об'єктів про те, що сталася певна дія.

Події в C# (events) використовуються для оповіщення інших об'єктів про те, що сталася певна дія. Це забезпечує реалізацію шаблону "спостерігач", де один об'єкт (видавець) повідомляє інші об'єкти (спостерігачі) про зміну стану.

1. Оголошення події

У коді надано обробники подій для різних подій в Canvas (PointerPressed, PointerReleased).

csharp

// Оголошення події для обробки натискання в Canvas
Canvas1.PointerPressed += CanvasEventResponse;
Canvas1.PointerReleased += CanvasEventResponse;

2. Обробник подій

Метод CanvasEventResponse обробляє події, отримуючи координати вказівника та встановлюючи положення прямокутника.

csharp

// Метод для обробки подій Canvas
public void CanvasEventResponse(object sender, PointerEventArgs e)
{
    // Отримуємо координати курсора відносно Canvas
    double x = e.GetPosition((Canvas)sender).X;
    double y = e.GetPosition((Canvas)sender).Y;

    double realX = x;
    double realY = y;

    // Встановлюємо положення прямокутника
    ShowRectangle.SetValue(Canvas.LeftProperty, realX - ShowRectangle.Width / 2);
    ShowRectangle.SetValue(Canvas.TopProperty, realY - ShowRectangle.Height / 2);

    // Формуємо текст з координатами курсора
    string coordinatesOfPointerRelativeToImageText = $"X: {realX}\nY: {realY}";

    // Виводимо подію та координати в консоль
    Console.WriteLine(e);
    Console.WriteLine(coordinatesOfPointerRelativeToImageText);

    // Виводимо координати на екрані
    OutputTB.Text = coordinatesOfPointerRelativeToImageText;
}

3. Встановлення властивостей та реєстрація обробників подій

csharp

public MainWindow()
{
    InitializeComponent();

    // Встановлюємо висоту Canvas
    Canvas1.Height = 500;
    // Встановлюємо ширину Canvas
    Canvas1.Width = 1000;

    // Встановлюємо ширину прямокутника
    ShowRectangle.Width = 50;
    // Встановлюємо висоту прямокутника
    ShowRectangle.Height = 50;
    // Встановлюємо колір заповнення прямокутника
    ShowRectangle.Fill = new SolidColorBrush(Colors.Red);

    // Додаємо прямокутник до Canvas
    Canvas1.Children.Add(ShowRectangle);

    // Підключення обробників подій для Canvas
    Canvas1.PointerPressed += CanvasEventResponse;
    Canvas1.PointerReleased += CanvasEventResponse;

    // Встановлюємо колір фону Canvas
    Canvas1.Background = new SolidColorBrush(Colors.Blue);

    // Додаємо Canvas до основної панелі
    MainPanel.Children.Add(Canvas1);
}

Пояснення

PointerPressed та PointerReleased - це події, що виникають при натисканні та відпусканні кнопки миші відповідно.
Обробник подій CanvasEventResponse викликається при виникненні цих подій.
Метод CanvasEventResponse отримує координати курсора та оновлює положення прямокутника відповідно до цих координат.
Виведення координат у консоль та на екран здійснюється за допомогою Console.WriteLine та OutputTB.Text.

Координати контролів

Координати у Avalonia.

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

Основні поняття:

Canvas.LeftProperty та Canvas.TopProperty встановлюють положення об'єкта на канвасі за горизонтальною та вертикальною віссю відповідно.
PointerEventArgs.GetPosition(canvas) отримує координати курсора відносно канвасу.

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

Встановлення положення об'єкта на канвасі:

csharp

ShowRectangle.SetValue(Canvas.LeftProperty, x);
ShowRectangle.SetValue(Canvas.TopProperty, y);

Отримання координат курсора на канвасі:

csharp

double x = e.GetPosition(Canvas1).X;
double y = e.GetPosition(Canvas1).Y;

Додавання обробника подій для канвасу:

csharp

Canvas1.PointerPressed += CanvasEventResponse;

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

csharp

OutputTB.Text = $"X: {x}, Y: {y}";

Щоб змінити координати елемента на канвасі в Avalonia, потрібно встановити нові значення властивостей Canvas.LeftProperty та Canvas.TopProperty для цього елемента.

Події та координати контролів

Події та координати контролів, їх взаємодія.

Загальний опис коду: У конструкторі вікна ініціалізуються елементи управління, такі як Canvas та прямокутник, і встановлюються обробники подій для взаємодії з Canvas.

s3-1.cscsharp

using System;
using Avalonia.Controls;
using Avalonia.Controls.Shapes;
using Avalonia.Input;
using Avalonia.Media;

namespace AvaloniaDynamicButtons.Views
{
    public partial class MainWindow : Window
    {
        public static Canvas Canvas1 = new Canvas();
        public static Rectangle ShowRectangle = new Rectangle();

        public MainWindow()
        {
            InitializeComponent();

            Canvas1.Height = 500;
            Canvas1.Width = 1000;

            ShowRectangle.Width = 50;
            ShowRectangle.Height = 50;
            ShowRectangle.Fill = new SolidColorBrush(Colors.Red);

            Canvas1.Children.Add(ShowRectangle);

            // Додавання обробників подій для Canvas
            Canvas1.PointerPressed += CanvasEventResponse;
            Canvas1.PointerReleased += CanvasEventResponse;

            Canvas1.Background = new SolidColorBrush(Colors.Blue);

            MainPanel.Children.Add(Canvas1);
        }

        public void CanvasEventResponse(object sender, PointerEventArgs e)
        {
            double x = e.GetPosition((Canvas)sender).X;
            double y = e.GetPosition((Canvas)sender).Y;

            double realX = x;
            double realY = y;

            ShowRectangle.SetValue(Canvas.LeftProperty, realX - ShowRectangle.Width / 2);
            ShowRectangle.SetValue(Canvas.TopProperty, realY - ShowRectangle.Height / 2);

            string coordinatesOfPointerRelativeToImageText = $"X: {realX}\nY: {realY}";

            Console.WriteLine(e);
            Console.WriteLine(coordinatesOfPointerRelativeToImageText);

            OutputTB.Text = coordinatesOfPointerRelativeToImageText;
        }
    }
}

Пояснення:

using System; - директива using, що дозволяє використовувати класи з простору імен System, такі як Console.
using Avalonia.Controls;, using Avalonia.Controls.Shapes;, using Avalonia.Input;, using Avalonia.Media; - директиви using для використання класів з просторів імен Avalonia для роботи з візуальними елементами та введенням користувача.
namespace AvaloniaDynamicButtons.Views - визначення простору імен, в якому знаходиться клас MainWindow.
public partial class MainWindow : Window - визначення класу MainWindow, який є вікном програми, наслідуваним від класу Window.
public static Canvas Canvas1 = new Canvas(); - створення статичного поля типу Canvas, яке буде використовуватися для розміщення елементів.
public static Rectangle ShowRectangle = new Rectangle(); - створення статичного поля типу Rectangle, яке буде використовуватися для відображення прямокутника на Canvas.
public MainWindow() - конструктор класу MainWindow, який викликається при створенні нового екземпляру вікна.
InitializeComponent(); - метод, який ініціалізує компоненти вікна згідно з XAML описом.
Canvas1.Height = 500; - встановлення висоти Canvas на 500 одиниць.
Canvas1.Width = 1000; - встановлення ширини Canvas на 1000 одиниць.
ShowRectangle.Width = 50; - встановлення ширини прямокутника на 50 одиниць.
ShowRectangle.Height = 50; - встановлення висоти прямокутника на 50 одиниць.
ShowRectangle.Fill = new SolidColorBrush(Colors.Red); - встановлення кольору заповнення прямокутника на червоний.
Canvas1.Children.Add(ShowRectangle); - додавання прямокутника до колекції дочірніх елементів Canvas.
Canvas1.PointerPressed += CanvasEventResponse; - підключення обробника події натискання кнопки миші на Canvas до методу CanvasEventResponse.
Canvas1.PointerReleased += CanvasEventResponse; - підключення обробника події відпускання кнопки миші на Canvas до методу CanvasEventResponse.
Canvas1.Background = new SolidColorBrush(Colors.Blue); - встановлення коліру фону Canvas на синій.
MainPanel.Children.Add(Canvas1); - додавання Canvas до колекції дочірніх елементів головної панелі вікна.
public void CanvasEventResponse(object sender, PointerEventArgs e) - оголошення методу, який буде викликатися при виникненні події на Canvas.
double x = e.GetPosition((Canvas)sender).X; - отримання координати X курсора миші відносно Canvas при виникненні події.
double y = e.GetPosition((Canvas)sender).Y; - отримання координати Y курсора миші відносно Canvas при виникненні події.
ShowRectangle.SetValue(Canvas.LeftProperty, realX - ShowRectangle.Width / 2); - встановлення положення прямокутника по осі X відносно Canvas.
ShowRectangle.SetValue(Canvas.TopProperty, realY - ShowRectangle.Height / 2); - встановлення положення прямокутника по осі Y відносно Canvas.
string coordinatesOfPointerRelativeToImageText = $"X: {realX}\nY: {realY}"; - формування рядка з координатами курсора миші.
Console.WriteLine(e); - виведення події в консоль.
Console.WriteLine(coordinatesOfPointerRelativeToImageText); - виведення координат курсора миші в консоль.
OutputTB.Text = coordinatesOfPointerRelativeToImageText; - виведення координат курсора миші на екран у текстовому блоку.

Приклад програми яка відслідковує події та реагує на них

Приклад програми яка відслідковує події та обробляє їх шляхом зміни координатів прямокутника.

Файли

Наповнення файлу MainWindow.axaml.cs:

s4-1.cscsharp

using System;
using Avalonia.Controls;
using Avalonia.Controls.Shapes;
using Avalonia.Input;
using Avalonia.Media;

namespace AvaloniaDynamicButtons.Views;

public partial class MainWindow : Window
{
    // Створюємо статичний Canvas
    public static Canvas Canvas1 = new Canvas();
    // Створюємо статичний прямокутник
    public static Rectangle ShowRectangle = new Rectangle();

    public MainWindow()
    {
        InitializeComponent();

        // Встановлюємо висоту Canvas
        Canvas1.Height = 500;
        // Встановлюємо ширину Canvas
        Canvas1.Width = 1000;

        // Встановлюємо ширину прямокутника
        ShowRectangle.Width = 50;
        // Встановлюємо висоту прямокутника
        ShowRectangle.Height = 50;
        // Встановлюємо колір заповнення прямокутника
        ShowRectangle.Fill = new SolidColorBrush(Colors.Red);

        // Додаємо прямокутник до Canvas
        Canvas1.Children.Add(ShowRectangle);

        // Підключення обробників подій для Canvas
        // Canvas1.PointerMoved += CanvasEventResponse;
        // Canvas1.PointerWheelChanged += CanvasEventResponse;
        // Canvas1.PointerEntered += CanvasEventResponse;
        // Canvas1.PointerExited += CanvasEventResponse;
        Canvas1.PointerPressed += CanvasEventResponse;
        Canvas1.PointerReleased += CanvasEventResponse;

        // Встановлюємо колір фону Canvas
        Canvas1.Background = new SolidColorBrush(Colors.Blue);

        // Додаємо Canvas до основної панелі
        MainPanel.Children.Add(Canvas1);
    }

    // Метод для обробки подій Canvas
    public void CanvasEventResponse(object sender, PointerEventArgs e)
    {
        // Отримуємо координати курсора відносно Canvas
        double x = e.GetPosition((Canvas)sender).X;
        double y = e.GetPosition((Canvas)sender).Y;

        double realX = x;
        double realY = y;

        // Встановлюємо положення прямокутника
        ShowRectangle.SetValue(Canvas.LeftProperty, realX - ShowRectangle.Width / 2);
        ShowRectangle.SetValue(Canvas.TopProperty, realY - ShowRectangle.Height / 2);

        // Формуємо текст з координатами курсора
        string coordinatesOfPointerRelativeToImageText = $"X: {realX}
Y: {realY}";

        // Виводимо подію та координати в консоль
        Console.WriteLine(e);
        Console.WriteLine(coordinatesOfPointerRelativeToImageText);

        // Виводимо координати на екрані
        OutputTB.Text = coordinatesOfPointerRelativeToImageText;
    }
}

Наповнення файлу MainWindow.axaml:

xml

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

    <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 Name="MainPanel">
        <TextBlock Text="OUTPUT" Name="OutputTB" FontSize="24" Margin="10"/>
    </StackPanel>

</Window>

build info

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