Flyout won't change to dark theme? - xaml

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="" />
</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;
}
}

Answer 1

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.

Answer 2

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.