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. 嵌套布局技巧：

   Grid 根布局 第0行 Label标题 第1行 StackPanel 第2行 StackPanel 第3行 StackPanel 第4行 StackPanel Label + TextBox Label + TextBox

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 组合代替纯文本框标签