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

时间：2022-09-26 09:14:56

[源码下载]

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

        }

        private void btnUpdate_Click_1(object sender, RoutedEventArgs e)

        {

            Random random = new Random();

            // 此处的通知来自实现了 INotifyPropertyChanged 接口的 Employee

            _employees.First().Name = random.Next(, ).ToString(); 

            // 此处的通知来自 ObservableCollection<T>

            _employees[] = new Employee() { Name = random.Next(, ).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, , 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, , 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;

        }

    }

}

OK
[源码下载]

相关文章