WinUI 3 C++ 控件篇-选择与开关控件

下面演示这些常用的控件

不同的版本可能有点不一样，小编使用的是VS2022

<?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>Code language: HTML, XML (xml)