WinUI 3 C++ Controls – Button Controls

We have already used button controls in previous lessons, and the most basic one is Button. Next, we will learn other types of button controls. Buttons are interactive UI elements that execute custom logic when clicked.

The main button controls provided by WinUI 3 C++ are listed below:

• Button: Standard single-click button
• ToggleButton: Toggle button with checked / unchecked state
• RepeatButton: Fires click events continuously when held down
• HyperlinkButton: Hyperlink-style clickable button
• SplitButton: Combined control with main action button + dropdown flyout menu
• DropDownButton: Button with dropdown flyout menu only
• CommandBarButton / AppBarButton: Icon buttons for toolbars and command bars
• MenuFlyoutItem / ToggleMenuFlyoutItem: Context menu / dropdown menu entries (supports check state for Toggle variant)

The following XAML demonstrates how to declare all these button controls. Event binding for backend logic works exactly the same way as previous examples: place your cursor on the Click event name and press F12 to auto-generate the corresponding event handler method. We will modify MainWindow.xaml as shown below.

 <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)

Place your cursor over Click="NormalBtn_Click" and Click="RepeatBtn_Click", then press F12 to generate the two empty event handler functions. No implementation logic is required for this demo. Interested readers may extend these methods to add custom functional logic.

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)