How do I prevent WPF buttons from remaining highlighted after being clicked?

Question

When a standard WPF button is clicked, it gets highlighted in blue (probably using the blue color from whatever Windows theme is set), and it stays highlighted until you interact with any other control. For my application, it is confusing for the user.

Is there a simple way turn this off and get the button back to its normal style? I am using .NET 4.

Answer 1

What happens is that the button accepts the input focus after it has been clicked, just like any other control does when you click on it.

And the way that Windows indicates that a control has the input focus (at least under the Aero theme) is with a subtle blue highlight.

For a button control in particular, when it has the input focus, simply pressing the Enter key will "push" that button. That's why maintaining the highlight is very important, so that the user knows what to expect.

The better solution is to set the focus to a different control in your window immediately after the user has clicked on the button. That way, it will no longer be automatically highlighted and no action will be automatically triggered when the user presses the Enter key. (This is the real usability problem that you're trying to solve, even if you don't know it yet. Nothing is more confusing than a button inadvertently getting clicked when the user is actually trying to type something.)

You could prevent the button from ever getting the focus altogether by setting its Focusable property to false, but I would very much recommend against this. Once you've done this, there will be no way for the user to "press" the button using only the keyboard. Well-designed applications should always be accessible to users who either prefer not to or who are unable to use the mouse.

Answer 2

Try to set Focusable to false. The button will be clickable but will not remain focused.

Answer 3

This is the default look for Aero buttons when they have focus. You can either set Focusable="False" or use a custom Style, that doesn't render it differently when the button has focus. Something like:

xmlns:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"

<Style x:Key="BaseButtonStyle" TargetType="{x:Type ButtonBase}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ButtonBase}">
                <theme:ButtonChrome Name="Chrome" Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}" RenderDefaulted="{TemplateBinding Button.IsDefaulted}"
                        RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"
                        SnapsToDevicePixels="true">
                    <ContentPresenter Margin="{TemplateBinding Padding}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                </theme:ButtonChrome>
                <ControlTemplate.Triggers>
                    <!--
                    Do not show blue when focused
                    <Trigger Property="IsKeyboardFocused" Value="true">
                        <Setter TargetName="Chrome" Property="RenderDefaulted" Value="true" />
                    </Trigger>-->
                    <Trigger Property="ToggleButton.IsChecked" Value="true">
                        <Setter TargetName="Chrome" Property="RenderPressed" Value="true" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="#ADADAD" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="{x:Type ToggleButton}" BasedOn="{StaticResource BaseButtonStyle}" TargetType="{x:Type ToggleButton}" />
<Style x:Key="{x:Type RepeatButton}" BasedOn="{StaticResource BaseButtonStyle}" TargetType="{x:Type RepeatButton}" />
<Style x:Key="{x:Type Button}" BasedOn="{StaticResource BaseButtonStyle}" TargetType="{x:Type Button}" />

You'd need to add a reference to PresentationFramework.Aero.dll

Answer 4

That is simply the focussed state. To turn it off you will have to change the focussed state. It's easiest by using Blend.

I do not recommend setting Focusable to false because it interferes with using the keyboard

Answer 5

<Style x:Key="TouchButton" TargetType="{x:Type Button}">
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="ClickMode" Value="Press"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border x:Name="Border" CornerRadius="2" BorderThickness="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
                        <ContentPresenter Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Button.IsMouseOver" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="Red"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 6

I needed to do something similar, but in code at runtime, it looked like this

//You can get this XAML by using System.Windows.Markup.XamlWriter.Save(yourButton.Template)";
             const string controlXaml = "<ControlTemplate TargetType=\"ButtonBase\" " +
                                    "xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" " +
                                    "xmlns:s=\"clr-namespace:System;assembly=mscorlib\" " +
                                    "xmlns:mwt=\"clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero\">" +
                                    "<mwt:ButtonChrome Background=\"{TemplateBinding Panel.Background}\" " +
                                    "BorderBrush=\"{TemplateBinding Border.BorderBrush}\" " +
                                    "RenderDefaulted=\"{TemplateBinding Button.IsDefaulted}\" " +
                                    //"RenderMouseOver=\"{TemplateBinding UIElement.IsMouseOver}\" " +
                                    "RenderPressed=\"{TemplateBinding ButtonBase.IsPressed}\" Name=\"Chrome\" SnapsToDevicePixels=\"True\">" +
                                    "<ContentPresenter RecognizesAccessKey=\"True\" " +
                                    "Content=\"{TemplateBinding ContentControl.Content}\" " +
                                    "ContentTemplate=\"{TemplateBinding ContentControl.ContentTemplate}\" " +
                                    "ContentStringFormat=\"{TemplateBinding ContentControl.ContentStringFormat}\" " +
                                    "Margin=\"{TemplateBinding Control.Padding}\" " +
                                    "HorizontalAlignment=\"{TemplateBinding Control.HorizontalContentAlignment}\" " +
                                    "VerticalAlignment=\"{TemplateBinding Control.VerticalContentAlignment}\" " +
                                    "SnapsToDevicePixels=\"{TemplateBinding UIElement.SnapsToDevicePixels}\" /></mwt:ButtonChrome>" +
                                    "<ControlTemplate.Triggers>" +
                                    "<Trigger Property=\"UIElement.IsKeyboardFocused\">" +
                                    "<Setter Property=\"mwt:ButtonChrome.RenderDefaulted\" TargetName=\"Chrome\"><Setter.Value><s:Boolean>True</s:Boolean></Setter.Value></Setter>" +
                                    "<Trigger.Value><s:Boolean>True</s:Boolean></Trigger.Value></Trigger>" +
                                    "<Trigger Property=\"ToggleButton.IsChecked\">" +
                                    "<Setter Property=\"mwt:ButtonChrome.RenderPressed\" TargetName=\"Chrome\"><Setter.Value><s:Boolean>True</s:Boolean></Setter.Value></Setter>" +
                                    "<Trigger.Value><s:Boolean>True</s:Boolean></Trigger.Value></Trigger>" +
                                    "<Trigger Property=\"UIElement.IsEnabled\"><Setter Property=\"TextElement.Foreground\"><Setter.Value><SolidColorBrush>#FFADADAD</SolidColorBrush></Setter.Value></Setter>" +
                                    "<Trigger.Value><s:Boolean>False</s:Boolean></Trigger.Value></Trigger></ControlTemplate.Triggers>" +
                                    "</ControlTemplate>";

        var xamlStream = new MemoryStream(System.Text.Encoding.Default.GetBytes(controlXaml));
        var _buttonControlTemplate = (ControlTemplate)System.Windows.Markup.XamlReader.Load(xamlStream);
        var yourButton = new Button() { Template = _buttonControlTemplate };

You can see that i comment the ""RenderMouseOver" line

My first hope was using FrameworkElementFactory but i needed to create all the default template.... ALL BY HAND! ;)
Using

System.Windows.Markup.XamlWriter.Save(myButton.Template)

It give me the template i wanted and then removing the Render section was easy.

Answer 7

I found 2 steps solution. The solution is little funny but working . My referance posts are;

How to remove global FocusVisualStyle to all the Controls?

and C# WPF application .NET 4.5 Set Mouse Position

One DLL must be imported , because WPF is not directly supporting mouse cursor move.

1. add System.Runtime.InteropServices to namespace
2. Add two line to the MainWindow or whatever your window's code

[DllImport("User32.dll")] private static extern bool SetCursorPos(int X, int Y);

3. Add these 2 lines to your click event . SetCursorPos(0, 0); ButtonName.FocusVisualStyle = null;

It works for me .

Answer 8

I've resolved this situation, in my case, by using MultiTrigger, and to set the states like this:

<MultiTrigger.Conditions>
   <Condition Property="IsFocused" Value="True"/>
   <Condition Property="IsPressed" Value="False"/>
</MultiTrigger.Conditions>

TO more information see this link.