Windows 8 Metro中对GridView或ListView使用分组功能详解

在应用中使用GridView或ListView可以页面上很多信息能更明朗化，如果再加上分组的话那就更清晰了。以下是本人查阅资料整理的关于Group化的知识点。

 

先来张效果图：

 

以GridView为例，步骤如下：

 

1、在XAML中先放一个GridView控件，然后右击该控件，选择添加分组。

 

添加以后，<GridView>标签里会自动添加一长串代码，如下：

<GridView>
    <GridView.GroupStyle>
        <GroupStyle>
            <GroupStyle.ContainerStyle>
                <Style TargetType="GroupItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="GroupItem">
                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="*"/>
                                        </Grid.RowDefinitions>
                                        <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>
                                        <ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" Grid.Row="1"/>
                                    </Grid>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </GroupStyle.ContainerStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <TextBlock/>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
            <GroupStyle.Panel>
                <ItemsPanelTemplate>
                    <VariableSizedWrapGrid/>
                </ItemsPanelTemplate>
            </GroupStyle.Panel>
        </GroupStyle>
    </GridView.GroupStyle>
</GridView>

2、修改代码，改成自己想要的样式。

    1）分析下代码，发现代码里多的是一个叫GroupStyle的属性，下面又分别有ContainerStyle（容器属性，以上图为例，包括省和城市的一整块区域）、HeaderTemplate（标题模板，以上图为例，显示省的区域的模板）、Panel（排版，设置每个Container横向还是竖向排列，每行或每列的最大数）。

    其中HeaderTemplate是必要的，保留并修改<DataTemplate>标签里的控件即可。其他两个属性不需要修改的话可以直接删掉。

 

    2）接下来添加ItemTemplate，此时的ItemTemplate还是和往常一样代表每一个具体子模板（以上图为例，表示城市的区域的模板）。修改成自己想要的样式即可。

 

3、数据源。

    这里要绑定的数据源不能是普通的 List 之类的 source，也要有分组的结构。即 List 下的每一个 object 包含一个Key（对应Header，如省）和一个 List （对应该Key下的 Items，如该省的城市）。如：

    class Province
    {
        public string ProvinceName { set; get; }
        public List<string> CityNames { set; get; }
    }

 

4、控件绑定。

    先定义个CollectionViewSource。

<CollectionViewSource x:Name="InfoList" IsSourceGrouped="True" ItemsPath="CityNames"/>

 

其中，IsSourceGrouped要设为 true，ItemsPath对应各 ItemTemplate 的数据源路径。

 

    给GridView绑定 CollectionViewSource。

<GridView ItemsSource="{Binding Source={StaticResource InfoList}}">

    给Header（标题）绑定。

 <GroupStyle.HeaderTemplate>
     <DataTemplate>
         <TextBlock Text="{Binding ProvinceName}"/>
     </DataTemplate>
 </GroupStyle.HeaderTemplate>

这里要要绑定数据源的Key，即 ProvinceName 。

 

    给 Item 绑定。

<GridView.ItemTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding}" />
    </DataTemplate>
</GridView.ItemTemplate>

这里因为 CollectionViewSource 里指定了Path 为CityNames ，故在此只写 Binding 即可，每个 Item 会自动去取 CityNames 下的 string。如果 Item 的模板比较复杂， CityNames 也不只是个 string 的 List，那么具体情况，在 Binding 后面加上要绑定的数据路径。 

 

5、数据绑定。

    在 .cs 文件里创建个 Province 的 List，赋一些初始值，再加到 CollectionViewSource 上去。

List<Province> list = new List<Province>();
// ...
// 通过检索数据库或手动塞一些值到 list 里去
// ...
InfoList.Source = list;

6、运行程序查看效果。参照第一张图片展示。（具体效果可能有点出入，因为上图的效果里本人设置了 Panel 属性。）

 

XAML中 GridView 的完整代码如下：

<Page.Resources>
        <CollectionViewSource x:Name="InfoList" IsSourceGrouped="True" ItemsPath="CityNames"/>
</Page.Resources>

<GridView ItemsSource="{Binding Source={StaticResource InfoList}}">
    <GridView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding ProvinceName}"/>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </GridView.GroupStyle>

    <GridView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}"/>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

 如果对分组熟悉了的话，以上的第一步就不需要了，直接在 <GridView> 标签里写代码就是了。不需要特别的格式什么的话，ContainerStyle 和 Panel 都可以不设，如果要设的话，就写上。自己想要什么样的模板，自己去创建吧。

 

另外，分组功能配合 SemanticZoom 控件来用的话，效果会更好，这里暂时就不介绍了。