MenuFlyout位于页面中心

时间:2015-08-25 16:55:10

标签: c# xaml windows-8.1 windows-10 uwp

在我的UWP中,我正在尝试在Frame的中心打开一个MenuFlyout。

如何将其置于中心?

我已经尝试过这段代码,但它在框架顶部设置了弹出窗口。

maskLayer

甚至尝试添加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); } ,但FlyoutPlacementMode枚举不包含m.Placement = Windows.UI.Xaml.Controls.Primitives.FlyoutPlacementMode.Center;

1 个答案:

答案 0 :(得分:7)

不幸的是Center中没有FlyoutPlacementMode值,因此您需要为解决方法编写更多代码。

我们的想法是首先将FlyoutPlacementMode设置为Full,然后我们不会将内容延伸到整个页面,而是更改Style的{​​{1}}使其内容水平和垂直居中。

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

Grid

然后只需将样式应用于<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