在应用栏后面弹出 [英] Flyout behind Appbar

问题描述

当您希望您的应用扩展到全屏(包括状态栏和应用栏)时，您必须执行以下操作:

When you want your app to expand to the full screen (including status bar and appbar), you have to do :

var applicationView = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView();
applicationView.SetDesiredBoundsMode(Windows.UI.ViewManagement.ApplicationViewBoundsMode.UseCoreWindow);

然后，如果您想在应用程序栏中或应用程序中的任何位置弹出按钮，它们将显示在应用程序栏的后面:

Then if you want to have a flyout in your appbar or anywhere in your app, they will be displayed behind the appbar :

    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Icon="Preview" Label="Preview">
                <AppBarButton.Flyout>
                    <MenuFlyout>
                        <MenuFlyoutItem Text="Fit width" />
                        <MenuFlyoutItem Text="Fit height" />
                        <MenuFlyoutItem Text="Fit page" />
                    </MenuFlyout>
                </AppBarButton.Flyout>
            </AppBarButton>
        </CommandBar>
    </Page.BottomAppBar>

结果:

在Listview中的项目上具有弹出按钮的相同内容.它们将显示在应用栏的后面:

Same thing with flyouts on an item in a listview. They will be displayed behind the appbar :

如何在应用栏顶部显示弹出窗口?

How can i display the flyouts on top of the appbar ?

推荐答案

我似乎无法解决我的问题(或可以帮助您的人).所以我这样做了，如果它可以帮助某人:

I can't seem to solve my issue (or someone who can help). So i did it that way, if it can help someone :

<Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Icon="Preview" Label="Preview">
                <AppBarButton.Flyout>
                    <MenuFlyout Opened="MenuFlyout_Opened" Closed="MenuFlyout_Closed">
                        <MenuFlyoutItem Text="Fit width" />
                        <MenuFlyoutItem Text="Fit height" />
                        <MenuFlyoutItem Text="Fit page" />
                    </MenuFlyout>
                </AppBarButton.Flyout>
            </AppBarButton>
        </CommandBar>
    </Page.BottomAppBar>

private void MenuFlyout_Opened(object sender, object e)
{
  BottomAppBar.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
}

private void MenuFlyout_Closed(object sender, object e)
{
  BottomAppBar.Visibility = Windows.UI.Xaml.Visibility.Visible;
}

现在，由于没有更多的应用栏，我的弹出窗口将完全显示.对于mvvm列表视图项，我是在行为操作中完成的:

Now my flyout appears fully, since there is no more appbar. For mvvm list view items, i did it in a behavior action :

<DataTemplate x:Key="MvvmItemTemplate">
        <Grid>

            <i:Interaction.Behaviors>
                <icore:EventTriggerBehavior EventName="Holding">
                    <local:OpenFlyoutAction />
                </icore:EventTriggerBehavior>
            </i:Interaction.Behaviors>

            <FlyoutBase.AttachedFlyout>
                <MenuFlyout>
                    <MenuFlyoutItem ..... Command="{Binding MarkRead}" />
                    <MenuFlyoutItem ..... Command="{Binding MarkUnread}" />
                    <MenuFlyoutItem ..... Command="{Binding PinToStart}" />
                </MenuFlyout>
            </FlyoutBase.AttachedFlyout>
        </Grid>
    </DataTemplate>




public class OpenFlyoutAction : DependencyObject, IAction
    {
        public object Execute(object sender, object parameter)
        {
            // Show menu
            FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);

            // sometimes the appbar is stuck behind the appbar, so hide the appbar
            (sender as FrameworkElement).GetFirstAncestorOfType<Page>().BottomAppBar.Visibility = Visibility.Collapsed;

            // show the appbar again when flyout is closed
            var flyout = FlyoutBase.GetAttachedFlyout((FrameworkElement)sender);
            EventHandler<object> showBar = null;
            showBar = delegate (object s, object e)
            {
                (sender as FrameworkElement).GetFirstAncestorOfType<Page>().BottomAppBar.Visibility = Visibility.Visible;
                // unsubscribe handler:
                flyout.Closed -= showBar;
            };
            flyout.Closed += showBar;

            return null;
        }
    }

这篇关于在应用栏后面弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！