In dieser Lektion lernen wir die Auswahl- und Umschalt-Steuerelemente von WinUI 3 C++ kennen. WinUI C++ bietet eine große Auswahl an vordefinierten UI-Elementen, wir beginnen mit grundlegenden Auswahlelementen.
| Steuerelementname | Deutscher Begriff |
|---|---|
| CheckBox | Mehrfachauswahl-Checkbox |
| RadioButton | Einzelauswahl-Radiobutton (innerhalb gleicher GroupName gegenseitig ausschließend) |
| ToggleSwitch | Schiebe-Umschalter |
| ComboBox | Dropdown-Auswahlliste |
| ComboBoxItem | Eintrag der Dropdown-Liste |
| ListBox | Festhöhen-Liste ohne Virtualisierung |
| ListBoxItem | ListBox-Listeneintrag |
| SelectorBar | Horizontaler Segment-Auswahlbalken |
| SelectorBarItem | Segment-Tab-Eintrag |
| TreeView | Hierarchische Baumansicht |
| TreeViewItem | Baumknoten-Eintrag |
| RatingControl | Sterne-Bewertungssteuerelement |
Im Folgenden zeigen wir ein Beispiel für diese häufig genutzten Steuerelemente.
Es können geringfügige Unterschiede zwischen verschiedenen SDK-Versionen auftreten, für das Demo wird Visual Studio 2022 verwendet.
<?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 - Mehrfachauswahl-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 - Gruppierter Einzelauswahl-Radiobutton (GroupName)" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
<TextBlock Text="Geschlechtsgruppe (GroupName=Gender)"/>
<RadioButton GroupName="Gender" Content="Männlich" IsChecked="True"/>
<RadioButton GroupName="Gender" Content="Weiblich"/>
<RadioButton GroupName="Gender" Content="Keine Angabe"/>
<TextBlock Margin="0,10,0,0" Text="Altersgruppe (GroupName=Age)"/>
<RadioButton GroupName="Age" Content="Unter 18"/>
<RadioButton GroupName="Age" Content="18–30"/>
<RadioButton GroupName="Age" Content="Über 30"/>
</StackPanel>
</Border>
<!-- 3. ToggleSwitch Toggle Slider Switch -->
<Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
<StackPanel Spacing="12">
<TextBlock Text="3. ToggleSwitch - Schiebe-Umschalter" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
<StackPanel Orientation="Horizontal" Spacing="20" VerticalAlignment="Center">
<ToggleSwitch Header="Auto-Synchronisation" IsOn="True"/>
<ToggleSwitch Header="Dunkelmodus" OffContent="Aus" OnContent="Ein"/>
</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-Einzelauswahlliste" 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 - Festhöhenliste (Einzel-/Mehrfachauswahl)" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
<ListBox Width="280" Height="140" SelectionMode="Multiple">
<ListBoxItem Content="Dokumente"/>
<ListBoxItem Content="Bilder"/>
<ListBoxItem Content="Videos"/>
<ListBoxItem Content="Audiodateien"/>
<ListBoxItem Content="Installer"/>
</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 - Virtualisierte Hochleistungsliste (empfohlen für große Datenmengen)" 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="Dateneintrag 001"/>
</StackPanel>
</ListViewItem>
<ListViewItem>
<StackPanel Orientation="Horizontal" Spacing="10">
<SymbolIcon Symbol="Document"/>
<TextBlock Text="Dateneintrag 002"/>
</StackPanel>
</ListViewItem>
<ListViewItem>
<StackPanel Orientation="Horizontal" Spacing="10">
<SymbolIcon Symbol="Document"/>
<TextBlock Text="Dateneintrag 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 - Raster-Kartenlayout" 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="Karte 1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</GridViewItem>
<GridViewItem>
<Border Background="LightGreen" Margin="5" CornerRadius="6">
<TextBlock Text="Karte 2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</GridViewItem>
<GridViewItem>
<Border Background="LightSalmon" Margin="5" CornerRadius="6">
<TextBlock Text="Karte 3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</GridViewItem>
<GridViewItem>
<Border Background="LightPink" Margin="5" CornerRadius="6">
<TextBlock Text="Karte 4" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</GridViewItem>
<GridViewItem>
<Border Background="LightGoldenrodYellow" Margin="5" CornerRadius="6">
<TextBlock Text="Karte 5" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</GridViewItem>
<GridViewItem>
<Border Background="LightCyan" Margin="5" CornerRadius="6">
<TextBlock Text="Karte 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 - Horizontaler Tab-Auswahlbalken" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
<SelectorBar Width="450">
<SelectorBarItem Text="Startseite">
<SelectorBarItem.Icon>
<SymbolIcon Symbol="Home"/>
</SelectorBarItem.Icon>
</SelectorBarItem>
<SelectorBarItem Text="Nachrichten">
<SelectorBarItem.Icon>
<SymbolIcon Symbol="Message"/>
</SelectorBarItem.Icon>
</SelectorBarItem>
<SelectorBarItem Text="Dateien">
<SelectorBarItem.Icon>
<SymbolIcon Symbol="Folder"/>
</SelectorBarItem.Icon>
</SelectorBarItem>
</SelectorBar>
</StackPanel>
</Border>
</StackPanel>
</ScrollViewer>
</Window>Code-Sprache: HTML, XML (xml)