Windows 8实例教程系列 - 数据绑定高级实例

上篇Windows 8实例教程系列 - 数据绑定基础实例中，介绍Windows 8应用开发数据绑定基础，其中包括一些简单的数据绑定控件的使用。

本篇将介绍较为复杂的数据绑定控件实例， 其中包括ListView， GridView，以及GridView分组，GridView分组缩放等绑定功能。

了解ListView和GridView数据绑定控件

两个控件都是继承自ItemsControl类，在功能上类似，都是在应用中显示数据集合，但是显示方式不同。

ListView显示方式为垂直堆栈形式，以列表的形式显示数据；常用于显示简洁数据列表，选中选项后显示详细数据。

GridView显示方式是平行堆栈形式，经常会用于显示较为丰富的数据集合，例如，相册列表应用，显示照片在每个选项。

ListView控件实例

前台代码：

<ListView x:Name="lvMainListView" Margin="5"  VerticalAlignment="Top" MaxWidth="400" HorizontalAlignment="Left"                  ItemTemplate="{StaticResource ContactTemplate}" ScrollViewer.VerticalScrollBarVisibility="Auto" BorderBrush="White" BorderThickness="2"                   ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectionMode="Single"                  SelectionChanged="lvMainListView_SelectionChanged_1"/>

在ListView中使用了自定义ItemTemplate，自定义设置选项布局，

<Page.Resources>        <x:String x:Key="AppName">Windows 8实例教程 - ListView</x:String>        <Style x:Key="ContactEmailStyle" TargetType="TextBlock">            <Setter Property="FontFamily" Value="Segoe UI Light"/>            <Setter Property="FontSize" Value="18"/>        </Style>        <Style x:Key="ContactAuthorStyle" TargetType="TextBlock">            <Setter Property="FontFamily" Value="Segoe UI Light"/>            <Setter Property="FontSize" Value="14"/>        </Style>        <DataTemplate x:Key="ContactTemplate">            <Grid Margin="10">                <StackPanel Orientation="Horizontal">                    <Image Source="{Binding Thumbnail}" Height="60" Width="60" Margin="0,0,10,0"/>                    <StackPanel Margin="0,0,0,0" Orientation="Vertical">                        <TextBlock TextWrapping="Wrap" Style="{StaticResource ContactEmailStyle}"                                    Text="{Binding Email}" />                        <TextBlock TextWrapping="Wrap" Style="{StaticResource ContactAuthorStyle}" Text="{Binding Author}" />                    </StackPanel>                </StackPanel>            </Grid>        </DataTemplate>    </Page.Resources>

后台代码：

public sealed partial class MainPage : Page    {        private ObservableCollection<Contact> Contacts = new ObservableCollection<Contact>();        public MainPage()        {            this.InitializeComponent();            LoadContacts();        }        private void LoadContacts()        {            Contacts.Add(new Contact            {                Email = "qq34506@hotmail.com",                Author = "Kevin Fan",                Thumbnail = new BitmapImage(new Uri("ms-appx:///Assets/60Mail01.png", UriKind.RelativeOrAbsolute))            });            Contacts.Add(new Contact            {                Email = "admin@silverlightchina.net",                Author = "银光中国",                Thumbnail = new BitmapImage(new Uri("ms-appx:///Assets/60Mail02.png", UriKind.RelativeOrAbsolute))            });            Contacts.Add(new Contact            {                Email = "SandyY@yahoo.ca",                Author = "Sandy Yang",                Thumbnail = new BitmapImage(new Uri("ms-appx:///Assets/60Mail03.png", UriKind.RelativeOrAbsolute))            });            lvMainListView.ItemsSource = Contacts;        }        private void lvMainListView_SelectionChanged_1(object sender, SelectionChangedEventArgs e)        {            SelectedListItem.Text = String.Format("Selected Contact's Email: {0}", ((Contact)e.AddedItems[0]).Email);        }    }

GridView控件

前台代码：

<GridView x:Name="gvMainGridView" HorizontalAlignment="Left" Margin="45,30,0,0" Grid.Row="1" VerticalAlignment="Top" MinWidth="200" MinHeight="200"            ItemTemplate="{StaticResource ContactTemplate}" ItemsPanel="{StaticResource GridViewItemsPanel}"                       BorderBrush="White" BorderThickness="2" ScrollViewer.VerticalScrollBarVisibility="Auto"            ScrollViewer.HorizontalScrollBarVisibility="Auto" SelectionMode="Single" Width="800"            SelectionChanged="gvMainGridView_SelectionChanged_1" />

GridView控件使用两个自定义Template，分别为ItemTemplate和ItemsPanel，

<Page.Resources>        <x:String x:Key="AppName">Windows 8实例教程 - GridView</x:String>                <Style x:Key="ContactEmailStyle" TargetType="TextBlock">            <Setter Property="FontFamily" Value="Segoe UI Light"/>            <Setter Property="FontSize" Value="18"/>        </Style>        <Style x:Key="ContactAuthorStyle" TargetType="TextBlock">            <Setter Property="FontFamily" Value="Segoe UI Light"/>            <Setter Property="FontSize" Value="14"/>        </Style>        <DataTemplate x:Key="ContactTemplate">            <Grid Margin="10">                <StackPanel Orientation="Horizontal">                    <Image Source="{Binding Thumbnail}" Height="60" Width="60" Margin="0,0,10,0"/>                    <StackPanel Margin="0,0,0,0" Orientation="Vertical">                        <TextBlock TextWrapping="Wrap" Style="{StaticResource ContactEmailStyle}"                                    Text="{Binding Email}" />                        <TextBlock TextWrapping="Wrap" Style="{StaticResource ContactAuthorStyle}" Text="{Binding Author}" />                    </StackPanel>                </StackPanel>            </Grid>        </DataTemplate>        <ItemsPanelTemplate x:Key="GridViewItemsPanel">            <WrapGrid MaximumRowsOrColumns="2" />        </ItemsPanelTemplate>    </Page.Resources>

后台代码：

public sealed partial class MainPage : Page    {        private ObservableCollection<Contact> Contacts = new ObservableCollection<Contact>();        private CollectionViewSource GroupedItems = new CollectionViewSource { IsSourceGrouped = true };        public MainPage()        {            this.InitializeComponent();            LoadContacts();        }        private void gvMainGridView_SelectionChanged_1(object sender, SelectionChangedEventArgs e)        {            SelectedGridItem.Text = String.Format("Selected Contact's Email: {0}", ((Contact)e.AddedItems[0]).Email);        }        private void LoadContacts()        {            Contacts.Add(new Contact            {                Email = "qq34506@hotmail.com",                Author = "Kevin Fan",                Thumbnail = new BitmapImage(new Uri("ms-appx:///Assets/60Mail01.png", UriKind.RelativeOrAbsolute))            });            Contacts.Add(new Contact            {                Email = "admin@silverlightchina.net",                Author = "银光中国",                Thumbnail = new BitmapImage(new Uri("ms-appx:///Assets/60Mail02.png", UriKind.RelativeOrAbsolute))            });            Contacts.Add(new Contact            {                Email = "SandyY@yahoo.ca",                Author = "Sandy Yang",                Thumbnail = new BitmapImage(new Uri("ms-appx:///Assets/60Mail03.png", UriKind.RelativeOrAbsolute))            });            gvMainGridView.ItemsSource = Contacts;        }    }

Windows store应用中，对于GridView控件使用较为频繁，下面两个实例是从GridView扩展而来。

GridView分组

GridView控件分组，通过对于相同对象属性绑定实现分组功能。该实例分为Developer，Designer和Manager三组，

前台代码：

该实例使用GridView实例中相同模板代码，这里不再重复赘述，

<GridView x:Name="gvMainGridView" HorizontalAlignment="Left" Margin="45,30,0,0" Grid.Row="1" VerticalAlignment="Top" MinWidth="200" MinHeight="200"            ItemTemplate="{StaticResource ContactTemplate}" ItemsPanel="{StaticResource GridViewItemsPanel}"                       BorderBrush="White" BorderThickness="2" ScrollViewer.VerticalScrollBarVisibility="Auto"            ScrollViewer.HorizontalScrollBarVisibility="Auto" SelectionMode="Single" MaxWidth="1000"             SelectionChanged="gvMainGridView_SelectionChanged_1">                <GridView.GroupStyle>                    <GroupStyle>                        <GroupStyle.HeaderTemplate>                            <DataTemplate>                                <TextBlock Text='{Binding Role}' Foreground="White" FontSize="25" Margin="5" />                            </DataTemplate>                        </GroupStyle.HeaderTemplate>                    </GroupStyle>                </GridView.GroupStyle>            </GridView>

后台代码：

后台代码数据源代码与GridView实例类似，只是在页面载入时需要对数据源进行分组操作。代码如下：

private List<Contact> AllContacts = new List<Contact>();        private CollectionViewSource ContactCollection = new CollectionViewSource { IsSourceGrouped = true, ItemsPath = new PropertyPath("Contacts") };        public MainPage()        {            this.InitializeComponent();            LoadContacts();            var groupedContacts = AllContacts.GroupBy(x => x.Role).Select(x => new GroupContactList { Role = x.Key, Contacts = x.ToList() });            ContactCollection.Source = groupedContacts.ToList();            gvMainGridView.ItemsSource = ContactCollection.View;        }

GridView Zoom分组

该实例根据GridView分组功能使用SemanticZoom控件实现数据分组以及缩放功能。

前台代码：

<SemanticZoom x:Name="MainZoomControl" HorizontalAlignment="Left" Margin="45,30,0,0" Grid.Row="1" VerticalAlignment="Top">                <SemanticZoom.ZoomedOutView>                    <GridView x:Name="gvZoomedOutGridView" MinWidth="200" MinHeight="200"                    ItemTemplate="{StaticResource ZoomedOutBookTemplate}"                    BorderBrush="White" BorderThickness="2" ScrollViewer.VerticalScrollBarVisibility="Auto"                    ScrollViewer.HorizontalScrollBarVisibility="Auto" SelectionMode="Single" MaxWidth="1000" >                        <GridView.ItemsPanel>                            <ItemsPanelTemplate>                                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" />                            </ItemsPanelTemplate>                        </GridView.ItemsPanel>                    </GridView>                </SemanticZoom.ZoomedOutView>                <SemanticZoom.ZoomedInView>                    <GridView x:Name="gvZoomedInGridView" HorizontalAlignment="Left" Margin="45,30,0,0" Grid.Row="1" VerticalAlignment="Top" MinWidth="200" MinHeight="200"                    ItemTemplate="{StaticResource ContactTemplate}" ItemsPanel="{StaticResource GridViewItemsPanel}"                               BorderBrush="White" BorderThickness="2" ScrollViewer.VerticalScrollBarVisibility="Auto"                    ScrollViewer.HorizontalScrollBarVisibility="Auto" SelectionMode="Single" MaxWidth="1000"                              ItemsSource="{Binding Source={StaticResource ContactCollection}}">                        <GridView.GroupStyle>                            <GroupStyle>                                <GroupStyle.HeaderTemplate>                                    <DataTemplate>                                        <TextBlock Text='{Binding Role}' Foreground="White" FontSize="25" Margin="5" />                                    </DataTemplate>                                </GroupStyle.HeaderTemplate>                                <GroupStyle.Panel>                                    <ItemsPanelTemplate>                                        <VariableSizedWrapGrid Orientation="Vertical" Height="400" />                                    </ItemsPanelTemplate>                                </GroupStyle.Panel>                            </GroupStyle>                        </GridView.GroupStyle>                    </GridView>                </SemanticZoom.ZoomedInView>            </SemanticZoom>

后代代码：

private List<GroupContactList> GroupedContacts = new List<GroupContactList>();        private List<Contact> AllContacts = new List<Contact>();        public MainPage()        {            this.InitializeComponent();            LoadContacts();            var groupedContacts = AllContacts.GroupBy(x => x.Role).Select(x => new GroupContactList { Role = x.Key, Contacts = x.ToList() });            GroupedContacts = groupedContacts.ToList();            ContactCollection.Source = groupedContacts.ToList();            gvZoomedOutGridView.ItemsSource = ContactCollection.View.CollectionGroups;        }

本篇介绍一些较为复杂的数据绑定控件实例，欢迎留言讨论学习。

本篇源代码

加入QQ群交流学习：

22308706(一群) 超级群500人
37891947(二群) 超级群500人
100844510(三群) 高级群200人
32679922(四群) 超级群500人
23413513(五群) 高级群200人
32679955(六群) 超级群500人
88585140(八群) 超级群500人
128043302(九群 企业应用开发推荐群) 高级群200人
101364438(十群) 超级群500人

68435160(十一群 企业应用开发推荐群)超级群500人