XAML中如何让Button尺寸适配父级Grid而非随文本宽度收缩

问题出在两个地方：

• 你自定义的按钮ControlTemplate里把ContentPresenter的HorizontalAlignment硬编码成了Center，完全没有绑定Button自身的HorizontalContentAlignment属性，也没有绑定Padding属性，导致外层设置这两个属性时模板内部根本不响应。
• UserControl内部没有把你在外层设置的HorizontalContentAlignment、Padding、边框相关属性传递给内部的实际按钮控件，属性值直接被丢弃了。
  这两个问题叠加后，按钮的内容测量逻辑不会遵循父容器的拉伸规则，直接按内容自身尺寸收缩，就出现了宽度无法撑满的问题。

1. 修正按钮样式模板 #

把模板里硬编码的对齐属性改成模板绑定，让ContentPresenter能响应按钮本身的属性设置，修改后的样式代码：

<Style x:Key="HeaderButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="#212121"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="FontFamily" Value="Roboto"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Background="{TemplateBinding Background}"
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Stretch">
                    <ContentPresenter 
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        Margin="{TemplateBinding Padding}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <!-- 保留你原有的触发器逻辑即可 -->
    </Style.Triggers>
</Style>

2. 补全UserControl内部的属性传递 #

把外层设置的对齐、内边距、边框属性绑定到UserControl内部的控件上，避免属性值丢失：

<Border Background="Transparent" 
        BorderBrush="{TemplateBinding BorderBrush}" 
        BorderThickness="{TemplateBinding BorderThickness}">
    <Button Style="{StaticResource HeaderButtonStyle}"
            VerticalAlignment="Stretch" 
            HorizontalAlignment="Stretch"
            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
            Padding="{TemplateBinding Padding}"
            Content="{Binding Path=ButtonContent, ElementName=HeaderButtonControl}"/>           
</Border>

3. 清理冗余测试代码 #

之前你为了让第二行按钮撑满，在内容末尾加的一堆空格可以全部删掉，不需要靠这种hack方式撑宽度：

<local:GraphHeaderButton x:Name="headerCenterFreq" 
                         ButtonContent="85.000 MHz" 
                         Grid.Row="1" 
                         Grid.Column="1" 
                         FontSize="26" />

修改完成后，按钮会默认保持Stretch状态撑满父级Grid分配的全部宽度，内容对齐完全由你设置的HorizontalContentAlignment控制：设为Left就左对齐，设为Center就居中，Padding属性也会按设置正常生效，不会再出现宽度随内容收缩的问题。

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