如何设置按钮背景图像主题是深色或白色 [英] How to setUp Button Background image either theme is dark or white

问题描述

我使用以下代码使用带有白色图像的 png 文件设置按钮背景图像.

I use below code to set up button background image using a png file with white image.

ImageBrush brush = new ImageBrush();    

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

btnDel.Background = brush;

png 文件有一个白色图像.在黑暗主题中，我可以看到 png 文件中的白色图像.但是当我将主题更改为浅色时，我就看不到白色图像了.

The png file has a white image. In the Dark Theme, I can see the white image from the png file. But when I change the Theme to Light, I can no longer see the white image.

我是否需要检测用户设置的主题然后使用另一个带有黑色图像的 png 文件?

Do I need to detect the theme being set by the user then use another png file with a black image?

推荐答案

我写了一个 博客文章 不久前，其中包括一个自定义 ResourceDictionary 实现，该实现支持根据主题在两个 ResourceDictionary 之间进行交换.

I wrote up a blog post a while back that included a custom ResourceDictionary implementation that supports swapping between two ResourceDictionaries depending on the theme.

它适用于 Visual Studio 设计器 (Cider) 和 Blend，但在 Blend 中使用该预览机制时，它不会切换到灯光.不幸的是，由于 Blend 处理资源的方式，在可预见的未来看起来它仍将保持这种状态.

It works with the Visual Studio designer (Cider) and Blend but it doesn't swap to light when using that preview mechanism in Blend. Unfortunately, due to how Blend processes resources, it looks like it's going to remain that way for the foreseeable future.

您可以阅读原始帖子以获取更多信息，但我将在此处包含代码:

You can read the original post for additional information, but I'll include the code here:

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

然后您可以像这样定义明/暗特定资源(或者您可以将它们放在自己的资源 XAML 文件中):

You can then define light/dark specific resources like this (or you can put them in their own resource XAML file):

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

然后您可以像这样在您的页面上引用它们:

You can then reference them on your page like this:

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

这篇关于如何设置按钮背景图像主题是深色或白色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！