Best way to combine Play and Pause button?

Question

Hi, this is more of an advise thread I guess. I've been wondering how one could create a button which display "play" when it's not pressed. And then shows "pause" once it's pressed. And visa versa when it's pressed again.

I had a similar problem when trying to create an expand panel button, but that was easy because I could just set a variable to true or false if PanelCollapsed was true.

But in this case I couldn't find any property in a button that I could query. So I came up with this but I can't help thinking that this is a rather unsmart way of doing it?

    If isPlay = True Then
        If isPaused = False Then
            btnPlay.Image = Image.FromFile("iconPause.png")
            isPaused = True
            isPlay = False
        End If
        GoTo Endline
    End If

    If isPlay = False Then
        If isPaused = True Then

            btnPlay.Image = Image.FromFile("iconPlay.png")
            isPaused = False
            isPlay = True
        End If
    End If

Endline:

Answer 1

Most .NET WinForm controls have a 'Tag' property (a button has one). You can set the Tag to be anything you want. An easy way to do this is to set the 'Tag' property to a boolean with the state of the button.

Just an idea...sure there are many other approaches.

UPDATE: Otherwise, you can maintain the state of the button in your application as its own member variable. This might have several advantages because you can pass this state to other controls that might need it. The only weakness with this approach is that the state must be maintained separately.

If you have a fairly straight-forward implementation, use the Tag property.

Answer 2

I don't personally use Visual Basic, but I do know that Buttons in Windows Forms have a property called 'Tag'. It is of the generic object type, so you can save whatever state you want, and just use casting to get the value back out.

Answer 3

How about using only one variable and code like this:

If isPlay Then
    btnPlay.Image = Image.FromFile("iconPause.png")
else
    btnPlay.Image = Image.FromFile("iconPlay.png")
End If

isPlay = not isPlay

Answer 4

You can use the "Tag" property. Its type is "object" so you can use any object you want, but in your case a string will do:

    If Button1.Tag = "Pause" Then
        Button1.Image = Image.FromFile("iconPlay.png")
        Button1.Tag = "Play"
    Else
        Button1.Image = Image.FromFile("iconPause.png")
        Button1.Tag = "Pause"
    End If

Answer 5

How about using the "Image" property?

Rem form initialization
ImagePlay = Image.FromFile("iconPlay.png")
ImagePause = Image.FromFile("iconPause.png")
Button1.Image = ImagePlay
.
.
.
Rem on button1 click
If Button1.Image = ImagePlay Then
  Button1.Image = ImagePause
Else
  Button1.Image = ImagePlay
End If

Answer 6

A contrary opinion ...

... while other answers have given you some techniques to achieve your desired result, I'm going to ask you to reconsider your UI design.

Dual state buttons - ones that alternate purpose when clicked - can be a source of user frustation.

Here are two scenarios.

Scenario #1 ... if the users machine is under load (for any reason), there may be a perceptible delay between the users actual click on your button and when your click handler is executed.

Normally the time between click and handler is a few milliseconds or less, but it can run to several seconds. If this happens when the user clicks on a dual state button, they are likely to click the button again. Net effect, when the application catches up, is to toggle on, then immediately off again.

Scenario #2 ... many users habitually double click everything. Even experienced users who've been using computers for years may have this weird habit. When they try to press a dual state button, guess what happens ... the action toggles on, then immediately off again.

There are at least two solutions ...

Solution #1 ... use two buttons, one for "On", one for "Off".

Solution #2 ... write some debouncing code to suppress the effect of a second click if processed immediately (ie: < 75ms) after the first.