(一)布局

• StackPanel

  stackPanel是一种以堆叠方式放置控件的布局方式.
  Orientation属性有Vertical和Horizontial两种方式可以选择,Vertical表示纵向布局,Horizontial表示横向布局.
  HorizontalAlignment属性用来调整拓展方向.默认是strentch,即横向延伸.横向占满,除此之外还有Left,Center,Right,这是按照最小占位符分别位于横向的三个位置.相应的有VerticalAlignment属性,与之类似.
  View Code

        
          
  
         
            1 
         
            
         
           <
         
           StackPanel Orientation
         
           =
         
           "
         
           Vertical
         
           "
         
            VerticalAlignment
         
           =
         
           "
         
           Bottom
         
           "
         
           >
         
           
  
         
            2 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           1
         
           "
         
           />
         
           
  
         
            3 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           2
         
           "
         
           />
         
           
  
         
            4 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           1
         
           "
         
           />
         
           
  
         
            5 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           2
         
           "
         
           />
         
           
  
         
            6 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           1
         
           "
         
           />
         
           
  
         
            7 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           2
         
           "
         
           />
         
           
  
         
            8 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           1
         
           "
         
           />
         
           
  
         
            9 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           2
         
           "
         
           />
         
           
  
         
           10 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           1
         
           "
         
           />
         
           
  
         
           11 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           2
         
           "
         
           />
         
           
  
         
           12 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           1
         
           "
         
           />
         
           
  
         
           13 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           2
         
           "
         
           />
         
           
  
         
           14 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           1
         
           "
         
           />
         
           
  
         
           15 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           2
         
           "
         
           />
         
           
  
         
           16 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           1
         
           "
         
           />
         
           
  
         
           17 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           2
         
           "
         
           />
         
           
  
         
           18 
         
            
         
           </
         
           StackPanel
         
           >
        
          

  

• DockPanel

  DockPanel是一种以上下左右中为结构的布局方式.有点像过去的winform中的Dock属性.它有一个LastChildFill属性,默认设为true,表示自动占有剩余空间.
  非常有意思的是DockPanel的布局方式是与子元素出现的顺序有关的.
  View Code

        
          
  
         
           1 
         
            
         
           <
         
           DockPanel
         
           >
         
           
  
         
           2 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           Top
         
           "
         
            DockPanel.Dock
         
           =
         
           "
         
           Top
         
           "
         
           />
         
           
  
         
           3 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           Left
         
           "
         
            DockPanel.Dock
         
           =
         
           "
         
           Left
         
           "
         
           />
         
           
  
         
           4 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           Bottom
         
           "
         
            DockPanel.Dock
         
           =
         
           "
         
           Bottom
         
           "
         
           />
         
           
  
         
           5 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           Center
         
           "
         
           />
         
           
  
         
           6 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           Right
         
           "
         
            DockPanel.Dock
         
           =
         
           "
         
           Right
         
           "
         
           />
         
           
  
         
           7 
         
            
         
           <!--
         
           与Button的顺序有关系
         
           -->
         
           
  
         
           8 
         
            
         
           </
         
           DockPanel
         
           >
        
          

  
  View Code

        
          
  
         
           1 
         
            
         
           <
         
           DockPanel
         
           >
         
           
  
         
           2 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           Top
         
           "
         
            DockPanel.Dock
         
           =
         
           "
         
           Top
         
           "
         
           />
         
            
  
         
           3 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           Bottom
         
           "
         
            DockPanel.Dock
         
           =
         
           "
         
           Bottom
         
           "
         
           />
         
            
  
         
           4 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           Left
         
           "
         
            DockPanel.Dock
         
           =
         
           "
         
           Left
         
           "
         
           />
         
           
  
         
           5 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           Right
         
           "
         
            DockPanel.Dock
         
           =
         
           "
         
           Right
         
           "
         
           />
         
           
  
         
           6 
         
            
         
           <
         
           Button Content
         
           =
         
           "
         
           Center
         
           "
         
           />
         
           
  
         
           7 
         
            
         
           <!--
         
           与Button的顺序有关系
         
           -->
         
           
  
         
           8 
         
            
         
           </
         
           DockPanel
         
           >
        
          

  

• WrapPanel

  WrapPanel是一种流式布局方式.
  Orientation属性有Vertical和Horizontial两种方式可以选择,Vertical表示纵向流式布局,Horizontial表示横向流式布局.

• Grid

  Grid是一种网格布局方式.
  关于行高或者列宽的设置有30,*,30*,Auto这几种方式.
  30表示固定值,会裁减内容,不好用.
  *表示占用剩余的全部,如果出现多个表示平分剩余的全部.
  30*表示加权高度,会按照比例进行缩放.
  Auto表示根据元素的大小来自动适应.
  单元格的合并也很特别,如果一个控件A横跨两个单元格,但是它不改变原有的单元格,如果在原来的单元格的其中一个放置另一个控件B,那么会根据放置的顺序出现叠放效果(后来居上).

• UniformGrid

  UniformGrid是一种简化的Grid布局.
  如果你设置Rows属性和Columns属性,它将会产生一个平均分配单元格大小的固定行和列的网格.
  如果你只设置其中一个的话则表示只固定一项,另外一项会根据控件的数目自动分配.
  如果这两个值都不设置的话,会根据放入其中的控件的数目自动产生n*n的网格效果((n-1)*(n-1)<控件数目N<=n*n,n>=1).

• Canvas

  Canvas是一种精确的布局方式.
  由Left/Right/Top/Bottom中的任意两项确定一个控件的位置,而且保证不随着Canvas大小的变化改变其设定的相对位置(如设定了Left和Top,那么相对于Canvas的Left和Top将不变).
  优先级是Left>Right,Top>Bottom.

• InkCanvas 

  它与Canvas的不同时,用户可以墨迹.
  设置DefaultDrawingAttributes可以设置默认的绘画属性.