Afficher une grille 3×3 pour apprendre le contrôle Grid

Afficher une grille 3×3 pour apprendre le contrôle Grid

Les développeurs ayant une expérience avec WPF connaissent bien le contrôle Grid ; son fonctionnement dans WinUI est quasiment identique à WPF. Nous allons créer une grille de boutons numériques 3×3 à l’aide du contrôle Grid. Tous les boutons sont liés à la même fonction de gestion de clic. Lors d’un clic sur un bouton, nous récupérons sa propriété Tag et affichons cette chaîne dans la console de débogage à titre de démonstration. Dans un projet réel, vous pouvez utiliser la valeur Tag pour identifier le bouton cliqué et exécuter une logique métier adaptée.

Résultat final

Créez un nouveau projet et remplacez le Grid racine par le code suivant :

<Grid Padding="40">
    <!-- Grille 3x3 : 3 lignes, 3 colonnes -->
    <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>

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

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

    <!-- Ligne 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>Langage du code : HTML, XML (xml)

Le Grid est un conteneur de mise en page. Vous définissez le nombre de lignes et colonnes via RowDefinitions et ColumnDefinitions. Chaque contrôle enfant utilise les propriétés attachées Grid.Row et Grid.Column pour indiquer sa cellule. Cet exemple utilise une grille 3×3 : la cellule en haut à gauche est Ligne 0, Colonne 0 (les indices commencent à 0, pas à 1), la cellule en bas à droite est Ligne 2, Colonne 2.

Tous les boutons partagent le même gestionnaire de clic avec l’attribut Click= »OnGridButtonClick ». Placez votre curseur sur le nom de l’événement dans le XAML et appuyez sur F12 : Visual Studio génère automatiquement la fonction de rappel.

Dans la fonction C++ générée, convertissez le paramètre sender en Button pour accéder à sa propriété Tag et identifier le bouton cliqué.

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

    // Récupérer la chaîne de Tag personnalisée
    hstring buttonTag = unbox_value<hstring>(targetButton.Tag());

    OutputDebugStringW(buttonTag.c_str());
    OutputDebugStringW(L"\n");
Langage du code : C++ (cpp)

Ajoutez les espaces de noms nécessaires en haut du fichier .cpp pour résoudre les types de contrôles. Voici le code complet :

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

// Documentation 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;

    // Récupérer la chaîne de Tag personnalisée
    hstring buttonTag = unbox_value<hstring>(targetButton.Tag());

    OutputDebugStringW(buttonTag.c_str());
	OutputDebugStringW(L"\n");
}
Langage du code : C++ (cpp)

OutputDebugStringW est une API Windows native qui affiche du texte dans la fenêtre de sortie de débogage de Visual Studio, utile pour journaliser des informations à l’exécution.