详解Win10 UWP通用应用响应式布局设计

▃黑衣大葛格

转载自微软官方博客  原文地址：http://blogs.windows.com/buildingapps/2015/09/01/make-your-app-look-great-on-any-size-screen-or-window-10-by-10/       （加超链接失败了）

   与 Windows 10 普遍的 Windows 平台，您的应用程序将现在运行在多个设备的家庭和跨不同的屏幕和窗口大小，由平台控件支持自动缩放。在Windows 10 10 发展系列未来三周内，我们将要如何这些设备家庭支持您的应用程序的用户交互，如何您的应用程序可以应付和适应设备使用，并且我们会提供的平台中，您不需要编写复杂的代码。

今天这篇文章深入探讨了反应你可以使用的技术来优化您的用户界面为不同设备的家庭。下周我们将讨论不同类型的自然输入您的应用程序可以支持，和我们去更深层次上，后年，您的应用程序如何能适应特定的设备能力。

                               
登录/注册后可看大图

设备家庭（Device families），你说呢?

我们进入控件、 Api 和代码之前，我想花一点时间来解释我们正在谈论的家庭设备。完整的说明，请查阅MSDN 上普遍 Windows 平台 (UWP) 应用程序的指南，但简单地说: 设备系列是一组设备的具体形式的因素，如上所示。设计您的应用程序时，时，重要的是考虑它可能用于设备家庭。

当我们把 Windows 10 对新类型的设备，它是一个好主意，重新审视您的应用程序，想想它可以启用的新经验。虽然我们没有覆盖所有可能的设备家庭在这里，您可以确定您的应用程序在附加的设备家庭上使用时应如何作出反应时延长这些想法和概念。

Welcome back, windows

如何在 Windows 中，使用应用程序的最大变化之一就是你已经非常熟悉的东西: 在一个窗口中运行应用程序。虽然 Windows 8 和 Windows 8.1 允许您运行的应用程序全屏或达 4 应用程序肩并肩，Windows 10 允许用户安排、 调整大小和位置的应用程序在任何他们想要的方式。这使用户能够灵活地使用您的应用程序的方式，他们想要的但也可能需要您停止支持他们在这样做了一些工作。对 Windows 10 XAML 中的改进介绍如何执行反应技术在您的应用程序，所以它看起来不错的屏幕或窗口的大小无论数目。三下面讨论。

1.VisualStateManager

VisualStateManager 类在 Windows 10 有所增加，两种机制在基于 XAML 的应用程序中实现快速响应的设计。新的VisualState.StateTriggers和VisualState.Setters Api 允许您定义可视状态，对应于一定的条件。使用内置的AdaptiveTrigger作为 VisualState 的 StateTrigger 与 MinWindowHeight 和/或 MinWindowWidth 属性，可视状态可以更改基于应用程序窗口高度/宽度。您还可以扩展Windows.UI.Xaml.StateTriggerBase来创建您自己的触发器，实例触发设备家庭或输入的类型。看看下面的示例:

<Page>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
                <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup>
                                <VisualState>
                                        <VisualState.StateTriggers>
                                                <!-- VisualState to be triggered when window
                                                width is >=720 effective pixels. -->
                                                <AdaptiveTrigger MinWindowWidth="720" />
                                        </VisualState.StateTriggers>
                                        
                                        <VisualState.Setters>
                                                <Setter Target="myPanel.Orientation"
                                                Value="Horizontal" />
                                        </VisualState.Setters>
                                </VisualState>
                        </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <StackPanel x:Name="myPanel" Orientation="Vertical">
                        <TextBlock Text="This is a block of text. It is text block 1. "
                        Style="{ThemeResource BodyTextBlockStyle}"/>
                        <TextBlock Text="This is a block of text. It is text block 2. "
                        Style="{ThemeResource BodyTextBlockStyle}"/>
                        <TextBlock Text="This is a block of text. It is text block 3. "
                        Style="{ThemeResource BodyTextBlockStyle}"/>
                </StackPanel>
        </Grid>
</Page>

在此示例中，页面显示三个 TextBlock 元素相互堆叠在其默认状态。由于 VisualStateManager，有定义在 720 MinWindowWidth AdaptiveTrigger，StackPanel 方向将更改为水平窗口时至少 720 有效像素宽。这使您可以轻松地使用的额外水平的屏幕房地产你得到，当用户调整窗口的大小或从纵向改为横向在手机/平板电脑设备上，例如去。请记住，定义宽度和高度属性只会你触发器，如果应用程序同时满足两个条件。感到自由探索状态在 GitHub 上的触发器示例以查看更多的场景使用触发器，包括自定义触发器的数目。

2.RelativePanel

在上面的示例中，StateTrigger 用于更改 StackPanel 方向属性。虽然在 XAML 中许多的容器元素使您可以使用 StateTriggers 来操作您的用户界面中大量的方式，他们不提供一种方法很容易地创建复杂响应 UI 元素布置在相对于彼此。这正是新RelativePanel的进来。您可以使用 RelativePanel 来布置你的元素表示元素之间的空间关系。下面是一个示例:

<RelativePanel BorderBrush="Gray" BorderThickness="10">
    <Rectangle x:Name="RedRect" Fill="Red" MinHeight="100" MinWidth="100"/>
    <Rectangle x:Name="BlueRect" Fill="Blue" MinHeight="100" MinWidth="100"
               RelativePanel.RightOf="RedRect" />
    <!-- Width is not set on the green and yellow rectangles.
         It's determined by the RelativePanel properties. -->
    <Rectangle x:Name="GreenRect" Fill="Green"
               MinHeight="100" Margin="0,5,0,0"
               RelativePanel.Below="RedRect"
               RelativePanel.AlignLeftWith="RedRect"
               RelativePanel.AlignRightWith="BlueRect"/>
    <Rectangle Fill="Yellow" MinHeight="100"
               RelativePanel.Below="GreenRect"
               RelativePanel.AlignLeftWith="BlueRect"
               RelativePanel.AlignRightWithPanel="True"/>
</RelativePanel>

上面的 XAML 将呈现如下:

                               
登录/注册后可看大图

正如你所看到的蓝色，绿色和黄色呈现与其他矩形通过使用附加的 RelativePanel 属性。这意味着你很容易可以使用 RelativePanel 和 AdaptiveTriggers 来创建响应用户界面在哪里你移动元素基于可用的屏幕空间。请记住，您使用附加属性的语法涉及额外的括号:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState>
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="720" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="GreenRect.(RelativePanel.RightOf)"
                        Value="BlueRect" />
            </VisualState.Setters>
        </VisualState>
...

其他情况下，使用 RelativePanel 可以探索在GitHub 上的响应技术示例.

3.SplitView

除了您的应用程序页的内容，其导航元素可能需要对应用程序的窗口大小的变化作出反应。介绍了在 Windows 10 新SplitView控制通常用于创建顶级导航体验，可以调整，以根据应用程序的窗口大小的行为不同。请记住，这是 SplitView，但常见的使用案例之一不严格限于这种使用。SplitView 分为两个不同的区域: 窗格和内容。

                               
登录/注册后可看大图

控件上的属性的数目可以用于操纵其呈现:

DisplayMode (覆盖，内联，CompactOverlay，CompactInlinespecifies 窗格中有关内容区域的呈现方式。下面的示例说明了每个 DisplayMode 是如何影响应用程序中的呈现:

                               
登录/注册后可看大图

PanePlacement属性在左侧 (默认) 或内容区域的右侧显示窗格。OpenPaneLength属性指定窗格的宽度，当它已完全展开 (默认 320 有效像素为单位)。

SplitView 控制不包括内置的用户界面元素，用户可以切换窗格，就像你经常发现在应用程序中常见的"汉堡包"菜单一样的状态。你必须在您的应用程序中定义此用户界面元素，并提供代码来切换 SplitView 得到所需的行为的IsPaneOpen属性。

请务必查阅 SplitView 提供XAML 导航菜单示例在 GitHub 上的探讨套完整的功能。

Press back to go… back

如果您以前开发的 Windows Phone，你已经变得习惯于每个设备有硬件或软件后退按钮可供用户浏览他们的方式回通过应用程序构建的应用程序为 Windows 8 和 8.1，然而，有你创建你自己的背导航 UI。为了让事情更容易针对 Windows 10 应用程序中的多个设备家庭的时候，我们提供了确保一致的背导航机制，为所有用户的方法。这使您可以清理一些你可能以前致力于在您的应用程序的用户界面空间。

使用SystemNavigationManager的AppViewBackButtonVisibility属性，您可以选择在对设备的家庭，没有硬件或软件的后退按钮，例如，计算机上显示系统后退按钮。若要显示后退按钮，只需 SystemNavigationManager 获取当前视图，并设置后退按钮可见性:

SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = 

                               
登录/注册后可看大图

SystemNavigationManager 也暴露出一个BackRequested事件，触发当用户调用系统提供的按钮、 手势或后退导航的声音命令。这意味着你可以处理这一事件来始终如一地处理您的应用程序中的后退导航跨所有设备家庭。

Is it a tablet? Is it a PC?
最后，但并非最不重要，打算谈谈我个人的最爱之一:连续上 Windows 10。与连续体，Windows 10 调整你你想要做什么和如何你想要做它的经验。如果您的用户有 2 中 1 Windows Pc 之一，在您的应用程序中实现连续授权他们使用触摸或鼠标和键盘来优化工作效率。使用UIViewSettings' UserInteractionMode属性，您可以确定是否在用户交互与使用触摸或鼠标和键盘的视图:

UIViewSettings.GetForCurrentView().UserInteractionMode;
// returns UserInteractionMode.Mouse or UserInteractionMode.Touch

经过检测，互动的模式，你可以做各种事物以优化的用户界面，您的应用程序，比如增加/减小页边距，显示/隐藏复杂的功能，等等。查阅这篇好的文章，在由李麦克弗森 TechNet 上表明新的 StateTriggers 和 UserInteractionMode 来构建您自己的自定义连续 StateTrigger 你可以结合起来。

这一周: 使您的应用程序响应用户跨设备家庭

我们希望这次检讨的 Windows 10 提供给你一些启发，想想如何您的应用程序可以使用这些新的功能，给喜悦用户他们使用与您的应用程序进行的任何设备上的敏感技术。这里有一些你可以做，使您的应用程序能满足的最后提示:

• 在您的应用程序提供一致的背导航行为跨设备的家庭中实现的 AppViewBackButtonVisibility 属性和 BackRequested 事件
• 思考如何 StateTriggers 可以帮助你回应用户调整您的应用程序窗口的大小，并优化其应用程序体验
• 使用新的 SplitView 和 RelativePanel 控件来提供一致的用户体验
  

在那之后，参观"自适应和响应 UI"DVLUP 挑战来获得奖励点与 XP 为你们的辛勤工作。要签出多个 Windows 10 由 10 发展系列，头部到初始的博客文章包含内容的完整时间表.

一如往常，在这里都一些额外的资源可用于了解更多关于响应 Windows 10 应用构建主题，让我们知道如何计划使用此新功能通过@WindowsDev和 #Win10x10。

• Build 2015: From the Small Screen to the Big Screen: Building Universal Windows App Experiences with XAML
• Developer’s Guide to Windows 10: Adaptive UI
  Updated September 1, 2015 8:51 am
  

▃黑衣大葛格

我发表这个是想看下我们论坛有多少人对UWP应用程序感兴趣

运行很缓慢……

▃黑衣大葛格 发表于 2015-9-5 21:43
我发表这个是想看下我们论坛有多少人对UWP应用程序感兴趣

一直在路上，最近在学

xietao1233

断断续续的写点UWP, 不过用的是C++/CX