Изучаем элемент Grid на примере 3×3 сетки

Изучаем элемент Grid на примере 3×3 сетки

Разработчики с опытом работы с WPF хорошо знакомы с элементом Grid; его поведение в WinUI почти полностью повторяет WPF. На этом уроке мы создадим цифровую клавиатуру 3×3 на основе Grid. Все кнопки привязаны к одной и той же функции обработки клика. При нажатии кнопки мы считываем значение её свойства Tag и выводим строку в отладочную консоль для демонстрации отладки. В реальных проектах по значению Tag можно определить, какая именно кнопка нажата, и выполнять соответствующую логику.

Конечный результат

Создайте новый проект и замените корневой Grid на следующий код:

<Grid Padding="40">
    <!-- Сетка 3 строки, 3 столбца -->
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <!-- Строка 1 -->
    <Button Grid.Row="0" Grid.Column="0" Content="1" Tag="Tag_1" Click="OnGridButtonClick" Width="120" Height="80" Margin="8" FontSize="18"/>
    <Button Grid.Row="0" Grid.Column="1" Content="2" Tag="Tag_2" Click="OnGridButtonClick" Width="120" Height="80" Margin="8" FontSize="18"/>
    <Button Grid.Row="0" Grid.Column="2" Content="3" Tag="Tag_3" Click="OnGridButtonClick" Width="120" Height="80" Margin="8" FontSize="18"/>

    <!-- Строка 2 -->
    <Button Grid.Row="1" Grid.Column="0" Content="4" Tag="Tag_4" Click="OnGridButtonClick" Width="120" Height="80" Margin="8" FontSize="18"/>
    <Button Grid.Row="1" Grid.Column="1" Content="5" Tag="Tag_5" Click="OnGridButtonClick" Width="120" Height="80" Margin="8" FontSize="18"/>
    <Button Grid.Row="1" Grid.Column="2" Content="6" Tag="Tag_6" Click="OnGridButtonClick" Width="120" Height="80" Margin="8" FontSize="18"/>

    <!-- Строка 3 -->
    <Button Grid.Row="2" Grid.Column="0" Content="7" Tag="Tag_7" Click="OnGridButtonClick" Width="120" Height="80" Margin="8" FontSize="18"/>
    <Button Grid.Row="2" Grid.Column="1" Content="8" Tag="Tag_8" Click="OnGridButtonClick" Width="120" Height="80" Margin="8" FontSize="18"/>
    <Button Grid.Row="2" Grid.Column="2" Content="9" Tag="Tag_9" Click="OnGridButtonClick" Width="120" Height="80" Margin="8" FontSize="18"/>
</Grid>Code language: HTML, XML (xml)

Grid — это контейнер для компоновки элементов. Количество строк и столбцов задаётся через RowDefinitions и ColumnDefinitions. Дочерние элементы указывают свою ячейку через присоединённые свойства Grid.Row и Grid.Column. В примере сетка 3×3: верхняя левая ячейка — строка 0, столбец 0 (индексы начинаются с нуля, не единицы), нижняя правая ячейка — строка 2, столбец 2.

Все кнопки привязаны к одной функции через атрибут Click=»OnGridButtonClick». Наведите курсор на имя события в XAML и нажмите F12 — Visual Studio автоматически создаст заготовку функции обработчика.

В созданной функции обработчика преобразуйте аргумент sender в Button и получите значение свойства Tag, чтобы определить, какая кнопка нажата.

    Button targetButton = sender.as<Button>();
    if (!targetButton) return;

    // Получаем строку из свойства Tag
    hstring buttonTag = unbox_value<hstring>(targetButton.Tag());

    OutputDebugStringW(buttonTag.c_str());
    OutputDebugStringW(L"\n");
Code language: C++ (cpp)

В верхней части файла .cpp нужно подключить нужные пространства имён, иначе компилятор не распознаёт классы. Полный код ниже:

#include "pch.h"
#include "MainWindow.xaml.h"
#if __has_include("MainWindow.g.cpp")
#include "MainWindow.g.cpp"
#endif

#include <winrt/Microsoft.UI.Xaml.Controls.h>
#include <winrt/Microsoft.UI.Xaml.h>

using namespace winrt;
using namespace Microsoft::UI::Xaml;
using namespace Microsoft::UI::Xaml::Controls;
using namespace Windows::Foundation;

// Документация по WinUI: http://aka.ms/winui-project-info.

namespace winrt::AppWinui::implementation
{
    int32_t MainWindow::MyProperty()
    {
        throw hresult_not_implemented();
    }

    void MainWindow::MyProperty(int32_t /* value */)
    {
        throw hresult_not_implemented();
    }
}

void winrt::AppWinui::implementation::MainWindow::OnGridButtonClick(
winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
    Button targetButton = sender.as<Button>();
    if (!targetButton) return;

    // Получаем строку из свойства Tag
    hstring buttonTag = unbox_value<hstring>(targetButton.Tag());

    OutputDebugStringW(buttonTag.c_str());
	OutputDebugStringW(L"\n");
}
Code language: C++ (cpp)

OutputDebugStringW — системная функция Windows для вывода текста в отладочное окно Visual Studio, используется для логирования данных во время выполнения программы.