Estudando o controle Grid com uma grade 3×3

Estudando o controle Grid com uma grade 3×3

Quem já tem experiência com WPF vai reconhecer o controle Grid facilmente; o funcionamento no WinUI é praticamente igual ao WPF. Nesta aula, vamos criar uma grade de botões numéricos 3×3 usando o Grid. Todos os botões compartilham a mesma função de clique. Ao clicar em um botão, capturamos o valor da propriedade Tag e exibimos essa string na janela de depuração como demonstração. Em projetos reais, você pode usar o Tag para identificar qual botão foi pressionado e executar lógicas diferentes.

Resultado final

Crie um novo projeto e substitua o Grid raiz pelo código abaixo:

<Grid Padding="40">
    <!-- Grade 3 linhas e 3 colunas -->
    <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>

    <!-- Linha 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"/>

    <!-- Linha 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"/>

    <!-- Linha 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)

O Grid é um painel de layout. Você define linhas e colunas com RowDefinitions e ColumnDefinitions. Cada controle filho usa as propriedades Grid.Row e Grid.Column para definir em qual célula ele fica. Este exemplo é uma grade 3×3: a célula superior esquerda é linha 0, coluna 0 (os índices começam em 0, não em 1), a célula inferior direita é linha 2, coluna 2.

Todos os botões estão vinculados à mesma função de clique via Click=”OnGridButtonClick”. Posicione o cursor em cima do nome do evento no XAML e aperte F12 para o Visual Studio gerar automaticamente a função de callback.

Dentro da função gerada em C++, converta o parâmetro sender para Button para ler o valor da Tag e saber qual botão foi clicado.

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

    // Pegar a string personalizada da Tag
    hstring buttonTag = unbox_value<hstring>(targetButton.Tag());

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

É necessário incluir os namespaces no topo do arquivo .cpp para não haver erro de tipo. Código completo abaixo:

#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;

// Documentação 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;

    // Pegar a string personalizada da Tag
    hstring buttonTag = unbox_value<hstring>(targetButton.Tag());

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

OutputDebugStringW é uma API nativa do Windows que exibe texto na janela de depuração do Visual Studio, usada para imprimir logs durante a execução.