XAML Basics in WPF

Analogy categoryAnalogies

XAML (Extensible Application Markup Language) is the XML-based declarative language WPF uses to describe a UI tree: each XML element instantiates a .NET class, and each XML attribute typically sets a property or event on that instance. A <Button Content="OK" Click="OnOk"/> element, for example, instantiates a System.Windows.Controls.Button, sets its Content property to the string 'OK', and wires its Click event to a handler named OnOk in the code-behind — the XAML parser and the compiler translate this markup into the same object graph you could otherwise build by hand in C#.

🏏

Cricket analogy: Like a team sheet listing player names and their assigned batting positions, which the scorer's system then reads to set up the actual match lineup, a XAML element like <Button Content="OK"/> declares an object and its property values that the WPF parser reads to build the actual UI object graph.

Elements, Attributes, and Property Syntax

Simple property values, like a string or a number, are usually set as XML attributes — Width="200" or Text="Hello". But when a property's value is itself a complex object that can't be expressed as a plain attribute string, XAML uses property-element syntax instead: <Button.Background><LinearGradientBrush>...</LinearGradientBrush></Button.Background> sets the Background property to a whole gradient-brush object tree. Most controls also designate one property as their 'content property' (Button's is Content, ContentControl-derived classes inherit this), which is why <Button>Click Me</Button> works without explicitly writing Content="Click Me" — the text between the tags is implicitly assigned to that content property.

🏏

Cricket analogy: Like a simple stat such as a player's strike rate fitting neatly into one column of a scorecard, while a full wagon-wheel shot chart needs its own separate diagram, simple XAML property values fit as attributes while complex ones like a gradient brush need property-element syntax.

Layout Panels

WPF lays out UI using panel classes rather than fixed pixel coordinates: Grid divides space into rows and columns declared via RowDefinitions and ColumnDefinitions, and a child is placed into a cell using the attached properties Grid.Row and Grid.Column; StackPanel arranges children in a single horizontal or vertical line based on its Orientation property. Other panels — DockPanel for docking children to an edge, WrapPanel for wrapping content across lines, and Canvas for explicit x/y positioning — cover more specialized layouts, but Grid and StackPanel handle the majority of real-world WPF screens because they resize gracefully as the window is resized.

🏏

Cricket analogy: Like a ground's seating chart dividing the stadium into numbered blocks and rows where each ticket maps to an exact section, a WPF Grid divides space into rows and columns where each child element maps to an exact Grid.Row and Grid.Column.

Markup Extensions: Binding and StaticResource

Markup extensions are the curly-brace syntax in XAML — {Binding Path=Name}, {StaticResource PrimaryBrush}, {x:Static SystemColors.WindowBrush} — that let an attribute's value be computed or looked up instead of being a plain literal string. {Binding} connects a property to a source, typically a view-model property via the element's DataContext; {StaticResource} looks up a previously defined resource (a Brush, a Style, a number) by key from the nearest ResourceDictionary in scope; and both are resolved either at load time (StaticResource) or dynamically as the underlying value changes (Binding, or DynamicResource for resources).

🏏

Cricket analogy: Like a scoreboard operator referencing 'today's official run rate' by formula instead of typing a fixed number, a XAML {Binding} expression references a view-model's live property instead of a fixed literal value.

xml

<Window x:Class="MyWpfApp.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Customer Editor" Height="240" Width="360">
    <Grid Margin="12">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <TextBlock Grid.Row="0"
                   Text="{Binding CustomerName}"
                   Style="{StaticResource HeaderTextStyle}"/>

        <Button Grid.Row="1"
                Content="Save"
                x:Name="SaveButton"
                Command="{Binding SaveCommand}"
                HorizontalAlignment="Right"
                VerticalAlignment="Bottom"/>
    </Grid>
</Window>

Giving an element x:Name="SaveButton" generates a strongly-typed field in the partial class behind the XAML, so code-behind can reference this.SaveButton directly — it's the XAML equivalent of a variable declaration.

Attached Properties

Attached properties let a child element set a property that's actually defined and owned by a different class — usually its parent panel — which is why Grid.Row="1" appears on a Button rather than on the Grid itself: Grid defines the Row and Column attached properties, and any child placed inside a Grid can set them to say which cell it belongs in. The same mechanism powers DockPanel.Dock="Left", Canvas.Left="20", and even non-layout uses like Grid.IsSharedSizeScope or ToolTipService.ShowDuration, making attached properties WPF's general-purpose way of letting a container 'ask' its children for placement or configuration data.

🏏

Cricket analogy: Like a franchise assigning each player's batting position on the team sheet rather than each player deciding it themselves, a WPF Grid assigns each child's Grid.Row and Grid.Column as attached properties the Grid itself defines, even though the child element sets them.

XAML is case-sensitive, and every non-default namespace prefix must be declared, most importantly xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml". Omitting it breaks x:Class, x:Name, and any other x: prefixed attribute across the whole file.

XAML elements instantiate .NET classes; XAML attributes generally set properties or wire up events on that instance.
Simple values are set as attributes; complex object values use property-element syntax like <Button.Background>.
Most ContentControls have a 'content property' (Button's is Content) so text between tags is assigned implicitly.
Grid divides space into RowDefinitions/ColumnDefinitions; children place themselves with Grid.Row and Grid.Column.
StackPanel arranges children in a single line by Orientation; DockPanel, WrapPanel, and Canvas cover other layouts.
Markup extensions like {Binding} and {StaticResource} compute or look up a property's value instead of a literal.
Attached properties (Grid.Row, DockPanel.Dock, Canvas.Left) let a child set a property owned by its parent panel.

Practice what you learned

1. In <Button Content="OK" Click="OnOk"/>, what does the Content attribute do?

2. When is property-element syntax (e.g. <Button.Background>) required instead of a plain attribute?

3. Which panel lays out children into rows and columns using attached properties Grid.Row and Grid.Column?

4. What does the {Binding} markup extension do?

5. What is an attached property in WPF?

Was this page helpful?

Project Structure in WPF

The WPF Application Lifecycle

Related Study Notes in Microsoft Technologies

Browse all study notes

Microsoft Technologies

Windows 10 / UWP Development Study Notes

.NET · 30 topics

Microsoft Technologies

Windows Batch Scripting Study Notes

Batch · 30 topics

Microsoft Technologies

MFC (Microsoft Foundation Classes) Study Notes

C++ · 30 topics

Microsoft Technologies

Silverlight Study Notes

.NET · 30 topics

Microsoft Technologies

XAML Study Notes

.NET · 30 topics

Microsoft Technologies

MVVM Design Pattern Study Notes

.NET · 30 topics

Topics covered

#NET#WPFWindowsPresentationFoundationStudyNotes#MicrosoftTechnologies#XAMLBasicsInWPF#XAML#WPF#Elements#Attributes#StudyNotes#SkillVeris

XAML Basics in WPF