wpf - Is it possible to use the same Resource Style in multiple buttons and change the background image individually on a IsMouseOver event in XAML

Question

This question already has an answer here: question from:https://stackoverflow.com/questions/65829309/c-sharp-wpf-set-component-binded-value-in-style-content

Answer 1

The Button class only contains one Dependency Property (DP) for Background, there is no DP for IsMouseOver background.

You have multiple choices, here's a few :

1) Create an Attached Property named IsMouseOverBackground of type Brush and bind to it in your Style.

C#

namespace WpfApp1
{
    public class ButtonHelper
    {
        public static readonly DependencyProperty IsMouseOverBackgroundProperty =
            DependencyProperty.RegisterAttached("IsMouseOverBackground", typeof(Brush), typeof(ButtonHelper), new PropertyMetadata(null));

        public static Brush GetIsMouseOverBackground(DependencyObject obj)
        {
            return (Brush)obj.GetValue(IsMouseOverBackgroundProperty);
        }

        public static void SetIsMouseOverBackground(DependencyObject obj, Brush value)
        {
            obj.SetValue(IsMouseOverBackgroundProperty, value);
        }
    }
}

XAML

<!-- ... -->
<Trigger Property="IsMouseOver" Value="True">
    <Setter TargetName="button" Property="Background" Value="{Binding (local:ButtonHelper.IsMouseOverBackground), RelativeSource={RelativeSource TemplatedParent}}" />
</Trigger>
<!-- ... -->

Note the use of parentheses in the Binding, that is needed when binding to an Attached Property.

2) Create a IsMouseOverButton class that inherits from Button, add a DP called IsMouseOverBackground of type Brush and bind to it in your Style.

C#

namespace WpfApp1
{
    public class IsMouseOverButton : Button
    {
        public static readonly DependencyProperty IsMouseOverBackgroundProperty =
            DependencyProperty.Register("IsMouseOverBackground", typeof(Brush), typeof(IsMouseOverButton), new PropertyMetadata(null));

        public Brush IsMouseOverBackground
        {
            get { return (Brush)GetValue(IsMouseOverBackgroundProperty); }
            set { SetValue(IsMouseOverBackgroundProperty, value); }
        }
    }
}

XAML

<Style x:Key="MainMenuButtonTemplate" TargetType="{x:Type local:IsMouseOverButton}">
    <Style.Setters>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:IsMouseOverButton}">

                    <Border x:Name="button" CornerRadius="12" 
                            Background="{TemplateBinding Background}"
                            Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}">

                        <TextBlock  Text="{TemplateBinding Button.Content}" 
                                    HorizontalAlignment="Center" 
                                    VerticalAlignment="Center"/>
                    </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="button" Property="Background" Value="{Binding IsMouseOverBackground, RelativeSource={RelativeSource TemplatedParent}}" />
                    </Trigger>
<!-- ... -->

<local:IsMouseOverButton x:Name="MyButton"
                         Style="{StaticResource MainMenuButtonTemplate}" 
                         Margin="0,50,0,0" 
                         Width="auto" 
                         Height="60" 
                         Command="{Binding FindrViewCommand}"
                         BorderBrush="{x:Null}" 
                         Foreground="White">
    <local:IsMouseOverButton.Background>
        <ImageBrush ImageSource="https://dummyimage.com/600x400/000/fff" Stretch="None"/>
    </local:IsMouseOverButton.Background>
    <local:IsMouseOverButton.IsMouseOverBackground>
        <ImageBrush ImageSource="https://dummyimage.com/600x401/000/fff" Stretch="None"/>
    </local:IsMouseOverButton.IsMouseOverBackground>
</local:IsMouseOverButton>

3) Use the Tag property of your Button to store the IsMouseOver background and bind to it in your Style. I'm not a fan of using Tag property as it's unclear why Tag property is used when another developer reads your code.