RelativePanel

Overview

The RelativePanel layout container enables you to position child elements relative to each other using attached properties. It is ideal for creating adaptive UI that automatically arranges controls based on available space.

Getting Started

First, add the WinUI 3 NuGet package to your project and include the namespace:

<Page
    x:Class="MyApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls">

Properties

Property	Description
`Above`	Positions the element above another element.
`Below`	Positions the element below another element.
`AlignLeftWith`	Aligns the left edge with another element.
`AlignRightWith`	Aligns the right edge with another element.
`AlignTopWith`	Aligns the top edge with another element.
`AlignBottomWith`	Aligns the bottom edge with another element.
`AlignHorizontalCenterWith`	Centers horizontally with another element.
`AlignVerticalCenterWith`	Centers vertically with another element.

Methods

RelativePanel does not expose specific methods; layout behavior is driven by attached properties.

Examples

Simple Form Layout

<muxc:RelativePanel Padding="24">
    <TextBlock x:Name="lblName" Text="Name:"/>
    <TextBox x:Name="txtName" Width="200"
             muxc:RelativePanel.RightOf="lblName"
             Margin="8,0,0,0"/>

    <TextBlock x:Name="lblEmail" Text="Email:"
             muxc:RelativePanel.Below="lblName"
             Margin="0,16,0,0"/>
    <TextBox x:Name="txtEmail" Width="200"
             muxc:RelativePanel.RightOf="lblEmail"
             muxc:RelativePanel.Below="txtName"
             Margin="8,16,0,0"/>

    <Button Content="Submit"
            muxc:RelativePanel.AlignHorizontalCenterWith="txtEmail"
            muxc:RelativePanel.Below="txtEmail"
            Margin="0,24,0,0"/>
</muxc:RelativePanel>

The example arranges labels and text boxes using RightOf and Below attached properties, keeping the form compact and responsive.

WinUI 3 – RelativePanel