1

我试图了解 RelativePanel 如何在适用于 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 和RelativePanel2 拆分为50/50，但我的RelativePanel1 水平占据了大部分屏幕，而我的RelativePanel2 垂直拉伸使我的Listview 中的DataTemplate 大得离谱。

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

如果我在 RelativePanel1 上设置一个宽度，我可以或多或少地让它工作，但理想情况下，我希望它是自动的，因为当你使用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 和 RP2 RelativePanels 添加了背景颜色，因此您可以清楚地看到它没有被平均分割，这是我想要实现的，但正如我所提到的，我不能使用网格，因为我会喜欢在较小的设备上显示低于 RP1 的 RP2。

谢谢。

4

0 回答 0