The SplitView is one way to provide a slide-out menu bar to an application. This tutorial shows how to add the SplitView pane and add content to the pane.
- [Narrator] In this demo, I'll look at how to modify the UI in the main page to add a menu on the left side, and I'll use a control called the split view. When you open up a XAML file like I've done here, in Visual Studio it defaults to having a designer on the top and an xml or a XAML representation of the UI there on the bottom. I'm going to change that. I want to remind you that I've set this drop down to show the UI in an X box representation, and I like to switch over to vertical split so that you can see more of the XAML on this screen.
If you don't see the UI here, choose fit all. Here's the split view. The split view consists of two properties that are interesting. One here is split view dot pane, and the other one that's not included here, and I'll add it is split view dot content. Now both of these are containers for UI bits, so the pane is the part that slides into view. So we're going to slide this menu into view and then slide it out of view again. So any of the UI that you want to show up on the pane goes in this part of the split view and the rest of the UI that you want to appear in this section of the UI goes inside the content section.
What I need to do is take the frame that's coming from the app class and I want to make that the content of the split view. So you remember what I did in the last demo. Let me show you over here in main page. As I set the constructor so it takes a frame, and then I set the content of this page as that frame. Well now I don't want to do that anymore. Now I want to make the content of the split view hold the frame. So I just need to modify this slightly.
Let's go look at the name of my split view. I decided to call it sidebar split view. That's the only change I need to make, so now when I run the app, again, I'm running it on my desktop at the moment, and I'll get the sidebar down the screen, and I get the catalog page loaded here inside the frame, and the frame is in this part of my main page. These buttons don't do anything yet.
They are selectable. You can see that I can click on them and they change color, and then if I mouse over them, there is some UI, but they don't do anything yet. They don't load the catalog page or the video page, so I will fix that in the next video.
- Setting up the development environment
- Installing Visual Studio
- Creating a Dev Center account
- Installing and activating Developer Mode on Xbox One
- Pairing Visual Studio with the Xbox
- Mirroring Xbox One content to a PC
- Exploring a UWP app on a PC, mobile device, and Xbox One
- Creating a basic UWP app