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>

Grid

<!--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="SIMPLE GRID" 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="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<TextBlock Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
Text="Heading at top of Grid"
HorizontalAlignment="Center" />

<Image Grid.Row="1"
Grid.Column="0"
Source="Images/BuzzAldrinOnTheMoon.png" />

<Ellipse Grid.Row="1"
Grid.Column="1"
Stroke="{StaticResource PhoneAccentBrush}"
StrokeThickness="6" />

<TextBlock Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2"
Text="Footer at bottom of Grid"
HorizontalAlignment="Center" />

</Grid>
</Grid>

StackPanel

<!--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="STACKPANEL WITH FOUR ELEMENTS" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Name="stackPanel"
Orientation="Vertical">
<TextBlock Text="TextBlock aligned at right bottom"
HorizontalAlignment="Right"
VerticalAlignment="Bottom" />

<Image Source="Images/BuzzAldrinOnTheMoon.png" />

<Ellipse Stroke="{StaticResource PhoneAccentBrush}"
StrokeThickness="12" />

<TextBlock Text="TextBlock aligned at left top"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
</StackPanel>
</Grid>
</Grid>

 

注：SDKhome移动平台开发的交流平台 http://www.sdkhome.com