WPF 布局容器（图）

参考

• .NET API browser
• WPF - 布局

环境

软件/系统	版本	说明
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 版本所选择的框架

• MainWindow.xaml
  当前项目名为布局

  <Window
  x:Class="布局.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:local="clr-namespace:布局"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  Title="MainWindow"
  Width="800"
  Height="650         "
  mc:Ignorable="d">
  <Grid>
  
  </Grid>
  </Window>
  

正文

StackPanel

Stack 堆栈面板是 XAML 中的一个简单且有用的布局面板。 在堆栈面板中，子元素可以根据方向属性水平或垂直排列在一行中。

1. 水平 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>
   

2. 垂直 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>
   

3. 结合 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 环绕面板中，子元素根据方向属性按从左到右或从上到下的顺序排列。

1. 上下 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>
   

2. 左右 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 ）。

1. 最后一个子元素始终填充剩余空间 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> 
   

2. 最后一个子元素停靠到另一个方向，并且还必须为最后一个子元素指定显式停靠方向 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>