原文:
重新想象 Windows 8 Store Apps (5) - 控件之集合控件: ComboBox, ListBox, FlipView, ItemsControl, ItemsPresenter
重新想象 Windows 8 Store Apps (5) - 控件之集合控件: ComboBox, ListBox, FlipView, ItemsControl, ItemsPresenter
作者：webabcd
介绍
重新想象 Windows 8 Store Apps 之集合控件
- ComboBox - 下拉框
- ListBox - 列表框
- FlipView - 滑动视图控件
- ItemsControl ItemsPresenter - ItemsPresenter 用来呈现 ItemsControl 的 Items
示例
1、ComboBox 的 Demo
ComboBoxDemo.xaml
<Page x:Class="XamlDemo.Controls.ComboBoxDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Controls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0"> <!--ComboBox - 下拉框--> <!--xaml 方式为 ComboBox 添加数据--> <ComboBox x:Name="comboBox" Width="200" Margin="5" HorizontalAlignment="Left"> <ComboBoxItem Content="ComboBoxItem1" /> <ComboBoxItem Content="ComboBoxItem2" /> <ComboBoxItem Content="ComboBoxItem3" /> </ComboBox> <!-- 后台绑定方式为 ComboBox 添加数据 DisplayMemberPath - 指定数据源中需要被显示出来的字段名称 MaxDropDownHeight - 用于指定打开后的下拉框的最大高度 --> <ComboBox x:Name="comboBoxWithBinding" DisplayMemberPath="Name" MaxDropDownHeight="100" Width="200" Margin="5" HorizontalAlignment="Left" /> <!--通过模板设置 ComboBox 的每一项的布局和数据--> <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> </Grid> </Page>
ComboBoxDemo.xaml.cs
/* * ComboBox - 下拉框 * IsDropDownOpen - 下拉框是否处于打开状态 * MaxDropDownHeight - 打开后的下拉框的最大高度 * DropDownOpened - 下拉框打开时触发的事件 * DropDownClosed - 下拉框关闭时触发的事件 */ using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Navigation; using XamlDemo.Model; namespace XamlDemo.Controls { public sealed partial class ComboBoxDemo : Page { public ComboBoxDemo() { this.InitializeComponent(); } protected override void OnNavigatedTo(NavigationEventArgs e) { // 绑定数据到 ComboBox var data = TestData.GetEmployees(); comboBoxWithBinding.ItemsSource = data; } } }
2、ListBox 的 Demo
ListBoxDemo.xaml
<Page x:Class="XamlDemo.Controls.ListBoxDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Controls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0" Orientation="Horizontal"> <!--ListBox - 列表框--> <!--xaml 方式为 ListBox 添加数据--> <ListBox x:Name="listBox" Width="200" Height="300" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top"> <ListBox.Items> <ListBoxItem Content="ListBoxItem1" /> <ListBoxItem Content="ListBoxItem2" /> <ListBoxItem Content="ListBoxItem3" /> </ListBox.Items> </ListBox> <!-- 后台绑定方式为 ListBox 添加数据 DisplayMemberPath - 指定数据源中需要被显示出来的字段名称 --> <ListBox x:Name="listBoxWithBinding" SelectionMode="Multiple" DisplayMemberPath="Name" Width="200" Height="300" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top" /> <!--通过模板设置 ListBox 的每一项的布局和数据--> <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 - 虚拟化的 StackPanel（即仅生成需要显示的 UI 元素。当绑定了大量数据，而某时仅显示其中一小部分的时候，使用此控件则可大幅提高呈现效率） Orientation - 数据的排列方式（垂直排列或水平排列，也就是说 ListBox 也可以水平排列） VirtualizationMode - 虚拟化的模式 Recycling - item 的容器会被重用，默认值 Standard - 每个 item 都有自己独立的容器 注：ListBox 默认已经使用了 VirtualizingStackPanel，但是其对于变高的 DataTemplate 来说支持得不好 --> <VirtualizingStackPanel Orientation="Vertical" VirtualizingStackPanel.VirtualizationMode="Recycling" /> </ItemsPanelTemplate> </ListBox.ItemsPanel> </ListBox> </StackPanel> </Grid> </Page>
ListBoxDemo.xaml.cs
/* * ListBox - 列表框 * SelectionMode - 选择的模式（Single - 单选；Multiple - 仅通过鼠标多选；Extended - 通过鼠标和辅助键多选） * ScrollIntoView(object item) - 滚动到指定 item * SelectAll() - 选中所有项 */ using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Navigation; using XamlDemo.Model; namespace XamlDemo.Controls { public sealed partial class ListBoxDemo : Page { public ListBoxDemo() { this.InitializeComponent(); } protected override void OnNavigatedTo(NavigationEventArgs e) { // 绑定数据到 ListBox var data = TestData.GetEmployees(); listBoxWithBinding.ItemsSource = data; } } }
3、FlipView 的 Demo
FlipViewDemo.xaml
<Page x:Class="XamlDemo.Controls.FlipViewDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Controls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0"> <!--FlipView - 滑动视图控件--> <!--在 XAML 中通过 FlipViewItem 指定 FilpView 的每一项--> <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--> <FlipView 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> </StackPanel> </Grid> </Page>
FlipViewDemo.xaml.cs
/* * FlipView - 滑动视图控件 */ using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Navigation; using XamlDemo.Model; namespace XamlDemo.Controls { public sealed partial class FlipViewDemo : Page { public FlipViewDemo() { this.InitializeComponent(); } protected override void OnNavigatedTo(NavigationEventArgs e) { // 绑定数据到 FlipView var employees = TestData.GetEmployees(); flipView.ItemsSource = employees; } } }
4、ItemsControl, ItemsPresenter 的 Demo
ItemsControlDemo.xaml
<Page x:Class="XamlDemo.Controls.ItemsPresenterDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Controls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0"> <!-- 演示 ItemsControl 和 ItemsPresenter 的应用（ItemsPresenter 用来呈现 ItemsControl 的 Items） ListBox, ComboBox, FlipView, GridView, ListView 等均间接地继承了 ItemsControl --> <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 来呈现 ItemsControl 的 Items（注：其呈现的是 Items 而不是 Item） --> <ItemsPresenter Margin="10" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Border> </ControlTemplate> </ItemsControl.Template> </ItemsControl> </StackPanel> </Grid> </Page>
OK
[源码下载]
