MSDN Documentation

What is XAML?

XAML allows you to declare UI elements, their properties, and their relationships in a declarative, markup-based format. This separation of concerns between the UI design and the application logic (typically written in C# or Visual Basic) is a core principle of WPF development.

Key benefits of using XAML:

• Declarative UI Definition: Visually design your UI by describing its structure and appearance.
• Separation of Concerns: Keep UI markup separate from application code, making projects more organized and maintainable.
• Tooling Support: XAML is well-supported by Visual Studio's designer and other development tools.
• Data Binding: Easily connect UI elements to data sources.
• Styling and Templating: Define consistent looks and behaviors for your controls.

Basic XAML Structure

A typical XAML file starts with an XML declaration and a root element, which is usually a layout panel or a window. Inside the root element, you declare other UI elements (controls) and set their properties.

Consider this simple XAML snippet:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="My First WPF App" Height="300" Width="400">
    <Grid>
        <TextBlock Text="Hello, XAML!"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   FontSize="30"
                   Foreground="SteelBlue"/>
    </Grid>
</Window>
                

Explanation:

• <Window ...>: This is the root element, representing the main window of your application. The xmlns attributes declare the XML namespaces used, which are crucial for WPF to understand the elements and attributes.
• Title="My First WPF App": Sets the text displayed in the window's title bar. This is a property of the Window element.
• <Grid>: A layout panel that arranges child elements in a grid. It's a common choice for organizing content.
• <TextBlock ...>: A control used to display plain text.
• Text="Hello, XAML!": Sets the content to be displayed by the TextBlock.
• HorizontalAlignment, VerticalAlignment, FontSize, Foreground: These are other properties of the TextBlock that control its position, size, and color.

Elements and Properties

In XAML, UI elements are represented by elements (e.g., Button, Label, TextBox, Grid, StackPanel). Each element has a set of configurable properties that define its appearance, behavior, and layout.

Example: A Button

Let's add a button to our previous example:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF XAML Example" Height="350" Width="450">
    <StackPanel Margin="20">
        <TextBlock Text="Welcome to WPF!" FontSize="24" Margin="0,0,0,15" />
        <Button Content="Click Me"
                Width="150"
                Height="40"
                FontSize="18"
                HorizontalAlignment="Center"
                Click="OnButtonClick"/>
    </StackPanel>
</Window>
                

Properties are set using the PropertyName="Value" syntax. For complex properties that have their own properties, you can use attribute-like syntax:

<Button Content="Styled Button"
        Width="150" Height="40">
    <Button.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="LightBlue" Offset="0"/>
            <GradientStop Color="DarkBlue" Offset="1"/>
        </LinearGradientBrush>
    </Button.Background>
</Button>
                

This demonstrates setting the Background property using a LinearGradientBrush, which is an example of a complex property or object element property.

Layout Panels

Layout panels are crucial for arranging your UI elements. They provide different ways to position and size child controls within them.

• Grid: Divides the available space into rows and columns, allowing precise alignment.
• StackPanel: Arranges child elements in a single line, either horizontally or vertically.
• DockPanel: Allows children to "dock" to the top, bottom, left, or right edges of the panel.
• Canvas: Allows absolute positioning of children using coordinates.
• WrapPanel: Arranges children in a line and wraps them to the next line when the available space is filled.

Namespaces

XML namespaces are used to avoid naming conflicts and to associate elements with their definitions. In WPF XAML, the primary namespace is http://schemas.microsoft.com/winfx/2006/xaml/presentation. You'll often see it abbreviated with the default prefix x: for elements from the XAML language itself, or with custom prefixes for custom controls or CLR namespaces.

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- Content here -->
</Window>