如何在W10的不同屏幕上正确适配应用UI
How to properly adapt the app UI on different screens on W10
我即将开始将我的 WP8.1 应用程序移植到 W10，看来我必须将它变成通用 Windows 应用程序。现在，我对后端代码很好，因为我将能够重用 90% 的 类（模型、ViewModel 和我的大部分助手 类、扩展方法和转换器）。
问题在于 UI：我知道我必须针对不同的屏幕和宽高比设计应用程序，但我不知道如何在代码中实际实现它。
我的意思是，至于 UI 缩放，我知道我可以使用 VisualStateManager 和 AdaptiveTriggers 手动设置我想要适应任何屏幕分辨率的 UI 元素的属性，或者我可以使用一些转换器，没关系。
我的意思是：让整个 UI 适应不同分辨率的最佳方法是什么？
这是一个例子：
如您所见：在不同的屏幕上，整个导航模式会随着 UI 发生变化。在手机上，我们有覆盖整个 UI 的联系页面，而在平板电脑和 PC 上，我们有只是 UI 的一小部分的联系页面，并且枢轴页面被移动到另一个面板上正确的。此外，许多 UI 元素已完全重新排列。
当然，一些视图级别的后端代码也会发生变化。
现在，我想知道完成这整件事的最佳方法是什么。
我应该：
• 有一个 XAML 文件（每个页面），其中包含大量 VisualStates 和内容，并尝试为每种屏幕分辨率重新排列 UI
• 拥有共享项目的不同项目（如 W8.1 通用应用程序），以便我可以专注于每个特定设备上的 UI？这是我更喜欢的方法，因为我能够毫无问题地设计特定于平台的 UI 元素。尽管如此，我还是不明白如何在 VS2015 中为每种设备类型实际创建共享项目和不同项目。
• 对共享相同代码隐藏文件的不同 XAML 页面使用该方法（即使我不确定如何实现这一点，以及如何实现特定于平台的代码隐藏部分）。
• 一些其他方法
我的意思是，我确定我不是唯一遇到麻烦的 W8.1/WP8.1 开发人员，有什么建议我可以使用吗？我已经看过所有关于 W10 开发的 MVA 视频，但他们没有在那里深入实施细节。
感谢您的帮助
塞尔吉奥
这真的取决于你的项目。如果 UI 变化不大，我肯定会使用 AdaptiveTriggers。您可以用很少的 XAML 做很多事情。如果您还没有查看 Microsoft 的示例代码：https://github.com/Microsoft/Windows-universal-samples/tree/master/xaml_responsivetechniques
如果变化很大，您 可以 使用 AdaptiveTriggers 来完成，但拥有多个 XAML 文件可能更容易。在 Win10 中执行此操作的一种新方法是使用 DeviceFamily。本质上，只需创建一个名为 "DeviceFamily-Mobile" 的文件夹，然后在其中粘贴一个具有相同文件名的 XAML 视图。更多信息：http://sharpgis.net/post/2015/04/01/Creating-DeviceFamily-specific-layouts-in-a-Universal-App
如果您查看使用 SplitView Control and the RelativePanel Control.
，那两个屏幕截图不一定有什么不同
有关详细信息，请参阅 this //build talk。
我即将开始将我的 WP8.1 应用程序移植到 W10，看来我必须将它变成通用 Windows 应用程序。现在，我对后端代码很好，因为我将能够重用 90% 的 类（模型、ViewModel 和我的大部分助手 类、扩展方法和转换器）。
问题在于 UI：我知道我必须针对不同的屏幕和宽高比设计应用程序，但我不知道如何在代码中实际实现它。 我的意思是，至于 UI 缩放，我知道我可以使用 VisualStateManager 和 AdaptiveTriggers 手动设置我想要适应任何屏幕分辨率的 UI 元素的属性，或者我可以使用一些转换器，没关系。
我的意思是：让整个 UI 适应不同分辨率的最佳方法是什么？
这是一个例子：
如您所见：在不同的屏幕上，整个导航模式会随着 UI 发生变化。在手机上，我们有覆盖整个 UI 的联系页面，而在平板电脑和 PC 上，我们有只是 UI 的一小部分的联系页面，并且枢轴页面被移动到另一个面板上正确的。此外，许多 UI 元素已完全重新排列。 当然，一些视图级别的后端代码也会发生变化。
现在，我想知道完成这整件事的最佳方法是什么。
我应该：
• 有一个 XAML 文件（每个页面），其中包含大量 VisualStates 和内容，并尝试为每种屏幕分辨率重新排列 UI
• 拥有共享项目的不同项目（如 W8.1 通用应用程序），以便我可以专注于每个特定设备上的 UI？这是我更喜欢的方法，因为我能够毫无问题地设计特定于平台的 UI 元素。尽管如此，我还是不明白如何在 VS2015 中为每种设备类型实际创建共享项目和不同项目。
• 对共享相同代码隐藏文件的不同 XAML 页面使用该方法（即使我不确定如何实现这一点，以及如何实现特定于平台的代码隐藏部分）。
• 一些其他方法
我的意思是，我确定我不是唯一遇到麻烦的 W8.1/WP8.1 开发人员，有什么建议我可以使用吗？我已经看过所有关于 W10 开发的 MVA 视频，但他们没有在那里深入实施细节。
感谢您的帮助
塞尔吉奥
这真的取决于你的项目。如果 UI 变化不大，我肯定会使用 AdaptiveTriggers。您可以用很少的 XAML 做很多事情。如果您还没有查看 Microsoft 的示例代码：https://github.com/Microsoft/Windows-universal-samples/tree/master/xaml_responsivetechniques
如果变化很大，您 可以 使用 AdaptiveTriggers 来完成，但拥有多个 XAML 文件可能更容易。在 Win10 中执行此操作的一种新方法是使用 DeviceFamily。本质上，只需创建一个名为 "DeviceFamily-Mobile" 的文件夹，然后在其中粘贴一个具有相同文件名的 XAML 视图。更多信息：http://sharpgis.net/post/2015/04/01/Creating-DeviceFamily-specific-layouts-in-a-Universal-App
如果您查看使用 SplitView Control and the RelativePanel Control.
有关详细信息，请参阅 this //build talk。