UWP自适应触发器使用

Question

我目前正在开发一个新的UWP应用程序。

我对屏幕设计技术有疑问。 触发器和移动/电脑屏幕的最佳选择是什么？

选项1：

正如许多tuto所见，使用触发器来设置很多属性。我们将获得如下代码：

<VisualState.Setters>
    <Setter Target="IngredientsPanel.(Grid.Row)" Value="0" />
    <Setter Target="IngredientsPanel.(Grid.Column)" Value="1" />
    <Setter Target="DirectionsPanel.(Grid.Row)" Value="0" />
    <Setter Target="DirectionsPanel.(Grid.Column)" Value="2" />
    <Setter Target="ImagePanel.(Grid.ColumnSpan)" Value="1" />
    <Setter Target="IngredientsPanel.(Grid.ColumnSpan)" Value="1" />
    <Setter Target="DirectionsPanel.(Grid.ColumnSpan)" Value="1" />
</VisualState.Setters>

这个选项为你提供了很多Setter元素，可以很难调试并正确放置。

选项2：

使用setter为每种分辨率类型显示和隐藏特定的Grid。 最初的想法来自MVA (link)，似乎与MVVM完美配合。 它会给你以下代码：

<VisualState.Setters>
   <Setter Target="MyFirstColumnGrid.Visibility" Value="Collapsed"></Setter>
</VisualState.Setters>

什么是最佳选择？它们是否具有大量UI元素的可行性？你能举例说明你的解释吗？

Answer 1

从我的角度来看，当你没有对视图进行太多更改时，状态管理器很有用，因为正如你所提到的，当更改许多属性时，它可能变得一团糟。

如果您的观点会在设备之间发生变化，我建议您将device family name与XAML view模板项一起使用：

XAML视图只不过是XAML视图（duh！），默认情况下没有与之关联的代码，这通常用于控件和/或不同的设备。

那么你如何使用它？

您创建一个Blank Page，添加您需要的所有代码（或将数据上下文设置为指向您的视图模型），然后创建一个具有相同名称的XAML View加上设备姓氏。

例如：

如您所见，有MainPage和MainPage.DeviceFamily-Mobile.xaml，请检查移动版本，后面没有代码（名称左侧的展开图标丢失）。< / p>

这意味着当您的应用程序加载到移动设备中时，它将使用仅XAML视图（后面的代码将加载标准MainPage中的一个）。在任何其他情况下，将使用标准MainPage。

该概念与本地化资源文件基本相同，甚至与部分类相似，仅与XAML视图一致，并且基于设备系列名称。

您可以在this link找到更多信息。