WPF 如何实现标签与对应加减按钮自适应多屏幕尺寸对齐

问题根源 #

你当前的布局问题根源是将标签1、标签5、两组加减按钮全部放在了外层Grid的同一个单元格（第5行第3列）中，仅通过HorizontalAlignment属性控制相对位置，当屏幕尺寸变化时，单元格宽度会动态调整，不同控件的对齐基准没有绑定，自然会出现错位。

最优解决方案 #

这个场景下嵌套Grid是最轻量也最适配的方案，不需要引入其他复杂布局控件，只需要把原来堆叠在同一个单元格的内容拆成独立的布局单元，让标签和对应按钮的位置强绑定即可。
修改后的代码如下，替换原来Grid.Row="5" Grid.Column="3"下的所有内容即可：

<Grid Grid.Row="5" Grid.Column="3">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <!-- 左侧±1控制组 -->
    <StackPanel Grid.Column="0" Orientation="Vertical" HorizontalAlignment="Center">
        <Label Content="1" FontSize="24" HorizontalAlignment="Center"/>
        <StackPanel Orientation="Horizontal" Margin="0 5 0 0">
            <Button x:Name="plus1" Content="+" Width="70" Height="35" FontSize="24" Click="plus1_Click"/>
            <Button x:Name="Subtract1" Content="-" Width="70" Height="35" FontSize="24" Margin="10 0 0 0" Click="Subtract1_Click"/>
        </StackPanel>
    </StackPanel>

    <!-- 右侧±5控制组 -->
    <StackPanel Grid.Column="2" Orientation="Vertical" HorizontalAlignment="Center">
        <Label Content="5" FontSize="24" HorizontalAlignment="Center"/>
        <StackPanel Orientation="Horizontal" Margin="0 5 0 0">
            <Button  x:Name="Plus5" Content="+" Width="70" Height="35"  FontSize="24" Click="Plus5_Click" />
            <Button x:Name="Subtract5" Content="-" Width="70" Height="35"  FontSize="24" Margin="10 0 0 0" Click="Subtract5_Click"/>
        </StackPanel>
    </StackPanel>
</Grid>

额外优化建议 #

• 删掉了原来用来撑间距的隐藏TextBlock，改用Button的Margin属性控制间距，代码更简洁易维护
• 每组的标签和按钮放在同一个垂直StackPanel里，天然上下对齐，无论屏幕尺寸怎么变都不会错位
• 嵌套Grid的中间列用*占满剩余空间，左右两组的间距会随屏幕宽度自动适配，不会出现挤在一起或者距离过大的问题
• 你当前外层Grid的行高全部用*定义，会导致控件随屏幕拉伸变形，建议把放控件的行高改为Auto，只把需要留空白的行高设为*，适配性会更好

内容的提问来源于stack exchange，提问作者Gerken