如何更改本机WPF控件主题的颜色？

Question

如何在Windows10下更改本机WPF控件主题使用的基色？我知道有像MahApps.Metro和MUI这样的库，但我想做的就是让我的应用程序中的元素用一致的颜色绘制(MenuItem和工具栏，我看着你和你不太协调的颜色)。我也想提供各种各样的颜色主题。

我该怎么做？

我必须承认，我只是不明白我所要求的是否可能。一些调查表明，默认的WPF主题使用静态资源，比如按钮背景：

<Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>

如果该资源是静态的，我想我不能更改它？简单地复制所有原始WPF模板并以某种方式用动态资源替换静态资源是否有意义？

Answer 1

要对所有控件和颜色“正确”执行此操作，涉及的内容可能比您想象的要多得多。

一些画笔使用窗口主题颜色，一些使用硬编码的值。

你可以覆盖窗口的主题颜色。

例如，在合并到app.xaml中的资源字典中，您可以在所有颜色和画笔上设置自己的首选项。

这里有一个：

 <SolidColorBrush Color="LimeGreen" x:Key="{x:Static SystemColors.HighlightBrushKey}"/>

https://docs.microsoft.com/en-us/dotnet/api/system.windows.systemcolors?view=netcore-3.1

你会发现这只改变了一些东西。

您必须重新设置控件模板，以替换硬编码的值。

我这么说是什么意思？

请看一下单选按钮模板：

https://docs.microsoft.com/en-us/dotnet/desktop/wpf/controls/radiobutton-styles-and-templates?view=netframeworkdesktop-4.8

在那里你会看到类似这样的东西：

          <Ellipse x:Name="Border"
                   StrokeThickness="1">
            <Ellipse.Stroke>
              <LinearGradientBrush EndPoint="0.5,1"
                                   StartPoint="0.5,0">
                <GradientStop Color="{DynamicResource BorderLightColor}"
                              Offset="0" />
                <GradientStop Color="{DynamicResource BorderDarkColor}"
                              Offset="1" />
              </LinearGradientBrush>
            </Ellipse.Stroke>
            <Ellipse.Fill>
              <LinearGradientBrush StartPoint="0,0"
                                   EndPoint="0,1">
                <LinearGradientBrush.GradientStops>
                  <GradientStopCollection>
                    <GradientStop Color="{DynamicResource ControlLightColor}" />
                    <GradientStop Color="{DynamicResource ControlMediumColor}"
                                  Offset="1.0" />
                  </GradientStopCollection>
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </Ellipse.Fill>
          </Ellipse>

这些资源被定义在主模板下面的一个长长的大列表中。你会想要替换所有这些。

无论你想让你的控件都使用窗口主题，还是你自己的主题，如果你从头开始，你会有很多工作要做。

你可能想看看各种预滚动的主题，它们是可用的。材料设计很受欢迎，因为很多人都熟悉android。

http://materialdesigninxaml.net/

Answer 2

我最近为我正在开发的一个应用程序创建了一些自定义主题。首先要注意的是，WPF中的控件是SolidColorBrush类。这些方法可以通过在不同构造函数中使用RGBA的各种方法来构造。

这是一项很大的工作，所以如果太多，至少跳转到我在App.xaml中的样式xaml示例，注意您可以在setter中绑定到ViewModel中的变量，从而使StaticResource返回动态颜色值。这就是绑定的美妙之处。仍然通过{StaticResource}指定样式，但是它给出的值是由代码中的绑定变量决定的。

我创建了三个类来处理选项和主题。一个OptionsMenu.xaml文件作为对话框，让用户选择，一个OptionsMenuVM.cs设置绑定，Options.cs保存数据。它们分别是view、viewmodel和model。

Options.cs有

     public class Options
{
    //white theme color values
    public SolidColorBrush whiteThemeLightPanelColor = new SolidColorBrush(Color.FromRgb(255, 255, 255));
    public SolidColorBrush whiteThemeDarkPanelColor = new SolidColorBrush(Color.FromRgb(230, 230, 230));
    public SolidColorBrush whiteThemeTextBoxBackgroundColor = new SolidColorBrush(Color.FromRgb(255, 255, 255));
    public SolidColorBrush whiteThemeTextBoxForegroundColor = new SolidColorBrush(Color.FromRgb(0, 0, 0));

    //light theme color values
    public SolidColorBrush lightThemeLightPanelColor = new SolidColorBrush(Color.FromRgb(200, 200, 200));
    public SolidColorBrush lightThemeDarkPanelColor = new SolidColorBrush(Color.FromRgb(225, 225, 225));
    public SolidColorBrush lightThemeTextBoxBackgroundColor = new SolidColorBrush(Color.FromRgb(180, 180, 180));
    public SolidColorBrush lightThemeTextBoxForegroundColor = new SolidColorBrush(Color.FromRgb(0, 0, 0));

    //dark theme color values
    public SolidColorBrush darkThemeLightPanelColor = new SolidColorBrush(Color.FromRgb(100, 100, 100));
    public SolidColorBrush darkThemeDarkPanelColor = new SolidColorBrush(Color.FromRgb(70, 70, 70));
    public SolidColorBrush darkThemeTextBoxBackgroundColor = new SolidColorBrush(Color.FromRgb(50, 50, 50));
    public SolidColorBrush darkThemeTextBoxForegroundColor = new SolidColorBrush(Color.FromRgb(255, 255, 255));

    //blue theme color values
    public SolidColorBrush blueThemeLightPanelColor = new SolidColorBrush(Color.FromRgb(105, 175, 209));
    public SolidColorBrush blueThemeDarkPanelColor = new SolidColorBrush(Color.FromRgb(34, 103, 140));
    public SolidColorBrush blueThemeTextBoxBackgroundColor = new SolidColorBrush(Color.FromRgb(211, 211, 211));
    public SolidColorBrush blueThemeTextBoxForegroundColor = new SolidColorBrush(Color.FromRgb(0, 0, 0));

    //most recent custom color values
    public SolidColorBrush lastCustomLightPanelColor = new SolidColorBrush(Color.FromRgb(200, 200, 200));
    public SolidColorBrush lastCustomDarkPanelColor = new SolidColorBrush(Color.FromRgb(225, 225, 225));
    public SolidColorBrush lastCustomTextBoxBackgroundColor = new SolidColorBrush(Color.FromRgb(180, 180, 180));
    public SolidColorBrush lastCustomTextBoxForegroundColor = new SolidColorBrush(Color.FromRgb(0, 0, 0));

    //runtime color values
    public SolidColorBrush lightPanelColor;
    public SolidColorBrush darkPanelColor;
    public SolidColorBrush textBoxBackgroundColor;
    public SolidColorBrush textBoxForegroundColor;

    public string chosenTheme = "Light";
    }

视图模型具有

    private Options userOptions;
    public Options UserOptions
    {
        get => userOptions;
        set
        {
            userOptions = value;

            OnPropertyChanged("UserOptions");

            OnPropertyChanged("ChosenTheme");

            UpdateColors();
        }
    }
    public SolidColorBrush LightPanelColor
    {
        get => userOptions.lightPanelColor;
        set
        {
            userOptions.lightPanelColor = value;
            OnPropertyChanged("LightPanelColor");
        }
    }

    public SolidColorBrush DarkPanelColor
    {
        get => userOptions.darkPanelColor;
        set
        {
            userOptions.darkPanelColor = value;
            OnPropertyChanged("DarkPanelColor");
        }
    }

    public SolidColorBrush TextBoxBackgroundColor
    {
        get => userOptions.textBoxBackgroundColor;
        set
        {
            userOptions.textBoxBackgroundColor = value;
            OnPropertyChanged("TextBoxBackgroundColor");
        }
    }
   public ObservableCollection<string> ThemeOptions { get; } = new ObservableCollection<string>() { "White", "Light", "Blue", "Dark", "Custom" };

    
    public string ChosenTheme
    {
        get => userOptions.chosenTheme;
        set
        {
            userOptions.chosenTheme = value;
            OnPropertyChanged("ChosenTheme");
            OnPropertyChanged("EnableColorSelection");
            UpdateColors();
        }
    }

    public void UpdateColors()
    {
        if(userOptions.chosenTheme.Equals("White"))
        {
            LightPanelColor = userOptions.whiteThemeLightPanelColor;
            DarkPanelColor = userOptions.whiteThemeDarkPanelColor;
            TextBoxBackgroundColor = userOptions.whiteThemeTextBoxBackgroundColor;
            TextBoxForegroundColor = userOptions.whiteThemeTextBoxForegroundColor;
        }
        else if (userOptions.chosenTheme.Equals("Light"))
        {
            LightPanelColor = userOptions.lightThemeLightPanelColor;
            DarkPanelColor = userOptions.lightThemeDarkPanelColor;
            TextBoxBackgroundColor = userOptions.lightThemeTextBoxBackgroundColor;
            TextBoxForegroundColor = userOptions.lightThemeTextBoxForegroundColor;
        }
        else if (userOptions.chosenTheme.Equals("Dark"))
        {
            LightPanelColor = userOptions.darkThemeLightPanelColor;
            DarkPanelColor = userOptions.darkThemeDarkPanelColor;
            TextBoxBackgroundColor = userOptions.darkThemeTextBoxBackgroundColor;
            TextBoxForegroundColor = userOptions.darkThemeTextBoxForegroundColor;
        }
        else if (userOptions.chosenTheme.Equals("Blue"))
        {
            LightPanelColor = userOptions.blueThemeLightPanelColor;
            DarkPanelColor = userOptions.blueThemeDarkPanelColor;
            TextBoxBackgroundColor = userOptions.blueThemeTextBoxBackgroundColor;
            TextBoxForegroundColor = userOptions.blueThemeTextBoxForegroundColor;
        }
        else if(userOptions.chosenTheme.Equals("Custom"))
        {
            LightPanelColor = userOptions.lastCustomLightPanelColor;
            DarkPanelColor = userOptions.lastCustomDarkPanelColor;
            TextBoxBackgroundColor = userOptions.lastCustomTextBoxBackgroundColor;
            TextBoxForegroundColor = userOptions.lastCustomTextBoxForegroundColor;
        }
    }

Options.xaml有

    <StackPanel Orientation="Horizontal">
                    <Label Content="Theme: " />
                    <ComboBox Width="150" ItemsSource="{Binding ThemeOptions}" SelectedItem="{Binding ChosenTheme}" />
                </StackPanel>
                <GroupBox Header="Custom Theme Color Selections" IsEnabled="{Binding EnableColorSelection}" Style="{StaticResource GroupBoxStyle}">
                    <StackPanel Orientation="Vertical">
                        <StackPanel Orientation="Horizontal">
                            <Label Content="Light Panel Background: " Style="{StaticResource OptionsLabel}"/>
                            <Button Foreground="{Binding Path=LightPanelColor, UpdateSourceTrigger=PropertyChanged}" ToolTip="Click to Change Color" Width="28" Height="18" Command="{Binding ChooseColorCmd}" CommandParameter="LightPanelColor">
                                <Rectangle Width="40" Height="15" Fill="{Binding Path=LightPanelColor, UpdateSourceTrigger=PropertyChanged}"/>
                            </Button>
                        </StackPanel>

                        <StackPanel Orientation="Horizontal">
                            <Label Content="Dark Panel Background: " Style="{StaticResource OptionsLabel}"/>
                            <Button Foreground="{Binding Path=DarkPanelColor, UpdateSourceTrigger=PropertyChanged}" ToolTip="Click to Change Color" Width="28" Height="18" Command="{Binding ChooseColorCmd}" CommandParameter="DarkPanelColor">
                                <Rectangle Width="40" Height="15" Fill="{Binding Path=DarkPanelColor, UpdateSourceTrigger=PropertyChanged}"/>
                            </Button>
                        </StackPanel>

                        <StackPanel Orientation="Horizontal">
                            <Label Content="Text Box Background: " Style="{StaticResource OptionsLabel}"/>
                            <Button Foreground="{Binding Path=TextBoxBackgroundColor, UpdateSourceTrigger=PropertyChanged}" ToolTip="Click to Change Color" Width="28" Height="18" Command="{Binding ChooseColorCmd}" CommandParameter="TextBoxBackgroundColor">
                                <Rectangle Width="40" Height="15" Fill="{Binding Path=TextBoxBackgroundColor, UpdateSourceTrigger=PropertyChanged}"/>
                            </Button>
                        </StackPanel>

                        <StackPanel Orientation="Horizontal">
                            <Label Content="Text Box Foreground: " Style="{StaticResource OptionsLabel}"/>
                            <Button Foreground="{Binding Path=TextBoxForegroundColor, UpdateSourceTrigger=PropertyChanged}" ToolTip="Click to Change Color" Width="28" Height="18" Command="{Binding ChooseColorCmd}" CommandParameter="TextBoxForegroundColor">
                                <Rectangle Width="40" Height="15" Fill="{Binding Path=TextBoxForegroundColor, UpdateSourceTrigger=PropertyChanged}"/>
                            </Button>
                        </StackPanel>
                    </StackPanel>
                </GroupBox>

这会给你一个组合框来选择主题，如果他们选择自定义，我会启用几个按钮，让他们从颜色选择器中选择。您可以从颜色选择器中获取RGB并以此方式设置颜色。如果他们选择一个普通的主题，UpdateColors()将查看chosenTheme并将颜色设置为option.cs中的默认颜色。

下面是我的viewModel中的函数，按钮调用该函数来选择自定义颜色。顺便说一句，标准主题更容易添加自定义颜色使其更加复杂。

    private void ChooseColor(object cp)
    {
        string caller = cp.ToString();
        System.Windows.Forms.ColorDialog cd = new System.Windows.Forms.ColorDialog();
        Color startColor = Color.FromRgb(0,0,0);
        if (caller.Equals("LightPanelColor"))
        {
            startColor = LightPanelColor.Color;
        }
        else if (caller.Equals("DarkPanelColor"))
        {
            startColor = DarkPanelColor.Color;
        }
        else if (caller.Equals("TextBoxBackgroundColor"))
        {
            startColor = TextBoxBackgroundColor.Color;
        }
        else if (caller.Equals("TextBoxForegroundColor"))
        {
            startColor = TextBoxForegroundColor.Color;
        }
        else
        {
            return;
        }

        cd.Color = System.Drawing.Color.FromArgb(startColor.A, startColor.R, startColor.G, startColor.B);
        if (cd.ShowDialog() == System.Windows.Forms.DialogResult.OK)
        {
            if(caller.Equals("LightPanelColor"))
            {
                LightPanelColor.Color = Color.FromArgb(cd.Color.A, cd.Color.R, cd.Color.G, cd.Color.B);
                OnPropertyChanged("LightPanelColor");
            }
            else if(caller.Equals("DarkPanelColor"))
            {
                DarkPanelColor.Color = Color.FromArgb(cd.Color.A, cd.Color.R, cd.Color.G, cd.Color.B);
                OnPropertyChanged("DarkPanelColor");
            }
            else if(caller.Equals("TextBoxBackgroundColor"))
            {
                TextBoxBackgroundColor.Color = Color.FromArgb(cd.Color.A, cd.Color.R, cd.Color.G, cd.Color.B);
                OnPropertyChanged("TextBoxBackgroundColor");
            }
            else if(caller.Equals("TextBoxForegroundColor"))
            {
                TextBoxForegroundColor.Color = Color.FromArgb(cd.Color.A, cd.Color.R, cd.Color.G, cd.Color.B);
                OnPropertyChanged("TextBoxForegroundColor");
            }
            else
            {
                return;
            }
        }
    }

为了使这些颜色在我放在App.xaml中的应用程序中可用

    <vm:OptionsMenuVM x:Key="optionsMenuVM"/>

OptionsMenu.xaml通过以下方式获取数据上下文

    <Window Height="360" Width="564.225" DataContext="{StaticResource optionsMenuVM}" Background="{Binding DarkPanelColor}" Name="OptionsWindow">

现在，您可以在应用程序中的任何位置通过以下方式设置控件的背景

    Background="{Binding Path=DarkPanelColor, Source={StaticResource optionsMenuVM}}">

然后你可以选择任何你想要的颜色主题。我只有四种颜色，所以你得决定有几种颜色。优选地，一种类型或一组控件的颜色。因此，每个TextBox都使用TextBoxColor或您称之为它的任何东西。

下面是我放在TextBox风格的App.xaml中的一个例子

    <Style x:Key="InputTextbox" TargetType="TextBox">
        <Style.Setters>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="Width" Value="90"/>
            <Setter Property="Margin" Value="0,2,2,2"/>
            <Setter Property="Background" Value="{Binding Path=TextBoxBackgroundColor, Source={StaticResource optionsMenuVM}}"/>
            <Setter Property="Foreground" Value="{Binding Path=TextBoxForegroundColor, Source={StaticResource optionsMenuVM}}"/>
            <EventSetter Event="Loaded" Handler="TextBox_Loaded"/>
        </Style.Setters>
    </Style>

因此，对于像这样的每个TextBox，您都可以编写

    <TextBox  Style="{StaticResource InputTextbox}"/>

您也可以对其他控件执行相同的操作。只要在设置颜色时调用PropertyChanged事件，整个应用程序就会立即更新。背景颜色绑定将全部从视图模型中提取。

我不得不省略部分，因为我有一个很大的选项菜单，还有很多事情要做，但我希望我是如何做到这一点的一般想法被理解。一旦你做了这样的事情，你想做的一件事就是保存选项数据。

由于视图模型只包含Options.cs的实例，因此用一个已加载的类实例替换这个类实例将使您返回到您离开的地方。在我看来，将这些数据保存到AppData文件夹中是一个好主意，您可以通过

    Environment.SpecialFolder.ApplicationData

然后将程序的新文件夹附加到该路径(Path.Combine是您的朋友)，并在其中保存一个文件供您选择。我尝试序列化，但是纯色笔刷不序列化，所以我使用BinaryWriter保存RGB值并读回它们。下面是我的save和load函数

    private void SaveUserOptionsFile()
    {
        
        try
        {
            using (BinaryWriter binaryWriter = new BinaryWriter(File.Open(optionsSavePath, FileMode.Create)))
            {
                Color lastCustomLightPanelColor = userOptions.lastCustomLightPanelColor.Color;
                Color lastCustomDarkPanelColor = userOptions.lastCustomDarkPanelColor.Color;
                Color lastCustomTextBoxBackgroundColor = userOptions.lastCustomTextBoxBackgroundColor.Color;
                Color lastCustomTextBoxForegroundColor = userOptions.lastCustomTextBoxForegroundColor.Color;

                binaryWriter.Write(lastCustomLightPanelColor.R);
                binaryWriter.Write(lastCustomLightPanelColor.G);
                binaryWriter.Write(lastCustomLightPanelColor.B);

                binaryWriter.Write(lastCustomDarkPanelColor.R);
                binaryWriter.Write(lastCustomDarkPanelColor.G);
                binaryWriter.Write(lastCustomDarkPanelColor.B);

                binaryWriter.Write(lastCustomTextBoxBackgroundColor.R);
                binaryWriter.Write(lastCustomTextBoxBackgroundColor.G);
                binaryWriter.Write(lastCustomTextBoxBackgroundColor.B);

                binaryWriter.Write(lastCustomTextBoxForegroundColor.R);
                binaryWriter.Write(lastCustomTextBoxForegroundColor.G);
                binaryWriter.Write(lastCustomTextBoxForegroundColor.B);

                binaryWriter.Write(userOptions.chosenTheme);
            }
        }
        catch(IOException e)
        {
            if(File.Exists(optionsSavePath))
            {
                File.Delete(optionsSavePath);
            }
        }
    }

    public void LoadUserOptionsFile()
    {
        if (File.Exists(optionsSavePath))
        { 
            try
            {
                using (BinaryReader binaryReader = new BinaryReader(File.Open(optionsSavePath, FileMode.Open)))
                {
                    UserOptions.lastCustomLightPanelColor.Color = Color.FromRgb(binaryReader.ReadByte(), binaryReader.ReadByte(), binaryReader.ReadByte());
                    UserOptions.lastCustomDarkPanelColor.Color = Color.FromRgb(binaryReader.ReadByte(), binaryReader.ReadByte(), binaryReader.ReadByte());
                    UserOptions.lastCustomTextBoxBackgroundColor.Color = Color.FromRgb(binaryReader.ReadByte(), binaryReader.ReadByte(), binaryReader.ReadByte());
                    UserOptions.lastCustomTextBoxForegroundColor.Color = Color.FromRgb(binaryReader.ReadByte(), binaryReader.ReadByte(), binaryReader.ReadByte());

                    ChosenTheme = binaryReader.ReadString();

                    originalUserOptions = new Options(UserOptions);
                }
            }
            catch (IOException e)
            {
                UserOptions = new Options();
                originalUserOptions = new Options();
                if (File.Exists(optionsSavePath))
                {
                    File.Delete(optionsSavePath);
                }
            }
        }
    }

我通过捕获主窗口上的close事件并调用save函数来保存此文件。当程序打开时，Load被调用，如果没有任何内容，它将转到默认的起始值。

我在里面有一个变量originalUserOptions，让用户取消。它被构造为用户打开菜单时存在的选项的副本。实际的options实例是由他们的输入编辑的，他们看到颜色发生了变化。如果他们点击ok，选项将保留，如果他们点击cancel，我会将选项设置回原始实例，它就会回到它们开始时的状态。在我的选项设置器中，我必须为所有相关数据调用PropertyChanged来更新视图。

我知道这里有很多东西，但这是一个应用程序范围的数据争论练习，它分布在许多文件中。如果你尝试其中的任何一个，不要复制粘贴整个块，我有很多事情要做，我不得不试着拉出相关的部分。把它作为一个想法的例子，并使用其中的一些想法自己构建一个主题系统。如果它太多而无法实际使用，我很抱歉。祝好运。