WPF - IsPressed 上带有边框、图像和触发器的按钮答案

【问题标题】：WPF - Button with border, image and Trigger on IsPressedWPF - IsPressed 上带有边框、图像和触发器的按钮
【发布时间】：2020-03-02 16:17:58
【问题描述】：

我正在尝试实现一个带有边框和内部图像的按钮：

      <Button Style="StaticResource HomeButton}">
        <Image Source="{StaticResource icon_1}" Stretch="Uniform" Margin="10"/>
    </Button>

这就是样式（HomeBorder 只设置了 BorderBrush、BorderThickness 和 CornerRadius）：

<Style TargetType="{x:Type Button}" x:Key="HomeButton">
    <Setter Property="Background" Value="Black" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Style="{StaticResource HomeBorder}" x:Name="ButtonBorder">
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}"
                                      Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
                                      Margin="{TemplateBinding Margin}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        </ContentPresenter>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="Button.IsPressed" Value="True">
                        <Setter TargetName="ButtonBorder" Property="Background"
                                    Value="{StaticResource  HMIOrange}" />
                    </Trigger>
                    <Trigger Property="Button.IsMouseOver" Value="True">
                        <Setter TargetName="ButtonBorder" Property="Background"
                                    Value="{StaticResource  HMIOrange}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

问题在于，只有当我单击（或将鼠标悬停在）边框线或图像时，它才会更改背景颜色。我尝试了很多这样的解决方法：

<Button x:Name="btnProva" Background="Transparent"
            HorizontalContentAlignment="Stretch"
            VerticalContentAlignment="Stretch">
        <Border>
            <Image Source="{StaticResource icon_1}" Stretch="Uniform" Margin="10"/>
            <Border.Style>
                <Style TargetType="{x:Type Border}" >
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="BorderBrush" Value="White"/>
                    <Setter Property="BorderThickness" Value="2"/>
                    <Setter Property="CornerRadius" Value="20"/>
                    <Style.Triggers>
                        <Trigger Property="Button.IsPressed" Value="True">
                            <Setter Property="Background" Value="Yellow"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
        </Border>
    </Button>

...在这种情况下 IsMouseOver 有效，但 IsPressed 触发器将颜色更改为超出边框的限制。

【问题讨论】：

标签： wpf image button triggers border

【解决方案1】：

您需要使用 Background 属性绑定更新您的 ButtonBorder：

<Border x:Name="ButtonBorder"
    Background="{TemplateBinding Background}" <--- RIGHT HERE
    Style="{StaticResource HomeBorder}">
    <ContentPresenter x:Name="contentPresenter"
        Margin="{TemplateBinding Margin}"
        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
        VerticalAlignment="{TemplateBinding VerticalAlignment}"
        Content="{TemplateBinding Content}"
        ContentTemplate="{TemplateBinding ContentTemplate}" />
</Border>

【讨论】：

这个解决方案非常适合我！非常感谢你。我想我需要更好地理解“TemplateBinding”的目的。
TemplateBinding 是ControlTemplate 的TargetType 属性的绑定快捷方式。与"{Binding RelativeSource={RelativeSource TemplatedParent}}" 相同。 TemplateBinding 创建一个快速的单向绑定。