上篇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人