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 ...
随机推荐
- Android-1-电话拨号程序
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjY1MTM4OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- cocos2D（三）---- 第一cocos2d的程序代码分析
在第一讲中已经新建了第一个cocos2d程序,执行效果例如以下: 在这讲中我们来分析下里面的代码,了解cocos2d的工作原理,看看屏幕上的这个"Hello World"是怎样显示 ...
- asp.net EF6.0中出现未找到具有固定名称“System.Data.SqlClient”的 ADO.NET提供程序的实体框架提供程序解决办法
出现的错误信息如下所示: 指定的架构无效.错误: DataModel.ssdl(2,2) : 错误 0152: 未找到具有固定名称“System.Data.SqlClient”的 ADO.NET 提 ...
- 从mina中学习超时程序编写
从mina中学习超时程序编写 在很多情况下,程序需要使用计时器定,在指定的时间内检查连接过期.例如,要实现一个mqtt服务,为了保证QOS,在服务端发送消息后,需要等待客户端的ack,确保客户端接收到 ...
- .Net路（十三）导出数据库到EXCEL
.NET出口Office文件(word,excel)有两种方法我明白.一个存储在导出的文件中server录以下.利用response输出到浏览器地址栏,直接打开:还有直接利用javascript来导出 ...
- 用XAML做网页！！—导航栏
原文:用XAML做网页!!-导航栏 这次要完成的是导航栏,这是页面中比较复杂的区域. 先在 Microsoft Expression Design 中绘制导航栏的背景图案: 导出为barback.xa ...
- 一个简单的HTTP服务器(多线程)
为了更好的了解HTTP协议, 特意谢了一个简单HTTP服务器, 代码只有400行. 因为很简单, 所以效率也不怎么高, 而且支持的特性也不多, 不过也可以运行, 性能跟Apache差不多. ===== ...
- 关于oracle的备份 导入
****假设要保存为bat文件.最好用汉字 导入: imp clsoftoa/clsoftoa@orcl124 --要导入的数据库的 username/password@数据库名 fromuser= ...
- JS 昵称，手机号，邮箱判断
<script type="text/javascript"> var leyou = document.getElementById('J-leyou'), _nam ...
- Java虚拟机几个命令行参数说明
一.运行class文件 执行带main方法的class文件,Java虚拟机命令参数行为: java <CLASS文件名> 注意:CLASS文件名不要带文件后缀.class 例如: java ...