Windows Phone 8.1 新特性 - 控件之列表选择控件
本篇我们来介绍Windows Phone 8.1 新特性中的列表选择控件。
在Windows Phone 8 时代,大家都会使用 LongListSelector 来实现列表选择控件,对数据进行分组显示。比如通讯录中,按照名字首字母进行分组,点击分组标题后跳转到该标题对应的分组。
而Windows Phone 8.1 中会利用 ListView 和 SemanticZoom 来实现,下面我们来看看实现过程。
首先我们来认识一下ListView 和 SemanticZoom:
ListView 从字面上并不难理解,一个列表视图控件,而它实际的作用也和字面表现的差不多,它是一个在一个列表中滚动显示项目的集合控件。
SemanticZoom 可能看起来有些陌生,语义缩放。它是允许用户在集合项目的两个视图之间缩放的一个容器控件。简单来说,当我们对一个联系人集合进行了按首字母分组后,我们可以通过语义缩放控件完成联系人列表和字母列表两种视图的缩放,通过选择字母来导航到该字母分组。
下面我们来看看代码实现,首先是XAML:
<SemanticZoom x:Name="semanticZoom" IsZoomOutButtonEnabled="True" CanChangeViews="True">
<SemanticZoom.ZoomedInView>
<ListView x:Name="listViewDetail" IsSwipeEnabled="True" IsTapEnabled="True" IsItemClickEnabled="True" IsZoomedInView="True">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="40">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="AliceBlue" Grid.Column="0"/>
<TextBlock Grid.Column="1" Text="{Binding ContactName}" FontSize="30"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Border Background="Blue" Height="50" Width="50" HorizontalAlignment="Left" Margin="0,20,0,20" Tapped="Border_Tapped">
<TextBlock Text="{Binding Title}" FontSize="30"/>
</Border>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0 0 0 20" ItemHeight="75"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<ListView x:Name="listViewSummary" Background="Black" IsZoomedInView="False">
<ListView.ItemTemplate>
<DataTemplate>
<Border Height="70" Width="400" Background="Blue" Margin="10,10,10,10">
<TextBlock Text="{Binding Group.Title}" FontSize="30"/>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
代码中我们为SemanticZoom 定义了两种视图,ZoomedInView 和 ZoomedOutView,分别代表元素列表视图和概要(分组名)视图。为这两种视图分别定义了内容,即 ListView。ZoomedInView 中我们定义了一个联系人列表,每个元素包括了一个Border 和一个代表人名的文本控件,这些元素按照首字母分组,点击首字母时进入ZoomedOutView。ZoomedOutView 是一个字母列表,选择某个字母后,列表回到ZoomedInView,且导航到该字母的分组。
下面我们看看数据的绑定过程:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
CollectionViewSource listViewSource = new CollectionViewSource();
listViewSource.IsSourceGrouped = true;
listViewSource.Source = GetContactGroups();
listViewSource.ItemsPath = new PropertyPath("Contacts");
listViewDetail.ItemsSource = listViewSource.View;
listViewSummary.ItemsSource = listViewSource.View.CollectionGroups;
} private List<ContactGroup> GetContactGroups()
{
List<ContactGroup> groups = new List<ContactGroup>();
ContactGroup groupA = new ContactGroup() { Title = "A", Contacts = new List<Contact>() { new Contact("Alan"), new Contact("Allen"), new Contact("Azar") } };
ContactGroup groupB = new ContactGroup() { Title = "B", Contacts = new List<Contact>() { new Contact("Ben"), new Contact("Benzema") } };
ContactGroup groupC = new ContactGroup() { Title = "C", Contacts = new List<Contact>() { new Contact("Cat"), new Contact("Canby"), new Contact("Candy") } };
ContactGroup groupJ = new ContactGroup() { Title = "J", Contacts = new List<Contact>() { new Contact("James"), new Contact("Jim"), new Contact("Jimmy") } };
ContactGroup groupK = new ContactGroup() { Title = "K", Contacts = new List<Contact>() { new Contact("Kevin"), new Contact("King") } };
ContactGroup groupO = new ContactGroup() { Title = "O", Contacts = new List<Contact>() { new Contact("Oscar"), new Contact("Owen") } };
ContactGroup groupP = new ContactGroup() { Title = "P", Contacts = new List<Contact>() { new Contact("Pendy") } };
ContactGroup groupY = new ContactGroup() { Title = "Y", Contacts = new List<Contact>() { new Contact("Yark"), new Contact("York")} };
ContactGroup groupZ = new ContactGroup() { Title = "Z", Contacts = new List<Contact>() { new Contact("Zend"), new Contact("Zin")} };
groups.Add(groupA);
groups.Add(groupB);
groups.Add(groupC);
groups.Add(groupJ);
groups.Add(groupK);
groups.Add(groupO);
groups.Add(groupP);
groups.Add(groupY);
groups.Add(groupZ);
return groups;
} private void Border_Tapped(object sender, TappedRoutedEventArgs e)
{
semanticZoom.IsZoomedInViewActive = false;
}
public class Contact
{
public string ContactName { get; set; } public Contact(string name)
{
ContactName = name;
}
} public class ContactGroup
{
public string Title { get; set; }
public List<Contact> Contacts { get; set; }
}
这里我们演示了数据结构的定义,示例数据的生成和绑定。我们重点来看一下数据绑定的过程,这个过程在 OnNavigatedTo 方法中。
我们定义了一个 CollectionViewSource 类型的实例,它可以向集合类添加分组支持的数据源。把它的Source设置为我们定义的数据分组集合。
ItemsPath 代表在组内查找组的属性路径。然后把listViewDetail 和 listViewSummary 的数据源分别设置为 CollectionViewSource 的视图对象和视图的集合组。
这样我们的示例就完成了,来看一下运行效果:
上图1 中,我们点击某个分组名后,出现图2 的视图,在图2 中点击“K” 后,回到列表视图,且导航到“K”分组。
到了,到这里我们对列表选择控件的介绍就完成了,接下来会继续介绍Windows Phone 8.1中的其他新控件,谢谢大家。
Windows Phone 8.1 新特性 - 控件之列表选择控件的更多相关文章
- Windows Phone 8.1新特性 - 应用商店启动协议
Windows Phone 8.1 Preview SDK 发布也有几个月了,之前断断续续也写过几篇 Windows Phone 8.1 新特性的文章,今天给大家介绍一下应用商店启动协议相关的知识. ...
- VS2010/MFC编程入门之二十八(常用控件:列表视图控件List Control 上)
前面一节中,鸡啄米讲了图片控件Picture Control,本节为大家详解列表视图控件List Control的使用. 列表视图控件简介 列表视图控件List Control同样比较常见, ...
- VS2010-MFC(常用控件:列表视图控件List Control 上)
转自:http://www.jizhuomi.com/software/195.html 列表视图控件简介 列表视图控件List Control同样比较常见,它能够把任何字符串内容以列表的方 ...
- MFC常用控件之列表视图控件(List Control)
近期学习了鸡啄米大神的博客,对其中的一些知识点做了一些自己的总结.不过,博客内容大部分来自鸡啄米.因此,这个博客算是转载博客,只是加了一些我自己的理解而已.若想学习鸡啄米大神的博客总结,请点击连接:h ...
- Windows Phone 8.1 新特性 - 控件之应用程序栏
2014年4月3日的微软Build 2014 大会上,Windows Phone 8.1 正式发布.相较于Windows Phone 8,不论从用户还是开发者的角度,都产生了很大的变化.接下来我们会用 ...
- Windows Phone 8.1SDK新特性预览
前言 Windows Phone 8.1的预览版将在近期推送,WP 8.1的SDK也已经进入到RC阶段,可以从这里安装.本次更新的SDK被直接集成到了VS2013Update2里面,不再是单独的 ...
- Windows Phone8.1系统新特性
Windows Phone 8.1 beta SDK已经为大家透露了不少WP8.1系统的新特性,不过这些新特性还不能保证在最终的消费者版本中都有所体现,毕竟它还仅是SDK版本.日前,国外媒体WPCen ...
- 微软架构师解读Windows Server 2008 R2新特性
目前众多企业都开始为自己寻找一个更加适合自身发展的服务器操作平台.微软的Windows Server 2008 R2就是可以为大家解决服务器平台问题.微软最新的服务器平台Windows Server ...
- Windows Embedded Compact 7新特性
Windows® Embedded Compact 7是Windows Embedded CE的下一代产品,而Windows Embedded CE这款操作系统面向占用资源少的新颖设备.Windows ...
随机推荐
- MVC 之 T4模板简介
个人网站地址:nee32.com 一.T4模板内容简介 为了更好地学习T4模板,我们安装一个插件tangible T4 Editor 在使用了EF生成实体类后,我们会发现一个.tt后缀的文件,它就是T ...
- Java for循环的几种用法
J2SE 1.5提供了另一种形式的for循环.借助这种形式的for循环,可以用更简单地方式来遍历数组和Collection等类型的对象.本文介绍使用这种循环的具体方式,说明如何自行定义能被这样遍历的类 ...
- 日常维护sql
修复mysqlcheck -u -p --repair pmdb prefix="/export/data/mysql/bin/mysql -u -p -e" domain=机房 ...
- python积累
python积累 一.逐渐积累 python逐渐积累 http://www.cnblogs.com/lx63blog/articles/6051526.html python积累_2 http://w ...
- Struts框架——(二)Struts原理with登录实例
二. Struts基本工作流程 假设现在有以下情景: 用户正在浏览一个用STRUTS的技术构建的网站主页,主页上有个登陆表单,用户填好登陆名和密码,单击"登陆"按钮,就激活了以下一 ...
- python 循环嵌套
需求如下: 1. #定义商品列表类 # def shangpin_list(): # for i in com_list: # print(com_list.index(i),end=" & ...
- sdk添加新的C文件编译出错
make: *** 没有规则可以创建"test.elf"需要的目标"mike.c.o". 停止. 解决方法: 重新建立工程并且编译文件
- 网站fail_over测试(障害测试)
确认Web和DB进行操作: 一:确认web: ①确认进程是否存在: ps aux|grep tomcat ②关闭tomcat: /etc/init.d/catalina_sbi stop ③重启tom ...
- C#多线程实现方法
C#中实现线程应用开发的类都包含在了System.Threading命名空间中,比较常用的是Thread,ThreadPool类 Thread类构造函数作用是创建线程,有两个重载版本,一个带参数,一个 ...
- JavaScript 对象的创建和对6种继承模式的理解和遐想
JS中总共有六种继承模式,包括原型链.借用构造函数.组合继承.原型式继承寄生式继承和寄生组合式继承.为了便于理解记忆,我遐想了一个过程,对6中模式进行了简单的阐述. 很长的一个故事,姑且起个名字叫 ...