C# 如何在通用windows应用程序中设计响应性UI

我刚刚开始开发通用应用程序。我在Windows 8商店应用程序中开发了应用程序，还开发了Windows Phone 8和Windows Phone 8.1（SilverLight）应用程序。这个问题和Windows中的通用应用程序以及在应用程序中创建的单一UI有关。共享文件夹

1对于web来说，有一个类似的响应式UI。要创建，需要编写媒体查询css。

---

我知道css和我们可以用为xaml创建资源是一样的。我可以从c#中获得分辨率，我可以为不同的分辨率创建不同的UI，我可以根据分辨率进行可视化折叠，但是是否有任何一种方法可以根据设计自动调整。？（此问题与数据绑定控件有关，特别是…

对于Windows应用商店，您可以使用“可视状态”。您可以设置确定要使用哪种视觉状态的规则，例如，当宽度为320时，切换到捕捉模式并修改布局以适应

在查找相关信息时要小心，因为Windows 8和8.1之间的范例发生了很大变化

杰瑞·尼克松（Jerry Nixon）有一本关于视觉状态的优秀教程：

我博客中的这篇文章介绍了一个仅使用代码隐藏的简单场景（VB，但应该很容易更改为C#）-在布局复杂时不建议这样做：

在Windows开发中心的某个地方有一个示例：

对于手机版本，您可能不必担心视觉状态，因为手机应用程序总是全屏显示，将屏幕锁定为纵向或横向是更好的用户体验

---

您的手机/商店应用程序可以共享控件，但它们有自己的页面。我通常会创建任何数据绑定控件的全尺寸和更小版本，并在手机上以及商店版本处于较小状态时（例如，屏幕的1/2）使用更小的尺寸。

有几种技术可以根据窗口的大小、形状和分辨率调整页面的设计。它们通常一起使用

第一种是使用动态布局控件，而不是硬编码位置。例如，使用带有*列的网格控件按百分比分割屏幕，或使用StackPanel堆叠控件以使其适合。GridView可以缩放以填充屏幕（甚至更大）。这将允许应用程序使用可用空间

MSDN在文章中讨论了这项技术

对于更大范围的更改，应用程序应进行更大的更改以适应更大的更改，例如纵向与横向与快照模式，您可以使用视觉状态。视觉状态允许应用程序设置特定状态（例如“横向”），该状态会自动更改页面控件的属性。对于动态布局，视觉状态通常会隐藏和显示不同的控件，例如从横向模式下的水平方向的GridView切换到纵向模式下的垂直方向的ListView。通过将两个控件绑定到同一数据，代码不需要知道在任何特定时间使用哪些控件的任何细节

MSDN在文章中讨论了这项技术

Blend有一个非常好的视觉状态编辑器，您可以使用它以视觉方式定义和设置不同的视觉状态

同样的技术和代码也适用于Windows应用商店应用程序和Windows Phone应用商店应用程序，但具体的布局可能会有所不同，以适应不同的设备尺寸。Windows应用商店应用程序的显示尺寸范围很广，用户可以自由调整Windows应用商店应用程序的大小，因此Windows应用商店应用程序需要支持比Windows Phone应用商店应用程序更灵活的布局。Windows Phone应用商店应用程序需要考虑显示分辨率，但运行时的纵横比相当一致，仅纵向或横向变化

---

对于非常简单的应用程序，您可以在通用应用程序的共享项目中共享单个Xaml页面，但在大多数情况下，您最好为Windows应用商店和Windows Phone应用程序单独设计页面。除了屏幕大小的差异外，还有一些控制差异需要单独的Xaml。Xaml不支持条件编译，因此共享的Xaml文件在这两个方面都需要完全相同。

将显示锁定为纵向或横向是惰性的，不建议这样做。编写代码比较容易，但一般来说并不是更好的用户体验。我不同意。大多数手机应用程序坚持使用肖像有一个很好的理由——这是用户所期望的。除非支持景观有好处，否则将应用程序复杂化是没有意义的。甚至许多第一方应用程序也被锁定为肖像（Cortana、Music等）。这取决于应用程序，但大多数手机应用程序不会从过度复杂中获益。