Question

适用于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并设计断点不会产生我想要的信息，你能指出我正确的方向吗？

Answer 1

特定大小类的设计断点只是一个概念，建议您为密钥大小提供担忧。正如Justin所提到的，实现这一目标的一个非常简单的方法是使用可视状态触发器根据最小窗口宽度触发UI中的更改。有一个名为AdaptiveTrigger的状态触发器允许您开箱即用。还有其他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>

你可以看到我对不同的窗口宽度使用了不同的视觉状态。 AdaptiveTrigger是一个实际注意到窗口大小已经改变并在可视状态组内触发特定视觉状态的对象。一旦可视状态处于活动状态，setter就会用于为XAML中的不同目标对象设置不同的值。在我的代码示例中，我保持SplitView窗格关闭所有宽度，除非＆gt; = 1024有效像素。

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

Answer 2

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

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

2 个答案: