集合控件是資料驅動 UI 的核心。WinRT 提供 ComboBox（下拉選單）、ListBox（多選列表）、FlipView（翻頁視圖）、ItemsControl（基礎集合容器）四大控件，均繼承自 ItemsControl。本文將並列示範四者的資料綁定、項目模板、容器樣式、面板自定義與 ItemsPresenter 角色。
<ComboBoxItem Content="..."/><StackPanel Margin="120 0 0 0">
<!-- 1. XAML 靜態 -->
<ComboBox x:Name="comboBox" Width="200" Margin="5" HorizontalAlignment="Left">
<ComboBoxItem Content="ComboBoxItem1"/>
<ComboBoxItem Content="ComboBoxItem2"/>
<ComboBoxItem Content="ComboBoxItem3"/>
</ComboBox>
<!-- 2. 綁定 + DisplayMemberPath -->
<ComboBox x:Name="comboBoxWithBinding"
DisplayMemberPath="Name"
MaxDropDownHeight="100"
Width="200" Margin="5" HorizontalAlignment="Left"/>
<!-- 3. ItemTemplate 自定義 -->
<ComboBox ItemsSource="{Binding ItemsSource, ElementName=comboBoxWithBinding}"
MaxDropDownHeight="100" Width="200" Margin="5" HorizontalAlignment="Left">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding Age}" Margin="5 0 0 0"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
comboBoxWithBinding.ItemsSource = TestData.GetEmployees();
}
IsDropDownOpen：下拉是否展開MaxDropDownHeight：下拉最大高度DropDownOpened/DropDownClosed：展開/收合事件<StackPanel Margin="120 0 0 0" Orientation="Horizontal">
<!-- 1. XAML 靜態 -->
<ListBox x:Name="listBox" Width="200" Height="300" Margin="5"
HorizontalAlignment="Left" VerticalAlignment="Top">
<ListBoxItem Content="ListBoxItem1"/>
<ListBoxItem Content="ListBoxItem2"/>
<ListBoxItem Content="ListBoxItem3"/>
</ListBox>
<!-- 2. 綁定 + DisplayMemberPath -->
<ListBox x:Name="listBoxWithBinding"
SelectionMode="Multiple"
DisplayMemberPath="Name"
Width="200" Height="300" Margin="5"
HorizontalAlignment="Left" VerticalAlignment="Top"/>
<!-- 3. ItemTemplate + ItemsPanel (VirtualizingStackPanel) -->
<ListBox ItemsSource="{Binding ItemsSource, ElementName=listBoxWithBinding}"
SelectionMode="Multiple" Width="200" Height="300" Margin="5"
HorizontalAlignment="Left" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding Age}" Margin="5 0 0 0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"
VirtualizationMode="Recycling"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</StackPanel>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
listBoxWithBinding.ItemsSource = TestData.GetEmployees();
}
SelectionMode：Single/Multiple（滑鼠多選）/Extended（Ctrl/Shift 多選）ScrollIntoView(item)：捲動到指定項目SelectAll()：全選適合圖片瀏覽、教學逐步、單項目聚焦閱讀。支援水平（預設）與垂直翻頁。
<FlipView Width="320" Height="240" HorizontalAlignment="Left" Background="Black">
<FlipView.Items>
<FlipViewItem><TextBlock FontSize="26.667" Text="I am webabcd"/></FlipViewItem>
<FlipViewItem><Image Source="/Assets/Logo.png" Stretch="Fill"/></FlipViewItem>
</FlipView.Items>
</FlipView>
<FlipView x:Name="flipView" Width="320" Height="240"
Background="Yellow" HorizontalAlignment="Left" Margin="0 10 0 0">
<FlipView.ItemContainerStyle>
<Style TargetType="FlipViewItem">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
</Style>
</FlipView.ItemContainerStyle>
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/> <-- 垂直翻頁 -->
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
<FlipView.ItemTemplate>
<DataTemplate>
<Grid Background="Black">
<TextBlock Text="{Binding Name}" FontSize="26.667"/>
<TextBlock Text="{Binding Age}" FontSize="26.667" Margin="0 40 0 0"/>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
flipView.ItemsSource = TestData.GetEmployees();
}
ItemsControl 是最基礎的集合容器（無選取、無虛擬化、無預設面板）。ListBox、ComboBox、FlipView、GridView、ListView 皆間接繼承它。
在 ControlTemplate 中，ItemsPresenter 是「項目面板」的佔位符，負責呈現 ItemsPanel 產生的所有項目容器。它呈現的是 Items 集合，而非單一 Item。
<ItemsControl HorizontalAlignment="Left">
<ItemsControl.Items>
<Rectangle Width="100" Height="100" Fill="Red"/>
<Rectangle Width="100" Height="100" Fill="Green"/>
<Rectangle Width="100" Height="100" Fill="Blue"/>
</ItemsControl.Items>
<ItemsControl.Template>
<ControlTemplate>
<Border BorderBrush="Orange" BorderThickness="1" Width="400" Height="400">
<!-- ItemsPresenter 置中呈現所有項目 -->
<ItemsPresenter Margin="10"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Border>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
| Presenter | 所屬控件 | 呈現內容 |
|---|---|---|
ContentPresenter | ContentControl | 單一 Content |
ItemsPresenter | ItemsControl | Items 集合（透過 ItemsPanel） |
ScrollContentPresenter | ScrollViewer | Content（支援捲動） |
DisplayMemberPath 簡單顯示，ItemTemplate 豐富排版，MaxDropDownHeight 控制高度SelectionMode 三模式，VirtualizingStackPanel 大量資料虛擬化，可水平排列ItemsPanel 切換水平/垂直，ItemContainerStyle 置中內容ItemsPresenter 在模板中呈現項目面板，理解它是客製化集合控件的鑰匙這四大控件涵蓋了從「單選下拉」到「多選列表」、「翻頁瀏覽」再到「完全自定義集合」的完整光譜，是構建資料驅動 UI 的基石工具箱。
