【WPF】布局基础-6种常见布局容器

在 WPF (Windows Presentation Foundation) 中，容器是用于布局和组织用户界面元素的重要组件。不同的容器提供不同的布局和排列方式，以满足不同的设计需求。

创建项目：在vs 2022中，创建新项目---->WPF应用 (. NET Framework)

1.Grid（网络）

Grid 是一个多行多列的网格，用于将控件按行和列进行布局。可以定义行和列的大小，以及控件如何跨越多个行和列。
优缺点：

• 提供了高度灵活的布局选项，可用于复杂的界面设计。控制单元格的大小和控件的位置。

• 在复杂布局中，可能需要更多的 XAML 代码。不适合逐行或逐列的动态数据绑定。

   Grid.RowDefinitions 和 Grid.ColumnDefinitions
    是 Grid 控件的属性，用于定义网格的行和列。
  

<Grid>
	<Grid.RowDefinitions>
	    <RowDefinition />
	    <RowDefinition  Height = "2*" />
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
	    <ColumnDefinition Width="2*" />
	    <ColumnDefinition />
	</Grid.ColumnDefinitions>
	
	<Border Grid.Column = "1" Background = "red" />
	<Border Grid.Row = "1" Background = "yellow" />
	<Border Grid.Row = "1" Grid.Column = "1" Background = "Blue" />
	<Border Background = "Green" />
	<Button Width = "100" Height = "50" Background="Black" />
<Grid/>

2. StackPanel (堆叠面板)

StackPanel 将其子元素按照水平或垂直堆叠排列。子元素依次排列，沿着一个轴。

• 简单而轻量，易于使用。适用于按顺序排列的控件。

• 不适合复杂的自定义布局。子元素在一行或一列上不具备灵活性。

3. WrapPanel (换行面板)

WrapPanel 按照顺序排列子元素，并在需要时自动换行。适用于按顺序排列的子元素，当空间不足时自动换行。

• 简化了界面设计，适用于流式布局。适用于动态数据的排列。
• 子元素可能难以精确控制位置。

 <StackPanel Orientation = "Horizontal" >
            <Button Width = "100" Height = "40" />
            <Button Width = "100" Height = "40" />
            <Button Width = "100" Height = "40" />
            <Button Width = "100" Height = "40" />
            <Button Width = "100" Height = "40" />
            <Button Width = "100" Height = "40" />
        </StackPanel>

        <WrapPanel Grid.Row = "1" Orientation = "Horizontal" >
            <Button Width = "100" Height = "40" />
            <Button Width = "100" Height = "40" />
            <Button Width = "100" Height = "40" />
            <Button Width = "100" Height = "40" />
            <Button Width = "100" Height = "40" />
            <Button Width = "100" Height = "40" />
            <Button Width = "100" Height = "40" />
            <Button Width = "100" Height = "40" />
            <Button Width = "100" Height = "40" />
        </WrapPanel>

4. DockPanel (停靠面板)

DockPanel 允许子元素停靠在其四个边缘：上、下、左、右，以及在中间。子元素按照停靠属性的指定位置排列。

• 用于创建具有简单停靠布局的界面。简单的 XAML 和易于理解。
• 不适用于复杂的自定义布局。难以实现复杂的相对定位。

<DockPanel >
    <Button Width = "100" Height = "40" DockPanel.Dock = "Left" />
    <Button Width = "100" Height = "40" DockPanel.Dock = "Top" />
    <Button Width = "100" Height = "40" DockPanel.Dock = "Right" />
    <Button Width = "100" Height = "40" DockPanel.Dock = "Bottom" />
    <Button Width = "100" Height = "40" />
</DockPanel>

5. UniformGrid容器

 <UniformGrid Columns = "3" Rows = "3" >
     <Button/>
     <Button/>
     <Button/>
     <Button/>
     <Button/>
     <Button/>
     <Button/>
     <Button/>
     <Button/>
 </UniformGrid>

6. Canvas画布

Canvas 允许在自由坐标上放置子元素。子元素的位置和大小可以精确控制。

• 提供了绝对定位的能力，适用于自定义和绘图应用程序。控制子元素的位置和大小。

• 不支持自动布局，不适用于响应式布局。需要手动处理子元素的重叠问题。

<Grid>
        <Label Content="用户名：" HorizontalAlignment="Left" Height="24" Margin="23,26,0,0" VerticalAlignment="Top" Width="58"/>
        <PasswordBox HorizontalAlignment="Left" Height="24" Margin="101,26,0,0"  VerticalAlignment="Top" Width="133"/>
        <Label Content="密码：" HorizontalAlignment="Left" Height="24" Margin="36,79,0,0" VerticalAlignment="Top" Width="58"/>
        <PasswordBox  HorizontalAlignment="Left" Height="24" Margin="101,79,0,0" VerticalAlignment="Top" Width="133"/>
        <Button Content="登录" HorizontalAlignment="Left" Height="25" Margin="101,131,0,0" VerticalAlignment="Top" Width="60"/>
        <Button Content="取消" HorizontalAlignment="Left" Height="25" Margin="174,131,0,0" VerticalAlignment="Top" Width="60"/>
 </Grid>