This video looks at the toggle button family. They can be switched on or off by the user. In other words, the user toggles the state of the button each time they click on the button.
- [Instructor] On this class diagram, I have the three toggle button classes. There's the toggle button class itself, and there's the check box and radio button, which are both derived from toggle button. The purpose of the toggle button is that it can be switched on or off by the user. In other words, the user toggles the state of the button each time they click on the button. In most scenarios, you'll use the check box and the radio button, you will not use the toggle button itself on your UI. Unless you provide a custom control template for the toggle button.
Because its default appearance is pretty boring. Having said that, for this video I do want to use the toggle button because I want to concentrate on the properties and events that are defined here before moving on to see the extra implementations that are provided by the check box and the radio button. So let's talk about those properties. Just a minute ago I said when the user toggles the state of the button each time they click on the button. What they're toggling is this Boolean property, which is called is checked.
So the user comes over to click on the button, is checked, gets set true. The next time they click on the button is checked gets set to false. Also, there is these events, checked and unchecked. Checked event fires when is checked is set to true. The unchecked event fires when is checked is set to false. As you can see there's a third event here called indeterminate, there's also a property up here called is checked. These are useful but I'll hold off a discussion on those until we get to the check box video.
Here's the UI for the application. I have three toggle buttons, here's how I define one in my ZAML toggle button. And then I put a text block inside of it. Or here, I add a toggle button and I use the content property. Before I show you any of the code, let's just see what a toggle button looks like when you run it in the application. Right, this top one is the one that I'll toggle on and off. Currently it's in the gray color, which means it's in the unpushed, is checked is set to false.
I'll mouse over this button and you'll notice that it changes appearance so we know that I'm hovering over that button. And then when I move my mouse out of it it changes back to the gray. Now I'll move in there and I'll click and then move out of sight. And you'll notice that the button retains the blue color. That's the signal, that's the UI signal to the user that we are now in the toggled on position. And for the developer, the is checked property is now set to true. Now I move in here and click again and move my mouse outside the boundaries, and you'll see it's back to the gray.
As I said a minute ago, the UI is not that exciting for the toggle button in this simple implementation. The blue color is slightly different. Let's just look at that one more time. Check out that blue color and then check out the blue color again. It changes, there's a slight difference in the blue color. That's supposed to be the indication to the user that that's toggled on. This is why we end up using the drive types like radio button and is checked because there's a more pronounced difference and the user can tell more easily that we're in the toggled state.
As a programmer, you'll want to know whether the button is toggled on or off. I mean that's the whole reason why we put these buttons on our UI, is there's a Boolean choice in the UI that the user makes, and then later we'll use that Boolean selection in our code, when we decide what to do with their choices. So let's see how we can check the is checked property. On this button, I've wired up a click handler, so it's the normal button click event handler here. And I will check the is checked property in code, but before I do that I want to show you that you can toggle on the is checked property in your ZAML.
So if I want this to initially be in the toggled on state, I can go to this button and set is checked is true. And now you'll see over here in the designer it's that blue color. And if I set this to false, it goes back to the gray color. That's the default. You'll also notice there was a possibility of using this null value, that's how you do the indeterminate state, but I'm not talking about that yet. I'll hold off on talking about that until we get to the check box video. So I'll set this to true.
And then we'll go down here and we'll look at the code in this click event handler. It's a straightforward code on line 35, I'm looking to see if is checked button is checked property is set to true. If it is then I'll hide the image. Otherwise I make it visible. Keep your eye on this image. Toggle it off. And toggle it back on. Also it does the same thing for this button. I just used a different implementation.
So for this last demo, I'm using those new events. So you'll see here in this toggle button I've got a checked event handler and an unchecked event handler. So now I don't need to use the if test and the else clause anymore because this event will only fire when is checked is set to true. And this event will only fire when is checked is set to false. So does it simplify my code? Perhaps. You be the judge.
And click on it one more time to verify that it's working as you'd expect.
- Interactions and controls
- UIElement family
- FrameworkElement family
- Shape family
- Decorator Family
- Control Fundamentals
- Button family
- Text Editor family