Aprende el control Grid con una cuadrícula de 3×3

Aprende el control Grid con una cuadrícula de 3×3

Los desarrolladores que hayan trabajado con WPF conocerán bien el control Grid; su comportamiento en WinUI es prácticamente idéntico al de WPF. En esta lección crearemos una cuadrícula de botones numéricos 3×3 usando Grid. Todos los botones comparten el mismo manejador de evento click. Al pulsar un botón, recuperaremos su valor Tag y lo imprimiremos en la consola de depuración a modo de demostración. En proyectos reales, puedes usar la propiedad Tag para identificar qué botón se ha pulsado y ejecutar la lógica correspondiente.

Resultado final

Crea un proyecto nuevo y reemplaza el Grid raíz por este código:

<Grid Padding="40">
    <!-- Cuadrícula 3x3: 3 filas, 3 columnas -->
    <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>

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

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

    <!-- Fila 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>Lenguaje del código: HTML, XML (xml)

Grid es un panel de disposición. Se definen filas y columnas mediante RowDefinitions y ColumnDefinitions. Cada control hijo usa las propiedades adjuntas Grid.Row y Grid.Column para indicar su celda. Este ejemplo es una cuadrícula 3×3: la celda superior izquierda es fila 0, columna 0 (los índices empiezan en 0, no en 1), la celda inferior derecha es fila 2, columna 2.

Todos los botones enlazan a la misma función de evento con Click=»OnGridButtonClick». Coloca el cursor sobre el nombre del evento en XAML y pulsa F12 para que Visual Studio genere automáticamente el esqueleto de la función.

Dentro de la función C++ generada, convierte el parámetro sender a Button para acceder a su propiedad Tag y saber qué botón se ha pulsado.

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

    // Obtener cadena Tag personalizada
    hstring buttonTag = unbox_value<hstring>(targetButton.Tag());

    OutputDebugStringW(buttonTag.c_str());
    OutputDebugStringW(L"\n");
Lenguaje del código: C++ (cpp)

Recuerda añadir los espacios de nombres necesarios al principio del archivo .cpp para reconocer los tipos de controles. Código completo a continuación:

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

// Más información sobre 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;

    // Obtener cadena Tag personalizada
    hstring buttonTag = unbox_value<hstring>(targetButton.Tag());

    OutputDebugStringW(buttonTag.c_str());
	OutputDebugStringW(L"\n");
}
Lenguaje del código: C++ (cpp)

OutputDebugStringW es una API nativa de Windows para imprimir texto en la ventana de salida de depuración de Visual Studio, muy útil para registrar información en tiempo de ejecución.