Extensible Application Markup Language (XAML) is a markup language for declarative application programming. XAML is XML-based language created by Microsoft which can be used to initialize structured values and objects. Windows Presentation Foundation (WPF) implements a XAML processor implementation, and provides XAML language support. If you are familiar with HTML tag syntax, you would find it easy to jump into XAML territory. Since XAML is XML based, it must be well-formed and must adhere to rules of case sensitivity, open/closing tags etc.
A very simple example to make things clear would be to understand a code snippet below
<Canvas>
<TextBlock>Hello World!!!</TextBlock>
</Canvas>
As you see you could simply misunderstand it for some XML which is what it is. There will definitely be some essential code blocks that you would be required to include in every XAML file but the core content can be as simple as the code above.
XAML follows Object Element Syntax that instantiates a CLR class or structure by declaring an XML element. It resembles element syntax of other markup languages such as HTML where you define an element by putting the type name of the class or structure between left (<) and right (>) angle brackets. Each element has then to be closed by using one of the two following methods.
<Button x:Name="Submit"/>
<Button x:Name="Submit"></Button>
The example above instantiates a new instance of the Button class, and also specifies a Name attribute and a value for that attribute.
Another example:
<TextBox>This is a test text box</TextBox>
I am assuming that readers would have a good understanding of HTML and XML to follow the examples here. If you don’t, please take a quick read at
Each element or control has properties which can be further used to customize the control. The properties can be of following types
1. Attribute Syntax
2. Property Element Syntax
3. Content Element Syntax
4. Collection Syntax
Now let’s dig deeper into each of the four types.
1. Attribute Syntax
The control Textbox below has “Width” attribute whose value has been set to 100.
<TextBox x:Name=”textBox” Width=”100”/>
The important thing to remember here is x:Name attribute. This attribute can be used to apply a unique identifier to the control. This value of x:Name attribute can be used to refer to the control in the code behind. How? We will see shortly.
2. Property Element Syntax
In the example above we saw attributes defined inline for the control. What if we could define it as a child of the control? This is called Property Element Syntax. The example below would help you understand the difference.
<TextBox x:Name=”textBox” Width=”100”/>
< TextBox.Name >textBox</ TextBox.Name >
< TextBox.Width>100</ TextBox.Width >
</TetxBox>
3. Content Element Syntax
This syntax is used to define the content between the tags as below
<TextBlock>A crash course in XAML</TextBlock>
4.
Collection Syntax
This is used for attributes where the value type is a collection. For ex
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0.0" Color="Red" />
<GradientStop Offset="1.0" Color="Blue" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
You can see LinearGradientBrush control contains a collection of GradientStop objects.
Events in XAML
Like ASP.NET XAML controls also have events which can be used for server side processing.
<Button Click="Button_Click" >Date (Event on Root)</Button>
The code-behind must contain the event handler function as below
private void Button_Click(object sender, MouseEventArgs e)
{
}
The event handler function has two parameters. The first value is sender, which is a reference to the object where the handler is attached. This value can be cast to a more precise type.
The second value is event data, which generally appears in signatures as the e parameter. The event data is captured as an instance of EventArgs class or a class that inherits EventArgs. For input events Silverlight has support for mouse and keyboard events. If you notice in the example above the event data was captured as MouseEventArgs. For keyboard events, key presses on the keyboard raise the same KeyUp and KeyDown events. In order to determine which key was pressed, you must access the KeyEventArgs that is available to the event handler.
Note: XAML is not the only way to add event to a control. The event handlers can also be added in managed code (in C# or VB) using += operator.
In order to add event to the control below <TextBlock Name="textBlock1">Put the mouse over this text</TextBlock>
Simply add the statement below in page load
textBlock1.MouseEnter += new MouseEventHandler(textBlocks_MouseEnter);
Make sure to define textBlocks_MouseEnter method in the managed code.
In certain circumstances you may want to programmatically remove the event handlers which is again a simple statement using -= operator.
textBlock1.MouseEnter -= textBlocks_MouseEnter;
This was a quick crash course of events in XAML. For now this would serve our purpose. We will take up more concepts as we dig deeper into the application we are trying to build while we learn Silverlight. For a more detailed study I would advise to visit MSDN.
http://msdn.microsoft.com/en-us/library/cc189018%28v=vs.95%29.aspx#Y1125
Now think about a real world scenario and the events you would use more frequently. You will be pressing/releasing a key/mouse, moving mouse, drag/drop action, bringing a control to focus or lose focus on a certain control. I am putting a list of most common events whose names are self-explanatory and I won’t be giving any explanation. I will explain the events in detail when we jump to code.
- KeyDown
- KeyUp
- GotFocus
- LostFocus
- MouseLeftButtonDown
- MouseLeftButtonUp
- MouseRightButtonDown
- MouseRightButtonUp
- MouseMove
- MouseWheel
- BindingValidationError
- DragEnter
- DragLeave
- DragOver
- Loaded
- BindingValidationError
After a brief introduction of XAML we will jump to create our first Silverlight application. Though we should now be comfortable with basic concepts of XAML, the actual details of Silverlight controls and event types which can be used with the controls are yet to be discovered. The best way would be to create applications, add controls and review them. Once we have created and run a few sample applications we should be comfortable with using them in general.