[源码下载]

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

作者：webabcd

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

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

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

  1. <Page
  2.     x:Class="XamlDemo.Binding.BindingObservableCollection"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:local="using:XamlDemo.Binding"
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8.     mc:Ignorable="d">
  9.  
  10.     <Grid Background="Transparent">
  11.         <Grid Margin="120 0 0 10">
  12.  
  13.             <Grid.Resources>
  14.                 <DataTemplate x:Key="MyDataTemplate">
  15.                     <Border Background="Blue" Width="200" CornerRadius="3" HorizontalAlignment="Left">
  16.                         <TextBlock Text="{Binding Name}" FontSize="14.667" />
  17.                     </Border>
  18.                 </DataTemplate>
  19.             </Grid.Resources>
  20.  
  21.             <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
  22.                 <Button Name="btnDelete" Content="删除一条记录" Click="btnDelete_Click_1" />
  23.                 <Button Name="btnUpdate" Content="更新一条记录" Click="btnUpdate_Click_1" Margin="10 0 0 0" />
  24.             </StackPanel>
  25.  
  26.             <ListView x:Name="listView" ItemTemplate="{StaticResource MyDataTemplate}" Margin="0 50 0 0" />
  27.  
  28.         </Grid>
  29.     </Grid>
  30. </Page>

Binding/BindingObservableCollection.xaml.cs

  1. /*
  2.  * 演示如何绑定 ObservableCollection<T> 类型的数据
  3.  *
  4.  * ObservableCollection<T> - 在数据集合进行添加项、删除项、更新项、移动项等操作时提供通知
  5.  *     CollectionChanged - 当发生添加项、删除项、更新项、移动项等操作时所触发的事件（事件参数：NotifyCollectionChangedEventArgs）
  6.  */
  7.  
  8. using System;
  9. using System.Collections.ObjectModel;
  10. using System.Collections.Specialized;
  11. using System.Linq;
  12. using Windows.UI.Xaml;
  13. using Windows.UI.Xaml.Controls;
  14. using XamlDemo.Model;
  15.  
  16. namespace XamlDemo.Binding
  17. {
  18.     public sealed partial class BindingObservableCollection : Page
  19.     {
  20.         private ObservableCollection<Employee> _employees;
  21.  
  22.         public BindingObservableCollection()
  23.         {
  24.             this.InitializeComponent();
  25.  
  26.             this.Loaded += BindingObservableCollection_Loaded;
  27.         }
  28.  
  29.         void BindingObservableCollection_Loaded(object sender, RoutedEventArgs e)
  30.         {
  31.             _employees = new ObservableCollection<Employee>(TestData.GetEmployees());
  32.             _employees.CollectionChanged += _employees_CollectionChanged;
  33.  
  34.             listView.ItemsSource = _employees;
  35.         }
  36.  
  37.         void _employees_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
  38.         {
  39.             /*
  40.              * e.Action - 引发此事件的操作类型（NotifyCollectionChangedAction 枚举）
  41.              *     Add, Remove, Replace, Move, Reset
  42.              * e.OldItems - Remove, Replace, Move 操作时影响的数据列表
  43.              * e.OldStartingIndex - Remove, Replace, Move 操作发生处的索引
  44.              * e.NewItems - 更改中所涉及的新的数据列表
  45.              * e.NewStartingIndex - 更改中所涉及的新的数据列表的发生处的索引
  46.              */
  47.         }
  48.  
  49.         private void btnDelete_Click_1(object sender, RoutedEventArgs e)
  50.         {
  51.             _employees.RemoveAt();
  52.         }
  53.  
  54.         private void btnUpdate_Click_1(object sender, RoutedEventArgs e)
  55.         {
  56.             Random random = new Random();
  57.  
  58.             // 此处的通知来自实现了 INotifyPropertyChanged 接口的 Employee
  59.             _employees.First().Name = random.Next(, ).ToString(); 
  60.  
  61.             // 此处的通知来自 ObservableCollection<T>
  62.             _employees[] = new Employee() { Name = random.Next(, ).ToString() };
  63.         }
  64.     }
  65. }

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

  1. <Page
  2.     x:Class="XamlDemo.Binding.BindingCollectionViewSource"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:local="using:XamlDemo.Binding"
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8.     mc:Ignorable="d">
  9.  
  10.     <Grid Background="Transparent">
  11.         <Grid Margin="120 0 0 10">
  12.  
  13.             <ListView x:Name="listView">
  14.                 <ListView.GroupStyle>
  15.                     <GroupStyle>
  16.                         <!--分组后，header 的数据模板-->
  17.                         <GroupStyle.HeaderTemplate>
  18.                             <DataTemplate>
  19.                                 <TextBlock Text="{Binding Title}" FontSize="24.667" />
  20.                             </DataTemplate>
  21.                         </GroupStyle.HeaderTemplate>
  22.                     </GroupStyle>
  23.                 </ListView.GroupStyle>
  24.                 <!--分组后，details 的数据模板-->
  25.                 <ListView.ItemTemplate>
  26.                     <DataTemplate>
  27.                         <TextBlock Text="{Binding Title}" FontSize="14.667" Padding="50 0 0 0" />
  28.                     </DataTemplate>
  29.                 </ListView.ItemTemplate>
  30.             </ListView>
  31.  
  32.         </Grid>
  33.     </Grid>
  34. </Page>

Binding/BindingCollectionViewSource.xaml.cs

  1. /*
  2.  * 演示如何绑定 CollectionViewSource 类型的数据，以实现数据的分组显示
  3.  *
  4.  * CollectionViewSource - 对集合数据启用分组支持
  5.  *     Source - 数据源
  6.  *     View - 获取视图对象，返回一个实现了 ICollectionView 接口的对象
  7.  *     IsSourceGrouped - 数据源是否是一个被分组的数据
  8.  *     ItemsPath - 数据源中，子数据集合的属性名称
  9.  *
  10.  * ICollectionView - 支持数据分组
  11.  *     CollectionGroups - 组数据集合
  12.  *
  13.  *
  14.  * 注：关于数据分组的应用还可参见：XamlDemo/Index.xaml 和 XamlDemo/Index.xaml.cs
  15.  */
  16.  
  17. using System.Collections.Generic;
  18. using System.Linq;
  19. using System.Xml.Linq;
  20. using Windows.UI.Xaml;
  21. using Windows.UI.Xaml.Controls;
  22. using Windows.UI.Xaml.Data;
  23.  
  24. namespace XamlDemo.Binding
  25. {
  26.     public sealed partial class BindingCollectionViewSource : Page
  27.     {
  28.         public BindingCollectionViewSource()
  29.         {
  30.             this.InitializeComponent();
  31.  
  32.             this.Loaded += BindingCollectionViewSource_Loaded;
  33.         }
  34.  
  35.         void BindingCollectionViewSource_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
  36.         {
  37.             XElement root = XElement.Load("SiteMap.xml");
  38.             var items = LoadData(root);
  39.  
  40.             // 构造数据源
  41.             CollectionViewSource groupData = new CollectionViewSource();
  42.             groupData.IsSourceGrouped = true;
  43.             groupData.Source = items;
  44.             groupData.ItemsPath = new PropertyPath("Items");
  45.  
  46.             // 绑定 ICollectionView 类型的数据，以支持分组
  47.             listView.ItemsSource = groupData.View;
  48.         }
  49.  
  50.         // 获取数据
  51.         private List<GroupModel> LoadData(XElement root)
  52.         {
  53.             if (root == null)
  54.                 return null;
  55.  
  56.             var items = from n in root.Elements("node")
  57.                         select new GroupModel
  58.                         {
  59.                             Title = (string)n.Attribute("title"),
  60.                             Items = LoadData(n)
  61.                         };
  62.  
  63.             return items.ToList();
  64.         }
  65.  
  66.         class GroupModel
  67.         {
  68.             public string Title { get; set; }
  69.             public List<GroupModel> Items { get; set; }
  70.         }
  71.     }
  72. }

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

  1. <Page
  2.     x:Class="XamlDemo.Binding.BindingVirtualizedFilesVector"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:local="using:XamlDemo.Binding"
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8.     xmlns:converter="using:XamlDemo.Common"
  9.     mc:Ignorable="d">
  10.  
  11.     <Grid Background="Transparent">
  12.  
  13.         <Grid.Resources>
  14.             <converter:ThumbnailConverter x:Key="ThumbnailConverter"/>
  15.             <CollectionViewSource x:Name="itemsViewSource"/>
  16.         </Grid.Resources>
  17.  
  18.         <GridView Name="gridView" Padding="120 0 0 10" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" SelectionMode="None">
  19.             <GridView.ItemTemplate>
  20.                 <DataTemplate>
  21.                     <Grid Width="160" Height="120">
  22.                         <Border Background="Red" Width="160" Height="120">
  23.                             <Image Source="{Binding Path=Thumbnail, Converter={StaticResource ThumbnailConverter}}" Stretch="None" Width="160" Height="120" />
  24.                         </Border>
  25.                     </Grid>
  26.                 </DataTemplate>
  27.             </GridView.ItemTemplate>
  28.         </GridView>
  29.  
  30.     </Grid>
  31. </Page>

Binding/BindingVirtualizedFilesVector.xaml.cs

  1. /*
  2.  * 演示如何绑定 VirtualizedFilesVector
  3.  *
  4.  * 本 Demo 演示了如何将图片库中的文件绑定到 GridView
  5.  */
  6.  
  7. using Windows.Storage;
  8. using Windows.Storage.BulkAccess;
  9. using Windows.Storage.FileProperties;
  10. using Windows.Storage.Search;
  11. using Windows.UI.Xaml.Controls;
  12. using Windows.UI.Xaml.Navigation;
  13.  
  14. namespace XamlDemo.Binding
  15. {
  16.     public sealed partial class BindingVirtualizedFilesVector : Page
  17.     {
  18.         public BindingVirtualizedFilesVector()
  19.         {
  20.             this.InitializeComponent();
  21.         }
  22.  
  23.         protected override void OnNavigatedTo(NavigationEventArgs e)
  24.         {
  25.             QueryOptions queryOptions = new QueryOptions();
  26.             queryOptions.FolderDepth = FolderDepth.Deep;
  27.             queryOptions.IndexerOption = IndexerOption.UseIndexerWhenAvailable;
  28.             queryOptions.SortOrder.Clear();
  29.             SortEntry sortEntry = new SortEntry();
  30.             sortEntry.PropertyName = "System.FileName";
  31.             sortEntry.AscendingOrder = true;
  32.             queryOptions.SortOrder.Add(sortEntry);
  33.  
  34.             // 一个用于搜索图片库中的文件的查询
  35.             StorageFileQueryResult fileQuery = KnownFolders.PicturesLibrary.CreateFileQueryWithOptions(queryOptions);
  36.  
  37.             // 创建一个 FileInformationFactory 对象
  38.             var fileInformationFactory = new FileInformationFactory(fileQuery, ThumbnailMode.PicturesView, , ThumbnailOptions.UseCurrentScale, true);
  39.  
  40.             // 获取 VirtualizedFilesVector
  41.             itemsViewSource.Source = fileInformationFactory.GetVirtualizedFilesVector();
  42.         }
  43.     }
  44. }

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

  1. <Page
  2.     x:Class="XamlDemo.Binding.BindingVirtualizedItemsVector"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:local="using:XamlDemo.Binding"
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8.     xmlns:converter="using:XamlDemo.Common"
  9.     mc:Ignorable="d">
  10.  
  11.     <Grid Background="Transparent">
  12.  
  13.         <Grid.Resources>
  14.             <converter:ThumbnailConverter x:Key="ThumbnailConverter"/>
  15.             <CollectionViewSource x:Name="itemsViewSource"/>
  16.  
  17.             <DataTemplate x:Key="FolderTemplate">
  18.                 <Grid Width="160" Height="120">
  19.                     <Border Background="Red" Width="160" Height="120">
  20.                         <Image Source="{Binding Path=Thumbnail, Converter={StaticResource ThumbnailConverter}}" Stretch="None" Width="160" Height="120"/>
  21.                     </Border>
  22.                     <TextBlock Text="{Binding Name}" VerticalAlignment="Bottom" HorizontalAlignment="Center" Height="30" />
  23.                 </Grid>
  24.             </DataTemplate>
  25.             <DataTemplate x:Key="FileTemplate">
  26.                 <Grid Width="160" Height="120">
  27.                     <Border Background="Red" Width="160" Height="120">
  28.                         <Image Source="{Binding Path=Thumbnail, Converter={StaticResource ThumbnailConverter}}" Stretch="None" Width="160" Height="120"/>
  29.                     </Border>
  30.                 </Grid>
  31.             </DataTemplate>
  32.  
  33.             <local:FileFolderInformationTemplateSelector x:Key="FileFolderInformationTemplateSelector"
  34.                                                          FileInformationTemplate="{StaticResource FileTemplate}"
  35.                                                          FolderInformationTemplate="{StaticResource FolderTemplate}" />
  36.         </Grid.Resources>
  37.  
  38.         <GridView Name="gridView" Padding="120 0 0 10"
  39.                   ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
  40.                   ItemTemplateSelector="{StaticResource FileFolderInformationTemplateSelector}"
  41.                   SelectionMode="None">
  42.         </GridView>
  43.  
  44.     </Grid>
  45. </Page>

Binding/BindingVirtualizedItemsVector.xaml.cs

  1. /*
  2.  * 演示如何绑定 VirtualizedItemsVector
  3.  *
  4.  * 本 Demo 演示了如何将图片库中的顶级文件夹和顶级文件绑定到 GridView，同时演示了如何 runtime 时选择模板
  5.  */
  6.  
  7. using Windows.Storage;
  8. using Windows.Storage.BulkAccess;
  9. using Windows.Storage.FileProperties;
  10. using Windows.Storage.Search;
  11. using Windows.UI.Xaml;
  12. using Windows.UI.Xaml.Controls;
  13. using Windows.UI.Xaml.Navigation;
  14.  
  15. namespace XamlDemo.Binding
  16. {
  17.     public sealed partial class BindingVirtualizedItemsVector : Page
  18.     {
  19.         public BindingVirtualizedItemsVector()
  20.         {
  21.             this.InitializeComponent();
  22.         }
  23.  
  24.         protected override void OnNavigatedTo(NavigationEventArgs e)
  25.         {
  26.             QueryOptions queryOptions = new QueryOptions();
  27.             queryOptions.FolderDepth = FolderDepth.Shallow;
  28.             queryOptions.IndexerOption = IndexerOption.UseIndexerWhenAvailable;
  29.             queryOptions.SortOrder.Clear();
  30.             SortEntry sortEntry = new SortEntry();
  31.             sortEntry.PropertyName = "System.IsFolder";
  32.             sortEntry.AscendingOrder = false;
  33.             queryOptions.SortOrder.Add(sortEntry);
  34.             SortEntry sortEntry2 = new SortEntry();
  35.             sortEntry2.PropertyName = "System.ItemName";
  36.             sortEntry2.AscendingOrder = true;
  37.             queryOptions.SortOrder.Add(sortEntry2);
  38.  
  39.             // 一个用于搜索图片库中的顶级文件夹和顶级文件的查询
  40.             StorageItemQueryResult itemQuery = KnownFolders.PicturesLibrary.CreateItemQueryWithOptions(queryOptions);
  41.  
  42.             // 创建一个 FileInformationFactory 对象
  43.             var fileInformationFactory = new FileInformationFactory(itemQuery, ThumbnailMode.PicturesView, , ThumbnailOptions.UseCurrentScale, true);
  44.  
  45.             // 获取 VirtualizedItemsVector
  46.             itemsViewSource.Source = fileInformationFactory.GetVirtualizedItemsVector();
  47.         }
  48.     }
  49.  
  50.     // 继承 DataTemplateSelector 以实现 runtime 时选择模板
  51.     public class FileFolderInformationTemplateSelector : DataTemplateSelector
  52.     {
  53.         // 显示文件时的模板
  54.         public DataTemplate FileInformationTemplate { get; set; }
  55.  
  56.         // 显示文件夹时的模板
  57.         public DataTemplate FolderInformationTemplate { get; set; }
  58.  
  59.         // 根据 item 的类型选择指定的模板
  60.         protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
  61.         {
  62.             var folder = item as FolderInformation;
  63.             if (folder == null)
  64.                 return FileInformationTemplate;
  65.             else
  66.                 return FolderInformationTemplate;
  67.         }
  68.     }
  69. }

OK
[源码下载]

重新想象 Windows 8 Store Apps (53) - 绑定: 与 ObservableCollection CollectionViewSource VirtualizedFilesVector VirtualizedItemsVector 绑定的更多相关文章

  1. 重新想象 Windows 8 Store Apps 系列文章索引

    [源码下载][重新想象 Windows 8.1 Store Apps 系列文章] 重新想象 Windows 8 Store Apps 系列文章索引 作者:webabcd 1.重新想象 Windows ...

  2. 重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换

    [源码下载] 重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数 ...

  3. 重新想象 Windows 8 Store Apps (54) - 绑定: 增量方式加载数据

    [源码下载] 重新想象 Windows 8 Store Apps (54) - 绑定: 增量方式加载数据 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 绑定 通过实 ...

  4. 重新想象 Windows 8 Store Apps (55) - 绑定: MVVM 模式

    [源码下载] 重新想象 Windows 8 Store Apps (55) - 绑定: MVVM 模式 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 绑定 通过 M ...

  5. 重新想象 Windows 8 Store Apps (59) - 锁屏

    [源码下载] 重新想象 Windows 8 Store Apps (59) - 锁屏 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 锁屏 登录锁屏,获取当前程序的锁 ...

  6. 重新想象 Windows 8 Store Apps (15) - 控件 UI: 字体继承, Style, ControlTemplate, SystemResource, VisualState, VisualStateManager

    原文:重新想象 Windows 8 Store Apps (15) - 控件 UI: 字体继承, Style, ControlTemplate, SystemResource, VisualState ...

  7. 重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试

    原文:重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试 [源码下载] 重新想象 Windows 8 Store ...

  8. 重新想象 Windows 8 Store Apps (13) - 控件之 SemanticZoom

    原文:重新想象 Windows 8 Store Apps (13) - 控件之 SemanticZoom [源码下载] 重新想象 Windows 8 Store Apps (13) - 控件之 Sem ...

  9. 重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示

    原文:重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示 [源码下载] 重新想象 Windows 8 Store Ap ...

随机推荐

  1. AIDL示例

    背景 最近在考虑项目重构的时候,考虑将项目拆分成两个APK,一个用于数据服务,一个用于UI展示. 数据服务APK向自己编写APK提供数据,同时也可以向第三方提供数据.考虑使用这样的方式代替向第三方提供 ...

  2. Git Tips

    撤销已经推送到远程仓库的最后一次提交,要小心这么操作,因为远程仓库还有别人在使用 $ git reset --hard HEAD^ $ git push -f origin master 从仓库中提出 ...

  3. 解决HP打印机错误：Couldn't open fifo

    我的是因为选错了打印机协议,一开始选成了“互联网打印协议 - IPP”. 解决方案:删除原有打印机配置,重新选择协议为“HP Jetdirect-Socket”即可.

  4. android自定义RadioGroup实现可以添加多种布局

    android自带的RadioGroup是继承自LinearLayout,如果布局的时候不是直接写radiobutton,即radiobutton外面还包了一层容器,这时分组是不成功的,因为查找不到r ...

  5. c2ph

    http://bolenot.ru/library/cmd/blcmdl1_c2ph.htm?-c2ph---Linux%E5%91%BD%E4%BB%A4--UNIX%E5%91%BD%E4%BB% ...

  6. Mysql 导入数据，推荐Source命令，太快了

    http://jingyan.baidu.com/article/cbf0e500d15c762eab289362.html

  7. 30分钟入门Java8之默认方法和静态接口方法

    30分钟入门Java8之默认方法和静态接口方法 前言 上一篇文章30分钟入门Java8之lambda表达式,我们学习了lambda表达式.现在继续Java8新语言特性的学习,今天,我们要学习的是默认方 ...

  8. CentOS 7 上编译安装MySQL 5.6.23

    1.下载源码 wget http://dev.mysql.com/get/Downloads/MySQL-5.6/mysql-5.6.23.tar.gz 2.解压 tar zxvf mysql-5.6 ...

  9. 【Java设计模式】单例模式

    ### 1. 概述> 单例模式是确保某一个类中有且只有一个实例. ----------### 2. 饿汉式单例``` javapublic class SingletonInstance { p ...

  10. client/scroll/offset width/height/top/left ---记第一篇博客

    client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth  width+左p ...