水电费了

Gridview  是一个 可以进行分组的 列表 ,  在win8中非常常用,  一般情况下,  每一项的大小是固定的,  当然也可以自定义,实现市场界面那种 不同大小的方块,但不是今天要总结的,今天总结的是  简单地 gridview分组

 

首先找到  griview的 项模板

   1:   <GridView x:Name="ItemGridView" Grid.Row="1" Height="500" Margin="120,10,20,0" 
   2:                    VerticalAlignment="Top" HorizontalAlignment="Left"
   3:                    SelectionMode="None"
   4:                    IsItemClickEnabled="True"                
   5:                    ScrollViewer.HorizontalScrollBarVisibility="Hidden"
   6:                    ItemTemplateSelector="{StaticResource TemplateSelector}"
   7:                    ItemsSource="{Binding Source={StaticResource ItemView}}"                   
   8:                    >
   9:              <GridView.GroupStyle>
  10:                  <GroupStyle>
  11:                      <GroupStyle.HeaderTemplate>
  12:                          <DataTemplate>
  13:                              <Grid Margin="0">
  14:                                  <TextBlock Text="{Binding Key}" Style="{StaticResource GroupTitleStyle}"></TextBlock>
  15:                              </Grid>
  16:                          </DataTemplate>
  17:                      </GroupStyle.HeaderTemplate>
  18:                      <GroupStyle.Panel>
  19:                          <ItemsPanelTemplate>
  20:                              <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,30,0"/>
  21:                          </ItemsPanelTemplate>
  22:                      </GroupStyle.Panel>
  23:                  </GroupStyle>
  24:              </GridView.GroupStyle>
  25:              <GridView.ItemsPanel>
  26:                  <ItemsPanelTemplate>
  27:                      <StackPanel Orientation="Horizontal"></StackPanel>
  28:                  </ItemsPanelTemplate>
  29:              </GridView.ItemsPanel>
  30:          </GridView>

先说一下 itemsSource 属性，

ItemsSource="{Binding Source={StaticResource ItemView}}"

ItemsSource需要绑定一个ItemView数据源 ，这个 数据源  我们已经定义好，

 <Page.Resources> 
      <CollectionViewSource x:Name="ItemView" IsSourceGrouped="True"/>
 </Page.Resources>

使用CollectionViewSource是为了满足GridView分组的实现。系统类

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。分割线
接下来  是我们要后台  实现   数据类了 
1 分组对象，  实现了 list<T>的泛型集合  ， 他的集合 就是 对应的各个 分组列表了

   1:      public class GroupInfoList<T> : List<T>
   2:      {      
   3:          public GroupInfoList() { }
   4:   
   5:          public object Key { get; set; }
   6:   
   7:          public new IEnumerator<T> GetEnumerator()
   8:          {
   9:              return (IEnumerator<T>)base.GetEnumerator();
  10:          }
  11:       }

  2 每一组 分类 ，都要提供一个 供该分组的 数据， 应该也是一个集合。也就是 上面泛型集合的 一个成员。例如

            GroupInfoList<WorkItem> groupItem = new GroupInfoList<WorkItem> 
   2:              {
   3:                  new WorkItem { Background = "#F25022", IsShowCount = false, Name = "发起工作", MenuIcon = "/Common/Icons/iconA01.png" },
   4:                  new WorkItem { Background = "#00A4EF", IsShowCount = false, Name = "已办工作", MenuIcon = "/Common/Icons/iconA02.png" },
   5:                  new WorkItem { Background = "#7FBA00", Count = 99, IsShowCount = true, Name = "待办工作", MenuIcon = "/Common/Icons/iconA03.png" },
   6:                  new WorkItem { Background = "#FFB900", Count = 99, IsShowCount = true, Name = "退回工作", MenuIcon = "/Common/Icons/iconA04.png" }                
   7:              };
   8:              groupItem.Key = "我的工作";

3定义 每一个 项 ，就是每一个单独的选项的类。

    class WorkItem
    {
        public string MenuIcon { get; set; }

        public string Name { get; set; }

        public int Count { get; set; }

  
    }

4 最后，就是对gridview  的绑定了  很简单
 ItemView.Source = new List<GroupInfoList<WorkItem>>{ groupItem };   这个步骤很简单 ， 不要和wp里面的listbox混淆了，  itemview 是 CollectionViewSource的事例 ，不是griview

 

最后 总结：

            < Gridview.ItemsPanel>
                <ItemsPanelTemplate>                        
                    <VirtualizingStackPanel Orientation="Vertical"/>
                </ItemsPanelTemplate>
            </Gridview.ItemsPanel>          控制的是  整个 gridview的 方向 

 <Gridview.GroupStyle>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Horizontal"  Margin="0,0,80,0" ItemHeight="250" ItemWidth="250"/>
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
 </Gridview.GroupStyle>                     控制的是 每一个 分组内的  排序方向 （控制每个单独项的尺寸的 就是通过它VariableSizedWrapGrid）

    <gridview.itemTemplate>                         控制的是 每一项 的 布局