How to make the button as selected (background color)?

[Sadiq6210]

Hello,

I thought it would be a simple question but I really searched for long time and I didn't get the answer.

Q: How can I make a button as selected with this background color?



In mouse hover the background will be light blue (see Fuel button in the screenshot), I want to stick this light blue background when I click on the button so the user will know he is exploring the content under this button.

[Niya]

A really simple solution could be to change the Button's BackColor to signify a selected state.

It seems what you're asking for is a Button that behaves like a RadioButton. While it is simple to describe, it's not really that simple to implement the exact way you described.

You could subclass the control and override different events to control how it behaves and looks. However, the amount of effort required would be about the same as writing a Button control yourself. And it would take a lot more effort if you wanted it to look just like any other Button since you would have to deal with the somewhat complicated Theming API.

That being said, you should create your own control from scratch and give it the behaviors and look you desire. It's the most painless solution I could think of that doesn't involve trying to change how the Button behaves. This is what I would do if I had the time. If time was a factor and I needed a quick and dirty solution, I'd simply change the BackColor like I suggested at the start of this post.

[Sadiq6210]

A really simple solution could be to change the Button's BackColor to signify a selected state.

It seems what you're asking for is a Button that behaves like a RadioButton. While it is simple to describe, it's not really that simple to implement the exact way you described.

You could subclass the control and override different events to control how it behaves and looks. However, the amount of effort required would be about the same as writing a Button control yourself. And it would take a lot more effort if you wanted it to look just like any other Button since you would have to deal with the somewhat complicated Theming API.

That being said, you should create your own control from scratch and give it the behaviors and look you desire. It's the most painless solution I could think of that doesn't involve trying to change how the Button behaves. This is what I would do if I had the time. If time was a factor and I needed a quick and dirty solution, I'd simply change the BackColor like I suggested at the start of this post.

Thanks Niya for the detailed reply. I know how to change the button background when selected but the background color will be solid not same the light blue in my screenshot.

[OptionBase1]

I'm sure there's plenty of room for optimization, but here is a quick example of what it sounds like you are describing:

  Private btnCollection As New Collection()
  Private btnSelected As System.Object


  Private Sub frmButtonColorTest_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

    btnCollection.Add(btnAvailability)
    btnCollection.Add(btnFuel)
    btnCollection.Add(btnEnergy)

  End Sub

  Private Sub btnButtons_MouseEnter(ByVal sender As Object, ByVal e As System.EventArgs) _
      Handles btnAvailability.MouseEnter, btnFuel.MouseEnter, _
      btnEnergy.MouseEnter

    CType(sender, Button).BackColor = Color.LightBlue

  End Sub

  Private Sub btnButtons_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) _
      Handles btnAvailability.MouseLeave, btnFuel.MouseLeave, _
      btnEnergy.MouseLeave

    If Not btnSelected Is sender Then
      CType(sender, Button).BackColor = Control.DefaultBackColor
    End If

  End Sub

  Private Sub btnAvailability_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnAvailability.Click

    SetButtonClickColor(sender)
    ' Do other Availability button click events

  End Sub

  Private Sub btnFuel_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnFuel.Click

    SetButtonClickColor(sender)
    ' Do other Fuel button click events

  End Sub

  Private Sub btnEnergy_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnEnergy.Click

    SetButtonClickColor(sender)
    ' Do other Energy button click events

  End Sub

  Private Sub SetButtonClickColor(ByVal sender As System.Object)

    Dim objButton As Object

    For Each objButton In btnCollection
      CType(objButton, Button).BackColor = Control.DefaultBackColor
    Next

    CType(sender, Button).BackColor = Color.LightBlue
    btnSelected = sender

  End Sub

[Sadiq6210]

I'm sure there's plenty of room for optimization, but here is a quick example of what it sounds like you are describing:

  Private btnCollection As New Collection()
  Private btnSelected As System.Object


  Private Sub frmButtonColorTest_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

    btnCollection.Add(btnAvailability)
    btnCollection.Add(btnFuel)
    btnCollection.Add(btnEnergy)

  End Sub

  Private Sub btnButtons_MouseEnter(ByVal sender As Object, ByVal e As System.EventArgs) _
      Handles btnAvailability.MouseEnter, btnFuel.MouseEnter, _
      btnEnergy.MouseEnter

    CType(sender, Button).BackColor = Color.LightBlue

  End Sub

  Private Sub btnButtons_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) _
      Handles btnAvailability.MouseLeave, btnFuel.MouseLeave, _
      btnEnergy.MouseLeave

    If Not btnSelected Is sender Then
      CType(sender, Button).BackColor = Control.DefaultBackColor
    End If

  End Sub

  Private Sub btnAvailability_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnAvailability.Click

    SetButtonClickColor(sender)
    ' Do other Availability button click events

  End Sub

  Private Sub btnFuel_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnFuel.Click

    SetButtonClickColor(sender)
    ' Do other Fuel button click events

  End Sub

  Private Sub btnEnergy_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnEnergy.Click

    SetButtonClickColor(sender)
    ' Do other Energy button click events

  End Sub

  Private Sub SetButtonClickColor(ByVal sender As System.Object)

    Dim objButton As Object

    For Each objButton In btnCollection
      CType(objButton, Button).BackColor = Control.DefaultBackColor
    Next

    CType(sender, Button).BackColor = Color.LightBlue
    btnSelected = sender

  End Sub

Thanks OptionBase1 for the code, it is working but the background color is not what I am looking for

This is the result for your code:




And This is the background I want:



The second background looks more professional and it will be changed according to the windows theme. How to get this background?

[JuggaloBrotha]

And This is the background I want:



The second background looks more professional and it will be changed according to the windows theme. How to get this background?

You don't need to do anything special, just use a RadioButton set to Button style and let Windows do the rest as you have already shown in this screenshot. That way it looks professional conforming to the user's theme too.

[Niya]

You don't need to do anything special, just use a RadioButton set to Button style and let Windows do the rest as you have already shown in this screenshot. That way it looks professional conforming to the user's theme too.

Didn't know about this one. Just confirmed it and it is the best solution. Set the Appearance property of a RadioButton to Button.

[jmcilhinney]

You don't need to do anything special, just use a RadioButton set to Button style and let Windows do the rest as you have already shown in this screenshot. That way it looks professional conforming to the user's theme too.

I was coming here to suggest this myself. For CheckBoxes and RadioButtons both, you can set the Appearance property to Button and then control will look exactly like a regular Button. When the Checked property is True, the control will look like a depressed Button, differentiating it from the others. That means that would want to handle the CheckedChanged event instead of the Click event and test that that Checked property was True. It also means that, if you wanted to be able to "unselect" the "button" you would need to uncheck the RadioButton, i.e. set its Checked property to False.

[Sadiq6210]

You don't need to do anything special, just use a RadioButton set to Button style and let Windows do the rest as you have already shown in this screenshot. That way it looks professional conforming to the user's theme too.

Didn't know about this one. Just confirmed it and it is the best solution. Set the Appearance property of a RadioButton to Button.

I was coming here to suggest this myself. For CheckBoxes and RadioButtons both, you can set the Appearance property to Button and then control will look exactly like a regular Button. When the Checked property is True, the control will look like a depressed Button, differentiating it from the others. That means that would want to handle the CheckedChanged event instead of the Click event and test that that Checked property was True. It also means that, if you wanted to be able to "unselect" the "button" you would need to uncheck the RadioButton, i.e. set its Checked property to False.

Great !
I didn't know that I can use RadioButton as a button.
I am trying to do this since 2 weeks using the codes, I cannot believe how simple is your solution. Absolutely, this is the best solution

It is working as a charm, thanks guys for your help and effort.

[travelviews]

Thanks. I am looking something similar. I am still new to visual basic though. Hopefully, I can understand this.