How to set/change/remove focus style on a Button in C#?

Question

I have a couple of buttons of which I modified how they look. I have set them as flat buttons with a background and a custom border so they look all pretty and nothing like normal buttons anymore (actually, they look like Office 2003 buttons now ;-). The buttons have a border of one pixel.

However when the button gets selected (gets the focus through either a click or a keyboard action like pressing the tab key) the button suddenly gets and extra border around it of the same colour, so making it a two pixel border. Moreover when I disable the one pixel border, the button does not get a one pixel border on focus.

On the net this question is asked a lot like 'How can I disable focus on a Button', but that's not what I want: the focus should still exist, just not display in the way it does now.

Any suggestions? :-)

Answer 1

Certainly you can draw the button yourself. One of the state flags is focused.

So on the draw event if the flag is focused go ahead and draw the button how you like, otherwise just pass it on to the base method.

Answer 2

Consider implementing your own drawing code for the button. That way you have full control. In the past, I've implemented my own Control derivative that custom paints my button and implements all the button characteristics for my purposes, but you should be able to override the button's painting and do it yourself, thereby controlling how it draws in every state, including when focused.

Answer 3

Is this the effect you are looking for?

public class NoFocusCueButton : Button
{
    protected override bool ShowFocusCues
    {
     get
     {
      return false;
     }
    }
}

You can use this custom button class just like a regular button, but it won't give you an extra rectangle on focus.

Answer 4

The second border which gets added is the Windows standard "default button" border. You may have noticed that if you tab through most dialog boxes with multiple buttons (such as any Control Panel properties window), the original "double-bordered" button becomes "normal," and the in-focus button becomes "double-bordered."

This isn't necessarily focus at work, but rather a visual indication of the action undertaken by hitting the Enter key.

It sounds, to me, like you don't really care about that internal working. You want the display to not have two borders -- totally understandable. The internal working is to explain why you're seeing this behavior. Now ... To try and fix it.

The first thing I'd try -- and bear in mind, I haven't validated this -- is a hack. When a button receives focus (thereby getting the double-border), turn off your single border. You might get the effect you want, and it's pretty simple. (Hook into the Focus event. Even better, subclass Button and override OnFocus, then use that subclass for your future buttons.)

However, that might introduce new, awkward visual side effects. In that vein -- and because hacks are rarely the best answer -- I have to "officially" recommend what others have said: Custom paint the button. Although the code here may be overkill, this link at CodeProject discusses how to do that (VB link; you'll need translate). You should, in a full-on custom mode, be able to get rid of that second border completely.

Answer 5

There is another way which works well for flat styled buttons. Don't use buttons but labels. As you are completely replacing the UI for the button it does not matter whether your use a button control or a label. Just handle the click in the same way.

This worked for me, although not great practice it is a good hack and as long as you name the button obviously (and comment the source) other coders will pick up the idea.

Ryan

Answer 6

Set the FocusVisualStyle dependency property to null in your style, and the dotted border will be gone.

From MSDN: Styling for Focus in Controls, and FocusVisualStyle

Windows Presentation Foundation (WPF) provides two parallel mechanisms for changing the visual appearance of a control when it receives keyboard focus. The first mechanism is to use property setters for properties such as IsKeyboardFocused within the style or template that is applied to the control. T**he second mechanism is to provide a separate style as the value of the FocusVisualStyle property; the "focus visual style" creates a separate visual tree for an adorner that draws on top of the control,** rather than changing the visual tree of the control or other UI element by replacing it. This topic discusses the scenarios where each of these mechanisms is appropriate.

The extra border you see is defined by the FocusVisualStyle and not in the control template, so you need to remove or override the style to remove the border.

Answer 7

Another option (although a bit hacktastic) is to attach an event-handler to the button's GotFocus event. In that event-handler, pass a value of False to the button's NotifyDefault() method. So, for instance:

void myButton_GotFocus(object sender, EventArgs e) { myButton.NotifyDefault(false); }

I'm assuming this will work every time, but I haven't tested it extensively. It's working for me for now, so I'm satisfied with that.

Answer 8

If you have a textbox and a button then on textchange event of textbox write button1.focus();

It will work.

Answer 9

Make a custom button:

public partial class CustomButton: Button
{
    public ButtonPageButton()
    {
        InitializeComponent();

        this.SetStyle(ControlStyles.Selectable, false);
    }
}

That'll get rid of that annoying border! ;-)