As the user moves around the application interface the interaction focus moves from control to control. In WPF there are two kinds of focus, keyboard and logical. Keyboard focus is the easiest concept to understand and that's what is commonly meant when we say focus.
- [Instructor] In Windows, the user can only interact with a single control at a time. While they are interacting with a control, that control is said to have focus. In this example, the focus is currently on the TreeView on the left side of the screen. I'll shift the focus by clicking with the mouse on this text box. As the user moves around the application interface, the interaction focus moves from control to control. In WPF, there are two kinds of focus, keyboard and logical.
Keyboard focus is the easiest concept to understand and that's what's commonly meant when we say focus. That's also the topic of this video. Simply stated, in WPF, the control that currently accepts key presses is said to have the focus. In this video, I'll explore three aspects of focus. What does it mean to accept key presses? How does WPF indicate focuses on an element, and how to shift focus to another element. I'll start by looking at this last topic, how to shift focus to another element.
One way is to use the mouse. Currently, the focus is in this B text box. I'll move the mouse over here to the D text box and click. Now the focus has moved to that text box. To shift the focus to the TreeView, go over here and click with the mouse. There are several other places I could send the focus. I could send it to the tabs at the top of the page. I can click here, that shifts the focus to the tab control. And finally, I can shift the focus to the buttons, but I'll talk about that in a minute.
The second way to shift the focus is when you've selected an item. So that one is tab index, there's actually two tab items on this tab control. Now that I've set the focus there, I can use the left and right arrow to shift between the two of them. I'm moving the focus to another tab item. The other way of shifting the focus is by using the tab key. So I'll move over here to the TreeView, and then press the tab key on my keyboard, and that moves the focus to the tab control, then to the page.
It's hard to see, but there's a dotted outline around the outside edge of the page, and then I press it one more time, and the focus moves into the first text box on this page. I have several other videos in this chapter that talk about how to work with the tab key and focus. The second topic is how does WPF indicate focus is on an element? That entirely depends on the control developer. Each control developer, when they create their control, they decide how to change the appearance of the control when the focus is moved to that element.
Obviously in the text box, you can tell that the focus has moved there because the cursor has changed. There's a blinking cursor inside the text box. There's also another, more subtle indicator. Look at the border around this text box. It's a blue color, whereas all the other borders on the text boxes on this page are a gray color. As I move the focus to another text box, you'll see that the blue border shifts. In the TreeView, you can see the focus is there by the color of the background of the TreeView node.
When I pick the tab item, you can obviously see that this tab item is selected because of the color, it's a white color. Now when I press the left arrow to select the other tab, you can see that the focus is here because there's a dotted outline around this tab. Now I'll go look at these buttons. I'll click on the okay button, and then I'll press the tab key ones. And that moves the focus to the save button. Again, you can see there's a visual indicator, there's a dotted outline on there that tells the user that the focus is on that.
So the third aspect of focus is what does it mean to accept key presses. Remember, a few minutes ago I said, in WPF there are two kinds of focus, keyboard and logical, and in keyboard focus, that means the control currently accepts key presses. So what does that mean? Well once again, it depends on what the control developer decided to do. What key presses are accepted while the focus is on that element, and what do they do? So let's take a look. In a text box, the obvious thing that pressing keys on the keyboard does is type in new text.
But that's not all you can do. I can also use the arrow keys on the keyboard to move to another character within the text box. When I choose the TreeView, the focus is now on the TreeView. What does it mean for key presses here? Well, if I press the up and down arrow, it shifts to different nodes. If I press the right arrow, nothing happens. If I press the left arrow, that moves the background to this top element here in the TreeView of this node.
Now if I press the left arrow again, it collapses all the children nodes, and if I press the right arrow, it expands them. So the point here is, the key presses manipulate the nodes in the TreeView. What about if I choose the button? Press the left and right arrow here. What's happening here is you'll see that the focus is moving between the buttons. Those buttons are inside a stacked panel, so it's moving between those three buttons. Typing letters on the keyboard doesn't do anything on these buttons.
Using the arrow keys moves from one control to another. There is one key stroke that does mean something for that button though, and that's the enter key. If I press the enter key, that's the same as clicking on that button, and I'll talk more about that in another video in this course. So what we've seen here is that focus is how you move the interaction point into an element. Once you've moved into the element, that control then has feedback to tell the user that that element has the focus, and then when you have keyboard focus in an element, the developer of that control decides what it means when you're typing on the keyboard, which keys will work in that element and what do they do? What behavior do they invoke inside that control?
- Interactions and controls
- UIElement family
- FrameworkElement family
- Shape family
- Decorator Family
- Control Fundamentals
- Button family
- Text Editor family