- [Instructor] In this video, I'll look at how to createthe 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 topand 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 MainWindowis 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 keyand use your mouse wheel.That looks good.

The default UI for a window containsa single child element Grid.Now a Grid is what is known as a layout panel.Layout panels are responsible for arrangingtheir children on the screen.And a Grid is optimized for putting its childrenin columns and rows.I'd rather use another layout panel called the StackPanel.It's optimized for stacking its children in a verticalor horizontal stack.So what I can do is erase this Grid, and I can do thata 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 herein 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 Toolboxand 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 attachedto the right side of the screen, so I'll click hereand 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 sectionsof 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 happenedis that Visual Studio puts it in the upper left-hand cornerof the window.And it's made some default decisions on sizeand other properties.

You'll see here in the StackPanel that it madea 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 StackPanelto fill up the entire window, so I don't want itto hard code the Width.So I'll remove the Width and Height properties,and now it's just this tiny little StackPanel becauseit'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 herein the XAML Editor, delete it, and then to have itreprompt me, I can hold down the Control keyand 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 otherelements that are listed here in the Toolboxis to select it and then drag it over and drop it onthe Designer surface.Now keep your eye on the location of my mouse.

When I let go of the mouse button, you'll seethat Visual Studio again makes some decisionsand 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 overbut just to move my cursor over into the Designerand now it changes into a crosshair, and now I can drag out.And what this does is it allows me to pick the sizeand the width and the location.And you'll see you get some nice information tipsinside Visual Studio that's telling me the current widthand 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 sizelike that.This allows me to pick the upper left-hand cornerand the Width and Height of my control.

Some people ask me occasionally can you drag itinto 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 HorizontalAlignmentand VerticalAlignment default to stretch,and the Height and Width default to autowhich is the same thing as me dragging it overand 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 TextBlockat the top, and then below the TextBlock I want to adda TabControl.Again if I drag the TextBlock over here, now that I'm insidethe StackPanel, the StackPanel stretches the Widthof the TextBlock to fill up the entire Widthand then it stacks it to the top.You won't see any margin sets here when I drop it intothe 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 lookingat them by Category.You can also change that to look at themby alphabetical Name.Even that's too much especially on this small screenthat 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 changethe 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 highand 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 TabControland I also got two TabItems.So these are the children of the TabControland 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 itselfand then golook for this property here called Items.

See how it says Collection here?That means that in Visual Studio this is a Collectionof Items and I can click on this button with the three dotson 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 onthe Add Button, but be careful.See this drop-down?What happens when you choose Add is it will instantiateor put a instance of the class that's selected hereinside the TabControl.

So if I choose Button and switch back to Visual Studio,you'll see that there's a Button in thereand there's not a TabItem.And this is an interesting part of WPF is that you canbuild 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 TabItemsit 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 Backgroundcolor of the Grid.

Then finally one last thing before I stop this movieand move on to putting some real content in these tabsis you'll notice that as I move and select the itemin 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 itin gray, and it's also showing me any childrenthat 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 courseis I'll start adding controls to this Grid that's insidethe TabItem.

And that's what we'll show you next.

Resume Transcript Auto-Scroll

Author

Released

11/8/2016

Windows Presentation Foundation (WPF) in Visual Studio 2015 provides developers with a unified programming model for building rich, modern desktop applications on Windows. In this course, expert developer Walt Ritscher steps you through the details of how to create dramatic Windows user experiences using WPF and XAML. Learn the fundamentals of the framework while you follow along with Walt, building a sample app that showcases all of its most interesting features. Learn to lay out the user interface, add images and custom user controls, work with data binding and data templates, and style content. Plus, get a look at the attention-grabbing 3D and UI effects you can add with Windows Presentation Foundation.