C# 在Windows 8 Metro应用程序中分组GridView

有人能给我一些如何完成分组的提示吗 在地铁应用程序的GridView中，如下面的屏幕截图所示

这个截图来自， 但不幸的是，没有描述如何实现它

我有以下代码片段：

Xaml：

C:

在代码隐藏中，我在OnNavigateTo方法中执行以下操作：

        List<string> strList = new List<string>() { 
        "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;

无论我做什么，我都无法像中那样将项目分组到连续列表中

---

截图。该代码将生成并排分组的单独列表。

使用默认网格视图样式无法完成此操作

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

---

很抱歉，我会将标题作为项目添加到gridview中，并使用TemplateSelector以正确的方式显示元素…

我可能有一个解决方案。在我的projet中，我必须按照字母顺序创建联系人列表，就像People应用程序一样

我在you can get with NuGet软件包中找到了一个用于此的、一个和一个wrappanel，或者复制/粘贴源代码。它允许您将项目放入列中

范例

视图模型

看法

---

你忘了放东西，但看起来不像图片。是的，我的错，我用了好几个包装纸，我忘了为这一个添加方向。你所说的“看起来不像图像”是什么意思？当您添加许多首字母相同的联系人时，会创建一个单独的列。如果你想得到问题的准确图像，你需要手工完成，就像Jmix90所说的那样。

        List<string> strList = new List<string>() { 
        "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;

class ContactListViewModel
    {

        public ContactListViewModel()
        {
            ContactSource = new CollectionViewSource();
            Contacts = new ObservableCollection<Contact>();

            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<Contact>(Contacts.OrderBy(c => c.Name));
            ContactSource.Source = GetGroupsByLetter();
            ContactSource.IsSourceGrouped = true;

        }

        #region Contacts
        public ObservableCollection<Contact> Contacts
        {
            get;
            protected set;
        }

        public CollectionViewSource ContactSource
        {
            get;
            protected set;
        }
        #endregion


        internal List<GroupInfoList<object>> GetGroupsByLetter()
        {
            List<GroupInfoList<object>> groups = new List<GroupInfoList<object>>();

            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<object> info = new GroupInfoList<object>();
                info.Key = g.GroupName;
                foreach (var item in g.Items)
                {
                    info.Add(item);
                }
                groups.Add(info);
            }

            return groups;
        }

        public class GroupInfoList<T> : List<object>
        {

            public object Key { get; set; }


            public new IEnumerator<object> GetEnumerator()
            {
                return (System.Collections.Generic.IEnumerator<object>)base.GetEnumerator();
            }
        }
}

 <DataTemplate x:Key="contactTemplate">
    <Grid Width="225" Height="75" Background="#55FFFFFF">
        <Grid Margin="10">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="20">
                <Run Text="{Binding FirstName}"/>
                <Run Text="{Binding Name}"/>
            </TextBlock>
            <TextBlock Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Left" Text="{Binding Email}" FontSize="13" Foreground="#FFDDDDDD"/>
        </Grid>
    </Grid>
</DataTemplate>

<DataTemplate x:Key="letterTemplate">
    <Grid Margin="5,0,0,5" Width="225">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <TextBlock Text="{Binding Key}" Style="{StaticResource GroupHeaderTextStyle}"  VerticalAlignment="Center"/>
        <Rectangle Grid.Row="1" Fill="#BBEEEEEE" Height="1" Margin="0,7,0,0"/>
    </Grid>
</DataTemplate>
</Page.Resources>



<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Style="{StaticResource LayoutRootStyle}">
    <Grid.RowDefinitions>
        <RowDefinition Height="140"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- Back button and page title -->
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Button x:Name="backButton" Click="GoBack" Style="{StaticResource BackButtonStyle}" Opacity="0"/>
        <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Manager" Style="{StaticResource PageHeaderTextStyle}"/>
    </Grid>

    <GridView Grid.Row="1"
        ItemsSource="{Binding Path=ContactSource.View}"
        SelectionMode="Multiple"
        IsSwipeEnabled="false"
        IsItemClickEnabled="True"
        Padding="116,10,40,46"
        ItemTemplate="{StaticResource contactTemplate}">

        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <local:WrapPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>

        <GridView.GroupStyle>
            <GroupStyle HeaderTemplate="{StaticResource letterTemplate}">
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
            </GroupStyle>
        </GridView.GroupStyle>
    </GridView>
</Grid>