WPF 容器布局与对齐约束

参考：WPF 容器布局与对齐约束学习笔记_wpf grid 宽高4对齐-CSDN博客

一、界面示例

效果：

XAML：

<UserControl x:Class="BodorThinkerCamParamEditer.Test"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:BodorThinkerCamParamEditer"
             xmlns:ui="clr-namespace:CamParamEditer.Resources"
             xmlns:vm="clr-namespace:BodorThinkerCamParamEditer.viewModel"
             mc:Ignorable="d" 
             d:DataContext="{d:DesignInstance vm:CamParamEditerViewModel}"
             d:DesignHeight="480" d:DesignWidth="800" Height="480" >
    <UserControl.Resources>
        <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Label}">
            <Border x:Name="Border" Width="120" Height="30"  BorderBrush="Transparent" BorderThickness="2">
            </Border>
        </ControlTemplate>

        <Style TargetType="{x:Type ui:TxtMouseEnterLeave}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ui:TxtMouseEnterLeave}">
                        <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Border BorderBrush="{StaticResource NormalBorderBrush}" BorderThickness="1,1,0,0">
        <Grid Background="{StaticResource PageDeepBackground}">
            <Grid.Resources>
                <ui:BoolIntConverter x:Key="BoolIntConverter"/>
                <ui:DoubleNumericRangeConverter x:Key="DoubleCheckConverter"/>
                <ui:IntNumericRangeConverter x:Key="IntCheckConverter"/>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition Height="35"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="auto"></RowDefinition>
                <RowDefinition Height="auto"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid Grid.Row="0">
                <StackPanel Background="{StaticResource PanelDeepBackground}">
                    <Label Content="参数配置" FontSize="18" FontWeight="Bold" Margin="10,2,0,2" Foreground="{StaticResource NormalForeground}" />
                </StackPanel>
            </Grid>
            <Grid Grid.Row="1">
                <StackPanel Height="auto"  VerticalAlignment="Top" HorizontalAlignment="Left">
                    <GroupBox Header="Cam颜色参数配置" HorizontalAlignment="Left" Height="auto" Margin="10,10,0,0" VerticalAlignment="Top" Width="auto">
                        <StackPanel>
                            <WrapPanel Margin="5" >
                                <Label x:Name="BottomFrameColorLabel" Content="底部框颜色" Width="160" HorizontalContentAlignment="Right"  />
                                <TextBox x:Name="BottomFrameColorTextbox" Text="{Binding BottomFrameColor}" IsReadOnly="True" Width="120" TextChanged="BottomFrameColorTextboxTextChanged" HorizontalContentAlignment="Center" />
                                <ui:TxtMouseEnterLeave x:Name="BottomFrameColorUiTxt" Width="120" Height="30" Margin="20,0,0,0" MouseDoubleClick="BottomFrameColorMouseDoubleClick" />
                            </WrapPanel>
                            <WrapPanel Margin="5" >
                                <Label x:Name="CrosshairColorLabel" Content="十字线颜色" Width="160" HorizontalContentAlignment="Right"  />
                                <TextBox x:Name="CrosshairColorTextbox" Text="{Binding CrosshairColor}" IsReadOnly="True" Width="120" TextChanged="CrosshairColorTextboxTextChanged" HorizontalContentAlignment="Center" />
                                <ui:TxtMouseEnterLeave x:Name="CrosshairColorUiTxt" Width="120" Height="30" Margin="20,0,0,0" MouseDoubleClick="CrosshairColorMouseDoubleClick" />
                            </WrapPanel>
                            <WrapPanel Margin="5" >
                                <Label x:Name="MicroLinkColorLabel" Content="微连颜色" Width="160" HorizontalContentAlignment="Right"  />
                                <TextBox x:Name="MicroLinkColorTextbox" Text="{Binding MicroLinkColor}" IsReadOnly="True" Width="120" TextChanged="MicroLinkColorTextboxTextChanged" HorizontalContentAlignment="Center" />
                                <ui:TxtMouseEnterLeave x:Name="MicroLinkColorUiTxt" Width="120" Height="30" Margin="20,0,0,0" MouseDoubleClick="MicroLinkColorMouseDoubleClick" />
                            </WrapPanel>
                            <WrapPanel Margin="5" >
                                <Label x:Name="ToolLayerColorLabel" Content="图层颜色" Width="160" HorizontalContentAlignment="Right"  />
                                <ComboBox x:Name="ToolLayerColorCombo" SelectedIndex="0"  Width="120" HorizontalContentAlignment="Center" SelectionChanged="ChangeText">
                                    <ComboBox.ItemsSource>
                                        <Binding Path="ToolLayerColorName" />
                                    </ComboBox.ItemsSource>
                                </ComboBox>
                                <TextBox x:Name="ToolLayerColorTextbox" IsReadOnly="True"  Margin="20,0,0,0" Width="120" TextChanged="ToolLayerColorTextboxTextChanged" HorizontalContentAlignment="Center" />
                                <ui:TxtMouseEnterLeave x:Name="ToolLayerColorColorUiTxt" Width="120" Height="30" Margin="20,0,0,0" MouseDoubleClick="ToolLayerColorColorMouseDoubleClick" />
                            </WrapPanel>
                        </StackPanel>
                    </GroupBox>
                    <WrapPanel>
                        <GroupBox Header="Cam功能参数配置" HorizontalAlignment="Left" Height="auto" Margin="10,10,0,0" VerticalAlignment="Top" Width="auto">
                            <StackPanel>
                                <WrapPanel Margin="5" >
                                    <Label x:Name="CollisionDetectionLabel" Content="拖图不停靠" Width="160" HorizontalContentAlignment="Right"  />
                                    <ComboBox x:Name="CollisionDetectionCombo" SelectedIndex="{Binding Detection ,Converter={StaticResource BoolIntConverter}}"  Width="120" HorizontalContentAlignment="Center"  />
                                </WrapPanel>
                                <WrapPanel Margin="5" >
                                    <Label x:Name="EmptyShiftHideDashedLabel" Content="空移不显示虚线" Width="160" HorizontalContentAlignment="Right"  />
                                    <ComboBox x:Name="EmptyShiftHideDashedCombo" SelectedIndex="{Binding HideDashed ,Converter={StaticResource BoolIntConverter}}"  Width="120" HorizontalContentAlignment="Center"  />
                                </WrapPanel>
                                <WrapPanel Margin="5" >
                                    <Label x:Name="AxisRotationLabel" Content="坐标轴旋转" Width="160" HorizontalContentAlignment="Right"  />
                                    <TextBox x:Name="AxisRotationTextbox" ToolTip="-180.00--180.00" Text="{Binding AxisRotation,Converter={StaticResource DoubleCheckConverter}}"  Width="120" HorizontalContentAlignment="Center" />
                                </WrapPanel>
                            </StackPanel>
                        </GroupBox>
                        <GroupBox Header="Cam排样限制参数配置" HorizontalAlignment="Left" Height="auto" Margin="10,10,0,0" VerticalAlignment="Top" Width="auto">
                            <StackPanel>
                                <WrapPanel Margin="5" >
                                    <Label x:Name="PartTypesMaxNumLabel" Content="零件种类最大值" Width="160" HorizontalContentAlignment="Right"  />
                                    <TextBox x:Name="PartTypesMaxNumTextbox" ToolTip="0--80" Text="{Binding PartTypesMaxNum,Converter={StaticResource IntCheckConverter}}"  Width="120" HorizontalContentAlignment="Center" />
                                </WrapPanel>
                                <WrapPanel Margin="5" >
                                    <Label x:Name="PlaneAdobeLimitLabel" Content="板材最大值" Width="160" HorizontalContentAlignment="Right"  />
                                    <TextBox x:Name="PlaneAdobeLimitTextbox" ToolTip="0--50" Text="{Binding PlaneAdobeLimit,Converter={StaticResource IntCheckConverter}}"  Width="120" HorizontalContentAlignment="Center" />
                                </WrapPanel>
                                <WrapPanel Margin="5" >
                                    <Label x:Name="PlaneResultLimitLabel" Content="排样结果最大值" Width="160" HorizontalContentAlignment="Right"  />
                                    <TextBox x:Name="PlaneResultLimitTextbox" ToolTip="0--50" Text="{Binding PlaneResultLimit,Converter={StaticResource IntCheckConverter}}"  Width="120" HorizontalContentAlignment="Center" />
                                </WrapPanel>
                            </StackPanel>
                        </GroupBox>
                    </WrapPanel>
                 </StackPanel>
            </Grid>
            <Grid Grid.Row="2" Background="{DynamicResource PageDeepBackground}" >
                <Border BorderBrush="{StaticResource NormalBorderBrush}" BorderThickness="0,1,0,0">
                    <TextBlock  Margin="5,5,10,5" HorizontalAlignment="Right">
                    <Hyperlink FontSize="15"   Click="HyperlinkClick">
                               <TextBlock x:Name="FilePath"  Text="未检测到文件路径..."  />
                    </Hyperlink>
                    </TextBlock>
                </Border>
            </Grid>
            <Grid Grid.Row="3">
                <Border BorderBrush="{StaticResource NormalBorderBrush}" BorderThickness="0,1,0,0" >
                    <StackPanel   Background="{StaticResource PageDeepBackground}" >
                        <WrapPanel HorizontalAlignment="Right"   >
                            
                            <Button Content="保存" Name="SaveButton"  Margin="5,5,0,5" Click="SaveChange" />
                            <Button Content="另存为..." x:Name="SaveAsButton"  Margin="5,5,10,5" Click="SaveAsClick" />
                        </WrapPanel>
                    </StackPanel>
                </Border>
            </Grid>
        </Grid>
    </Border>
</UserControl>
 

二、主要容器的约束特性

2.1 Grid 容器的约束

🔹 网格行列的约束机制

<Grid ShowGridLines="True" Height="200" Width="300">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>      <!-- 固定高度 -->
        <RowDefinition Height="*"/>       <!-- 剩余高度 -->
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"/>   <!-- 固定宽度 -->
        <ColumnDefinition Width="*"/>     <!-- 剩余宽度 -->
    </Grid.ColumnDefinitions>
    
    <!-- 这个按钮被限制在第一行第一列 -->
    <Button Grid.Row="0" Grid.Column="0" Content="受限按钮"
            Width="150" Height="80"/>     <!-- 实际显示为 100x50 -->
    
    <!-- 这个按钮可以占用剩余空间 -->
    <Button Grid.Row="1" Grid.Column="1" Content="弹性按钮"
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>

约束特点：

• 子控件不能超出所在行列的边界
• 对齐方式在单元格范围内生效
• 尺寸受行列定义的限制

2.2 StackPanel 的约束

🔹 线性 排列的约束特性

<!-- 垂直 StackPanel -->
<StackPanel Orientation="Vertical" Width="200" Height="300">
    <Button Content="按钮1" Height="30"/>      <!-- 高度固定 -->
    <Button Content="按钮2" Height="40"/>      <!-- 高度固定 -->
    <Button Content="按钮3" Height="50"/>      <!-- 高度固定 -->
    <!-- 所有按钮宽度被约束为 StackPanel 的宽度 -->
</StackPanel>

垂直 StackPanel 的约束：

• 子控件宽度被约束为 StackPanel 的宽度
• 子控件高度可以自由设置
• 排列方向为从上到下

🔹 水平 StackPanel 的约束

<!-- 水平 StackPanel -->
<StackPanel Orientation="Horizontal" Width="400" Height="100">
    <Button Content="按钮1" Width="80"/>      <!-- 宽度固定 -->
    <Button Content="按钮2" Width="100"/>     <!-- 宽度固定 -->
    <Button Content="按钮3" Width="120"/>     <!-- 宽度固定 -->
    <!-- 所有按钮高度被约束为 StackPanel 的高度 -->
</StackPanel>

水平 StackPanel 的约束：

• 子控件高度被约束为 StackPanel 的高度
• 子控件宽度可以自由设置
• 排列方向为从左到右

2.3 DockPanel 的约束

🔹 停靠布局的约束机制

<DockPanel LastChildFill="True" Height="300" Width="400">
    <!-- 停靠在顶部，约束高度 -->
    <Menu DockPanel.Dock="Top" Height="30" Background="LightGray"/>
    
    <!-- 停靠在左侧，约束宽度 -->
    <StackPanel DockPanel.Dock="Left" Width="150" Background="LightBlue">
        <Button Content="导航1" Margin="5"/>
        <Button Content="导航2" Margin="5"/>
    </StackPanel>
    
    <!-- 填充剩余空间，受其他停靠元素约束 -->
    <Border Background="White">
        <TextBlock Text="主内容区域" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Border>
</DockPanel>

DockPanel 约束特点：

• 停靠元素尺寸受 Dock 方向约束
• 最后一个元素填充剩余受约束的空间
• 停靠顺序影响最终布局

2.4 WrapPanel‌ 自动换行约束

适合用来排列按钮、标签等数量不定的元素 。它会把子控件按顺序排好，当一行放不下时，自动把多余的挤到下一行，不用你手动计算位置 。

<WrapPanel Margin="5" >
   <Label x:Name="PartTypesMaxNumLabel" Content="零件种类最大值" Width="160" HorizontalContentAlignment="Right"  />
   <TextBox x:Name="PartTypesMaxNumTextbox" ToolTip="0--80" Text="{Binding PartTypesMaxNum,Converter={StaticResource IntCheckConverter}}"  Width="120" HorizontalContentAlignment="Center" />
</WrapPanel>
                                

三、对齐方式详解

3.1 水平对齐（HorizontalAlignment）

🔹 四种水平对齐方式

<StackPanel Width="300" Height="200" Background="LightGray">
    <!-- 左对齐 -->
    <Button Content="Left" HorizontalAlignment="Left" Width="100" Margin="5"/>
    
    <!-- 居中对齐 -->
    <Button Content="Center" HorizontalAlignment="Center" Width="100" Margin="5"/>
    
    <!-- 右对齐 -->
    <Button Content="Right" HorizontalAlignment="Right" Width="100" Margin="5"/>
    
    <!-- 拉伸对齐（默认） -->
    <Button Content="Stretch" HorizontalAlignment="Stretch" Margin="5"/>
</StackPanel>

3.2 垂直对齐（VerticalAlignment）

🔹 四种垂直对齐方式

<StackPanel Orientation="Horizontal" Width="400" Height="200" Background="LightGray">
    <!-- 顶部对齐 -->
    <Button Content="Top" VerticalAlignment="Top" Height="50" Margin="5"/>
    
    <!-- 居中对齐 -->
    <Button Content="Center" VerticalAlignment="Center" Height="50" Margin="5"/>
    
    <!-- 底部对齐 -->
    <Button Content="Bottom" VerticalAlignment="Bottom" Height="50" Margin="5"/>
    
    <!-- 拉伸对齐 -->
    <Button Content="Stretch" VerticalAlignment="Stretch" Margin="5"/>
</StackPanel>

3.3 拉伸对齐的注意事项

⚠️ 拉伸对齐的潜在问题

<!-- 不推荐：按钮过度拉伸 -->
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Button Content="过度拉伸的按钮" 
            HorizontalAlignment="Stretch" 
            VerticalAlignment="Stretch"/>
</Grid>

<!-- 推荐：合理使用拉伸 -->
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    
    <!-- 顶部工具栏适合拉伸 -->
    <ToolBar Grid.Row="0" HorizontalAlignment="Stretch" Height="40"/>
    
    <!-- 主内容区域适合拉伸 -->
    <TextBox Grid.Row="1" HorizontalAlignment="Stretch" 
             VerticalAlignment="Stretch" AcceptsReturn="True"/>
    
    <!-- 底部状态栏适合拉伸 -->
    <StatusBar Grid.Row="2" HorizontalAlignment="Stretch" Height="25"/>
</Grid>

🔹 适合拉伸对齐的场景

• 工具栏和菜单栏：需要填充容器宽度
• 文本编辑区域：需要充分利用可用空间
• 状态栏和信息栏：通常需要横跨整个底部
• 背景元素：需要覆盖整个区域

🔹 不适合拉伸对齐的场景

• 按钮和操作控件：可能变得过大，影响美观
• 图标和标签：需要保持固定尺寸
• 输入框和选择器：过宽可能影响用户体验

四、窗口尺寸自适应

4.1 SizeToContent 属性

🔹 自动适应内容尺寸

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        SizeToContent="WidthAndHeight"  <!-- 关键属性 -->
        WindowStartupLocation="CenterScreen"
        Title="自适应窗口">
    
    <StackPanel Margin="20">
        <TextBlock Text="这是一个自适应窗口" FontSize="16" Margin="0,0,0,10"/>
        <Button Content="确定" Width="80" HorizontalAlignment="Center"/>
    </StackPanel>
</Window>

🔹 SizeToContent 的四种模式

<!-- 不自动调整 -->
<Window SizeToContent="Manual">
    <!-- 窗口尺寸由 Width 和 Height 决定 -->
</Window>

<!-- 自动调整宽度 -->
<Window SizeToContent="Width">
    <!-- 窗口宽度根据内容调整，高度固定 -->
</Window>

<!-- 自动调整高度 -->
<Window SizeToContent="Height">
    <!-- 窗口高度根据内容调整，宽度固定 -->
</Window>

<!-- 同时调整宽度和高度 -->
<Window SizeToContent="WidthAndHeight">
    <!-- 窗口尺寸完全根据内容调整 -->
</Window>

4.2 对话框和提示窗口的最佳实践

🔹 消息提示框

<Window x:Class="WpfApp.MessageDialog"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        SizeToContent="WidthAndHeight"
        WindowStyle="ToolWindow"
        ResizeMode="NoResize"
        Title="提示"
        WindowStartupLocation="CenterOwner">
    
    <StackPanel Margin="20" MinWidth="200">
        <TextBlock Text="操作完成成功！" FontSize="14" TextWrapping="Wrap"
                   HorizontalAlignment="Center" Margin="0,0,0,15"/>
        
        <Button Content="确定" Width="80" HorizontalAlignment="Center"
                Click="OKButton_Click"/>
    </StackPanel>
</Window>

🔹 输入对话框

<Window x:Class="WpfApp.InputDialog"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        SizeToContent="WidthAndHeight"
        WindowStyle="ToolWindow"
        ResizeMode="NoResize"
        Title="输入信息"
        WindowStartupLocation="CenterOwner">
    
    <StackPanel Margin="20" MinWidth="300">
        <TextBlock Text="请输入您的姓名:" Margin="0,0,0,10"/>
        <TextBox x:Name="NameTextBox" Width="200" HorizontalAlignment="Left"/>
        
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,15,0,0">
            <Button Content="确定" Width="80" Margin="0,0,10,0" Click="OKButton_Click"/>
            <Button Content="取消" Width="80" Click="CancelButton_Click"/>
        </StackPanel>
    </StackPanel>
</Window>

4.3 复杂窗口的尺寸策略

🔹 混合尺寸策略

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        SizeToContent="Width"           <!-- 宽度自适应 -->
        Height="600"                    <!-- 高度固定 -->
        MinWidth="800" MaxWidth="1200"  <!-- 宽度限制 -->
        WindowState="Normal"
        Title="主窗口">
    
    <Grid>
        <!-- 复杂的内容布局 -->
    </Grid>
</Window>

五、控件与字体对齐技巧

5.1 控件在容器中的居中

🔹 单轴居中

<!-- 水平居中，垂直顶部对齐 -->
<Grid>
    <Button Content="水平居中" Width="120" Height="40"
            HorizontalAlignment="Center" VerticalAlignment="Top"/>
</Grid>

<!-- 垂直居中，水平左对齐 -->
<Grid>
    <Button Content="垂直居中" Width="120" Height="40"
            HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Grid>

🔹 完全居中

<!-- 在容器中完全居中 -->
<Grid Background="LightGray">
    <Button Content="完全居中" Width="120" Height="40"
            HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

🔹 多个元素的居中布局

<Grid Background="LightGray">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    
    <!-- 登录表单居中 -->
    <Border Grid.Row="1" Grid.Column="1" 
            Background="White" Padding="20" CornerRadius="5"
            BorderBrush="#CCC" BorderThickness="1">
        <StackPanel>
            <TextBlock Text="用户登录" FontSize="18" FontWeight="Bold" 
                       HorizontalAlignment="Center" Margin="0,0,0,15"/>
            <TextBox Text="用户名" Width="200" Margin="0,0,0,10"/>
            <PasswordBox Width="200" Margin="0,0,0,15"/>
            <Button Content="登录" Width="100" HorizontalAlignment="Center"/>
        </StackPanel>
    </Border>
</Grid>

5.2 字体文本对齐

🔹 TextBlock 的文本对齐

<StackPanel Width="300">
    <!-- 文本左对齐 -->
    <TextBlock Text="左对齐文本" HorizontalAlignment="Left" Background="LightBlue" Margin="5"/>
    
    <!-- 文本居中对齐 -->
    <TextBlock Text="居中对齐文本" HorizontalAlignment="Center" Background="LightGreen" Margin="5"/>
    
    <!-- 文本右对齐 -->
    <TextBlock Text="右对齐文本" HorizontalAlignment="Right" Background="LightCoral" Margin="5"/>
    
    <!-- 文本拉伸对齐 -->
    <TextBlock Text="拉伸对齐文本" HorizontalAlignment="Stretch" TextAlignment="Center" 
               Background="LightYellow" Margin="5"/>
</StackPanel>

🔹 TextBox 的文本对齐

<StackPanel Width="300" Margin="10">
    <!-- 文本框内容左对齐 -->
    <TextBox Text="左对齐文本" HorizontalContentAlignment="Left" Margin="0,5"/>
    
    <!-- 文本框内容居中对齐 -->
    <TextBox Text="居中对齐文本" HorizontalContentAlignment="Center" Margin="0,5"/>
    
    <!-- 文本框内容右对齐 -->
    <TextBox Text="右对齐文本" HorizontalContentAlignment="Right" Margin="0,5"/>
    
    <!-- 文本框本身和内容都居中 -->
    <TextBox Text="完全居中文本" HorizontalAlignment="Center" 
             HorizontalContentAlignment="Center" Width="200" Margin="0,5"/>
</StackPanel>

5.3 复合对齐实战

🔹 表单标签对齐的最佳实践

<Grid Margin="20" Grid.IsSharedSizeScope="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" SharedSizeGroup="Labels"/>
        <ColumnDefinition Width="*" MinWidth="200"/>
    </Grid.ColumnDefinitions>
    
    <!-- 用户名行 -->
    <TextBlock Grid.Row="0" Grid.Column="0" Text="用户名:" 
               VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,5,10,5"/>
    <TextBox Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" Margin="0,5"/>
    
    <!-- 密码行 -->
    <TextBlock Grid.Row="1" Grid.Column="0" Text="密码:" 
               VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,5,10,5"/>
    <PasswordBox Grid.Row="1" Grid.Column="1" VerticalAlignment="Center" Margin="0,5"/>
    
    <!-- 邮箱行 -->
    <TextBlock Grid.Row="2" Grid.Column="0" Text="电子邮件:" 
               VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,5,10,5"/>
    <TextBox Grid.Row="2" Grid.Column="1" VerticalAlignment="Center" Margin="0,5"/>
    
    <!-- 按钮行 -->
    <StackPanel Grid.Row="3" Grid.Column="1" Orientation="Horizontal" 
                HorizontalAlignment="Right" Margin="0,15,0,0">
        <Button Content="确定" Width="80" Margin="5,0,0,0"/>
        <Button Content="取消" Width="80" Margin="5,0,0,0"/>
    </StackPanel>
</Grid>

🔹 数据表格样式对齐

<Grid Margin="10">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    
    <!-- 表头 -->
    <Border Grid.Row="0" Background="#F0F0F0" BorderBrush="#CCC" BorderThickness="1,1,1,0">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="100"/>
                <ColumnDefinition Width="80"/>
                <ColumnDefinition Width="120"/>
            </Grid.ColumnDefinitions>
            
            <TextBlock Grid.Column="0" Text="产品名称" FontWeight="Bold" 
                       HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,8"/>
            <TextBlock Grid.Column="1" Text="价格" FontWeight="Bold" 
                       HorizontalAlignment="Right" VerticalAlignment="Center" Margin="10,8"/>
            <TextBlock Grid.Column="2" Text="数量" FontWeight="Bold" 
                       HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,8"/>
            <TextBlock Grid.Column="3" Text="操作" FontWeight="Bold" 
                       HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,8"/>
        </Grid>
    </Border>
    
    <!-- 数据行 -->
    <ListView Grid.Row="1" BorderBrush="#CCC" BorderThickness="1,0,1,1">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="产品名称" Width="200">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Name}" VerticalAlignment="Center" Margin="10,5"/>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
                <GridViewColumn Header="价格" Width="100">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Price, StringFormat=C}" 
                                       HorizontalAlignment="Right" VerticalAlignment="Center" Margin="10,5"/>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
                <GridViewColumn Header="数量" Width="80">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Quantity}" 
                                       HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,5"/>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
            </GridView>
        </ListView.View>
    </ListView>
</Grid>

六、布局调试技巧

6.1 可视化 布局边界

🔹 使用背景色调试

<!-- 调试布局时临时添加背景色 -->
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    
    <!-- 临时背景色查看实际占用区域 -->
    <Border Grid.Row="0" Background="LightBlue" Opacity="0.3">
        <TextBlock Text="头部区域" Margin="10"/>
    </Border>
    
    <Border Grid.Row="1" Background="LightGreen" Opacity="0.3">
        <TextBlock Text="内容区域" Margin="10"/>
    </Border>
    
    <Border Grid.Row="2" Background="LightCoral" Opacity="0.3">
        <TextBlock Text="底部区域" Margin="10"/>
    </Border>
</Grid>

🔹 使用边框显示对齐效果

<StackPanel>
    <Border BorderBrush="Red" BorderThickness="1" Margin="5">
        <Button Content="左对齐" HorizontalAlignment="Left" Width="100"/>
    </Border>
    
    <Border BorderBrush="Green" BorderThickness="1" Margin="5">
        <Button Content="居中对齐" HorizontalAlignment="Center" Width="100"/>
    </Border>
    
    <Border BorderBrush="Blue" BorderThickness="1" Margin="5">
        <Button Content="右对齐" HorizontalAlignment="Right" Width="100"/>
    </Border>
</StackPanel>