Change button color when "IsMouseOver" wpf Mahapps

Question

I'm trying to change the background color of mahapp button when the mouse goes over it. The problem is that if I use the code below:

<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="50" Height="50" HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="50,0,0,0">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Background" Value="Green"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border Background="{TemplateBinding Background}">
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="DarkGoldenrod"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>

Found in this answer the color does change but my button "forget" to be a mahapp button, i.e. it loses the style.
How to change the color without losing the style?
Thank you

when I modified other properties like Font family stating – Alex Gimondi May 18 '17 at 14:06 — Alex Gimondi, May 18 '17 at 14:06

score 3 · Answer 1 · answered May 18 '17 at 13:56

3

Try the following:

<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="50" Height="50" HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="50,0,0,0">
    <Button.Style>
        <Style BasedOn="{StaticResource {x:Type Button}}" TargetType="Button">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Aqua"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

answered May 18 '17 at 13:56

Yevgeniy

1,054
1
9
17

In this way the style remains the same but the color isn't changed, that's way I use template – Alex Gimondi May 18 '17 at 14:02
1

This is the correct answer to the question, much simpler than redefining template. Don't know why people downvote – ghord Mar 06 '18 at 08:25
This actually did not work for me. @mm8's solution worked though. – Zesa Rex Feb 11 '20 at 10:12

score 2 · Accepted Answer · edited May 23 '17 at 11:47

How to change the color without losing the style?

You need to re-define the entire template:

<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="50" Height="50" 
                HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Margin="50,0,0,0">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Background" Value="{DynamicResource FlatButtonBackgroundBrush}" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="FontSize" Value="{DynamicResource FlatButtonFontSize}" />
            <Setter Property="Foreground" Value="{DynamicResource FlatButtonForegroundBrush}" />
            <Setter Property="Padding" Value="10 5 10 5" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}" xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro">
                        <Border x:Name="Border"
                            Margin="0"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                            <Controls:ContentControlEx x:Name="PART_ContentPresenter"
                                                   Padding="{TemplateBinding Padding}"
                                                   HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                   VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                                   Content="{TemplateBinding Content}"
                                                   ContentCharacterCasing="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Controls:ControlsHelper.ContentCharacterCasing)}"
                                                   ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                                   ContentTemplate="{TemplateBinding ContentTemplate}"
                                                   ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                                                   RecognizesAccessKey="True"
                                                   SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="DarkGoldenrod" />
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Background" Value="{DynamicResource FlatButtonPressedBackgroundBrush}" />
                    <Setter Property="Foreground" Value="{DynamicResource FlatButtonPressedForegroundBrush}" />
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Foreground" Value="{DynamicResource GrayBrush2}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

You cannot override only a part of a ControlTemplate:

WPF: Is there a way to override part of a ControlTemplate without redefining the whole style?

Change button color when "IsMouseOver" wpf Mahapps

2 Answers2