WPF MaterialDesign 颜色选择器自定义模板颜色

首先得确保程序UI使用的是MaterialDesign。

本版本为5.0以上版本，低版本个别类名会有出入，按提示修改即可:

XMAL页面:

<UserControl x:Class="**********************"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="********************************"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:materialDesignColors="clr-namespace:MaterialDesignColors;assembly=MaterialDesignColors"
             mc:Ignorable="d" 
             xmlns:converters="这里引用自己转换器的地址"
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBlock.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ToggleButton.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <converters:ColorToBrushConverter x:Key="ColorToBrushConverter" />
        </ResourceDictionary>
    </UserControl.Resources>
                <materialDesign:Card Margin="5" materialDesign:ElevationAssist.Elevation="Dp4" BorderThickness="3" BorderBrush="White">
                    <!-- Color picker section -->
                    <DockPanel Margin="16">
                        <Grid DockPanel.Dock="Left">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="160" />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>

                                <StackPanel Orientation="Horizontal" Margin="5">
                                    <TextBlock Text="浅色"/>
                                    <ToggleButton Style="{DynamicResource MaterialDesignSwitchToggleButton}"
                                     IsChecked="{Binding IsDarkTheme}" ToolTip="点击切换主题">
                                        <materialDesign:PackIcon
Kind="Pin"
RenderTransformOrigin=".5,.5">
                                            <materialDesign:PackIcon.RenderTransform>
                                                <RotateTransform
    Angle="45" />
                                            </materialDesign:PackIcon.RenderTransform>
                                        </materialDesign:PackIcon>
                                        <materialDesign:ToggleButtonAssist.OnContent>
                                            <materialDesign:PackIcon
  Kind="Pin" />
                                        </materialDesign:ToggleButtonAssist.OnContent>
                                    </ToggleButton>
                                    <TextBlock Text="深色"/>
                                </StackPanel>
                                <!--左侧颜色查看-->
                                <DockPanel Grid.Row="1">
                                    <TextBox Margin="2,0,10,2"
                   materialDesign:HintAssist.Hint="Color HEX value"
                   DockPanel.Dock="Top"
                   Style="{StaticResource MaterialDesignFilledTextBox}"
                   Text="{Binding Color, ElementName=ColorPicker, UpdateSourceTrigger=PropertyChanged}" />
                                    <Rectangle Margin="2,0,10,2" Fill="{Binding Color, ElementName=ColorPicker, Converter={StaticResource ColorToBrushConverter}}" />
                                </DockPanel>
                                <!--颜色选择器-->
                                <materialDesign:ColorPicker x:Name="ColorPicker"
                                    Grid.Column="1"
                                            Grid.RowSpan="2"
                                    Color="{Binding SelectedColor}" />
                            </Grid>
                        </Grid>
                    </DockPanel>
                </materialDesign:Card>
</UserControl>

后台cs代码:

public partial class Setting : UserControl, INotifyPropertyChanged
 {
     public event PropertyChangedEventHandler PropertyChanged;
     public void OnPropertyChanged([CallerMemberName] string propertyname = "")
     {
         PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyname));
     }
     public Setting()
     {
        InitializeComponent();
        ThemeInit();
     }
    #region 修改主题与颜色
  /// <summary>
  /// 初始化获取当前模板,在构造方法使用该方法
  /// </summary>
  private void ThemeInit()
  {
      //获取当前主题
      Theme theme = _paletteHelper.GetTheme();
      var the = theme.GetBaseTheme();
      if (the == BaseTheme.Dark)
      {
          _isDarkTheme = true;
      }
      SelectedColor = theme.PrimaryDark.Color;
  }

  private bool _isDarkTheme;
  /// <summary>
  /// 是否黑色模板
  /// </summary>
  public bool IsDarkTheme
  {
      get => _isDarkTheme;
      set
      {
          _isDarkTheme = value;
          OnPropertyChanged();
          ApplyBase(_isDarkTheme);
      }
  }
  private readonly PaletteHelper _paletteHelper = new PaletteHelper();
  private Color? _selectedColor;
  /// <summary>
  /// 颜色选择器的当前颜色
  /// </summary>
  public Color? SelectedColor
  {
      get => _selectedColor;
      set
      {
          if (_selectedColor != value)
          {
              _selectedColor = value;
              OnPropertyChanged();
              if (value is Color color)
              {
                  ChangeHue(color);
              }
          }
      }
  }
  /// <summary>
  /// 修改主题
  /// </summary>
  /// <param name="isDark"></param>
  private void ApplyBase(bool isDark)
  {
      Theme theme = _paletteHelper.GetTheme();
      theme.SetBaseTheme(isDark ? BaseTheme.Dark : BaseTheme.Light);
      _paletteHelper.SetTheme(theme);
  }
  /// <summary>
  /// 修改主题颜色
  /// </summary>
  /// <param name="obj"></param>
  private void ChangeHue(object obj)
  {
      var hue = (Color)obj;
      SelectedColor = hue;
      //修改主要背景色
      ChangePrimaryColor(_paletteHelper, hue);
      //修改次要背景色
      ChangeSecondaryColor(_paletteHelper, hue);
  }
  /// <summary>
  /// 修改主要前景色
  /// </summary>
  /// <param name="color"></param>
  private void SetPrimaryForegroundToSingleColor(Color color)
  {
      Theme theme = _paletteHelper.GetTheme();
      theme.PrimaryLight = new ColorPair(theme.PrimaryLight.Color, color);
      theme.PrimaryMid = new ColorPair(theme.PrimaryMid.Color, color);
      theme.PrimaryDark = new ColorPair(theme.PrimaryDark.Color, color);
      _paletteHelper.SetTheme(theme);
  }
  /// <summary>
  /// 修改次要前景色
  /// </summary>
  /// <param name="color"></param>
  private void SetSecondaryForegroundToSingleColor(Color color)
  {
      Theme theme = _paletteHelper.GetTheme();
      theme.SecondaryLight = new ColorPair(theme.SecondaryLight.Color, color);
      theme.SecondaryMid = new ColorPair(theme.SecondaryMid.Color, color);
      theme.SecondaryDark = new ColorPair(theme.SecondaryDark.Color, color);
      _paletteHelper.SetTheme(theme);
  }
  /// <summary>
  /// 修改主要背景色
  /// </summary>
  /// <param name="paletteHelper"></param>
  /// <param name="color"></param>
  public void ChangePrimaryColor(PaletteHelper paletteHelper, Color color)
  {
      Theme theme = paletteHelper.GetTheme();
      theme.PrimaryLight = new ColorPair(color.Lighten());
      theme.PrimaryMid = new ColorPair(color);
      theme.PrimaryDark = new ColorPair(color.Darken());
      paletteHelper.SetTheme(theme);
  }
  /// <summary>
  /// 修改次要背景色
  /// </summary>
  /// <param name="paletteHelper"></param>
  /// <param name="color"></param>
  public void ChangeSecondaryColor(PaletteHelper paletteHelper, Color color)
  {
      Theme theme = paletteHelper.GetTheme();
      theme.SecondaryLight = new ColorPair(color.Lighten());//该颜色的亮色
      theme.SecondaryMid = new ColorPair(color);
      theme.SecondaryDark = new ColorPair(color.Darken());//该颜色的暗色
      paletteHelper.SetTheme(theme);
  }
  #endregion
}

颜色转换器:

[ValueConversion(typeof(Color), typeof(Brush))]
public class ColorToBrushConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is Color color)
        {
            return new SolidColorBrush(color);
        }
        return Binding.DoNothing;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is SolidColorBrush brush)
        {
            return brush.Color;
        }
        return default(Color);
    }
}

本次App.xaml引用如下(这是5.0以上版本的引用方法):

<Application x:Class="***.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:****"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <materialDesign:BundledTheme BaseTheme="Dark"
                                     ColorAdjustment="{materialDesign:ColorAdjustment}"
                                     PrimaryColor="Blue"
                                     SecondaryColor="Lime" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign3.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

最后注意一点:若想要控件颜色随选择变化，不能给控件设置固定颜色，并且得使用属性Mode="PrimaryDark"或者materialDesign:ColorZoneAssist.Mode。这两个属性有三个可变化的值皆是Primary***。控件能使用哪个用哪个。也可根据该UI的Demo查看详情，若需要按钮式的参考WPF 学习：如何照着MaterialDesign的Demo学习_materialdesigndemo-CSDN博客。

好记性不如烂笔头.........................................................................................................