RelativePanel

RelativePanel представляет контейнер, в котором можно задать позиционирование элемента относительно другого элемента. Для этого во всех вложенных элементах можно использовать ряд свойств.

Установка позиции относительно другого элемента:

• RelativePanel.Above: размещение над другим элементом

• RelativePanel.Below: размещение под другим элементом

• RelativePanel.LeftOf: размещение слева от другого элемента

• RelativePanel.RightOf: размещение справа от другого элемента

Вторая группа свойств управляет выравниванием одного элемента относительно другого:

• RelativePanel.AlignBottomWith: выравнивает относительно другого элемента по нижнему краю

• RelativePanel.AlignHorizontalCenterWith: выравнивает относительно другого элемента по центру по горизонтали

• RelativePanel.AlignLeftWith: выравнивает относительно другого элемента слева

• RelativePanel.AlignRightWith: выравнивает относительно другого элемента справа

• RelativePanel.AlignTopWith: выравнивает относительно другого элемента сверху

• RelativePanel.AlignVerticalCenterWith: выравнивает относительно другого элемента по центру по вертикали

Обе эти группы свойств принимают в качестве значения имя другого элемента, относительно которого надо размещать текущий элемент.

И третья группа свойств выравнивает элемент относительно границ самого контейнера RelativePanel:

• RelativePanel.AlignBottomWithPanel: при значении true выравнивает элемент по вертикали по нижнему краю панели

• RelativePanel.AlignHorizontalCenterWithPanel: при значении true выравнивает элемент по горизонтали по центру панели

• RelativePanel.AlignLeftWithPanel: при значении true выравнивает элемент по левому краю панели

• RelativePanel.AlignRightWithPanel: при значении true выравнивает элемент по правому краю панели

• RelativePanel.AlignTopWithPanel: при значении true выравнивает элемент по верхнему краю панели

• RelativePanel.AlignVerticalCenterWithPanel: при значении true выравнивает элемент по вертикали по центру панели

Эти свойства принимают логическое значение true или false.

Для достижения нужного эффекта эти свойства можно комбинировать. Например, определим текстовое поле и справа от него кнопку:

<Page
    x:Class="LayoutApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LayoutApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        
        <Button x:Name="loginButton" Content="Login" Margin="10"
                RelativePanel.AlignTopWithPanel="True"
                RelativePanel.AlignRightWithPanel="True"/>
        <TextBox x:Name="loginBox" Margin="10"
                 RelativePanel.LeftOf="loginButton"
                 RelativePanel.AlignLeftWithPanel="True"
        />
    </RelativePanel>
</Page>

Здесь кнопка прижата к верхнему и правому краю контейнера RelativePanel. А текстовое поле прижато к левой границе контейнера и размещается слева от кнопки.