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 控件来用的话，效果会更好，这里暂时就不介绍了。