重新想象 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
[源码下载]