重新想象 Windows 8 Store Apps (12)

美奇科技

　　[源码下载]




重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示　　
作者：webabcd

介绍
重新想象 Windows 8 Store Apps 之 GridView

• 拖动项 - 在 GridView 内拖动 item 以对 item 排序, 拖动 item 到 GridView 外的指定位置以删除 item
  
• 项尺寸可变 - 指定 GirdView 中每个 item 所占尺寸
  
• 分组显示 - 分组显示集合数据
  

　　
示例
1、演示如何在 GridView 内拖动 item 以对 item 排序，以及如何拖动 item 到 GridView 外的指定位置以删除 item
GridView/DragItem.xaml



































　　GridView/DragItem.xaml.cs



/*
* 演示如何在 GridView 内拖动 item 以对 item 排序，以及如何拖动 item 到 GridView 外的指定位置以删除 item
*
* GridView - 网格控件
*     CanDragItems - item 是否可被拖动
*     CanReorderItems - 是否可通过拖动 item 来排序
*     AllowDrop - 是否可在 GridView 中 drop
*     DragItemsStarting - item 开始被拖动时所触发的事件（事件参数 DragItemsStartingEventArgs）
*      
* DragItemsStartingEventArgs
*     Items - 被拖动的 items 集合
*     Cancel - 是否取消拖动操作
*     Data - 一个 DataPackage 类型的对象，用于传递数据（与 DataPackage 在剪切板和 Share Contract 中的作用一样）
*     
*
* 注：
* drag-drop 间传递数据，clipboard 间传递数据，Share Contract 间传递数据，以及其他场景的数据传递均可通过 DataPackage 类型的对象来完成
* 本例没有通过 DataPackage 来传递数据（太麻烦），而是通过一个私有字段来传递数据（比较简单）
*/
using System.Collections.ObjectModel;
using Windows.UI.Xaml.Controls;
using System.Linq;
using XamlDemo.Model;
using Windows.UI.Xaml;
using System.Diagnostics;
namespace XamlDemo.Controls.GridView
{
public sealed partial class DragItem : Page
{
// 数据源
private ObservableCollection _dataSource;
// 拖动中的 Employee 对象
private Employee _draggingEmployee;
public DragItem()
{
this.InitializeComponent();
// 绑定数据
_dataSource = new ObservableCollection(TestData.GetEmployees());
gridView.ItemsSource = _dataSource;
// GridView 中的 items 发生变化时触发的事件
gridView.ItemContainerGenerator.ItemsChanged += ItemContainerGenerator_ItemsChanged;
}
void ItemContainerGenerator_ItemsChanged(object sender, Windows.UI.Xaml.Controls.Primitives.ItemsChangedEventArgs e)
{
if (e.OldPosition.Index > -1)
{
// 在 GridView 中 drop 了 item，且排序发生了变化
var oldIndex = _dataSource.IndexOf(_draggingEmployee); // 被拖动的 Employee 对象的原位置
var newIndex = e.Position.Index + e.Position.Offset; // 被拖动的 Employee 对象的新位置
// 修改数据源
                _dataSource.Move(oldIndex, newIndex);
_draggingEmployee = null;
}
}
// GridView 中的 item 开始被拖动时
private void gridView_DragItemsStarting_1(object sender, DragItemsStartingEventArgs e)
{
_draggingEmployee = e.Items.First() as Employee;
}

// GridView 中的 item 被 drop 到了指定的位置后
private void gridDelete_Drop_1(object sender, DragEventArgs e)
{
// 从数据源中删除指定的 Employee 对象
            _dataSource.Remove(_draggingEmployee);
_draggingEmployee = null;
// 在 gridDelete 放下了拖动项
Debug.WriteLine("Drop");
}
private void gridDelete_DragEnter_1(object sender, DragEventArgs e)
{
// 拖动项被拖进 gridDelete 了
Debug.WriteLine("DragEnter");
}
private void gridDelete_DragLeave_1(object sender, DragEventArgs e)
{
// 拖动项被拖出 gridDelete 了
Debug.WriteLine("DragLeave");
}
private void gridDelete_DragOver_1(object sender, DragEventArgs e)
{
// 拖动项在 gridDelete 上面拖动着
Debug.WriteLine("DragOver");
}
}
}
　　
2、演示如何指定 GirdView 中每个 item 所占尺寸
GridView/ColorModel.cs



using Windows.UI.Xaml.Media;
namespace XamlDemo.Controls.GridView
{
///
/// 用于绑定到 VariableSized.xaml 中的 GridView 的数据实体模型
///
class ColorModel
{
public string ColorName { get; set; }
public SolidColorBrush ColorValue { get; set; }
// 此对象所占的网格的列合并数
public int ColSpan { get; set; }
// 此对象所占的网格的行合并数
public int RowSpan { get; set; }
}
}
　　GridView/MyGridView.cs



/*
* 此控件可以指定 GridView 的每个 item 所占网格的列合并数和行合并数
*/
using System;
using System.Diagnostics;
namespace XamlDemo.Controls.GridView
{
public class MyGridView : Windows.UI.Xaml.Controls.GridView
{
protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item)
{
try
{
// 指定 VariableSizedWrapGrid 的 ColumnSpan 和 RowSpan

dynamic dynamicItem = item;
element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.ColumnSpanProperty, dynamicItem.ColSpan);
element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.RowSpanProperty, dynamicItem.RowSpan);
}
catch(Exception ex)
{
// 当有异常情况发生时（比如：item 没有 ColSpan 属性或 RowSpan 属性）

Debug.WriteLine(ex.ToString());
element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.ColumnSpanProperty, 1);
element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.RowSpanProperty, 1);
}
finally
{
base.PrepareContainerForItemOverride(element, item);
}
}
}
}
　　GridView/VariableSized.xaml































　　GridView/VariableSized.xaml.cs



/*
* 演示如何指定 GirdView 中每个 item 所占尺寸
* GridView 是一个网格控件，这里所谓的每个 item 所占尺寸，其本质上就是 item 所在网格的列合并数和行合并数
*
* 要实现此需求的话：
* 1、必须使用 VariableSizedWrapGrid，具体见 VariableSized.xaml
* 2、需要重写 GridView 的 PrepareContainerForItemOverride() 方法，具体见 MyGridView.cs
*/
using System.Reflection;
using System.Linq;
using System.Collections.Generic;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using System;
using Windows.UI;
namespace XamlDemo.Controls.GridView
{
public sealed partial class VariableSized : Page
{
public VariableSized()
{
this.InitializeComponent();
BindData();
}
private void BindData()
{
Random random = new Random();
// 获取 Windows.UI.Colors 的全部数据
List colors = typeof(Colors)  // typeof 在 System.Reflection 命名空间下
                .GetRuntimeProperties()
.Select(c => new ColorModel
{
ColorName = c.Name,
ColorValue = new SolidColorBrush((Color)c.GetValue(null)),
ColSpan = random.Next(1, 3), // 此对象所占网格的列合并数
RowSpan = random.Next(1, 3) // 此对象所占网格的行合并数
                })
.ToList();
// 绑定数据
gridView.ItemsSource = colors;
}
}
}
　　
3、演示如何分组显示集合数据（关于分组的示例会和之后的 SemanticZoom 一起写）
GridView/Group.xaml







关于 GridView 的分组显示请参见本 app 的索引页 Index.xaml 和 Index.xaml.cs

分组的功能来源于 ItemsControl（GridView, ListView, FlipView, ListBox 等均继承了 ItemsControl）




　　
OK
[源码下载]