I have a wppf button with a background image.
When I mouse over background will be empty and a button is shown.
How can I disable mouse effect?
<Button BorderBrush="{x:Null}" Content="Reset" BorderThickness="0"Foreground="White" Focusable="False">
<Button.Background>
<ImageBrush ImageSource="button.png" />
</Button.Background>
To remove the CSS hover effect from a specific element, you can set the pointer-events property of the element (the hover behavior of which you want to disable) to “none”.
One method to do this is to add: pointer-events: none; to the element, you want to disable hover on. (Note: this also disables javascript events on that element too, click events will actually fall through to the element behind ).
preventDefault() within ontouchstart or ontouchend. It appears to stop the hover effect when the button is touched, but it also stops the button click animation and prevents the onclick function from being called when the button is touched, so you have to call those manually in the ontouchstart or ontouchend handler.
Here's how I disable the visual mouseover effects on buttons. I left in some of my settings just to get you a feel of how to play with the triggers and stuff, feel free to experiment!
<Style TargetType="Button" x:Key="ImageButton" BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="5"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="Gainsboro" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" Value="0.25" />
<Setter Property="BorderBrush" Value="Transparent" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
EDIT: Using the "BasedOn" + setting FocusVisualStyle to null (first 2 lines) gets rid of the mouse over effects. Everything else is just examples. I added a border there in order to play with it through a trigger (since I want a custom mouseover effect).
In the ControlTemplate
of the Button
the Background property will be overridden by a trigger.
You can either redo the whole ControlTemplate
and leave out the Background change or just add the image as content of your Button
like so to avoid all these complications:
<Button.Content>
<Image Source="button.png" />
</Button.Content>
Or if you need the text in there as well:
<Button.Content>
<Grid>
<Image Source="button.png" />
<TextBlock Text="Reset" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Grid>
</Button.Content>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With