重新想象 Windows 8 Store Apps (53) - 绑定: 与 ObservableCollection CollectionViewSource VirtualizedFilesVector VirtualizedItemsVector 绑定

浏览数：24 / 时间：2015年06月11日

原文:重新想象 Windows 8 Store Apps (53) - 绑定: 与 ObservableCollection CollectionViewSource VirtualizedFilesVector VirtualizedItemsVector 绑定

[源码下载]

作者：webabcd

介绍
重新想象 Windows 8 Store Apps 之绑定

与 ObservableCollection 绑定
与 CollectionViewSource 绑定
与 VirtualizedFilesVector 绑定
对 VirtualizedItemsVector 绑定

示例
1、演示如何绑定 ObservableCollection<T> 类型的数据
Binding/BindingObservableCollection.xaml

<Page
    x:Class="XamlDemo.Binding.BindingObservableCollection"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Binding"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <Grid Margin="120 0 0 10">
            
            <Grid.Resources>
                <DataTemplate x:Key="MyDataTemplate">
                    <Border Background="Blue" Width="200" CornerRadius="3" HorizontalAlignment="Left">
                        <TextBlock Text="{Binding Name}" FontSize="14.667" />
                    </Border>
                </DataTemplate>
            </Grid.Resources>
            

            <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
                <Button Name="btnDelete" Content="删除一条记录" Click="btnDelete_Click_1" />
                <Button Name="btnUpdate" Content="更新一条记录" Click="btnUpdate_Click_1" Margin="10 0 0 0" />
            </StackPanel>

            <ListView x:Name="listView" ItemTemplate="{StaticResource MyDataTemplate}" Margin="0 50 0 0" />

        </Grid>
    </Grid>
</Page>

Binding/BindingObservableCollection.xaml.cs

/*
 * 演示如何绑定 ObservableCollection<T> 类型的数据
 * 
 * ObservableCollection<T> - 在数据集合进行添加项、删除项、更新项、移动项等操作时提供通知
 *     CollectionChanged - 当发生添加项、删除项、更新项、移动项等操作时所触发的事件（事件参数：NotifyCollectionChangedEventArgs）
 */

using System;
using System.Collections.ObjectModel;
using System.Collections.Specialized;
using System.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using XamlDemo.Model;

namespace XamlDemo.Binding
{
    public sealed partial class BindingObservableCollection : Page
    {
        private ObservableCollection<Employee> _employees;

        public BindingObservableCollection()
        {
            this.InitializeComponent();
            
            this.Loaded += BindingObservableCollection_Loaded;
        }

        void BindingObservableCollection_Loaded(object sender, RoutedEventArgs e)
        {
            _employees = new ObservableCollection<Employee>(TestData.GetEmployees());
            _employees.CollectionChanged += _employees_CollectionChanged;

            listView.ItemsSource = _employees;
        }

        void _employees_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
        {
            /*
             * e.Action - 引发此事件的操作类型（NotifyCollectionChangedAction 枚举）
             *     Add, Remove, Replace, Move, Reset
             * e.OldItems - Remove, Replace, Move 操作时影响的数据列表
             * e.OldStartingIndex - Remove, Replace, Move 操作发生处的索引
             * e.NewItems - 更改中所涉及的新的数据列表
             * e.NewStartingIndex - 更改中所涉及的新的数据列表的发生处的索引
             */
        }

        private void btnDelete_Click_1(object sender, RoutedEventArgs e)
        {
            _employees.RemoveAt(0);
        }

        private void btnUpdate_Click_1(object sender, RoutedEventArgs e)
        {
            Random random = new Random();

            // 此处的通知来自实现了 INotifyPropertyChanged 接口的 Employee
            _employees.First().Name = random.Next(1000, 10000).ToString(); 

            // 此处的通知来自 ObservableCollection<T>
            _employees[1] = new Employee() { Name = random.Next(1000, 10000).ToString() };
        }
    }
}

2、演示如何绑定 CollectionViewSource 类型的数据，以实现数据的分组显示
Binding/BindingCollectionViewSource.xaml

<Page
    x:Class="XamlDemo.Binding.BindingCollectionViewSource"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Binding"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <Grid Margin="120 0 0 10">

            <ListView x:Name="listView">
                <ListView.GroupStyle>
                    <GroupStyle>
                        <!--分组后，header 的数据模板-->
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Title}" FontSize="24.667" />
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                    </GroupStyle>
                </ListView.GroupStyle>
                <!--分组后，details 的数据模板-->
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Title}" FontSize="14.667" Padding="50 0 0 0" />
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

        </Grid>
    </Grid>
</Page>

Binding/BindingCollectionViewSource.xaml.cs

/*
 * 演示如何绑定 CollectionViewSource 类型的数据，以实现数据的分组显示
 * 
 * CollectionViewSource - 对集合数据启用分组支持
 *     Source - 数据源
 *     View - 获取视图对象，返回一个实现了 ICollectionView 接口的对象
 *     IsSourceGrouped - 数据源是否是一个被分组的数据
 *     ItemsPath - 数据源中，子数据集合的属性名称
 *     
 * ICollectionView - 支持数据分组
 *     CollectionGroups - 组数据集合
 *     
 * 
 * 注：关于数据分组的应用还可参见：XamlDemo/Index.xaml 和 XamlDemo/Index.xaml.cs
 */

using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;

namespace XamlDemo.Binding
{
    public sealed partial class BindingCollectionViewSource : Page
    {
        public BindingCollectionViewSource()
        {
            this.InitializeComponent();

            this.Loaded += BindingCollectionViewSource_Loaded;
        }

        void BindingCollectionViewSource_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            XElement root = XElement.Load("SiteMap.xml");
            var items = LoadData(root);

            // 构造数据源
            CollectionViewSource groupData = new CollectionViewSource();
            groupData.IsSourceGrouped = true;
            groupData.Source = items;
            groupData.ItemsPath = new PropertyPath("Items");

            // 绑定 ICollectionView 类型的数据，以支持分组
            listView.ItemsSource = groupData.View;
        }

        // 获取数据
        private List<GroupModel> LoadData(XElement root)
        {
            if (root == null)
                return null;

            var items = from n in root.Elements("node")
                        select new GroupModel
                        {
                            Title = (string)n.Attribute("title"),
                            Items = LoadData(n)
                        };

            return items.ToList();
        }

        class GroupModel
        {
            public string Title { get; set; }
            public List<GroupModel> Items { get; set; }
        }
    }
}

3、演示如何绑定 VirtualizedFilesVector
Binding/BindingVirtualizedFilesVector.xaml

<Page
    x:Class="XamlDemo.Binding.BindingVirtualizedFilesVector"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Binding"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:converter="using:XamlDemo.Common"
    mc:Ignorable="d">

    <Grid Background="Transparent">

        <Grid.Resources>
            <converter:ThumbnailConverter x:Key="ThumbnailConverter"/>
            <CollectionViewSource x:Name="itemsViewSource"/>
        </Grid.Resources>

        <GridView Name="gridView" Padding="120 0 0 10" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" SelectionMode="None">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid Width="160" Height="120">
                        <Border Background="Red" Width="160" Height="120">
                            <Image Source="{Binding Path=Thumbnail, Converter={StaticResource ThumbnailConverter}}" Stretch="None" Width="160" Height="120" />
                        </Border>
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>

    </Grid>
</Page>

Binding/BindingVirtualizedFilesVector.xaml.cs

/*
 * 演示如何绑定 VirtualizedFilesVector
 * 
 * 本 Demo 演示了如何将图片库中的文件绑定到 GridView
 */

using Windows.Storage;
using Windows.Storage.BulkAccess;
using Windows.Storage.FileProperties;
using Windows.Storage.Search;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace XamlDemo.Binding
{
    public sealed partial class BindingVirtualizedFilesVector : Page
    {
        public BindingVirtualizedFilesVector()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            QueryOptions queryOptions = new QueryOptions();
            queryOptions.FolderDepth = FolderDepth.Deep;
            queryOptions.IndexerOption = IndexerOption.UseIndexerWhenAvailable;
            queryOptions.SortOrder.Clear();
            SortEntry sortEntry = new SortEntry();
            sortEntry.PropertyName = "System.FileName";
            sortEntry.AscendingOrder = true;
            queryOptions.SortOrder.Add(sortEntry);

            // 一个用于搜索图片库中的文件的查询
            StorageFileQueryResult fileQuery = KnownFolders.PicturesLibrary.CreateFileQueryWithOptions(queryOptions);

            // 创建一个 FileInformationFactory 对象
            var fileInformationFactory = new FileInformationFactory(fileQuery, ThumbnailMode.PicturesView, 160, ThumbnailOptions.UseCurrentScale, true);

            // 获取 VirtualizedFilesVector
            itemsViewSource.Source = fileInformationFactory.GetVirtualizedFilesVector();
        }
    }
}

4、演示如何绑定 VirtualizedItemsVector
Binding/BindingVirtualizedItemsVector.xaml

<Page
    x:Class="XamlDemo.Binding.BindingVirtualizedItemsVector"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Binding"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:converter="using:XamlDemo.Common"
    mc:Ignorable="d">

    <Grid Background="Transparent">

        <Grid.Resources>
            <converter:ThumbnailConverter x:Key="ThumbnailConverter"/>
            <CollectionViewSource x:Name="itemsViewSource"/>

            <DataTemplate x:Key="FolderTemplate">
                <Grid Width="160" Height="120">
                    <Border Background="Red" Width="160" Height="120">
                        <Image Source="{Binding Path=Thumbnail, Converter={StaticResource ThumbnailConverter}}" Stretch="None" Width="160" Height="120"/>
                    </Border>
                    <TextBlock Text="{Binding Name}" VerticalAlignment="Bottom" HorizontalAlignment="Center" Height="30" />
                </Grid>
            </DataTemplate>
            <DataTemplate x:Key="FileTemplate">
                <Grid Width="160" Height="120">
                    <Border Background="Red" Width="160" Height="120">
                        <Image Source="{Binding Path=Thumbnail, Converter={StaticResource ThumbnailConverter}}" Stretch="None" Width="160" Height="120"/>
                    </Border>
                </Grid>
            </DataTemplate>

            <local:FileFolderInformationTemplateSelector x:Key="FileFolderInformationTemplateSelector" 
                                                         FileInformationTemplate="{StaticResource FileTemplate}"
                                                         FolderInformationTemplate="{StaticResource FolderTemplate}" />
        </Grid.Resources>

        <GridView Name="gridView" Padding="120 0 0 10" 
                  ItemsSource="{Binding Source={StaticResource itemsViewSource}}" 
                  ItemTemplateSelector="{StaticResource FileFolderInformationTemplateSelector}"
                  SelectionMode="None">
        </GridView>

    </Grid>
</Page>

Binding/BindingVirtualizedItemsVector.xaml.cs

/*
 * 演示如何绑定 VirtualizedItemsVector
 * 
 * 本 Demo 演示了如何将图片库中的顶级文件夹和顶级文件绑定到 GridView，同时演示了如何 runtime 时选择模板
 */

using Windows.Storage;
using Windows.Storage.BulkAccess;
using Windows.Storage.FileProperties;
using Windows.Storage.Search;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace XamlDemo.Binding
{
    public sealed partial class BindingVirtualizedItemsVector : Page
    {
        public BindingVirtualizedItemsVector()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            QueryOptions queryOptions = new QueryOptions();
            queryOptions.FolderDepth = FolderDepth.Shallow;
            queryOptions.IndexerOption = IndexerOption.UseIndexerWhenAvailable;
            queryOptions.SortOrder.Clear();
            SortEntry sortEntry = new SortEntry();
            sortEntry.PropertyName = "System.IsFolder";
            sortEntry.AscendingOrder = false;
            queryOptions.SortOrder.Add(sortEntry);
            SortEntry sortEntry2 = new SortEntry();
            sortEntry2.PropertyName = "System.ItemName";
            sortEntry2.AscendingOrder = true;
            queryOptions.SortOrder.Add(sortEntry2);

            // 一个用于搜索图片库中的顶级文件夹和顶级文件的查询
            StorageItemQueryResult itemQuery = KnownFolders.PicturesLibrary.CreateItemQueryWithOptions(queryOptions);

            // 创建一个 FileInformationFactory 对象
            var fileInformationFactory = new FileInformationFactory(itemQuery, ThumbnailMode.PicturesView, 160, ThumbnailOptions.UseCurrentScale, true);

            // 获取 VirtualizedItemsVector
            itemsViewSource.Source = fileInformationFactory.GetVirtualizedItemsVector();
        }
    }

    // 继承 DataTemplateSelector 以实现 runtime 时选择模板
    public class FileFolderInformationTemplateSelector : DataTemplateSelector
    {
        // 显示文件时的模板
        public DataTemplate FileInformationTemplate { get; set; }

        // 显示文件夹时的模板
        public DataTemplate FolderInformationTemplate { get; set; }

        // 根据 item 的类型选择指定的模板
        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            var folder = item as FolderInformation;
            if (folder == null)
                return FileInformationTemplate;
            else
                return FolderInformationTemplate;
        }
    }
}