Join Walt Ritscher for an in-depth discussion in this video Working with XAML Elements and Property Attributes, part of Silverlight 3 Essential Training.
I can state this with complete confidence. If you want to become a Silverlight developer, you need to learn how to read and comprehend XAML. There is no doubt in my mind that this is true. A natural place to start your journey to XAML mastery is by studying XAML elements and attributes. Before discussing elements, however, let me briefly comment on the rules of XML. XAML docs are really XML docs. Therefore, your XAML must follow all the standard rules of XML. There is really only a handful to learn. A XAML doc or XML doc is limited to a single root element.
In Silverlight, that is almost always a user control. The other normal XML rules are as follows. When you have attribute values, you must delimit those with a pair of matching items, like a matching pair of double quotes or matching pair of single quotes. You have to use proper tag closure. That means you open a tag, you close it with a matching tag with the Slash on the front or use the special one tag version of that. A XAML element maps to a single .NET class. Here is an example.
That class is called System.Windows.Controls.Button and you will create that in your XAML by doing angle brackets <Button> like this. Line 9, I am specifying that I want a button element. The equivalent C# code would be on line 27 in the code example Button b1 = new Button. The Content = "Save," that is a property assignment. I am assigning a value to a property in the Button class. So, the equivalent C# is on line 28, b1.Content = "Save".
The angle bracket <Button> is called an object element. Using that element in XAML is exactly the same as instantiating an instance of the Button class and calling the default parameterless constructor. XAML elements have several types of attributes. There is one called the Property attribute that corresponds to the object's property. Here is an example of how you would set that, Margin = "20". There is a property on a Button class called Margin and I'm assigning a thickness value of 20 to it.
There is also Event attributes. In that case, it corresponds to an object's events. Here is a sample code. I'm saying on this button, I have a Loaded event and I have some code called Window_Loaded, which I want you to invoke, if this event ever happens, if this event ever fires. There is also something called a directive attribute. That's a parser instruction that has no programmatic or C# equivalent. For instance, I would like to assign a localization ID with X:Uid.
Localization is used when I want to have different language-specific strings displayed to the user. Then there is also something called the Attached property attribute. This is a special syntax we are working with attached properties. I am going to switch to Visual Studio and we will take a look at those four types of attributes. This is a typical Silverlight application. If you're following along on the Exercise Files, you're going to want to open the XamlElements.sln. I have an App.xaml and a MainPage.xaml and in my Main Page.xaml, I've created a Rectangle class.
That's the object element and I've assigned the four different kinds of properties. This is the fill. This is a regular property attribute and I am assigning a color of Orchid to that. This is an event property. I'm saying when the mouse enters this rectangle, call my code called Rectangle_MouseEnter. Here, I'm using a directive attribute to assign a name to my rectangle. Names are important when you're writing code, because then it gives a programmatic handle for this rectangle. Lastly, is an attached property.
I have a movie dedicated to attached properties, but what's happening here is an attached property means that one class exposes the property, in this case the canvas, but I'm setting it on a different class. The Rectangle class is setting the value, but it doesn't actually own the data. The Canvas class is the one that's interested in the data. It has a special syntax with a period in the middle. Canvas.Left. Let's see how you would do that in code. Go to the code behind page. On line 25, I am going to insatiate a Rectangle class and on line 27, I'm going to set the Property attribute.
It's just a simple assignment, Width = 40. Here, I am going to read the value out of the property and assign it to this double variable called w. This is how I wire up events in my code-behind. The Rectangle has a MouseLeave event and I used the special C# syntax. Again, I have another movie later in the series that deals more with events. That says, please wire up this bit of code to this event. I don't have any directive attributes, because they're only usable in XAML. Then finally, this is how you set an attached property.
I go to the Canvas class and call SetLeft and the I pass the rectangle in and the value that I would like to assign to it. To read an attached property, I go to the Canvas class and call GetLeft and pass in the rectangle reference and store that here this double variable called l. For those of you that would like to see how to do this in a designer, let's move to Expression Blend. In Expression Blend, I've opened the same project. I am going to double-click on the MainPage.xaml and I'm going to draw a new rectangle by clicking on the toolbar and drawing a rectangle here.
Then let's assign a opacity value of let's say 50%. So, we will come over here. One of the things you can do in Blend is move your mouse over this or just slide with your mouse to set the value left or right. There is 50% and we will go look at the XAML that was written for us. There is the property setting. The point here is that you can use a designer tool and it will generate the XAML on your behalf and there you go. That's the basics for using objects elements and object properties.
- Hosting Silverlight
- Choosing a Silverlight programming language
- Understanding XAML basics
- Interacting with the user through events, dialogs, and controls
- Adding animations to the interface
- Managing application assets in Expression Blend
- Compiling and deploying a Silverlight application
- Customizing UI with Silverlight templates