Question

我的应用在标签页中打开文档，在每个标签页的顶部，类似于网络浏览器，我在Buttons中有一行StackPanel，用于影响文档的功能。由于这些Buttons处理并属于每个文档，因此它们是通过绑定和文档动态生成的。

我想让我的应用程序更具响应性，以便当窗口大小低于某个宽度时，为了节省空间，这些按钮会移动到Flyout并根据需要进行重新设置。

Edge浏览器通过Hub，Web Note和Share按钮执行类似的操作。

我该怎么做？是否可以使用AdaptiveTriggers？或者这可以通过后面的代码完成吗？

Answer 1

如果您想使用后面的代码执行此操作，则可以处理

page_SizeChanged

然后用

检查绑定

if ((Window.Current.Bounds.Width < YOUR_WIDTH) || (Window.Current.Bounds.Height< YOUR_HEIGHT))
  {
    // change Visibility or Move items
  }

Answer 2

如果你在小屏幕上寻找的行为是一个非画布菜单，那么这是你可以做到这一点的一种方式。

有很多非画布外的扩展，一个适合你的扩展mmenu

使用此功能来了解如何配置它。它将提供您正在寻找的滑动行为。

Mmenu将始终折叠菜单，因此最后一步是修改其行为，使其仅在窄视口上折叠，一种方法是切换包装菜单的类名。例如，如果您的菜单是

<nav class="my-menu">
....
</nav>

然后在jQuery文档就绪语句中，您可以执行类似以下的操作

$( window ).resize(function() {
 if ($(window).width() >= 900){
    $('.my-menu').addClass('my-menu-off').removeClass('my-menu');
 } else {
    $('.my-menu-off').addClass('my-menu').removeClass('my-menu-off');
}

}).trigger('resize');

当视口为900px或更宽时，这将删除.my-menu类，因此您的菜单不会崩溃。如果屏幕是＆lt; 900px mmenu将发挥其魔力。

我认为方法很好，因为它很容易适应您现有的HTML。如果jQuery尚未包含在您的项目中，您只需添加jQuery，以及mmenu js和css文件。

祝你好运！

UWP / WinRT：当窗口调整到新位置时如何移动按钮？

2 个答案: