10.WPF布局 - 实践

WPF 布局代码详细解析（带注释）

<!-- 主窗口定义 -->
  <Window
    x:Class="WPFNestingLayouts.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WPFNestingLayouts"
    mc:Ignorable="d"
    Title="MainWindow"
    Height="350"
    Width="604"> <!-- 窗口尺寸设置 -->
    <!-- 根布局：网格布局 -->
        <Grid Background="AntiqueWhite"> <!-- 设置整个网格背景为古董白 -->
        <!-- 行定义：5行等分高度 -->
          <Grid.RowDefinitions>
            <RowDefinition Height="*" /> <!-- 第1行：星号(*)表示等比分配剩余空间 -->
            <RowDefinition Height="*" /> <!-- 第2行 -->
            <RowDefinition Height="*" /> <!-- 第3行 -->
            <RowDefinition Height="*" /> <!-- 第4行 -->
            <RowDefinition Height="*" /> <!-- 第5行 -->
          </Grid.RowDefinitions>
          <!-- 列定义：单列占满宽度 -->
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*" /> <!-- 唯一列：宽度占满整个网格 -->
            </Grid.ColumnDefinitions>
            <!-- 标题标签（第1行） -->
              <Label
                Content="Employee Info"
                FontSize="15"
                FontWeight="Bold"
                Grid.Column="0"
                Grid.Row="0"/> <!-- 位于第0列第0行 -->
                <!-- 姓名输入区（第2行） -->
                  <StackPanel
                    Grid.Column="0"
                    Grid.Row="1"
                    Orientation="Horizontal"> <!-- 水平堆叠面板 -->
                      <Label Content="Name"
                      VerticalAlignment="Center" <!-- 垂直居中 -->
                      Width="70"/> <!-- 标签固定宽度 -->
                          <TextBox Name="txtName"
                          Text="Muhammad Moo"
                          VerticalAlignment="Center"
                          Width="200"> <!-- 文本框宽度200 -->
                        </TextBox>
                      </StackPanel>
                      <!-- ID输入区（第3行） -->
                        <StackPanel
                          Grid.Column="0"
                          Grid.Row="2"
                          Orientation="Horizontal">
                          <Label Content="ID"
                          VerticalAlignment="Center"
                          Width="70"/>
                          <TextBox Name="txtID" <!-- 注意：应命名为txtID更合理 -->
                          Text="421"
                          VerticalAlignment="Center"
                          Width="50"> <!-- 较窄的文本框 -->
                          </TextBox>
                        </StackPanel>
                        <!-- 年龄输入区（第4行） -->
                          <StackPanel
                            Grid.Column="0"
                            Grid.Row="3"
                            Orientation="Horizontal">
                            <Label Content="Age"
                            VerticalAlignment="Center"
                            Width="70"/>
                            <TextBox Name="txtAge" <!-- 应命名为txtAge -->
                            Text="32"
                            VerticalAlignment="Center"
                            Width="50"> <!-- 宽度与ID相同 -->
                            </TextBox>
                          </StackPanel>
                          <!-- 职位输入区（第5行） -->
                            <StackPanel
                              Grid.Column="0"
                              Grid.Row="4"
                              Orientation="Horizontal">
                              <Label Content="Title"
                              VerticalAlignment="Center"
                              Width="70"/>
                              <TextBox Name="txtTitle" <!-- 应命名为txtTitle -->
                              Text="Programmer"
                              VerticalAlignment="Center"
                              Width="200"> <!-- 宽度与姓名相同 -->
                              </TextBox>
                            </StackPanel>
                          </Grid>
                        </Window>

关键设计解析：

1. 网格布局结构：

   • 5行等高分配（Height=“*”），单列占满宽度
   • 每行放置一个水平StackPanel实现标签+文本框的组合

2. 嵌套布局技巧：

3. 控件设计特点：

   • 垂直居中：所有控件设置 VerticalAlignment="Center"
   • 宽度控制：
     • 标签统一宽度70（保证对齐）
     • 文本框分两种尺寸（50/200）
   • 默认值：预填充了示例数据

4. 需要修正的问题：

   • 命名不一致：建议修改为：
     • txtCity → txtID
     • txtState → txtAge
     • txtCountry → txtTitle
   • 属性拼写错误：VerticalMoognment 应为 VerticalAlignment

布局效果：

+-----------------------------------+
|         Employee Info (标题)       |  <- 第0行
+-----------------------------------+
| [Name]  [Muhammad Moo       ]     |  <- 第1行水平StackPanel
+-----------------------------------+
| [ID]    [421]                     |  <- 第2行
+-----------------------------------+
| [Age]   [32]                      |  <- 第3行
+-----------------------------------+
| [Title] [Programmer         ]     |  <- 第4行
+-----------------------------------+

优化建议：

1. 使用 Grid 替代 StackPanel 实现更精确的字段对齐
2. 添加 Margin 属性增加控件间距
3. 为必填字段添加验证逻辑
4. 使用 TextBlock + TextBox 组合代替纯文本框标签