我们可以用XAML来绘制Windows8应用的UI, 关于XAML语言，不在此详述，google之，bing之，莫度娘之。。。- -# 控件大概可分为布局控件，数据绑定控件以及常规控件。本篇只介绍布局控件，常规控件将在下一篇介绍，数据绑定控件会在以后的数据绑定篇介绍。

布局控件

Grid

Grid类似于HTML中的table, 可自定义m行n列，见如下代码：

1 
     
       2             
      
        3                 
        4                 
        5                 
        6             
       7             
      
        8                 
        9                 
       10                 
       11             
      12 
     

这段代码定义了一个三行散列的Grid, 每一行高度一样，每一列宽度也一样。如果我们将Height或者Width设置为auto, 行高和列宽会随着内容而改变，也可设为数值，如100,200. “*”为占满所有控件，我们可以通过设置“x*”来按比例控制。如上代码，设置了三行，行高均为“*”, 这Grid的三行行高相同，如设置为"*", "2*", "*", 则为第一行行高占整个控件高度的25%, 第二行行高占整个控件高度的50%, 第三行行高占整个控件高度的25%.

像Grid中填充元素，需要给填充的元素制定位于哪一行哪一列，如下：

1         
       
         2             
        
          3                 
          4                 
          5                 
          6             
         7             
        
          8                 
          9                 
         10                 
         11             
        12             
                    13             
        14             
        15             
        16             
        17         
       

运行效果如下：

由代码可知，index从0开始算起，这对我们码屌来说并不陌生。

StackPanel

这玩意儿它会自动帮你排列控件，你只需要给它设置是让控件横着排还是竖着排就好了，见代码：

1         
      
        2             
        3             
        4             
        5         
       6         
      
        7             
        8             
        9             
       10         
      

运行结果如下：

第一个StackPanel的Orientation属性设置为Horizontal, 则控件在里面为横向排列，第二个StackPanel的Orientation属性设置为Vertical, 则控件在里面为纵向排列。HorizontalAlignment和VerticalAlignment分别设置了横向和纵向对齐方式。

VirtualizingStackPanel

看名字就知道这哥们和StackPanel是哥俩好，不过它稍微牛逼一点，但它也不能单独拿出来使用，一般作为包含item的数据绑定控件（eg. GridView, ListView等）的ItemsPanel使用，从外观上表现为一个包含在ScrollViewer中的StackPanel，我们可以通过拖动滚动条来查看数据。优点在于，通过拖动滚动条查看数据时，在数据进入可视范围前，并不加载数据，而是在滚动进度条使item进入可视范围时才会加载，这对节省内存改变性能有很大好处。代码如下：

1 
      
       2     
       
        3         
        
         4             
         5         
        6     
       7 
      

WrapGrid

WrapGrid同样不可以单独拿出来使用，它也要作为包含item的数据绑定控件的ItemsPanel使用，从命名可以看出，它是支持wrap的，当我们给它设置了orientation, height和width属性，item排列时会在达到WrapGrid边缘时自动换到下一行或下一列，见代码：

1         
      
       2             
       
        3                 
        
         4                     
         5                 
        6             
                   7         
      

此代码设置了WrapGrid中的元素横向排列，WrapGrid宽500，高300，若item的宽为100，则第五个元素刚好充满容器的第一行，第六个元素则会自动换到第二行进行排列。

VariableSizedWrapGrid

从命名上不难看出，VariableSizedWrapGrid具备WrapGrid的wrap功能，并且每一个item的size可以不同，这个控件还可以单独拿来使用。见代码：

1         
      
       2             
       3             
       4             
       5             
       6             
       7             
       8         
      

运行结果如下：

ViewBox

ViewBox可以让它包含的元素根据它的大小进行缩放，这个控件只能包含一个子元素。见代码：

1         
      
        2             
        3             
       
         4                 
        
          5                     
          6                 
         7                 
        
          8                     
          9                 
        10                 
        
         11                     
         12                 
        13             
       14         
      

运行效果：

绿色矩形为原始大小，蓝色、红色和黄色为通过ViewBox缩放后的大小。

Canvas

这个控件就比较简单了，主要用作在上面摆放其他控件，可以通过设置摆放控件的Canvas.Left和Canvas.Top属性来控制控件在Canvas中的摆放位置。代码如下：

1         
      
       2             
       3         
      

运行效果：

'

蓝色矩形位于距离Canvas顶端100, 左边缘50的位置。

OK, 今天先到这里。