如何在Windows 10 XAML中创建设计断点？
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和设计断点不会产生我想要的信息，你能给我指出正确的方向吗？
回答 2
Stack Overflow用户
发布于 2015-08-15 13:58:29
为特定大小类设计断点只是一个概念，是一个建议，可以为您提供需要担心的关键大小。正如Justin提到的，实现这一目标的一个非常简单的方法是使用可视状态触发器根据最小窗口宽度触发UI中的更改。有一个名为AdaptiveTrigger的状态触发器，它允许您开箱即用。还有其他的available open source state triggers，但是在XAML中，需要对不同的宽度或断点作出反应的AdaptiveTrigger。下面是一个非常简单的例子：
<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很容易使用，但在每个可视状态下，很容易将XAML代码与一群设置器混在一起，而且可能很难维护这些代码。看看我为一个虚拟样本写了多少XAML！另外，你可能希望手机和桌面的用户界面有很大的不同，所以你最好的选择是写specific XAML Views tailored for specific device families，这里面也有AdaptiveTriggers .
Stack Overflow用户
发布于 2015-08-25 21:27:07
为了添加到上面的响应，下面是一个新Adaptive触发器的快速介绍。如果您第一次使用这些链接，这个链接可能会有所帮助，因为这个示例完全是从零开始的。http://jamesqquick.com/windows-10-adaptive-triggers-intro/
https://stackoverflow.com/questions/32023718
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号