.netwpfmahapps.metro

Button weird background on over?


I'm using this Button:

<Button Name="buttonAttiva"
        HorizontalAlignment="Center"
        VerticalAlignment="Top"
        Margin="0,560,0,0">
    <TextBlock Text="Attiva" />

That's the style:

<Style TargetType="{x:Type Button}"
       BasedOn="{StaticResource MahApps.Styles.Button}">
    <Setter Property="HorizontalAlignment"
            Value="Left" />
    <Setter Property="VerticalAlignment"
            Value="Top" />
    <Setter Property="Width"
            Value="150" />
    <Setter Property="Height"
            Value="46" />
    <Setter Property="BorderThickness"
            Value="0" />
    <Setter Property="BorderBrush"
            Value="Transparent" />
    <Setter Property="Background"
            Value="#81b3d4" />
    <Setter Property="Foreground"
            Value="#ffffff" />
    <Setter Property="FontWeight"
            Value="Bold" />
    <Setter Property="FontSize"
            Value="18" />
    <Setter Property="VerticalContentAlignment"
            Value="Center" />
    <Setter Property="FontWeight"
            Value="Bold" />
    <Setter Property="FocusVisualStyle"
            Value="{x:Null}" />
    <Setter Property="controls:ControlsHelper.MouseOverBorderBrush"
            Value="#000000" />
    <Setter Property="controls:ControlsHelper.FocusBorderBrush"
            Value="#000000" />
    <Setter Property="controls:ControlsHelper.FocusBorderThickness"
            Value="0" />
    <Style.Resources>
        <SolidColorBrush x:Key="MahApps.Brushes.Gray7"
                         Color="#000000" />
        <SolidColorBrush x:Key="MahApps.Brushes.Gray8"
                         Color="#000000" />
    </Style.Resources>
    <Style.Triggers>
        <Trigger Property="IsFocused"
                 Value="True">
            <Setter Property="Background"
                    Value="#000000" />
            <Setter Property="BorderThickness"
                    Value="0" />
            <Setter Property="BorderBrush"
                    Value="#000000" />
        </Trigger>
        <Trigger Property="IsMouseOver"
                 Value="True">
            <Setter Property="Background"
                    Value="#000000" />
            <Setter Property="BorderThickness"
                    Value="0" />
            <Setter Property="BorderBrush"
                    Value="#000000" />
        </Trigger>
        <Trigger Property="IsPressed"
                 Value="True">
            <Setter Property="Background"
                    Value="#000000" />
            <Setter Property="BorderThickness"
                    Value="0" />
            <Setter Property="BorderBrush"
                    Value="#000000" />
        </Trigger>
    </Style.Triggers>
</Style>

Which correctly display as:

enter image description here

But, when I over with mouse, a strange "gray" background appears:

enter image description here

How can i set the correct Orange Background?

Note, I'm using MahApps.Metro alongside, which could override some properties I guess?


Solution

  • Override the MahApps.Brushes.Gray8 resource that is used in the template:

    <Style TargetType="{x:Type Button}" BasedOn="{StaticResource MahApps.Styles.Button}">
        <Style.Resources>
            <SolidColorBrush x:Key="MahApps.Brushes.Gray8" Color="Orange" />
        </Style.Resources>
    ...