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 而言的。

每个子对象都必须是 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 的某个上级对象不可见。

1. <!--LayoutRoot contains the root grid where all other page content is placed--> 
2.     <Grid x:Name="LayoutRoot" Background="Transparent"> 
3.         <Grid.RowDefinitions> 
4.             <RowDefinition Height="Auto"/> 
5.             <RowDefinition Height="*"/> 
6.         </Grid.RowDefinitions> 
7.  
8.         <!--TitlePanel contains the name of the application and page title--> 
9.         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 
10.             <TextBlock x:Name="ApplicationTitle" Text="ELLIPSE CHAIN" Style="{StaticResource PhoneTextNormalStyle}"/> 
11.             <TextBlock x:Name="PageTitle" Text="main page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 
12.         </StackPanel> 
13.  
14.         <!--ContentPanel - place additional content here--> 
15.         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="1 0 0 0"> 
16.             <Canvas> 
17.                 <Canvas.Resources> 
18.                     <Style x:Key="ellipseStyle"   
19.                            TargetType="Ellipse"> 
20.                         <Setter Property="Width" Value="100" /> 
21.                         <Setter Property="Height" Value="100" /> 
22.                         <Setter Property="Stroke" Value="{StaticResource PhoneAccentBrush}" /> 
23.                         <Setter Property="StrokeThickness" Value="10" /> 
24.                     </Style> 
25.                 </Canvas.Resources> 
26.                   
27.                 <Ellipse Style="{StaticResource ellipseStyle}" 
28.                          Canvas.Left="0" Canvas.Top="0" /> 
29.  
30.                 <Ellipse Style="{StaticResource ellipseStyle}" 
31.                          Canvas.Left="52" Canvas.Top="53" /> 
32.                   
33.                 <Ellipse Style="{StaticResource ellipseStyle}" 
34.                          Canvas.Left="116" Canvas.Top="92" /> 
35.  
36.                 <Ellipse Style="{StaticResource ellipseStyle}" 
37.                          Canvas.Left="190" Canvas.Top="107" /> 
38.  
39.                 <Ellipse Style="{StaticResource ellipseStyle}" 
40.                          Canvas.Left="263" Canvas.Top="92" /> 
41.  
42.                 <Ellipse Style="{StaticResource ellipseStyle}" 
43.                          Canvas.Left="326" Canvas.Top="53" /> 
44.  
45.                 <Ellipse Style="{StaticResource ellipseStyle}" 
46.                          Canvas.Left="380" Canvas.Top="0" /> 
47.             </Canvas> 
48.         </Grid> 
49.     </Grid> 

 StackPanel

1. <!--LayoutRoot contains the root grid where all other page content is placed--> 
2.     <Grid x:Name="LayoutRoot" Background="Transparent"> 
3.         <Grid.RowDefinitions> 
4.             <RowDefinition Height="Auto"/> 
5.             <RowDefinition Height="*"/> 
6.         </Grid.RowDefinitions> 
7.  
8.         <!--TitlePanel contains the name of the application and page title--> 
9.         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 
10.             <TextBlock x:Name="ApplicationTitle" Text="STACKPANEL WITH FOUR ELEMENTS" Style="{StaticResource PhoneTextNormalStyle}"/> 
11.         </StackPanel> 
12.  
13.         <!--ContentPanel - place additional content here--> 
14.         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
15.             <StackPanel Name="stackPanel" 
16.                         Orientation="Vertical"> 
17.                 <TextBlock Text="TextBlock aligned at right bottom" 
18.                            HorizontalAlignment="Right" 
19.                            VerticalAlignment="Bottom" /> 
20.  
21.                 <Image Source="Images/BuzzAldrinOnTheMoon.png" /> 
22.  
23.                 <Ellipse Stroke="{StaticResource PhoneAccentBrush}" 
24.                          StrokeThickness="12" /> 
25.  
26.                 <TextBlock Text="TextBlock aligned at left top" 
27.                            HorizontalAlignment="Left" 
28.                            VerticalAlignment="Top" /> 
29.             </StackPanel> 
30.         </Grid> 
31.     </Grid> 

本文转自linzheng 51CTO博客，原文链接:http://blog.51cto.com/linzheng/1079159