Window 8 学习笔记（三）-- 如何创建一个可变尺寸的GridView

Window 8 学习笔记（三）-- 如何创建一个可变尺寸的GridView

         前文再续，本章介绍如何创建一个C++版本的Variable Sized Gridview，这里有两种方法，一种是用微软的Template，还有另一种方法，简单些。本章先介绍微软的方法。
         其实C#版本微软已经实现了，大家可以在VS2012上面去找找，方法是：新建-〉Online-〉Templates-〉Visual C#，右边选项栏里面就有这个Variable Sized Grid Template了，创建之后，部署，运行，你就可以得到一个类似于Windows Store 的Ui，下面看两张图吧，我们讲究有图有真相。

 1. 找到这个Template：




2. 运行效果：



      这个Template中的代码我感觉有点绕圈圈，不知道它为什么这么做，但是可以实现这种效果，我会试着来讲解一下代码的具体意思。
      先把代码帖出来：

 1  public   ref   class  VariableGridView  sealed  :  public  Windows::UI::Xaml::Controls::GridView
 2          {
 3           public :
 4              property  Platform::String ^  ItemRowSpanPropertyPath
 5              {
 6                  Platform::String ^   get ()
 7                  {
 8                       return  safe_cast < Platform::String ^> (GetValue(ItemRowSpanPropertyPathProperty));
 9                  }
10                   void   set (Platform::String ^  value)
11                  {
12                      SetValue(ItemRowSpanPropertyPathProperty, value);
13                  }
14              }
15               static  property Windows::UI::Xaml::DependencyProperty ^  ItemRowSpanPropertyPathProperty
16              {
17                  Windows::UI::Xaml::DependencyProperty ^   get ();
18              }
19 
20 
21 
22              property  Platform::String ^  ItemColSpanPropertyPath
23              {
24                  Platform::String ^   get ()
25                  {
26                       return  safe_cast < Platform::String ^> (GetValue(ItemColSpanPropertyPathProperty));
27                  }
28                   void   set (Platform::String ^  value)
29                  {
30                      SetValue(ItemColSpanPropertyPathProperty, value);
31                  }
32              }
33               static  property Windows::UI::Xaml::DependencyProperty ^  ItemColSpanPropertyPathProperty
34              {
35                  Windows::UI::Xaml::DependencyProperty ^   get ();
36              }
37           protected :
38               virtual   void  PrepareContainerForItemOverride(Windows::UI::Xaml::DependencyObject ^  element, Platform::Object ^  item)  override ;
39           private :
40               static  Windows::UI::Xaml::DependencyProperty ^  _itemRowSpanPropertyPathProperty;
41               static  Windows::UI::Xaml::DependencyProperty ^  _itemColSpanPropertyPathProperty;
42 
43          };

这里有几个概念，今天先说一下Dependecy Property 这个东西吧，其他的下次继续：
      1. 我现在接触到的Dependency Property，就是依赖属性，主要用来进行数据绑定。我们知道WinRT一个比较重要的功能就是数据的绑定，而绑定的目标（target）属性必须为依赖属性属性，而源（source）则没有要求，你可以是依赖属性，也可以不是依赖属性。这部分内容我在MVVM那一张已经翻译过了。源和目标都是依赖属性的好处是，在binding的时候WinRT会自动地帮你做一些事情，这样源属性改变，目标属性会立即改变。如果源属性不是依赖属性，那么，包含该属性的类必须实现 INotifyPropertyCh anged 这个借口，不然，就不行了。
      2. 依赖属性的定义 有一套的流程。首先，我们看代码中，在私有域：需要有一个静态的DependencyProperty 变量，在公共域：需要一个对应的静态DependencyProperty属性。注意，一个是变量，一个是属性，公共域的要有一个Property关键字。私有域的这个变量作为公共域属性的back store。
          另外，为了方便存取，还需要一个额外的属性来获得这个依赖属性。注意到：DependecyProperty 属性只有get（）方法，相关属性的set（）、get（）方法中分别调用SetValue(),GetValue()，方法。
         头文件中就需要这些东西，还没有结束，声明完依赖属性，我们还需要注册，让WinRT这个绑定系统知道有这么一个类，有这样一个依赖属性。注册的代码如下：

1  DependencyProperty ^  VariableGridView::_itemColSpanPropertyPathProperty  =  
2      DependencyProperty::Register( " ItemColSpanPropertyPath " , TypeName(String::typeid), TypeName(VariableGridView::typeid),
3       ref   new  PropertyMetadata(nullptr));

         注册完，这个类就有了一个依赖属性了。
        不错，现在我们实现了这个类的一半了，为了达到可变尺寸的GridView，还有另一个重载方法是必不可少的。不过我打算明天再跟大家分享了，今天要早点回家做饭啦。哈哈。先把代码贴上，C++的代码跟C#很类似，
   

 1  void  VariableGridView::PrepareContainerForItemOverride(DependencyObject ^  element, Platform::Object ^  item)
 2  {
 3      GridView::PrepareContainerForItemOverride(element, item);
 4      auto viewMode  =  (Data::DataItem ^ )(item);
 5      UIElement ^  uiElement  =  safe_cast < UIElement ^> (element);
 6 
 7      Binding ^  colBinding  =   ref   new  Binding();
 8      colBinding -> Source  =  viewMode;
 9      colBinding -> Path  =   ref   new  PropertyPath( this -> ItemColSpanPropertyPath);
10      BindingOperations::SetBinding(uiElement,VariableSizedWrapGrid::ColumnSpanProperty, colBinding);
11      
12 
13      Binding ^  rowBinding  =   ref   new  Binding();
14      rowBinding -> Source  =  viewMode;
15      rowBinding -> Path  =   ref   new  PropertyPath( this -> ItemRowSpanPropertyPath);
16      BindingOperations::SetBinding(uiElement,VariableSizedWrapGrid::RowSpanProperty, rowBinding);    
17  }

      

下期预告：即使完成了上面的两步，其实还没有完全实现VariableSized GridView,还需要在XAML文件中进行相应的修改，下期将介绍其余的部分。