详解-WPF入门基础 ——（布局）

WPF中的常用布局

——墨问苍生

 2020-10-11

---

一、布局的基本原则

　　·一个窗口只能包含一个元素

　　如果需要支持多个元素，可以使用嵌套布局。　

　　·不应使用坐标设置元素位置

　　尽量不用手动拖拽控件的新式创建界面。

　　·多数情况不应定义元素尺寸

　　我们尽量通过设置元素位置来使得元素大小支持动态缩放

二、常用布局的使用

　　1、布局常用属性

　　　　

属性名称	属性描述
HorizontalAlignment	用于设置子元素在容器中的水平位置。 参数：Center、Left、Right、Stretch
VerticalAlignment	用于设置子元素在容器中的垂直位置。 参数：Center、Top、Bottom、Stretch
Margin	用于设置子元素在容器中的边距。 参数：4个方向的边距(左、上、右、下) 使用：可以同时设置4个边距，也可以单独设置每条边的边距
Height/Width MinHeight/MinWidth MaxHeight/MaxWidth	设置元素的基本尺寸，从上到下依次为：固定尺寸、最小尺寸、最大尺寸

　　2、布局的使用

（1）Canvas布局

属性名称	属性描述
Canvas.Right	设置元素距离容器右边界的距离
Canvas.Left	设置元素距离容器左边界的距离
Canvas.Top	设置元素距离容器上边界的距离
Canvas.Bottom	设置元素距离容器下边界的距离
注意：如果同时设置Canvas.Left="50" Canvas.Right="50",则以Canvas.Left="50"为准。如果同时设置Canvas.Top="50" Canvas.Bottom=50 则以Canvas.Top="50为准"。

 

Canvas是一个类似于坐标系的面板，所有的元素通过设置坐标来决定其在坐标系中的位置。

<!--MainWindow.xaml-->

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Canvas>
            <Button Content="按钮" Height="20" Width="40" Canvas.Left="50" Canvas.Top="50"/>
            <Button Content="按钮" Height="20" Width="40" Canvas.Right="50" Canvas.Top="50"/>
            <Button Content="按钮" Height="20" Width="40" Canvas.Left="50" Canvas.Bottom="50"/>
            <Button Content="按钮" Height="20" Width="40" Canvas.Right="50" Canvas.Bottom="50"/>
        </Canvas>
    </Grid>
</Window>

程序效果：

Canvas 的 Z 轴

当多个元素堆叠的时候，在同一个坐标点，如果想让某个控件显示在最顶端，Canvas 提供了一个 Canvas.Zindex 属性 可以指定Z轴顺序。

 

（2）StackPanel布局

StackPanel 将控件按照行或列来顺序排列，但不会换行。通过设置面板的Orientation属性设置了两种排列方式：横排(Horizontal)和竖排(Vertical)，默认为竖排。

 

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel Orientation="Horizontal">
            <Button VerticalAlignment="Bottom" Content="按钮1" Height="20" Width="40"/>
            <Button VerticalAlignment="Top" Content="按钮2" Height="20" Width="40"/>
            <Button Content="按钮3" Height="20" Width="40"/>
            <Button Content="按钮4" Height="20" Width="40"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal" FlowDirection="RightToLeft">
            <Button Content="按钮1" Height="20" Width="40"/>
            <Button Content="按钮2" Height="20" Width="40"/>
            <Button Content="按钮3" Height="20" Width="40"/>
            <Button Content="按钮4" Height="20" Width="40"/>
        </StackPanel>
        <StackPanel Orientation="Vertical">
            <Button Content="按钮1" Height="20" Width="40"/>
            <Button Content="按钮2" Height="20" Width="40"/>
            <Button Content="按钮3" Height="20" Width="40"/>
            <Button Content="按钮4" Height="20" Width="40"/>
            <Image x:Name="image" Height="100"/>
        </StackPanel>
        
    </Grid>
</Window>

程序效果：

注意：Orientation="Horizontal"时，设置FlowDirection属性为RightToLeft，则元素将从右向左排列。

 

 （3）DockPanel布局

DockPanel支持让元素简单地停靠在某个面板的某一条边上，然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间

使用四个属性值来控制他们的停靠：Top（上）、Bottom（下）、Left（左）、Right（右）。在DockPanel中写在最后的元素将填满剩余空间，除非DockPanel的LastChildFill属性为false。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <DockPanel>
            <Button Content="上" DockPanel.Dock="Top"></Button>
            <Button Content="下" DockPanel.Dock="Bottom"></Button>
            <Button Content="左" DockPanel.Dock="Left"></Button>
            <Button Content="右" DockPanel.Dock="Right"></Button>
        </DockPanel>
    </Grid>
</Window>

程序效果：

 

DockPanel的LastChildFill属性为false的情况：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <DockPanel LastChildFill="False">
            <Button Content="上" DockPanel.Dock="Top"></Button>
            <Button Content="下" DockPanel.Dock="Bottom"></Button>
            <Button Content="左" DockPanel.Dock="Left"></Button>
            <Button Content="右" DockPanel.Dock="Right"></Button>
        </DockPanel>
    </Grid>
</Window>

程序效果：

（4）WrapPanel布局

WrapPanel布局面板将各个空间从左至右按照行或列的顺序罗列，当长度和高度不够时就会自动换行，后续排序按照从上到下，从左至右的顺序进行。

Orientation属性决定元素排列方向其值为Vertical或Horizontal

 

Vertical:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <WrapPanel Orientation="Vertical">
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
        </WrapPanel>
    </Grid>
</Window>

程序效果：

 

Horizontal：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <WrapPanel Orientation="Horizontal">
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
            <Button Width="100" Height="40" Content="Button1"></Button>
        </WrapPanel>
    </Grid>
</Window>

程序效果：

（5）Grid（网格布局）

 Grid是最常用的动态布局控件，也是所有动态布局控件中唯一可按比例动态调整分配空间的控件。默认情况下，在WPF设计器中打开的每个新Window中都包含有一个Grid控件。

该控件很像网页中的表格，需要定义行、列，划分单元格坐标从（0，0）开始。常用属性如下

属性名称	属性描述
Height	指定Grid的高度，有两种写法 ①Height = "60"： 　　　　不加星号表示固定高度。 ②Height = "60*"： 　　　　加星号表示加权高度，在调整窗体大小时会按比例缩放。
Width	指定Grid的宽度，写法与Height属性一致。 ①Width= "60"： 　　　　不加星号表示固定高度。 ②Width= "60*"： 　　　　加星号表示加权高度，在调整窗体大小时会按比例缩放。
ColumnSpan	使子元素跨多列。例如：Grid.ColumnSpan="2" 表示跨两行
RowSpan	使子元素跨多行。例如：Grid.RowSpan="2"

 

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <!--划分为四行-->
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <!--划分为两列-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition>
            </ColumnDefinition>
            <ColumnDefinition>
            </ColumnDefinition>
        </Grid.ColumnDefinitions>
    </Grid>
</Window>

程序效果：

 

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <!--划分为四行-->
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <!--划分为两列-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition>
            </ColumnDefinition>
            <ColumnDefinition>
            </ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Grid.Column="1" Grid.Row="2" Content="Button1"></Button>
        <Button Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Content="Button2"></Button>
        <Button Grid.Column="0" Grid.Row="1" Grid.RowSpan="2" Content="Button1"></Button>
    </Grid>
</Window>

程序效果：