Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
To get started with my app, I'm going to use the designer in Visual Studio to create a basic shell. The word designer has special meaning inside Visual Studio. A designer is a special window that supports drag-and-drop and mouse interactions for creating the user interface. This designer is also responsible for generating code, or XML markup. I'm inside Visual Studio, and I have opened the solution called InfoReader. Inside the solution are two projects: version 1 and version 2 of InfoReader. I'm going to start obviously in version 1, and I'm going to edit this MainWindow.xaml.
If you want to know how to create your own solution in your own project, check out some other movies in this course. This is the basic WPF Editing window. This is the designer surface on the top half of the screen. Usually on the left edge of the screen is the Toolbox. If you don't see the Toolbox, you may need to go to the View menu and turn on the Toolbox. It also may be docked to the side over here. Once you have the Toolbox there, you can then pick up an element--like this button--and drag it over to this designer surface.
Visual Studio has this split view. Let me shrink down the view for a minute. I'm going to click on this Zoom to Fit button, so I can see more of the designer surface. And then at the bottom of the window you can see there is a text editor, and I can scroll this up a little bit and then shrink this down again. There is the designer, and here is the XAML. So, you can choose whether you want to do only XAML or you want to use the designer. If you want to hide the designer, you can click on this Collapse pane here. I'm going to keep them both open for today.
As I size the button in the designer, you'll see I get some sizing handles, and when I let go off the mouse, you might notice that some values have changed. If I edit the XAML directly, like if I type in 100 pixels for the Height, you'll see that it changes in the designer. So they're linked to each other. Naturally, I can add other types of elements. Let me take this TextBox here and drag it over, and let go, and now in my XAML it has created this element tag here, TextBox. As I'm dragging the item around in the designer, you'll see little lines show up.
Those are alignment cues. So here I can see that I'm lined up to the left edge of the button. Now if I size the button, you'll see I get an alignment on the right side when they're the same size. I'm going to make a couple of changes on the window itself. So I'm going to scroll up to the top of my XAML and look at this Window class up here. I don't want it to be this small size. I want it to be maximized. So, what I'm going to do is come over here and type in "WindowState=", and then I get a dropdown choice Maximized.
If you'd rather use a designer for this, you can use the Property window over here. So what you do is you select your window, and then you go to your Property window. On your computer, you may have the Property window set to Categorized. I like to switch on the alphabetical view instead by clicking this button, and then you can scroll down to the bottom and find this property called WindowState, and then you can choose from this dropdown. The other thing I'm going to do is I'm going to change the title and not say MainWindow. I'm going to call it inpho, in.pho. readr, like so--nice modern name.
So here's what I want to do for the design. I want to have the company name and logo across the top. So I need to delete this Button, hit the Delete key, and then I'm going to choose this TextBox and do the same thing, delete. What I want to have happen is I want to have a top section with the company name and a logo. So, I'm going to divide this into two rows. To do that, I select my grid somewhere-- in this case I selected it down here in the XAML. And then if you notice on the left edge and on the top is a blue area. If I click on this blue area, I will add columns or rows.
So, I'm going to click over here, and then once I've got the rows in there, I can use this triangle to size them, or I can come over here and click in these items to change the sizing standard of this row. I'm going to leave it at the default for right now. Inside this area, I will put a dock panel. Dock panels are used to stick controls to the edges of the screen. So I will dock the text block to the left side, and I would dock the image to the right side. And then on the bottom half of the screen, I'm going to put a TabControl down here.
I've already prewritten a lot of this, and it's down here in this InfoReader Version2. All right, so let me close this MainWindow. You may or may not see this Save dialog, and then I'm going to go down to Version2 and double-click on MainWindow.xaml. And I need to make this my Startup Project. When I choose to debug this application, I have to pick which one of these two projects to start with. So in Visual Studio to tell it which project I want to start, I right-click, and I choose Set as StartUp Project. All right, here is my newer UI.
Here's my dock panel on the top right there. Here is the text block that says in.pho.readr. Here is an image. I added an image control. And then, in order to get this picture, what I did is I right-clicked, went to Add > Existing Item, went out to my Exercise Files folder, and there's an Assets folder down here. Open the Assets folder, and then make sure you're not looking at just C# files. So click on this little dropdown here and choose All Files.
And now, I can add this BlueArrow.png file. Once I added that PNG file, then I can click on the Image Control and go to the Source Property here. This is really nice because when I click on this button with the three dots on it to choose the image, it shows me all of the embedded images that are part of my application. I picked BlueArrow.png and then clicked OK. Then on the bottom half of the screen, I added a TabControl--here it is--and then I added a few tabs. And then each tab has this little container down at the bottom.
So like if I click here on History, I can put some items here. I'm going to put a ListBox in there for later, and then later when you'll learn about data binding we're going to load some RSS from blog feed. What I want to show you now, before I end this movie, is something called styles and templates. The idea is--let me zoom in a little bit so it's easier to see. I'm going to click on this TextBlock, and I'm going to go to its Foreground Property. Foreground is changing the color of the font by applying a brush to it. Currently, it has a black solid color brush applied. I'm going to click on this dropdown, click somewhere in the green area, and then maybe drag around here till I get the green color I want, and then I'm going to click outside the dialog.
Now you see I have this green text. What I can do--let me reselect this-- what I can do now is I can go to the Foreground Property, and I can save this as a resource. So I can click on this little black diamond and say Extract Value to Resource. That creates a GreenBrushKey. I click OK, and what just happened is at the top of my XAML, it created a Resources section, and it put a SolidColorBrush in there with an identifying Key. Now I can go to other items, like say this button here or this TabControl, and I can go to its Foreground property and click in that same area.
It doesn't have quite the same symbol on it, as you can see. And I'll say I want to apply a resource, and then I'll pick the resource I just created. So the power of this, especially if you create styles instead of just these stand-alone resources, is that somebody can spend a lot of time making the look of an element--let's say all your buttons--and then they can put it in a style, and then you can come in and say, "Now, just apply that style." As you can imagine, it would take a long time to build that up. So I've already written the XAML for that, too. So, if you open up this App.xaml-- this is application wide resources-- if I open up this App.xaml file, double -click on it, you'll see that I have a Resources section in here. Inside the Resources, I have two styles.
I'm clicking these little Plus symbols on the side here. There are two styles. Now, a style contains property setters, like that Foreground setter I just showed you, and it also can contain something called a ControlTemplate. ControlTemplates allow me to completely change the way a tab or a button looks. Now right now, the style has a key. So, if I want to apply the style, I have to know the key name. If I delete this key, I've now created a style that can be applied to all TabItems. So, I'm going to do that for the TabItem, and I'm also going to do the same thing for the button.
Essentially what I've done now is I've created two styles at the global level that apply to all TabItems in the entire project and all the buttons in the entire project. Let's see what it looks like. I'm going to press F5--or you can also click the Debug > Start Debugging menu, save my changes--and now you can see that the tabs have a brand-new look on them, and so do the buttons. Here is the new button look. It even has an animation as part of the ControlTemplate. So if I hover my mouse over the button, you'll see that an animation shows up.
I got these styles off the Expression Blend web site. There's a place where you can go and download styles from Microsoft. So you see how changing the template on a control can dramatically change the way it looks and behaves? That's just one small portion of what you can do with the Visual Studio designer and WPF. It's time to move on to the next topic. Up next, writing some code.
Get unlimited access to all courses for just $25/month.Become a member