refactor colorpicker

HandyControl/Controls/NumericUpDown.cs

@@ -46,7 +46,8 @@ namespace HandyControl.Controls
         {
             if (_textBox != null)
             {
-                _textBox.PreviewTextInput -= TextBoxValue_TextInput;
+                _textBox.TextChanged -= TextBox_TextChanged;
+                _textBox.PreviewKeyDown -= TextBox_PreviewKeyDown;
             }
 
             base.OnApplyTemplate();
@@ -55,13 +56,27 @@ namespace HandyControl.Controls
 
             if (_textBox != null)
             {
-                _textBox.PreviewTextInput += TextBoxValue_TextInput;
-                _textBox.Text = Value.ToString($"#0.{new string('0', DecimalPlaces)}");
+                _textBox.TextChanged += TextBox_TextChanged;
+                _textBox.PreviewKeyDown += TextBox_PreviewKeyDown;
+                _textBox.Text = CurrentText;
             }
         }
 
-        private void TextBoxValue_TextInput(object sender, TextCompositionEventArgs e)
+        private void TextBox_PreviewKeyDown(object sender, KeyEventArgs e)
         {
+            if (e.Key == Key.Up)
+            {
+                Value += Increment;
+            }
+            else if (e.Key == Key.Down)
+            {
+                Value -= Increment;
+            }
+        }
+
+        private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
+        {
+            if (string.IsNullOrEmpty(_textBox.Text)) return;
             if (double.TryParse(_textBox.Text, out var value))
             {
                 Value = value;
@@ -69,8 +84,7 @@ namespace HandyControl.Controls
 
             if (_textBox != null)
             {
-                _textBox.Text = Value.ToString($"#0.{new string('0', DecimalPlaces)}");
-                _textBox.Select(_textBox.Text.Length, 0);
+                _textBox.Text = CurrentText;
             }
         }
 
@@ -85,6 +99,10 @@ namespace HandyControl.Controls
             }
         }
 
+        private string CurrentText => DecimalPlaces.HasValue
+            ? Value.ToString($"#0.{new string('0', DecimalPlaces.Value)}")
+            : Value.ToString("#0");
+
         protected virtual void OnValueChanged(FunctionEventArgs<double> e) => RaiseEvent(e);
 
         /// <summary>
@@ -113,11 +131,14 @@ namespace HandyControl.Controls
         {
             var ctl = (NumericUpDown) d;
             var v = (double) e.NewValue;
+
             if (ctl._textBox != null)
             {
-                ctl._textBox.Text = v.ToString($"#0.{new string('0', ctl.DecimalPlaces)}");
-                ctl._textBox.Select(ctl._textBox.Text.Length, 0);
+                ctl._textBox.Text = ctl.DecimalPlaces.HasValue
+                    ? v.ToString($"#0.{new string('0', ctl.DecimalPlaces.Value)}")
+                    : v.ToString("#0");
             }
+
             ctl.OnValueChanged(new FunctionEventArgs<double>(ValueChangedEvent, ctl)
             {
                 Info = v
@@ -139,7 +160,14 @@ namespace HandyControl.Controls
             {
                 ctl.Value = maximum;
             }
-            return num > maximum ? maximum : basevalue;
+
+            var result = num > maximum ? maximum : num;
+            if (!ctl.DecimalPlaces.HasValue)
+            {
+                result = Math.Floor(result);
+            }
+
+            return result;
         }
 
         /// <summary>
@@ -234,14 +262,14 @@ namespace HandyControl.Controls
         ///     指示要显示的小数位数
         /// </summary>
         public static readonly DependencyProperty DecimalPlacesProperty = DependencyProperty.Register(
-            "DecimalPlaces", typeof(int), typeof(NumericUpDown), new PropertyMetadata(default(int)));
+            "DecimalPlaces", typeof(int?), typeof(NumericUpDown), new PropertyMetadata(default(int?)));
 
         /// <summary>
         ///     指示要显示的小数位数
         /// </summary>
-        public int DecimalPlaces
+        public int? DecimalPlaces
         {
-            get => (int) GetValue(DecimalPlacesProperty);
+            get => (int?) GetValue(DecimalPlacesProperty);
             set => SetValue(DecimalPlacesProperty, value);
         }
 

HandyControl/Controls/Picker/ColorPicker.cs

@@ -6,6 +6,7 @@ using System.Windows.Controls;
 using System.Windows.Input;
 using System.Windows.Media;
 using HandyControl.Data;
+using HandyControl.Interactivity;
 using HandyControl.Tools.Extension;
 
 // ReSharper disable once CheckNamespace
@@ -14,8 +15,43 @@ namespace HandyControl.Controls
     /// <summary>
     ///     颜色拾取器
     /// </summary>
-    public partial class ColorPicker
+    [TemplatePart(Name = ElementBorderColor, Type = typeof(Border))]
+    [TemplatePart(Name = ElementBorderPicker, Type = typeof(Border))]
+    [TemplatePart(Name = ElementBorderDrag, Type = typeof(Border))]
+    [TemplatePart(Name = ElementPanelColor, Type = typeof(Panel))]
+    [TemplatePart(Name = ElementSliderColor, Type = typeof(Panel))]
+    [TemplatePart(Name = ElementSliderOpacity, Type = typeof(Panel))]
+    [TemplatePart(Name = ElementPanelRgb, Type = typeof(Panel))]
+    public class ColorPicker : Control
     {
+        #region Constants
+
+        private const string ElementBorderColor = "PART_BorderColor";
+        private const string ElementBorderPicker = "PART_BorderPicker";
+        private const string ElementBorderDrag = "PART_BorderDrag";
+        private const string ElementPanelColor = "PART_PanelColor";
+        private const string ElementSliderColor = "PART_SliderColor";
+        private const string ElementSliderOpacity = "PART_SliderOpacity";
+        private const string ElementPanelRgb = "PART_PanelRgb";
+
+        #endregion Constants
+
+        #region Data
+
+        private Panel _panelRgb;
+
+        private Border _borderColor;
+
+        private Border _borderPicker;
+
+        private Border _borderDrag;
+
+        private Panel _panelColor;
+
+        private Slider _sliderColor;
+
+        private Slider _sliderOpacity;
+
         /// <summary>
         ///     当前显示的颜色类型
         /// </summary>
@@ -127,29 +163,24 @@ namespace HandyControl.Controls
             Color.FromRgb(255, 255, 0)
         };
 
-        internal static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.Register(
-            "CornerRadius", typeof(CornerRadius), typeof(ColorPicker), new PropertyMetadata(new CornerRadius(2)));
+        #endregion Data
 
-        internal CornerRadius CornerRadius
-        {
-            get => (CornerRadius)GetValue(CornerRadiusProperty);
-            set => SetValue(CornerRadiusProperty, value);
-        }
+        #region Public Events
 
         /// <summary>
         ///     颜色改变事件
         /// </summary>
-        public static readonly RoutedEvent ColorSelectedEvent =
-            EventManager.RegisterRoutedEvent("ValueChanged", RoutingStrategy.Bubble,
+        public static readonly RoutedEvent SelectedColorChangedEvent =
+            EventManager.RegisterRoutedEvent("SelectedColorChanged", RoutingStrategy.Bubble,
                 typeof(EventHandler<FunctionEventArgs<Color>>), typeof(ColorPicker));
 
         /// <summary>
         ///     颜色改变事件
         /// </summary>
-        public event EventHandler<FunctionEventArgs<Color>> ColorSelected
+        public event EventHandler<FunctionEventArgs<Color>> SelectedColorChanged
         {
-            add => AddHandler(ColorSelectedEvent, value);
-            remove => RemoveHandler(ColorSelectedEvent, value);
+            add => AddHandler(SelectedColorChangedEvent, value);
+            remove => RemoveHandler(SelectedColorChangedEvent, value);
         }
 
         /// <summary>
@@ -168,6 +199,46 @@ namespace HandyControl.Controls
             remove => RemoveHandler(CanceledEvent, value);
         }
 
+        #endregion Public Events
+
+        #region Properties
+
+        internal static readonly DependencyProperty ChannelAProperty = DependencyProperty.Register(
+            "ChannelA", typeof(int), typeof(ColorPicker), new PropertyMetadata(255));
+
+        internal int ChannelA
+        {
+            get => (int)GetValue(ChannelAProperty);
+            set => SetValue(ChannelAProperty, value);
+        }
+
+        internal static readonly DependencyProperty ChannelRProperty = DependencyProperty.Register(
+            "ChannelR", typeof(int), typeof(ColorPicker), new PropertyMetadata(255));
+
+        internal int ChannelR
+        {
+            get => (int)GetValue(ChannelRProperty);
+            set => SetValue(ChannelRProperty, value);
+        }
+
+        internal static readonly DependencyProperty ChannelGProperty = DependencyProperty.Register(
+            "ChannelG", typeof(int), typeof(ColorPicker), new PropertyMetadata(255));
+
+        internal int ChannelG
+        {
+            get => (int)GetValue(ChannelGProperty);
+            set => SetValue(ChannelGProperty, value);
+        }
+
+        internal static readonly DependencyProperty ChannelBProperty = DependencyProperty.Register(
+            "ChannelB", typeof(int), typeof(ColorPicker), new PropertyMetadata(255));
+
+        internal int ChannelB
+        {
+            get => (int)GetValue(ChannelBProperty);
+            set => SetValue(ChannelBProperty, value);
+        }
+
         public static readonly DependencyProperty SelectedBrushProperty = DependencyProperty.Register(
             "SelectedBrush", typeof(SolidColorBrush), typeof(ColorPicker), new PropertyMetadata(Brushes.White,
                 (o, args) =>
@@ -175,15 +246,13 @@ namespace HandyControl.Controls
                     var ctl = (ColorPicker)o;
                     var v = (SolidColorBrush)args.NewValue;
 
-                    if (ctl.ChannelR == null) return;
-
                     if (ctl.IsNeedUpdateInfo)
                     {
                         ctl.IsNeedUpdateInfo = false;
-                        ctl.ChannelR.Value = v.Color.R;
-                        ctl.ChannelG.Value = v.Color.G;
-                        ctl.ChannelB.Value = v.Color.B;
-                        ctl.SliderOpacity.Value = v.Color.A;
+                        ctl.ChannelR = v.Color.R;
+                        ctl.ChannelG = v.Color.G;
+                        ctl.ChannelB = v.Color.B;
+                        ctl.ChannelA = v.Color.A;
                         ctl.IsNeedUpdateInfo = true;
                     }
                     ctl.UpdateStatus(v.Color);
@@ -199,36 +268,38 @@ namespace HandyControl.Controls
             set => SetValue(SelectedBrushProperty, value);
         }
 
-        private static readonly DependencyProperty SelectedBrushWithoutOpacityProperty = DependencyProperty.Register(
+        internal static readonly DependencyProperty SelectedBrushWithoutOpacityProperty = DependencyProperty.Register(
             "SelectedBrushWithoutOpacity", typeof(SolidColorBrush), typeof(ColorPicker), new PropertyMetadata(Brushes.White));
 
-        private SolidColorBrush SelectedBrushWithoutOpacity
+        internal SolidColorBrush SelectedBrushWithoutOpacity
         {
             get => (SolidColorBrush)GetValue(SelectedBrushWithoutOpacityProperty);
             set => SetValue(SelectedBrushWithoutOpacityProperty, value);
         }
 
-        private static readonly DependencyProperty BackColorProperty = DependencyProperty.Register(
+        internal static readonly DependencyProperty BackColorProperty = DependencyProperty.Register(
             "BackColor", typeof(SolidColorBrush), typeof(ColorPicker), new PropertyMetadata(Brushes.Red));
 
-        private SolidColorBrush BackColor
+        internal SolidColorBrush BackColor
         {
             get => (SolidColorBrush)GetValue(BackColorProperty);
             set => SetValue(BackColorProperty, value);
         }
 
-        private static readonly DependencyProperty ShowListProperty = DependencyProperty.Register(
+        internal static readonly DependencyProperty ShowListProperty = DependencyProperty.Register(
             "ShowList", typeof(List<bool>), typeof(ColorPicker), new PropertyMetadata(new List<bool>
             {
                 true, false, false
             }));
 
-        private List<bool> ShowList
+        internal List<bool> ShowList
         {
             get => (List<bool>)GetValue(ShowListProperty);
             set => SetValue(ShowListProperty, value);
         }
 
+        #endregion Properties
+
         /// <summary>
         ///     当前显示的颜色类型
         /// </summary>
@@ -262,9 +333,9 @@ namespace HandyControl.Controls
 
         public ColorPicker()
         {
-            InitializeComponent();
-
-            UpdateStatus(SelectedBrush.Color);
+            CommandBindings.Add(new CommandBinding(ControlCommands.Confirm, ButtonConfirm_OnClick));
+            CommandBindings.Add(new CommandBinding(ControlCommands.Switch, ButtonSwitch_OnClick));
+            CommandBindings.Add(new CommandBinding(ControlCommands.Cancel, ButtonCancel_OnClick));
 
             Loaded += (s, e) =>
             {
@@ -276,14 +347,62 @@ namespace HandyControl.Controls
             };
         }
 
+        public override void OnApplyTemplate()
+        {
+            if (_sliderColor != null)
+            {
+                _sliderColor.ValueChanged -= SliderColor_OnValueChanged;
+            }
+
+            if (_sliderOpacity != null)
+            {
+                _sliderOpacity.ValueChanged -= SliderOpacity_OnValueChanged;
+            }
+
+            _panelRgb?.RemoveHandler(NumericUpDown.ValueChangedEvent, new EventHandler<FunctionEventArgs<double>>(NumericUpDownRgb_OnValueChanged));
+
+            base.OnApplyTemplate();
+
+            _borderColor = GetTemplateChild(ElementBorderColor) as Border;
+            _borderDrag = GetTemplateChild(ElementBorderDrag) as Border;
+            _borderPicker = GetTemplateChild(ElementBorderPicker) as Border;
+            _panelColor = GetTemplateChild(ElementPanelColor) as Panel;
+            _sliderColor = GetTemplateChild(ElementSliderColor) as Slider;
+            _sliderOpacity = GetTemplateChild(ElementSliderOpacity) as Slider;
+            _panelRgb = GetTemplateChild(ElementPanelRgb) as Panel;
+
+            if (_sliderColor != null)
+            {
+                _sliderColor.ValueChanged += SliderColor_OnValueChanged;
+            }
+
+            if (_sliderOpacity != null)
+            {
+                _sliderOpacity.ValueChanged += SliderOpacity_OnValueChanged;
+            }
+
+            if (_borderDrag != null)
+            {
+                var behavior = new MouseDragElementBehavior();
+                behavior.DragFinished += MouseDragElementBehavior_OnDragFinished;
+                behavior.DragBegun += MouseDragElementBehavior_OnDragging;
+                behavior.Dragging += MouseDragElementBehavior_OnDragging;
+                var collection = Interaction.GetBehaviors(_borderDrag);
+                collection.Add(behavior);
+            }
+
+            _panelRgb?.AddHandler(NumericUpDown.ValueChangedEvent, new EventHandler<FunctionEventArgs<double>>(NumericUpDownRgb_OnValueChanged));
+        }
+
         /// <summary>
         ///     初始化
         /// </summary>
         private void Init()
         {
+            UpdateStatus(SelectedBrush.Color);
             foreach (var item in _colorPresetList)
             {
-                PanelColor.Children.Add(CreateColorButton(item));
+                _panelColor.Children.Add(CreateColorButton(item));
             }
         }
 
@@ -317,7 +436,7 @@ namespace HandyControl.Controls
             button.Click += (s, e) =>
             {
                 SelectedBrush = brush;
-                SliderOpacity.Value = SliderOpacity.Maximum;
+                ChannelA = byte.MaxValue;
             };
 
             return button;
@@ -349,9 +468,9 @@ namespace HandyControl.Controls
                 {
                     BackColor = Brushes.Red;
                     IsNeedUpdateInfo = false;
-                    if (!SliderColor.IsMouseOver && !SliderOpacity.IsMouseOver)
+                    if (!_sliderColor.IsMouseOver && !_sliderOpacity.IsMouseOver)
                     {
-                        SliderColor.Value = 0;
+                        _sliderColor.Value = 0;
                     }
                     IsNeedUpdateInfo = true;
                 }
@@ -365,9 +484,9 @@ namespace HandyControl.Controls
                 {
                     BackColor = Brushes.Red;
                     IsNeedUpdateInfo = false;
-                    if (!SliderColor.IsMouseOver && !SliderOpacity.IsMouseOver)
+                    if (!_sliderColor.IsMouseOver && !_sliderOpacity.IsMouseOver)
                     {
-                        SliderColor.Value = 0;
+                        _sliderColor.Value = 0;
                     }
                     IsNeedUpdateInfo = true;
                 }
@@ -415,20 +534,20 @@ namespace HandyControl.Controls
                     var scale = sub / 255.0;
                     var scaleTotal = cIndex - direc + scale;
                     IsNeedUpdateInfo = false;
-                    if (!SliderColor.IsMouseOver && !SliderOpacity.IsMouseOver)
+                    if (!_sliderColor.IsMouseOver && !_sliderOpacity.IsMouseOver)
                     {
-                        SliderColor.Value = scaleTotal;
+                        _sliderColor.Value = scaleTotal;
                     }
                     IsNeedUpdateInfo = true;
                 }
             }
 
-            var matrix = BorderPicker.RenderTransform.Value;
+            var matrix = _borderPicker.RenderTransform.Value;
             var x = max == 0 ? 0 : (1 - min / (double)max) * ColorPanelWidth;
             var y = (1 - max / 255.0) * ColorPanelHeight;
             if (_isNeedUpdatePicker)
             {
-                BorderPicker.RenderTransform = new MatrixTransform(matrix.M11, matrix.M12, matrix.M21, matrix.M22, x, y);
+                _borderPicker.RenderTransform = new MatrixTransform(matrix.M11, matrix.M12, matrix.M21, matrix.M22, x, y);
             }
         }
 
@@ -441,7 +560,7 @@ namespace HandyControl.Controls
 
             var color = range.GetColor(sub);
             BackColor = new SolidColorBrush(color);
-            var matrix = BorderPicker.RenderTransform.Value;
+            var matrix = _borderPicker.RenderTransform.Value;
             _isNeedUpdatePicker = false;
             UpdateColorWhenDrag(new Point(matrix.OffsetX, matrix.OffsetY));
             _isNeedUpdatePicker = true;
@@ -451,12 +570,12 @@ namespace HandyControl.Controls
         {
             if (!_isLoaded || !IsNeedUpdateInfo) return;
             var color = SelectedBrush.Color;
-            SelectedBrush = new SolidColorBrush(Color.FromArgb((byte)SliderOpacity.Value, color.R, color.G, color.B));
+            SelectedBrush = new SolidColorBrush(Color.FromArgb((byte)_sliderOpacity.Value, color.R, color.G, color.B));
         }
 
         private void MouseDragElementBehavior_OnDragging(object sender, MouseEventArgs e)
         {
-            var p = e.GetPosition(BorderColor);
+            var p = e.GetPosition(_borderColor);
             _isOnDragging = true;
             UpdateColorWhenDrag(p);
             _isOnDragging = false;
@@ -467,7 +586,7 @@ namespace HandyControl.Controls
         /// </summary>
         private void UpdateColorWhenDrag(Point p)
         {
-            var matrix = BorderPicker.RenderTransform.Value;
+            var matrix = _borderPicker.RenderTransform.Value;
 
             if (p.X < 0)
             {
@@ -489,7 +608,7 @@ namespace HandyControl.Controls
 
             if (_isNeedUpdatePicker)
             {
-                BorderPicker.RenderTransform = new MatrixTransform(matrix.M11, matrix.M12, matrix.M21, matrix.M22, p.X, p.Y);
+                _borderPicker.RenderTransform = new MatrixTransform(matrix.M11, matrix.M12, matrix.M21, matrix.M22, p.X, p.Y);
             }
 
             var scaleX = p.X / ColorPanelWidth;
@@ -502,15 +621,16 @@ namespace HandyControl.Controls
             var subG = colorYLeft.G - colorYRight.G;
             var subB = colorYLeft.B - colorYRight.B;
 
-            var color = Color.FromArgb((byte)SliderOpacity.Value, (byte)(colorYLeft.R - subR * scaleX),
+            var color = Color.FromArgb((byte)_sliderOpacity.Value, (byte)(colorYLeft.R - subR * scaleX),
                 (byte)(colorYLeft.G - subG * scaleX), (byte)(colorYLeft.B - subB * scaleX));
             SelectedBrush = new SolidColorBrush(color);
         }
 
-        private void MouseDragElementBehavior_OnDragFinished(object sender, MouseEventArgs e) => BorderDrag.RenderTransform = new MatrixTransform();
+        private void MouseDragElementBehavior_OnDragFinished(object sender, MouseEventArgs e) => _borderDrag.RenderTransform = new MatrixTransform();
 
         private void ButtonSwitch_OnClick(object sender, RoutedEventArgs e) => ColorType++;
 
+        // ReSharper disable once UnusedParameter.Local
         private void NumericUpDownRgb_OnValueChanged(object sender, FunctionEventArgs<double> e)
         {
             if (!_isLoaded || !IsNeedUpdateInfo) return;
@@ -542,8 +662,8 @@ namespace HandyControl.Controls
             }
         }
 
-        private void ButtonSure_OnClick(object sender, RoutedEventArgs e)
-            => RaiseEvent(new FunctionEventArgs<Color>(ColorSelectedEvent, this)
+        private void ButtonConfirm_OnClick(object sender, RoutedEventArgs e)
+            => RaiseEvent(new FunctionEventArgs<Color>(SelectedColorChangedEvent, this)
             {
                 Info = SelectedBrush.Color
             });

HandyControl/Controls/Picker/ColorPicker.xaml

@@ -1,108 +0,0 @@
-<UserControl x:Class="HandyControl.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:interactivity="clr-namespace:HandyControl.Interactivity"
-             xmlns:controls="clr-namespace:HandyControl.Controls"
-             mc:Ignorable="d" 
-             Name="UserControlMain"
-             Width="230"
-             xmlns:langs="clr-namespace:HandyControl.Properties.Langs"
-             UseLayoutRounding="True">
-    <Grid>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="122"/>
-            <RowDefinition Height="110"/>
-            <RowDefinition Height="62"/>
-            <RowDefinition Height="62"/>
-        </Grid.RowDefinitions>
-        <Border BorderThickness="1" BorderBrush="{StaticResource BorderBrush}" Grid.RowSpan="4" Background="White" CornerRadius="{Binding CornerRadius,ElementName=UserControlMain}"/>
-        <Grid Margin="1" Grid.Row="0" Name="GridColor">
-            <Border Background="{Binding BackColor,ElementName=UserControlMain}"/>
-            <Border>
-                <Border.Background>
-                    <LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5">
-                        <GradientStop Color="White" Offset="1"/>
-                        <GradientStop Color="Transparent"/>
-                    </LinearGradientBrush>
-                </Border.Background>
-            </Border>
-            <Border>
-                <Border.Background>
-                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
-                        <GradientStop Color="Black" Offset="1"/>
-                        <GradientStop Color="#aa000000" Offset=".6"/>
-                        <GradientStop Color="#22000000" Offset=".2"/>
-                        <GradientStop Color="Transparent"/>
-                    </LinearGradientBrush>
-                </Border.Background>
-            </Border>
-        </Grid>
-        <Border Name="BorderColor" Grid.Row="0" CornerRadius="2,2,0,0" ClipToBounds="True">
-            <Canvas Margin="-6">
-                <Border Name="BorderPicker" Background="Transparent" Height="12" CornerRadius="6" Width="12" BorderThickness="1" BorderBrush="White">
-                    <Border.Effect>
-                        <DropShadowEffect ShadowDepth="0" Opacity=".4"/>
-                    </Border.Effect>
-                </Border>
-            </Canvas>
-        </Border>
-        <Border Grid.Row="0" Background="Transparent" Name="BorderDrag">
-            <interactivity:Interaction.Behaviors>
-                <interactivity:MouseDragElementBehavior DragFinished="MouseDragElementBehavior_OnDragFinished" DragBegun="MouseDragElementBehavior_OnDragging" Dragging="MouseDragElementBehavior_OnDragging"/>
-            </interactivity:Interaction.Behaviors>
-        </Border>
-        <Grid Margin="16,16,10,0" Grid.Row="1">
-            <Grid.RowDefinitions>
-                <RowDefinition Height="Auto"/>
-                <RowDefinition/>
-            </Grid.RowDefinitions>
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="Auto"/>
-                <ColumnDefinition/>
-                <ColumnDefinition Width="28"/>
-            </Grid.ColumnDefinitions>
-            <Border Width="60" Height="32" CornerRadius="2" Background="{StaticResource ColorPickerOpacityBrush}" BorderBrush="{StaticResource BorderBrush}" BorderThickness="1"/>
-            <Border Grid.Row="0" Grid.Column="0" Width="60" Height="32" CornerRadius="2" Background="{Binding SelectedBrush,ElementName=UserControlMain}" BorderBrush="{StaticResource BorderBrush}" BorderThickness="1"/>
-            <Slider Name="SliderColor" LargeChange="0.01" SmallChange="0.01" Grid.ColumnSpan="2" ValueChanged="SliderColor_OnValueChanged" Value="6" Maximum="6" Background="{StaticResource ColorPickerRainbowBrush}" Margin="10,1,0,0" Grid.Row="0" Grid.Column="1" VerticalAlignment="Top" Style="{StaticResource ColorPickerSlider}" IsMoveToPointEnabled="True"/>
-            <Slider Grid.ColumnSpan="2" IsSnapToTickEnabled="True" Name="SliderOpacity" ValueChanged="SliderOpacity_OnValueChanged" Value="255" Maximum="255" SmallChange="1" Foreground="{Binding SelectedBrushWithoutOpacity,ElementName=UserControlMain}" Background="{StaticResource ColorPickerOpacityBrush}" Margin="10,0,0,0" Grid.Row="0" Grid.Column="1" VerticalAlignment="Bottom" Style="{StaticResource ColorPickerSlider}" IsMoveToPointEnabled="True"/>
-            <StackPanel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,14,0,0" VerticalAlignment="Top" Visibility="{Binding ShowList[0],ElementName=UserControlMain,Converter={StaticResource Boolean2VisibilityConverter}}">
-                <TextBox Padding="0" HorizontalContentAlignment="Center" Width="176" Text="{Binding SelectedBrush,ElementName=UserControlMain,Mode=TwoWay,Converter={StaticResource Color2HexStrConverter},UpdateSourceTrigger=LostFocus}" FontSize="10" MaxLength="10" Height="24" />
-                <TextBlock Foreground="{StaticResource ThirdlyTextBrush}" Margin="0,6,0,0" FontSize="10" Text="HEX" HorizontalAlignment="Center"/>
-            </StackPanel>
-            <UniformGrid controls:NumericUpDown.ValueChanged="NumericUpDownRgb_OnValueChanged" Visibility="{Binding ShowList[1],ElementName=UserControlMain,Converter={StaticResource Boolean2VisibilityConverter}}" Rows="1" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="-2,14,-2,0" VerticalAlignment="Top">
-                <StackPanel Margin="2,0">
-                    <controls:NumericUpDown HorizontalContentAlignment="Center" Padding="0" Tag="R" x:Name="ChannelR" Value="255" ShowUpDownButton="False" Maximum="255" Minimum="0" FontSize="10" Height="24" />
-                    <TextBlock Foreground="{StaticResource ThirdlyTextBrush}" Margin="0,6,0,0" FontSize="10" Text="R" HorizontalAlignment="Center"/>
-                </StackPanel>
-                <StackPanel Margin="2,0">
-                    <controls:NumericUpDown HorizontalContentAlignment="Center" Padding="0" Tag="G" x:Name="ChannelG" Value="255" ShowUpDownButton="False" Maximum="255" Minimum="0" FontSize="10" Height="24" />
-                    <TextBlock Foreground="{StaticResource ThirdlyTextBrush}" Margin="0,6,0,0" FontSize="10" Text="G" HorizontalAlignment="Center"/>
-                </StackPanel>
-                <StackPanel Margin="2,0">
-                    <controls:NumericUpDown HorizontalContentAlignment="Center" Padding="0" Tag="B" x:Name="ChannelB" Value="255" ShowUpDownButton="False" Maximum="255" Minimum="0" FontSize="10" Height="24" />
-                    <TextBlock Foreground="{StaticResource ThirdlyTextBrush}" Margin="0,6,0,0" FontSize="10" Text="B" HorizontalAlignment="Center"/>
-                </StackPanel>
-                <StackPanel Margin="2,0">
-                    <controls:NumericUpDown HorizontalContentAlignment="Center" Padding="0" Value="{Binding Value,ElementName=SliderOpacity,Mode=TwoWay}" ShowUpDownButton="False" Maximum="255" Minimum="0" FontSize="10" Height="24" />
-                    <TextBlock Foreground="{StaticResource ThirdlyTextBrush}" Margin="0,6,0,0" FontSize="10" Text="A" HorizontalAlignment="Center"/>
-                </StackPanel>
-            </UniformGrid>
-            <Button Click="ButtonSwitch_OnClick" Padding="6" FontSize="8" BorderThickness="0" Foreground="#323534" HorizontalAlignment="Right" Height="24" Width="20" Grid.Column="2" Grid.Row="1">
-                <Button.Content>
-                    <Path Fill="#323534" Style="{StaticResource UpDownPathStyle}"/>
-                </Button.Content>
-            </Button>
-        </Grid>
-        <Border Grid.Row="2" BorderThickness="0,1,0,0" BorderBrush="{StaticResource BorderBrush}">
-            <WrapPanel Name="PanelColor" Margin="12,12,0,12" HorizontalAlignment="Center"/>
-        </Border>
-        <Border Grid.Row="3" BorderThickness="0,1,0,0" BorderBrush="{StaticResource BorderBrush}">
-            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
-                <Button Click="ButtonCancel_OnClick" Content="{x:Static langs:Lang.Cancel}" Width="80" Margin="0,0,16,0"/>
-                <Button Click="ButtonSure_OnClick" Content="{x:Static langs:Lang.Confirm}" Width="80" Style="{StaticResource ButtonPrimary}"/>
-            </StackPanel>
-        </Border>
-    </Grid>
-</UserControl>

HandyControl/HandyControl.csproj

@@ -49,11 +49,9 @@
     <Compile Include="Controls\Growl.cs" />
     <Compile Include="Controls\NumericUpDown.cs" />
     <Compile Include="Controls\Pagination.cs" />
-    <Compile Include="Controls\Picker\ColorPicker.xaml.cs">
-      <DependentUpon>ColorPicker.xaml</DependentUpon>
-    </Compile>
     <Compile Include="Controls\Attach\IconElement.cs" />
     <Compile Include="Controls\CompareSlider.cs" />
+    <Compile Include="Controls\Picker\ColorPicker.cs" />
     <Compile Include="Controls\ScrollViewer.cs" />
     <Compile Include="Controls\Loading\LoadingBase.cs" />
     <Compile Include="Controls\Loading\LoadingCircle.cs" />
@@ -146,10 +144,6 @@
     <Compile Include="Tools\VisualStates.cs" />
   </ItemGroup>
   <ItemGroup>
-    <Page Include="Controls\Picker\ColorPicker.xaml">
-      <SubType>Designer</SubType>
-      <Generator>MSBuild:Compile</Generator>
-    </Page>
     <Page Include="Themes\Basic\Basic.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

HandyControl/Interactivity/ControlCommands.cs

@@ -7,6 +7,11 @@ namespace HandyControl.Interactivity
     /// </summary>
     public static class ControlCommands
     {
+        /// <summary>
+        ///     切换
+        /// </summary>
+        public static RoutedCommand Switch { get; } = new RoutedCommand("Switch", typeof(ControlCommands));
+
         /// <summary>
         ///     右转
         /// </summary>

HandyControl/Themes/Styles/Button.xaml

@@ -45,11 +45,11 @@
                     <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                         <ContentControl HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                             <Path Fill="{TemplateBinding Foreground}" SnapsToDevicePixels="True" Stretch="Uniform" Data="{TemplateBinding controls:IconElement.Geometry}" RenderTransformOrigin="0.5,0.5">
-                                <!--<Path.RenderTransform>
+                                <Path.RenderTransform>
                                     <TransformGroup>
                                         <RotateTransform Angle="{Binding Path=(controls:IconElement.Angle),RelativeSource={RelativeSource TemplatedParent}}"/>
                                     </TransformGroup>
-                                </Path.RenderTransform>-->
+                                </Path.RenderTransform>
                             </Path>
                         </ContentControl>
                     </Border>

HandyControl/Themes/Styles/ColorPicker.xaml

@@ -1,4 +1,116 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:langs="clr-namespace:HandyControl.Properties.Langs"
+                    xmlns:controls="clr-namespace:HandyControl.Controls"
+                    xmlns:interactivity="clr-namespace:HandyControl.Interactivity">
+
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="../Basic/Paths.xaml"/>
+        <ResourceDictionary Source="../Basic/Converters.xaml"/>
+        <ResourceDictionary Source="Slider.xaml"/>
+        <ResourceDictionary Source="Button.xaml"/>
+    </ResourceDictionary.MergedDictionaries>
+
+    <Style TargetType="controls:ColorPicker">
+        <Setter Property="Width" Value="230"/>
+        <Setter Property="UseLayoutRounding" Value="True"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:ColorPicker">
+                    <Grid>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="122"/>
+                            <RowDefinition Height="110"/>
+                            <RowDefinition Height="62"/>
+                            <RowDefinition Height="62"/>
+                        </Grid.RowDefinitions>
+                        <Border BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}" Grid.RowSpan="4" Background="White"/>
+                        <Grid Margin="1" Grid.Row="0">
+                            <Border Background="{TemplateBinding BackColor}"/>
+                            <Border>
+                                <Border.Background>
+                                    <LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5">
+                                        <GradientStop Color="White" Offset="1"/>
+                                        <GradientStop Color="Transparent"/>
+                                    </LinearGradientBrush>
+                                </Border.Background>
+                            </Border>
+                            <Border>
+                                <Border.Background>
+                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
+                                        <GradientStop Color="Black" Offset="1"/>
+                                        <GradientStop Color="#aa000000" Offset=".6"/>
+                                        <GradientStop Color="#22000000" Offset=".2"/>
+                                        <GradientStop Color="Transparent"/>
+                                    </LinearGradientBrush>
+                                </Border.Background>
+                            </Border>
+                        </Grid>
+                        <Border Name="PART_BorderColor" Grid.Row="0" CornerRadius="2,2,0,0" ClipToBounds="True">
+                            <Canvas Margin="-6">
+                                <Border Name="PART_BorderPicker" Background="Transparent" Height="12" CornerRadius="6" Width="12" BorderThickness="1" BorderBrush="White">
+                                    <Border.Effect>
+                                        <DropShadowEffect ShadowDepth="0" Opacity=".4"/>
+                                    </Border.Effect>
+                                </Border>
+                            </Canvas>
+                        </Border>
+                        <Border Grid.Row="0" Background="Transparent" Name="PART_BorderDrag"/>
+                        <Grid Margin="16,16,10,0" Grid.Row="1">
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto"/>
+                                <RowDefinition/>
+                            </Grid.RowDefinitions>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto"/>
+                                <ColumnDefinition/>
+                                <ColumnDefinition Width="28"/>
+                            </Grid.ColumnDefinitions>
+                            <Border Width="60" Height="32" CornerRadius="2" Background="{StaticResource ColorPickerOpacityBrush}" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1"/>
+                            <Border Grid.Row="0" Grid.Column="0" Width="60" Height="32" CornerRadius="2" Background="{TemplateBinding SelectedBrush}" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1"/>
+                            <Slider Name="PART_SliderColor" LargeChange="0.01" SmallChange="0.01" Grid.ColumnSpan="2" Value="6" Maximum="6" Background="{StaticResource ColorPickerRainbowBrush}" Margin="10,1,0,0" Grid.Row="0" Grid.Column="1" VerticalAlignment="Top" Style="{StaticResource ColorPickerSlider}" IsMoveToPointEnabled="True"/>
+                            <Slider Name="PART_SliderOpacity" Grid.ColumnSpan="2" IsSnapToTickEnabled="True" Value="{Binding ChannelA,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay}" Maximum="255" SmallChange="1" Foreground="{TemplateBinding SelectedBrushWithoutOpacity}" Background="{StaticResource ColorPickerOpacityBrush}" Margin="10,0,0,0" Grid.Row="0" Grid.Column="1" VerticalAlignment="Bottom" Style="{StaticResource ColorPickerSlider}" IsMoveToPointEnabled="True"/>
+                            <StackPanel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,14,0,0" VerticalAlignment="Top" Visibility="{Binding ShowList[0],RelativeSource={RelativeSource TemplatedParent},Converter={StaticResource Boolean2VisibilityConverter}}">
+                                <TextBox Padding="0" HorizontalContentAlignment="Center" Width="176" Text="{Binding SelectedBrush,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay,Converter={StaticResource Color2HexStrConverter},UpdateSourceTrigger=LostFocus}" FontSize="10" MaxLength="10" Height="24" />
+                                <TextBlock Foreground="{DynamicResource ThirdlyTextBrush}" Margin="0,6,0,0" FontSize="10" Text="HEX" HorizontalAlignment="Center"/>
+                            </StackPanel>
+                            <UniformGrid Name="PART_PanelRgb" Visibility="{Binding ShowList[1],RelativeSource={RelativeSource TemplatedParent},Converter={StaticResource Boolean2VisibilityConverter}}" Rows="1" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="-2,14,-2,0" VerticalAlignment="Top">
+                                <StackPanel Margin="2,0">
+                                    <controls:NumericUpDown HorizontalContentAlignment="Center" Padding="0" Tag="R" Value="{Binding ChannelR,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay}" ShowUpDownButton="False" Maximum="255" Minimum="0" FontSize="10" Height="24" />
+                                    <TextBlock Foreground="{DynamicResource ThirdlyTextBrush}" Margin="0,6,0,0" FontSize="10" Text="R" HorizontalAlignment="Center"/>
+                                </StackPanel>
+                                <StackPanel Margin="2,0">
+                                    <controls:NumericUpDown HorizontalContentAlignment="Center" Padding="0" Tag="G" Value="{Binding ChannelG,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay}" ShowUpDownButton="False" Maximum="255" Minimum="0" FontSize="10" Height="24" />
+                                    <TextBlock Foreground="{DynamicResource ThirdlyTextBrush}" Margin="0,6,0,0" FontSize="10" Text="G" HorizontalAlignment="Center"/>
+                                </StackPanel>
+                                <StackPanel Margin="2,0">
+                                    <controls:NumericUpDown HorizontalContentAlignment="Center" Padding="0" Tag="B" Value="{Binding ChannelB,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay}" ShowUpDownButton="False" Maximum="255" Minimum="0" FontSize="10" Height="24" />
+                                    <TextBlock Foreground="{DynamicResource ThirdlyTextBrush}" Margin="0,6,0,0" FontSize="10" Text="B" HorizontalAlignment="Center"/>
+                                </StackPanel>
+                                <StackPanel Margin="2,0">
+                                    <controls:NumericUpDown HorizontalContentAlignment="Center" Padding="0" Value="{Binding ChannelA,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" ShowUpDownButton="False" Maximum="255" Minimum="0" FontSize="10" Height="24" />
+                                    <TextBlock Foreground="{DynamicResource ThirdlyTextBrush}" Margin="0,6,0,0" FontSize="10" Text="A" HorizontalAlignment="Center"/>
+                                </StackPanel>
+                            </UniformGrid>
+                            <Button Command="interactivity:ControlCommands.Switch" Padding="6" FontSize="8" BorderThickness="0" Foreground="#323534" HorizontalAlignment="Right" Height="24" Width="20" Grid.Column="2" Grid.Row="1">
+                                <Button.Content>
+                                    <Path Fill="#323534" Style="{StaticResource UpDownPathStyle}"/>
+                                </Button.Content>
+                            </Button>
+                        </Grid>
+                        <Border Grid.Row="2" BorderThickness="0,1,0,0" BorderBrush="{StaticResource BorderBrush}">
+                            <WrapPanel Name="PART_PanelColor" Margin="12,12,0,12" HorizontalAlignment="Center"/>
+                        </Border>
+                        <Border Grid.Row="3" BorderThickness="0,1,0,0" BorderBrush="{StaticResource BorderBrush}">
+                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
+                                <Button Command="interactivity:ControlCommands.Cancel" Content="{x:Static langs:Lang.Cancel}" Width="80" Margin="0,0,16,0"/>
+                                <Button Command="interactivity:ControlCommands.Confirm" Content="{x:Static langs:Lang.Confirm}" Width="80" Style="{StaticResource ButtonPrimary}"/>
+                            </StackPanel>
+                        </Border>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
 </ResourceDictionary>