显示一个九宫格学习Grid

如果有WPF学习经验的同学，应该对这个Grid不陌生，其实在winui中和WPF基本类似。下面我们就用Grid显示一个数字的九宫格按钮，所有的按钮绑定同一个事件处理函数，点击的时候，显示这个按钮的Tag，通过调试函数，把这个按钮的Tag输出到终端中，这里只是调试演示，真正的项目中，读者可以通过按钮的Tag来判断当前是点击那个按钮，然后进行一些其他的逻辑操作。

看最终效果

我们创建一个新的项目，把里面的Grid修改为如下：

<Grid Padding="40">
    <!-- 3 Rows, 3 Columns 3x3 Grid 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>

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

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

    <!-- Row 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=”0″ Grid.Column=”0″ 来设置它处在那个格子，例如上面例子是三行三列，最左上角的格子就算0行0列，下标是从0开始不是1.最右下角的格子就是 2 2

上面通过 Click=”OnGridButtonClick” 绑定同一个函数，同样 读者可以通过F12生成后台执行函数。

然后在后台执行函数中，读者可以通过参数获取到当前的按钮，然后再获取按钮的Tag，这样就可以知道当前点击的是那个按钮了。

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

    // Get custom tag string
    hstring buttonTag = unbox_value<hstring>(targetButton.Tag());

    OutputDebugStringW(buttonTag.c_str());
    OutputDebugStringW(L"\n");
Code language: C++ (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;

// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: 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;

    // Get custom tag string
    hstring buttonTag = unbox_value<hstring>(targetButton.Tag());

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

outputDebugString 这是一个用来输出内容到控制台的函数，是winui 自带的，读者可以通过它来进行一些信息的打印，从而进行调试。