页面中心的 MenuFlyout

Question

在我的 UWP 中，我试图在框架中心打开一个 MenuFlyout。

我怎样才能把它放在中间？

我试过这段代码，但它在框架顶部设置了浮出控件。

private void ListView_ItemClick(object sender,ItemClickEventArgs e) {
    var m = new MenuFlyout();
    var t = new MenuFlyoutItem() { Text = "SomeTxt"};
    m.Items.Add(t);
    m.ShowAt((FrameworkElement)Frame);
}

甚至尝试添加 m.Placement = Windows.UI.Xaml.Controls.Primitives.FlyoutPlacementMode.Center; 但 FlyoutPlacementMode 枚举不包含 Center.

Answer 1

很遗憾，FlyoutPlacementMode 中没有 Center 值，因此您需要编写更多代码来解决问题。

想法是首先将 FlyoutPlacementMode 设置为 Full，然后我们将 [=17] 的 Style 改为 Style =] 使其内容水平和垂直居中。

所以我所做的是使用 Blend 生成以下默认样式并将其放在 Page.Resources 中，然后我在根 Grid 上指定 HorizontalAlignment="Center" VerticalAlignment="Center" 以便居中中间的内容。

<Page.Resources>
    <Style x:Key="CenteredMenuFlyoutPresenterStyle" TargetType="MenuFlyoutPresenter">
        <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
        <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeHighBrush}" />
        <Setter Property="BorderThickness" Value="{ThemeResource FlyoutBorderThemeThickness}" />
        <Setter Property="Padding" Value="{ThemeResource MenuFlyoutPresenterThemePadding}" />
        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
        <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
        <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
        <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
        <Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
        <Setter Property="MaxWidth" Value="{ThemeResource FlyoutThemeMaxWidth}" />
        <Setter Property="MinHeight" Value="{ThemeResource MenuFlyoutThemeMinHeight}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="MenuFlyoutPresenter">
                    <Grid Background="{TemplateBinding Background}" HorizontalAlignment="Center" VerticalAlignment="Center">
                        <ScrollViewer x:Name="MenuFlyoutPresenterScrollViewer" AutomationProperties.AccessibilityView="Raw" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                            <ItemsPresenter />
                        </ScrollViewer>
                        <Border x:Name="MenuFlyoutPresenterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

然后像这样简单地将样式应用到 MenuFlyout -

var m = new MenuFlyout
{
    Placement = FlyoutPlacementMode.Full,
    MenuFlyoutPresenterStyle = (Style)this.Resources["CenteredMenuFlyoutPresenterStyle"]
};

var t = new MenuFlyoutItem() { Text = "SomeTxt" };
m.Items.Add(t);
m.ShowAt((FrameworkElement)sender);

页面中心的 MenuFlyout

MenuFlyout at center of page

c#

xaml

windows-8.1

windows-10

uwp