Элементы управления WinUI 3 C++ — Элементы выбора и переключатели

На этом занятии мы изучим элементы выбора и переключатели для WinUI 3 C++.

Ниже представлен демонстрационный код этих популярных элементов.

Могут быть небольшие различия между версиями SDK, в демонстрации используется 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 - Флажок множественного выбора" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <CheckBox Content="Вариант А" IsChecked="True"/>
                    <CheckBox Content="Вариант Б"/>
                    <CheckBox Content="Вариант В" 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 - Групповой одиночный выбор (GroupName)" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <TextBlock Text="Группа Пол (GroupName=Gender)"/>
                    <RadioButton GroupName="Gender" Content="Мужской" IsChecked="True"/>
                    <RadioButton GroupName="Gender" Content="Женский"/>
                    <RadioButton GroupName="Gender" Content="Не указывать"/>
                    <TextBlock Margin="0,10,0,0" Text="Группа Возраст (GroupName=Age)"/>
                    <RadioButton GroupName="Age" Content="Младше 18"/>
                    <RadioButton GroupName="Age" Content="18–30"/>
                    <RadioButton GroupName="Age" Content="Старше 30"/>
                </StackPanel>
            </Border>

            <!-- 3. ToggleSwitch Toggle Slider Switch -->
            <Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
                <StackPanel Spacing="12">
                    <TextBlock Text="3. ToggleSwitch - Ползунковый переключатель" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <StackPanel Orientation="Horizontal" Spacing="20" VerticalAlignment="Center">
                        <ToggleSwitch Header="Автосинхронизация" IsOn="True"/>
                        <ToggleSwitch Header="Тёмный режим" OffContent="Выкл" OnContent="Вкл"/>
                    </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 - Выпадающий список одиночного выбора" 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 - Список фиксированной высоты (один/множество)" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <ListBox Width="280" Height="140" SelectionMode="Multiple">
                        <ListBoxItem Content="Документы"/>
                        <ListBoxItem Content="Изображения"/>
                        <ListBoxItem Content="Видео"/>
                        <ListBoxItem Content="Аудио"/>
                        <ListBoxItem Content="Установщики"/>
                    </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 - Виртуализированный производительный список (рекомендуется для больших наборов данных)" 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="Запись данных 001"/>
                            </StackPanel>
                        </ListViewItem>
                        <ListViewItem>
                            <StackPanel Orientation="Horizontal" Spacing="10">
                                <SymbolIcon Symbol="Document"/>
                                <TextBlock Text="Запись данных 002"/>
                            </StackPanel>
                        </ListViewItem>
                        <ListViewItem>
                            <StackPanel Orientation="Horizontal" Spacing="10">
                                <SymbolIcon Symbol="Document"/>
                                <TextBlock Text="Запись данных 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 - Сеточное расположение карточек" 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="Карточка 1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </GridViewItem>
                        <GridViewItem>
                            <Border Background="LightGreen" Margin="5" CornerRadius="6">
                                <TextBlock Text="Карточка 2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </GridViewItem>
                        <GridViewItem>
                            <Border Background="LightSalmon" Margin="5" CornerRadius="6">
                                <TextBlock Text="Карточка 3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </GridViewItem>
                        <GridViewItem>
                            <Border Background="LightPink" Margin="5" CornerRadius="6">
                                <TextBlock Text="Карточка 4" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </GridViewItem>
                        <GridViewItem>
                            <Border Background="LightGoldenrodYellow" Margin="5" CornerRadius="6">
                                <TextBlock Text="Карточка 5" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </GridViewItem>
                        <GridViewItem>
                            <Border Background="LightCyan" Margin="5" CornerRadius="6">
                                <TextBlock Text="Карточка 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 - Горизонтальная панель вкладок" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <SelectorBar Width="450">
                        <SelectorBarItem Text="Главная">
                            <SelectorBarItem.Icon>
                                <SymbolIcon Symbol="Home"/>
                            </SelectorBarItem.Icon>
                        </SelectorBarItem>
                        <SelectorBarItem Text="Сообщения">
                            <SelectorBarItem.Icon>
                                <SymbolIcon Symbol="Message"/>
                            </SelectorBarItem.Icon>
                        </SelectorBarItem>
                        <SelectorBarItem Text="Файлы">
                            <SelectorBarItem.Icon>
                                <SymbolIcon Symbol="Folder"/>
                            </SelectorBarItem.Icon>
                        </SelectorBarItem>
                    </SelectorBar>
                </StackPanel>
            </Border>
        </StackPanel>
    </ScrollViewer>
</Window>Code language: HTML, XML (xml)