What is XAML?
Extensible Application Markup Language (XAML) is a declarative XML-based markup language that allows for the design-time definition of an application’s UI.
XAML simplifies the creation of rich user interfaces by separating the development and design elements of the application. XAML is contained in text-based files that are separate from the code that drives the application. XAML is easy to read and understand, and it can be edited in any text editor. However, both Expression Blend 4 and Visual Studio 2010 provide tools to edit your XAML easily. XAML markup is saved in text files with a .xaml file extension.
You need to understand that although XAML is an element within WPF and was first released with WPF, the advantages of XAML have broader applicability. For example, XAML is also used in Silverlight projects and for the definition of workflows in Windows Workflow Foundation (WWF).
XAML is a declarative markup language that is used to instantiate .NET objects. Declaring a XAML object is equivalent to instantiating the corresponding .NET object via its default constructor. Setting an attribute on the object is equivalent to setting a property of the same name. This direct relationship to .NET objects is unlike other markup languages, which are typically interpreted languages.
To create the UI by using XAML, the objects on the UI are declared with respect to each other. XAML is considered a declarative language because it describes what it wants to accomplish by using a collection of declarative statements that are related. HTML is also a declarative markup language.
The opposite of a declarative programming language is an imperative programming language. Declarative languages are used to define the picture, whereas imperative languages are used to define the instructions for painting the picture. C# is considered an imperative programming language.
In the following XAML, a Button control is instantiated in the UI with the text Click Me!. The click event is specified as Button_Click, and the control’s location is specified by the Margin property.
<Button Content="Click Me!" Margin="20,5,30,5" Click="Button_Click"/>
In XAML, the standard approach for setting the properties of an object is to specify attributes in the XAML file. In the preceding code fragment, the Content property for the Button object is set by using the corresponding XAML Content attribute.
Where it is not possible to specify a property by using a simple attribute, because the property is too complex, XAML provides the option of nesting elements to specify the property. For example, a button element with an image element nested inside of it will display the image as the content of the button when the user interface is rendered.
eXtendible Markup Language is used to structure, store, and transport information. An XML document must be well formed. These are some of the rules used to determine whether a XAML document is well formed:
- A single root element contains all of the other elements.
- Element tags are case-sensitive.
- Begin and end tags match exactly.
- Begin and end tags are properly nested.
Because XAML is an XML-based markup language, it shares the same markup rules as XML. Therefore, XAML must be well-formed and is case-sensitive.
WPF and Silverlight
The XAML that you will use with WPF and Silverlight applications is almost identical. However, because Silverlight provides a subset of the .NET classes that are provided by WPF, there are a few differences. This course will highlight each of these differences.
Benefits of XAML-Based Applications
XAML is used in the .NET development environment to create dynamic user interfaces. Using XAML, you can easily add all types of controls to your UI, and each control can be data-bound and animated without using any code.
Separation of Concerns
XAML-based applications use XAML to separate the appearance from the behavior of the application. The user interface is defined in XAML files while the application logic is contained in code-behind files.
Separating the user interface design from the primary code development files provides some key advantages. It allows for best-of-breed tools to target specific aspects of application development. Specialized design tools, such as Expression Blend 4, can target the user interface experience, and familiar development tools, such as Visual Studio 2010, can be used for writing, testing, and debugging the code that the application uses.
This separation has benefits in a team environment also. Team members with design skills can concentrate on the user interface design while code developers can concentrate on the code-behind files.
Declarative, Extensible Language
XAML is a declarative markup language that is used to instantiate .NET objects. Because XAML works with .NET objects, you can use it with most .NET objects, including the ones that you develop yourself.
Vector-Based Rendering Engine
XAML-based applications use vector graphics to display images on the user interface. When defined as a vector graphic, an image is stored as lines, curves, colors, and other data that can be used to re-create the image and scale it to any size without affecting image resolution. Vector graphics allow images to be scaled in the interface with no loss of quality.
Flexible Layout and Composition
The layout controls that are available in XAML give you the ability to design a flexible user interface. Every object within a layout control can be configured to adjust to the size and shape of its container. The controls can be colored by using gradients, and all the corners can be rounded. Also, you can easily do things like replace the text on a button with a video clip.
XAML-based applications provide support for audio and video and enable media to be integrated with other user interface objects. For example, XAML-based applications allow videos to be applied to other interface elements so that objects such as buttons can have videos played on them.
Styles and Control Templates
Styles and control templates allow you to create visually appealing user interfaces. Styles are used to share design features with multiple objects in your interface. Control templates, which are even more powerful than styles, are used to replace the visual tree of a control completely.
Animations and Visual States
Animations allow you to create movement on the interface by defining the start-state and end-state of an object, along with timing information and a trigger that will start the animation. The application handles the actual animation.
Animations can significantly improve the user interface experience by affecting individual elements or groups of elements. For example, a single button can be animated so that it changes shape when the mouse pointed is placed over it, or all of the objects in the user interface can be animated as a group to move off the screen when a button is clicked.
Over time, your user interface may change state. Visual states are used to define how a control will look when it is in a specific state. For example, after a user has successfully logged into your application, you may want the content of a Button control to change from Login to Logout.
Property Binding and Data Binding
XAML-based applications provide two types of binding, property binding and data binding. Property binding allows you to bind the value of a property on one control to the value of a property on another control. Data binding allows you to configure UI elements to consume data from external sources. This binding can be configured so that elements that are bound to data can be automatically updated when the underlying data changes.
WPF and Silverlight Use XAML
Because the version of XAML used by WPF and the version of XAML used by Silverlight are similar, you can develop both Windows applications and web applications by using the same skills.
Because of the close relationship between Silverlight and WPF, the skills required to create applications in either technology are very similar. A WPF developer can easily use the existing knowledge and apply it to the creation of a Silverlight application and vice versa.
Important || Silverlight provides a subset of the classes provided by WPF.