Flyout won't change to dark theme?

Question

The flyout doesn't change its theme from light to dark. I don't know why. See my Example Code below. You can change the theme here and then the flyout remains in light theme.

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;
    }
}

Check my answer and mark if it fixed your issue. – Ahmed Rashad Mohamed Jan 09 '16 at 01:08 — Ahmed Rashad Mohamed, Jan 09 '16 at 01:08

score 0 · Answer 1 · answered Jan 09 '16 at 01:06

If you placed content inside the flyout, you will find that they adapt to the new ElementTheme, however the flyout presenter itself won't change it's background.

The flyout presenter follows the ApplicationTheme which you can't change in code behind while the app is running, but I have two workarounds for this issue:

Specific Flyout approach, define

Define <SolidColorBrush x:Key="FlyoutBackBrush" Color="#FF2B2B2B"/> in App.Xaml resources

Define FlyoutPresenterStyle and make background uses the brush we just defined in 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>

Change color property of the the resource FlyoutBackBrush and it will reflect in Flyout's background.

 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);
 }

[Not recommended] Wide effect approach, by retrievingSystemControlBackgroundChromeMediumLowBrush's from application resources and changing it's color value [Works but read Note]

 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);
}

Note This will affect all Flyouts and Pickers across application as they all use SystemControlBackgroundChromeMediumLowBrush.

score 0 · Answer 2 · answered Apr 19 '16 at 08:16

I found no so nice solution for this problem, but it is easy and works :)

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

You can set SystemControlBackgroundChromeMediumBrush as a brush of Grid in Flyout Content.

<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>

...notice to set Margin and Padding of Grid to fill the Flyout.

Flyout won't change to dark theme?

2 Answers2