WPF系列:基本布局

StackPanel

　　StackPanel可以作为Window的一个子元素，并在其中包含多个元素，并逐个显示元素，可以是水平（Horizontal）排列或者垂直（Vertical）排列

    <StackPanel Orientation="Vertical">
        <Label>Lable</Label>
        <TextBox>TextBox</TextBox>
        <Button>Button</Button>
        <CheckBox>CheckBox</CheckBox>
        <CheckBox>CheckBox</CheckBox>
        <ListBox>
            <ListBoxItem>ListBoxItem1</ListBoxItem>
            <ListBoxItem>ListBoxItem2</ListBoxItem>
            <ListBoxItem>ListBoxItem3</ListBoxItem>
        </ListBox>
    </StackPanel>

WarpPanel

　　WarpPanel和StackPanel类似，不同的是WapPanel内的元素会自动换行，在同一行或者同一列中，如果窗口不能够显示所有元素，会将多出的部分自动换行，并且能够随着窗口的变化自动适应；排列顺序是从左到右或者从上到下，取决于Orientation的值

   <WrapPanel Orientation="Horizontal">
       <Button Width="100" Margin="10">Button1</Button>
       <Button Width="100" Margin="10">Button2</Button>
       <Button Width="100" Margin="10">Button3</Button>
       <Button Width="100" Margin="10">Button4</Button>
       <Button Width="100" Margin="10">Button5</Button>
       <Button Width="100" Margin="10">Button6</Button>
       <Button Width="100" Margin="10">Button7</Button>
       <Button Width="100" Margin="10">Button8</Button>
       <Button Width="100" Margin="10">Button9</Button>
       <Button Width="100" Margin="10">Button10</Button>
   </WrapPanel>

Canvas

　　Canvas是一个允许显示指定元素位置的面板。主要是通过附加属性Canvas.Top、Canvas.Left、Canvas.Right、Canvas.Bottom指定位置

        <Canvas Background="Beige">
            <Label Canvas.Left="30" Canvas.Top="50" Content="Account:" ></Label>
            <TextBox Canvas.Left="90" Canvas.Top="50" Width="100"></TextBox>
            <Button Canvas.Left="100" Canvas.Top="80" Content="sign in"></Button>
        </Canvas>

DockPanel

　　DockPanel可以指定排列子控件的区域，用过WinForm的童鞋应该还记得控件的Dock属性吧，DockPanel就和Dock是一样的效果；DockPanel也是通过附加属性DockPanel.Top、DockPanel.Left、DockPanel.Right、DockPanel.Bottom指定内部元素区域。

   <DockPanel>
       <Border Height="30" Background="AliceBlue" DockPanel.Dock="Top">
           <TextBlock>North</TextBlock>
       </Border>
       <Border Height="30" Background="Aqua" DockPanel.Dock="Bottom">
           <TextBlock>South</TextBlock>
       </Border>
       <Border Width="80" Background="LightSteelBlue" DockPanel.Dock="Left">
           <TextBlock>West</TextBlock>
       </Border>
       <Border Width="30" Background="Beige" DockPanel.Dock="Right">
           <TextBlock>East</TextBlock>
       </Border>
       <Border  Background="HotPink" >
           <TextBlock>Center</TextBlock>
       </Border>
   </DockPanel>

Grid

　　Grid网格布局，可以通过ColumnDefinition指定列，通过RowDefinition指定行；通过Grid.Row、Grid.Column指定元素所在的行和列（索引从0开始）；通过Grid.ColumnSpan和Grid.RowSpan指定元素所占的列数和行数；“*”符号可以表示元素的宽或者高

　　（Grid的总高度（或宽）- 已经指定高度（或宽））/N * M(指”*“号表示的高（或者宽）)

    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="2*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Button Background="DarkCyan"></Button>
        <Button Grid.Row="1" Grid.Column="1" Background="DarkGreen"></Button>
        <Button Grid.Row="2" Grid.ColumnSpan="2"  Background="DarkBlue"></Button>
        <Button Grid.Row="3"  Grid.RowSpan="2"  Background="Purple"></Button>
    </Grid>

　　Grid的强大之处是它还支持拆分器(GridSplitter)，允许用户调整各个单元格的大小

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Background="Cyan" Content="1"></Label>
        <GridSplitter Grid.Column="0" Width="10" Background="Gray"></GridSplitter>
        <Label Grid.Column="1" Background="BlanchedAlmond" Content="2"></Label>
    </Grid>