Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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 XML 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 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 the proper tag closure. This means when you open a tag, you close it with a matching tag or use the special one-tag version of the element. A XAML element maps to a single .NET class. Here is an example. I have a class called System.Windows.Controls.Button.
That is my .NET class. In my XAML, I use the If you look on the bottom of the screen, you can see two different screenshots; the top one shows my XAML, I am declaring a button and I am saying Content='Save', Content is an attribute. The equivalent C# code is shown in the bottom. Here, I'm declaring a button variable, Button B1=New button and then I'm setting its content property, B1.Content=Save.
The Using that element in XAML is exactly the same as instantiating an instance of the Button class and calling the default parameter list constructor. XAML elements have several types of attributes. There's one called the Property Attribute that corresponds to the Object property. In my example here, I have the Width property and the Background property. There are also Event Attributes. In that case, the attribute corresponds to an object's event.
In my example, I'm using MouseMove and then I am assigning it the name of a function inside my code, Button_MouseMove. There's also something called a Directive Attribute. That's a parser instruction that has no programmatic or C# equivalent. In my example, I'm using it to set the Name property. On Line 50, x: name is a Directive Attribute. Then there is the Attached Property Attribute. This is a special syntax to use when working with attached properties. I discussed them later in the course. In my example here, on line 16, the attached property is grid.row span.
Now I'll switch to Visual Studio. I'm inside Visual Studio, I've opened a project called XamlElements. I am going to open this MainPage.xaml and then I am going to scroll down the screen to show you this section here. Here is my Rectangle, here's my Fill value that is a Property Attribute. We've got three Property Attributes; one Event Attribute, one Directive Attribute, and one Attached Property Attribute.
If you ever want to do these assignments in code, you have to use some special syntax. Let me show you. Here in my Code behind, I am creating an instance of a rectangle and then I'm using the property assignment to assign the value of 40 to the width. And on line 28, I'm reading the Width property, I've been storing it in this variable called w. To wire up an event handler in code, I used the C# syntax, +=. This is the event, this is the code that's going to run.
Let's see that down here. Directive Attributes cannot be done in XAML, so I don't have an example of that. Then for attached properties, you have to use the special SetLeft and GetLeft syntax. If you have worked in other .NET technologies, like ASP.NET or Windows forums, you are familiar with setting properties in the Property grid. Visual Studio 2010 allows you to set the properties in a similar fashion. I'll switch back to my MainPage.xaml, I'll select my rectangle and then I will go to my Property window.
If you do not see your Property window, you can press F4 to bring it into scope, and I'm going to switch over to the alphabetical list of my properties and then I am going to change this color value by coming over here and clicking on the dropdown and choosing a new blue color, and hitting enter, much easier than writing in XAML, at least for some types of property sets. Expression Blend has a designer, too. I'll show you that in other movies. The point here is that you can use the designer or you can use the XAML to create your property elements.
Next, lets' take a look at XAML namespaces.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105422 Viewers
56 Video lessons · 117111 Viewers
71 Video lessons · 86340 Viewers
131 Video lessons · 41259 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.