WPF布局

一、布局

StackPanel:水平或垂直排列元素，Orientation（方向）属性分别为Horizontal(水平）或者Vertical（垂直）

DockPanel:根据容器的边界、元素进行Top,Bottom,Left,Right设置

Grid:类似于table表格，可灵活设置行（row)列(column)并放置控件元素，比较常用

<Grid >
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Border Background="Red"/>
        <Border Grid.Column="1" Background="Blue"/>
        <Border Grid.Row="1" Background="Yellow"/>
        <Border Grid.Row="1" Grid.Column="1" Background="Green"/>
    </Grid>

Border和StackPanel的使用

<Border  BorderBrush="Green" BorderThickness="20" Padding="50,10,20,30"//左、上、右、下  CornerRadius="10" >
        <StackPanel Name="AAA" Orientation="Vertical" Background="Yellow">
            <Label Content="Label"/>
            <Button Content="Button" Height="100" Width="50" HorizontalAlignment="Center"/>
            <Button Content="Button2" Height="50" Width="50" VerticalAlignment="Bottom" Background="Blue"/>
            <Button Content="Button3" Height="50" Width="50"  VerticalAlignment="Top" Background="Red" Margin="10,20,30,40"/>
        </StackPanel>
    </Border>

DockPanel的使用

<Grid>
        <DockPanel LastChildFill="True" //最后一个元素填充满剩余空间，默认为False，需要改为True>
            <Button Content="Button1" DockPanel.Dock="Left" Background="Red"/>
            <Button Content="Button2" DockPanel.Dock="Bottom" Height="60"/>
            <Button Content="Button3" DockPanel.Dock="Right" />
            <Button Content="Button4" DockPanel.Dock="Top" />

  </DockPanel>
    </Grid>

嵌套

<DockPanel Name="DockPanel">
        <StackPanel DockPanel.Dock="Bottom" Name="StackPanel" Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Content="OK" Margin="10,10,2,10" Padding="3" />
            <Button Content="Cancel" Margin="10,10,2,10" Padding="3"/>
        </StackPanel>
        <TextBox   Name="TexBox" DockPanel.Dock="Top" FontSize="90" >
            This a text 
        </TextBox>
    </DockPanel> 

Grid的介绍

<Grid ShowGridLines="True" //运行是否显示线 UseLayoutRounding="True"//边缘像素清晰>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>//3种方法，1、直接数值2、Auto自动适应3、*倍数增加
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="4*"/>
        </Grid.ColumnDefinitions>
        <Button Content="left top" Grid.Row="0" Grid.Column="0" Margin="3"/>
        <Button Content="center top" Grid.Row="0" Grid.Column="2" Margin="3"/>
        <Button Content="right top" Grid.Row="0" Grid.Column="3" Margin="3"/>
        <Button Content="left bottom" Grid.Row="2" Grid.Column="0" Margin="3"/>
        <Button Content="center bottom" Grid.Row="1" Grid.Column="2" Margin="3"/>
        <Button Content="right bottom" Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="3"//从第2列覆盖到第3列 Margin="3"/>
        <GridSplitter Grid.Column="1" Width="3" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Center" />
    </Grid>