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>