DockPanel

The DockPanel position child controls based on the child Dock property, you have 4 options to Dock, left (Default), right, top, bottom. You can set DockPanel LastChildFill property to true if you want the last item added to the DockPanel to fill the rest empty space.

<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="PrimitivesExperiment.Samples.DockPanelSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:PrimitivesExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      mc:Ignorable="d">
    <Grid ColumnSpacing="16">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <StackPanel Orientation="Vertical"
                    Spacing="4">
            <TextBlock Grid.Row="1"
                       Margin="4"
                       Style="{StaticResource CaptionTextBlockStyle}"
                       Text="In this demo you can't add a child after a Stretch child" />
            <Button Click="AddTopDock"
                    Content="Add Top child" />
            <Button Click="AddLeftDock"
                    Content="Add Left child" />
            <Button Click="AddBottomDock"
                    Content="Add Bottom child" />
            <Button Click="AddRightDock"
                    Content="Add Right child" />
            <Button Click="AddRightDock"
                    Content="Add Stretch child" />
            <Button Click="ClearAllDock"
                    Content="Clear all" />
        </StackPanel>

        <controls:DockPanel x:Name="SampleDockPanel"
                            Grid.Column="1"
                            Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
                            HorizontalSpacing="5"
                            LastChildFill="False"
                            VerticalSpacing="5">
            <StackPanel Height="100"
                        controls:DockPanel.Dock="Top"
                        Background="Black" />
            <StackPanel Width="100"
                        controls:DockPanel.Dock="Left"
                        Background="Red" />
            <StackPanel Height="100"
                        controls:DockPanel.Dock="Bottom"
                        Background="Green" />
            <StackPanel Width="100"
                        controls:DockPanel.Dock="Right"
                        Background="Blue" />
        </controls:DockPanel>
    </Grid>
</Page>

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using CommunityToolkit.WinUI.Controls;
using Windows.UI;

namespace PrimitivesExperiment.Samples;

[ToolkitSample(id: nameof(DockPanelSample), "DockPanel", description: $"A sample for showing how to create and use a {nameof(DockPanel)}.")]
public sealed partial class DockPanelSample : Page
{
    private static readonly Random Rand = new Random();

    public DockPanelSample()
    {
        this.InitializeComponent();
    }

    private void ClearAllDock(object sender, RoutedEventArgs e)
    {
        SampleDockPanel.Children.Clear();
        SampleDockPanel.LastChildFill = false;
    }

    private void AddStretchDock(object sender, RoutedEventArgs e)
    {
        AddChild(Dock.Bottom, false, false);
        SampleDockPanel.LastChildFill = true;
    }

    private void AddBottomDock(object sender, RoutedEventArgs e)
    {
        AddChild(Dock.Bottom, false, true);
    }

    private void AddTopDock(object sender, RoutedEventArgs e)
    {
        AddChild(Dock.Top, false, true);
    }

    private void AddLeftDock(object sender, RoutedEventArgs e)
    {
        AddChild(Dock.Left, true, false);
    }

    private void AddRightDock(object sender, RoutedEventArgs e)
    {
        AddChild(Dock.Right, true, false);
    }

    private void AddChild(Dock dock, bool setWidth = false, bool setHeight = false)
    {
        if (SampleDockPanel.LastChildFill)
        {
            return;
        }

        const int maxColor = 255;
        var childStackPanel = new StackPanel
        {
            Background = new SolidColorBrush(Color.FromArgb(
                                (byte)Rand.Next(0, maxColor),
                                (byte)Rand.Next(0, maxColor),
                                (byte)Rand.Next(0, maxColor),
                                1))
        };

        if (setHeight)
        {
            childStackPanel.Height = Rand.Next(50, 80);
        }

        if (setWidth)
        {
            childStackPanel.Width = Rand.Next(50, 80);
        }

        childStackPanel.SetValue(DockPanel.DockProperty, dock);
        childStackPanel.PointerPressed += this.ChildStackPanel_PointerPressed;
        SampleDockPanel.Children.Add(childStackPanel);
    }

    private void ChildStackPanel_PointerPressed(object sender, PointerRoutedEventArgs e)
    {
        SampleDockPanel.Children.Remove((StackPanel)sender);
    }
}

Syntax

<Page ...
     xmlns:controls="using:CommunityToolkit.WinUI.Controls">

    <controls:DockPanel Name="SampleDockPanel" Margin="2" Background="LightGray" LastChildFill="False" >
      <StackPanel Height="100" controls:DockPanel.Dock="Top" Background="Black"></StackPanel>
      <StackPanel Width="100" controls:DockPanel.Dock="Left" Background="Red"></StackPanel>
      <StackPanel Height="100" controls:DockPanel.Dock="Bottom" Background="Green"></StackPanel>
      <StackPanel Width="100" controls:DockPanel.Dock="Right" Background="Blue"></StackPanel>
    </controls:DockPanel>

</Page>