Kontrol WinUI 3 C++ – Kontrol Tombol

Kita sudah menggunakan kontrol tombol di pelajaran sebelumnya, yang paling dasar adalah Button. Selanjutnya kita akan mempelajari jenis tombol lainnya. Tombol adalah kontrol untuk berinteraksi dengan aplikasi, saat diklik akan menjalankan logika program yang sesuai.

Berikut daftar kontrol tombol utama yang disediakan WinUI3 C++:

• Button：Tombol klik standar
• ToggleButton：Tombol yang bisa beralih status terpilih / tidak terpilih
• RepeatButton：Akan terus memicu event klik jika ditekan lama
• HyperlinkButton：Tombol gaya tautan hiperlink
• SplitButton：Kontrol gabungan tombol utama + menu dropdown
• DropDownButton：Tombol yang hanya dilengkapi menu dropdown
• CommandBarButton / AppBarButton：Tombol ikon untuk bilah alat
• MenuFlyoutItem / ToggleMenuFlyoutItem：Item menu klik kanan atau dropdown

Di bawah ini kita tunjukkan cara menulis semua kontrol tersebut di XAML. Cara mengikat event ke kode belakang sama seperti sebelumnya, cara termudah arahkan kursor ke nama event lalu tekan F12 untuk menghasilkan fungsi event otomatis. Kita ubah file MainWindow.xaml.

 <StackPanel Spacing="15" Padding="20" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
     <!-- 1. Button: Standard click button -->
     <Button x:Name="NormalBtn" Content="Standard Button (Button)" Click="NormalBtn_Click"/>

     <!-- 2. ToggleButton: Switchable checked/unchecked state button -->
     <ToggleButton x:Name="ToggleBtn" Content="Toggle Button (ToggleButton)"/>

     <!-- 3. RepeatButton: Trigger click continuously when holding down -->
     <RepeatButton x:Name="RepeatBtn" Content="Repeat Button (RepeatButton)" Click="RepeatBtn_Click"/>

     <!-- 4. HyperlinkButton: Hyperlink style button -->
     <HyperlinkButton Content="Hyperlink Button (HyperlinkButton)" NavigateUri="https://learn.microsoft.com/windows/apps/winui"/>

     <!-- 5. SplitButton: Combined main button + dropdown menu -->
     <SplitButton Content="Split Button (SplitButton)">
         <SplitButton.Flyout>
             <MenuFlyout>
                 <MenuFlyoutItem Text="Option A"/>
                 <MenuFlyoutItem Text="Option B"/>
             </MenuFlyout>
         </SplitButton.Flyout>
     </SplitButton>

     <!-- 6. DropDownButton: Button with dropdown menu only -->
     <DropDownButton Content="Dropdown Button (DropDownButton)">
         <DropDownButton.Flyout>
             <MenuFlyout>
                 <MenuFlyoutItem Text="Function 1"/>
                 <ToggleMenuFlyoutItem Text="Enable Mode"/>
             </MenuFlyout>
         </DropDownButton.Flyout>
     </DropDownButton>

     <!-- 8. MenuFlyoutItem / ToggleMenuFlyoutItem: Right-click / dropdown menu items -->
     <Button Content="Right-click to open menu" Width="220">
         <Button.Flyout>
             <MenuFlyout>
                 <MenuFlyoutItem Text="Normal Menu Item (MenuFlyoutItem)"/>
                 <ToggleMenuFlyoutItem Text="Checkable Menu Item (ToggleMenuFlyoutItem)"/>
                 <MenuFlyoutSeparator/>
                 <MenuFlyoutItem Text="Exit"/>
             </MenuFlyout>
         </Button.Flyout>
     </Button>
 </StackPanel>Code language: HTML, XML (xml)

Arahkan kursor ke bagian Click="NormalBtn_Click" dan Click="RepeatBtn_Click" lalu tekan tombol F12 untuk membuat dua fungsi. Untuk demo ini tidak perlu menambahkan isi logika apapun. Jika tertarik, kamu bisa mencoba menambahkan fungsi logika sendiri.

void winrt::App6::implementation::MainWindow::NormalBtn_Click(winrt::Windows::Foundation::IInspectable const& sender, 
winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{

}

void winrt::App6::implementation::MainWindow::RepeatBtn_Click(winrt::Windows::Foundation::IInspectable const& sender,
 winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{

}
Code language: C++ (cpp)