WPF - Button with border, image and Trigger on IsPressed

Question

I'm trying to implement a Button with a border and an image inside:

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

and this is the style (HomeBorder just sets BorderBrush, BorderThickness and 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>

The problem is that it changes the background color only if I click (or I go with the mouse over) the line of the border or the image. I tried a lot of workarounds like this:

<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>

...in this case IsMouseOver works but IsPressed trigger changes the color over the limit of the border.

Keithernet Keithernet · Accepted Answer · 2020-03-02T17:07:21

You need to update your ButtonBorder with a Background property binding:

<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>

WPF - Button with border, image and Trigger on IsPressed

1 Answers