From f79da5aced22e46a867c94cd6130e0fc05d92566 Mon Sep 17 00:00:00 2001
From: brianlagunas_cp <XceedBoucherS@users.noreply.github.com>
Date: Wed, 16 Mar 2011 18:50:39 +0000
Subject: [PATCH] ColorCanvas: implemented hex color string editing and base
 styling

---
 .../ColorCanvas/Implementation/ColorCanvas.cs |  29 +-
 .../ColorCanvas/Themes/Generic.xaml           | 262 +++++++++++++-----
 2 files changed, 212 insertions(+), 79 deletions(-)

diff --git a/ExtendedWPFToolkitSolution/Src/WPFToolkit.Extended/ColorCanvas/Implementation/ColorCanvas.cs b/ExtendedWPFToolkitSolution/Src/WPFToolkit.Extended/ColorCanvas/Implementation/ColorCanvas.cs
index 2b922d02..dbc7d1ff 100644
--- a/ExtendedWPFToolkitSolution/Src/WPFToolkit.Extended/ColorCanvas/Implementation/ColorCanvas.cs
+++ b/ExtendedWPFToolkitSolution/Src/WPFToolkit.Extended/ColorCanvas/Implementation/ColorCanvas.cs
@@ -5,6 +5,7 @@ using System.Windows.Input;
 using System.Windows.Media;
 using Microsoft.Windows.Controls.Primitives;
 using Microsoft.Windows.Controls.Core.Utilities;
+using System.Windows.Data;
 
 namespace Microsoft.Windows.Controls
 {
@@ -237,19 +238,29 @@ namespace Microsoft.Windows.Controls
         #endregion //RGB
 
         #region HexadecimalString
-
-        public static readonly DependencyProperty HexadecimalStringProperty = DependencyProperty.Register("HexadecimalString", typeof(string), typeof(ColorCanvas), new PropertyMetadata("#FFFFFFFF", new PropertyChangedCallback(OnHexadecimalStringPropertyChanged)));
+        
+        public static readonly DependencyProperty HexadecimalStringProperty = DependencyProperty.Register("HexadecimalString", typeof(string), typeof(ColorCanvas), new UIPropertyMetadata("#FFFFFFFF", OnHexadecimalStringChanged));
         public string HexadecimalString
         {
             get { return (string)GetValue(HexadecimalStringProperty); }
             set { SetValue(HexadecimalStringProperty, value); }
         }
 
-        private static void OnHexadecimalStringPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        private static void OnHexadecimalStringChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
         {
-
+            ColorCanvas colorCanvas = o as ColorCanvas;
+            if (colorCanvas != null)
+                colorCanvas.OnHexadecimalStringChanged((string)e.OldValue, (string)e.NewValue);
         }
 
+        protected virtual void OnHexadecimalStringChanged(string oldValue, string newValue)
+        {
+            if (!SelectedColor.ToString().Equals(newValue))
+            {                
+                SetSelectedColorAndPositionSelector((Color)ColorConverter.ConvertFromString(newValue));
+            }
+        }       
+
         #endregion //HexadecimalString
 
         #endregion //Properties
@@ -283,6 +294,16 @@ namespace Microsoft.Windows.Controls
             SetSelectedColorAndPositionSelector(SelectedColor);
         }
 
+        protected override void OnPreviewKeyDown(KeyEventArgs e)
+        {
+            //hitting enter on textbox will update value of underlying source
+            if (e.Key == Key.Enter && e.OriginalSource is TextBox)
+            {
+                BindingExpression be = ((TextBox)e.OriginalSource).GetBindingExpression(TextBox.TextProperty);
+                be.UpdateSource();
+            }
+        }
+
         #endregion //Base Class Overrides
 
         #region Event Handlers
diff --git a/ExtendedWPFToolkitSolution/Src/WPFToolkit.Extended/ColorCanvas/Themes/Generic.xaml b/ExtendedWPFToolkitSolution/Src/WPFToolkit.Extended/ColorCanvas/Themes/Generic.xaml
index b7f71e71..858b0b52 100644
--- a/ExtendedWPFToolkitSolution/Src/WPFToolkit.Extended/ColorCanvas/Themes/Generic.xaml
+++ b/ExtendedWPFToolkitSolution/Src/WPFToolkit.Extended/ColorCanvas/Themes/Generic.xaml
@@ -12,7 +12,7 @@
         <GradientStop Color="#FF617584" Offset="1"/>
     </LinearGradientBrush>
 
-    <LinearGradientBrush x:Key="PopupBackgroundBrush" StartPoint="0,0" EndPoint="0,1">
+    <LinearGradientBrush x:Key="ColorCanvasBackgroundBrush" StartPoint="0,0" EndPoint="0,1">
         <LinearGradientBrush.GradientStops>
             <GradientStopCollection>
                 <GradientStop Offset="0" Color="#FFffffff"/>
@@ -41,13 +41,152 @@
         </DrawingBrush.Drawing>
     </DrawingBrush>
 
+    <SolidColorBrush x:Key="HorizontalSliderTrackNormalBackground" Color="#FFE7EAEA"/>
+
+    <LinearGradientBrush x:Key="HorizontalSliderTrackNormalBorder" EndPoint="0,1" StartPoint="0,0">
+        <GradientStop Color="#FFAEB1AF" Offset="0.1"/>
+        <GradientStop Color="White" Offset=".9"/>
+    </LinearGradientBrush>
+
+    <LinearGradientBrush x:Key="ThumbStroke" EndPoint="0.5,1" StartPoint="0.5,0">
+        <GradientStop Color="#FFA3AEB9" Offset="0"/>
+        <GradientStop Color="#FF8399A9" Offset="0.375"/>
+        <GradientStop Color="#FF718597" Offset="0.375"/>
+        <GradientStop Color="#FF617584" Offset="1"/>
+    </LinearGradientBrush>
+
+    <LinearGradientBrush x:Key="ThumbFill" StartPoint="0,0" EndPoint="0,1">
+        <LinearGradientBrush.GradientStops>
+            <GradientStopCollection>
+                <GradientStop Offset="0" Color="#FFfefefe"/>
+                <GradientStop Offset="0.5" Color="#FFeff1f2"/>
+                <GradientStop Offset="1" Color="#FFd0d6db"/>
+            </GradientStopCollection>
+        </LinearGradientBrush.GradientStops>
+    </LinearGradientBrush>
+
+    <SolidColorBrush x:Key="ThumbMouseOver" Color="#FFE5F2F6"/>
+
+    <Style x:Key="ColorCanvasTextBoxStyle" TargetType="TextBox" BasedOn="{StaticResource {x:Type TextBox}}">
+        <Setter Property="Background" Value="Transparent" />
+        <Style.Triggers>
+            <Trigger Property="IsFocused" Value="False">
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+
+    <Style x:Key="SliderRepeatButtonStyle"
+         TargetType="{x:Type RepeatButton}">
+        <Setter Property="OverridesDefaultStyle" Value="true"/>
+        <Setter Property="IsTabStop" Value="false"/>
+        <Setter Property="Focusable" Value="false"/>
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type RepeatButton}">
+                    <Border Background="{TemplateBinding Background}"/>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="CustomThumbForSlider" TargetType="{x:Type Thumb}">
+        <Setter Property="OverridesDefaultStyle" Value="True"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type Thumb}">
+                    <Rectangle x:Name="_thumb" Fill="{StaticResource ThumbFill}" Stroke="{StaticResource ThumbStroke}" Height="14" Width="8" RadiusX="1" RadiusY="1"/>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter TargetName="_thumb" Property="Rectangle.Fill" Value="{StaticResource ThumbMouseOver}" />
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="VerticalSlideThumbStyle" TargetType="{x:Type Thumb}">
+        <Setter Property="Focusable" Value="false"/>
+        <Setter Property="OverridesDefaultStyle" Value="true"/>
+        <Setter Property="Height" Value="12"/>
+        <Setter Property="Width" Value="11"/>
+        <Setter Property="Foreground" Value="Gray"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type Thumb}">
+                    <Canvas SnapsToDevicePixels="true">
+                        <Path x:Name="LeftArrow" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF000000" Data="F1 M 276.761,316L 262.619,307.835L 262.619,324.165L 276.761,316 Z " RenderTransformOrigin="0.5,0.5" Width="6" Height="8" >
+                            <Path.RenderTransform>
+                                <TransformGroup>
+                                    <ScaleTransform/>
+                                    <SkewTransform/>
+                                    <RotateTransform />
+                                    <TranslateTransform Y="6" X="-3"/>
+                                </TransformGroup>
+                            </Path.RenderTransform>
+                        </Path>
+                        <Path x:Name="RightArrow" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF000000" Data="F1 M 276.761,316L 262.619,307.835L 262.619,324.165L 276.761,316 Z " RenderTransformOrigin="0.5,0.5" Width="6" Height="8" >
+                            <Path.RenderTransform>
+                                <TransformGroup>
+                                    <ScaleTransform/>
+                                    <SkewTransform/>
+                                    <RotateTransform Angle="-180"/>
+                                    <TranslateTransform Y="6" X="8"/>
+                                </TransformGroup>
+                            </Path.RenderTransform>
+                        </Path>
+                    </Canvas>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="ColorCanvasSliderStyle" TargetType="{x:Type Slider}">
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type Slider}">
+                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
+                        <Grid>
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto"/>
+                                <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
+                                <RowDefinition Height="Auto"/>
+                            </Grid.RowDefinitions>
+                            <TickBar x:Name="TopTick" Fill="{TemplateBinding Foreground}" Height="4" Placement="Top" Grid.Row="0" Visibility="Collapsed"/>
+                            <TickBar x:Name="BottomTick" Fill="{TemplateBinding Foreground}" Height="4" Placement="Bottom" Grid.Row="2" Visibility="Collapsed"/>
+                            <Border x:Name="TrackBackground" BorderBrush="{StaticResource HorizontalSliderTrackNormalBorder}" BorderThickness="1" Background="{StaticResource HorizontalSliderTrackNormalBackground}" CornerRadius="1" Height="4.0" Margin="5,0" Grid.Row="1" VerticalAlignment="center">
+                                <Canvas Margin="-6,-1">
+                                    <Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Height="4.0" Stroke="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" StrokeThickness="1.0" Visibility="Hidden"/>
+                                </Canvas>
+                            </Border>
+                            <Track x:Name="PART_Track" Grid.Row="1">
+                                <Track.DecreaseRepeatButton>
+                                    <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle}"/>
+                                </Track.DecreaseRepeatButton>
+                                <Track.IncreaseRepeatButton>
+                                    <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle}"/>
+                                </Track.IncreaseRepeatButton>
+                                <Track.Thumb>
+                                    <Thumb x:Name="Thumb" Style="{StaticResource CustomThumbForSlider}"/>
+                                </Track.Thumb>
+                            </Track>
+                        </Grid>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
     <Style TargetType="{x:Type local:ColorCanvas}">
+        <Setter Property="Background" Value="{StaticResource ColorCanvasBackgroundBrush}" />
         <Setter Property="BorderBrush" Value="{StaticResource ColorPickerDarkBorderBrush}" />
         <Setter Property="BorderThickness" Value="1" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type local:ColorCanvas}">
-                    <Border BorderThickness="{TemplateBinding BorderThickness}" Background="White" BorderBrush="{TemplateBinding BorderBrush}" Padding="3">
+                    <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Padding="3">
                         <Grid Margin="2">
                             <Grid.RowDefinitions>
                                 <RowDefinition Height="Auto" />
@@ -60,7 +199,7 @@
                                 </Grid.ColumnDefinitions>
                                 <Grid.RowDefinitions>
                                     <RowDefinition Height="Auto" />
-                                    <RowDefinition Height="20"/>
+                                    <RowDefinition Height="Auto"/>
                                 </Grid.RowDefinitions>
 
                                 <Border BorderThickness="1" BorderBrush="DarkGray" ClipToBounds="True" Background="{StaticResource CheckerBrush}">
@@ -90,9 +229,16 @@
                                     </Canvas>
                                 </Border>
 
-                                <Border BorderThickness="0,1,0,0" Grid.Row="1">
-                                    <Grid Background="{StaticResource CheckerBrush}">
-                                        <Rectangle x:Name="SelectedColor" Fill="{Binding SelectedColor, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource ColorToSolidColorBrushConverter}}" />
+                                <Border Grid.Row="1" Margin="0,5,0,0">
+                                    <Grid>
+                                        <Grid.ColumnDefinitions>
+                                            <ColumnDefinition Width="*" />
+                                            <ColumnDefinition Width="*" />
+                                        </Grid.ColumnDefinitions>
+                                        <Border Background="{StaticResource CheckerBrush}" Height="22" Margin="2,0,2,0" BorderThickness="1" BorderBrush="#FFC9CACA">
+                                            <Rectangle x:Name="SelectedColor" Fill="{Binding SelectedColor, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource ColorToSolidColorBrushConverter}}" />
+                                        </Border>
+                                        <TextBox Grid.Column="1" Text="{Binding HexadecimalString, RelativeSource={RelativeSource TemplatedParent}}" Margin="2,0,2,0" VerticalAlignment="Center" Style="{StaticResource ColorCanvasTextBoxStyle}" />
                                     </Grid>
                                 </Border>
 
@@ -100,7 +246,7 @@
                                     <local:ColorSpectrumSlider x:Name="PART_SpectrumSlider" VerticalAlignment="Stretch" />
                                 </Border>
                             </Grid>
-                            
+
                             <Border MinWidth="180" Grid.Row="1" BorderThickness="1" ClipToBounds="True" Margin="0,10,0,0">
                                 <Grid>
                                     <Grid.RowDefinitions>
@@ -115,25 +261,42 @@
                                         <ColumnDefinition Width="Auto"/>
                                     </Grid.ColumnDefinitions>
 
-                                    <TextBlock Grid.Row="0" Grid.Column="0" Text="R" />
-                                    <Slider x:Name="PART_RSlider" Maximum="255" TickFrequency="1" Grid.Row="0" Grid.Column="1"
-                                                Value="{Binding R, RelativeSource={RelativeSource TemplatedParent}}"/>
-                                    <TextBox Grid.Row="0" Grid.Column="2" Text="{Binding Value, ElementName=PART_RSlider}" />
+                                    <TextBlock Grid.Row="0" Grid.Column="0" Text="R"
+                                               VerticalAlignment="Center"/>
+                                    <Slider x:Name="PART_RSlider" Maximum="255" TickFrequency="1" Grid.Row="0" Grid.Column="1" Margin="4,6,4,6"
+                                            Style="{StaticResource ColorCanvasSliderStyle}"
+                                            Value="{Binding R, RelativeSource={RelativeSource TemplatedParent}}"
+                                            VerticalAlignment="Center"/>
+                                    <TextBox Grid.Row="0" Grid.Column="2" Text="{Binding Value, ElementName=PART_RSlider}"
+                                             VerticalAlignment="Center"
+                                             Style="{StaticResource ColorCanvasTextBoxStyle}"/>
 
-                                    <TextBlock Grid.Row="1" Grid.Column="0" Text="G" />
-                                    <Slider x:Name="PART_GSlider" Maximum="255" TickFrequency="1" Grid.Row="1" Grid.Column="1"
-                                                Value="{Binding G, RelativeSource={RelativeSource TemplatedParent}}"/>
-                                    <TextBox Grid.Row="1" Grid.Column="2" Text="{Binding Value, ElementName=PART_GSlider}" />
+                                    <TextBlock Grid.Row="1" Grid.Column="0" Text="G"
+                                               VerticalAlignment="Center"/>
+                                    <Slider x:Name="PART_GSlider" Maximum="255" TickFrequency="1" Grid.Row="1" Grid.Column="1" Margin="4,6,4,6"
+                                            Style="{StaticResource ColorCanvasSliderStyle}"
+                                            Value="{Binding G, RelativeSource={RelativeSource TemplatedParent}}"
+                                            VerticalAlignment="Center"/>
+                                    <TextBox Grid.Row="1" Grid.Column="2" Text="{Binding Value, ElementName=PART_GSlider}"
+                                             VerticalAlignment="Center" Style="{StaticResource ColorCanvasTextBoxStyle}"/>
 
-                                    <TextBlock Grid.Row="2" Grid.Column="0" Text="B" />
-                                    <Slider x:Name="PART_BSlider" Maximum="255" TickFrequency="1" Grid.Row="2" Grid.Column="1"
-                                                Value="{Binding B, RelativeSource={RelativeSource TemplatedParent}}"/>
-                                    <TextBox Grid.Row="2" Grid.Column="3" Text="{Binding Value, ElementName=PART_BSlider}" />
+                                    <TextBlock Grid.Row="2" Grid.Column="0" Text="B"
+                                               VerticalAlignment="Center"/>
+                                    <Slider x:Name="PART_BSlider" Maximum="255" TickFrequency="1" Grid.Row="2" Grid.Column="1" Margin="4,6,4,6"
+                                            Style="{StaticResource ColorCanvasSliderStyle}"
+                                            Value="{Binding B, RelativeSource={RelativeSource TemplatedParent}}"
+                                            VerticalAlignment="Center"/>
+                                    <TextBox Grid.Row="2" Grid.Column="3" Text="{Binding Value, ElementName=PART_BSlider}"
+                                             VerticalAlignment="Center" Style="{StaticResource ColorCanvasTextBoxStyle}"/>
 
-                                    <TextBlock Grid.Row="3" Grid.Column="0" Text="A" />
-                                    <Slider x:Name="PART_OpacitySlider" Grid.Row="3" Grid.Column="1" Maximum="255"
-                                                Value="{Binding Path=A, RelativeSource={RelativeSource TemplatedParent}}"/>
-                                    <TextBox Grid.Row="3" Grid.Column="3" Text="{Binding Value, ElementName=PART_OpacitySlider}" />
+                                    <TextBlock Grid.Row="3" Grid.Column="0" Text="A"
+                                               VerticalAlignment="Center"/>
+                                    <Slider x:Name="PART_OpacitySlider" Grid.Row="3" Grid.Column="1" Maximum="255" Margin="4,6,4,6"
+                                            Style="{StaticResource ColorCanvasSliderStyle}"
+                                            Value="{Binding Path=A, RelativeSource={RelativeSource TemplatedParent}}"
+                                            VerticalAlignment="Center"/>
+                                    <TextBox Grid.Row="3" Grid.Column="3" Text="{Binding Value, ElementName=PART_OpacitySlider}"
+                                             VerticalAlignment="Center" Style="{StaticResource ColorCanvasTextBoxStyle}"/>
 
                                 </Grid>
                             </Border>
@@ -144,57 +307,6 @@
         </Setter>
     </Style>
 
-    <Style x:Key="SliderRepeatButtonStyle"
-         TargetType="{x:Type RepeatButton}">
-        <Setter Property="OverridesDefaultStyle" Value="true"/>
-        <Setter Property="IsTabStop" Value="false"/>
-        <Setter Property="Focusable" Value="false"/>
-        <Setter Property="Background" Value="Transparent"/>
-        <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="{x:Type RepeatButton}">
-                    <Border Background="{TemplateBinding Background}"/>
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
-    </Style>
-
-    <Style x:Key="VerticalSlideThumbStyle" TargetType="{x:Type Thumb}">
-        <Setter Property="Focusable" Value="false"/>
-        <Setter Property="OverridesDefaultStyle" Value="true"/>
-        <Setter Property="Height" Value="12"/>
-        <Setter Property="Width" Value="11"/>
-        <Setter Property="Foreground" Value="Gray"/>
-        <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="{x:Type Thumb}">
-                    <Canvas SnapsToDevicePixels="true">
-                        <Path x:Name="LeftArrow" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF000000" Data="F1 M 276.761,316L 262.619,307.835L 262.619,324.165L 276.761,316 Z " RenderTransformOrigin="0.5,0.5" Width="6" Height="8" >
-                            <Path.RenderTransform>
-                                <TransformGroup>
-                                    <ScaleTransform/>
-                                    <SkewTransform/>
-                                    <RotateTransform />
-                                    <TranslateTransform Y="6" X="-3"/>
-                                </TransformGroup>
-                            </Path.RenderTransform>
-                        </Path>
-                        <Path x:Name="RightArrow" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF000000" Data="F1 M 276.761,316L 262.619,307.835L 262.619,324.165L 276.761,316 Z " RenderTransformOrigin="0.5,0.5" Width="6" Height="8" >
-                            <Path.RenderTransform>
-                                <TransformGroup>
-                                    <ScaleTransform/>
-                                    <SkewTransform/>
-                                    <RotateTransform Angle="-180"/>
-                                    <TranslateTransform Y="6" X="8"/>
-                                </TransformGroup>
-                            </Path.RenderTransform>
-                        </Path>
-                    </Canvas>
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
-    </Style>
-
     <Style TargetType="{x:Type local:ColorSpectrumSlider}">
         <Setter Property="Orientation" Value="Vertical"/>
         <Setter Property="Background" Value="Transparent"/>
@@ -211,7 +323,7 @@
                 <ControlTemplate TargetType="{x:Type local:ColorSpectrumSlider}">
                     <Grid>
                         <Border x:Name="PART_TrackBackground" BorderBrush="DarkGray" BorderThickness="1" Width="15" Margin="0,8,0,0" >
-                                <Rectangle x:Name="PART_SpectrumDisplay" Stretch="Fill" VerticalAlignment="Stretch" />
+                            <Rectangle x:Name="PART_SpectrumDisplay" Stretch="Fill" VerticalAlignment="Stretch" />
                         </Border>
 
                         <Track Name="PART_Track">