WPF基本布局基础

一. Grid

描述 : Grid 是WPF中最常用的布局容器之一。它允许你通过定义行和列来创建一个灵活的网格布局。子元素可以放置在特定的行和列中，并且可以跨越多行或多列。
特点:
- 支持行和列的定义，可以设置行高和列宽。
- 支持子元素的绝对定位和相对定位。
- 适合复杂的布局需求。
常用属性RowDefinitions, ColumnDefinitions, Grid.Row, Grid.Column, Grid.RowSpan, Grid.ColumnSpan

作用：

RowDefinitions 和 ColumnDefinitions : 定义 Grid 的行和列。
Grid.Row 和 Grid.Column : 指定子元素在 Grid 中的位置。
Grid.RowSpan 和 Grid.ColumnSpan: 指定子元素跨越的行数或列数。

示例：

复制代码

    <Grid>
        <!-- 定义3行 -->
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/> <!-- 第一行高度为50 -->
            <RowDefinition Height="*"/>  <!-- 第二行高度为剩余空间 -->
            <RowDefinition Height="2*"/> <!-- 第三行高度为第二行的两倍 -->
        </Grid.RowDefinitions>

        <!-- 定义3列 -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/> <!-- 第一列宽度为100 -->
            <ColumnDefinition Width="*"/>   <!-- 第二列宽度为剩余空间 -->
            <ColumnDefinition Width="2*"/>  <!-- 第三列宽度为第二列的两倍 -->
        </Grid.ColumnDefinitions>

        <!-- 第一行第一列 -->
        <Border Background="Red" Grid.Row="0" Grid.Column="0" />

        <!-- 第一行第二列，跨越两列 -->
        <Border Background="Green" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2"/>

        <!-- 第二行第一列，跨越两行 -->
        <Border Background="Yellow" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"/>

        <!-- 第二行第二列 -->
        <Border Background="Blue" Grid.Row="1" Grid.Column="1"/>

        <!-- 第三行第三列 -->
        <Border Background="Black" Grid.Row="2" Grid.Column="2"/>

结果：

二. StackPanel

描述 : StackPanel是一个简单的布局容器，它将子元素按照水平或垂直方向依次排列。
特点:
- 子元素按照顺序排列，不会自动换行。
- 适合简单的线性布局。
常用属性 : Orientation（决定排列方向，Horizontal 或 Vertical）。

作用：

Horizontal: 子元素从左到右水平排列。
Vertical: 子元素从上到下垂直排列

示例：

（1）水平排列 (`Orientation="Horizontal"`)

当 Orientation 设置为 Horizontal 时，StackPanel 中的子元素会从左到右依次排列。

复制代码

<StackPanel Orientation="Horizontal">
    <Button Content="Button 1" Width="80" Height="30"/>
    <Button Content="Button 2" Width="80" Height="30"/>
    <Button Content="Button 3" Width="80" Height="30"/>
</StackPanel>

结果：

示例：

（2）垂直排列 (`Orientation="Vertical"`)

当 Orientation 设置为 Vertical 时，StackPanel 中的子元素会从上到下依次排列。

复制代码

<StackPanel Orientation="Vertical">
    <Button Content="Button 1" Width="80" Height="30"/>
    <Button Content="Button 2" Width="80" Height="30"/>
    <Button Content="Button 3" Width="80" Height="30"/>
</StackPanel>

结果：

示例：

（3）动态切换排列方向

可以通过绑定或代码动态改变 Orientation 的值，从而实现排列方向的动态切换。

复制代码

 xaml:

<StackPanel>
    <StackPanel Grid.Row="0" Grid.Column="0" x:Name="stackPanel" Orientation="Horizontal" >
        <Button Content="Button 1" Width="80" Height="30"/>
        <Button Content="Button 2" Width="80" Height="30"/>
        <Button Content="Button 3" Width="80" Height="30"/>
    </StackPanel>
        <Button  Content="转换" Click="ToggleOrientation" Margin="10"/>
</StackPanel>

C#:

 private void ToggleOrientation(object sender, RoutedEventArgs e)
 {
     if (stackPanel.Orientation == Orientation.Horizontal)
     {
         stackPanel.Orientation = Orientation.Vertical;
     }
     else
     {
         stackPanel.Orientation = Orientation.Horizontal;
     }
 }

结果：

三. `DockPanel`

描述 : DockPanel 允许子元素停靠在容器的边缘（上、下、左、右）或填充剩余空间。
特点:
- 子元素可以通过 DockPanel.Dock 属性指定停靠位置。
- 最后一个子元素可以填充剩余空间。
- 适合需要将控件停靠在窗口边缘的布局。
常用属性 : DockPanel.Dock。

示例：

`（1）DockPanel` 可以用于创建复杂的布局，例如带有标题栏、工具栏、状态栏和内容区域的窗口布局。

复制代码

    <DockPanel>
        <!-- 标题栏 -->
        <Border DockPanel.Dock="Top" Background="LightBlue" Height="30">
            <TextBlock Text="标题栏" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Border>

        <!-- 工具栏 -->
        <Border DockPanel.Dock="Top" Background="LightGreen" Height="30">
            <TextBlock Text="工具栏" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Border>

        <!-- 状态栏 -->
        <Border DockPanel.Dock="Bottom" Background="LightCoral" Height="30">
            <TextBlock Text="状态栏" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Border>

        <!-- 侧边栏 -->
        <Border DockPanel.Dock="Left" Background="LightYellow" Width="100">
            <TextBlock Text="侧边栏" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Border>

        <!-- 内容区域 -->
        <Border Background="LightGray">
            <TextBlock Text="内容区域" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Border>
    </DockPanel>

结果：

（2） `DockPanel.Dock` 将子元素停靠在不同的位置，并通过代码动态调整子元素的停靠位置。

复制代码

    <StackPanel>
        <DockPanel x:Name="dockPanel">
            <Button Content="顶部" DockPanel.Dock="Top" Height="50" Background="LightBlue"/>
            <Button Content="底部" DockPanel.Dock="Bottom" Height="50" Background="LightGreen"/>
            <Button Content="左边" DockPanel.Dock="Left" Width="100" Background="LightCoral"/>
            <Button Content="右边" DockPanel.Dock="Right" Width="100" Background="LightYellow"/>
            <Button Content="全充" Background="LightGray"/>
        </DockPanel>

        <Button Content="切换 Dock" Click="ToggleDock" Margin="10" Height="80" Width="150"/>
    </StackPanel>

        // 切换停靠位置的事件处理函数
        private void ToggleDock(object sender, RoutedEventArgs e)
        {
            var button = dockPanel.Children[0] as Button;
            if (button != null)
            {
                if (DockPanel.GetDock(button) == Dock.Top)
                {
                    DockPanel.SetDock(button, Dock.Bottom);
                }
                else
                {
                    DockPanel.SetDock(button, Dock.Top);
                }
            }
        }

四. WrapPanel

描述 : WrapPanel 将子元素按顺序排列，当空间不足时自动换行。
特点:
- 子元素按水平或垂直方向排列，并在空间不足时自动换行。
- 适合需要自动换行的布局。
常用属性 : Orientation（决定排列方向，Horizontal 或 Vertical）。

示例：

（1）水平排列 (`Orientation="Horizontal"`)

复制代码

<WrapPanel Orientation="Horizontal">
    <Button Content="Button 1" Width="100" Height="30" Margin="5"/>
    <Button Content="Button 2" Width="100" Height="30" Margin="5"/>
    <Button Content="Button 3" Width="100" Height="30" Margin="5"/>
    <Button Content="Button 4" Width="100" Height="30" Margin="5"/>
    <Button Content="Button 5" Width="100" Height="30" Margin="5"/>
    <Button Content="Button 6" Width="100" Height="30" Margin="5"/>
</WrapPanel>

结果：

（2）垂直排列 (`Orientation="Vertical"`)

复制代码

    <WrapPanel Orientation="Vertical" Margin="0,0,100,260">
        <Button Content="Button 1" Width="100" Height="30" Margin="5"/>
        <Button Content="Button 2" Width="100" Height="30" Margin="5"/>
        <Button Content="Button 3" Width="100" Height="30" Margin="5"/>
        <Button Content="Button 4" Width="100" Height="30" Margin="5"/>
        <Button Content="Button 5" Width="100" Height="30" Margin="5"/>
        <Button Content="Button 6" Width="100" Height="30" Margin="5"/>
    </WrapPanel>

结果：

（3）动态切换排列方向

复制代码

    <StackPanel>
        <!-- WrapPanel 用于演示排列方向 -->
        <WrapPanel x:Name="wrapPanel" Orientation="Horizontal" Margin="10">
            <Button Content="Button 1" Width="100" Height="30" Margin="5"/>
            <Button Content="Button 2" Width="100" Height="30" Margin="5"/>
            <Button Content="Button 3" Width="100" Height="30" Margin="5"/>
            <Button Content="Button 4" Width="100" Height="30" Margin="5"/>
            <Button Content="Button 5" Width="100" Height="30" Margin="5"/>
            <Button Content="Button 6" Width="100" Height="30" Margin="5"/>
        </WrapPanel>

        <!-- 切换排列方向的按钮 -->
        <Button Content="切换排列方向" Click="ToggleOrientation" Margin="10"/>
    </StackPanel>

        private void ToggleOrientation(object sender, RoutedEventArgs e)
        {
            if (wrapPanel.Orientation == Orientation.Horizontal)
            {
                wrapPanel.Orientation = Orientation.Vertical;
            }
            else
            {
                wrapPanel.Orientation = Orientation.Horizontal;
            }
        }

结果：

五. Canvas

描述 : Canvas是一个绝对定位的布局容器，子元素通过指定相对于Canvas左上角的坐标来定位。
特点:
- 子元素通过 Canvas.Left, Canvas.Top, Canvas.Right, Canvas.Bottom 属性进行绝对定位。
- 适合需要精确控制元素位置的布局。
常用属性 : Canvas.Left, Canvas.Top, Canvas.Right, Canvas.Bottom。

示例：

Canvas.Left : 指定子元素左边缘与 Canvas 左边缘的距离。

Canvas.Top : 指定子元素上边缘与 Canvas 上边缘的距离。

Canvas.Right : 指定子元素右边缘与 Canvas 右边缘的距离。

Canvas.Bottom : 指定子元素下边缘与 Canvas 下边缘的距离。

这些属性可以单独使用，也可以组合使用，以实现精确的定位。

复制代码

    <Canvas Width="300" Height="200" Background="LightGray" Margin="150,122,150,123">
        <!-- 定位左上角从 (0, 0) 开始 -->
        <Button Content="Button 1" Canvas.Left="0" Canvas.Top="0" Width="80" Height="30"/>

        <!-- 定位左上角从 中心点(150, 100) 开始 -->
        <Button Content="Button 2" Canvas.Left="150" Canvas.Top="100" Width="80" Height="30"/>
        
        <!-- 定位右下角从 (0, 0) 开始 -->
        <Button Content="Button 3" Canvas.Right="0" Canvas.Bottom="0" Width="80" Height="30"/>
    </Canvas>

结果：

六. UniformGrid

描述 : UniformGrid 是一个简单的网格布局容器，所有单元格的大小相同。
特点:
- 所有行和列的大小相同。
- 适合需要均匀分布的布局。
常用属性 : Rows, Columns。

示例：

(1)使用 `Rows` 和 `Columns` 定义一个 2 行 3 列的 `UniformGrid`

复制代码

<UniformGrid Rows="2" Columns="3">
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
    <Button Content="Button 3"/>
    <Button Content="Button 4"/>
    <Button Content="Button 5"/>
    <Button Content="Button 6"/>
</UniformGrid>

结果：

(2)动态设置行数和列数

复制代码

    <StackPanel>
        <!-- UniformGrid 用于演示布局 -->
        <UniformGrid x:Name="uniformGrid" Rows="2" Columns="3">
            <Button Content="Button 1"/>
            <Button Content="Button 2"/>
            <Button Content="Button 3"/>
            <Button Content="Button 4"/>
            <Button Content="Button 5"/>
            <Button Content="Button 6"/>
        </UniformGrid>

        <!-- 动态设置行数和列数的按钮 -->
        <Button Content="改变布局" Click="ChangeLayout" Margin="10"/>
    </StackPanel>

        private void ChangeLayout(object sender, RoutedEventArgs e)
        {
            if (uniformGrid.Rows == 2 && uniformGrid.Columns == 3)
            {
                uniformGrid.Rows = 3;
                uniformGrid.Columns = 2;
            }
            else
            {
                uniformGrid.Rows = 2;
                uniformGrid.Columns = 3;
            }
        }

结果：

(3) 结合其他布局容器

UniformGrid 可以与其他布局容器（如 StackPanel、DockPanel 等）结合使用，以实现更复杂的布局。

复制代码

<DockPanel>
    <!-- 标题栏 -->
    <Border DockPanel.Dock="Top" Background="LightBlue" Height="30">
        <TextBlock Text="标题栏" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Border>

    <!-- 内容区域 -->
    <UniformGrid Rows="2" Columns="2">
        <Button Content="Button 1"/>
        <Button Content="Button 2"/>
        <Button Content="Button 3"/>
        <Button Content="Button 4"/>
    </UniformGrid>
</DockPanel>

结果：

WPF基本布局基础

一. Grid

二. StackPanel

（1）水平排列 (Orientation="Horizontal")

（2） 垂直排列 (Orientation="Vertical")

（3）动态切换排列方向

三. DockPanel

（1）DockPanel 可以用于创建复杂的布局，例如带有标题栏、工具栏、状态栏和内容区域的窗口布局。

（2） DockPanel.Dock 将子元素停靠在不同的位置，并通过代码动态调整子元素的停靠位置。

四. WrapPanel

（1）水平排列 (Orientation="Horizontal")

（2）垂直排列 (Orientation="Vertical")

（3）动态切换排列方向

五. Canvas

六. UniformGrid

(1)使用 Rows 和 Columns 定义一个 2 行 3 列的 UniformGrid

(2)动态设置行数和列数

（1）水平排列 (`Orientation="Horizontal"`)

（2）垂直排列 (`Orientation="Vertical"`)

三. `DockPanel`

`（1）DockPanel` 可以用于创建复杂的布局，例如带有标题栏、工具栏、状态栏和内容区域的窗口布局。

（2） `DockPanel.Dock` 将子元素停靠在不同的位置，并通过代码动态调整子元素的停靠位置。

（1）水平排列 (`Orientation="Horizontal"`)

（2）垂直排列 (`Orientation="Vertical"`)

(1)使用 `Rows` 和 `Columns` 定义一个 2 行 3 列的 `UniformGrid`