WPF 布局

时间:2023-11-28 16:28:38

WPF布局原则

WPF窗口只能包含单个元素,为在WPF窗口中放置多个元素并创建更贴近使用的用户界面,需要在窗口上放置一个容器,然后在这个容器中添加其他元素

遵循以下几条重要原则

不应显式设定元素(如控件)的尺寸,元素应该可以改变尺寸以适合他们的内容。如:当添加更多的文本时按钮应当能够扩展。可通过设置最大和最小尺寸来限制可以接受的控件尺寸范围

不应使用屏幕坐标指定元素的位置。元素应当由他们的容器根据它们的尺寸,顺序以及(可选的)其他特定于具体布局容器的信息进行排列。如果需要在元素之前添加空白间,可使用Margin属性

布局容器的子元素“共享”可用空间,如果空间允许,布局容器会根据每个元素的内容尽可能为元素设置更合理的尺寸,它们还会向一个或多个子元素分配多余空间。

可嵌套的布局容器。Grid面板可包含其他布局容器,包含的这些容器以更小的分组排列元素

布局过程

WPF布局包括两个阶段,测量阶段和排列阶段

在测量阶段,容器遍历所有子元素,并询问子元素它们所期望的尺寸。

在排列阶段,容器在合适的位置放置子元素

布局容器

WPF 布局

WPF 布局

核心布局面板

WPF 布局

StackPanel面板进行简单布局

该面板简单地在单行或单列中以堆栈形式放置子元素

<Window x:Class="WpfApp2.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:WpfApp2"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<StackPanel>
<Label>
A Button Stack
</Label>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
<Button>Button 4</Button>
</StackPanel>
</Window>

WPF 布局

默认情况下,StackPanel面板按自上而下的顺序排列元素,使每个元素的高度适合它的内容

设置Orientation属性,面板也可用于水平排列元素,这样做可能导致一些元素不适应

WPF 布局

实际上布局面板支持一小组布局属性

WPF 布局

<Label HorizontalAlignment="Center">
A Button Stack
</Label>
<Label HorizontalAlignment="Left">
A Button Stack
</Label>
<Label HorizontalAlignment="Right">
A Button Stack
</Label>
<Label HorizontalAlignment="Stretch">
A Button Stack
</Label>

Stretch不同之处

 WPF 布局

WPF 布局

同理:

WPF 布局

WPF 布局

<Button Margin="10">Button 1</Button>

WPF 布局

WPF 布局

边距

WPF 布局

WPF 布局

WPF 布局

Border空间

Border类只能包含一段嵌套内容(通常是布局面板)

WPF 布局

<Border Margin="5" Padding="5" Background="LightYellow" BorderBrush="SteelBlue" BorderThickness="3,5,3,5" CornerRadius="3" VerticalAlignment="top">
<StackPanel>
<Button Margin="3">
One
</Button>
</StackPanel>
</Border>

WPF 布局

BorderThickness="3,5,3,5"表示蓝色的边框厚度

WrapPanel面板

WrapPanel面板在可能的空间中,以一次一行或一列的方式布置控件,默认情况下WrapPanel.Orientation属性为Horizontal,控件从左向右排列,Vertical同上

WPF 布局

<WrapPanel Margin="3">
<Button VerticalAlignment="Top">Top Button</Button>
<Button MinHeight="60">Tall Button 2</Button>
<Button VerticalAlignment="Bottom">Bottom Button</Button>
<Button>Stretch Button</Button>
<Button VerticalAlignment="Center">Centered Button</Button>
</WrapPanel>

WPF 布局

DockPanel面板

WPF 布局

WPF 布局

<DockPanel LastChildFill="True">
<Button DockPanel.Dock="Top">Top Button</Button>
<Button DockPanel.Dock="Bottom">Bottom Button</Button>
<Button DockPanel.Dock="Left">Left Button</Button>
<Button DockPanel.Dock="Right">Right Button</Button>
<Button>Remaining Space</Button>
</DockPanel>

WPF 布局

Grid面板

WPF 布局

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

WPF 布局

WPF 布局

调整行和列

Grid面板支持一下三种设置尺寸模式

绝对设置尺寸方式

自动设置尺寸方式。每行和每列的尺寸刚好满足需要

按比例设置尺寸方式。按比例分割每一行每一列

WPF 布局

WPF 布局

布局舍入

比如有175个像素,分成两部分,而这两部分没办法细分

WPF 布局

跨行和列

可以使用RowSpan和ColumnSpan这两个属性

WPF 布局

分割窗口

WPF 布局

WPF 布局

WPF 布局

<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition MinWidth="50"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Margin="3">Left</Button>
<Button Grid.Row="0" Grid.Column="2" Margin="3">Right</Button>
<Button Grid.Row="1" Grid.Column="0" Margin="3">Left</Button>
<Button Grid.Row="1" Grid.Column="2" Margin="3">Right</Button>
<GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center" ShowsPreview="False"></GridSplitter>
</Grid>

WPF 布局

共享尺寸组

WPF 布局

UniformGrid面板

<UniformGrid Rows="2" Columns="2">
<Button>Top Left</Button>
<Button>Top Right</Button>
</UniformGrid>

Canvas面板

需要设置Canvas.Left和Canvas.Top附加属性

WPF 布局

ZIndex

可以通过这个函数来提高层次级别,因为具有更高ZIndex值的元素始终显示在ZIndex的元素上面

WPF 布局

InkCanvas

主要用于手写笔输入

WPF 布局

WPF 布局