Comment configurer le bouton Image de fond soit le thème est sombre ou blanc

Question

J'utilise le code ci-dessous pour configurer l'image d'arrière-plan du bouton en utilisant un fichier png avec une image blanche.

ImageBrush brush = new ImageBrush();  

brush.ImageSource = new BitmapImage(new Uri(@"/Images/delete.png", UriKind.Relative));  

btnDel.Background = brush; 

Le fichier png a une image blanche. Dans le thème sombre, je peux voir l'image blanche du fichier png. Mais quand je change de Thème en Lumière, je ne peux plus voir l'image blanche.

Dois-je détecter le thème défini par l'utilisateur, puis utiliser un autre fichier png avec une image noire?

Answer 1

J'ai écrit un blog post un certain temps qui comprenait une implémentation de ResourceDictionary personnalisée qui prend en charge l'échange entre deux ResourceDictionaries en fonction du thème.

Il fonctionne avec le concepteur Visual Studio (Cider) et Blend, mais il ne s'échange pas lorsque vous utilisez ce mécanisme de prévisualisation dans Blend. Malheureusement, en raison de la façon dont Blend traite les ressources, il semble que ce sera le cas dans un avenir prévisible.

Vous pouvez lire le message original pour plus d'informations, mais je vais inclure le code ici:

namespace ThemeManagement { 
    /// <summary> 
    /// Provides automatic selection of resources based on the current theme 
    /// </summary> 
    public class ThemeResourceDictionary : ResourceDictionary 
    { 
     private ResourceDictionary lightResources; 
     private ResourceDictionary darkResources; 

     /// <summary> 
     /// Gets or sets the <see cref="ResourceDictioary"/> to use 
     /// when in the "light" theme 
     /// </summary> 
     public ResourceDictionary LightResources 
     { 
      get { return lightResources; } 
      set 
      { 
       lightResources = value; 

       if (!IsDarkTheme && value != null) 
       { 
        MergedDictionaries.Add(value); 
       } 
      } 
     } 

     /// <summary> 
     /// Gets or sets the <see cref="ResourceDictioary"/> to use 
     /// when in the "dark" theme 
     /// </summary> 
     public ResourceDictionary DarkResources 
     { 
      get { return darkResources; } 
      set 
      { 
       darkResources = value; 

       if (IsDarkTheme && value != null) 
       { 
        MergedDictionaries.Add(value); 
       } 
      } 
     } 

     /// <summary> 
     /// Determines if the application is running in the dark theme 
     /// </summary> 
     private bool IsDarkTheme 
     { 
      get 
      { 
       if (IsDesignMode) 
       { 
        return true; 
       } 
       else 
       { 
        return (Visibility)Application.Current 
         .Resources["PhoneDarkThemeVisibility"] == Visibility.Visible; 
       } 
      } 
     } 

     /// <summary> 
     /// Determines if the application is being run by a design tool 
     /// </summary> 
     private bool IsDesignMode 
     { 
      get 
      { 
       // VisualStudio sometimes returns false for DesignMode, 
       // DesignTool is our backup 
       return DesignerProperties.GetIsInDesignMode(this) || 
        DesignerProperties.IsInDesignTool; 
      } 
     } 
    } 
} 

Vous pouvez alors définir des ressources spécifiques lumière/obscurité comme celui-ci (ou vous pouvez les mettre dans leur propre fichier XAML de ressources):

<Application.Resources> 
    <custom:ThemeResourceDictionary> 
     <custom:ThemeResourceDictionary.LightResources> 
      <ResourceDictionary> 
       <BitmapImage x:Key="ThemedImage" 
        UriSource="/ThemeManagement;component/Content/ImageLight.png" /> 
      </ResourceDictionary> 
     </custom:ThemeResourceDictionary.LightResources> 
     <custom:ThemeResourceDictionary.DarkResources> 
      <ResourceDictionary> 
       <BitmapImage x:Key="ThemedImage" 
        UriSource="/ThemeManagement;component/Content/ImageDark.png" /> 
      </ResourceDictionary> 
     </custom:ThemeResourceDictionary.DarkResources> 
    </custom:ThemeResourceDictionary> 
</Application.Resources> 

vous pouvez ensuite les référencer sur votre page comme ceci:

<Image Source="{StaticResource ThemedImage}" /> 

Answer 2

http://www.mendzapp.com/archives/196

Cet article explique comment détecter le thème sélectionné sur le téléphone (noir ou blanc) et comment l'utiliser pour changer l'arrière-plan des contrôles. Dans votre cas lorsque vous utilisez une image, je suggère de créer une deuxième image et de charger la bonne en fonction du thème sélectionné sur le téléphone.

Espérons que cela aide! :)