引言

相信大家对GridView都不陌生，是非常有用的控件，用于平铺有序的显示多个内容项。打开任何WinRT应用或者是微软合作商的网站，都会在APP中发现GridView的使用。“Tiles”提供了一个简单易用，平铺方式来组织内容显示。Windows8的开始菜单是最典型的GridView 示例。“开始菜单”显示了系统中安装的所有应用程序，而且支持重新排列。

本文源于我们项目的开发人员，他们想在项目中提供与GridView相同的用户体验，想要创建类GridView控件。

GridView 可以显示大小不定的内容项，并且以有序的方式显示。如果各个内容项无序，并且内容尺寸大小相同，GirdView还支持拖拽操作。然而，这些功能并不是默认提供的，需要编写一定的代码才能实现。

本文主要介绍了扩展GridView控件——称为GridViewEx, GridViewEx主要实现GridView在不同大小的内容项中的拖拽功能。

背景

首先了解GridView的基本属性和功能，GridView包含一些属性集和 ItemTemplate。为了实现通过拖拽操作执行重排列功能，必须完成以下三件事：

1. 设置AllowDrop属性为true;

2. 设置CanReorderItems 属性值为True;

3. 绑定数据源，该数据源必须支持数据修改或支持重排序。例如，使用ObservableCollection或IList数据源。

     
      
       
        
         
          
           
           
          
          
         
          item
          
         
        
       
      
    

扩展后的GridView使用拖拽操作将会非常方便快捷。

GridViewEx 控件

GridViewEx控件弥补了GridView，功能如下：

• 实现Item Panel 拖拽操作，而不是WrapGrid，StackPanel、VirtualizingStackPanel等
• 分组时，实现拖拽功能；

我们也为GridViewEx增加了新建分组的功能，如果用户将内容项拖到控件左边或右边时会触发新建分组操作。

实现拖拽代码：

1: public class GridViewEx : GridView

2: {

3:  /// 

4:  /// Initializes a new instance of the 
     control.

5:  /// 

6:  public GridViewEx()

7:  {

8:  // see attached sample

9:  }

10:

11:  private void GridViewEx_DragItemsStarting(object sender, DragItemsStartingEventArgs e)

12:  {

13:  // see attached sample

14:  }

15:

16:  /// 

17:  /// Stores dragged items into DragEventArgs.Data.Properties["Items"] value.

18:  /// Override this method to set custom drag data if you need to.

19:  /// 

20:  protected virtual void OnDragStarting(DragItemsStartingEventArgs e)

21:  {

22:  // see attached sample

23:  }

该控件包含几个变量，用来存储拖放内容的索引。OnDragStarting 事件在DragEventArgs.Data.Properties[“Items”] 中存储拖拽的内容。OnDragStarting 需要根据自己的需求重写。

当用户拖拽某一项内容时，需要给用户提示来引导用户将内容放在合适的位置上。标准的GriView对象是通过滑动相邻的内实项来实现的。本文将在GridViewEx中完善此操作。

1: /// 

2: /// Shows reoder hints while custom dragging.

3: /// 

4: protected override void OnDragOver(DragEventArgs e)

5: {

6:  // see attached sample }

7:  

8: private int GetDragOverIndex(DragEventArgs e)

9: {

10:  // see attached sample

11: }

实现拖放代码

首先需要重写GridView.OnDrop方法，该方法会当用户释放某一项内容时触发。重写Ondrop方法，代码如下：

1: /// 

2: /// Handles drag and drop for cases when it is not supported by the Windows.UI.Xaml.Controls.GridView control

3: /// 

4: protected override async void OnDrop(DragEventArgs e)

5: {

6:  // see attached sample

7: }

 

OnDrop方法主要实现了内容项从源分组移到目标分组的逻辑代码，以及创建新分组的功能。

添加新分组

如果GrideView通过将IsSourceGrouped值为True来绑定CollectionViewSource情况下，GridView提供分组功能，这就意味着分组必须对数据源进行分组，但GridView没有访问数据的权限。因此本文在执行拖放操作时，实现添加新分组功能。GridViewEx.BeforeDrop事件处理此需求，并且提供更多的数据信息，如DragEventArgs数据。

当用户执行拖放操作时，触发BeforeDrop 事件。

1: /// 

2: /// Occurs before performing drop operation,

3: /// 

4: public event EventHandler
    
      BeforeDrop;
    

5: /// 

6: /// Rises the 
     event.

7: /// 

8: /// Event data for the event.

9: protected virtual void OnBeforeDrop(BeforeDropItemsEventArgs e)

10: {

11:  // see attached sample

12: }

BeforeDropItemEventArgs包含关于被拖拽的内容项的重要信息，该信息在OnDrop事件中可使用的。

1: /// 

2: /// Provides data for the 
     event.

3: /// 

4: public sealed class BeforeDropItemsEventArgs : System.ComponentModel.CancelEventArgs

5: {

6:  /// 

7:  /// Gets the item which is being dragged.

8:  /// 

9:  public object Item

10:  {

11:  get;

12:  }

13:  /// 

14:  /// Gets the current item index in the underlying data source.

15:  /// 

16:  public int OldIndex

17:  {

18:  get;

19:  }

20:  /// 

21:  /// Gets the index in the underlying data source where

22:  /// the item will be inserted by the drop operation.

23:  /// 

24:  public int NewIndex

25:  {

26:  get;

27:  }

28:  /// 

29:  /// Gets the bool value determining whether end-user actions requested

30:  /// creation of the new group in the underlying data source.

31:  /// This property only makes sense if GridViewEx.IsGrouping property is true.

32:  /// 

33:  /// 
    

34:  /// If this property is true, create the new data group and insert it into

35:  /// the groups collection at the positions, specified by the

36:  /// 
     property value.

37:  /// Then the 
     will insert dragged item

38:  /// into the newly added group.

39:  /// 

40:  public bool RequestCreateNewGroup

41:  {

42:  get;

43:  }

44:  /// 

45:  /// Gets the current item data group index in the underlying data source.

46:  /// This property only makes sense if GridViewEx.IsGrouping property is true.

47:  /// 

48:  public int OldGroupIndex

49:  {

50:  get;

51:  }

52:  /// 

53:  /// Gets the data group index in the underlying data source

54:  /// where the item will be inserted by the drop operation.

55:  /// This property only makes sense if GridViewEx.IsGrouping property is true.

56:  /// 

57:  public int NewGroupIndex

58:  {

59:  get;

60:  }

61:  /// 

62:  /// Gets the original 
     data.

63:  /// 

64:  public DragEventArgs DragEventArgs

65:  {

66:  get;

67:  }

68: }

AllowNewGroup属性确定用户拖拽某一内容项到控件边界时，是否创建新组。GridView并没有提供此功能，在GridViewEX添加此功能。

1: /// 

2: /// Gets or sets the value determining whether new group should be created at

3: /// dragging the item to the empty space.

4: /// 

5: public bool AllowNewGroup

6: {

7:  get { return (bool)GetValue(AllowNewGroupProperty); }

8:  set { SetValue(AllowNewGroupProperty, value); }

9: }

10:

11: /// 

12: /// Identifies the 
     dependency property.

13: /// 

14: public static readonly DependencyProperty AllowNewGroupProperty =

15:  DependencyProperty.Register("AllowNewGroup", typeof(bool),

16:  typeof(GridViewEx), new PropertyMetadata(false));

为了在拖拽过程中添加分组，需要将AllowNewGroup属性设置为True。处理GridViewEx.BeforeDrop事件，该事件的参数能够帮助决定单项内容的起始位置和目的位置。在BeforeDrop事件的Handler中，使用 NewGroupIndex 创建新的数据组，并插入到已有组集合。最后，需要实现的扩展GridView控件模板。在用户可拖拽的项目的位置创建新分组，并使用占位符来代替。一旦用户拖某一内容放置到控件的边界时，触发创建新分组，ItemsPresenter的两个边界元素是新组的占位符。

GridViewEx控件模板generic.xaml，如下：

1: 

2:  
    

3:  
    

4:  
    

5:  
    

6:  
    

7:  
    

8:  
    

9:  
    

10:  
    

11:  
    

12:  
    

13:  
    

14:  
    

15:  
    

16:  
    

17:  
    

18:  

19:  Background="{TemplateBinding Background}"

20:  BorderThickness="{TemplateBinding BorderThickness}">

21:  

22:  TabNavigation="{TemplateBinding TabNavigation}"

23:  HorizontalScrollMode="

24:  {TemplateBinding ScrollViewer.HorizontalScrollMode}"

25:  HorizontalScrollBarVisibility=

26:  "{TemplateBinding

27:  ScrollViewer.HorizontalScrollBarVisibility}"

28:  IsHorizontalScrollChainingEnabled=

29:  "{TemplateBinding

30:  ScrollViewer.IsHorizontalScrollChainingEnabled}"

31:  VerticalScrollMode="

32:  {TemplateBinding ScrollViewer.VerticalScrollMode}"

33:  VerticalScrollBarVisibility=

34:  "{TemplateBinding

35:  ScrollViewer.VerticalScrollBarVisibility}"

36:  IsVerticalScrollChainingEnabled=

37:  "{TemplateBinding

38:  ScrollViewer.IsVerticalScrollChainingEnabled}"

39:  IsHorizontalRailEnabled="

40:  {TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"

41:  IsVerticalRailEnabled="

42:  {TemplateBinding ScrollViewer.IsVerticalRailEnabled}"

43:  ZoomMode="{TemplateBinding

44:  ScrollViewer.ZoomMode}"

45:  IsDeferredScrollingEnabled="

46:  {TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"

47:  BringIntoViewOnFocusChange="

48:  {TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}">

49:  
    

50:  

51:  x:Name="NewGroupPlaceHolderFirst"

52:  Background="Transparent"

53:  Padding="{TemplateBinding Padding}"

54:  Visibility="{Binding AllowNewGroup,

55:  Converter={StaticResource

56:  VisibilityConverter},

57:  RelativeSource={RelativeSource TemplatedParent}}"/>

58:  

59:  Header="{TemplateBinding Header}"

60:  HeaderTemplate="{TemplateBinding HeaderTemplate}"

61:  HeaderTransitions="{TemplateBinding HeaderTransitions}"

62:  Padding="{TemplateBinding Padding}"/>

63:  

64:  x:Name="NewGroupPlaceHolderLast"

65:  Background="Transparent"

66:  Padding="{TemplateBinding Padding}"

67:  Visibility="{Binding AllowNewGroup,

68:  Converter={StaticResource

69:  VisibilityConverter},

70:  RelativeSource={RelativeSource TemplatedParent}}"/>

71:  

72:  

73:  

74:  

75:  

76:  

77: 

 

丰富GridViewEx功能

如上所示，我们已经实现了基本的拖拽操作，与Windows8 开始菜单类似的功能，接下来讨论如何实现以下功能：

• 尺寸大小不定的内容项
• 分组
• 添加新组
• 节省跨会话布局空间

大小不定的内容项

Windows8展示了不同大小的Tiles，但是目前GridView或GridViewEx还不支持此功能。因为GridView使用WrapGrid作为默认的ItemsPanel，WrapPanel只能创建一种布局，即所有的条目尺寸相同的。因此微软提供了VariableSizedWrapGrid,支持不同大小块的布局创建。

GridViewEx控件的优势在于能够使用VariableSizedWrapGrid，并且很好的支持拖放操作。为了使用VariableSizedWrapGrid 并显示不同大小的内容项，必须实现以下功能：

将GridViewEx.ItemsPanel 设置为VariableSizedWrapGrid

在GridView中重写GridView 的PrepareContainerForItemOverride 方法。在该方法中，可以设置Item的RowSpan或ColumnSpan属性来识别内容项的大小。

即生成继承GridViewEx的新控件MyGridView。为什么需要扩展GridViewEx控件而不是重写GridViewEx的PrepareContainerForItemOverride方法？因为指定Item尺寸的逻辑必须放在数据模型中，而不是控件内部。

如想将某一项显示较大一点，需要在数据项中创建一个属性返回比1大的整型数值，来设置RowSpanhuoColumnSpan属性。

1: public class Item

2: {

3:  public int Id { get; set; }

4:  public int ItemSize { get; set; }

5:  /* */

6: }

因此，当创建新的内容项，我们要指定ItemSize属性。如果值为1则表明常规尺寸，如果值为2则表明大尺寸，ColumnSpan属性则设置为2。

1: /// 

2: /// This class sets VariableSizedWrapGrid.ColumnSpanProperty for GridViewItem controls,

3: /// so that every item can have different size in the VariableSizedWrapGrid.

4: /// 

5: public class MyGridView : GridViewSamples.Controls.GridViewEx

6: {

7:  // set ColumnSpan according to the business logic

8:  // (maybe some GridViewSamples.Samples.Item or group properties)

9:  protected override void PrepareContainerForItemOverride(

10:  Windows.UI.Xaml.DependencyObject element, object item)

11:  {

12:  try

13:  {

14:  GridViewSamples.Samples.Item it = item as GridViewSamples.Samples.Item;

15:  if (it != null)

16:  {

17:  element.SetValue(

18:  Windows.UI.Xaml.Controls.VariableSizedWrapGrid.ColumnSpanProperty, it.ItemSize);

19:  }

20:  }

21:  catch

22:  {

23:  element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.ColumnSpanProperty, 1);

24:  }

25:  finally

26:  {

27:  base.PrepareContainerForItemOverride(element, item);

28:  }

29:  }

30: }

创建MyGridView实例，并绑定到数据集合。

1: 

2:  CanDragItems="True" IsSwipeEnabled="True"

3:  ItemsSource="{Binding}"

4:  ItemTemplate="{StaticResource ItemTemplate}" >

5:  
    

6:  
    

7:  

8:  ItemWidth="160" />

9:  

10:  

11:  
    

12:  

13:  

14:  Value="Stretch"/>

15:  

16:  Value="Stretch"/>

17:  

18:  

19: 

如上所示，我们将指定内容项的ItemSize属性设置为2，效果如图所示：

分组

使用GridViewEx控件，能够实现添加新分组和拖拽等功能，也是在App中最为常见的功能，实现分组必须完成以下设置：

• 为GridView绑定CollectionViewSource，必须使用支持分组的数据源。CollectionViewSource可视为代理服务器。
• 使用GroupStyle确定分组结果如何显示，GroupStyle包含Header Tempate及Panel，因此需要指定子项目的排序方式。

在GridViewEx中添加支持不同大小的内容项，逻辑代码：

1: 

2:  CanDragItems="True" IsSwipeEnabled="True"

3:  ItemsSource="{Binding}"

4:  ItemTemplate="{StaticResource ItemTemplate}" >

5:  
    

6:  
    

7:  
    

8:  

9:  

10:  
    

11:  
    

12:  
    

13:  
    

14:  

15:  Margin="0">

16:  

17:  Margin="10"

18:  Style="{StaticResource

19:  GroupHeaderTextStyle}">

20:  
    

21:  
    

22:  

23:  

24:  

25:  

26:  

27:  
    

28:  

29:  

30:  Value="DarkGray"/>

31:  

32:  Value="2"/>

33:  

34:  Value="3,0"/>

35:  

36:  

37:  

38:  
    

39:  
    

40:  

41:  ItemWidth="160" />

42:  

43:  

44:  

45:  

46:  

47:  
    

48:  

49:  

50:  Value="Stretch"/>

51:  

52:  Value="Stretch"/>

53:  

54:  

55: 

运行演示：

添加新分组

自定义的GridViewEx控件支持新分组的创建，因此需要设置AllowNewGroup为True。其次处理添加新分组的数据层，处理GridViewEx.BeforeDrop 事件。

1: /// 

2: /// Creates new CollectionViewSource and updates page DataContext.

3: /// 

4: private void UpdateDataContext()

5: {

6:  CollectionViewSource source = new CollectionViewSource();

7:  source.Source = _groups;

8:  source.ItemsPath = new PropertyPath("Items");

9:  source.IsSourceGrouped = true;

10:  this.DataContext = source;

11: }

12: // creates new group in the data source,

13: // if end-user drags item to the new group placeholder

14: private void MyGridView_BeforeDrop(object sender, Controls.BeforeDropItemsEventArgs e)

15: {

16:  if (e.RequestCreateNewGroup)

17:  {

18:  // create new group and re-assign datasource

19:  Group group = Group.GetNewGroup();

20:  if (e.NewGroupIndex == 0)

21:  {

22:  _groups.Insert(0, group);

23:  }

24:  else

25:  {

26:  _groups.Add(group);

27:  }

28:  UpdateDataContext();

29:  }

30: }

也可以使用Drop事件删除空分组

1: // removes empty groups (except the last one)

2: private void MyGridView_Drop(object sender, DragEventArgs e)

3: {

4:  bool needReset = false;

5:  for (int i = _groups.Count - 1; i >= 0; i--)

6:  {

7:  if (_groups[i].Items.Count == 0 && _groups.Count > 1)

8:  {

9:  _groups.RemoveAt(i);

10:  needReset = true;

11:  }

12:  }

13:  if (needReset)

14:  {

15:  UpdateDataContext();

16:  }

17: }

节省布局空间

Windows8支持挂起或终止功能，为了提供更好的用户体验，我们继续改善此前实现的功能，当用户离开当前页面，将当前的布局暂存。在本示例中，我们使用JSON 字符串简化数据序列化。根据已有的数据、数据的大小及需求，以其他格式来保存数据。我们主要将“业务对象集合”保存。

为了节省布局空间。重写LayoutAwarePage方法：

1: /// 

2: /// Populates the page with content passed during navigation. Any saved state is also

3: /// provided when recreating a page from a prior session.

4: /// 

5: /// The parameter value passed to

6: /// 

7: /// Object)"/> when this page was initially requested.

8: /// 

9: /// 

10: /// >A dictionary of state preserved by this page during an earlier

11: /// session. This will be null the first time a page is visited.

12: protected override void LoadState(Object navigationParameter,

13:  Dictionary
    
      pageState)
    

14: {

15:  base.LoadState(navigationParameter, pageState);

16:  if (pageState != null && pageState.Count > 0

17:  && pageState.ContainsKey("Groups"))

18:  {

19:  // restore groups and items from the previously serialized state

20:  System.Runtime.Serialization.Json.DataContractJsonSerializer rootSer =

21:  new System.Runtime.Serialization.Json.DataContractJsonSerializer(typeof(List
    
     ));
    

22:  var stream = new MemoryStream(System.Text.Encoding.UTF8.GetBytes

23:  ((string)pageState["Groups"]));

24:  _groups = (List
    
     )rootSer.ReadObject(stream);
    

25:  }

26:  else

27:  {

28:  // if we get here for the first time and don't have

29:  // serialized content, fill groups and items from scratch

30:  for (int j = 1; j <= 12; j++)

31:  {

32:  Group group = Group.GetNewGroup();

33:  for (int i = 1; i <= 7 + j % 3; i++)

34:  {

35:  group.Items.Add(new Item()

36:  {

37:  Id = i,

38:  GroupId = group.Id

39:  });

40:  }

41:  _groups.Add(group);

42:  }

43:  }

44:  UpdateDataContext();

45: }

46:  

47: /// 

48: /// Preserves state associated with this page in case the application is suspended or the

49: /// page is discarded from the navigation cache. Values must conform to the serialization

50: /// requirements of 
    .

51: /// 

52: /// 

53: /// An empty dictionary to be populated with serializable state.

54: protected override void SaveState(Dictionary
    
      pageState)
    

55: {

56:  // save groups and items to JSON string so that

57:  // it's possible to restore page state later

58:  base.SaveState(pageState);

59:  System.Runtime.Serialization.Json.DataContractJsonSerializer rootSer =

60:  new System.Runtime.Serialization.Json.DataContractJsonSerializer

61:  (typeof(List
    
     ));
    

62:  var stream = new MemoryStream();

63:  rootSer.WriteObject(stream, _groups);

64:  string str = System.Text.Encoding.UTF8.GetString(stream.ToArray(),

65:  0, (int)stream.Length);

66:  pageState.Add("Groups", str);

67: }

68:  

69: /// 

70: /// Invoked when this page is about to be displayed in a Frame.

71: /// 

72: /// Event data that describes

73: /// how this page was reached. The Parameter

74: /// property is typically used to configure the page.

75: protected override void OnNavigatedTo(NavigationEventArgs e)

76: {

77:  // restore page state

78:  var frameState =

79:  GridViewSamples.Common.SuspensionManager.SessionStateForFrame(this.Frame);

80:  if (frameState.ContainsKey("TilePageData"))

81:  {

82:  this.LoadState(e.Parameter,

83:  (Dictionary
    
     )frameState["TilePageData"]);
    

84:  }

85:  else

86:  {

87:  this.LoadState(e.Parameter, null);

88:  }

89: }

90:  

91: protected override void OnNavigatedFrom(NavigationEventArgs e)

92: {

93:  // save page state with "TilePageData" key

94:  var frameState =

95:  GridViewSamples.Common.SuspensionManager.SessionStateForFrame(this.Frame);

96:  var pageState = new Dictionary
    
     ();
    

97:  this.SaveState(pageState);

98:  frameState["TilePageData"] = pageState;

99: }

总结

GridViewEx控件丰富了GirdView控件功能，改进了基础功能，提升用户体验。到此已经实现了GridView项与Windows8开始菜单具有的相同用户体验，如果你想了解如何在Windows10平台下开发UWP引用，请持续关注下篇文章：如何在Windows10中开发UWP应用

除了 GirdView以外，具备触摸和键盘导航操作的自动或手动平铺布局的控件还有，它不但提供自适应Windows8的样式布局，还具有类似Windows8风格的交互体验和灵活便捷的定制能力。

原文链接：http://www.codeproject.com/Articles/536519/Extending-GridView-with-Drag-and-Drop-for-Grouping