Windows 8 Store Apps學習(5) 集合控件

ComboBox, ListBox, FlipView, ItemsContr

介紹

重新想象 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

[源碼下載]：http://files.cnblogs.com/webabcd/Windows8.rar