WPF中布局利器元素使用-DockPanel的使用

为什么要使用布局元素

在WPF中，布局控件用于定义和管理UI元素的位置和大小。这些布局控件使得开发者能够灵活地创建各种用户界面布局。

#### wpf的中布局利器-DockPanel

1. **DockPanel的停靠布局**

   - **特点**：每个子元素可以使用 `DockPanel.Dock` 属性来指定其停靠位置。

   - **基本用法**：在 XAML 中，你可以通过 `<DockPanel>` 标签来定义一个 `DockPanel`。

   - **属性**：可选的值包括 `Top`、`Bottom`、`Left`、`Right` 和 `Center`。

     #### 示例代码

         <DockPanel>
             <!--停靠在顶部-->
                 <Button Content="Top" DockPanel.Dock="Top" Height="30" Background="LightBlue"/>
             <!-- 停靠在底部的按钮 -->
             <Button Content="Bottom" DockPanel.Dock="Bottom" Height="30" Background="LightGreen"/>
             <!-- 停靠在左侧的按钮 -->
             <Button Content="Left" DockPanel.Dock="Left" Width="100" Background="LightCoral"/>
             <!-- 停靠在右侧的按钮 -->
             <Button Content="Right" DockPanel.Dock="Right" Width="100" Background="LightGoldenrodYellow"/>
             <!-- 居中的内容 -->
             <TextBlock Text="Centered Content" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10"/>
         </DockPanel>

#### 代码效果

为什么我们不用居中控件的时候，右侧的这个right会中间。这个和dockpanel的停靠规则有关系：

### 他是按照子元素在xaml中的顺序进行布局，先定义的元素会先被停靠，后定义元素会占据剩余空间。

我们来做个例子

    <DockPanel>
        <!-- 停靠在底部的按钮 -->
        <Button Content="Bottom" DockPanel.Dock="Bottom" Height="300"  Background="LightGreen"/>
        <!-- 停靠在右侧的按钮 -->
        <Button Content="Right" DockPanel.Dock="Right"   Background="LightGoldenrodYellow"/>
    </DockPanel>

- # 一个小作业

  > [!IMPORTANT]
  >
  > 如果你会用gird进行和列的操作，就请把上面登录左则的那种图片放在左侧，做一个一行一列的grid。是否能把这个dockpanel与gird一起使用呢，你们可以试一下。