参考
环境
| 软件/系统 | 版本 | 说明 |
|---|---|---|
| Windows | Windows 10 专业版 22H2 19045.4046 | |
| Microsoft Visual Studio | Microsoft Visual Studio Community 2022 (64 位) - 17.6.5 | |
| Microsoft .Net SDK | 8.0.101 | 手动安装 |
| Microsoft .Net SDK | 7.0.306 | Microsoft Visual Studio 携带 |
| .net | 6.x | 创建当前文章演示 WPF 项目时指定 .net 版本所选择的框架 |
正文
StackPanel
Stack 堆栈面板是 XAML 中的一个简单且有用的布局面板。 在堆栈面板中，子元素可以根据方向属性水平或垂直排列在一行中。
-
水平 Orientation="Horizontal"
<StackPanel Orientation="Horizontal"> <Button x:Name = "button0" Content = "Button" Margin = "10" Width = "120" Height = "30" /> <Button x:Name = "button1" Content = "Button" Margin = "10" Width = "120" Height = "30" /> <Button x:Name = "button2" Content = "Button" Margin = "10" Width = "120" Height = "30" /> <Button x:Name = "button3" Content = "Button" Margin = "10" Width = "120" Height = "30" /> </StackPanel> -
垂直 Orientation="Vertical"
<StackPanel Orientation="Vertical"> <Button x:Name = "button0" Content = "Button" Margin = "10" Width = "120" Height = "30" /> <Button x:Name = "button1" Content = "Button" Margin = "10" Width = "120" Height = "30" /> <Button x:Name = "button2" Content = "Button" Margin = "10" Width = "120" Height = "30" /> <Button x:Name = "button3" Content = "Button" Margin = "10" Width = "120" Height = "30" /> </StackPanel> -
结合 ScrollViewer 实现超出自动添加滚动条
-
水平滚动条
<ScrollViewer HorizontalScrollBarVisibility="Auto"> <StackPanel Orientation="Horizontal"> <Button x:Name = "button0" Content = "Button" Margin = "10" Width = "120" Height = "30" /> <Button x:Name = "button1" Content = "Button" Margin = "10" Width = "120" Height = "30" /> <Button x:Name = "button2" Content = "Button" Margin = "10" Width = "120" Height = "30" /> <Button x:Name = "button3" Content = "Button" Margin = "10" Width = "120" Height = "30" /> <Button x:Name = "button4" Content = "Button" Margin = "10" Width = "120" Height = "30" /> <Button x:Name = "button5" Content = "Button" Margin = "10" Width = "120" Height = "30" /> <Button x:Name = "button6" Content = "Button" Margin = "10" Width = "120" Height = "30" /> </StackPanel> </ScrollViewer> -
垂直滚动条
<ScrollViewer HorizontalScrollBarVisibility="Auto"> <StackPanel Orientation="Vertical"> <Button x:Name = "button0" Content = "Button" Margin = "10" Width = "120" Height = "30" /> <Button x:Name = "button1" Content = "Button" Margin = "10" Width = "120" Height = "30" /> <Button x:Name = "button2" Content = "Button" Margin = "10" Width = "120" Height = "30" /> <Button x:Name = "button3" Content = "Button" Margin = "10" Width = "120" Height = "30" /> <Button x:Name = "button4" Content = "Button" Margin = "10" Width = "120" Height = "30" /> <Button x:Name = "button5" Content = "Button" Margin = "10" Width = "120" Height = "30" /> <Button x:Name = "button6" Content = "Button" Margin = "10" Width = "120" Height = "30" /> </StackPanel> </ScrollViewer>
-
WrapPanel
WrapPanel 环绕面板中，子元素根据方向属性按从左到右或从上到下的顺序排列。
-
上下 Orientation = "Vertical"
<WrapPanel Orientation = "Vertical"> <TextBlock Text = "Fist Name" Width = "60" Height = "20" Margin = "5" /> <TextBox Width = "200" Height = "20" Margin = "5" /> <TextBlock Text = "Last Name" Width = "60" Height = "20" Margin = "5" /> <TextBox Width = "200" Height = "20" Margin = "5"/> <TextBlock Text = "Age" Width = "60" Height = "20" Margin = "5" /> <TextBox Width = "60" Height = "20" Margin = "5" /> <TextBlock Text = "Title" Width = "60" Height = "20" Margin = "5" /> <TextBox Width = "200" Height = "20" Margin = "5" /> </WrapPanel> -
左右 Orientation = "Horizontal"
<WrapPanel Orientation = "Horizontal"> <TextBlock Text = "Fist Name" Width = "60" Height = "20" Margin = "5" /> <TextBox Width = "200" Height = "20" Margin = "5" /> <TextBlock Text = "Last Name" Width = "60" Height = "20" Margin = "5" /> <TextBox Width = "200" Height = "20" Margin = "5"/> <TextBlock Text = "Age" Width = "60" Height = "20" Margin = "5" /> <TextBox Width = "60" Height = "20" Margin = "5" /> <TextBlock Text = "Title" Width = "60" Height = "20" Margin = "5" /> <TextBox Width = "200" Height = "20" Margin = "5" /> </WrapPanel>
DockPanel
DockPanel 停靠面板定义一个区域，用于水平或垂直排列子元素的相对位置。 借助 DockPanel，您可以使用 Dock 属性轻松地将子元素停靠到顶部（DockPanel.Dock = "Top"）、底部（DockPanel.Dock = "Bottom"）、右侧（DockPanel.Dock = "Right"）、左侧（DockPanel.Dock = "Left"）和中心（DockPanel设置 LastChildFill = "False" 并且最后一个元素不指定 DockPanel.Dock ）。
-
最后一个子元素始终填充剩余空间 LastChildFill = "True"
<DockPanel LastChildFill = "True"> <Button Content = "Top" DockPanel.Dock = "Top" Click = "Click_Me" /> <Button Content = "Bottom" DockPanel.Dock = "Bottom" Click = "Click_Me" /> <Button Content = "Left" Click = "Click_Me" /> <Button Content = "Right" DockPanel.Dock = "Right" Click = "Click_Me" /> <Button Content = "Center" Click = "Click_Me" /> </DockPanel> -
最后一个子元素停靠到另一个方向，并且还必须为最后一个子元素指定显式停靠方向 LastChildFill = "False"
<DockPanel LastChildFill = "False"> <Button Content = "Top" DockPanel.Dock = "Top" Click = "Click_Me" /> <Button Content = "Bottom" DockPanel.Dock = "Bottom" Click = "Click_Me" /> <Button Content = "Left" Click = "Click_Me" /> <Button Content = "Right" DockPanel.Dock = "Right" Click = "Click_Me" /> <Button Content = "Center" DockPanel.Dock = "Right" Click = "Click_Me" /> </DockPanel>
Grid
Grid 网格面板提供了一个由行和列组成的灵活区域。 在网格中，子元素可以以表格形式排列。
-
3 行 2 列布局
<Grid x:Name = "FormLayoutGrid" Background = "AliceBlue"> <Grid.ColumnDefinitions> <ColumnDefinition Width = "Auto" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height = "*" /> <RowDefinition Height = "*" /> <RowDefinition Height = "*" /> </Grid.RowDefinitions> <TextBlock Grid.Row = "0" Grid.Column = "0" Text = "Name" Margin = "10" HorizontalAlignment = "Left" VerticalAlignment = "Center" Width = "100" /> <TextBox Grid.Row = "0" Grid.Column = "1" Margin = "10" /> <TextBlock Grid.Row = "1" Grid.Column = "0" Text = "ID" Margin = "10" HorizontalAlignment = "Left" VerticalAlignment = "Center" Width = "100" /> <TextBox Grid.Row = "1" Grid.Column = "1" Margin = "10" /> <TextBlock Grid.Row = "2" Grid.Column = "0" Text = "Age" Margin = "10" HorizontalAlignment = "Left" VerticalAlignment = "Center" Width = "100" /> <TextBox Grid.Row = "2" Grid.Column = "1" Margin = "10" /> </Grid>
Canvas
Canvas 画布面板是基本布局面板，可以使用相对于 Canvas 任何一侧（例如左、右、上、下）的坐标显式定位子元素。
<Canvas Height="400" Width="400">
<Canvas Height="100" Width="100" Top="0" Left="0" Background="Red"/>
<Canvas Height="100" Width="100" Top="100" Left="100" Background="Green"/>
<Canvas Height="100" Width="100" Top="50" Left="50" Background="Blue"/>
</Canvas>