UI controls have a lot of customizable properties that help customize the look and behavior of the control. This tutorial shows how to set values in XML with property attributes.
- [Instructor] UI controls have a lot of customizable properties that help customize the look and behavior of the control. Here's how those properties are expressed in the XML text. Here I have a StackPanel that contains two children: Rectangle and an Ellipse. Remember, these are object elements. And then this is an example of what's called a property attribute. It's an attribute in XML but it maps to a .NET or Win RT property over in the actual object. Now, you can think of this as a one-to-one mapping.
There's a fill property and a height property and a width property. That's not exactly true. There's more nuanced than that. There are things called dependency properties and attached properties which we'll discuss later. But for right now we'll just assume that there's one .NET property for each of these. And to see those we can use this (mumbling). Start by looking at the rectangle. Right-click, choose Go To Definition. Here I can see the rectangle class. I see that it has just a couple of properties. Something called GeometryTransform, RadiusX, and RadiusY.
There's no fill property. There's no height and width. They're there, but you have to look up through the inheritance chain. If I go to my rectangle over here, then look at my base type and look at shape, you see that it has a fill property. And if I go further up the tree you'll see that there is a FrameworkElement element that's the base class of Shape. So let me go back over to my XAML. I'll select Fill, and then press F12 to go to the definition, and I can see that the Fill property's part of Shape.
And when I look at the Width property, it's part of the FrameworkElement element. I see it highlighted here. And if I look at the Margin property, press F12, see that it's also part of the FrameworkElement. So what you see here, let's go back over to XAML, is that these properties are either in the Rectangle class or one of its base classes. Let's look at these examples. Here I'm setting the fill color. That's the color you see inside the rectangle. Also I'm setting the Height and Width property.
I'm also doing the same thing on the Ellipse down here. And then on the ellipse I'm setting the opacity level to 0.7 which means 70%, so it's semitransparent. And then I used the Margin property up here in the rectangle. The margin lets you set space around the edges of the item. So this is the left side, top, right, and bottom. And on the bottom I set a -20 margin, which as you can see, means that the ellipse is moved up 20 pixels into and covering the rectangle.
This is in a StackPanel. I'll talk more about layout later. The way this works is the StackPanel's putting both of these in a stack, and it controls the z-index, so Rectangle is closer to the back of the UI and Ellipse is closer to the front of the UI. And because they overlap due to this and because of the transparency here you can see the rectangle through the ellipse. Let's run the application and see what this looks like. So at runtime those objects got instatiated, they got put in the visual tree, all those properties got set, and that affects what we see in this window.
And because these are .NET objects we could also write C# code to instatiate the object and set the properties. So here's an example. I'll go to this XAML file, CreateInCode. This is a window that has nothing in it. There's no children elements. I'll create all the UI in code. Before I do that let me switch over to the C# code. And the code is inside the constructor of this Window class. I wanna be able to show you the C# code and the XAML code at the same time, so what I'll do is go over here to MainWindow and I will make this a new horizontal tab group.
Now I can see the XAML down here and the code on the top. So you see that I start with a StackPanel. I instatiate a StackPanel, and I need a rectangle and an ellipse. I'll have to do that in code. Takes these three lines of code. Instantiate a StackPanel or a rectangle and an ellipse. Then, I need to add the stack panel to the Window class, and I need to add the rectangle and the ellipse to the StackPanel. That's what I'm doing here. I'm setting the Content property of the window, and I'm assigning the instance of the stack to that.
And then for the StackPanel I'm calling Children.Add and passing in the reference to the rectangle and the reference to the ellipse. You notice they use different names. They're both setting the content, but because the window can only have a single child, the author of that class decided to call it content, because the stack panel can have multiple children, that's called the Children property and it has an Add method. Rest of the code is straightforward. Here setting the width and height.
Also setting the width and height on the ellipse. When it comes to setting the fill, don't see it the way I did it here in my XML, I set it with a string "Orange". I can't do that here. That's because the fill property is typed as a brush. It needs to have a instance of a brush assigned to it. And what's really happening in the XML over here is that there's something called at type converter that's taking the string and turning it into a solid-color brush. So in my C# code I'll have to do this line of code: 37.
Have to instantiate a new solid-color brush, and then get one of the predefined colors to make that brush and assign it to the fill property. I didn't use orange and purple because when I run the application and show you this form I want you to be able to see the difference. Let's look at the setting of the margin. Again, I can't use the string because this is not a type string, it's of type thickness, so I have so instantiate a thickness. And then there's multiple overloads of the constructor.
I'm using the one that takes four values, but there's also one that takes a single value. So if I wanna have a uniform all four margins the same size I would use this one, but I don't. Set that, and assign it to the margin. Now I'd like to see what this looks like. To do that, and this is a WPF application so it'll change the startup, the window that you see at the startup, I go to the App.xaml file and I change this startup URI. Like that. And now when I run it you see a very similar-looking UI, except it was all created in code and I use a green and a golden-rod color instead of the other colors.
So the takeaway from this is that either way, writing in code or writing it as XAML, will get you the instances of the same objects, but you may recall from other videos in the course that there is an advantage to using XML for UI declarations; that is: it's easy for tools to modify the XML. Let me show you what I mean. Close this window, I don't need it anymore. Grab this tab and slide it up to the top. That. Then I'm gonna move this designer up so we can see it. I'll hold down the spacebar and drag that up where we can see it.
And in that case, I've accidentally deleted the fill value here, so I'll do a Control + Z to set that back. And I also noticed there's some extra spaces here, so I'll just remove that. I'll select the ellipse, and now I'll use a tool to edit the XML. I'll use the Property window. I'll set the fill color to a different kinda brush, so I'll click on the Brush section here. You can see currently it's a solid-color brush, it's this purple, and of course I can use this to dial in new colors here, like this, but I wanna get fancier.
What I'll do is I'll click on this button which creates a gradient brush. Now I've got two colors; you can see them here. I've got a grey and a white, black and a white here, and there's a gradient fill between there. I can then scroll down to the bottom and choose a different kind of gradient. I'll choose radial gradient. And then I can add color stops here by clicking, and then I can change those colors. So I'll dial in a color for this middle stop.
That. Make this one a purple color, and this one some sort of red or orange value, like that. So you see I now have a much different radial gradient here. And it was easy for me to use this tool, this Property window in Visual Studio, but what I want you to see now is over here in the XAML, is that it wrote out a radial-gradient brush and set some gradient stops here. Notice it did not use the property attribute anymore; instead, it's using an alternate approach to setting property values which is called a property element.
I'll show more details about property elements in the next video.
- What is XAML?
- What frameworks use XAML?
- Working with XAML and Visual Studio
- Exploring XAML namespaces
- Instantiating objects
- Subscribing to events
- Using XAML in Windows Presentation Foundations, Universal Windows, and more