This video continues the step to build the content for the main page. See how to set the properties on the SplitView and write code to interact with the menu items.
- [Instructor] It's time to look at the SplitView in more detail. The SplitView is the UI that's on my main page. So I'll start by looking at what's in the SplitView.Pane. This is where I define the UI that appears when the pane slides into view. We've got a grid in here that has two rows. The first row contains my button and the second row contains some other UI that will be showing at the bottom of the pane. I also have several toggle buttons in here. This first toggle button is called MenuButton.
That's this button right here. And the reason I'm using a toggle button is you can press it and that activates it, and then when you press it again it deactivates it. The benefit of using this over something like a checkbox, which works exactly the same, is that a checkbox has a different UI. This one looks more like a button. Let's talk about this hamburger menu here. How did I get that? So inside the toggle button for the content, I am using an element called FontIcon. This is a way of using one character out of a font-face.
So what I've said is this FontIcon is using the FontFamily "Segoe MDL2 Assets." I'm setting it's FontSize and I'm using a glyph. Glyph is a property, it's another way of saying one of the characters out of the FontFamily. So the idea behind the Assets font is it is a Bicon font, so it only has icons in it. So right now you see this glyph looks like the hamburger menu, but if I change this to another number, say 701, now it looks like a Wi-Fi signal.
So that's how I get the UI to do the same thing down here. The only difference is I have a StackPanel and then I have a FontIcon and a TextBlock in there, or next to each other because the orientation of the StackPanel is set to "Horizontal" and then I have the text "Home" next to the Home icon. Let's go back here. What I want to have happen is when I press the toggle button, I want to make the menu wider so you can see it. And when you toggle the button a second time, I want to hide it. So let's start by doing that.
I will add two event handlers. We'll use the Checked handler, so I'll press Tab and then Tab again to stub in an event handler here. And then I'll do the same thing for Unchecked. Tab, tab. And I'll press F7 to switch over to hood behind, then here in the checked, I'll say SidebarSplitView.IsPaneOpen = false, is equal to true, I should say, not false.
And then when it's unchecked, I'll set it to false. And then, I'll do one more thing, I will have some LogoText and I'll set it's visibility to Visible, here, when the menu is checked and I'll set it to Collapsed when it's not checked. So here's what it looks like when you run the application. Now that the pane is open, I can see the text Home, Videos, and Live, and I can also see Orange Valley in the bottom.
When I toggle it again, the text disappears in the bottom of the page and the pane is closed. But the pane is not completely closed. So why is that? Let's see what property is making this show up here. So I can still see the icons. I'm not entirely hiding the pane. And when I collapse it, I can still see the icons but I can't see the text. Now how do I make that work? That is a property up here on the SplitView.
So there is this mode called DisplayMode and has four properties. The first two, CompactInline and CompactOverlay means that when the pane is closed, there's still some of the pane visible. And the width of the pane that's visible is set here with the CompactPaneLength. So I say 60 pixels, I want 60 pixels visible and that's just enough to show the house icon and the video icon and the person icon. So I've got two compact choices and I've got two non-compact choices.
So what's the difference between these two? So if I've got Compact set, that means when the pane is closed, I can still see some of the UI. So what's the difference between Inline and Overlay? Well, for Inline, either CompactInline or regular Inline, or CompactOverlay or regular Overlay, if it's Inline, that means that when the pane opens it moves the rest of the UI that's in the content section of the SplitView over to make room. If you're set to Overlay, that means that the pane floats over top of the main content.
That's the difference. So I've got mine set to CompactInline. I said that pane is not open to start with. And I say my CompactPaneLength is 60 and my OpenPaneLength is 200. So you will adjust these to get the UI look that you want out of the SplitView.Pane.
- 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