20120911 布局

布局类派生于Pannel类：

StackPanel:

  由于Window只能包含一个元素，作为其内容。因此要包含多个元素，可以将StackPanel作为子元素，并在StackPanel添加元素，StackPanel只是简单容器控件，只能逐个依次显示元素。StackPanel的方向可以垂直或水平。ToolBarPanel派生于StackPanel。

<StackPanel Orientation="Vertical">
        <Label>lable</Label>
        <TextBlock>textBlock</TextBlock>
        <CheckBox>CheckBox</CheckBox>
        <CheckBox>CheckBox</CheckBox>
        <ListBox>
            <ListBoxItem>ListBoxItem</ListBoxItem>
            <ListBoxItem>ListBoxItem</ListBoxItem>
            <ListBoxItem>ListBoxItem</ListBoxItem>

　　　　　　　<Button>button</Button>
        </ListBox>
    </StackPanel>

WrapPanel:

  WrapPanel将子元素自左向右逐个排列，若一个水平放不下则放到下一列。面板的方向可以水平或垂直。

<TextBlock>WrapPanel Test</TextBlock>
 <WrapPanel Background="Yellow">
         <Button Width="80" Margin="5">Button</Button>
         <Button Width="80" Margin="5">Button</Button>
         <Button Width="80" Margin="5">Button</Button>
         <Button Width="80" Margin="5">Button</Button>
         <Button Width="80" Margin="5">Button</Button>
 </WrapPanel>

Canvas:

    一个允许显示指定控件位置的面板，定义了Left、Right、Top和Bottom属性；

<Canvas Background="Pink">
            <Label Canvas.Top="10" Canvas.Left="20">Enter Here:</Label>
            <TextBox Canvas.Top="10" Canvas.Left="100" Width="70"/>
            <Button Canvas.Top="10" Canvas.Left="180" Height="20" Width="50"  Content="OK" Padding="0" />
</Canvas>

DockPanel:

    类似于窗口停靠，DockPanel可以指定排列子控件的区域。DockPanel定义了相关的Dock属性，可以在控件的子控件中设置为Left、Right、Top和Bottom。

<DockPanel Background="BlanchedAlmond">
        <Border Height="25" Background="Pink" DockPanel.Dock="Top">
            <TextBlock>menu</TextBlock>
        </Border>
        <Border Height="25" Background="Aqua" DockPanel.Dock="Top">
            <TextBlock>toolbar</TextBlock>
        </Border>
        <Border Height="30" Background="Yellow" DockPanel.Dock="Bottom">
            <TextBlock>status</TextBlock>
        </Border>
        <Border Width="100" Background="Khaki" DockPanel.Dock="Left">
            <TextBlock>sidel</TextBlock>
        </Border>
        <Border Width="100" Background="CadetBlue" DockPanel.Dock="Right">
            <TextBlock>sider</TextBlock>
        </Border>
        <Border  Background="RosyBrown" >
            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">blank</TextBlock>
        </Border>

</DockPanel>

 

Grid：

    可以在行列排列控件。对于每一列可以指定一个ColumnDefinition。对于每一列可以指定一个RowDefinition。两个分别为width和Height依赖属性。其可以以像素、厘米、英寸或点为单位定义高度和宽度，或者设置为Auto，根据内容确定其大小。Gird还允许根据具体内容指定大小，既根据可用空间以及其他行列的相对位置计算行列的空间。比如为列提供可用空间可以将Width设置为"*"；设置某一列的控件为另一列的两倍，应指定为"2*"。如果欲使每个单元有相同大小，可以使用UniformGrid。

<!--便于观察Grid设置其可见-->
    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5*" />
            <ColumnDefinition Width="0.5*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.3*" />
            <RowDefinition Height="0.3*" />
            <RowDefinition Height="0.3*" />
        </Grid.RowDefinitions>
        <Label Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" 
               HorizontalAlignment="Center" Grid.ColumnSpan="2">Title</Label>
        <Label Grid.Column="0" Grid.Row="1" VerticalAlignment="Center" 
               HorizontalAlignment="Center" Background="Pink">name:</Label>
        <Label Grid.Column="0" Grid.Row="2" VerticalAlignment="Center" 
               HorizontalAlignment="Center" Background="Pink">name:</Label>
        <Label Grid.Column="1" Grid.Row="1" VerticalAlignment="Center" 
               HorizontalAlignment="Center" >
            <TextBox Width="80"/>
        </Label>
        <Label Grid.Column="1" Grid.Row="2" VerticalAlignment="Center" 
               HorizontalAlignment="Center" >
            <TextBox Width="80"/>
        </Label>
    </Grid>