首先，所有元素的最顶层必须是一个容器(通常如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 的某个上级对象不可见。
可以通过使用 Grid.Column 和 Grid.Row 附加属性，在 Grid 的特定单元格中定位对象。
列和行可以利用 Star 缩放来按比例分配剩余空间。当选择 Star 作为行或列的高度或宽度时，该行或列将得到一个剩余可用空间的加权比例分配。Star 大小调整是默认行为。
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>