3

适用于 Windows 10 应用程序的响应式设计指南讨论了响应式设计技术，特别是关于使用特定尺寸类别的设计断点：

为特定尺寸类别设计断点

Windows 10 生态系统中的设备目标和屏幕尺寸的数量太多，无需担心为每个目标优化 UI。相反，我们建议设计几个关键宽度（也称为“断点”）：320、720 和 1024 epx。

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

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

搜索 Windows 10 和设计断点不会产生我想要的信息，你能指出我正确的方向吗？

4

2 回答 2

7

为特定尺寸类设计断点只是一个概念，是一个建议，让您担心关键尺寸。正如贾斯汀所说，实现这一目标的一种非常简单的方法是使用视觉状态触发器根据最小窗口宽度触发 UI 中的更改。有一个名为AdaptiveTrigger的状态触发器允许您开箱即用地执行此操作。还有其他可用的开源状态触发器，但 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>

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

现在，尽管 AdaptiveTriggers 易于使用，但很容易使您的 XAML 代码在每种视觉状态下都使用一堆 setter 来混乱，并且可能很难维护该代码。看看我为一个虚拟样本写了多少 XAML！此外，您可能希望 Phone 和 Desktop 之间的 UI 存在重大差异，因此您最好的选择最终可能是编写为特定设备系列量身定制的特定 XAML 视图，其中也可能包含 AdaptiveTriggers...

于 2015-08-15T13:58:29.820 回答
0

要添加到上面的响应中，这里是对新自适应触发器的快速介绍。如果您是第一次使用这些，此链接可能会有所帮助，因为此示例完全从头开始。 http://jamesqquick.com/windows-10-adaptive-triggers-intro/

于 2015-08-25T21:27:07.390 回答