为 UWP App 使用 RelativePanel 的有效方法

Posted 2023-04-13

【中文标题】为 UWP App 使用 RelativePanel 的有效方法

【英文标题】：Effective way of using RelativePanel for UWP App

【发布时间】：2016-08-15 20:45:38

【问题描述】：

我正在创建一个 UWP 应用程序，在我的应用程序中，我想要像默认邮件应用程序这样的结构，其中有一个 Listview，其中包含所有邮件的列表，当用户单击该邮件时，它会在其右侧打开。

我阅读了有关 RelativePanel 并尝试在我的应用程序中使用它，它现在运行良好，下面是我正在使用的 xaml：

   <RelativePanel Grid.Row="1">

        <Frame x:Name="listFrame" 
               Width="600"
               Height="500"/>

        <Frame x:Name="contentFrame"
               RelativePanel.RightOf="listFrame"
               Width="600"
               Height="500" />


    </RelativePanel>

对于平板电脑/PC，它运行良好，当我在移动视图中打开它时，它会通过将 contentFrame 放在底部自动适应，但我担心我应该将它用于移动视图吗？因为保留 contentFrame 是没有意义的，因为用户不应该能够在移动视图中查看内容，因为我用户应该单击任何项​​目，而不是只有内容视图可见并且列表视图将折叠，类似于邮件应用程序。

我不确定该走哪条路，我是否需要为 PC 和移动设备创建不同的 UI，或者 SDK 中有一些我可以使用的东西？

我是 UWP 的新手，所以不知道有多少选择。

【参考方案1】：

有很多选项可以处理多设备的多视图。

为每个设备系列创建差异视图（XAML 文件）。当您的 xaml 在设备系列之间发生巨大变化时，请使用此选项。

使用自适应触发器来更改可见性或重排 XAML，将其与 x:DeferLoadStrategy="Lazy" 一起使用以获得更好的性能，因为在您从触发器更改可见性之前不会初始化元素

检查背后代码中的设备系列并做出相应反应

【参考方案2】：

您要查找的内容称为“Master-Detail”。

在 windows-universal-sample git repo 中有一个示例 -> Master/Detail sample

下载示例，运行它并查看代码。我认为这是一个很好的起点。

【讨论】：

非常感谢。这就是我一直在寻找的。​​span>

关于我如何拥有与邮件应用程序一样的 Appbar 的任何帮助，在 PC MasterPage 列表上没有 appbar 而 DetailPage 在顶部有，而在移动设备上都有 appbar 在底部，我应该去自适应触发器并根据设备类型提供可见性？