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人
Windows 8实例教程系列 - 数据绑定高级实例的更多相关文章
- Windows 8实例教程系列 - 数据绑定基础实例
原文:Windows 8实例教程系列 - 数据绑定基础实例 数据绑定是WPF,Silverlight以及Windows Phone应用开发中最为常用的开发技术,在基于XAML的Windows Stor ...
- Silverlight，Windows 8应用开发实例教程系列汇总
Kevin Fan分享开发经验,记录开发点滴 Silverlight,Windows 8应用开发实例教程系列汇总 2012-06-18 01:05 by jv9, 2145 阅读, 3 评论, 收藏, ...
- XAML实例教程系列 - 依赖属性和附加属性（四）
XAML实例教程系列 - 依赖属性和附加属性 2012-06-07 13:11 by jv9, 1479 阅读, 5 评论, 收藏, 编辑 微软发布Visual Studio 2012 RC和Wind ...
- XAML实例教程系列 - 类型转换器(Type Converter)七
XAML实例教程系列 - 类型转换器(Type Converter) 分类: Windows 8 Silverlight2012-06-25 13:40 961人阅读 评论(0) 收藏 举报 butt ...
- XAML实例教程系列 - 资源(Resources)
Kevin Fan分享开发经验,记录开发点滴 XAML实例教程系列 - 资源(Resources) 2012-08-10 12:47 by jv9, 1386 阅读, 1 评论, 收藏, 编辑 在Wi ...
- XAML实例教程系列 - XAML传递参数到值转换类实例 八
Kevin Fan分享开发经验,记录开发点滴 XAML实例教程系列 - XAML传递参数到值转换类实例 2012-06-28 05:25 by jv9, 508 阅读, 0 评论, 收藏, 编辑 继上 ...
- XAML实例教程系列 - 事件(Event) 五
Kevin Fan分享开发经验,记录开发点滴 XAML实例教程系列 - 事件(Event) 2012-06-19 01:36 by jv9, 1727 阅读, 7 评论, 收藏, 编辑 Events, ...
- Windows 8实例教程系列 - 布局控制
原文:Windows 8实例教程系列 - 布局控制 与传统应用类似,Windows store应用允许开发人员通过布局控件管理应用UI. 本篇将讨论Windows8布局设计控制. Windows 8布 ...
- Windows 8实例教程系列 - 理解应用框架
原文:Windows 8实例教程系列 - 理解应用框架 Windows 操作系统之所以风靡世界,是因为其“易学易用”,从用户的角度出发,让数以万计的非IT人员使用计算机实现娱乐,工作等目的.Windo ...
随机推荐
- hdu 2451 Simple Addition Expression（数位DP ）成败在于细节
亚洲区域赛的题,简单的数位DP题,注重细节. 任何细节都有可能导致wa,所以没有绝对的水题. 把握好细节,此题便A. #include<stdio.h> __int64 getans(__ ...
- 组队赛第二场：字符串哈希+DP
长春现场赛 HDU 4821 思路:这题周赛的时候没做出来,有点可惜了.要是当时记起来unsigned long long自己主动取模,然后提醒一下大帝的话,后续大帝就能过了. 唉,导致让他取了好多 ...
- SWT中在treeview中显示图片
package com.repositoryclient.treeview; import org.eclipse.jface.resource.ImageDescriptor; import org ...
- HDU 3304 Interesting Yang Yui Triangle lucas定理
输入p n 求杨辉三角的第n+1行不能被p整除的数有多少个 Lucas定理: A.B是非负整数,p是质数.AB写成p进制:A=a[n]a[n-1]...a[0],B=b[n]b[n-1]...b[0] ...
- HGE基础教程
作者:寰子 来源:http://www.hgechina.com/前言: 写道: 无意中发现了hge中文社区,听朋友介绍,认识了hge,然后开始对它进行研究,并使用hge开始制作游戏. 因为我所得的资 ...
- 局部敏感哈希-Locality Sensitive Hashing
局部敏感哈希 转载请注明http://blog.csdn.net/stdcoutzyx/article/details/44456679 在检索技术中,索引一直须要研究的核心技术.当下,索引技术主要分 ...
- Python学习入门基础教程(learning Python)--2.3.1 Python传参函数设计
本节主要讨论设计传递多个参数子函数的设计方法. 在2.3节里我们讨论了如何自己设计一个带参数的子函数的设计方法,现在我们研究一下如何传递两个及以上参数的设计方法. 函数为何要带参数呢?其实原因很简单, ...
- selenium 远程调用浏览器
共分三步: 1.selenium官网下载selenium-server-standalone.jar的最新版本号 2.启动selenium-server::::: java -jar "se ...
- 高速幂 POW优化
#include <iostream> #include <stdio.h> #include <stdlib.h> #include <string.h&g ...
- 获取编译学习笔记 （六）—— si、di，双环
疯狂暑期学习 汇编入门学习笔记 (六)-- si.di,双重循环 參考: <汇编语言> 王爽 第7章 1. and和or指令,与[bx+idata] and和or.就不多说了. [bx+ ...