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