WPF布局

所有WPF的布局容器控件都是派生自抽象基类System.Windows.Controls.Panel,该类具有一些基本的布局成员。在WPF中，有抽象基类panels派生了如下几个布局的面板类。

一，StackPanel 栈面板

按照行或列来顺序排列，但不会换行
排列方式：默认垂直排列(vertical),水平排列（Horizontal）

垂直排列(vertial)默认排列

<Window x:Class="WPF面板.MainWindow" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="https://schemas.microsoft.com/expression/blend/2008" xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WPF面板" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <StackPanel> <Button Content="按钮1"></Button> <Button Content="按钮2"></Button> <Button Content="按钮3"></Button> <Button Content="按钮4"></Button> <Button></Button> </StackPanel> </Window> 

水平排列(Horizontal) 默认靠左

<StackPanel Name="stackpanel1" Orientation="Horizontal"> <Button Content="Button1"></Button> <Button Content="Button2"></Button> <Button Content="Button3"></Button> </StackPanel> 

水平排序(Horizontal) 设置靠右( FlowDirection=“RightToLeft”)

 <StackPanel Name="stackpanel3" Orientation="Horizontal" FlowDirection="RightToLeft"> <Button Content="Button7"></Button> <Button Content="Button8"></Button> <Button Content="Button9"></Button> </StackPanel> 

二，WrapPanel 环绕面板

WrapPanel布局面板将各个控件按照一定方向罗列，当长度或高度不够时自动调整进行换行换列。
Orientation=“Horizontal” 时各控件从左至右罗列，当面板长度不够时，子控件就会自动换行，继续按照从左至右的顺序排列。
Orientation=“Vertical” 时各控件从上至下罗列，当面板高度不够时，子控件就会自动换列，继续按照从上至下的顺序排列。
默认水平排列(Horizontal)

<Window x:Class="WPF面板.MainWindow" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="https://schemas.microsoft.com/expression/blend/2008" xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WPF面板" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <WrapPanel Orientation="Horizontal"> <Button Content="Button 150" Width="150"></Button> <Button Content="Button 200" Width="200"></Button> <Button Content="Button 150" Width="150"></Button> <Button Content="Button 200" Width="200"></Button> <Button Content="Button 150" Width="150"></Button> <Button Content="Button 200" Width="200"></Button> <Button Content="Button 150" Width="150"></Button> </WrapPanel> </Window> 

三，DockPanel 停靠面板

DockPanel支持让元素简单地停靠在整个面板的某一条边上，然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间。
DockPanel有一个Dock附加属性，因此子元素用4个值来控制她们的停靠：Left、Top、Right、Bottom。Dock没有Fill值。作为替代，最后的子元素将加入一个DockPanel并填满所有剩余的空间，除非DockPanel的LastChildFill属性为false，它将朝某个方向停靠。

<Window x:Class="WPF面板.MainWindow" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="https://schemas.microsoft.com/expression/blend/2008" xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WPF面板" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <DockPanel> <Button Content="上" DockPanel.Dock="Left" Background="DarkKhaki"></Button> <Button Content="下" DockPanel.Dock="Bottom" Background="Beige"></Button> <Button Content="左" DockPanel.Dock="Left" Background="Aqua"></Button> <Button Content="右" DockPanel.Dock="Right" Background="red"></Button> </DockPanel> </Window> 

设置LastChildFill属性为false

 <DockPanel LastChildFill="False"> <Button Content="上" DockPanel.Dock="Left" Background="DarkKhaki"></Button> <Button Content="下" DockPanel.Dock="Bottom" Background="Beige"></Button> <Button Content="左" DockPanel.Dock="Left" Background="Aqua"></Button> <Button Content="右" DockPanel.Dock="Right" Background="red"></Button> </DockPanel> 

四，Canvas 画布

Canvas是一个类似于坐标系的面板，所有的元素通过设置坐标来决定其在坐标系中的位置。具体表现为使用Left、Top、Right、 Bottom附加属性在Canvas中定位控件。

<Window x:Class="WPF面板.MainWindow" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="https://schemas.microsoft.com/expression/blend/2008" xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WPF面板" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Canvas> <Button Canvas.Left="50" Canvas.Top="50" Content="Button 1"></Button> <Button Canvas.Right="50" Canvas.Top="50" Content="Button 2"></Button> <Button Canvas.Left="50" Canvas.Bottom="50" Content="Button 3"></Button> <Button Canvas.Right="50" Canvas.Bottom="50" Content="Button 4"></Button> </Canvas> </Window> 

五，Grid 网格面板

Grid.RowDefinitions 行数
Grid.ColumnDefinitions 列数
Grid.Column=“行数” 第几行(索引数)
Grid.Row=“列数” 第几列(索引数)
Grid.RowSpan=“行数” 合并行数(跨行数)
Grid.ColumnSpan=“列数” 合并列数(跨列数)

系统登录界面Demo

<Window x:Class="StudentManage.FrmLogin" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="https://schemas.microsoft.com/expression/blend/2008" xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:StudentManage" mc:Ignorable="d" Title="登录" Height="450" Width="600" WindowStartupLocation="CenterScreen" WindowStyle="None" ResizeMode="NoResize" Icon="/img/ico/deng.ico"> <Grid> <Grid.Background> <ImageBrush ImageSource="img/bg/log.png" ></ImageBrush> </Grid.Background> <!--行--> <Grid.RowDefinitions> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="170"></RowDefinition> <RowDefinition Height="40"></RowDefinition> <RowDefinition Height="40"></RowDefinition> <RowDefinition Height="40"></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <!--列--> <Grid.ColumnDefinitions> <ColumnDefinition Width="150"></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition Width="90"></ColumnDefinition> <ColumnDefinition Width="30"></ColumnDefinition> <ColumnDefinition Width="30"></ColumnDefinition> </Grid.ColumnDefinitions> <!--关闭--> <Button Name="btnClose" Grid.Column="4" Background="Transparent" BorderThickness="0" Click="btnClose_Click"> <Label Content="×" FontSize="30" Foreground="Cyan" Margin="0,-8,0,0" Padding="0,0,0,0"></Label> </Button> <!--最小化--> <Button Name="btnMin" Grid.Column="3" Background="Transparent" BorderThickness="0" Click="btnMin_Click"> <Label Content="▁" FontSize="30" Foreground="Cyan" Margin="0,-30,0,0" Padding="0,0,0,0"></Label> </Button> <!--账号--> <DockPanel Grid.Column="1" Grid.Row="2"> <Label Content="登录账号:" Foreground="Cyan" FontSize="18" VerticalContentAlignment="Center"></Label> <TextBox x:Name="txtLogID" Height="30" FontSize="24" VerticalAlignment="Center"></TextBox> </DockPanel> <!--密码--> <DockPanel Grid.Column="1" Grid.Row="3"> <Label Content="登录密码:" Foreground="Cyan" FontSize="18" VerticalContentAlignment="Center"></Label> <PasswordBox x:Name="txtLogPwd" Height="30" FontSize="24" VerticalAlignment="Center"></PasswordBox> </DockPanel> <DockPanel Grid.Column="1" Grid.Row="4" LastChildFill="False"> <Border Width="20"></Border> <!--登录--> <Button x:Name="btnLoin" Background="#34A6C3" IsDefault="true" BorderThickness="0" Content="登录" FontSize="18" Width="100" DockPanel.Dock="Left" Height="30" Click="btnLoin_Click"></Button> <Border Width="20" DockPanel.Dock="Right"></Border> <!--退出--> <Button x:Name="btnExit" Background="#34A6C3" BorderThickness="0" Content="退出" FontSize="18" Width="100" DockPanel.Dock="Right" Height="30" Click="btnClose_Click"></Button> </DockPanel> </Grid> </Window> 

还有别的WPF布局，本文章只介绍了常用的五种布局
文章参考https://www.cnblogs.com/laizhenghong2012/p/8832562.html