10.WPF布局 - 实践

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

<!-- 主窗口定义 --><Windowx: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行） --><LabelContent="Employee Info"FontSize="15"FontWeight="Bold"Grid.Column="0"Grid.Row="0"/> <!-- 位于第0列第0行 --><!-- 姓名输入区（第2行） --><StackPanelGrid.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行） --><StackPanelGrid.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行） --><StackPanelGrid.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行） --><StackPanelGrid.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 组合代替纯文本框标签