Grid Control

The Grid panel arranges child elements in rows and columns, providing a flexible layout system for WinUI applications.

Definition

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

Properties

Property	Type	Description
`RowDefinitions`	`RowDefinitionCollection`	Defines the rows of the grid.
`ColumnDefinitions`	`ColumnDefinitionCollection`	Defines the columns of the grid.
`ShowGridLines`	`bool`	Shows the grid lines at runtime (useful for debugging).
`Background`	`Brush`	Background brush for the panel.

Methods

InvalidateArrange() – Forces a layout pass.
InvalidateMeasure() – Forces a measurement pass.

Examples

XAML

C# Code‑Behind

<Grid ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <TextBlock Text="Header" Grid.Row="0" Grid.ColumnSpan="2"
               FontSize="24" HorizontalAlignment="Center"/>

    <ListView Grid.Row="1" Grid.Column="0"/>
    <StackPanel Grid.Row="1" Grid.Column="1" Margin="8">
        <Button Content="Add"/>
        <Button Content="Remove" Margin="0,8,0,0"/>
    </StackPanel>
</Grid>

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        PopulateList();
    }
    private void PopulateList()
    {
        var items = new List<string>{ "Item 1", "Item 2", "Item 3" };
        MyListView.ItemsSource = items;
    }
    private void Add_Click(object sender, RoutedEventArgs e)
    {
        var list = (List<string>)MyListView.ItemsSource;
        list.Add($"Item {list.Count + 1}");
        MyListView.ItemsSource = null;
        MyListView.ItemsSource = list;
    }
    private void Remove_Click(object sender, RoutedEventArgs e)
    {
        var list = (List<string>)MyListView.ItemsSource;
        if(list.Any())
        {
            list.RemoveAt(list.Count-1);
            MyListView.ItemsSource = null;
            MyListView.ItemsSource = list;
        }
    }
}

Remarks

Use Auto, * (star sizing), or a fixed value for row and column sizes. Star sizing distributes remaining space proportionally.

Nested grids are common for complex layouts. Keep the visual tree shallow when possible to improve performance.