xaml - 弹出按钮位于SecondaryCommands 后面

Question

所以我想做的是，如果用户想切换到另一个视频，则提示用户进行二次确认。所以我添加了一个弹出窗口。然而，飞出按钮出现在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>

这就是发生的事情:

Answer 1

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

我希望您注意到，当您为 SecondaryCommands 中的 AppBarButton 设置 Flyout 属性时，Button 上有一个向右箭头。这是一个非常明确的指示，这意味着二级-二级菜单。

显然，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，或使用新控件 TeachingTip来自 Microsoft.UI.Xaml，它看起来更符合您的期望。

致以诚挚的问候。