Search code examples
xamluwpuwp-xamlrelativepanel

UWP RelativePanel plan an element right to another then stretch to the panel

This is my XAML

<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="10,0,0,0">
    <TextBlock x:Name="PageTitle"
               RelativePanel.AlignTopWithPanel="True"
               Style="{StaticResource WindowTitle}">This is my page title</TextBlock>
    <TextBlock x:Name="ActivityLabel"
               RelativePanel.Below="PageTitle"
               Style="{StaticResource CaptionTitle}">Activity</TextBlock>
    <ComboBox x:Name="ActivityOptions"
              RelativePanel.RightOf="ActivityLabel"
              RelativePanel.AlignRightWithPanel="True"
              RelativePanel.AlignHorizontalCenterWith="ActivityLabel"
              ItemsSource="{Binding Path=SupportedActivityTypes}">
    </ComboBox>
</RelativePanel>

And this is my output enter image description here

What I want to achieve is that the title is on top of the page, multiple lines below the title. Each line has a caption, right to the caption is combo box, textbox and so on, but the right side should stretch to the right border of the panel.

Obviously my code does not work, the combo does not even central align with my caption text as I specified in markup. And how to make the left side of combo to touch the caption text and right side to the border of the panel?

Solution

  • I figured it out, I need following XAML

    <RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="10,0,0,0">
    <TextBlock x:Name="PageTitle"
               Margin="0,0,0,20"
               RelativePanel.AlignTopWithPanel="True"
               Style="{StaticResource WindowTitle}">This is page title</TextBlock>
    <TextBlock x:Name="ActivityLabel"
               RelativePanel.Below="PageTitle"
               Style="{StaticResource CaptionTitle}">Activity</TextBlock>
    <ComboBox x:Name="ActivityOptions"
              Margin="10,0,0,0"
              HorizontalAlignment="Stretch"
              RelativePanel.RightOf="ActivityLabel"
              RelativePanel.AlignRightWithPanel="True"
              RelativePanel.AlignVerticalCenterWith="ActivityLabel"
              ItemsSource="{Binding Path=SupportedActivityTypes}">
    </ComboBox>
</RelativePanel>

    The combo box is on the same line of caption label ("Activity") and meanwhile the width stretches to relative panel size.