WPF中UserControl内Button按钮高度无法修改问题求助

核心原因 #

• 自定义Button模板内的元素未绑定父级按钮的宽高属性，内部Grid、Ellipse默认不会跟随Button设置的尺寸参数调整
• 按钮所在的Grid第一行设置了固定25的行高，水平布局的StackPanel会默认拉伸内部元素高度到行高最大值，强制限制了按钮的最大高度为25

具体解决步骤 #

1. 先修改Button的控件模板，绑定内部元素和父按钮的宽高属性：

<Button.Template>
    <ControlTemplate TargetType="{x:Type Button}">
        <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
            <Ellipse Fill="White" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>
            <ContentPresenter
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Content="{TemplateBinding Content}" />
        </Grid>
    </ControlTemplate>
</Button.Template>

2. 如果需要把按钮缩小到20以下，同步调整对应行的行高参数，可改为Auto或者你需要的固定值：

<RowDefinition Height="Auto" />
<!-- 也可直接设置为固定高度，例如 <RowDefinition Height="20" /> -->

3. 按需调整按钮的字号，避免箭头内容超出按钮范围：

<Button
    x:Name="CollapseBtn"
    Width="20"
    Height="20"
    HorizontalAlignment="Left"
    VerticalAlignment="Center"
    Click="CollapseBtn_Click"
    Content="▼"
    FontSize="10">

修改完成后按钮的宽高设置即可全部生效。

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