Remove mouseover effect of WPF Button

Question

I can't find a simple answer to this problem.

I've created a Button in WPF and gave it a background image. First my problem was the border, but then I was able to remove that with

Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"

Now the problem is that the windows MouseOver effect is visible. Is there an easy method to remove that? I tried to replace the Value with an Image. It worked but I couldn't set the Text anymore on the button.

<Button x:Name="gameBtnAnswer1" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Cursor="Hand" Padding="-4" Margin="0,0,18,0" Height="38" Width="336" HorizontalAlignment="Left" FontSize="16" Foreground="White" Click="gameBtnAnswer1_Click" BorderThickness="0" Focusable="False">
    <Button.Background>
        <ImageBrush ImageSource="themes/blue/button_answer.png" Stretch="None" TileMode="Tile"/>
    </Button.Background>
    <Button.Content>
        Hier steht die Antwort #1
    </Button.Content>
</Button>

Someone else made a post about it here: http://stackoverflow.com/questions/3854317/how-to-remove-default-mouse-over-effect-on-wpf-buttons — DJ Burb, Feb 02 '13 at 08:01

score 1 · Accepted Answer · answered Feb 02 '13 at 07:56

Best approach in my opinion is to redefine the button ControlTemplate. Here the msdn doc.

An example template without triggers:

<Style TargetType="Button">
  <Setter Property="SnapsToDevicePixels" Value="true"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
  <Setter Property="MinHeight" Value="23"/>
  <Setter Property="MinWidth" Value="75"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Border 
          x:Name="Border"  
          CornerRadius="2" 
          BorderThickness="1"
          Background="{StaticResource NormalBrush}"
          BorderBrush="{StaticResource NormalBorderBrush}">
          <ContentPresenter 
            Margin="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            RecognizesAccessKey="True"/>
        </Border>
        <ControlTemplate.Triggers>




        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

score 0 · Answer 2 · answered Feb 02 '13 at 07:56

What comes to mind first is to redesign template for the button. In the template you will see VisualStateManager class with a lot of states. One of those states would be MouseOver. Within that MouseOver declaration you can put whatever you want to make the Button look the way you like. For example, there also should be some default visual state in that VisualStateManager so you can just copy declration from default visual state to mouseover visual state and they will be the same.

Remove mouseover effect of WPF Button

2 Answers2