Flyout 不会更改为深色主题？答案

【问题标题】：Flyout won't change to dark theme?Flyout 不会更改为深色主题？
【发布时间】：2015-11-27 13:53:50
【问题描述】：

弹出按钮不会将其主题从浅色更改为深色。我不知道为什么。请参阅下面的示例代码。您可以在此处更改主题，然后弹出按钮将保持为浅色主题。

MainPage.xaml

<Page>
    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Icon="Emoji">
                <AppBarButton.Flyout>
                    <Flyout/>
                </AppBarButton.Flyout>
            </AppBarButton>
            <AppBarToggleButton Checked="Checked" Unchecked="Unchecked">
            <AppBarToggleButton.Icon>
                <FontIcon Glyph="&#xE771;" />
            </AppBarToggleButton.Icon>
        </AppBarToggleButton>
    </CommandBar>
    </Page.BottomAppBar>
</Page>

MainPage.cs

public sealed partial class MainPage : Page
{
    private void Checked(object sender, RoutedEventArgs e)
    {
        this.RequestedTheme = ElementTheme.Dark;
    }

    private void Unchecked(object sender, RoutedEventArgs e)
    {
        this.RequestedTheme = ElementTheme.Light;
    }
}

【问题讨论】：

检查我的答案并标记它是否解决了您的问题。

标签： xaml themes uwp appbar flyout

【解决方案1】：

如果您将内容放置在弹出窗口中，您会发现它们会适应新的 ElementTheme，但弹出窗口演示者本身不会更改其背景。

弹出演示者遵循应用程序运行时无法更改代码的 ApplicationTheme，但我有两个解决此问题的方法：

具体的Flyout方法，定义

在 App.Xaml 资源中定义 <SolidColorBrush x:Key="FlyoutBackBrush" Color="#FF2B2B2B"/>

定义FlyoutPresenterStyle并使用我们刚刚在App.Xaml中定义的画笔制作背景

        <Flyout x:Name="MyFlyout">
            <Flyout.FlyoutPresenterStyle>
                <Style TargetType="FlyoutPresenter">
                    <Setter Property="Background" Value="{StaticResource FlyoutBackBrush}"/>
                </Style>
            </Flyout.FlyoutPresenterStyle>
            <StackPanel>
                <Button Content="Button"/>
                <TextBlock Text="Test"/>
            </StackPanel>
        </Flyout>

更改资源 FlyoutBackBrush 的颜色属性，它将反映在 Flyout 的背景中。

 private readonly Color _darkColor = Color.FromArgb(255, 43, 43, 43);//themeresources.xaml - Default
 private readonly Color _lightColor = Color.FromArgb(255, 242, 242, 242);//themeresources.xaml - Light

 private void SetFlyoutBackBrush(Color color)
 {
     var brushKey = "FlyoutBackBrush";
     if (Resources.ContainsKey(brushKey))
     {
        var flyoutbackBrush = Resources[brushKey] as SolidColorBrush;
        if (flyoutbackBrush != null) flyoutbackBrush.Color = color;
     }
 }

 private void Checked(object sender, RoutedEventArgs e)
 {
      this.RequestedTheme = ElementTheme.Dark;
      SetFlyoutBackBrush(_darkColor);
 }

 private void Unchecked(object sender, RoutedEventArgs e)
 {
     this.RequestedTheme = ElementTheme.Light;
     SetFlyoutBackBrush(_lightColor);
 }

[不推荐] 宽效果方法，通过从应用程序资源中检索SystemControlBackgroundChromeMediumLowBrush 并更改其颜色值[有效但请阅读注意事项]

 private readonly Color _darkColor = Color.FromArgb(255, 43, 43, 43);//themeresources.xaml - Default

 private readonly Color _lightColor = Color.FromArgb(255, 242, 242, 242);//themeresources.xaml - Light

private void SetFlyoutBackBrush(Color color)
{
    var brushKey = "SystemControlBackgroundChromeMediumLowBrush";
    if (Application.Current.Resources.ContainsKey(brushKey))
    {
        var flyoutbackBrush = Application.Current.Resources[brushKey] as SolidColorBrush;
        if (flyoutbackBrush != null) flyoutbackBrush.Color = color;
    }
}

private void Checked(object sender, RoutedEventArgs e)
{
    this.RequestedTheme = ElementTheme.Dark;
    SetFlyoutBackBrush(_darkColor);
}

private void Unchecked(object sender, RoutedEventArgs e)
{
    this.RequestedTheme = ElementTheme.Light;
    SetFlyoutBackBrush(_lightColor);
}

注意这将影响应用程序中的所有 Flyouts 和 Picker，因为它们都使用 SystemControlBackgroundChromeMediumLowBrush。

【讨论】：

【解决方案2】：

我发现这个问题没有很好的解决方案，但它很容易并且有效:)

http://blog.kurpio.com/2016/04/19/perelki-uwp-2-flyout-w-commandbar-obejscie-buga/

您可以在 Flyout Content 中将 SystemControlBackgroundChromeMediumBrush 设置为 Grid 的画笔。

<AppBarButton Label="Szukaj"
                          Icon="Find">
                <AppBarButton.Flyout>
                    <Flyout Placement="Bottom">
                        <Flyout.Content>
                            <Grid Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}"
                                  Margin="-15"
                                  Padding="15"
                                  Width="285">
                                <TextBox Header="Szukaj:"
                                         Width="175"
                                         HorizontalAlignment="Left" />
                                <AppBarButton Label="Szukaj"
                                              Icon="Find"
                                              HorizontalAlignment="Right" />
                            </Grid>
                        </Flyout.Content>
                    </Flyout>
                </AppBarButton.Flyout>
            </AppBarButton>

...注意设置 Grid 的 Margin 和 Padding 以填充 Flyout。

【讨论】：