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监控程序本身被卸载方法汇总
本文章由Jack_Jia编写,转载请注明出处. 文章链接: http://blog.csdn.net/jiazhijun/article/details/10157901 作者:Jack_Jia ...
- OpenStack 中的neutron-server启动过程
neutron-server是neutron的核心组件之中的一个.负责直接接收外部请求,然后调用后端对应plugin进行处理. 其核心启动过程代码主要在neutron.server包中. __init ...
- C++实现链栈的基本操作
之前对顺序栈写了基本操作,认为有必要也动手练练栈的链表实现. 对于链栈,一般不会出现栈满的情况. 链栈头文件定义例如以下: #ifndef CSTOCK_H_ #define CSTOCK_H_ ty ...
- Eclipse 改动凝视的 date time 日期时间格式，即${date}变量格式
Eclipse 改动凝视的 date time 日期时间格式,即${date}变量格式 找到eclipse安装文件夹以下的plugins文件夹,搜索 org.eclipse.text ,找到一个jar ...
- cocos2dx使用tolua关于字符串处理的一个问题
正在使用cocos2dx的tolua binding在此过程中发现的一个问题.假设一回或输入是std::string当我们不同意包括二进制数据,和std::string我同意,这样一来就导致了不正确的 ...
- linux LNMP自动安装脚本
#!/bin/bashsoft_dir="/home/soft"config_dir="/home/config"httpd="httpd-2.0.5 ...
- Ubuntu 使用中的问题总结
1.ibus输入法图标消失 #ibus-daemon -d 2.Ubuntu没有声音 #alsamixer 3.“对不起,ubuntu出现了内部错误” # nano /etc/default/appo ...
- 多个UpdatePanel控件相互引发刷新的使用
原文:多个UpdatePanel控件相互引发刷新的使用 ScriptManager和UpdatePanel控件联合使用可以实现页面异步局部更新的效果.其中的UpdatePanel就是设置页面中异 步局 ...
- TestThreadPoolExecutor.java
package ; import java.io.IOException;import java.io.InputStream;import java.util.List;impo ...
- spring4.1+springmvc4.1+mybatis3.2.8+spring-security3.2.5集成环境建设
在最近使用的项目ssi+spring-security 结构体.建立你自己的家,这是什么环境. 只有记录的目的. 项目结构: 类文件: ...