Windows Phone 7 使用Canvas Grid StackPanel进行布局管理-阿里云开发者社区

一、布局原理

　　首先，所有元素的最顶层必须是一个容器(通常如Grid，Canvas，StackPanel等)，然后在容器中摆放元素，容器中也可能包含容器。这里的容器就像行政长官一样，他们负责分配元素的空间。同样，首先顶层的容器一个一个的问自己的子元素：你想要多大的空间？如果子元素也是容器，它又继续向下递归，最后又顶层开始向上汇报。这就是所谓的测量。

　　测量完之后就是排列，这个时候每个容器知道自己每个子元素想要的空间大小，就按自己的实际情况进行分配。一致递归到最底层。

　　这里的容器也一样，容器拥有完全的分配权，不过这里容器不仅仅是分配空间，还决定元素的位置，因为空间总是跟位置相关的。也就是说，容器说想给你多大空间你就只有有那么大的空间可使用，容器想让你摆在什么位置，你就得乖乖呆着什么位置。

二、继承层次结构

System.Object
System.Windows.DependencyObject
System.Windows.UIElement
System.Windows.FrameworkElement
System.Windows.Controls.Panel
System.Windows.Controls.Canvas
System.Windows.Controls.Grid
System.Windows.Controls.StackPanel
System.Windows.Controls.VirtualizingPanel

三、Canvas Grid StackPanel 介绍

Canvas-画布 定义一个区域，在此区域内，您可以使用相对于 Canvas 区域的坐标显式定位子元素。

Canvas的规则是：我读取附加属性Canvas.Left,Canvas.Right,Canvas.Top,Canvas.Bottom，并以此来决定元素的位置。

可以嵌套 Canvas 对象。嵌套对象时，每个对象使用的坐标都是相对于直接包含它们的 Canvas 而言的。

每个子对象都必须是 UIElement。在 XAML 中，将子对象声明为对象元素，这些元素是 Canvas 对象元素的内部 XML。在代码中，可以通过获取由 Children 属性访问的集合来操作 Canvas 子对象的集合。

由于 Canvas 为 UIElement 类型，因此可以嵌套 Canvas 对象。

很多情况下，Canvas 仅仅用作其他对象的容器，而没有任何可见属性。如果满足以下任一条件，Canvas 即不可见：

Height 属性等于 0。

Width 属性等于 0。

Background 属性等于 nullNothingnullptrunitnull 引用（在 Visual Basic 中为 Nothing）。

Opacity 属性等于 0。

Visibility 属性等于 Visibility..::..Collapsed。

Canvas 的某个上级对象不可见。

Grid-表格 定义由行和列组成的灵活网格区域。

Grid的规则是：我把我这个空间分成一格一格的格子，看起来有些像Table，在我里面的元素我完全按照附加属性Grid.Row,Grid.Column，Grid.RowSpan,Grid.ColumnSpan来决定其大小和位置。

可以通过使用 Grid.Column 和 Grid.Row 附加属性，在 Grid 的特定单元格中定位对象。

列和行可以利用 Star 缩放来按比例分配剩余空间。当选择 Star 作为行或列的高度或宽度时，该行或列将得到一个剩余可用空间的加权比例分配。Star 大小调整是默认行为。

StackPanel-堆放容器 将子元素排列成一行（可沿水平或垂直方向）。

StackPanel的规则是：根据附加属性，我要么让元素横着排列，要么竖着排列。

StackPanel 为启用布局的 Panel 元素之一。在特定情形下，例如，要将一组对象排列在竖直或水平列表（例如，项的水平或竖直菜单）中，StackPanel 很有用。设置 Orientation 属性可确定列表的方向。Orientation 属性的默认值为 Vertical。

StackPanel 中内容的 HorizontalAlignment 和 VerticalAlignment 默认值均为 Stretch。

三、实例

Canvas


 
 

  
  <!--LayoutRoot contains the root grid where all other page content is placed--> 

  
      <Grid x:Name="LayoutRoot" Background="Transparent"> 

  
          <Grid.RowDefinitions> 

  
              <RowDefinition Height="Auto"/> 

  
              <RowDefinition Height="*"/> 

  
          </Grid.RowDefinitions> 

  
   

  
          <!--TitlePanel contains the name of the application and page title--> 

  
          <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 

  
              <TextBlock x:Name="ApplicationTitle" Text="ELLIPSE CHAIN" Style="{StaticResource PhoneTextNormalStyle}"/> 

  
              <TextBlock x:Name="PageTitle" Text="main page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 

  
          </StackPanel> 

  
   

  
          <!--ContentPanel - place additional content here--> 

  
          <Grid x:Name="ContentPanel" Grid.Row="1" Margin="1 0 0 0"> 

  
              <Canvas> 

  
                  <Canvas.Resources> 

  
                      <Style x:Key="ellipseStyle"   

  
                             TargetType="Ellipse"> 

  
                          <Setter Property="Width" Value="100" /> 

  
                          <Setter Property="Height" Value="100" /> 

  
                          <Setter Property="Stroke" Value="{StaticResource PhoneAccentBrush}" /> 

  
                          <Setter Property="StrokeThickness" Value="10" /> 

  
                      </Style> 

  
                  </Canvas.Resources> 

  
                    

  
                  <Ellipse Style="{StaticResource ellipseStyle}" 

  
                           Canvas.Left="0" Canvas.Top="0" /> 

  
   

  
                  <Ellipse Style="{StaticResource ellipseStyle}" 

  
                           Canvas.Left="52" Canvas.Top="53" /> 

  
                    

  
                  <Ellipse Style="{StaticResource ellipseStyle}" 

  
                           Canvas.Left="116" Canvas.Top="92" /> 

  
   

  
                  <Ellipse Style="{StaticResource ellipseStyle}" 

  
                           Canvas.Left="190" Canvas.Top="107" /> 

  
   

  
                  <Ellipse Style="{StaticResource ellipseStyle}" 

  
                           Canvas.Left="263" Canvas.Top="92" /> 

  
   

  
                  <Ellipse Style="{StaticResource ellipseStyle}" 

  
                           Canvas.Left="326" Canvas.Top="53" /> 

  
   

  
                  <Ellipse Style="{StaticResource ellipseStyle}" 

  
                           Canvas.Left="380" Canvas.Top="0" /> 

  
              </Canvas> 

  
          </Grid> 

  
      </Grid>