UWP RelativePanel 将一个元素规划到另一个元素，然后拉伸到面板答案

【问题标题】：UWP RelativePanel plan an element right to another then stretch to the panelUWP RelativePanel 将一个元素规划到另一个元素，然后拉伸到面板
【发布时间】：2018-03-08 08:19:22
【问题描述】：

这是我的 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>

这是我的输出

我想要实现的是标题在页面顶部，标题下方有多行。每行都有一个标题，标题右侧是组合框、文本框等，但右侧应延伸到面板的右边框。

显然我的代码不起作用，该组合甚至没有与我在标记中指定的标题文本居中对齐。以及如何让combo的左边接触到标题文字，右边接触到面板的边框？

【问题讨论】：

标签： xaml uwp uwp-xaml relativepanel

【解决方案1】：

我想通了，我需要遵循 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>

组合框位于标题标签（“Activity”）的同一行，同时宽度延伸到相对面板尺寸。

【讨论】：

【解决方案2】：

如何让combo的左边接触到标题文字，右边接触到面板的边框？

你需要设置RelativePanel.RightOf="PageTitle"和RelativePanel.AlignVerticalCenterWith="PageTitle"。

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

【讨论】：

嗨，你误解了我的问题。我想要在同一行标题文本（活动）上的组合。但是我可以稍后通过一些调整来尝试您的解决方案。
@hardywang 好的。如果你想在同一行标题文本（Activity）上组合，你需要按照你说的设置RelativePanel.RightOf="ActivityLabel"和RelativePanel.AlignVerticalCenterWith="ActivityLabel"。