This tutorial starts the process of building the application UI. The core UI component for this application is the TabControl and it's TabItems.
- [Instructor] In this video, I'll look at how to create the main user interface for the application. I'll use this MainWindow.xaml file and double click on it. You can see I have a Designer on the top and my XAML on the bottom. I will use the horizontal split mode for this example, this one here, and I'll make sure that the MainWindow is centered and a little bit smaller. So I'll do Fit all. That's a little bit too small. So another way you can zoom is hold down your Control key and use your mouse wheel. That looks good.
The default UI for a window contains a single child element Grid. Now a Grid is what is known as a layout panel. Layout panels are responsible for arranging their children on the screen. And a Grid is optimized for putting its children in columns and rows. I'd rather use another layout panel called the StackPanel. It's optimized for stacking its children in a vertical or horizontal stack. So what I can do is erase this Grid, and I can do that a couple of ways. I can select it here in my XAML and delete it, or I can select it here in the Designer. You can see it's selected in a couple places, you can see the handles show up here.
And you can also see that it's been selected down here in the XAML Editor, you can see it's in gray. Now I can right click up here and choose Delete. The next step is to add the child, the StackPanel, and I'll do that by opening the Toolbox and pinning it to the side of the window. And while I'm doing this, I'll also pin the Property window. The Property window defaults to being attached to the right side of the screen, so I'll click here and click on the Pin button. Now the Property window is down at the bottom.
We'll find the StackPanel. You might need to scroll down through several sections of the Toolbox. There's a Common WPF Controls, and then All WPF Controls. So you look in the All WPF Controls. There it is. There's three different ways I can add this to the Designer. I can double click, and what you see happened is that Visual Studio puts it in the upper left-hand corner of the window. And it's made some default decisions on size and other properties.
You'll see here in the StackPanel that it made a default size of 100 for Height and Width, and it set the HorizontalAlignment to Left and Top. That's nice for some controls, but I want this StackPanel to fill up the entire window, so I don't want it to hard code the Width. So I'll remove the Width and Height properties, and now it's just this tiny little StackPanel because it's aligned to the Left and Top, so the next thing I'll do is change these alignments. Now to do that, I'll select the text here in the XAML Editor, delete it, and then to have it reprompt me, I can hold down the Control key and hit the Spacebar to get the autocomplete list.
I want to Stretch this the entire width of the window, and I'll do the same thing for the VerticalAlignment, Control + Spacebar. Now that looks like I want. It's filling up the entire space. The second way you can add a StackPanel or any of the other elements that are listed here in the Toolbox is to select it and then drag it over and drop it on the Designer surface. Now keep your eye on the location of my mouse.
When I let go of the mouse button, you'll see that Visual Studio again makes some decisions and this time it's set the HorizontalAlignment, VerticalAlignment Height and Width for me, and it also set the Margin. Because when I dropped it, I get to choose the location now. So if I had dropped it near the top, like this, I get different margins. It's setting the position based on this Margin value here.
The third choice is to select it and not drag it over but just to move my cursor over into the Designer and now it changes into a crosshair, and now I can drag out. And what this does is it allows me to pick the size and the width and the location. And you'll see you get some nice information tips inside Visual Studio that's telling me the current width and the current height. So say I want it to be a 300 pixel wide, I can move it around in here until I get that size like that. This allows me to pick the upper left-hand corner and the Width and Height of my control.
Some people ask me occasionally can you drag it into the XAML window? Let's see. You can do that too and now you get just the StackPanel. You don't get any properties set, and it turns out that in this condition, it's using the default so HorizontalAlignment and VerticalAlignment default to stretch, and the Height and Width default to auto which is the same thing as me dragging it over and then removing all those attributes.
Okay, now I've got my StackPanel. The next step is to add some children. So one of the children I want to add is a TextBlock at the top, and then below the TextBlock I want to add a TabControl. Again if I drag the TextBlock over here, now that I'm inside the StackPanel, the StackPanel stretches the Width of the TextBlock to fill up the entire Width and then it stacks it to the top. You won't see any margin sets here when I drop it into the StackPanel. The next step is to go and change the font size, and I can do that a couple of ways.
I can type it in my XAML here like this, or I can use the Property window. So you select the item, and then choose a property here. There's a lot of properties and it defaults to looking at them by Category. You can also change that to look at them by alphabetical Name. Even that's too much especially on this small screen that I'm working on for our recording, so what I'll do is filter this and just look for Font.
Make these a little narrower. And now I can click on this and type in a new value. And I want to set the FontWeight to Bold. And then the last thing I need to do is change the Text property. That's my name of my company. They will be doing tours in the city of Chicago. Now below this I want to add a TabControl. Again I can drag it over here.
If I do that you'll see that I get a 100 Height TabControl. I'll set that to 300. Actually I'll set it to MinHeight, so that means it's a minimum of 300 pixels high and it can grow if it needs to be. And then you'll see that when I dragged it over, let me zoom in so you can see a little bit more, when I dragged it over, I got a TabControl and I also got two TabItems. So these are the children of the TabControl and each TabItem has a header, and that's the text that you see at the top, and you can also see that in my XAML here.
Here's the TabControl, and there's the TabItem. And you can see that the Header says TabItem. And I'll change this to say Tour Stops. The second one should say Details. And the third one should say Weekly Calendar, but I don't have a third one. So again I have to figure out how to do that. I could just copy this and paste it in. That's one way of doing it. Another way of doing it is to click on the TabControl itself and then go look for this property here called Items.
See how it says Collection here? That means that in Visual Studio this is a Collection of Items and I can click on this button with the three dots on it to edit the items in the Collection. Then I can see there's two Items in here, and I can add new items. You're going to be tempted to come in here and click on the Add Button, but be careful. See this drop-down? What happens when you choose Add is it will instantiate or put a instance of the class that's selected here inside the TabControl.
So if I choose Button and switch back to Visual Studio, you'll see that there's a Button in there and there's not a TabItem. And this is an interesting part of WPF is that you can build your UI out of very sophisticated sub-elements. What I really wanted to do was a TabItem here, so we'll back and choose the TabControl, choose Items, pick TabItem from the drop-down, then choose Add.
Now I need to set the Header value. So I'll select it here. That worked. You notice that when it auto added the TabItems it put a Grid inside there? So when I put children inside the TabItem, they're going to go in this layout panel. So let's do the same thing for this item here. I'll just copy that Grid, paste it in here. I'll need to put in the closing tag like that. And I'll just to show you that I can set the Background color of the Grid.
Then finally one last thing before I stop this movie and move on to putting some real content in these tabs is you'll notice that as I move and select the item in the Designer, it's selecting that TabItem on the bottom. And it's doing two things. You can see it's selecting it here and it's highlighting it in gray, and it's also showing me any children that are on that tab. Currently there's none except for the Grid, right. So I can see those Grid items. And what we're going to do as we go through this course is I'll start adding controls to this Grid that's inside the TabItem.
And that's what we'll show you next.
- Why choose Windows Presentation Foundation?
- Exploring the project types
- Creating a WPF project in Visual Studio
- Exploring assemblies and parts
- Using the XAML editor
- Creating the UI, including tabs, details, and controls
- Using data binding
- Adding styles
- Writing interaction code
- Using control templates, 3D parts, and effects