First add three InfoBar controls in XAML

    <StackPanel Spacing="10">
        <TextBlock Text="InfoBar Message Bar Demo:" FontSize="16"/>
        <InfoBar x:Name="InfoSuccess" Severity="Success" Title="Success" Message="Operation completed successfully." IsOpen="False"/>
        <InfoBar x:Name="InfoWarning" Severity="Warning" Title="Warning" Message="Unsaved changes detected." IsOpen="False"/>
        <InfoBar x:Name="InfoError" Severity="Error" Title="Error" Message="Failed to load file, please retry." IsOpen="False"/>
        <StackPanel Orientation="Horizontal" Spacing="10">
            <Button Content="Show Success Info" Click="BtnShowInfoSuccess_Click"/>
            <Button Content="Show Warning Info" Click="BtnShowInfoWarning_Click"/>
            <Button Content="Show Error Info" Click="BtnShowInfoError_Click"/>
        </StackPanel>
    </StackPanel>

Then add three buttons and bind click events. Toggle the visibility state of each info bar inside the event handlers.

void winrt::AppWinui::implementation::MainWindow::BtnShowInfoSuccess_Click(
winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
    InfoSuccess().IsOpen(true);
    InfoWarning().IsOpen(false);
    InfoError().IsOpen(false);
}

void winrt::AppWinui::implementation::MainWindow::BtnShowInfoWarning_Click(
winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
    InfoSuccess().IsOpen(false);
    InfoWarning().IsOpen(true);
    InfoError().IsOpen(false);
}

void winrt::AppWinui::implementation::MainWindow::BtnShowInfoError_Click(
winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
    InfoSuccess().IsOpen(false);
    InfoWarning().IsOpen(false);
    InfoError().IsOpen(true);
}

WinUI 3 C++ Controls Guide – InfoBar Message Bar

In XAML, add a button to open this Popup on click. We also declare a Popup hidden by default, which will only appear after clicking the button.

    <StackPanel Spacing="24" VerticalAlignment="Top">

        <!-- Raw Popup Root Container -->
        <Popup x:Name="MainPopup" Width="320" Height="180">
            <Border Background="White" BorderBrush="Gray" BorderThickness="1" CornerRadius="8" Padding="16">
                <StackPanel Spacing="12">
                    <TextBlock Text="Custom Popup Content" FontSize="18"/>
                    <TextBlock Text="This is raw Popup base container"/>
                    <Button Content="Close Popup" Click="BtnClosePopup_Click"/>
                </StackPanel>
            </Border>
        </Popup>

        <Button Content="Open Raw Popup Container" Click="BtnOpenPopup_Click" HorizontalAlignment="Left"
        ToolTipService.ToolTip="Open base raw popup layer"/>

    </StackPanel>

Then implement the click event BtnOpenPopup_Click to show the Popup. The tag <Popup x:Name="MainPopup" Width="320" Height="180"> ...</Popup> creates a floating window hidden by default. Inside it there is a button <Button Content="Close Popup" Click="BtnClosePopup_Click"/> that closes the parent Popup when clicked.

Press F12 to auto-generate the two button click event handlers

.H Header File

#pragma once

#include "MainWindow.g.h"

namespace winrt::AppWinui::implementation
{
    struct MainWindow : MainWindowT<MainWindow>
    {
    public:
        MainWindow();

        int32_t MyProperty();
        void MyProperty(int32_t value);

        void BtnOpenPopup_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e);
        void BtnClosePopup_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e);
    };
}

namespace winrt::AppWinui::factory_implementation
{
    struct MainWindow : MainWindowT<MainWindow, implementation::MainWindow>
    {
    };
}

#include "pch.h"
#include "MainWindow.xaml.h"
#if __has_include("MainWindow.g.cpp")
#include "MainWindow.g.cpp"
#endif

#include <winrt/Windows.Foundation.h>
#include <winrt/Windows.Globalization.h>

#include <winrt/Windows.UI.h> //Windows::UI::Colors


// Global namespace aliases to fix missing class / RoutedEventArgs errors
using namespace winrt;
using namespace Windows::Foundation;
using namespace Windows::Foundation::Collections;
using namespace Microsoft::UI::Xaml;
using namespace Microsoft::UI::Xaml::Controls;
using namespace Microsoft::UI::Xaml::Controls::Primitives;


// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: 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();
    }

    MainWindow::MainWindow()
    {
        InitializeComponent();
    }
}


void winrt::AppWinui::implementation::MainWindow::BtnOpenPopup_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
    MainPopup().IsOpen(true);
}

void winrt::AppWinui::implementation::MainWindow::BtnClosePopup_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
    MainPopup().IsOpen(false);
}

WinUI 3 C++ Controls Guide – Floating Popup Windows (Popup Notification)

Frame Page navigation frame (hosts Page to implement page jumps)
Page Independent page carrier
NavigationView Sidebar navigation view
NavigationViewItem Navigation menu item
NavigationViewItemHeader Navigation group title
NavigationViewItemSeparator Navigation divider line
TabView Multi-tab container
TabViewItem Single tab page
Pivot Horizontal sliding tab control
PivotItem Pivot page item
SplitView Side drawer split layout view
SplitViewPaneInfo SplitView sidebar configuration
BreadcrumbBar Path breadcrumb navigation bar
BreadcrumbBarItem Breadcrumb path node

We have covered sidebar components before, and we have also used Frame, Page and other navigation-related controls. Below I will demonstrate the controls starting from TabView.

The following video demonstrates how these controls work, including the left sidebar and tab pages.

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="AppWinui.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppWinui"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="AppWinui">

    <Grid>
        <!-- SplitView SplitViewPaneInfo -->
        <SplitView x:Name="DemoSplitView"
                   DisplayMode="CompactInline"
                   CompactPaneLength="52"
                   OpenPaneLength="260"
                   IsPaneOpen="True">

            <!-- SplitView Side Pane -->
            <SplitView.Pane>
                <StackPanel Padding="10" Spacing="12">
                    <TextBlock Text="Side Menu" FontSize="16" FontWeight="SemiBold"/>
                    <Button x:Name="BtnShowTabView" Content="Open TabView Demo"/>
                    <Button x:Name="BtnShowPivot" Content="Open Pivot Demo"/>
                </StackPanel>
            </SplitView.Pane>

            <!-- SplitView Main Content Area -->
            <SplitView.Content>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <StackPanel x:Name="MainContentPanel" Grid.Row="1" Margin="8" Spacing="20" VerticalAlignment="Top">
             
                        <TextBlock Text="TabView Multi-Tab Demo" FontSize="20"/>
                        <TabView x:Name="DemoTabView">
                            <TabViewItem Header="Tab One">
                                <StackPanel Margin="12" Spacing="8">
                                    <TextBlock Text="Content inside Tab 1"/>
                                    <Button Content="Tab 1 Sample Button"/>
                                </StackPanel>
                            </TabViewItem>
                            <TabViewItem Header="Tab Two">
                                <Border Background="#E8F4FF" Padding="12" CornerRadius="6">
                                    <TextBlock Text="Styled content inside Tab 2"/>
                                </Border>
                            </TabViewItem>
                            <TabViewItem Header="Tab Three">
                                <TextBox PlaceholderText="Input box inside Tab 3" Width="300"/>
                            </TabViewItem>
                        </TabView>

                        <!-- Pivot / PivotItem -->
                        <TextBlock Text="Pivot Horizontal Sliding Demo" FontSize="20"/>
                        <Pivot x:Name="DemoPivot">
                            <PivotItem Header="Slide Page A">
                                <TextBlock Margin="12" Text="Horizontal slide page A content"/>
                            </PivotItem>
                            <PivotItem Header="Slide Page B">
                                <Border Background="#FFF7E6" Padding="12" CornerRadius="6">
                                    <TextBlock Text="Styled slide page B content"/>
                                </Border>
                            </PivotItem>
                            <PivotItem Header="Slide Page C">
                                <ToggleSwitch Header="Toggle option on slide page C" Margin="12"/>
                            </PivotItem>
                        </Pivot>
                    </StackPanel>
                </Grid>
            </SplitView.Content>
        </SplitView>
    </Grid>
    
</Window>

WinUI 3 C++ Controls Guide – Navigation & Tabs

All above controls are layout-related. Below is a simple demo of their usage. Everything is rendered in XAML only. If you need backend C++ interaction, refer to previous lessons for implementation. There are too many controls to cover each one in full detail here.

Below is our complete XAML code

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="AppWinui.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppWinui"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="AppWinui">

    <!-- Global scroll container for overflow content -->
    <ScrollViewer VerticalScrollBarVisibility="Auto" Padding="16">
        <StackPanel Spacing="30">

            <!-- 1. Grid - Grid Layout (Row & Column Division) -->
            <Expander Header="Grid - Grid Layout (Row &amp; Column Division)">
                <Grid Width="450" Height="200" Background="#F0F0F0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="120"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Border Grid.Row="0" Grid.Column="0" Background="LightBlue">
                        <TextBlock Text="Top Left Cell" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                    <Border Grid.Row="0" Grid.Column="1" Background="LightGreen">
                        <TextBlock Text="Top Right Cell" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                    <Border Grid.Row="1" Grid.Column="0" Background="LightPink">
                        <TextBlock Text="Bottom Left Cell" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                    <Border Grid.Row="1" Grid.Column="1" Background="LightGoldenrodYellow">
                        <TextBlock Text="Bottom Right Cell" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </Grid>
            </Expander>

            <!-- 2. StackPanel - Stack Panel (Vertical / Horizontal Alignment) -->
            <Expander Header="StackPanel - Stack Panel (Vertical / Horizontal Alignment)">
                <StackPanel Spacing="10">
                    <TextBlock Text="Vertical Stack (Default):"/>
                    <StackPanel Spacing="6">
                        <Button Content="Vertical Button 1"/>
                        <Button Content="Vertical Button 2"/>
                        <Button Content="Vertical Button 3"/>
                    </StackPanel>

                    <TextBlock Text="Horizontal Stack (Orientation=Horizontal):"/>
                    <StackPanel Orientation="Horizontal" Spacing="10">
                        <TextBox PlaceholderText="Input Box A" Width="140"/>
                        <TextBox PlaceholderText="Input Box B" Width="140"/>
                        <Button Content="Confirm"/>
                    </StackPanel>
                </StackPanel>
            </Expander>

            <!-- 3. RelativePanel - Relative Anchoring Layout -->
            <Expander Header="RelativePanel - Relative Anchoring Layout">
                <RelativePanel Width="480" Height="200" Background="#F5F5F5" Padding="12">
                    <TextBlock x:Name="txtTitle" Text="Title Text" FontSize="20"/>
                    <TextBox x:Name="txtInput" RelativePanel.Below="txtTitle" Width="340" PlaceholderText="Input box below title"/>
                    <Button Content="Submit" RelativePanel.RightOf="txtInput" RelativePanel.AlignBottomWith="txtInput"/>
                    <TextBlock Text="Footer description text" RelativePanel.Below="txtInput" Margin="0,10,0,0" Foreground="Gray"/>
                </RelativePanel>
            </Expander>

            <!-- 4. Canvas - Absolute Coordinate Canvas -->
            <Expander Header="Canvas - Absolute Coordinate Canvas">
                <Canvas Width="350" Height="200" Background="#EEEEEE">
                    <Rectangle Canvas.Left="30" Canvas.Top="30" Width="80" Height="80" Fill="CornflowerBlue"/>
                    <Ellipse Canvas.Left="140" Canvas.Top="60" Width="90" Height="90" Fill="DarkOrange"/>
                    <TextBlock Canvas.Left="40" Canvas.Top="140" Text="Fixed coordinate text"/>
                </Canvas>
            </Expander>

            <!-- 5. Border - Border Container (Rounded / Border / Background) -->
            <Expander Header="Border - Border Container (Rounded Corner / Border / Background)">
                <Border Width="320" Height="160"
                        Background="LightSkyBlue"
                        BorderBrush="DarkBlue"
                        BorderThickness="3"
                        CornerRadius="12">
                    <TextBlock Text="Container with rounded corners &amp; border" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="15"/>
                </Border>
            </Expander>

            <!-- 6. Viewbox - Auto Scale Container -->
            <Expander Header="Viewbox - Auto Scale Container">
                <Viewbox Width="260" Height="120">
                    <StackPanel Orientation="Horizontal" Spacing="8">
                        <Button Content="Scale Button 1"/>
                        <Button Content="Scale Button 2"/>
                        <Button Content="Scale Button 3"/>
                    </StackPanel>
                </Viewbox>
            </Expander>

            <!-- 7. Expander - Collapsible Expand Panel -->
            <Expander Header="Expander - Collapsible Expand Panel">
                <StackPanel Spacing="6">
                    <TextBlock Text="Content displayed after expand"/>
                    <CheckBox Content="Option A"/>
                    <CheckBox Content="Option B"/>
                </StackPanel>
            </Expander>

            <!-- 8. ContentPresenter - Content Template Host -->
            <Expander Header="ContentPresenter - Content Template Host">
                <ContentPresenter Width="300" Height="80">
                    <ContentPresenter.Content>
                        <Border Background="LightCoral" CornerRadius="6">
                            <TextBlock Text="ContentPresenter hosts any child content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ContentPresenter.Content>
                </ContentPresenter>
            </Expander>

            <!-- 9. ItemsControl - Basic Non-Virtualized List Container -->
            <Expander Header="ItemsControl - Basic Non-Virtualized List Container">
                <ItemsControl Width="320">
                    <ItemsControl.Items>
                        <TextBlock Text="List Item 1" Margin="0,4"/>
                        <TextBlock Text="List Item 2" Margin="0,4"/>
                        <TextBlock Text="List Item 3" Margin="0,4"/>
                        <TextBlock Text="List Item 4" Margin="0,4"/>
                    </ItemsControl.Items>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border Background="#F0F0F0" Margin="0,3" Padding="6">
                                <TextBlock Text="{Binding}"/>
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Expander>

        </StackPanel>
    </ScrollViewer>
</Window>

WinUI 3 C++ Controls Guide – Layout Containers

ColorPicker Full color picker
ColorSpectrum Color gamut panel
ColorSlider Single channel slider (RGB/Alpha)

ColorPicker Full color picker
ColorSpectrum Color gamut panel
ColorSlider Single channel slider (RGB/Alpha)

First create controls in XAML and assign x:Name for backend initialization and value retrieval

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="AppWinui.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppWinui"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="AppWinui">

    <ScrollViewer Padding="30" VerticalScrollBarVisibility="Auto">
        <StackPanel Spacing="35">

            <!-- Date & Time Controls Group -->
            <Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
                <StackPanel Spacing="12">
                    <TextBlock Text="6. Date &amp; Time Selection Controls" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <StackPanel Orientation="Horizontal" Spacing="15" VerticalAlignment="Top">
                        <!-- DatePicker -->
                        <StackPanel Spacing="6">
                            <TextBlock Text="DatePicker"/>
                            <DatePicker x:Name="myDatePicker" Width="300"/>
                        </StackPanel>
                        <!-- TimePicker -->
                        <StackPanel Spacing="6">
                            <TextBlock Text="TimePicker"/>
                            <TimePicker  x:Name="myTimePicker" Width="250"/>
                        </StackPanel>
                        <!-- CalendarDatePicker -->
                        <StackPanel Spacing="6">
                            <TextBlock Text="CalendarDatePicker"/>
                            <CalendarDatePicker x:Name="myCdp" Width="180"/>
                        </StackPanel>
                    </StackPanel>

                    <TextBlock Text="CalendarView (Full Calendar View)"/>
                    <CalendarView Width="480" Height="280">
                        <!-- Custom CalendarViewDayItem sample -->
                        <CalendarView.CalendarViewDayItemStyle>
                            <Style TargetType="CalendarViewDayItem">
                                <Setter Property="Margin" Value="2"/>
                                <Setter Property="Height" Value="36"/>
                                <Setter Property="Width" Value="36"/>
                            </Style>
                        </CalendarView.CalendarViewDayItemStyle>
                    </CalendarView>
                </StackPanel>
            </Border>

            <!-- Color Picker Controls Group -->
            <Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
                <StackPanel Spacing="12">
                    <TextBlock Text="7. Color Selection Controls" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <!-- Full ColorPicker (built-in ColorSpectrum + ColorSlider internally) -->
                    <ColorPicker x:Name="myColorPicker" Width="420" Height="320"/>
                </StackPanel>
            </Border>

            <Button Content="Get Value" Click="Button_Click"/>

        </StackPanel>
    </ScrollViewer>

</Window>

Add a button with Click=”Button_Click”, press F12 to generate click event handler

Set and Get Values

Set default values inside CPP constructor, retrieve values in button click event

#include "pch.h"
#include "MainWindow.xaml.h"
#if __has_include("MainWindow.g.cpp")
#include "MainWindow.g.cpp"
#endif

#include <winrt/Windows.Foundation.h>
#include <winrt/Windows.Globalization.h>

#include <winrt/Windows.UI.h> //Windows::UI::Colors


using namespace winrt;
using namespace Windows::Globalization;
using namespace Windows::Foundation;
using namespace Microsoft::UI::Xaml::Controls;



// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: 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();
    }

    MainWindow::MainWindow()
    {
        InitializeComponent();

        //set
        Windows::Globalization::Calendar cal;
        // Subtract one day to get yesterday
        cal.AddDays(-1);

        // Assign to DatePicker
        myDatePicker().SelectedDate(cal.GetDateTime());

        Windows::Foundation::TimeSpan noonTime = std::chrono::hours(12) + std::chrono::minutes(0);
        myTimePicker().SelectedTime(noonTime);

        myCdp().Date(cal.GetDateTime());

        myColorPicker().Color(Windows::UI::Colors::Red());

    }

}


void winrt::AppWinui::implementation::MainWindow::Button_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
    // 1. DatePicker
    winrt::Windows::Foundation::IReference<winrt::Windows::Foundation::DateTime> dateRef = myDatePicker().SelectedDate();
    if (dateRef != nullptr)
    {
        auto dt = dateRef.Value();
        // dt is DateTime for further processing
    }
   

    // 2. TimePicker
    auto timeRef = myTimePicker().SelectedTime();
   

    // 3. CalendarDatePicker
    auto cdpRef = myCdp().Date();
   

    // 4. ColorPicker
    Windows::UI::Color color = myColorPicker().Color();
    std::wstring colorLog = L"ColorPicker R=" + std::to_wstring(color.R)
        + L" G=" + std::to_wstring(color.G) + L" B=" + std::to_wstring(color.B) + L"\n";

    OutputDebugStringW(colorLog.c_str());
}

WinUI 3 C++ Controls Guide — Date & Color Selection Controls

Modify XAML

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="AppWinui.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppWinui"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="AppWinui">

    <ScrollViewer Padding="20" VerticalScrollMode="Auto">
        <StackPanel Spacing="32">
            <!-- 1. Slider - Single Value Slider -->
            <StackPanel>
                <TextBlock Text="1. Slider (Single Value)" FontSize="16" FontWeight="SemiBold"/>
                <Slider
                    x:Name="SingleSlider"
                    Width="500"
                    Minimum="0"
                    Maximum="100"
                    Value="50"
                    TickPlacement="BottomRight"
                    TickFrequency="10"/>
                <!-- Separate TextBlock binding to avoid string concatenation syntax errors -->
                <TextBlock Text="Current Value: " FontSize="14">
                    <Run Text="{x:Bind SingleSlider.Value}"/>
                </TextBlock>
            </StackPanel>


            <!-- 3. ProgressBar - Linear Progress Indicator -->
            <StackPanel>
                <TextBlock Text="3. ProgressBar (Linear)" FontSize="16" FontWeight="SemiBold"/>
                <ProgressBar
                    x:Name="LinearProgress"
                    Width="500"
                    Height="10"
                    Minimum="0"
                    Maximum="100"
                    Value="65"/>
                <TextBlock Text="Progress: " FontSize="14">
                    <Run Text="{x:Bind LinearProgress.Value}"/>
                </TextBlock>
                <!-- Indeterminate loading state -->
                <ProgressBar Width="500" Height="10" IsIndeterminate="True" Margin="0,8,0,0"/>
                <TextBlock Text="Indeterminate Loading State" FontSize="12" Foreground="#666"/>
            </StackPanel>

            <!-- 4. ProgressRing - Circular Loading Ring -->
            <StackPanel Orientation="Horizontal" Spacing="40">
                <StackPanel>
                    <TextBlock Text="4. ProgressRing (Determinate)" FontSize="16" FontWeight="SemiBold"/>
                    <ProgressRing
                        x:Name="RingProgress"
                        Width="60" Height="60"
                        Minimum="0" Maximum="100" Value="40"/>
                    <TextBlock HorizontalAlignment="Center">
                        <Run Text="{x:Bind RingProgress.Value}"/>
                    </TextBlock>
                </StackPanel>
                <StackPanel>
                    <TextBlock Text="ProgressRing (Loading)" FontSize="16" FontWeight="SemiBold"/>
                    <ProgressRing Width="60" Height="60" IsIndeterminate="True"/>
                    <TextBlock Text="Loading..." HorizontalAlignment="Center"/>
                </StackPanel>
            </StackPanel>
        </StackPanel>
    </ScrollViewer>

</Window>

Remove the properties used in the previous lesson from IDL, C++ and .h files

Source Code Download

WinUI 3 C++ Controls Guide – Sliders & Progress Bar Controls

Add Controls in XAML

First modify your XAML markup. If your page is not a Window type, refer to the example below.

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="AppWinui.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppWinui"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="AppWinui">

    <ScrollViewer VerticalScrollMode="Auto" Padding="16" Background="#F7F8FA">
        <StackPanel Spacing="36">
            <!-- 1. ListView + ListViewItem + ItemsStackPanel -->
            <StackPanel>
                <TextBlock Text="1. ListView (ItemsStackPanel)" FontSize="17" FontWeight="SemiBold"/>
                <ListView Height="180" Margin="0 8 0 0">
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <ItemsStackPanel/>
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>

                    <ListViewItem Background="White" Padding="10">
                        <StackPanel Orientation="Horizontal" Spacing="10">
                            <Ellipse Width="36" Height="36" Fill="#4285F4"/>
                            <TextBlock Text="Item One" FontSize="15" VerticalAlignment="Center"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem Background="White" Padding="10">
                        <StackPanel Orientation="Horizontal" Spacing="10">
                            <Ellipse Width="36" Height="36" Fill="#EA4335"/>
                            <TextBlock Text="Item Two" FontSize="15" VerticalAlignment="Center"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem Background="White" Padding="10">
                        <StackPanel Orientation="Horizontal" Spacing="10">
                            <Ellipse Width="36" Height="36" Fill="#FBBC05"/>
                            <TextBlock Text="Item Three" FontSize="15" VerticalAlignment="Center"/>
                        </StackPanel>
                    </ListViewItem>
                </ListView>
            </StackPanel>

            <!-- 2. GridView + GridViewItem + ItemsWrapGrid  -->
            <StackPanel>
                <TextBlock Text="2. GridView (ItemsWrapGrid)" FontSize="17" FontWeight="SemiBold"/>
                <GridView Height="220" Margin="0 8 0 0">
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <ItemsWrapGrid ItemWidth="120" ItemHeight="140"/>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>

                    <GridViewItem Margin="4" Background="White" CornerRadius="6" Padding="8">
                        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="6">
                            <Rectangle Width="70" Height="70" Fill="#FF7A7A" />
                            <TextBlock Text="Tile 1" FontSize="14"/>
                        </StackPanel>
                    </GridViewItem>
                    <GridViewItem Margin="4" Background="White" CornerRadius="6" Padding="8">
                        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="6">
                            <Rectangle Width="70" Height="70" Fill="#48CFC0" />
                            <TextBlock Text="Tile 2" FontSize="14"/>
                        </StackPanel>
                    </GridViewItem>
                    <GridViewItem Margin="4" Background="White" CornerRadius="6" Padding="8">
                        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="6">
                            <Rectangle Width="70" Height="70" Fill="#FFD470" />
                            <TextBlock Text="Tile 3" FontSize="14"/>
                        </StackPanel>
                    </GridViewItem>
                    <GridViewItem Margin="4" Background="White" CornerRadius="6" Padding="8">
                        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="6">
                            <Rectangle Width="70" Height="70" Fill="#8A3797" />
                            <TextBlock Text="Tile 4" FontSize="14"/>
                        </StackPanel>
                    </GridViewItem>
                </GridView>
            </StackPanel>

            <!-- 3. ItemsRepeater + StackLayout (ItemsStackPanel)  -->
            <StackPanel>
                <TextBlock Text="3. ItemsRepeater - StackLayout" FontSize="17" FontWeight="SemiBold"/>
                <ItemsRepeater Height="160" Margin="0 8 0 0" ItemsSource="{x:Bind ListData}">
                    <ItemsRepeater.Layout>
                        <StackLayout/>
                    </ItemsRepeater.Layout>
                    <ItemsRepeater.ItemTemplate>
                        <DataTemplate x:DataType="x:String">
                            <Border Background="White" Margin="3" Padding="8" CornerRadius="5">
                                <StackPanel Orientation="Horizontal" Spacing="8">
                                    <FontIcon Glyph="&#xE700;" FontSize="22" Foreground="#0078D4"/>
                                    <TextBlock Text="{x:Bind}" FontSize="15" VerticalAlignment="Center"/>
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </ItemsRepeater.ItemTemplate>
                </ItemsRepeater>
            </StackPanel>

            <!-- 4. ItemsRepeater + ItemsWrapGrid  -->
            <StackPanel>
                <TextBlock Text="4. ItemsRepeater + ItemsWrapGrid Panel" FontSize="17" FontWeight="SemiBold"/>
                <ItemsRepeater Height="200" Margin="0 8 0 0" ItemsSource="{x:Bind GridData}">
                    <ItemsRepeater.ItemTemplate>
                        <DataTemplate x:DataType="x:String">
                            <Border Background="#EFF5FF" Margin="4" CornerRadius="6">
                                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="4">
                                    <FontIcon Glyph="&#xE80F;" FontSize="28" Foreground="#2463EB"/>
                                    <TextBlock Text="{x:Bind}" FontSize="13"/>
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </ItemsRepeater.ItemTemplate>
                </ItemsRepeater>
            </StackPanel>

            <!-- 5. ItemsRepeater + LinedFlowLayout  -->
            <StackPanel>
                <TextBlock Text="5. ItemsRepeater - LinedFlowLayout" FontSize="17" FontWeight="SemiBold"/>
                <ItemsRepeater Height="240" Margin="0 8 0 0" ItemsSource="{x:Bind FlowData}">
                    <ItemsRepeater.Layout>
                        <LinedFlowLayout LineHeight="80"/>
                    </ItemsRepeater.Layout>
                    <ItemsRepeater.ItemTemplate>
                        <DataTemplate x:DataType="x:String">
                            <Border Background="White" Padding="10" Margin="3" CornerRadius="5" BorderBrush="#E0E2E6" BorderThickness="1">
                                <StackPanel Orientation="Horizontal" Spacing="8">
                                    <Rectangle Width="50" Height="50" Fill="#10B981"/>
                                    <TextBlock Text="{x:Bind}" FontSize="13" VerticalAlignment="Center"/>
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </ItemsRepeater.ItemTemplate>
                </ItemsRepeater>
            </StackPanel>
        </StackPanel>
    </ScrollViewer>

</Window>

We used ItemsSource to bind data sources here, data objects are constructed in backend C++ code, for example ItemsSource=”{x:Bind FlowData}”.

Add Properties in IDL File

Add three bindable properties: ListData, GridData, FlowData

namespace AppWinui
{
    [default_interface]
    runtimeclass MainWindow : Microsoft.UI.Xaml.Window
    {
        MainWindow();
        Int32 MyProperty;

        Windows.Foundation.Collections.IObservableVector<String> ListData{ get; };
        Windows.Foundation.Collections.IObservableVector<String> GridData{ get; };
        Windows.Foundation.Collections.IObservableVector<String> FlowData{ get; };

    }
}

Modify Header (.h) File

Remove constructor implementation, keep only declaration.

Add three private member variables to store data collections.

Add three public getter methods to expose data for XAML binding, e.g. ListData().

#pragma once

#include "MainWindow.g.h"

namespace winrt::AppWinui::implementation
{
    struct MainWindow : MainWindowT<MainWindow>
    {

    private:
        winrt::Windows::Foundation::Collections::IObservableVector<hstring> m_listData;
        winrt::Windows::Foundation::Collections::IObservableVector<hstring> m_gridData;
        winrt::Windows::Foundation::Collections::IObservableVector<hstring> m_flowData;
    public:

        winrt::Windows::Foundation::Collections::IObservableVector<hstring> ListData();
        winrt::Windows::Foundation::Collections::IObservableVector<hstring> GridData();
        winrt::Windows::Foundation::Collections::IObservableVector<hstring> FlowData();

        MainWindow();

        int32_t MyProperty();
        void MyProperty(int32_t value);
    };
}

namespace winrt::AppWinui::factory_implementation
{
    struct MainWindow : MainWindowT<MainWindow, implementation::MainWindow>
    {
    };
}

Initialize Data Sources in .cpp File

#include "pch.h"
#include "MainWindow.xaml.h"
#if __has_include("MainWindow.g.cpp")
#include "MainWindow.g.cpp"
#endif

using namespace winrt;
using namespace Microsoft::UI::Xaml;

// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: 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();
    }

    MainWindow::MainWindow()
    {
        InitializeComponent();

        m_listData = winrt::single_threaded_observable_vector<hstring>(
            { L"Alpha", L"Beta", L"Gamma" });

        m_gridData = winrt::single_threaded_observable_vector<hstring>(
            { L"Tile A", L"Tile B", L"Tile C", L"Tile D" });

        m_flowData = winrt::single_threaded_observable_vector<hstring>(
            { L"Flow Item 1", L"Flow Item 2", L"Flow Item 3" });
    }


    winrt::Windows::Foundation::Collections::IObservableVector<hstring> MainWindow::ListData()
    {
        return m_listData;
    }

    winrt::Windows::Foundation::Collections::IObservableVector<hstring> MainWindow::GridData()
    {
        return m_gridData;
    }

    winrt::Windows::Foundation::Collections::IObservableVector<hstring> MainWindow::FlowData()
    {
        return m_flowData;
    }
}

Inside the constructor, initialize observable vector data and assign to private fields, then implement three public getter functions to return the collections.

Project Download

WinUI 3 C++ Controls Guide – List & Collection Views

First add a ListBox and a Button in XAML

<Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
    <StackPanel Spacing="12">
        <TextBlock Text="5. ListBox - Fixed Height Single/Multi Select List" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
        <Button Content="Add Item" Click="Button_Click"/>
        <ListBox Width="280" Height="140" x:Name="myListBox" SelectionMode="Multiple">
            <ListBoxItem Content="Documents"/>
            <ListBoxItem Content="Pictures"/>
            <ListBoxItem Content="Videos"/>
            <ListBoxItem Content="Audios"/>
            <ListBoxItem Content="Installers"/>
        </ListBox>
    </StackPanel>
</Border>

We added a button; clicking it will generate a new ListBox item. To operate the ListBox in backend code, we assign it a name: x:Name=”myListBox”

Press F12 to generate the event handler function automatically.

void winrt::App6::implementation::MainWindow::Button_Click(
winrt::Windows::Foundation::IInspectable const& sender,
 winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
    // Get the Items collection of ListBox
    auto itemCollection = myListBox().Items();

    itemCollection.Append(box_value(L"New Item"));
}

In the event function, we first obtain the control instance named x:Name=”myListBox”, get its Items collection, then use Append to add new content.

WinUI 3 C++ Controls Guide – Dynamically Add Items to ListBox

Below is a demo showing these commonly used controls.

There may be minor differences between different SDK versions; the demo uses Visual Studio 2022.

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="App6.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App6"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="App6 Control Demo">

    <ScrollViewer Padding="30" VerticalScrollBarVisibility="Auto">
        <StackPanel Spacing="35">
            <!-- 1. CheckBox Multi-selection Checkbox -->
            <Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
                <StackPanel Spacing="12">
                    <TextBlock Text="1. CheckBox - Multi-selection Checkbox" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <CheckBox Content="Option A" IsChecked="True"/>
                    <CheckBox Content="Option B"/>
                    <CheckBox Content="Option C" IsThreeState="True"/>
                </StackPanel>
            </Border>

            <!-- 2. RadioButton Grouped Single Selection -->
            <Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
                <StackPanel Spacing="12">
                    <TextBlock Text="2. RadioButton - Grouped Single Selection (GroupName)" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <TextBlock Text="Gender Group (GroupName=Gender)"/>
                    <RadioButton GroupName="Gender" Content="Male" IsChecked="True"/>
                    <RadioButton GroupName="Gender" Content="Female"/>
                    <RadioButton GroupName="Gender" Content="Prefer not to say"/>
                    <TextBlock Margin="0,10,0,0" Text="Age Group (GroupName=Age)"/>
                    <RadioButton GroupName="Age" Content="Under 18"/>
                    <RadioButton GroupName="Age" Content="18-30"/>
                    <RadioButton GroupName="Age" Content="Over 30"/>
                </StackPanel>
            </Border>

            <!-- 3. ToggleSwitch Toggle Slider Switch -->
            <Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
                <StackPanel Spacing="12">
                    <TextBlock Text="3. ToggleSwitch - Toggle Slider Switch" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <StackPanel Orientation="Horizontal" Spacing="20" VerticalAlignment="Center">
                        <ToggleSwitch Header="Auto Sync" IsOn="True"/>
                        <ToggleSwitch Header="Dark Mode" OffContent="Off" OnContent="On"/>
                    </StackPanel>
                </StackPanel>
            </Border>

            <!-- 4. ComboBox Dropdown Single Select List -->
            <Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
                <StackPanel Spacing="12">
                    <TextBlock Text="4. ComboBox - Dropdown Single Select List" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <ComboBox Width="260" SelectedIndex="1">
                        <ComboBoxItem Content="New York"/>
                        <ComboBoxItem Content="London"/>
                        <ComboBoxItem Content="Hong Kong"/>
                        <ComboBoxItem Content="Tokyo"/>
                    </ComboBox>
                </StackPanel>
            </Border>

            <!-- 5. ListBox Fixed Height Single/Multi List -->
            <Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
                <StackPanel Spacing="12">
                    <TextBlock Text="5. ListBox - Fixed Height Single/Multi Select List" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <ListBox Width="280" Height="140" SelectionMode="Multiple">
                        <ListBoxItem Content="Documents"/>
                        <ListBoxItem Content="Pictures"/>
                        <ListBoxItem Content="Videos"/>
                        <ListBoxItem Content="Audios"/>
                        <ListBoxItem Content="Installers"/>
                    </ListBox>
                </StackPanel>
            </Border>

            <!-- 6. ListView Virtualized High-Performance List (Recommended for Large Data) -->
            <Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
                <StackPanel Spacing="12">
                    <TextBlock Text="6. ListView - Virtualized High-Performance List (Large Data Recommended)" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <ListView Width="320" Height="160" SelectionMode="Single">
                        <ListViewItem>
                            <StackPanel Orientation="Horizontal" Spacing="10">
                                <SymbolIcon Symbol="Document"/>
                                <TextBlock Text="Data Item 001"/>
                            </StackPanel>
                        </ListViewItem>
                        <ListViewItem>
                            <StackPanel Orientation="Horizontal" Spacing="10">
                                <SymbolIcon Symbol="Document"/>
                                <TextBlock Text="Data Item 002"/>
                            </StackPanel>
                        </ListViewItem>
                        <ListViewItem>
                            <StackPanel Orientation="Horizontal" Spacing="10">
                                <SymbolIcon Symbol="Document"/>
                                <TextBlock Text="Data Item 003"/>
                            </StackPanel>
                        </ListViewItem>
                    </ListView>
                </StackPanel>
            </Border>

            <!-- 7. GridView Grid Card Layout -->
            <Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
                <StackPanel Spacing="12">
                    <TextBlock Text="7. GridView - Grid Card Layout" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <GridView Width="500" Height="180">
                        <GridView.ItemContainerStyle>
                            <Style TargetType="GridViewItem">
                                <Setter Property="Width" Value="110"/>
                                <Setter Property="Height" Value="100"/>
                            </Style>
                        </GridView.ItemContainerStyle>
                        <GridViewItem>
                            <Border Background="LightBlue" Margin="5" CornerRadius="6">
                                <TextBlock Text="Card 1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </GridViewItem>
                        <GridViewItem>
                            <Border Background="LightGreen" Margin="5" CornerRadius="6">
                                <TextBlock Text="Card 2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </GridViewItem>
                        <GridViewItem>
                            <Border Background="LightSalmon" Margin="5" CornerRadius="6">
                                <TextBlock Text="Card 3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </GridViewItem>
                        <GridViewItem>
                            <Border Background="LightPink" Margin="5" CornerRadius="6">
                                <TextBlock Text="Card 4" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </GridViewItem>
                        <GridViewItem>
                            <Border Background="LightGoldenrodYellow" Margin="5" CornerRadius="6">
                                <TextBlock Text="Card 5" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </GridViewItem>
                        <GridViewItem>
                            <Border Background="LightCyan" Margin="5" CornerRadius="6">
                                <TextBlock Text="Card 6" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </GridViewItem>
                    </GridView>
                </StackPanel>
            </Border>

            <!-- 9. SelectorBar Horizontal Tab Selector -->
            <Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
                <StackPanel Spacing="12">
                    <TextBlock Text="9. SelectorBar - Horizontal Tab Selector" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <SelectorBar Width="450">
                        <SelectorBarItem Text="Home">
                            <SelectorBarItem.Icon>
                                <SymbolIcon Symbol="Home"/>
                            </SelectorBarItem.Icon>
                        </SelectorBarItem>
                        <SelectorBarItem Text="Messages">
                            <SelectorBarItem.Icon>
                                <SymbolIcon Symbol="Message"/>
                            </SelectorBarItem.Icon>
                        </SelectorBarItem>
                        <SelectorBarItem Text="Files">
                            <SelectorBarItem.Icon>
                                <SymbolIcon Symbol="Folder"/>
                            </SelectorBarItem.Icon>
                        </SelectorBarItem>

                    </SelectorBar>
                </StackPanel>
            </Border>
        </StackPanel>
    </ScrollViewer>
</Window>

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>

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

}