Windows 8 Store Apps學習(53) 綁定

介紹

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

OK

[源碼下載]：http://files.cnblogs.com/webabcd/Windows8.rar