Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable button mouse over effect

Tags:

wpf

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>
like image 807
Kev Fixes Avatar asked Oct 30 '12 14:10

Kev Fixes


People also ask

How do I get rid of the mouse hover effect?

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”.

How do I turn off hover element?

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 ).

How do you prevent sticky hover effects for buttons on touch devices?

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.


2 Answers

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).

like image 142
Joe Avatar answered Oct 06 '22 11:10

Joe


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>
like image 39
MrDosu Avatar answered Oct 06 '22 11:10

MrDosu