This video looks at how to switch from the default mouse mode to a mode that supports more traditional controller navigation. This alternate mode is called XY focus navigation and it's set with the RequiresPointerMode property in the app constructor.
- [Narrator] In this video I'll look at how to switch from the default mouse mode to a mode that supports more traditional controller navigation. This mode is called XY focus navigation, or it's sometimes called directional navigation. Before changing the settings, let's look at the pages in the project. They're in this demo pages folder. There's this interaction page, which consists of several buttons, a text box, and a slider, which I'll use to manipulate the size of this image.
There's the keep pointer page which consists of two buttons, and then there's the browser page which has a text box which contains the URL for the lynda.com website. There's a button, and then below that is a web view and the source of this web view is coming through a binding to the text property on this text box. It's time to run the app and see how these pages use the default mouse pointer in the Xbox. I'll click on the remote machine button to debug the application.
App is running on the Xbox. You see that I have the standard pointer on the main screen that I move with the left joystick. Here's the three demo pages. I'll select this item. It's just the interaction page. You'll notice that as I move the pointer over the various controls that I get a highlight rectangle, and when I press the A button I'll get an animation that shows I've selected that button. When I move over this text box I get a selection rectangle and now when I press the A button I get the keyboard and I can type in new letters, and then I press the B button to remove the keyboard.
Now I get the pointer back. To interact with this slider I'll move the pointer over to the slider bar, hold down the A button, and then use the left joystick to move the slider. I'll move to another page now. This is the keep pointer demo and you'll see that it has the same features. It has the same pointer, the same interaction. For the third demo page, this is the browser page. You'll see that at the top I've got the text box and the go button and on the bottom I've got the web view which is showing the lynda.com webpage.
I'll press the A button while the pointer is over the web view. Now the pointer is inside the web view, and this is interesting, but as I try to move up on the screen, you'll see that I hit the edges of the browser, and the pointer will not leave it. In other words, this control is capturing the pointer within its boundaries. I could use this so that I could scroll up and down. Now I can press up to scroll up above the beginning of the page, or I can go to the bottom of the page and use it to scroll down the page.
Press the B button to escape out of the web view, and now I'm back on the main page, and then I can go over here, and go to the main page of the application. Now let's return to Visual Studio and see how to switch out of the mouse mode. Here in Visual Studio I'll change the mouse mode. This is typically set in the app start up process, which means the code is here in app.zaml.cs. I'll modify the code in the constructor.
I'm setting this requires pointer mode property to this value, application requires pointer mode when requested. Requires pointer mode is a global setting that affects the entire app, and I'm setting it to when requested. Let's dig deeper. What does this mean? Think of it this way. With this global setting, the pointer is not shown in the app unless it is specifically requested by a user control. Most of the built in controls like the button and text box won't request it, but there are some like the web view browser control that do enable the pointer.
Now I've set this at the global level. I can opt into the pointer mode at the page level. Do that by going to this demo pages folder and opening this keep pointer page. Here in the constructor for this page, I'll set this page level property called requires pointer to requires pointer when focused. That means that when the focus moves to this page the pointer is re enabled. Let's see what this looks like on the Xbox.
I'll click on the remote machine button. In the app, the pointer is no longer shown on the screen. That's because I'm in the XY navigation mode, which is called XY focus or directional navigation. So you see that instead I have the white selection rectangle and now when I use the D pad or the joystick, the left joystick, it'll move the focus among these items. If I keep moving to the left I'll end up over here in the split view control on these buttons, and now I can come up here, press the A button to expand this menu, and then go down here to open our first demo page.
This is the interaction page. Currently I'm in the split view on the left side of the screen, and I want to move into the content area, which is the interaction page, and all I need to do is tap right. Now I'm moving around inside the element inside the interaction page and some of these controls, like this text box, as I move into them, will add some extra features. It'll pop up this little message box that says you need to type some text here. If I press the A button the Xbox will show the keyboard, on screen keyboard.
So I can type in new words. Then I can press the B button to hide the keyboard and return the focus to the text box. Now I'll tap down to move the focus to the slider, and what I want to do here is move the value of the slider with the controller. So if I try to tap right, nothing happens. If I tap left, the focus moves from the slider to the button. So what I need to do is tell the Xbox, or my application, that I want to manipulate the slider.
So while the focus is on the slider I press the A button. That moves the focus to the blue item. That's called the thumb. So it's on the thumb now, and now when I move left and right, it's moving the slider thumb and that's changing the value, and that's manipulating the image. I move left, it makes the value smaller. I can't get over to the example three button until I press the B button to move the focus back to the normal mode. Now I can go back over here.
Next, let's look at the demo two page, which is the keep pointer page. As I move right word you'll see that the focus does move to the example six button, but I also get the pointer back, and that's because this page opted in to showing the pointer when it had the focus. This is the web view page, and I want to move the focus to the text box. Now you notice that it automatically moved the focus on this page to the web view.
So I didn't get an opportunity to move there. You'll see the white selection rectangles on the web view, and what I want you to see is when I move around inside the web view I got the pointer. So in this case, the global setting is to not have the pointer, but this control has requested the pointer. So when the app detects that the cursor is within this web view it shows the pointer. Now to get out of this I'm going to have to press the B button and then the up on the joystick.
Now the focus is over here on the menu bar on the side, and if I want to move to the text box at the top of this, I'll move down here and then I'll move rightward. So that's our quick overview on how to configure the controller action and what it means when you run the app using this new mode.
- Configuring the deploy and debug settings
- Understanding the controllers
- Using the KeyUp event with controller buttons
- Understanding XY focus navigation
- Choosing a good initial focus
- Understanding Xbox UI scaling
- Working with sounds