그리드(Grid) 레이아웃 학습용 3×3 숫자 키패드 만들기

그리드(Grid) 레이아웃 학습용 3×3 숫자 키패드 만들기

WPF 개발 경험이 있는 분이라면 Grid 컨트롤에 익숙할 텐데, WinUI의 Grid는 WPF와 사용 방식이 거의 동일합니다. 이번 수업에서는 Grid로 숫자 9칸 버튼 화면을 만들고 모든 버튼에 동일한 클릭 이벤트 함수를 연결합니다. 버튼을 클릭하면 해당 버튼의 Tag 값을 가져와 디버그 콘솔에 출력하는 방식으로 테스트합니다. 실제 프로젝트에서는 버튼 Tag 값을 통해 어떤 버튼이 눌렸는지 구분하고 각종 로직을 처리할 수 있습니다.

최종 실행 예시

새 프로젝트를 생성한 뒤 루트 Grid 부분을 아래 코드로 교체하세요：

<Grid Padding="40">
    <!-- 3행 3열 3×3 그리드 레이아웃 -->
    <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>

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

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

    <!-- 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, Grid.Column 속성으로 배치할 셀 위치를 설정합니다. 예시는 3행3열로 좌측 상단 셀은 0행0열(인덱스는 1이 아닌 0부터 시작), 우측 하단 셀은 2행2열입니다.

모든 버튼에 Click=”OnGridButtonClick”로 동일한 이벤트 함수를 바인딩했습니다. XAML의 이벤트 함수명 위에 커서를 올리고 F12 키를 누르면 Visual Studio가 자동으로 백엔드 처리 함수를 생성합니다.

생성된 백엔드 함수 안에서 매개변수로 클릭한 버튼을 가져온 뒤 Tag 값을 읽어 어떤 버튼이 눌렸는지 판단할 수 있습니다.

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

    // 커스텀 Tag 문자열 추출
    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;

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

    // 커스텀 Tag 문자열 추출
    hstring buttonTag = unbox_value<hstring>(targetButton.Tag());

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

OutputDebugStringW는 Windows 기본 제공 디버그 출력 함수로 VS 출력 창에 문자열을 표시해 런타임 정보를 확인하는 디버깅 용도로 사용합니다.