UWP 自适应触发器使用

Question

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

我有一个关于屏幕设计技术的问题。触发器和 mobile/computer 屏幕的最佳选择是什么？

选项 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 显示和隐藏每种分辨率类型的特定网格。最初的想法来自 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！），默认情况下没有与之关联的代码，这通常用于控件 and/or 不同设备。

那么如何使用呢？

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

例如：

可以看到，有一个MainPage和一个MainPage.DeviceFamily-Mobile.xaml，查看手机版，后面没有代码（名字左边的展开图标不见了） .

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

这个概念与本地化资源文件基本相同，甚至类似于部分类，只是 XAML 视图和基于设备系列名称。

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

UWP 自适应触发器使用

UWP adaptive triggers usage

c#

win-universal-app

windows-10-universal