To build your WPF visual interface requires the use of a collection of framework elements. This video looks at how to assemble the UI from these elements in Visual Studio XAML editor.
- [Instructor] To build your WPF visual interface requires the use of a collection of framework elements. Essentially, most parts of the UI are based on them. They're everywhere. You'll find that the Window, Page, Control, and other useful classes are founded on the framework element base class. In this video, I'll look at how to assemble the UI from these bits in Visual Studio. To be clear, I've covered this topic in great detail in my other WPF and XAML courses. This is a quick review, in case you need it.
For this demonstration, I'll use this file, AddElements. I'm looking at it in the default view in Visual Studio, which is where the designer's on the top and the XAML's on the bottom. I prefer to work in the vertical split mode, so I'll click this button. This way, the text is on the right side of the screen, and the designer is on the left side of the screen. In this file, I have three framework elements. The root element, this page element, is a type of framework element. It's the container for all the UI that's shown on this page.
Then I have a grid, which is a panel class, which is used for arranging the items in a column and row. I should say, it's in columns and rows, in this case, it's only got one column and one row. And then, on line 14, I'm using a framework element. This is base class for all of the really useful UI bits in Visual Studio. You never see this in the XAML. You don't use the framework element like this, but I wanted to show you that it's valid XAML. You can put this in here. Instead, we need a concrete implementation of the framework element class.
So I could use an element like the ellipse, which is a shape. So what I'll do is I'll type the open angle bracket and then start typing ellipse, Visual Studio looks through all of the known elements and gives me a list. Finds a match here with ellipse, and then I can press the Tab key to finish typing, and then close the tag. I can work with controls like the text box. Again, I'll move down with the arrow, and then press the Tab key to finish typing. And here's an example of a decorator.
So the point here is that in Visual Studio, the XAML editor prompts you and gives you some help, so you know which are the valid framework elements. Once you have these items, let me remove two of these, and I'll set some properties on the text box. By default, we're seeing it's the default UI for the text box, and I want to override some of those values, so you do that by setting what are called property attributes, like the width. Again, I'll type in W-I, Visual Studio shows me there's an item called Width, so I'll just press the Tab key to finish typing that.
Visual Studio stubs in the equal sign, and the two single quotes. You may see double quotes in your copy of Visual Studio, depends on what your settings are in Tools Options. Now over in the designer side, I can see that the width has changed, and then I'll set the text wrapping property. I'll set that to Wrap, and I think you get the idea. This is a quick way of typing in the attributes. If you know the values, this is an easy way to enter them. Some designers prefer to work in a visual environment, by using drag and drop, and so in that case, Visual Studio also supports that model of creating a user interface, and you need to have the toolbox open for this to happen.
So if you don't see the tool box over here, you need to go to View, Toolbox, and then I'll pin it here by clicking on the auto-hide button. There are two sections, there's the common WPF controls, which has the most likely candidates that you'll add to your UI, and then there's a section called all WPF controls, which shows a lot more items. Now, the terminology is a bit murky in Visual Studio. As we've seen in other videos, controls are a specialized type of framework element.
Here on the toolbox, there are controls like the button and the calendar. There are also elements like the canvas and the dock panel, which are panels. There's the border, which is a decorator. And I see the ellipse here, which is a shape. So Microsoft is using the term "control" here in the toolbox in the broader sense. As in, a visual which you can drag onto the designer. So I'll scroll down, I'll look for the text box. Here it is.
And then I'll drag that onto the designer surface, and let go with my left mouse button. Now to see more of what was written in the XAML, I'll make my solution explorer narrower. And here's what I want you to see, is when you dragged that over and dropped it, on the designer, Visual Studio wrote in the text box element, and it also wrote in a number of values for some attributes. For instance, it set the horizontal alignment and vertical alignment, it changed the width to 120, and the height to 123.
The margin is used to position the text box within the grid, so if I had, let me delete this. I'll click on it and delete it. By pressing the Delete key. Then I'll add it again. This time I'll add it closer to the upper left hand corner. Like this. You'll see that the margin's now set to 10-10, that's how many pixels it is from the upper left of its container, which in this case is the grid. So the point here is that Visual Studio's adding all these properties. And then once I've added the element, then I can manipulate it by clicking on it and changing things here.
Now let me drag it down into the center of the page. Here's an interesting tidbit. Remember, earlier in this course, I talked about adorners. Visual Studio is written in WPF, so that means all the UI that you're looking at here can be recreated in your application. And these little rectangles here, when you click on the control, those are adorners, and they're used to help manipulate this item in the designer, so you can see that, like, if I move to this corner, and I start dragging, you'll see another adorner appear in this area that's telling me the width of the text box, and there's an adorner here telling me the height.
And there's also some lines being drawn here near the edges, and there's a chain here that I can click on to change some settings. There's also a center point here. It's possible to rotate a control, so I can go to the edge, and if I move my cursor just off the edge of this text box, it changes to a curved arrow, and now I can drag and rotate it with the adorner. And I can also change the center point, that's what this white dot here is, I can move that center point over here, and now when I rotate, it's rotating around the new center point.
So this shows that adorners can be useful in certain circumstances. I will delete this text box and add it one more time, so it's reset to all its default. The final thing I want to look at is, if you want to set the properties. Some of the properties aren't settable here in the designer by dragging and dropping or moving any of these adorners. So in that case, you can use the property grid. Property grid lives over here.
If you don't see it, you can go to View, Properties Window. And the way this work is you select the item, and all of the eligible properties show up over here. So I can see things like the layout. There's the width and height. And which column and row in the grid to place this text box. I can see things like the appearance, which is the opacity level and whether it's visible or not. And then I can specify the text that shows up in the text box. Change that here, and you'll see it changes it over in the designer, and it also changes it here in the XAML.
It's also possible to add elements in code. After all, these elements are really Dot Net classes, so you can instantiate them in the code behind file and add them to the element tree that way. I won't show you how to do that in this chapter. It's necessary in some situations, but it's far more common in WPF to use XAML and this designer to define the UI.
- Interactions and controls
- UIElement family
- FrameworkElement family
- Shape family
- Decorator Family
- Control Fundamentals
- Button family
- Text Editor family