xaml - 如何在 Windows 10 XAML 中创 build 计断点？

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 所提到的，实现这一点的一种非常简单的方法是使用视觉状态触发器根据最小窗口宽度触发 UI 中的更改。有一个名为 AdaptiveTrigger 的状态触发器这使您可以开箱即用。还有其他available open source state triggers ，但 AdaptiveTrigger 是您需要对 XAML 中的不同宽度或断点使用react的那个。这是一个非常简单的例子:

<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 中的不同目标对象设置不同的值。在我的代码示例中，除了 >= 1024 有效像素时，我将所有宽度的 SplitView Pane 保持关闭。

现在，尽管 AdaptiveTriggers 易于使用，但很容易使您的 XAML 代码在每个视觉状态中都包含一堆 setter，并且可能很难维护这些代码。看看我为虚拟示例编写了多少 XAML!此外，您可能希望手机和桌面之间的用户界面存在重大差异，因此最好的选择最终可能是写 specific XAML Views tailored for specific device families ，里面也可以有 AdaptiveTriggers...