说到 List 控件,Windows Phone 8.1 上推荐使用的是 ListView 和 GridView。

而这两个控件实在太多东西可讲了,于是分成三篇来讲:

(1)基本

(2)分组数据

(3)多数据呈现

ListView 和 GridView 的最大差别就是:ListView 是一条条依序排列的,而 GridView 则是一块块依序排列的,因此 ListView 中的一项就会占据整整一行或者一列,而 GridView 的一项只会占据它应有的大小,一行或一列中可以放置多项。

而两者在其它方面上基本一致,因此下文只对 ListView 进行介绍,GridView 其实也一样的。


分组数据(GroupingData)

分组数据也就是将数据按首字母或自定义属性进行分组,然后用户就能通过点击首字母或自定义属性达到快速定位的目的:

构建过程:

(1)准备已分好组的数据

数据的分组可分为两类,一是根据项的首字母或拼音分组,二是根据项的自身属性分组。

1)首字母或拼音分组

public static List<AlphaKeyGroup<SampleItem>> GetAlphaGroupSampleItems()
{
ObservableCollection<SampleItem> data = new ObservableCollection<SampleItem>();
data.Add(new SampleItem() { Title = "k1", Content = "k1", Image = "ms-appx:/Images/k1.png", Group = "Kill La Kill" });
data.Add(new SampleItem() { Title = "w2", Content = "w2", Image = "ms-appx:/Images/w2.png", Group = "Wu Yu" });
data.Add(new SampleItem() { Title = "k3", Content = "k3", Image = "ms-appx:/Images/k3.png", Group = "Kill La Kill" });
data.Add(new SampleItem() { Title = "t4", Content = "t4", Image = "ms-appx:/Images/t4.png", Group = "Tiger" });
data.Add(new SampleItem() { Title = "t5", Content = "t5", Image = "ms-appx:/Images/t5.png", Group = "Tiger" });
data.Add(new SampleItem() { Title = "x6", Content = "x6", Image = "ms-appx:/Images/x6.png", Group = "Xi De Ni Ya" });
data.Add(new SampleItem() { Title = "x7", Content = "x7", Image = "ms-appx:/Images/x7.png", Group = "Xi De Ni Ya" });
data.Add(new SampleItem() { Title = "x8", Content = "x8", Image = "ms-appx:/Images/x8.png", Group = "Xi De Ni Ya" });
data.Add(new SampleItem() { Title = "x9", Content = "x9", Image = "ms-appx:/Images/x9.png", Group = "Xi De Ni Ya" });
data.Add(new SampleItem() { Title = "x10", Content = "x10", Image = "ms-appx:/Images/x10.png", Group = "Xi De Ni Ya" });
data.Add(new SampleItem() { Title = "x11", Content = "x11", Image = "ms-appx:/Images/x11.png", Group = "Xi De Ni Ya" }); List<AlphaKeyGroup<SampleItem>> groupData = AlphaKeyGroup<SampleItem>.CreateGroups(
data,
(SampleItem s) => { return s.Title; },
true);
return groupData;
}

AlphaKeyGroup 类为自己写的分组类:

public class AlphaKeyGroup<T>
{
const string GlobeGroupKey = "\uD83C\uDF10"; public string Key { get; private set; } public List<T> InternalList { get; private set; } public AlphaKeyGroup(string key)
{
Key = key;
InternalList = new List<T>();
} private static List<AlphaKeyGroup<T>> CreateDefaultGroups(CharacterGroupings slg)
{
List<AlphaKeyGroup<T>> list = new List<AlphaKeyGroup<T>>(); foreach( CharacterGrouping cg in slg )
{
if( cg.Label == "" )
continue;
if( cg.Label == "..." )
{
list.Add(new AlphaKeyGroup<T>(GlobeGroupKey));
}
else
{
list.Add(new AlphaKeyGroup<T>(cg.Label));
}
} return list;
} public static List<AlphaKeyGroup<T>> CreateGroups(IEnumerable<T> items, Func<T, string> keySelector, bool sort)
{
CharacterGroupings slg = new CharacterGroupings();
List<AlphaKeyGroup<T>> list = CreateDefaultGroups(slg); foreach( T item in items )
{
int index = ;
{
string label = slg.Lookup(keySelector(item));
index = list.FindIndex(alphakeygroup => (alphakeygroup.Key.Equals(label, StringComparison.CurrentCulture)));
} if( index >= && index < list.Count )
{
list[index].InternalList.Add(item);
}
} if( sort )
{
foreach( AlphaKeyGroup<T> group in list )
{
group.InternalList.Sort((c0, c1) => { return keySelector(c0).CompareTo(keySelector(c0)); });
}
} return list;
}
}

AlphaKeyGroup

2)自身属性分组

public static List<KeyedList<string, SampleItem>> GetKeyGroupSampleItems()
{
ObservableCollection<SampleItem> data = new ObservableCollection<SampleItem>();
data.Add(new SampleItem() { Title = "k1", Content = "k1", Image = "ms-appx:/Images/k1.png", Group = "Kill La Kill" });
data.Add(new SampleItem() { Title = "w2", Content = "w2", Image = "ms-appx:/Images/w2.png", Group = "Wu Yu" });
data.Add(new SampleItem() { Title = "k3", Content = "k3", Image = "ms-appx:/Images/k3.png", Group = "Kill La Kill" });
data.Add(new SampleItem() { Title = "t4", Content = "t4", Image = "ms-appx:/Images/t4.png", Group = "Tiger" });
data.Add(new SampleItem() { Title = "t5", Content = "t5", Image = "ms-appx:/Images/t5.png", Group = "Tiger" });
data.Add(new SampleItem() { Title = "x6", Content = "x6", Image = "ms-appx:/Images/x6.png", Group = "Xi De Ni Ya" });
data.Add(new SampleItem() { Title = "x7", Content = "x7", Image = "ms-appx:/Images/x7.png", Group = "Xi De Ni Ya" });
data.Add(new SampleItem() { Title = "x8", Content = "x8", Image = "ms-appx:/Images/x8.png", Group = "Xi De Ni Ya" });
data.Add(new SampleItem() { Title = "x9", Content = "x9", Image = "ms-appx:/Images/x9.png", Group = "Xi De Ni Ya" });
data.Add(new SampleItem() { Title = "x10", Content = "x10", Image = "ms-appx:/Images/x10.png", Group = "Xi De Ni Ya" });
data.Add(new SampleItem() { Title = "x11", Content = "x11", Image = "ms-appx:/Images/x11.png", Group = "Xi De Ni Ya" }); var groupedItems = from item in data
orderby item.Group
group item by item.Group into itemsByGroup
select new KeyedList<string, SampleItem>(itemsByGroup);
return groupedItems.ToList();
}

KeyedList 为自己编写的类:

public class KeyedList<TKey, TItem>: List<TItem>
{
public TKey Key { protected set; get; } public IEnumerable<TItem> InternalList { protected set; get; } public KeyedList(TKey key, IEnumerable<TItem> items)
: base(items)
{
Key = key;
InternalList = items;
} public KeyedList(IGrouping<TKey, TItem> grouping)
: base(grouping)
{
Key = grouping.Key;
InternalList = grouping;
}
}

KeyedList

(2)插入 CollectionViewSource

<Page.Resources>
<CollectionViewSource x:Key="ItemsGrouped"
IsSourceGrouped="True"
ItemsPath="InternalList"
Source="{Binding GroupData, Source={Binding}}"/>
</Page.Resources>

这里的 GroupData 即为第一步中准备好的已分组的数据。

然后将 ListView 的 ItemsSource 绑定为 CollectionViewSources:

<ListView ItemsSource="{Binding Source={StaticResource ItemsGrouped}}"/>

(3)编写 ListView 的 GroupStyle.HeaderTemplate

GroupStyle.HeaderTemplate 也就是 ListView 里每一组的标题的模板,可自由定义:

<ListView.GroupStyle>
<GroupStyle HidesIfEmpty="True" >
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Border Background="{StaticResource PhoneAccentBrush}"
BorderBrush="{StaticResource PhoneAccentBrush}"
BorderThickness="2"
Width="62" Height="62" Margin="0,0,18,0"
HorizontalAlignment="Stretch">
<TextBlock Text="{Binding Key}"
Foreground="{StaticResource PhoneForegroundBrush}"
FontSize="48"
Padding="6"
FontFamily="{StaticResource PhoneFontFamilySemiLight}"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
</Border>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>

(4)将 ListView 放入 SemanticZoom 里

到目前为止,ListView 已经能正常将分组数据显示在页面上了,最后一步也就是将 ListView 放入 SemanticZoom 控件中。

<SemanticZoom>
<SemanticZoom.ZoomedInView>
<!-- 前三步写好的 ListView -->
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<!-- 缩放后的跳转界面 -->
<GridView ItemsSource="{Binding Source={StaticResource ItemsGrouped}, Path=CollectionGroups}"
Background="#AA000000">
<GridView.ItemTemplate>
<DataTemplate>
<Border Background="{Binding Converter={StaticResource BackgroundConverter}}"
Padding="5">
<Border Background="{Binding}"
Width="82" Height="82"
HorizontalAlignment="Left">
<TextBlock Text="{Binding Group.Key}"
Foreground="{Binding Converter={StaticResource ForegroundConverter}}"
FontSize="48"
Padding="6"
HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Border>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>

其中的两个 Converter 是对分组中有无该项的区分显示:

<Page
x:Class="ListControls.GroupListViewPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ListControls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:prim="using:Windows.UI.Xaml.Controls.Primitives"
mc:Ignorable="d"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Page.Resources>
<prim:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
<prim:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>
</Page.Resources> </Page

Convertor

Windows Phone 8.1 列表控件(2):分组数据的更多相关文章

  1. Windows Phone 8.1 列表控件(1):基本

    说到 List 控件,Windows Phone 8.1 上推荐使用的是 ListView 和 GridView. 而这两个控件实在太多东西可讲了,于是分成三篇来讲: (1)基本 (2)分组数据 (3 ...

  2. Windows Phone 8.1 列表控件(3):多数据呈现

    说到 List 控件,Windows Phone 8.1 上推荐使用的是 ListView 和 GridView. 而这两个控件实在太多东西可讲了,于是分成三篇来讲: (1)基本 (2)分组数据 (3 ...

  3. 《深入理解Windows Phone 8.1 UI控件编程》基于最新的Runtime框架

    <深入理解Windows Phone 8.1 UI控件编程>本书基于最新的Windows Phone 8.1 Runtime SDK编写,全面深入地论述了最酷的UI编程技术:实现复杂炫酷的 ...

  4. 重新想象 Windows 8 Store Apps (11) - 控件之 ListView 和 GridView

    原文:重新想象 Windows 8 Store Apps (11) - 控件之 ListView 和 GridView [源码下载] 重新想象 Windows 8 Store Apps (11) - ...

  5. 重新想象 Windows 8 Store Apps (8) - 控件之 WebView

    原文:重新想象 Windows 8 Store Apps (8) - 控件之 WebView [源码下载] 重新想象 Windows 8 Store Apps (8) - 控件之 WebView 作者 ...

  6. 重新想象 Windows 8 Store Apps (5) - 控件之集合控件: ComboBox, ListBox, FlipView, ItemsControl, ItemsPresenter

    原文:重新想象 Windows 8 Store Apps (5) - 控件之集合控件: ComboBox, ListBox, FlipView, ItemsControl, ItemsPresente ...

  7. WPF: 实现带全选复选框的列表控件

    本文将说明如何创建一个带全选复选框的列表控件.其效果如下图:     这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都 ...

  8. CListCtrlEx:一个支持文件拖放和实时监视的列表控件——用未公开API函数实现Shell实时监视

    一.需求无论何时,当你在Explorer窗口中创建.删除或重命名一个文件夹/文件,或者插入拔除移动存储器时,Windows总是能非常快速地更新它所有的视图.有时候我们的程序中也需要这样的功能,以便当用 ...

  9. Windows常见窗口样式和控件风格

    Windows常见窗口样式和控件风格 王佰营 徐丽红 一.窗口样式 WS_POPUP 弹出式窗口(不能与WS_CHILDWINDOW样式同时使用)WS_CHILDWINDOW 子窗口(不能与WS_PO ...

随机推荐

  1. android短信的接收和发送处理

    一 初始化 手机开机初始化调用GSMPhone 构造函数. GSMPhone (Context context, CommandsInterface ci, PhoneNotifier notifie ...

  2. npm获取配置,设置代理

    npm获取配置有6种方式,优先级由高到底. 命令行参数. --proxy http://server:port即将proxy的值设为http://server:port. 环境变量. 以npm_con ...

  3. 进程环境之getrlimit和setrlimit函数

    每个进程都有一组资源限制,其中一些可以用getrlimit和setrlimit函数查询和更改. #include <sys/resource.h> int getrlimit( int r ...

  4. bash的for循环从命令读取值

    bash的for循环可以很方便地从命令读取值,还可以指定分割值 下面的程序可以打印文件的内容,前面加上行号 #!/bin/bash # 打印每一行的内容,前面加行号 filename="/h ...

  5. php 正则中文匹配

    汉字一定注意是gbk还是utf8编码 UTF-8匹配:在javascript中,要判定字符串是中文是很简朴的.比如:var str = "php编程";if (/^[\u4e00- ...

  6. A beginner’s guide to Cache synchronization strategies--转载

    原文地址:http://vladmihalcea.com/2015/04/20/a-beginners-guide-to-cache-synchronization-strategies/ Intro ...

  7. 小白日记40:kali渗透测试之Web渗透-SQL手工注入(二)-读取文件、写入文件、反弹shell

    SQL手工注入 1.读取文件[load_file函数] ' union  SELECT null,load_file('/etc/passwd')--+ burpsuite 2.写入文件 ' unio ...

  8. Android(java)学习笔记87:File类使用

    package cn.itcast_01; import java.io.File; /* * 我们要想实现IO的操作,就必须知道硬盘上文件的表现形式. * 而Java就提供了一个类File供我们使用 ...

  9. Android 自学之画廊视图(Gallery)功能和用法

    Gallery与之前讲的Spinner有共同的父类:AbsSpinner,表明Gallery和Spinner都是一个列表框.他们之间的区别在于Spinner显示的是一个垂直的列表框,而Gallery显 ...

  10. ARM Linux bootloader笔记

    .text //指定了后续编译出来的内容放在代码段[可执行] .global //告诉编译器后续跟的是一个全局可见的名字[可能是变量,也可以是函数名] _start /*函数的其实地址,也是编译.链接 ...