Belajar kontrol Grid dengan tampilan kotak 3×3

Belajar kontrol Grid dengan tampilan kotak 3×3

Bagi kamu yang sudah belajar WPF pasti sudah kenal dengan kontrol Grid, cara kerjanya di WinUI hampir sama persis dengan WPF. Di pelajaran ini kita akan membuat tombol angka berbentuk kotak 3×3 menggunakan Grid. Semua tombol akan terhubung ke satu fungsi klik yang sama. Saat tombol diklik, kita akan membaca nilai Tag tombol lalu menampilkan teks Tag tersebut ke jendela debug sebagai contoh uji coba. Di proyek nyata, kamu bisa pakai nilai Tag untuk mengetahui tombol mana yang ditekan lalu jalankan logika program yang sesuai.

Hasil akhir program

Buat proyek baru lalu ganti kode Grid utama dengan kode berikut:

<Grid Padding="40">
    <!-- Tata letak Grid 3 baris 3 kolom -->
    <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>

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

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

    <!-- Baris 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 adalah kontrol tata letak, kamu bisa menentukan jumlah baris dan kolom dengan RowDefinitions dan ColumnDefinitions. Setiap kontrol di dalam Grid pakai properti tambahan Grid.Row dan Grid.Column untuk menentukan posisi kotaknya. Contoh ini pakai 3 baris 3 kolom: kotak pojok kiri atas ada di baris 0 kolom 0 (indeks mulai dari angka 0 bukan 1), kotak pojok kanan bawah ada di baris 2 kolom 2.

Semua tombol dihubungkan ke fungsi klik yang sama dengan tulisan Click=”OnGridButtonClick”. Letakkan kursor di atas nama fungsi event di XAML lalu tekan tombol F12, Visual Studio akan membuat fungsi latar belakang secara otomatis.

Di dalam fungsi latar belakang yang dibuat, kamu bisa ambil tombol yang diklik dari parameter lalu baca nilai Tag tombol untuk mengetahui tombol mana yang ditekan pengguna.

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

    // Ambil teks dari properti Tag
    hstring buttonTag = unbox_value<hstring>(targetButton.Tag());

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

Jangan lupa tambahkan namespace di bagian atas file cpp agar semua tipe kontrol dikenali, berikut kode lengkapnya:

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

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

    // Ambil teks dari properti Tag
    hstring buttonTag = unbox_value<hstring>(targetButton.Tag());

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

OutputDebugStringW adalah fungsi milik Windows untuk mencetak teks ke jendela debug Visual Studio, sering dipakai untuk menampilkan informasi saat program berjalan guna proses pengecekan bug.