在Windows 8 Metro App中对GridView进行分组

有人可以给我一些提示如何在GridView for Metro Apps中完成分组,如下面的屏幕截图所示。

缩小图像

此屏幕截图来自Windows资源管理器的开发人员资源 ,但遗憾的是没有说明如何完成它。

我有以下代码片段:

XAML:

...                                  ... 

C#:

在Code-Behind中,我在OnNavigateTo方法中执行以下操作:

  List strList = new List() { "Red", "Red", "Red", "Red", "Red", "Red", "Green", "Green","Green","Green","Green", "Blue","Blue","Blue","Blue" }; var groupedList = from s in strList group s by s into g orderby g.Key select g; cvs.Source = groupedList; 

无论我做什么,我都无法将项目分组到屏幕截图中的连续列表中。 该代码导致并排列出的单独列表。

我可能有一个解决方案。 在我的项目中,我必须按字母顺序创建联系人列表,例如People应用程序。

我使用了GridView (带有此示例 ),一个CollectionViewSource和一个我在WinRT XAML Toolkit中找到的包装器(您可以使用NuGet包或复制/粘贴源代码)。 它允许您将项目放在列中。

在此处输入图像描述

视图模型

 class ContactListViewModel { public ContactListViewModel() { ContactSource = new CollectionViewSource(); Contacts = new ObservableCollection(); Contacts.Add(new Contact("Gates","Bill")); Contacts.Add(new Contact("Bush","Georges")); Contacts.Add(new Contact("Obama","Barack")); Contacts.Add(new Contact("Hollande","François")); Contacts.Add(new Contact("Affleck","Ben")); Contacts.Add(new Contact("Allen","Woody")); Contacts.Add(new Contact("Hendrix","Jimi")); Contacts.Add(new Contact("Harrison", "Georges")); Contacts = new ObservableCollection(Contacts.OrderBy(c => c.Name)); ContactSource.Source = GetGroupsByLetter(); ContactSource.IsSourceGrouped = true; } #region Contacts public ObservableCollection Contacts { get; protected set; } public CollectionViewSource ContactSource { get; protected set; } #endregion internal List> GetGroupsByLetter() { List> groups = new List>(); var query = from item in Contacts orderby ((Contact)item).Name group item by ((Contact)item).Name[0] into g select new { GroupName = g.Key, Items = g }; foreach (var g in query) { GroupInfoList info = new GroupInfoList(); info.Key = g.GroupName; foreach (var item in g.Items) { info.Add(item); } groups.Add(info); } return groups; } public class GroupInfoList : List { public object Key { get; set; } public new IEnumerator GetEnumerator() { return (System.Collections.Generic.IEnumerator)base.GetEnumerator(); } } } 

视图

                                                            

使用默认网格视图样式无法完成。

您可能必须使用一个非分组项目列表并添加具有不同项目模板的特殊项目…

抱歉

我将标题作为项添加到gridview,并使用TemplateSelector以正确的方式显示元素…