自定义按钮而不添加边框或其他内容

Question

我有一个 WPF 按钮

<Button Style="{StaticResource BrandedButton}">Continue</Button>

目前样式如下：

<Style x:Key="BrandedButton" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="{StaticResource LowlightBrush}"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="FontFamily" Value="Open Sans Light"/>
    <Setter Property="FontSize" Value="35"/>
    <Setter Property="Padding" Value="50,10"/>
</Style>

现在，我想控制 hover/press/etc 的颜色（仅此而已），所以我添加了另一个 setter

    <Setter Property="Template" Value="{StaticResource BrandedButtonTemplate}"/>

指向此 ControlTemplate。我只看过改变按钮结构的示例，例如通过添加边框：

<ControlTemplate x:Key="BrandedButtonTemplate" TargetType="Button">
    <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="0">
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Background" Value="{StaticResource HighlightBrush}"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="true">
            <Setter Property="Background" Value="{StaticResource HighlightBrush}"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Background" Value="{StaticResource HighlightBrush}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

但这会破坏之前应用的布局：

相反，如果我只包含 ContentPresenter 并省略环绕 Border，按钮将完全消失。

如何在不改变其他任何东西的情况下改变悬停和按下的颜色？ smallest/lightest 应该是一项微不足道的任务的实现是什么？

Answer 1

您的 ControlTemplate 忽略了 Button 的 Padding 属性。

添加 ContentPresenter 的 Margin:

的 TemplateBinding

<ControlTemplate x:Key="BrandedButtonTemplate" TargetType="Button">
    <Border Background="{TemplateBinding Background}" BorderThickness="0">
        <ContentPresenter
            Margin="{TemplateBinding Padding}"
            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </Border>
    <ControlTemplate.Triggers>
        ...
    </ControlTemplate.Triggers>
</ControlTemplate>

自定义按钮而不添加边框或其他内容

Customising a button without adding a border or other content

wpf

xaml

user-controls