Ein 3×3 Raster zur Erlernung des Grid-Layout-Steuerelements erstellen

Ein 3×3 Raster zur Erlernung des Grid-Layout-Steuerelements erstellen

Entwickler mit WPF-Erfahrung kennen das Grid-Steuerelement bereits gut; die Funktionsweise in WinUI ist nahezu identisch mit WPF. In dieser Lektion erstellen wir ein numerisches 3×3-Tastenfeld mit dem Grid-Steuerelement. Alle Buttons verwenden denselben Klick-Ereignishandler. Beim Klick auf einen Button lesen wir dessen Tag-Eigenschaft aus und geben den Text zur Debug-Ausgabe aus. Dies dient nur als Debug-Demonstration, in echten Projekten können Sie anhand des Tag-Werts erkennen, welcher Button gedrückt wurde und entsprechende Logik ausführen.

Endergebnis-Vorschau

Erstellen Sie ein neues Projekt und ersetzen Sie das root-Element Grid durch folgenden Code:

<Grid Padding="40">
    <!-- 3 Zeilen, 3 Spalten 3x3 Raster-Layout -->
    <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>

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

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

    <!-- Zeile 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-Sprache: HTML, XML (xml)

Das Grid ist ein Layout-Steuerelement. Mit RowDefinitions und ColumnDefinitions legen Sie die Anzahl von Zeilen und Spalten fest. Jedes untergeordnete Steuerelement gibt mit den angehängten Eigenschaften Grid.Row und Grid.Column seine Zellenposition an. Dieses Beispiel nutzt ein 3×3-Raster: die obere linke Zelle ist Zeile 0, Spalte 0 (Indizes beginnen bei 0, nicht bei 1), die untere rechte Zelle ist Zeile 2, Spalte 2.

Alle Buttons binden mit Click=“OnGridButtonClick“ an dieselbe Ereignisfunktion. Platzieren Sie den Cursor auf dem Ereignisnamen im XAML und drücken Sie F12: Visual Studio generiert automatisch die Ereignisfunktion im Header und im .cpp-File.

In der generierten C++-Funktion wandeln Sie den sender-Parameter zu einem Button um und lesen die Tag-Eigenschaft aus, um den angeklickten Button zu identifizieren.

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

    // Benutzerdefinierte Tag-Zeichenfolge auslesen
    hstring buttonTag = unbox_value<hstring>(targetButton.Tag());

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

Fügen Sie am Anfang der .cpp-Datei die benötigten Namespaces und Header ein, damit alle Typen aufgelöst werden. Hier der vollständige Code:

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

    // Benutzerdefinierte Tag-Zeichenfolge auslesen
    hstring buttonTag = unbox_value<hstring>(targetButton.Tag());

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

OutputDebugStringW ist eine native Windows-Debug-Ausgabe-Funktion, die Text in das Debug-Ausgabefenster von Visual Studio schreibt und zur Laufzeitanalyse verwendet wird.