Konrad Viltersten
Konrad Viltersten

Reputation: 39068

How to get rid of the default blue color on hover over a button?

I've declared a style as follows.

<Style x:Key="RightButtonStyle"
       TargetType="Button">
  <Style.Triggers>
    <Trigger Property="IsMouseOver"
             Value="True">
      <Setter Property="Background"
              Value="BlueViolet"></Setter>
    </Trigger>
    <Trigger Property="IsMouseOver"
             Value="False">
      <Setter Property="Background"
              Value="Yellow" />
    </Trigger>
  </Style.Triggers>
</Style>

My button using the style does obey only the yellow part. For some reason it still gets bluish (default hover-over color) and not blue-violetish on hover. What am I missing? There are no other setters or styles that I'm aware of.

Upvotes: 1

Views: 1840

Answers (1)

d.moncada
d.moncada

Reputation: 17402

It's still using the default button template. You need to override it.

        <Style Key="RightButtonStyle" TargetType="Button">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="BlueViolet"></Setter>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="Background" Value="Yellow" />
                </Trigger>
            </Style.Triggers>
        </Style>

Upvotes: 2

Related Questions