XAML Syntax Basics
Because XAML is XML, it inherits XML's well-formedness rules: a single root element, properly nested and closed tags, and case-sensitive names. On top of that XML foundation, XAML defines specific conventions — object elements that instantiate classes, attributes that set simple properties, and nested elements that set complex properties or add children. Understanding these base rules is what lets you read any WPF, UWP, or .NET MAUI XAML file, even one you've never seen before, and know exactly what object graph it produces.
Cricket analogy: Just as a scorecard must follow strict formatting rules (overs, wickets, extras each in their own column) for the ICC to accept it, XAML must follow strict XML formatting rules for the parser to accept it.
Object Elements and Property Elements
The most common syntax is the object element with attributes, such as <Button Content="OK" Width="80"/>, where the tag name creates a Button and each attribute sets a simple property from a string. When a property's value is too complex to express as a string — for example, setting a Button's Content to an Image rather than plain text — XAML uses property element syntax, written as <Button.Content><Image Source="icon.png"/></Button.Content>, where the dot-separated tag name identifies exactly which property on the parent is being set.
Cricket analogy: It's like filling a simple scorecard box with just a number (runs scored: 74) versus needing a whole sub-table for a complex stat like the wagon-wheel shot chart that a single number can't capture.
Content Properties and Collection Syntax
Many container classes designate one property as their ContentProperty via a .NET attribute, which lets XAML omit the property-element wrapper entirely: a StackPanel's default content property is Children, so <StackPanel><Button/><Button/></StackPanel> directly nests two buttons without ever writing <StackPanel.Children>. Collections work similarly — <Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="*"/></Grid.RowDefinitions> implicitly adds each RowDefinition to the underlying RowDefinitionCollection because collection properties accept multiple child elements automatically.
Cricket analogy: It's like a scorecard's 'Fall of Wickets' line implicitly being understood as a list of dismissals without needing to relabel each one — the format itself signals it's a collection.
<StackPanel Orientation="Vertical" Margin="10">
<!-- Content property lets children nest directly -->
<TextBlock Text="Choose an option:" FontWeight="Bold" />
<!-- Property element syntax for a complex Content value -->
<Button Width="140" Height="36">
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="icon.png" Width="16" Height="16" />
<TextBlock Text="Save" Margin="4,0,0,0" />
</StackPanel>
</Button.Content>
</Button>
<!-- Collection syntax -->
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
</StackPanel>XAML element and attribute names are case-sensitive, and every XML file must have exactly one root element with all tags properly closed (self-closing with /> or with a matching end tag). A missing closing tag or a mismatched-case property name like content instead of Content will produce a XamlParseException at load time or a design-time error in Visual Studio.
Markup Extensions
Curly-brace syntax like {Binding Path=UserName} or {StaticResource PrimaryBrush} invokes a markup extension — a class implementing MarkupExtension whose ProvideValue method computes the actual value to assign, rather than XAML converting a literal string. This is how XAML expresses things that aren't literal values at all, such as a data binding to a property on a ViewModel, a reference to a resource declared elsewhere, or a static value like {x:Static SystemColors.WindowBrush}, all inside what still looks like an ordinary attribute.
Cricket analogy: It's like a scorecard field showing '{Live: Strike Rate}' that the broadcast graphics engine recalculates in real time from the underlying data feed, rather than a fixed number typed once.
- XAML follows XML well-formedness rules: single root element, properly closed and case-sensitive tags.
- Object element syntax (<Button .../>) instantiates a class; attributes set simple properties.
- Property element syntax (<Button.Content>...</Button.Content>) sets a property whose value needs its own object graph.
- A ContentProperty attribute lets a class's default property (like Children) accept nested elements directly.
- Collection properties like RowDefinitions automatically accept multiple nested child elements.
- Markup extensions ({Binding}, {StaticResource}, {x:Static}) compute values dynamically instead of assigning literal strings.
- Case mismatches or unclosed tags produce XamlParseException at runtime or design-time errors.
Practice what you learned
1. What is the difference between object element syntax and property element syntax?
2. Why can <StackPanel><Button/></StackPanel> omit a <StackPanel.Children> wrapper?
3. What does the {Binding Path=UserName} syntax represent?
4. Which statement about XAML case sensitivity is correct?
5. What happens if a XAML file has an unclosed tag?
Was this page helpful?
You May Also Like
What Is XAML?
An introduction to XAML (Extensible Application Markup Language), the declarative XML-based language Microsoft frameworks use to define user interfaces and object graphs.
XAML Namespaces
How xmlns declarations map XML prefixes to CLR namespaces and assemblies, enabling XAML to reference both framework and custom types.
Elements and Attributes in XAML
How XAML elements map to classes, attributes map to properties via type converters, and how attached properties and events fit into the same syntax.
Related Reading
Related Study Notes in Microsoft Technologies
Browse all study notesWindows 10 / UWP Development Study Notes
.NET · 30 topics
Microsoft TechnologiesWindows Batch Scripting Study Notes
Batch · 30 topics
Microsoft TechnologiesMFC (Microsoft Foundation Classes) Study Notes
C++ · 30 topics
Microsoft TechnologiesSilverlight Study Notes
.NET · 30 topics
Microsoft TechnologiesWPF (Windows Presentation Foundation) Study Notes
.NET · 30 topics
Microsoft TechnologiesMVVM Design Pattern Study Notes
.NET · 30 topics