From the course: Microsoft XAML: 2 Content and Properties

How each element defines a content property

From the course: Microsoft XAML: 2 Content and Properties

Start my 1-month free trial

How each element defines a content property

- In this example, I have a stack panel that has three buttons inside of it. In each one of these buttons, I'm assigning a Content value to the button. So you see on line 10, I have this raw data here, that's inbetween the beginning and ending tags. And you see that that's considered the content. You see it over here in the visual designer, the word "Hello" shows up in the button. On the second button, inside the stack panel, on line 14 I'm instantiating an ellipse, and assigning that to the Content of the button. And you can see that over here on the visual designer by having an ellipse here. In the third example, in the third button, I'm using a property attribute Content='Goodbye' and you see again the text shows up over here. What's really happening is that there's a property on the button, and when the example portion comes along and sees its value here, or this ellipse here, it has to decide which property on the button class to assign this instance of the ellipse. Where this instance of this string too. And that's done using a .net attribute. In our example, the name of the property on the button, that's the content property, is called Content. Now that's a bit confusing or a bit redundant but the idea is is there's the idea of Content each control can have content or not. And if it does have Content you have to define this mapping and then you have to choose the property name. In this case, the person that wrote the button class decided the proper name for the property was Content. I'd like to show you the mapping after using a .net attribute, and to do that I'll use .peak before I go over there I'll look at my references list in this project, right here. And I'll show you this reference for presentation framework. This is the DLL that contains the definition for the button and the stack panel and the list box in the window. Over here in .peak you may not see presentation framework in your list of assemblies to search. It's not one of the default assemblies. To add it you'll wanna click on this Open from GAC which stands for Global Assembly Cache. Click here, then search for Presentation. There's Presentation Framework so I'll select that and then click OK. And now I'll search for Button. This is the one I'm looking for here, so I'll double-click on this to disassemble. What'll happen here is .peak takes Microsoft's DLL and disassembles it in to c sharp code so I can look at and try to figure out what properties and attributes are being used on this class. So I'll double-click here. What I'm looking for is an attribute that's defined at the class level. So I don't see one here, so what I'll do is go up to the Base class. Now I'm starting to see some attributes but not the one I'm looking for. So I'll go up one more level. Now this looks promising, it's called Content Control. So let's see what happens when I go to Declaration for this one. This is the one I want you to see. There's an attribute called Content Property and it's saying that the property on this Button class, or actually it's the Content Control class, is called Content. And that's how the xaml parser knows to take that raw string data and assign it to this property. Now I'll return back to visual studio and I'll look at the list box. In this case you'll see that I have two chal items, called list box items, and you'll see there's two items showing up in the list box. This means that the list box has a content property but it accepts multiple items. There it is. I'm looking at the list box, I don't see the property I'm looking at here. So I'll go and look at the declaration for selector. I'm not seeing it there either. There it is. So on this type, on the Items Controlled Base class, the content is mapped to the item's property. When you look down here there's the definitions of the property. It's of Type Item Collection. Then that's why I can assign multiple items within the list box because it's a Collection class. That's the data type of this property. Back over in visual studio, you'll remember that the StackPanel also supports multiple Children. So I've got multiple buttons in there, and I've got the list box in there. So let's go see how that's defined in .peak. There it is. That's the wrong one, I wanted to click on this one here. And then we'll go to Base class, and here I see the content properties of type Children. That means there's a property on this class, the Panel class, called Children. Here it is, and you see it's defined as type UIElementCollection. So this means that any item that qualifies as a UI element can be put in this collection. And that's why over here I can do a button, and then another button, and then a third button, and then the list box. So what you've seen here is how the author of these classes tells the xaml parser which property on the class to assign the values to. The rest of this chapter talks about how the Content property works in the button, how the Items property works in the list box, and how the StackPanel uses Children in its UI collection.

Contents