Flyout не переключается на темную тему?

Если вы поместили содержимое во всплывающее окно, вы обнаружите, что оно адаптируется к новой теме ElementTheme, однако сам всплывающий презентатор не изменит свой фон.

Всплывающий презентер следует за ApplicationTheme, который вы не можете изменить в коде во время работы приложения, но у меня есть два обходных пути для этой проблемы:

• Конкретный всплывающий подход, определение

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

  2. Определите 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>
     

  3. Измените свойство цвета ресурса FlyoutBackBrush, и оно отразится на фоне всплывающего окна.

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

Примечание. Это повлияет на все всплывающие элементы и средства выбора в приложении, поскольку все они используют SystemControlBackgroundChromeMediumLowBrush.

Я не нашел такого красивого решения этой проблемы, но оно простое и работает :)

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

Вы можете установить 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>

... обратите внимание, чтобы установить Margin и Padding of Grid, чтобы заполнить всплывающее окно.