重新想象 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
[源码下载]
重新想象 Windows 8 Store Apps (53) - 绑定: 与 ObservableCollection CollectionViewSource VirtualizedFilesVector VirtualizedItemsVector 绑定的更多相关文章
- 重新想象 Windows 8 Store Apps 系列文章索引
[源码下载][重新想象 Windows 8.1 Store Apps 系列文章] 重新想象 Windows 8 Store Apps 系列文章索引 作者:webabcd 1.重新想象 Windows ...
- 重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换
[源码下载] 重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数 ...
- 重新想象 Windows 8 Store Apps (54) - 绑定: 增量方式加载数据
[源码下载] 重新想象 Windows 8 Store Apps (54) - 绑定: 增量方式加载数据 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 绑定 通过实 ...
- 重新想象 Windows 8 Store Apps (55) - 绑定: MVVM 模式
[源码下载] 重新想象 Windows 8 Store Apps (55) - 绑定: MVVM 模式 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 绑定 通过 M ...
- 重新想象 Windows 8 Store Apps (59) - 锁屏
[源码下载] 重新想象 Windows 8 Store Apps (59) - 锁屏 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 锁屏 登录锁屏,获取当前程序的锁 ...
- 重新想象 Windows 8 Store Apps (15) - 控件 UI: 字体继承, Style, ControlTemplate, SystemResource, VisualState, VisualStateManager
原文:重新想象 Windows 8 Store Apps (15) - 控件 UI: 字体继承, Style, ControlTemplate, SystemResource, VisualState ...
- 重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试
原文:重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试 [源码下载] 重新想象 Windows 8 Store ...
- 重新想象 Windows 8 Store Apps (13) - 控件之 SemanticZoom
原文:重新想象 Windows 8 Store Apps (13) - 控件之 SemanticZoom [源码下载] 重新想象 Windows 8 Store Apps (13) - 控件之 Sem ...
- 重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示
原文:重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示 [源码下载] 重新想象 Windows 8 Store Ap ...
随机推荐
- Unity5网络模块UNet介绍
前段时间,研究了一下UNet,经过项目实践,大致整理了下遇到的问题. 源码Bitbucket:需要说明的是,这个项目只包含上层的包装,一些低层的网络实现在Unity内部,如NetworkTranspo ...
- volley二次封装
产品中使用Volley框架已有多时,本身已有良好封装的Volley确实给程序开发带来了很多便利与快捷.但随着产品功能的不断增加,服务器接口的不断复杂化,直接使用Volley原生的JSONObjectR ...
- [leetcode]Excel Sheet Column Number
26进制 class Solution { public: int titleToNumber(string s) { ; ; i < s.size(); i++) { n = n * + s[ ...
- Java Web 工作技巧总结 16.8
摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢! 四时不谢之兰,百节长青之竹,万古不败之石,千秋不变之人. 1. AOP – LOG项目中,一个请 ...
- 头文件 string.h cstring string 区别
1.#include <cstring> //不可以定义string s:可以用到strcpy等函数using namespace std; #include <stri ...
- Go语言获取项目当前路径
package main import ( "fmt" "os" "os/exec" "strings" ) func ...
- sitemesh2在tomcat和weblogic中同时使用的配置问题
(一)拦截*.do,装饰器中匹配do tomcat 可行 weblogic 不可行 web.xml ~~~ <filter> <filter-name>sitemesh< ...
- TeamViewer连接Windows8.1系统黑屏解决方案
TeamViewer用win7连接win8.1 都是64位系统,总是黑屏,可以看到鼠标也联动了,聊天传输文件都没有问题,反向用win8.1连接win7也没问题,而且TeamViewer更新到最新版本了 ...
- js apply/call/caller/callee/bind使用方法与区别分析
一.call 方法 调用一个对象的一个方法,以另一个对象替换当前对象(其实就是更改对象的内部指针,即改变对象的this指向的内容). Js代码 call([thisObj[,arg1[, arg2[, ...
- Angular.js表单以及与Bootatrap的使用
首先从angular.js的目录开始,如下图,知道了我们要学什么,然后再开始有目的的学习与对比. 1.从表达式开始: ng-app指令初始化一个 AngularJS 应用程序. ng-init指令初始 ...