WPF 页面布局 DockPanel Grid StackPanel UniformGrid WrapPanel WPF布局入门 WPF布局资料

在布局常用的布局属性

HorizontalAlignment: 用于设置元素的水平位置VerticalAlignment: 用于设置元素的垂直位置
Margin: 指定元素与容器的边距
Height: 指定元素的高度
Width: 指定素的宽度
WinHeight/WinWidth: 指定元素的最小高度和宽度MaxHeight/MaxWidth: 指定元素的最大高度和宽度
Padding: 指定元素内部边距

通常使用元素 

DockPanel

包含在DockPanel中的元素,具备DockPanel.Dock的4个枚举值 (Top/Left/Right/Botom) 用于设置元素的错定位置LastChildFill:容器中的最后一个元素时,默认该元素填充DockPanel所有空间,默认值为TrueDockPanel中的元素未显示添加DockPanel.Dock属性时,系统则会默认为DockPanel.Dock=“Left"

<DockPane1>
<Button DockPanel.Dock="Top" Width="40" Height="40" Background="Red"/>
<Button DockPanel.Dock="Left" Width="40" Height="40" Background="Yellow"/>
<Button DockPanel.Dock="Right" Width="40" Height="40" Background="Blue"/>
<Button DockPanel.Dock="Bottom" Width="40" Height="40" Background="Green"/>
</DockPanel>

Grid

Grid为最常用的布局容器,作为View中的主要组成部分，负责框架中整体的页面布局。
ShowGridLines: 可以设置行业的边距线的显示。

Grid.RowDefinitions:可以创建任意行,进行固定高度与百分比或自适应高度设置Grid.ColumnDefinitions: 可以创建任意列,进行固定宽度与百分或自适应宽度设置

<Grid ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition/><RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
</Grid>

<Grid showGridlines="True">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    <Grid.ColumnDefinitions>
    <Border Background="#F26321" Margin="5"/>
    <Border Background="#8CC43D" Grid.Column="1" Margin="5"/>
    <Border Background="#0OABED" Grid.Row="1" Grid.Column="0" Margin="5"/>
    <Border Background="#EFB70B" Grid.Row="1" Grid.Column="0" Margin="5"/>
</Grid>

StackPanel

StackPanel 是一个垂直或水平排列控件的控件。使用 Orientation 属性来指定是垂直对齐还是水平对齐。

• Horizontal：水平方向。
• Vertical ：垂直方向。

<StackPanel Orientation="Horizontal">
    <Button Width="100" Height="40" Background="Red"/>
    <Button Width="100" Height="40" Background="Yellow"/>
    <Button Width="100" Height="40" Background="Blue"/>
    <Button Width="100" Height="40" Background="Green"/>
</StackPane1>

UniformGrid

与Grid不同的是,该容器具备Columns/Rows 属性 通过设置该属性UniformGrid则具备相应的行与列,但是设置的Columns/Rows不允许单独的进行容器的大小设置。位于UniformGrid中的子元素,按输入顺序排列至容器中直至填充容器的所有空间。未显示指定Columns/RowsUniformGrid则为子元素动态分配Columns/Rows,换行与换列的基准主要基于UniformGrid的容器大小(宽度与高度)。

<UniformGrid>
    <Button Width="40" Height="40" Background="Red"/>
    <Button Width="40" Height="40" Background="Yellow"/>
    <Button Width="40" Height="40" Background="Blue"/>
    <Button Width="40" Height="40" Background="Green"/>
</UniformGrid>

<UniformGrid Columns="2" Rows="3">
    <Button width="100" Height="40"/>
    <Button width="100" Height="40"/>
    <Button width="100" Height="40"/>
    <Button width="100" Height="40"/>
</UniformGrid>

WrapPanel

WrapPanel与StackPanel类似的功能，相对于WrapPanel,具有在有限的容器范围内,可以自动换行,或者换列处理。具体则取决于WrapPanel的排列方式(Qrientation)。默认水平布局方向(Horizontal)

<WrapPanel>
    <Button Width="100" Height="40" Background="Red"/>
    <Button Width="100" Height="40" Background="Yellow"/>
    <Button Width="100" Height="40" Background="Blue"/>
    <Button Width="100" Height="40" Background="Green"/>
    <Button Width="100" Height="40" Background="#54FF9F"/>
    <Button Width="100" Height="40" Background="#6A5ACD"/>
</WrapPanel>

Canvas  

精准定位  一个类似坐标系的面板,通过left,right,right,bottom 四个字段来设置控件的摆放位置 

<Canvas>
        <Button Content="Test1" Canvas.Left="0" Canvas.Top="20"  Width="60"/>
        <Button Content="Test2" Canvas.Right="0" Canvas.Bottom="60" Width="60"/>
        <Button Content="Test3" Canvas.Left="150" Canvas.Top="50" Width="60"/>
        <Button Content="Test4" Canvas.Right="150" Canvas.Bottom="50"  Width="60"/>
    </Canvas>

<Canvas>
        <Button Content="Test1" Canvas.Left="150" Canvas.Top="60"  Width="90" Height="50" Background="Yellow" Foreground="Gray"/>
        <Button Content="Test2" Canvas.Left="150" Canvas.Top="80" Width="90"  Height="50" Background="Red" Foreground="White"/>
        <Button Content="Test3" Canvas.Left="150" Canvas.Top="100" Width="90"  Height="50" Background="green" Foreground="White"/>
        <Button Content="Test4" Canvas.Left="150" Canvas.Top="120"  Width="90"  Height="50" />
    </Canvas>

<Canvas>
        <Button Content="Test1" Panel.ZIndex="3"  Canvas.Left="150" Canvas.Top="60"  Width="90" Height="50" Background="Yellow" Foreground="Gray"/>
        <Button Content="Test2" Panel.ZIndex="2" Canvas.Left="150" Canvas.Top="80" Width="90"  Height="50" Background="Red" Foreground="White"/>
        <Button Content="Test3" Panel.ZIndex="1" Canvas.Left="150" Canvas.Top="100" Width="90"  Height="50" Background="green" Foreground="White"/>
        <Button Content="Test4" Panel.ZIndex="0" Canvas.Left="150" Canvas.Top="120"  Width="90"  Height="50" />
    </Canvas>

canvas还有一个z_index属性来设置控件的折叠顺序，如果不设置z_index，系统是按照控件定义的先后顺序来排序，定义了z_index属性，可调整控件的重叠顺序

例：不加z_index时