XAML Basics

Welcome to the XAML (Extensible Application Markup Language) guide for WinUI. XAML is a declarative XML‑based language used to define UI elements, layout, and behaviour in Windows apps.

Layout system

WinUI provides several panels that arrange child elements. The most common are StackPanel, Grid, and RelativePanel.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <TextBlock Grid.Row="0" Text="Header" FontSize="24"/>
    <ListView Grid.Row="1" ItemsSource="{Binding Items}"/>
</Grid>

Common controls

WinUI offers a rich set of controls. Below is a simple example of a Button with a click handler defined in XAML.

<Button Content="Click me"
        Click="OnButtonClick"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"/>

Data binding

Data binding connects UI elements to data sources. Use the {Binding} markup extension to link properties.

<TextBox Text="{Binding Username, Mode=TwoWay}"
         PlaceholderText="Enter your name"/>

Styles & Templates

Define reusable appearance with <Style> and customize control visuals with <ControlTemplate>.

<Page.Resources>
    <Style TargetType="Button">
        <Setter Property="Background" Value="#0067c0"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Padding" Value="8,4"/>
    </Style>
</Page.Resources>

Further resources