How to disable mouse over effect visibility temporarily on button click?

Question

For simplicity's sake, let's say that my program's buttons are white when "off" and green when "on". The buttons change color to light blue when the mouse is hovering over them. Currently, when the button is clicked, the button color remains light blue until the mouse is no longer hovering over the button, and then (when the mouse has moved away and is no longer hovering over the button) the button's green or white background is displayed. The code for the hover effect and button background is currently...

<ControlTemplate TargetType="{x:Type Button}">
  <Border x:Name="bdr" CornerRadius="22" Margin="3" BorderThickness="2.5" BorderBrush="Black" Background="{TemplateBinding Background}">
     <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Content" />
  </Border>
  <ControlTemplate.Triggers>
     <Trigger Property="IsMouseOver" Value="True">
         <Setter TargetName="bdr" Property="Background" Value="#ABBEC9"/>
     </Trigger>

I need the buttons new background to be immediately displayed (even if the mouse is still hovering over the button) after the click event. I am having trouble implementing this.

I've tried the MultiDataTrigger below, but the hover color only flashes on click to white and the background color no longer displays even when the mouse is no longer hovering over the button, so the code is obviously wrong.

<MultiDataTrigger>
  <MultiDataTrigger.Conditions>
     <Condition Binding="{Binding ElementName=bdr, Path=IsMouseOver}" Value="True" />
  </MultiDataTrigger.Conditions>
     <Setter TargetName="bdr" Property="Background" Value="#ABBEC9" />
  </MultiDataTrigger>
<MultiDataTrigger>
   <MultiDataTrigger.Conditions>
      <Condition Binding="{Binding ElementName=bdr, Path=IsMouseOver}" Value="False" />
   </MultiDataTrigger.Conditions>
      <Setter TargetName="bdr" Property="Background" Value="White" />                            
</MultiDataTrigger>

Any help would be appreciated.

I'd say ditch the triggers and use a VisualStateManager instead, more info here as to why, or numerous other articles floating around. Cheers :) — Chris W.
Thank you so much! This was exactly what I was looking for :) — 3r1nnn

Pragmateek Pragmateek · Accepted Answer · 2014-09-09T18:06:58

You'll have to handle this yourself, probably with a minimal amount of procedural code (e.g. a boolean property).

If you want to keep things simple then instead you could show the state in another way, like leveraging the BorderBrush to display the Button's Background.

Here is the full template:

<ControlTemplate TargetType="{x:Type Button}">
    <Border x:Name="bdr" CornerRadius="22" Margin="3" BorderThickness="2.5" BorderBrush="Black" Background="{TemplateBinding Background}">
        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Content" />
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="bdr" Property="Background" Value="#ABBEC9"/>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="bdr" Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource AncestorType=Button},Path=Background}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

How to disable mouse over effect visibility temporarily on button click?

1 Answers