This tutorial shows the difference between setting object element property value with Property attributes and Property elements.
- [Instructor] XAML has two ways of setting a property value in XML. You can use a property element or property attribute. Line eight shows an example of a property attribute. The text attribute is an example of a property attribute and I'm assigning the hello string to that. And when you look at the text block over here in the UI you see that string appear. Line 10 shows an example of a property element. This is an alternate syntax. It uses an element, hence the name, and that element has a period in the center of it. To be clear this is a valid XML element.
That period in the middle tells the XAML parser to do something special. And here's what the XAML parser does. When it sees this element inside the text block, it notices it has the same string at the beginning of the element, so it knows that this is a property element. Then after the period it knows that that is the name of the property in the class. So it'll assign this string here to the text property. I know what you're thinking, you're looking at this code, I could have done this with much less text and made it more readable by using this syntax.
And you'd be right. There are some scenarios, however, where using a property element makes more sense. I'll uses these two ellipses to demonstrate that. This first ellipse has the fill property of orange. What do we know about fill? Press F12 to look at that. Here it is. It tells me here it is of type System.Windows.Media.Brush. So this string, orange, is not a brush is it? So there's something called a type conversion that's gonna take that and convert it into an instance of a brush.
In WPF there are multiple kinds of brushes, there's solid color brushes, there's image brushes, there's video brushes, there's radial gradient brushes and so on. So, if I wanted to assign a image brush or a radial gradient brush here, I can't use this syntax. Instead I can use the property element, so that's what's happening down here on line 21. You see this radial gradient here? I'm setting it with a Ellipse.Fill. That's the property on the Ellipse class, and then I'm instantiating an RadialGradientBrush and assigning it to the Fill property.
The RadialGradientBrush has a property called GradientStops. Press F12 to look up that definition. There it is, it's actually on the base class, called GradientBrush. And if you look at the type for this, you'll see that this is of type GradientStopCollection. Inside this property element I'm instantiating a bunch of GradientStops. Looks like there's five of them here. And those are being assigned to this collection. So this is a more verbose syntax, but it allows you to do more sophisticated UI.
Now let's think of this from another perspective. Let's look at this bit of XAML. Can you imagine trying to define this up here, inside that string? I'm sure Microsoft could've done it, they could've figured out a way to write a complex string and put it between the beginning and ending single or double quotes that you have for property values. But it would have been a huge string inside here, and it would have been messy. Instead what they did is decided to come up with this alternate syntax.
When you're hand-writing XAML, you'll probably use this type of syntax, 'cause it's easy to understand. When you use a tool, in Visual Studio, if you use the designer surface, if you use the drag-drop designer over here, a lot of times it will use the property element syntax because it can build a much more sophisticated UI that way.
- 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