WinUI 3 C++ 控制項篇－按鈕控制項

我們在前章節已經使用過按鈕控制項，最基礎的就是 Button。接下來會介紹其他各式按鈕元件。按鈕是用來和程式互動的控制項，使用者點擊按鈕後就會執行對應的程式邏輯。

WinUI 3 C++ 提供的主要按鈕控制項如下：

• Button：標準單擊按鈕
• ToggleButton：可切換選取/未選取狀態的切換按鈕
• RepeatButton：長按時持續觸發點擊事件
• HyperlinkButton：超連結樣式按鈕
• SplitButton：主執行按鈕＋下拉選單複合控制項
• DropDownButton：僅具備下拉選單的按鈕
• CommandBarButton / AppBarButton：工具列專用圖示按鈕
• MenuFlyoutItem / ToggleMenuFlyoutItem：右鍵選單、下拉選單內的選項（Toggle 版本可勾選）

下方示範如何在 XAML 宣告上述所有按鈕控制項。後端事件綁定方式和前面章節完全相同，最簡單操作是將游標移到 Click 事件名稱上按下 F12，自動產生對應的事件函式，我們修改 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)

將游標分別放在 Click="NormalBtn_Click" 與 Click="RepeatBtn_Click" 後按下 F12，自動產生兩個空白事件函式即可，本範例不需要實作內容。有興趣的讀者可以自行擴充新增功能邏輯。

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)