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. А текстовое поле прижато к левой границе контейнера и размещается слева от кнопки.