Home > Software engineering >  How to correctly highlight buttons on click?
How to correctly highlight buttons on click?

Time:12-03

So I have built an application in C# using Winforms and my application uses a few different buttons. I'd like to have a highlight on the button that has been clicked to show what 'tab' you're in.

I've tried doing the following;

// BUTTONS //
private void dashboard_btn_Click(object sender, EventArgs e)
{
    // Load Form
    OpenChildForm(new FormDashboard());
    dashboard_btn.FlatAppearance.BorderColor = Color.Red;
    dashboard_btn.FlatAppearance.BorderSize = 1;
}

However, this of course doesn't work nicely since it adds a border around the button but when I click another button the border also stays around the previous button.

How would you implement a feature to add a border around the button that get's clicked but have the border disappear after you click another button?

Thank you for any feedback!

EDIT:

I've implemented Jimi's advice and used the Leave event to change the border around the button back to 0. However I'm not sure how to implement this in a global way so all my buttons are subscribed to this event.

My code now looks like this;

// BUTTONS //
private void dashboard_btn_Click(object sender, EventArgs e)
{
    // Load Form
    OpenChildForm(new FormDashboard());

    // Button Highlight
    dashboard_btn.FlatAppearance.BorderColor = Color.Red;
    dashboard_btn.FlatAppearance.BorderSize = 1;
}
// BUTTON REMOVE HIGHLIGHT //
private void dashboard_btn_Leave(object sender, EventArgs e)
{
    dashboard_btn.FlatAppearance.BorderSize = 0;
}

CodePudding user response:

This might lend itself to a RadioButton style functionality because clicking a different radio button in the same container will uncheck the others. So, to implement the "generalized approach" that you mention in your comment, you could make a simple custom RadioButtonEx class where the Appearance property is set to Button then change your border style when the Checked property changes. In this example, the Click event has been changed to static so that clicking on any button directs the event to the common onAnyClick method.

public partial class MainForm : Form
{
    public MainForm()
    {
        InitializeComponent();
        RadioButtonEx.Click  = onAnyClick;
    }

    private void onAnyClick(object sender, EventArgs e)
    {
        label1.Text = ((RadioButtonEx)sender).Text;
    }
}
public class RadioButtonEx : RadioButton
{
    public static new event EventHandler Click;
    public RadioButtonEx() 
    {
        FlatAppearance.BorderColor = Color.Red;
        FlatAppearance.BorderSize = 1;
        Appearance = Appearance.Button;
    }
    protected override void OnCheckedChanged(EventArgs e)
    {
        base.OnCheckedChanged(e);
        if(Checked)
        {
            FlatStyle = FlatStyle.Flat;
            Click?.Invoke(this, EventArgs.Empty);
        }
        else
        {
            FlatStyle = FlatStyle.Standard;
        }
    }
}

screenshot

  • Related