Telerik组合控件开发一个好用一点的下拉ColorPicker

Telerik默认的ColorPicker不是很好用，里面没几个颜色，还得调用弹框用ColorEditor，我觉得可以把他们整合在一起放在一个下拉框里

因为用了Telerik控件库，所以就拿他的组合

 

首先是用TabControl把ColorSelector和ColorEditor放到一个面板里去

<UserControl x:Class="Ruifei.Controls.ColorPicker"
             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="clr-namespace:Ruifei.Controls"
             mc:Ignorable="d" 
                 xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             d:DesignHeight="400" d:DesignWidth="300">
    <Grid>

        <telerik:RadTabControl Grid.Row="1" VerticalAlignment="Top"
				displayMemberPath="Content" DropDowndisplayMode="Visible" ScrollMode="Viewport" BorderThickness="0">
            <telerik:RadTabItem DropDownContent="标准" Header="标准"  Height="30" Width="70" IsSelected="True">
                <telerik:RadTabItem.Content>
                    <StackPanel Height="365">
                        <telerik:RadMenuGroupItem Header="Opacity" Height="60">
                            <telerik:RadSlider x:Name="sliderOpacity" Margin="10" Maximum="1" LargeChange="0.1" Value="1" HandlesVisibility="Visible" ValueChanged="sliderOpacity_ValueChanged"/>
                        </telerik:RadMenuGroupItem>

                        <telerik:RadMenuGroupItem  BorderThickness="0" Height="305">
                            <telerik:RadColorSelector x:Name="ColorSelector" NoColorVisibility="Hidden" BorderThickness="0" Height="305"
                                                      SelectedColor="{Binding Path=Color,Mode=TwoWay, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:ColorPicker}}}">

                            </telerik:RadColorSelector>

                        </telerik:RadMenuGroupItem>

                    </StackPanel>
                </telerik:RadTabItem.Content>
            </telerik:RadTabItem>
            <telerik:RadTabItem DropDownContent="高级" Header="高级" Height="30" Width="70">
                <telerik:RadTabItem.Content>
                    <Grid>
                        <telerik:RadColorEditor Height="325"
                                                SelectedColor="{Binding Path=Color,Mode=TwoWay, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:ColorPicker}}}"
                                                x:Name="coloreditor" HistoryCapacity="8"  />
                    </Grid>
                </telerik:RadTabItem.Content>
            </telerik:RadTabItem>
        </telerik:RadTabControl>
    </Grid>
</UserControl>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Telerik.Windows.Controls;

namespace Ruifei.Controls
{
    /// <summary>
    /// ColorPicker.xaml 的交互逻辑
    /// </summary>
    public partial class ColorPicker : UserControl
    {
        public ColorPicker()
        {
            InitializeComponent();
        }

        public Color Color
        {
            get { return (Color)GetValue(ColorProperty); }
            set { SetValue(ColorProperty, value); }
        }

        public static readonly DependencyProperty ColorProperty =
            DependencyProperty.Register("Color", typeof(Color), typeof(ColorPicker), new PropertyMetadata(Colors.White, OnColorSourceChanged));

        public void SetinitColor(Color color)
        {
            //coloreditor.InitialColor = color;
            coloreditor.SetValue(RadColorEditor.InitialColorProperty, color);
        }

        public void SetSlider(Color color)
        {
            sliderOpacity.Value = Color.ScA;
        }


        private void sliderOpacity_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            var color = this.Color;
            color.ScA = (float)sliderOpacity.Value;
            this.Color = color;
        }

        private static void OnColorSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var control = (ColorPicker)d;
            if (control.LimitAlphaMax.HasValue && control.Color.A > control.LimitAlphaMax.Value)
            {
                var color = control.Color;
                color.A = control.LimitAlphaMax.Value;
                control.Color = color;
            }

            control.SetSlider(control.Color);
        }

        public byte? LimitAlphaMax { get; set; }
    }
}

 

接下来是把面板放到DropDownButton里面去

<UserControl x:Class="Ruifei.Controls.ColorDropPicker"
             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="clr-namespace:Ruifei.Controls"
             mc:Ignorable="d" 
                 xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" >
    <Grid>
        <telerik:RadDropDownButton DropDownopened="RadDropDownButton_DropDownopened" Background="White">
            <telerik:RadDropDownButton.DropDownContent>
                <local:ColorPicker Height="400" Width="300" x:Name="colorpicker"
                                   Color="{Binding Path=Color,Mode=TwoWay, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:ColorDropPicker}}}"
                                   ></local:ColorPicker>
            </telerik:RadDropDownButton.DropDownContent>
            <telerik:RadDropDownButton.Content>
                <Grid  Height="{Binding Path=Height, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:ColorDropPicker}}}"
                       Width="{Binding Path=Width, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:ColorDropPicker}}}"
                       >
                    <Rectangle
                        Height="{Binding Path=Height, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:ColorDropPicker}}}"
                       Width="{Binding Path=Width, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:ColorDropPicker}}}"
                        >
                        <Rectangle.Fill>
                            <SolidColorBrush Color="{Binding Path=Color,Mode=TwoWay, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:ColorDropPicker}}}"></SolidColorBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                </Grid>
            </telerik:RadDropDownButton.Content>
        </telerik:RadDropDownButton>
    </Grid>
</UserControl>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Ruifei.Controls
{
    public partial class ColorDropPicker : UserControl
    {
        public ColorDropPicker()
        {
            InitializeComponent();
        }

        public Color Color
        {
            get { return (Color)GetValue(ColorProperty); }
            set { SetValue(ColorProperty, value); }
        }

        public static readonly DependencyProperty ColorProperty =
            DependencyProperty.Register("Color", typeof(Color), typeof(ColorDropPicker), new PropertyMetadata(Colors.White));

        private void RadDropDownButton_DropDownopened(object sender, RoutedEventArgs e)
        {
            colorpicker.SetinitColor(this.Color);
        }
    }
}

 

给需要的带来一点方便

 

还可以把ColorPicker面板放到Dialog里去

后面我想把ColorSelector里面的颜色换成好用一点的常用颜色