Flyout 落后于 SecondaryCommands答案

【问题标题】：Flyout is behind SecondaryCommandsFlyout 落后于 SecondaryCommands
【发布时间】：2019-11-20 22:37:49
【问题描述】：

所以我想做的是提示用户二次确认是否要更改为另一个视频。所以我添加了一个弹出窗口。然而，飞出出现在 SecondaryCommands AppBarButton 后面。有没有办法放在前面？

这是我的代码：

<CommandBar.SecondaryCommands>
            <AppBarButton Name="AddImage" Label="Add Image" Click="AddImage_Click" />
            <AppBarButton Name="AddVideo" Label="Add Video" Click="AddVideo_Click"/>
            <AppBarButton Name="Browse" Label="Browse Videos" >
                <Button.Flyout>
                    <Flyout>
                        <StackPanel>
                            <TextBlock Text="You want to change to another video?"/>
                            <Button Content="Browse video" Click="Browse_Click"/>
                        </StackPanel>
                    </Flyout>
                </Button.Flyout>
            </AppBarButton>
        </CommandBar.SecondaryCommands>
        <CommandBar.Content>
            <TextBlock Name="Status" Text="Video: HoloLens.mp4" Margin="15"/>
        </CommandBar.Content>
    </CommandBar>
</Page.BottomAppBar>

这就是发生的事情：

【问题讨论】：

第二个命令将显示为 Flyout，您不应显示两个 Flyout。而且我认为您可以将弹出窗口更改为内容对话框。
@lindexi 非常抱歉，但我似乎不明白你在说什么。有没有办法改变弹出的z位置？放在“添加图片”、“添加视频”和“浏览视频”的前面
UWP 不能让你这样做。我希望您将弹出窗口替换为内容对话框
浮出控件不是uielement，canvas.zindex只能改变uielement
你可以设置边距以使弹出按钮显示在按钮附近

标签： xaml uwp uwp-xaml

【解决方案1】：

对于元素显示，可以做到。但不使用Flyout。

希望您注意到，当您在SecondaryCommands 中为AppBarButton 设置Flyout 属性时，按钮上有一个右箭头。这是一个非常明确的指示，表示secondary-secondary 菜单。

显然，UWP 想要获得一个MenuFlyout 或其他可以显示多级目录的弹出层，而不是包含面板的布局。

如果你使用MenuFlyout，你会发现它出现在顶部。

但是，如果您坚持自己的设计，就有办法做到这一点。当您的应用程序的最低版本为 1809 及更高版本时，您可以使用 CommandBarFlyout 通过其 AppBarElementContainer 属性来实现您的目的。

<AppBarButton Name="Browse" Label="Browse Videos">
    <AppBarButton.Flyout>
        <CommandBarFlyout Placement="Top">
            <CommandBarFlyout.SecondaryCommands>
                <AppBarElementContainer>
                    <StackPanel Padding="15">
                        <TextBlock Text="You want to change to another video?"/>
                        <Button Content="Browse video"/>
                    </StackPanel>
                </AppBarElementContainer>
            </CommandBarFlyout.SecondaryCommands>
        </CommandBarFlyout>
    </AppBarButton.Flyout>
</AppBarButton>

在这里显示（按住不点击）：

但正如@lindexi 所说，这违反了 UWP 设计。虽然预计会具有视觉响应性，但不建议这样做。

我还建议使用ContentDialog，或使用来自Microsoft.UI.Xaml 的新控件TeachingTip，这看起来更符合您的期望。

最好的问候。

【讨论】：

非常感谢！这帮助很大。但是作为一个新的程序员，请问为什么这是“违反设计”？
例如，当你看到一个按钮时，按钮上有一个√ 图标。通常我们都认为这是确认的意思。但是开发者使用这个按钮进行粘贴操作。这对用户的理解造成了障碍。这里也是如此。 SecondaryCommands 相当于一级MenuFlyout。当用户注意到一个MenuItem有一个箭头时，通常表示它有一个折叠菜单，但实际上我们显示的是一个弹出框，这也违反了用户习惯。