扩展GridView控件——为内容项添加拖放及分组功能

引言

相信大家对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数据源。

<GridView ItemsSource="{Binding}" AllowDrop="True" CanReorderItems="True">
    <GridView.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="Aqua" BorderThickness="1" Background="Peru">
                <Grid Margin="12">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <TextBlock Text="{Binding}"/>
                    <TextBlock Grid.Row="1">item</TextBlock>
                </Grid>
            </Border>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

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

GridViewEx 控件

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

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

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

实现拖拽代码：

public class GridViewEx : GridView
{
    /// <summary>
    /// Initializes a new instance of the <see cref="GridViewEx"/> control.
    /// </summary>
    public GridViewEx()
    {
        // see attached sample
    }

    private void GridViewEx_DragItemsStarting(object sender, DragItemsStartingEventArgs e)
    {
        // see attached sample
    }

    /// <summary>
    /// Stores dragged items into DragEventArgs.Data.Properties["Items"] value.
    /// Override this method to set custom drag data if you need to.
    /// </summary>
    protected virtual void OnDragStarting(DragItemsStartingEventArgs e)
    {
        // see attached sample
    }

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

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

/// <summary>
/// Shows reoder hints while custom dragging.
/// </summary>
protected override void OnDragOver(DragEventArgs e)
{
    // see attached sample }

private int GetDragOverIndex(DragEventArgs e)
{
    // see attached sample
}

实现拖放代码

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

/// <summary>
/// Handles drag and drop for cases when it is not supported by the Windows.UI.Xaml.Controls.GridView control
/// </summary>
protected override async void OnDrop(DragEventArgs e)
{
    // see attached sample
}

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

添加新分组

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

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

/// <summary>
/// Occurs before performing drop operation,
/// </summary>
public event EventHandler<BeforeDropItemsEventArgs> BeforeDrop;
/// <summary>
/// Rises the <see cref="BeforeDrop"/> event.
/// </summary>
/// <param name="e">Event data for the event.</param>
protected virtual void OnBeforeDrop(BeforeDropItemsEventArgs e)
{
    // see attached sample
}

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

/// <summary>
/// Provides data for the <see cref="GridViewEx.BeforeDrop"/> event.
/// </summary>
public sealed class BeforeDropItemsEventArgs : System.ComponentModel.CancelEventArgs
{
    /// <summary>
    /// Gets the item which is being dragged.
    /// </summary>
    public object Item
    {
        get;
    }
    /// <summary>
    /// Gets the current item index in the underlying data source.
    /// </summary>
    public int OldIndex
    {
        get;
    }
    /// <summary>
    /// Gets the index in the underlying data source where
    /// the item will be inserted by the drop operation.
    /// </summary>
    public int NewIndex
    {
        get;
    }
    /// <summary>
    /// Gets the bool value determining whether end-user actions requested
    /// creation of the new group in the underlying data source.
    /// This property only makes sense if GridViewEx.IsGrouping property is true.
    /// </summary>
    /// <remarks>
    /// If this property is true, create the new data group and insert it into
    /// the groups collection at the positions, specified by the
    /// <see cref="BeforeDropItemsEventArgs.NewGroupIndex"/> property value.
    /// Then the <see cref="GridViewEx"/> will insert dragged item
    /// into the newly added group.
    /// </remarks>
    public bool RequestCreateNewGroup
    {
        get;
    }
    /// <summary>
    /// Gets the current item data group index in the underlying data source.
    /// This property only makes sense if GridViewEx.IsGrouping property is true.
    /// </summary>
    public int OldGroupIndex
    {
        get;
    }
    /// <summary>
    /// Gets the data group index in the underlying data source
    /// where the item will be inserted by the drop operation.
    /// This property only makes sense if GridViewEx.IsGrouping property is true.
    /// </summary>
    public int NewGroupIndex
    {
        get;
    }
    /// <summary>
    /// Gets the original <see cref="DragEventArgs"/> data.
    /// </summary>
    public DragEventArgs DragEventArgs
    {
        get;
    }
}

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

/// <summary>
/// Gets or sets the value determining whether new group should be created at
/// dragging the item to the empty space.
/// </summary>
public bool AllowNewGroup
{
    get { return (bool)GetValue(AllowNewGroupProperty); }
    set { SetValue(AllowNewGroupProperty, value); }
}

/// <summary>
/// Identifies the <see cref="AllowNewGroup"/> dependency property.
/// </summary>
public static readonly DependencyProperty AllowNewGroupProperty =
        DependencyProperty.Register("AllowNewGroup", typeof(bool),
        typeof(GridViewEx), new PropertyMetadata(false));

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

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

<Style TargetType="local:GridViewEx">
    <Setter Property="Padding" Value="0,0,0,10" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="TabNavigation" Value="Once" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
    <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
    <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
    <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
    <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
    <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" />
    <Setter Property="IsSwipeEnabled" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:GridViewEx">
                <Border BorderBrush="{TemplateBinding BorderBrush}"
                        Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <ScrollViewer x:Name="ScrollViewer"
                            TabNavigation="{TemplateBinding TabNavigation}"
                            HorizontalScrollMode="
                            {TemplateBinding ScrollViewer.HorizontalScrollMode}"
                            HorizontalScrollBarVisibility=
                              "{TemplateBinding
                              ScrollViewer.HorizontalScrollBarVisibility}"
                            IsHorizontalScrollChainingEnabled=
                              "{TemplateBinding
                              ScrollViewer.IsHorizontalScrollChainingEnabled}"
                            VerticalScrollMode="
                            {TemplateBinding ScrollViewer.VerticalScrollMode}"
                            VerticalScrollBarVisibility=
                              "{TemplateBinding
                              ScrollViewer.VerticalScrollBarVisibility}"
                            IsVerticalScrollChainingEnabled=
                              "{TemplateBinding
                              ScrollViewer.IsVerticalScrollChainingEnabled}"
                            IsHorizontalRailEnabled="
                            {TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                            IsVerticalRailEnabled="
                            {TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                            ZoomMode="{TemplateBinding
                            ScrollViewer.ZoomMode}"
                            IsDeferredScrollingEnabled="
                            {TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                            BringIntoViewOnFocusChange="
                            {TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}">
                        <StackPanel Orientation="Horizontal">
                            <Border Width="60"
                            x:Name="NewGroupPlaceHolderFirst"
                                    Background="Transparent"
                                    Padding="{TemplateBinding Padding}"
                                    Visibility="{Binding AllowNewGroup,
                                    Converter={StaticResource
                                      VisibilityConverter},
                                      RelativeSource={RelativeSource TemplatedParent}}"/>
                            <ItemsPresenter
                                Header="{TemplateBinding Header}"
                                HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                HeaderTransitions="{TemplateBinding HeaderTransitions}"
                                Padding="{TemplateBinding Padding}"/>
                            <Border Width="60"
                            x:Name="NewGroupPlaceHolderLast"
                                    Background="Transparent"
                                    Padding="{TemplateBinding Padding}"
                                    Visibility="{Binding AllowNewGroup,
                                    Converter={StaticResource
                                      VisibilityConverter},
                                      RelativeSource={RelativeSource TemplatedParent}}"/>
                        </StackPanel>
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

丰富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属性。

public class Item
{
    public int Id { get; set; }
    public int ItemSize { get; set; }
    /* */
}

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

/// <summary>
/// This class sets VariableSizedWrapGrid.ColumnSpanProperty for GridViewItem controls,
/// so that every item can have different size in the VariableSizedWrapGrid.
/// </summary>
public class MyGridView : GridViewSamples.Controls.GridViewEx
{
    // set ColumnSpan according to the business logic
    // (maybe some GridViewSamples.Samples.Item or group properties)
    protected override void PrepareContainerForItemOverride(
              Windows.UI.Xaml.DependencyObject element, object item)
    {
        try
        {
            GridViewSamples.Samples.Item it = item as GridViewSamples.Samples.Item;
            if (it != null)
            {
                element.SetValue(
                  Windows.UI.Xaml.Controls.VariableSizedWrapGrid.ColumnSpanProperty, it.ItemSize);
            }
        }
        catch
        {
            element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.ColumnSpanProperty, 1);
        }
        finally
        {
            base.PrepareContainerForItemOverride(element, item);
        }
    }
}

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

<local:MyGridView AllowDrop="True" CanReorderItems="True"
          CanDragItems="True" IsSwipeEnabled="True"
          ItemsSource="{Binding}"
          ItemTemplate="{StaticResource ItemTemplate}" >
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <VariableSizedWrapGrid ItemHeight="160"
            ItemWidth="160" />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemContainerStyle>
        <Style TargetType="GridViewItem">
            <Setter Property="HorizontalContentAlignment"
            Value="Stretch"/>
            <Setter Property="VerticalContentAlignment"
            Value="Stretch"/>
        </Style>
    </GridView.ItemContainerStyle>
</local:MyGridView>

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

分组

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

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

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

<local:MyGridView AllowDrop="True" CanReorderItems="True"
          CanDragItems="True" IsSwipeEnabled="True"
          ItemsSource="{Binding}"
          ItemTemplate="{StaticResource ItemTemplate}" >
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <Grid Background="LightGray"
                    Margin="0">
                        <TextBlock Foreground="Black"
                        Margin="10"
                                  Style="{StaticResource
                                  GroupHeaderTextStyle}">
                            <Run Text="{Binding Id}"/>
                            <Run Text=" group"/>
                        </TextBlock>
                    </Grid>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>

            <GroupStyle.ContainerStyle>
                <Style TargetType="GroupItem">
                    <Setter Property="BorderBrush"
                    Value="DarkGray"/>
                    <Setter Property="BorderThickness"
                    Value="2"/>
                    <Setter Property="Margin"
                    Value="3,0"/>
                </Style>
            </GroupStyle.ContainerStyle>

            <GroupStyle.Panel>
                <ItemsPanelTemplate>
                    <VariableSizedWrapGrid ItemHeight="160"
                    ItemWidth="160" />
                </ItemsPanelTemplate>
            </GroupStyle.Panel>
        </GroupStyle>
    </GridView.GroupStyle>

    <GridView.ItemContainerStyle>
        <Style TargetType="GridViewItem">
            <Setter Property="HorizontalContentAlignment"
            Value="Stretch"/>
            <Setter Property="VerticalContentAlignment"
            Value="Stretch"/>
        </Style>
    </GridView.ItemContainerStyle>
</local:MyGridView>

运行演示：

添加新分组

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

/// <summary>
/// Creates new CollectionViewSource and updates page DataContext.
/// </summary>
private void UpdateDataContext()
{
    CollectionViewSource source = new CollectionViewSource();
    source.Source = _groups;
    source.ItemsPath = new PropertyPath("Items");
    source.IsSourceGrouped = true;
    this.DataContext = source;
}
// creates new group in the data source,
// if end-user drags item to the new group placeholder
private void MyGridView_BeforeDrop(object sender, Controls.BeforeDropItemsEventArgs e)
{
    if (e.RequestCreateNewGroup)
    {
        // create new group and re-assign datasource
        Group group = Group.GetNewGroup();
        if (e.NewGroupIndex == 0)
        {
            _groups.Insert(0, group);
        }
        else
        {
            _groups.Add(group);
        }
        UpdateDataContext();
    }
}

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

// removes empty groups (except the last one)
private void MyGridView_Drop(object sender, DragEventArgs e)
{
    bool needReset = false;
    for (int i = _groups.Count - 1; i >= 0; i--)
    {
        if (_groups[i].Items.Count == 0 && _groups.Count > 1)
        {
            _groups.RemoveAt(i);
            needReset = true;
        }
    }
    if (needReset)
    {
        UpdateDataContext();
    }
}

节省布局空间

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

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

/// <summary>
/// Populates the page with content passed during navigation.  Any saved state is also
/// provided when recreating a page from a prior session.
/// </summary>
/// <param name="navigationParameter">The parameter value passed to
/// <see cref="Frame.Navigate(Type,
/// Object)"/> when this page was initially requested.
/// </param>
/// <param name="pageState"
/// >A dictionary of state preserved by this page during an earlier
/// session.  This will be null the first time a page is visited.</param>
protected override void LoadState(Object navigationParameter,
    Dictionary<String, Object> pageState)
{
    base.LoadState(navigationParameter, pageState);
    if (pageState != null && pageState.Count > 0
    && pageState.ContainsKey("Groups"))
    {
        // restore groups and items from the previously serialized state
        System.Runtime.Serialization.Json.DataContractJsonSerializer rootSer =
        new System.Runtime.Serialization.Json.DataContractJsonSerializer(typeof(List<Group>));
        var stream = new MemoryStream(System.Text.Encoding.UTF8.GetBytes
            ((string)pageState["Groups"]));
        _groups = (List<Group>)rootSer.ReadObject(stream);
    }
    else
    {
        // if we get here for the first time and don't have
        // serialized content, fill groups and items from scratch
        for (int j = 1; j <= 12; j++)
        {
            Group group = Group.GetNewGroup();
            for (int i = 1; i <= 7 + j % 3; i++)
            {
                group.Items.Add(new Item()
                {
                    Id = i,
                    GroupId = group.Id
                });
            }
            _groups.Add(group);
        }
    }
    UpdateDataContext();
}

/// <summary>
/// Preserves state associated with this page in case the application is suspended or the
/// page is discarded from the navigation cache.  Values must conform to the serialization
/// requirements of <see cref="SuspensionManager.SessionState"/>.
/// </summary>
/// <param name="pageState">
/// An empty dictionary to be populated with serializable state.</param>
protected override void SaveState(Dictionary<String, Object> pageState)
{
    // save groups and items to JSON string so that
    // it's possible to restore page state later
    base.SaveState(pageState);
    System.Runtime.Serialization.Json.DataContractJsonSerializer rootSer =
        new System.Runtime.Serialization.Json.DataContractJsonSerializer
        (typeof(List<Group>));
    var stream = new MemoryStream();
    rootSer.WriteObject(stream, _groups);
    string str = System.Text.Encoding.UTF8.GetString(stream.ToArray(),
            0, (int)stream.Length);
    pageState.Add("Groups", str);
}

/// <summary>
/// Invoked when this page is about to be displayed in a Frame.
/// </summary>
/// <param name="e">Event data that describes
/// how this page was reached.  The Parameter
/// property is typically used to configure the page.</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // restore page state
    var frameState =
    GridViewSamples.Common.SuspensionManager.SessionStateForFrame(this.Frame);
    if (frameState.ContainsKey("TilePageData"))
    {
        this.LoadState(e.Parameter,
        (Dictionary<String, Object>)frameState["TilePageData"]);
    }
    else
    {
        this.LoadState(e.Parameter, null);
    }
}

protected override void OnNavigatedFrom(NavigationEventArgs e)
{
    // save page state with "TilePageData" key
    var frameState =
    GridViewSamples.Common.SuspensionManager.SessionStateForFrame(this.Frame);
    var pageState = new Dictionary<String, Object>();
    this.SaveState(pageState);
    frameState["TilePageData"] = pageState;
}

总结

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

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

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