如何在 Windows 10 XAML 中创建设计断点？

Question

Windows 10 个应用程序的响应式设计指南讨论了响应式设计技术，特别是针对特定大小使用设计断点类：

Design breakpoints for specific size classes

The number of device targets and screen sizes across the Windows 10 ecosystem is too great to worry about optimizing your UI for each one. Instead, we recommended designing for a few key widths (also called "breakpoints"): 320, 720, and 1024 epx.

参见：https://msdn.microsoft.com/en-us/library/windows/apps/dn958435.aspx#sizeclasses

文章描述了响应式设计和设计断点的一般概念。我已经从 HTML 和 CSS 媒体查询中熟悉了这些概念。但是我不知道如何在 XAML?

搜索 Windows 10 和设计断点没有得到我想要的信息，你能指出正确的方向吗？

Answer 1

为特定大小设计断点类只是一个概念，一个建议，给你担心的关键大小。正如 Justin 提到的那样，一种非常简单的实现方法是使用视觉状态触发器根据最小 window 宽度触发 UI 中的更改。有一个名为 AdaptiveTrigger that allows you to do that out of the box. There are other available open source state triggers 的状态触发器，但 AdaptiveTrigger 是您需要对 XAML 中的不同宽度或断点作出反应的触发器。这是一个非常简单的例子：

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="AdaptiveSizesVisualStateGroup">
        <VisualState x:Name="Large">
            <!-- VisualState to be triggered when window width is >=1024 effective pixels -->
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="1024" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="MySplitView.IsPaneOpen" Value="True" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="Medium">
            <!-- VisualState to be triggered when window width is >=720 and < 1024 effective pixels -->
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="720" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="MySplitView.IsPaneOpen" Value="False" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="Small">
            <!-- VisualState to be triggered when window width is >=320 and < 720 effective pixels -->
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="320" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="MySplitView.IsPaneOpen" Value="False" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="Minimum">
            <!-- VisualState to be triggered when window width is >=0 and < 320 effective pixels -->
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="MySplitView.IsPaneOpen" Value="False" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

您可以看到我针对不同的 window 宽度使用了不同的视觉状态。 AdaptiveTrigger 是负责实际注意到 window 大小已更改并触发视觉状态组内的特定视觉状态的对象。一旦视觉状态处于活动状态，setter 用于为 XAML 中的不同目标对象设置不同的值。在我的代码示例中，除了 >= 1024 有效像素时，我将关闭所有宽度的 SplitView 窗格。

现在，即使 AdaptiveTriggers 易于使用，也很容易使您的 XAML 代码与每个视觉状态中的一堆 setter 混淆，并且可能很难维护该代码。看看我为虚拟样本写了多少XAML！此外，您可能希望 Phone 和桌面之间的 UI 存在重大差异，因此您最好的选择最终可能是编写 specific XAML Views tailored for specific device families，其中也可能包含 AdaptiveTriggers ...

Answer 2

为了补充上面的回复，这里是对新的自适应触发器的快速介绍。如果您是第一次使用这些，这个 link 可能会有所帮助，因为这个示例完全是从头开始的。 http://jamesqquick.com/windows-10-adaptive-triggers-intro/

如何在 Windows 10 XAML 中创建设计断点？

How do I create a design breakpoint in Windows 10 XAML?

xaml

responsive-design

win-universal-app

windows-10

windows-10-mobile