What is a XAML cheat sheet?

A XAML cheat sheet is a quick reference guide containing the most commonly used syntax, functions, and patterns in XAML. It helps developers quickly look up syntax without searching through documentation.

How do I learn XAML quickly?

Start with the basics: variables, control flow, and functions. Use this cheat sheet as a reference while practicing. For faster learning, try DocuWriter.ai to automatically explain code and generate documentation as you learn.

What are the most important XAML concepts?

Key XAML concepts include variables and data types, control flow (if/else, loops), functions, error handling, and working with data structures like arrays and objects/dictionaries.

How can I document my XAML code?

Use inline comments for complex logic, docstrings for functions and classes, and README files for projects. DocuWriter.ai can automatically generate professional documentation from your XAML code using AI.

XAML Cheat Sheet - Quick Reference Guide 2026

Getting Started

3 snippets

Basic XAML structure and syntax

Basic XAML Document

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="My Window" Height="450" Width="800">
    <Grid>
        <!-- Content here -->
    </Grid>
</Window>

Comments

<!-- Single line comment -->

<!--
  Multi-line
  comment
-->

Namespaces

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MyApp"
xmlns:sys="clr-namespace:System;assembly=mscorlib"

Layout Containers

5 snippets

Common layout panels

Grid

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="50"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Row="0" Grid.Column="0" Text="Header"/>
    <ContentControl Grid.Row="1" Grid.Column="1"/>
</Grid>

StackPanel

<StackPanel Orientation="Vertical">
    <TextBlock Text="First"/>
    <TextBlock Text="Second"/>
    <TextBlock Text="Third"/>
</StackPanel>

<StackPanel Orientation="Horizontal">
    <Button Content="OK"/>
    <Button Content="Cancel"/>
</StackPanel>

DockPanel

<DockPanel LastChildFill="True">
    <Menu DockPanel.Dock="Top"/>
    <StatusBar DockPanel.Dock="Bottom"/>
    <TreeView DockPanel.Dock="Left" Width="200"/>
    <ContentControl/>
</DockPanel>

WrapPanel

<WrapPanel Orientation="Horizontal">
    <Button Content="Button 1" Width="100" Height="50"/>
    <Button Content="Button 2" Width="100" Height="50"/>
    <Button Content="Button 3" Width="100" Height="50"/>
</WrapPanel>

Canvas

<Canvas>
    <Rectangle Canvas.Left="50" Canvas.Top="50"
               Width="100" Height="100" Fill="Blue"/>
    <Ellipse Canvas.Left="200" Canvas.Top="100"
             Width="80" Height="80" Fill="Red"/>
</Canvas>

Common Controls

5 snippets

Basic UI controls

TextBlock & TextBox

<TextBlock Text="Label:" FontWeight="Bold"/>

<TextBox Text="{Binding Name}" Width="200"/>

<TextBox AcceptsReturn="True"
         TextWrapping="Wrap"
         Height="100"/>

Button

<Button Content="Click Me" Click="Button_Click"/>

<Button Width="100" Height="30">
    <StackPanel Orientation="Horizontal">
        <Image Source="icon.png" Width="16"/>
        <TextBlock Text="Save" Margin="5,0,0,0"/>
    </StackPanel>
</Button>

CheckBox & RadioButton

<CheckBox Content="Option 1" IsChecked="True"/>
<CheckBox Content="Option 2" IsChecked="{Binding IsEnabled}"/>

<StackPanel>
    <RadioButton Content="Choice A" GroupName="Group1"/>
    <RadioButton Content="Choice B" GroupName="Group1"/>
</StackPanel>

ComboBox

<ComboBox SelectedIndex="0">
    <ComboBoxItem Content="Option 1"/>
    <ComboBoxItem Content="Option 2"/>
    <ComboBoxItem Content="Option 3"/>
</ComboBox>

<ComboBox ItemsSource="{Binding Items}"
          DisplayMemberPath="Name"
          SelectedItem="{Binding SelectedItem}"/>

ListBox & ListView

<ListBox ItemsSource="{Binding Items}"
         SelectedItem="{Binding SelectedItem}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Tired of looking up syntax?

DocuWriter.ai generates documentation and explains code using AI.

Try Free

Data Binding

6 snippets

Binding expressions and modes

Basic Binding

<TextBox Text="{Binding Name}"/>
<TextBlock Text="{Binding Age}"/>

Binding Modes

<!-- OneWay: Source to Target only -->
<TextBlock Text="{Binding Name, Mode=OneWay}"/>

<!-- TwoWay: Bidirectional -->
<TextBox Text="{Binding Name, Mode=TwoWay}"/>

<!-- OneTime: Set once at initialization -->
<TextBlock Text="{Binding Title, Mode=OneTime}"/>

ElementName Binding

<Slider x:Name="slider" Minimum="0" Maximum="100"/>
<TextBlock Text="{Binding ElementName=slider, Path=Value}"/>

RelativeSource Binding

<!-- Bind to parent -->
<TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=Title}"/>

<!-- Bind to self -->
<Button Content="{Binding RelativeSource={RelativeSource Self}, Path=Name}"/>

String Format

<TextBlock Text="{Binding Price, StringFormat='Price: {0:C}'}"/>
<TextBlock Text="{Binding Date, StringFormat='Date: {0:yyyy-MM-dd}'}"/>

Value Converter

<Window.Resources>
    <local:BoolToVisibilityConverter x:Key="BoolToVis"/>
</Window.Resources>

<TextBlock Visibility="{Binding IsVisible, Converter={StaticResource BoolToVis}}"/>

Styles & Templates

5 snippets

Styling and templating

Style Definition

<Window.Resources>
    <Style x:Key="HeaderStyle" TargetType="TextBlock">
        <Setter Property="FontSize" Value="24"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Foreground" Value="Blue"/>
    </Style>
</Window.Resources>

<TextBlock Text="Header" Style="{StaticResource HeaderStyle}"/>

Implicit Style

<Window.Resources>
    <Style TargetType="Button">
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Padding" Value="10,5"/>
    </Style>
</Window.Resources>

<!-- Style applies to all Buttons -->
<Button Content="OK"/>
<Button Content="Cancel"/>

ControlTemplate

<ControlTemplate TargetType="Button">
    <Border Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="1"
            CornerRadius="5">
        <ContentPresenter HorizontalAlignment="Center"
                          VerticalAlignment="Center"/>
    </Border>
</ControlTemplate>

DataTemplate

<ListBox ItemsSource="{Binding People}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
                <TextBlock Text="{Binding Age}" Margin="10,0,0,0"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Triggers

<Style TargetType="Button">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="LightBlue"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Background" Value="DarkBlue"/>
        </Trigger>
    </Style.Triggers>
</Style>

Resources

4 snippets

Defining and using resources

Resource Dictionary

<Window.Resources>
    <SolidColorBrush x:Key="PrimaryBrush" Color="#007ACC"/>
    <sys:Double x:Key="LargeFont">24</sys:Double>
    <Thickness x:Key="DefaultMargin">10</Thickness>
</Window.Resources>

Static Resource

<Button Background="{StaticResource PrimaryBrush}"
        FontSize="{StaticResource LargeFont}"
        Margin="{StaticResource DefaultMargin}"/>

Dynamic Resource

<!-- Updates when resource changes at runtime -->
<Button Background="{DynamicResource PrimaryBrush}"/>

Merged Dictionaries

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Styles/Colors.xaml"/>
            <ResourceDictionary Source="Styles/Buttons.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Window.Resources>

Events & Commands

4 snippets

Handling user interactions

Event Handlers

<Button Content="Click Me" Click="Button_Click"/>

<TextBox TextChanged="TextBox_TextChanged"/>

<Window Loaded="Window_Loaded" Closing="Window_Closing"/>

Routed Events

<StackPanel Button.Click="StackPanel_Click">
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
</StackPanel>

Commands (MVVM)

<Button Content="Save" Command="{Binding SaveCommand}"/>

<MenuItem Header="Exit" Command="{Binding ExitCommand}"/>

Command with Parameter

<Button Content="Delete"
        Command="{Binding DeleteCommand}"
        CommandParameter="{Binding SelectedItem}"/>

Advanced Features

4 snippets

Advanced XAML concepts

Markup Extensions

<!-- Binding -->
<TextBlock Text="{Binding Name}"/>

<!-- Static Resource -->
<Button Background="{StaticResource PrimaryBrush}"/>

<!-- x:Static -->
<TextBlock Text="{x:Static local:Constants.AppName}"/>

<!-- x:Type -->
<ContentControl Content="{x:Type Button}"/>

Attached Properties

<Button Grid.Row="1" Grid.Column="2"/>

<TextBlock DockPanel.Dock="Top"/>

<Rectangle Canvas.Left="50" Canvas.Top="100"/>

Property Element Syntax

<Button>
    <Button.Content>
        <StackPanel>
            <Image Source="icon.png"/>
            <TextBlock Text="Save"/>
        </StackPanel>
    </Button.Content>
</Button>

x:Name vs Name

<!-- x:Name creates field reference in code-behind -->
<TextBox x:Name="nameTextBox"/>

<!-- Name is for FrameworkElement -->
<Button Name="submitButton"/>

XAML Cheat Sheet

Getting Started

Basic XAML Document

Comments

Namespaces

Layout Containers

Grid

StackPanel

DockPanel

WrapPanel

Canvas

Common Controls

TextBlock & TextBox

Button

CheckBox & RadioButton

ComboBox

ListBox & ListView

Data Binding

Basic Binding

Binding Modes

ElementName Binding

RelativeSource Binding

String Format

Value Converter

Styles & Templates

Style Definition

Implicit Style

ControlTemplate

DataTemplate

Triggers

Resources

Resource Dictionary

Static Resource

Dynamic Resource

Merged Dictionaries

Events & Commands

Event Handlers

Routed Events

Commands (MVVM)

Command with Parameter

Advanced Features

Markup Extensions

Attached Properties

Property Element Syntax

x:Name vs Name

More Cheat Sheets

Frequently asked questions

What is a XAML cheat sheet?

How do I learn XAML quickly?

What are the most important XAML concepts?

How can I document my XAML code?

Convert XAML to Other Languages

XAML to Xml

XAML to Html

XAML to C#

XAML to Json

XAML to Yaml

XAML to TypeScript

More XAML resources

XAML code generator

XAML Code Commenting Guide

XAML Docstring Style Guide

XAML Documentation Examples

XAML API Documentation Best Practices

How to Write XAML Documentation

Generate XAML Docs with AI