Using the mouse or touch screen to activate the menus is simple to do in WPF. But consider the user that prefers to use a keyboard, or doesn't have a mouse or has a disability where they can't grip a mouse or hold the mouse steady. This video looks at how to add access keys to Labels and Buttons.
- [Narrator] When designing an application interface, there are many factors to consider. Sadly, accessibility is a factor that is often ignored during the design and implementation phase. Here is an example from Visual Studio. I would like to access the Tools Options menu. I have a mouse, so I would click on the Tools menu and then click on the Options menu. That works. Using the mouse is easy in Windows. So is using a touchscreen to activate the menus. But consider the user that prefers to use a keyboard or doesn't have a mouse or has a disability where they can't grip a mouse or hold the mouse steady.
One accessibility route is to enable keyboard access to the menus. In Windows, you can do that with the access key on your keyboard which is the Alt key. So I'll press the Alt key and you'll see that the underscore appears on the menus. So on the File menu, there's an underscore under F. And in the Tools menu, there's an underscore under T. Now I can just tap the T on my keyboard. In this menu, I can see the other accessibility keys. There's a U on this first item. And the one I'm looking for, the underscore, is under O so I'll tap O.
And that takes me to this same menu. Let's see how to implement this same feature set in WPF. To do that, we'll work with a control called the Access Text Control. You rarely use this control on its own. Instead, it's typically implemented inside other controls. The two that we'll look at today are the button classes and the label. Now here's my UI. I have two textboxes, then a set of radio buttons, then three normal buttons, and then another textbox on the bottom.
And I've deliberately created a UI that looks a little funny. The labels up here are above the textboxes, and down here it's next to the textbox on the right side. To create the accessor key, you select the button and then you go to a Content property and you put an underscore in the text. And whatever letter is behind the underscore becomes the accessor key.
So in this case, I used Y. On the OkButton, I put it in front of O. And on the SaveButton, I put it in front of S. I also put it in these two radio buttons. Here it's in front of the R, and here it's in front of G. This is what it looks like when I run the application. I'll press the Alt key and you'll see on my application I now get the underscores under S, O, Y, G, and R. And now I can hold down the Alt key and tap R, and that moves the focus to the red radio button and selects it.
Holding down the Alt key and tapping the G moves the focus to the green radio button and selects it. Now let's try the S. Alt + S is the same as clicking on the Save button. Alt + O is the same as clicking on the OK button. And Alt + Y is the same as clicking on the first button. So, the next step is to figure out how to move the focus into these textboxes. Well, one way you can do that is using the Tab key.
So I can be over here, and I can press the Tab key. And that will move me around the UI. But I'd like to have the same access key features where I can move directly to that by doing Alt + A, Alt + B, and Alt + C. You can't use the text in the textbox to do this, because the text is replaceable by the user. And that's the reason why we have the label. You put a label on the screen. You use the underscore in the label like this.
Now when I run the application and press the Alt key, I get underscores on the labels too. So, the next step is to tell WPF what does that mean. If I do Alt + A, where on the screen am I supposed to go? You and I know that we want it to go to this textbox. I want the focus to move here, but I have to tell WPF that. And to make that happen, I use a binding. So you go to the label, and you say when somebody does the Alt + A for this label, what's the target? Where should the focus move on this screen? In my case, I want it to move to this textbox.
And the name of that textbox is aTextBox. So I'll say target, the property I want to change. Oops, wrong one. I need to do it on the label, not the textbox. Target, then we'll do a binding. I'm going to bind it to an ElementName aTextBox. Then I'll copy this and paste it in here.
I used Control + spacebar to make the intel assist drop down up here again. And then, one more time, delete that, Control + spacebar. Now I've set up my bindings. And I deliberately chose to put the label on the right side so that this just shows that unlike other frameworks like Windows forms, it's not dependent on the order that you put the labels on the page. It depends on the binding.
The binding tells the focus where to go. Alt + C moves the focus to the bottom textbox, and Alt + A moves it to the top textbox. And you know what's going to happen for my last demo. That's right, Alt + B takes me to the middle textbox. And this is the main reason why we have the label. This is the advantage it has over the textblock is that it has this accessor key built into it, and it enables you to make accessibility easier in your applications.
- Interactions and controls
- UIElement family
- FrameworkElement family
- Shape family
- Decorator Family
- Control Fundamentals
- Button family
- Text Editor family