本章節將介紹 WinUI 3 C++ 中各式用於選擇、切換狀態的控制項。
| 控制項原名 | 繁體中文名稱 |
|---|---|
| CheckBox | 多選核取方塊 |
| RadioButton | 單選按鈕（同一 GroupName 互斥） |
| ToggleSwitch | 滑動開關 |
| ComboBox | 下拉選單 |
| ComboBoxItem | 下拉選單選項 |
| ListBox | 固定高度清單（無虛擬化） |
| ListBoxItem | ListBox 清單項目 |
| SelectorBar | 橫向分頁選擇列 |
| SelectorBarItem | 分頁標籤項目 |
| TreeView | 樹狀階層檢視 |
| TreeViewItem | 樹節點項目 |
| RatingControl | 星級評分控制項 |
下方示範這些常用控制項的完整 XAML 程式碼。
不同 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 控制項示範">
<ScrollViewer Padding="30" VerticalScrollBarVisibility="Auto">
<StackPanel Spacing="35">
<!-- 1. 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="選項 A" IsChecked="True"/>
<CheckBox Content="選項 B"/>
<CheckBox Content="選項 C" IsThreeState="True"/>
</StackPanel>
</Border>
<!-- 2. RadioButton 分組單選按鈕 -->
<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 滑動切換開關 -->
<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 下拉單選清單 -->
<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="紐約"/>
<ComboBoxItem Content="倫敦"/>
<ComboBoxItem Content="香港"/>
<ComboBoxItem Content="東京"/>
</ComboBox>
</StackPanel>
</Border>
<!-- 5. ListBox 固定高度單/多選清單 -->
<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 虛擬化高效能清單（大量資料建議使用） -->
<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 網格卡片排版 -->
<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 橫向分頁選擇列 -->
<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)Previous: WinUI 3 C++ 控制項篇－按鈕控制項