Join Scott Peterson for an in-depth discussion in this video Using layout panels, part of Developing UWP Apps: 1 Layout and Navigation.
- [Instructor] We flipped over to Visual Studio 2017 to take a look at the concept of layout panels and controls that effect the layout of a screen. But since this is the first session in the series, the first thing we want to do is create a new Universal Windows Platform app. Now, for this entire series, we're going to be creating this cool app called tagur that's going to do some cool cognitive services analysis on images and videos and let us upload into OneDrive and do all kinds of great things, but first we need to create that app.
So I'm going to select Universal Windows Platform C#, blank app. I'm going to call it tagur. We'll select the platform defaults there and that'll scaffold up the project for us. There we go. And so, remember the concepts that we're going to look at here are really the differences in some of the common layout controls. And you'll notice, by default, a page gets created with a grid as the layout control or the layout panel here. You'll also notice, by default, that the design surface can be adjusted for target devices.
So by default, we've got this five inch phone that we're looking at. If we go down here, pick a standard desktop, like a 23 inch desktop, we've got something that looks more like a desktop-size design surface now. Here we go. You'll also notice in the dropdown, we can easily say, "Hey, how will this look on an Xbox? "Or a Surface Hub, or a HoloLens even." So that's pretty cool just to be able to do that in the designer without having to run anything or pull up an emulator. Let's take a look at a couple of these layout panels.
So the first one that's pretty common is this canvas. So let's say we make a canvas, and we'll give the width of 600 and the height of 600. And let's just add a border inside it, and we'll make that border width of 200 and a height of 200. And we'll give it a background of Aquamarine. So you see that we've got this simple 200 by 200 box in there.
With a canvas, we can go ahead and drag that anywhere that we want, and this is going to work like absolute positioning in CSS very much. So it's going to say we've got a canvas this size and the left is going to be 762, relative to the canvas, and the top, 130. And so that's great. What happens now if we just say HorizontalAlignment="Left" and we'll say VerticalAlignment="top"? Then you see how the whole canvas itself is up there at the top.
If we were go ahead and run that, we could take a look at that, what that would look like on the desktop. Okay, great. So that looks about how you would expect, and of course, we can throw any controls we want on that canvas and they would basically be absolutely positioned. This is only helpful if you have a grouping of controls that you need to look exactly the same no matter what changes. I find that I rarely, if ever, need to use the canvas at this point.
It's more of an old school technique. Let's look at a second one though. We can just go ahead and add these grids all day long in here, and if we were to add a grid by default, it's going to take up the entire screen. We could just say, for this one as well, we'll do 600 by 600 and we see that it'll be centered in there. And now, there's a couple of ways that we can add rows and columns to this. We could just do it through the design surface. And we'll say this will be sort of three by three here.
And it's just kind of sloppy in here, but we don't really care. The idea here is that there's a couple different ways we can manage these rows and columns. We can make them exactly a certain width or height. So I can say I want that first column and row to be exactly a hundred pixels, no matter what. I could just say auto, which is going to size itself to the content, or I could give it a star or a number with a star and it would expand itself to the rest of the parent element. So if it was a screen, it would fill up the screen. If it was this 600 by 600 area, it would just fill it up that way.
So we've got this grid layout like this that we could take a look at. I can go ahead and add elements directly to that grid as well. So let's say that I want to throw in a border. I'll stick the border in there, and you see that the grid column is two and that the grid row is two. Now these are zero based, so it's Grid.Row zero, one, two, like that. We'll give this a background of Black, and you'll see how we got that in there. If we were to just change the grid and row, simply here, we'll just throw it up to a different row, different area.
So let's go ahead and make a couple of those there. We'll throw another one in. We'll make that one column one, and we'll change that row to row two, so it's going to throw it down there. You sort of see how this is going to lay out there. If we were to change this, and make them all star, notice how it's going to fill it out evenly like that as well. If we were to change these to auto down here, notice how we have that changed there as well.
Now, grid is great if you know exactly what kind of elements are going to be in the canvas and exactly how they should be aligned. So with the grid, we're always going to say, "We know we want three rows in this example, "we know we want three columns." Sometimes, you don't know that, and sometimes, things might need to be hidden, visible true or false, and this makes it difficult. So if we had a box here, if we had a border here. For example, we'll throw that over there.
Get rid of that margin. If we had a box here, and we wanted all of these elements to scoot over automatically, depending on if they were visible or not, this grid is going to be visible no matter what. That makes it a little bit difficult when you're trying to manage things, elements that need to be stacked properly together. So when elements need to be stacked together, it's more appropriate to use a StackPanel. So the cool thing about a StackPanel is you can just really add anything in here that you want.
So let's just throw a bunch of stuff in here. We'll just say we've got a border, and we'll do background of Azure, and we'll make that a hundred by a hundred. And we'll add another one there and we'll make the background Red, and then we'll take another one there and make it RosyBrown.
And notice how we've got these elements there, we'll make that a little darker here. Let's make that Gold. So notice we have these elements that are stacking, and if I were to say visibility is collapsed, that panel is automatically going to adjust the height. With a StackPanel, we can change the orientation as well. We can say, "You know what, "I want that orientation to be horizontal." And the cool thing about this is that it's great for menus. So if I wanted menus that are going to get created vertically or horizontally, all I'd have to do is collapse one element and they're all going to scoot over appropriately.
So if I were to take this and add a TextBox in there, text block in there, I could say, Text="Menu 1", and we give that two, three, four. We'll bump up that font size.
So that's great. So we can have a menu that goes across. We could give that an orientation, excuse me, we can give that a vertical alignment of top, so it'll stay right at the top. So this'll be something you typically see in a menu. You'd have this sort of panel that goes vertically or horizontally. If we were to add a couple more elements to that, this works great. And then if we were to change the visibility on that, we could say Visibility="Collapsed", it's automatically going to collapse those menu items.
So if we have some kind of dynamic menu that we're working with, that works great, 'cause we could just do this all day. So the problem with that is what happens when our screen isn't wide enough for that? So if we were to load this up on the desktop, I mean that looks great. That's fine there. But see what happens when we change the screen? It's not going to wrap there. It's going to be too wide for that. So for those kind of scenarios, sometimes it's helpful to have a VariableSizeWrapGrid.
So now, with a wrap grid, what we could do is we could say, "We want the orientation "of that to be horizontal." We'll take that visibility off there. Let's take a look at what happens now if we were to run that on the desktop. So now, it looks basically like a stack panel. But look what happens when we change the size of it. Now we've got the ability to have it automatically wrap using the wrap grid. So this is really helpful.
Now, every single one of these layout controls is appropriate based on the context that we're in with the app. The important thing here is that we understand that they all function differently based on the user interface elements, and what I've found in most robust app environments, we're using a combination of all of these panels. So if we take a look at that as, well, for example on a phone. Let's load up this Mobile Emulator here. We'll run this app. This is where something like the VariableSizeWrapGrid comes in handy.
The problem with the VariableSizeWrapGrid is even though it's called VariableSizeWrapGrid, you're not going to be able to have varied sized elements automatically adjusted the height and width. So if we load it up here, notice how, even though it was horizontal on the orientation, the UI understood that it couldn't fix a second one here, but if we go like this, notice how it wraps like this. So the variable size wrap panel is pretty cool. We can nest that and use it as a panel template as well in items controls as well.
Okay, great. So that kind of gives us a brief look at a few of the most common layout controls there. But, again, still really boring. Not a lot's going on here. Let's flip back over to the Slide Deck and see if we can do the few things that might make more sense when we're building our app layout.
Note: This course was created by Wintellect. We are pleased to host this training in our library.