Universal App窗口10中的RelativePanel对齐

Question

我试图了解RelativePanel如何在Universal App for Windows 10中运行，以及如何分割元素。

我试图按如下方式拆分RelativePanel的内容：

MainRelativePanel
-------------------------------------------------------
|Image|   RelativePanel1   |      RelativePanel2      |
|Image|   RelativePanel1   |      RelativePanel2      |
-------------------------------------------------------

我的图像控件是固定宽度，即40，我的RelativePanel属性设置如下：

RelativePanel.AlignTopWithPanel="True" 
RelativePanel.AlignLeftWithPanel="True"

这部分工作正常。

对于我的RelativePanel1，我有以下RelativePanel属性：

RelativePanel.RightOf="Image"

对于我的RelativePanel2，我有以下RelativePanel属性：

RelativePanel.RightOf="RelativePanel1"
RelativePanel.AlignRightWithPanel="True"

我希望能分开RelativePanel1＆amp; RelativePanel2 50/50但是我的RelativePanel1水平占据屏幕的大部分，我的RelativePanel2垂直拉伸，使得我的Listview中的DataTemplate非常大。

-------------------------------------------------------
|Image|   RelativePanel1                          |RP2|
|                                                 |   |
|                                                 |   |
|                                                 |   |
|                                                 |   |
|                                                 |   |
|                                                 |   |
|                                                 |   |
|                                                 |   |
-------------------------------------------------------
|Image|   RelativePanel1                          |RP2|
|                                                 |   |
|                                                 |   |
|                                                 |   |
|                                                 |   |
|                                                 |   |
-------------------------------------------------------

如果我在RelativePanel1上设置Width，我可以或多或少地使用它，但理想情况下我希望它是自动的，因为当你使用Grid控件时它会得到它。

有没有办法实现这个目标？我没有使用网格并拆分列的原因是我希望RelativePanel2显示在较小设备（如Mobile）中的RelativePanel1下面，我希望它们在较大的设备上彼此相邻显示，例如片剂。

已更新

以下是DataTemplate列表视图所需的完整代码：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView ItemsSource="{Binding Items}"  
              Background="Red">
        <ListViewItemPresenter ContentMargin="0">
        </ListViewItemPresenter>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalAlignment" Value="Stretch" />
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="Padding" Value="0" />
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="White" BorderThickness="2">
                    <RelativePanel Background="#494949">
                        <Image Name="Logo"
                                   Source="{Binding RPMain.Logo}" 
                                   RelativePanel.AlignTopWithPanel="True" 
                                   RelativePanel.AlignLeftWithPanel="True"
                                   Width="40"
                                   Height="40"
                                   Margin="5" />

                        <RelativePanel Name="RP1"
                                           Margin="10,0,0,0"
                                           Background="Green"
                                           RelativePanel.RightOf="Logo">

                            <Border Name="RP1Time"
                                        Background="Orange" 
                                        Margin="5,5,0,0">
                                <TextBlock Text="{Binding RP1.Time}" 
                                               Foreground="white"
                                               FontWeight="Bold" />
                            </Border>

                            <TextBlock Name="RP1Title" 
                                           Text="{Binding RP1.Title}" 
                                           Foreground="Black"
                                           FontWeight="SemiBold"
                                           RelativePanel.RightOf="RP1Time" 
                                           Margin="5,0,0,0"/>

                            <TextBlock Name="Description" 
                                           Text="{Binding RP1.Description}" 
                                           TextWrapping="Wrap" 
                                           RelativePanel.Below="RP1Title"
                                           Margin="5,0,5,0" />
                        </RelativePanel>

                        <RelativePanel Name="RP2"
                                       RelativePanel.RightOf="RP1"
                                       RelativePanel.AlignRightWithPanel="True"
                                       Background="Pink"
                                       Margin="0,0,0,0">

                            <Border Name="RP2Time"
                                        Background="Orange" Margin="5,5,0,0">
                                <TextBlock Text="{Binding Now.Time}" 
                                               Foreground="white"
                                               FontWeight="Bold" />
                            </Border>

                            <TextBlock Name="RP2Title"
                                           Text="{Binding RP2.Title}" 
                                           Foreground="Black"
                                           FontWeight="SemiBold"
                                           RelativePanel.RightOf="RP2Time" 
                                           Margin="5,0,0,0"/>

                            <TextBlock Name="RP2Description" 
                                           Text="{Binding RP2.Description}" 
                                           TextWrapping="Wrap" 
                                           RelativePanel.Below="RP2Title"
                                           Margin="5,0,5,0"/>
                        </RelativePanel>

                    </RelativePanel>
                </Border>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

我为RP1＆amp;添加了背景颜色。 RP2 RelativePanels让你可以清楚地看到它没有被均匀分割，这是我想要实现的，但如上所述，我不能使用网格，因为我喜欢在较小的设备上显示RP1低于RP1。

感谢。