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

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的状态触发器,允许您开箱即用.还有其他可用的开源状态触发器,但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窗格关闭所有宽度,除非> = 1024有效像素.

现在,即使AdaptiveTriggers易于使用,在每个可视状态中使用一堆setter很容易使你的XAML代码混乱,并且可能很难维护该代码.看看我为虚拟样本写了多少XAML!此外,您可能希望手机和桌面之间的用户界面存在重大差异,因此您最好的选择可能最终是为特定设备系列编写特定的XAML视图,其中也可能包含AdaptiveTriggers ...