如何在 UWP 中设置 MenuFlyout 的主题？答案

【问题标题】：How to set the theme of a MenuFlyout in UWP?如何在 UWP 中设置 MenuFlyout 的主题？
【发布时间】：2016-04-27 05:19:28
【问题描述】：

我知道如何使用 RequestedTheme 属性设置整个页面的主题。但我想知道如何从 c# 显式设置 MenuFlyout 的主题。

【问题讨论】：

标签： winrt-xaml win-universal-app

【解决方案1】：

好的，我可以解决这个问题

Style s = new Windows.UI.Xaml.Style { TargetType = typeof(MenuFlyoutPresenter) };
s.Setters.Add(new Setter(RequestedThemeProperty, ElementTheme.Dark));
myMenuFlyout.MenuFlyoutPresenterStyle = s;

【讨论】：

【解决方案2】：

MenuFlyout 不继承 FrameworkElement 类。如果您想更改浮出控件的可视化，可以使用MenuFlyoutPresenterStyle 属性。

    <Style x:Key="MenuFlyoutPresenterStyle" TargetType="MenuFlyoutPresenter">
        <Setter Property="RequestedTheme" Value="Dark"/>
        <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}">
                        <ScrollViewer x:Name="MenuFlyoutPresenterScrollViewer"
                        Padding="{TemplateBinding Padding}"
                        Margin="{TemplateBinding BorderThickness}"
                        HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                        VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                        IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                        IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                        ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
                        AutomationProperties.AccessibilityView="Raw">
                            <ItemsPresenter/>
                        </ScrollViewer>
                        <Border x:Name="MenuFlyoutPresenterBorder"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

并用它来表达你的情绪：

            <MenuFlyout MenuFlyoutPresenterStyle="{StaticResource MenuFlyoutPresenterStyle}">
                <MenuFlyoutItem Text="one"/>
                <MenuFlyoutItem Text="two"/>
            </MenuFlyout>

【讨论】：