Instantiate object elements in XAML

- [Instructor] XAML elements are XML representations of dot net or Win RT objects. Their official name is object elements, which drives home the point that they are affiliated with a managed object. At runtime, every element in the XAML file will be instantiated. Here's some object elements. This is an object element, so is StackPanel, so is Ellipse, and so is this Tour class. Essentially, any element that you find in a XAML file is an object element, and there will be an affiliated type. You can see that affiliated type by right-clicking and choosing Go To Definition or press F12. That'll take you over to the Object Browser and show you the class that's affiliated with it. The name of the class matches the name of the element. Let's look at the StackPanel, I'll press F12, and see, there's the StackPanel class. Yes, there's an Ellipse class, I won't show you that one. And then here's my Tour class, this is a class that I have inside my project. See it over here? When I press F12 when I have this item selected, it'll take me not to the Object Browser but it'll take me to my code definition for the Tour class. At runtime, every element in the XAML file is instantiated. Then there's two places inside the XAML file where you can instantiate an object element. One is inside the content section of a UI element. The other one is inside a resource dictionary. So the way you can see the content section of this Window class is it's in this Window.Content. The way you can see the resource dictionary that's affiliated with the Window class is in this property called Resources. When you're inside the Window content these items are going to be rendered and shown in the UI. They're going to be also placed in something called the visual tree, and in order to go in there, they have to drive from a special base class called UIElement. Let's see if this Window class is a UI element, and the StackPanel and the Ellipse and my Tour class. To do that I'll use this class diagram I have in the project called ClassDiagram1. So this shows a class and all of its base classes, so here's the StackPanel, and the StackPanel derives from Panel, which then derives from Framework Element, and that derives from UIElement, which means it can be shown in the UI, and that means I can instantiate it here in this area. The Ellipse, that's here, that derives from Shape, which derives from FrameworkElement, and then UIElement. The Window class derives from UIElement too. My Tour Class does not. It derives directly from Object, and so does Clockface, these are other classes I have here. And then this Orb class is one that I wrote, but I do derive from UIElement directly. So that implies that if I go over here, and I look in my local name space, that Orb shows up, so I can instantiate that, and it'll appear in the visual tree. But Clockface and Tour don't. So the only place I can instantiate those, since they can't be rendered in the visual tree, is inside a resource dictionary. That's why I'm instantiating the Tour class down here. Really want to be able to instantiate the Clockface and put it in the visual tree, I would need to go over here, and do a little bit of code. I need to resolve this. Now it's deriving from the correct base class. I'll go back to my class diagram, show base class, you'll see now that it derives from UIElement. Switch back over to here. And you'll see that it now appears in my eligible list. So let's revisit what I just said. All your elements are instantiated. You can instantiate them in multiple locations like in the content section or in the Window's resource section. This is used for non-UI things that, specifically for things like data binding and for color brushes and things like that. And let's talk a little bit about content, let's look at this file over here, ContentWindow. StackPanel and Ellipse are direct children of Window. So this is the simpler syntax and this is what you usually see when you're working in a XAML file. And let's see what's happening here, is the person that wrote this Window class at Microsoft, they designated a certain property, and they said it's OK to have children content that's directly inside the Window beginning tag and the end tag, and anything that's in here gets assigned to the Window content property. So this StackPanel is being assigned to the Window content property, and this Ellipse is being assigned to the StackPanel content property. Now sometimes it's not called content, it might have different names, but somewhere the developer has to say that this is the content so you can actually have a child element like this. So once again, Window's class will be instantiated, the StackPanel will be instantiated and added to the Window content, the Ellipse will be instantiated and added to the StackPanel content.