An incomplete attempt at moving component gradient brush previews into adorners.bleroy-BrushEditor-Adorners

6 files changed, 175 insertions, 112 deletions

diff --git a/Xamarin.PropertyEditing.Windows/ColorComponentBox.cs b/Xamarin.PropertyEditing.Windows/ColorComponentBox.cs
deleted file mode 100644
index 67cd96d..0000000
--- a/Xamarin.PropertyEditing.Windows/ColorComponentBox.cs
+++ /dev/null
@@ -1,26 +0,0 @@
-using System.Windows;
-using System.Windows.Controls;
-using System.Windows.Media;
-
-namespace Xamarin.PropertyEditing.Windows
-{
-	internal class ColorComponentBox : TextBox
-	{
-		static ColorComponentBox()
-		{
-			DefaultStyleKeyProperty.OverrideMetadata (
-				typeof (ColorComponentBox),
-				new FrameworkPropertyMetadata (typeof (ColorComponentBox)));
-		}
-
-		public static readonly DependencyProperty GradientBrushProperty =
-			DependencyProperty.Register (
-				nameof(GradientBrush), typeof (Brush), typeof (ColorComponentBox),
-				new PropertyMetadata (new SolidColorBrush()));
-
-		public Brush GradientBrush {
-			get => (Brush)GetValue (GradientBrushProperty);
-			set => SetValue (GradientBrushProperty, value);
-		}
-	}
-}
diff --git a/Xamarin.PropertyEditing.Windows/GradientBrushPreview.cs b/Xamarin.PropertyEditing.Windows/GradientBrushPreview.cs
new file mode 100644
index 0000000..8689ccc
--- /dev/null
+++ b/Xamarin.PropertyEditing.Windows/GradientBrushPreview.cs
@@ -0,0 +1,123 @@
+using System;
+using System.Diagnostics;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Media;
+
+namespace Xamarin.PropertyEditing.Windows
+{
+	internal sealed class GradientBrushPreview : Adorner
+	{
+		public GradientBrushPreview (UIElement adornedElement) : base (adornedElement)
+		{
+			presenter = new ContentPresenter ();
+			AddVisualChild (presenter);
+			// Bind the `Content` property of the presenter to the `GradientBrush` attached property of the adorned element
+			var dataContextBinding = new Binding {
+				Path = new PropertyPath(GradientBrushProperty),
+				Source = adornedElement
+			};
+			// PresentationTraceSources.SetTraceLevel (dataContextBinding, PresentationTraceLevel.High);
+			BindingOperations.SetBinding (presenter, ContentPresenter.ContentProperty, dataContextBinding);
+		}
+
+		ContentPresenter presenter;
+
+		static readonly DependencyProperty AdornerProperty =
+			DependencyProperty.RegisterAttached ("Adorner", typeof (GradientBrushPreview), typeof (GradientBrushPreview),
+				new PropertyMetadata (null));
+
+		static GradientBrushPreview GetAdorner (DependencyObject obj)
+			=> (GradientBrushPreview)obj.GetValue (AdornerProperty);
+		static void SetAdorner (DependencyObject obj, GradientBrushPreview value)
+			=> obj.SetValue (AdornerProperty, value);
+
+		public static readonly DependencyProperty GradientBrushProperty =
+			DependencyProperty.RegisterAttached (
+				"GradientBrush", typeof (Brush), typeof (GradientBrushPreview),
+				new PropertyMetadata (null, OnBrushChanged));
+
+		public static Brush GetGradientBrush (DependencyObject obj)
+			=> (Brush)obj.GetValue (GradientBrushProperty);
+		public static void SetGradientBrush (DependencyObject obj, object value)
+			=> obj.SetValue (GradientBrushProperty, value);
+
+		private static void OnBrushChanged (DependencyObject d, DependencyPropertyChangedEventArgs e)
+		{
+			var adornedElement = d as FrameworkElement;
+			if (adornedElement == null) throw new InvalidOperationException ("Adorners can only be applied to FrameworkElement");
+			var adornerLayer = AdornerLayer.GetAdornerLayer (adornedElement);
+			if (adornerLayer == null) return;
+
+			GradientBrushPreview adorner = GetAdorner (adornedElement);
+
+			var brush = (Brush)e.NewValue;
+
+			if (brush != null && adorner == null) {
+				adorner = new GradientBrushPreview (adornedElement);
+
+				SetAdorner (adornedElement, adorner);
+				adornerLayer.Add (adorner);
+			}
+			else if (brush is null && adorner != null) {
+				adornerLayer.Remove (adorner);
+				SetAdorner (adornedElement, null);
+			}
+		}
+
+		public static readonly DependencyProperty TemplateProperty =
+			DependencyProperty.RegisterAttached (nameof (Template), typeof (DataTemplate), typeof (GradientBrushPreview),
+				new PropertyMetadata (null, OnTemplateChanged));
+
+		public static DataTemplate GetTemplate (DependencyObject obj) => (DataTemplate)obj.GetValue (TemplateProperty);
+		public static void SetTemplate (DependencyObject obj, DataTemplate value) => obj.SetValue (TemplateProperty, value);
+
+		public DataTemplate Template {
+			get => presenter.ContentTemplate;
+			set => presenter.ContentTemplate = value;
+		}
+
+		private static void OnTemplateChanged (DependencyObject d, DependencyPropertyChangedEventArgs e)
+		{
+			if (d is GradientBrushPreview adorner) adorner.Template = (DataTemplate)e.NewValue;
+		}
+
+		public static readonly DependencyProperty TemplateSelectorProperty =
+			DependencyProperty.RegisterAttached (nameof (TemplateSelector), typeof (DataTemplateSelector), typeof (GradientBrushPreview),
+				new PropertyMetadata (null, OnTemplateSelectorChanged));
+
+		public static DataTemplateSelector GetTemplateSelector (DependencyObject obj) => (DataTemplateSelector)obj.GetValue (TemplateSelectorProperty);
+		public static void SetTemplateSelector (DependencyObject obj, DataTemplateSelector value) => obj.SetValue (TemplateSelectorProperty, value);
+
+		public DataTemplateSelector TemplateSelector {
+			get => presenter.ContentTemplateSelector;
+			set => presenter.ContentTemplateSelector = value;
+		}
+
+		private static void OnTemplateSelectorChanged (DependencyObject d, DependencyPropertyChangedEventArgs e)
+		{
+			if (d is GradientBrushPreview adorner) adorner.TemplateSelector = (DataTemplateSelector)e.NewValue;
+		}
+
+		protected override int VisualChildrenCount => 1;
+		protected override Visual GetVisualChild (int index)
+		{
+			if (index != 0) throw new ArgumentOutOfRangeException (nameof (index));
+			return presenter;
+		}
+
+		protected override Size MeasureOverride (Size constraint)
+		{
+			presenter.Measure (constraint);
+			return presenter.DesiredSize;
+		}
+
+		protected override Size ArrangeOverride (Size finalSize)
+		{
+			presenter.Arrange (new Rect (new Point (0, 0), finalSize));
+			return finalSize;
+		}
+	}
+}
diff --git a/Xamarin.PropertyEditing.Windows/Themes/Resources.xaml b/Xamarin.PropertyEditing.Windows/Themes/Resources.xaml
index 034ba8a..6d7e85a 100644
--- a/Xamarin.PropertyEditing.Windows/Themes/Resources.xaml
+++ b/Xamarin.PropertyEditing.Windows/Themes/Resources.xaml
@@ -505,6 +505,16 @@
 		</Setter>
 	</Style>
 
+	<Style TargetType="local:GradientBrushPreview" xmlns:diag="clr-namespace:System.Diagnostics;assembly=WindowsBase">
+		<Setter Property="Template">
+			<Setter.Value>
+				<DataTemplate>
+					<local:BrushBoxControl Brush="{Binding}" Height="3" VerticalAlignment="Bottom" HorizontalAlignment="Stretch"/>
+				</DataTemplate>
+			</Setter.Value>
+		</Setter>
+	</Style>
+
 	<Style TargetType="local:ColorComponentsEditorControl">
 		<Setter Property="Focusable" Value="False"/>
 		<Setter Property="ContextMenu">
@@ -543,10 +553,10 @@
 							<Label HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="0" Grid.Row="0" Margin="3,0,0,0">
 								<TextBlock TextDecorations="Underline" Text="{x:Static prop:Resources.HueInitial}"/>
 							</Label>
-							<local:ColorComponentBox x:Name="hueEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0"
+							<TextBox x:Name="hueEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0"
 								AutomationProperties.Name="{x:Static prop:Resources.Hue}" AutomationProperties.HelpText="{x:Static prop:Resources.Hue}" ToolTip="{x:Static prop:Resources.Hue}"
 								Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Hue, Mode=TwoWay, Converter={local:DoubleToDegreesConverter}}">
-								<local:ColorComponentBox.GradientBrush>
+								<local:GradientBrushPreview.GradientBrush>
 									<LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
 										<GradientStop Color="Red" Offset="0"/>
 										<GradientStop Color="Yellow" Offset="0.167"/>
@@ -556,36 +566,36 @@
 										<GradientStop Color="Magenta" Offset="0.833"/>
 										<GradientStop Color="Red" Offset="1"/>
 									</LinearGradientBrush>
-								</local:ColorComponentBox.GradientBrush>
-							</local:ColorComponentBox>
+								</local:GradientBrushPreview.GradientBrush>
+							</TextBox>
 
 							<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.Row="1" Opacity="0" FocusVisualStyle="{x:Null}" Panel.ZIndex="1" IsTabStop="False"
 									ToolTip="{x:Static prop:Resources.Lightness}" AutomationProperties.Name="{x:Static prop:Resources.Lightness}" AutomationProperties.HelpText="{x:Static prop:Resources.Lightness}"/>
 							<Label HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="0" Grid.Row="1" Margin="3,0,0,0">
 								<TextBlock TextDecorations="Underline" Text="{x:Static prop:Resources.LightnessInitial}"/>
 							</Label>
-							<local:ColorComponentBox x:Name="lightnessEntry"
+							<TextBox x:Name="lightnessEntry"
 								AutomationProperties.Name="{x:Static prop:Resources.Lightness}" AutomationProperties.HelpText="{x:Static prop:Resources.Lightness}" ToolTip="{x:Static prop:Resources.Lightness}"
 								HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1"
 								Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Lightness, Mode=TwoWay, Converter={local:DoubleToPercentageConverter}}"
-								GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToLightnessBrushConverter}}"/>
+								local:GradientBrushPreview.GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToLightnessBrushConverter}}"/>
 
 							<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.Row="2" Opacity="0" FocusVisualStyle="{x:Null}" Panel.ZIndex="1" IsTabStop="False"
 								AutomationProperties.Name="{x:Static prop:Resources.Saturation}" AutomationProperties.HelpText="{x:Static prop:Resources.Saturation}" ToolTip="{x:Static prop:Resources.Saturation}"/>
 							<Label HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="0" Grid.Row="2" Margin="3,0,0,0">
 								<TextBlock TextDecorations="Underline" Text="{x:Static prop:Resources.SaturationInitial}"/>
 							</Label>
-							<local:ColorComponentBox x:Name="saturationEntryHLS" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="2"
+							<TextBox x:Name="saturationEntryHLS" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="2"
 								AutomationProperties.Name="{x:Static prop:Resources.Saturation}" AutomationProperties.HelpText="{x:Static prop:Resources.Saturation}" ToolTip="{x:Static prop:Resources.Saturation}"
 								Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Saturation, Mode=TwoWay, Converter={local:DoubleToPercentageConverter}}"
-								GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToSaturationBrushConverter}}"/>
+								local:GradientBrushPreview.GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToSaturationBrushConverter}}"/>
 
 							<Label Content="{x:Static prop:Resources.AlphaInitial}" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="0" Grid.Row="3"
 								AutomationProperties.Name="{x:Static prop:Resources.Alpha}" AutomationProperties.HelpText="{x:Static prop:Resources.Alpha}" ToolTip="{x:Static prop:Resources.Alpha}"/>
-							<local:ColorComponentBox x:Name="alphaEntryHLS" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="3"
+							<TextBox x:Name="alphaEntryHLS" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="3"
 								AutomationProperties.Name="{x:Static prop:Resources.Alpha}" AutomationProperties.HelpText="{x:Static prop:Resources.Alpha}" ToolTip="{x:Static prop:Resources.Alpha}"
 								Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=A, Converter={local:ByteToPercentageConverter}, Mode=TwoWay}"
-								GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToAlphaBrushConverter}}"/>
+								local:GradientBrushPreview.GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToAlphaBrushConverter}}"/>
 						</Grid>
 						
 						<Grid x:Name="hsbPane" Visibility="Collapsed" Grid.Row="0" Grid.Column="0">
@@ -605,10 +615,10 @@
 							<Label HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="0" Grid.Row="0" Margin="3,0,0,0">
 								<TextBlock TextDecorations="Underline" Text="{x:Static prop:Resources.HueInitial}"/>
 							</Label>
-							<local:ColorComponentBox x:Name="hsbHueEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0"
+							<TextBox x:Name="hsbHueEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0"
 								 AutomationProperties.Name="{x:Static prop:Resources.Hue}" AutomationProperties.HelpText="{x:Static prop:Resources.Hue}" ToolTip="{x:Static prop:Resources.Hue}"
 								 Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Hue, Mode=TwoWay, Converter={local:DoubleToDegreesConverter}}">
-								<local:ColorComponentBox.GradientBrush>
+								<local:GradientBrushPreview.GradientBrush>
 									<LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
 										<GradientStop Color="Red" Offset="0"/>
 										<GradientStop Color="Yellow" Offset="0.167"/>
@@ -618,35 +628,35 @@
 										<GradientStop Color="Magenta" Offset="0.833"/>
 										<GradientStop Color="Red" Offset="1"/>
 									</LinearGradientBrush>
-								</local:ColorComponentBox.GradientBrush>
-							</local:ColorComponentBox>
+								</local:GradientBrushPreview.GradientBrush>
+							</TextBox>
 
 							<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.Row="1" Opacity="0" FocusVisualStyle="{x:Null}" Panel.ZIndex="1" IsTabStop="False"
 								AutomationProperties.Name="{x:Static prop:Resources.Saturation}" AutomationProperties.HelpText="{x:Static prop:Resources.Saturation}" ToolTip="{x:Static prop:Resources.Saturation}"/>
 							<Label HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="0" Grid.Row="1" Margin="3,0,0,0">
 								<TextBlock TextDecorations="Underline" Text="{x:Static prop:Resources.SaturationInitial}"/>
 							</Label>
-							<local:ColorComponentBox x:Name="saturationEntryHSB" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1"
+							<TextBox x:Name="saturationEntryHSB" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1"
 								AutomationProperties.Name="{x:Static prop:Resources.Saturation}" AutomationProperties.HelpText="{x:Static prop:Resources.Saturation}" ToolTip="{x:Static prop:Resources.Saturation}"
 								Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Saturation, Mode=TwoWay, Converter={local:DoubleToPercentageConverter}}"
-								GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToSaturationBrushConverter}}"/>
+								local:GradientBrushPreview.GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToSaturationBrushConverter}}"/>
 
 							<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.Row="2" Opacity="0" FocusVisualStyle="{x:Null}" Panel.ZIndex="1" IsTabStop="False"
 								AutomationProperties.Name="{x:Static prop:Resources.Brightness}" AutomationProperties.HelpText="{x:Static prop:Resources.Brightness}" ToolTip="{x:Static prop:Resources.Brightness}"/>
 							<Label HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="0" Grid.Row="2" Margin="3,0,0,0">
 								<TextBlock TextDecorations="Underline" Text="{x:Static prop:Resources.BrightnessInitial}"/>
 							</Label>
-							<local:ColorComponentBox x:Name="brightnessEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="2"
+							<TextBox x:Name="brightnessEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="2"
 								AutomationProperties.Name="{x:Static prop:Resources.Brightness}" AutomationProperties.HelpText="{x:Static prop:Resources.Brightness}" ToolTip="{x:Static prop:Resources.Brightness}"
 								Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Brightness, Mode=TwoWay, Converter={local:DoubleToPercentageConverter}}"
-								GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToBrightnessBrushConverter}}"/>
+								local:GradientBrushPreview.GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToBrightnessBrushConverter}}"/>
 
 							<Label Content="{x:Static prop:Resources.AlphaInitial}" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="0" Grid.Row="3"
 								AutomationProperties.Name="{x:Static prop:Resources.Alpha}" AutomationProperties.HelpText="{x:Static prop:Resources.Alpha}" ToolTip="{x:Static prop:Resources.Alpha}"/>
-							<local:ColorComponentBox x:Name="alphaEntryHSB" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="3"
+							<TextBox x:Name="alphaEntryHSB" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="3"
 								AutomationProperties.Name="{x:Static prop:Resources.Alpha}" AutomationProperties.HelpText="{x:Static prop:Resources.Alpha}" ToolTip="{x:Static prop:Resources.Alpha}"
 								Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=A, Converter={local:ByteToPercentageConverter}, Mode=TwoWay}"
-								GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToAlphaBrushConverter}}"/>
+								local:GradientBrushPreview.GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToAlphaBrushConverter}}"/>
 						</Grid>
 						
 						<Grid x:Name="rgbPane" Grid.Row="0" Grid.Column="0">
@@ -666,37 +676,37 @@
 							<Label HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="0" Grid.Row="0" Margin="3,0,0,0">
 								<TextBlock TextDecorations="Underline" Text="{x:Static prop:Resources.RedInitial}"/>
 							</Label>
-							<local:ColorComponentBox x:Name="redEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0"
+							<TextBox x:Name="redEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0"
 								AutomationProperties.Name="{x:Static prop:Resources.Red}" AutomationProperties.HelpText="{x:Static prop:Resources.Red}" ToolTip="{x:Static prop:Resources.Red}"
 								Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=R, Mode=TwoWay}"
-								GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToRedBrushConverter}}"/>
+								local:GradientBrushPreview.GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToRedBrushConverter}}"/>
 
 							<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.Row="1" Opacity="0" FocusVisualStyle="{x:Null}" Panel.ZIndex="1" IsTabStop="False"
 								AutomationProperties.Name="{x:Static prop:Resources.Green}" AutomationProperties.HelpText="{x:Static prop:Resources.Green}" ToolTip="{x:Static prop:Resources.Green}"/>
 							<Label HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="0" Grid.Row="1" Margin="3,0,0,0">
 								<TextBlock TextDecorations="Underline" Text="{x:Static prop:Resources.GreenInitial}"/>
 							</Label>
-							<local:ColorComponentBox x:Name="greenEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1"
+							<TextBox x:Name="greenEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1"
 								AutomationProperties.Name="{x:Static prop:Resources.Green}" AutomationProperties.HelpText="{x:Static prop:Resources.Green}" ToolTip="{x:Static prop:Resources.Green}"
 								Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=G, Mode=TwoWay}"
-								GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToGreenBrushConverter}}"/>
+								local:GradientBrushPreview.GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToGreenBrushConverter}}"/>
 
 							<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.Row="2" Opacity="0" FocusVisualStyle="{x:Null}" Panel.ZIndex="1" IsTabStop="False"
 								AutomationProperties.Name="{x:Static prop:Resources.Blue}" AutomationProperties.HelpText="{x:Static prop:Resources.Blue}" ToolTip="{x:Static prop:Resources.Blue}"/>
 							<Label HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="0" Grid.Row="2" Margin="3,0,0,0">
 								<TextBlock TextDecorations="Underline" Text="{x:Static prop:Resources.BlueInitial}"/>
 							</Label>
-							<local:ColorComponentBox x:Name="blueEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="2"
+							<TextBox x:Name="blueEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="2"
 								AutomationProperties.Name="{x:Static prop:Resources.Blue}" AutomationProperties.HelpText="{x:Static prop:Resources.Blue}" ToolTip="{x:Static prop:Resources.Blue}"
 								Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=B, Mode=TwoWay}"
-								GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToBlueBrushConverter}}"/>
+								local:GradientBrushPreview.GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToBlueBrushConverter}}"/>
 
 							<Label Content="{x:Static prop:Resources.AlphaInitial}" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="0" Grid.Row="3"
 								AutomationProperties.Name="{x:Static prop:Resources.Alpha}" AutomationProperties.HelpText="{x:Static prop:Resources.Alpha}" ToolTip="{x:Static prop:Resources.Alpha}"/>
-							<local:ColorComponentBox x:Name="alphaEntryRGB" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="3"
+							<TextBox x:Name="alphaEntryRGB" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="3"
 								AutomationProperties.Name="{x:Static prop:Resources.Alpha}" AutomationProperties.HelpText="{x:Static prop:Resources.Alpha}" ToolTip="{x:Static prop:Resources.Alpha}"
 								Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=A, Converter={local:ByteToPercentageConverter}, Mode=TwoWay}"
-								GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToAlphaBrushConverter}}"/>
+								local:GradientBrushPreview.GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToAlphaBrushConverter}}"/>
 						</Grid>
 						
 						<Grid x:Name="cmykPane" Visibility="Collapsed" Grid.Row="0" Grid.Column="0">
@@ -717,47 +727,47 @@
 							<Label HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="0" Grid.Row="0" Margin="3,0,0,0">
 								<TextBlock TextDecorations="Underline" Text="{x:Static prop:Resources.CyanInitial}"/>
 							</Label>
-							<local:ColorComponentBox x:Name="cyanEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0"
+							<TextBox x:Name="cyanEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0"
 								AutomationProperties.Name="{x:Static prop:Resources.Cyan}" AutomationProperties.HelpText="{x:Static prop:Resources.Cyan}" ToolTip="{x:Static prop:Resources.Cyan}"
 								Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=C, Mode=TwoWay, Converter={local:DoubleToPercentageConverter}}"
-								GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToCyanBrushConverter}}"/>
+								local:GradientBrushPreview.GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToCyanBrushConverter}}"/>
 
 							<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.Row="1" Opacity="0" FocusVisualStyle="{x:Null}" Panel.ZIndex="1" IsTabStop="False"
 								AutomationProperties.Name="{x:Static prop:Resources.Magenta}" AutomationProperties.HelpText="{x:Static prop:Resources.Magenta}" ToolTip="{x:Static prop:Resources.Magenta}"/>
 							<Label HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="0" Grid.Row="1" Margin="3,0,0,0">
 								<TextBlock TextDecorations="Underline" Text="{x:Static prop:Resources.MagentaInitial}"/>
 							</Label>
-							<local:ColorComponentBox x:Name="magentaEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1"
+							<TextBox x:Name="magentaEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1"
 								AutomationProperties.Name="{x:Static prop:Resources.Magenta}" AutomationProperties.HelpText="{x:Static prop:Resources.Magenta}" ToolTip="{x:Static prop:Resources.Magenta}"
 								Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=M, Mode=TwoWay, Converter={local:DoubleToPercentageConverter}}"
-								GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToMagentaBrushConverter}}"/>
+								local:GradientBrushPreview.GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToMagentaBrushConverter}}"/>
 
 							<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.Row="2" Opacity="0" FocusVisualStyle="{x:Null}" Panel.ZIndex="1" IsTabStop="False"
 								AutomationProperties.Name="{x:Static prop:Resources.Yellow}" AutomationProperties.HelpText="{x:Static prop:Resources.Yellow}" ToolTip="{x:Static prop:Resources.Yellow}"/>
 							<Label HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="0" Grid.Row="2" Margin="3,0,0,0">
 								<TextBlock TextDecorations="Underline" Text="{x:Static prop:Resources.YellowInitial}"/>
 							</Label>
-							<local:ColorComponentBox x:Name="yellowEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="2"
+							<TextBox x:Name="yellowEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="2"
 								AutomationProperties.Name="{x:Static prop:Resources.Yellow}" AutomationProperties.HelpText="{x:Static prop:Resources.Yellow}" ToolTip="{x:Static prop:Resources.Yellow}"
 								Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Y, Mode=TwoWay, Converter={local:DoubleToPercentageConverter}}"
-								GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToYellowBrushConverter}}"/>
+								local:GradientBrushPreview.GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToYellowBrushConverter}}"/>
 
 							<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.Row="3" Opacity="0" FocusVisualStyle="{x:Null}" Panel.ZIndex="1" IsTabStop="False"
 								AutomationProperties.Name="{x:Static prop:Resources.Black}" AutomationProperties.HelpText="{x:Static prop:Resources.Black}" ToolTip="{x:Static prop:Resources.Black}"/>
 							<Label HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="0" Grid.Row="3" Margin="3,0,0,0">
 								<TextBlock TextDecorations="Underline" Text="{x:Static prop:Resources.BlackInitial}"/>
 							</Label>
-							<local:ColorComponentBox x:Name="blackEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="3"
+							<TextBox x:Name="blackEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="3"
 								AutomationProperties.Name="{x:Static prop:Resources.Black}" AutomationProperties.HelpText="{x:Static prop:Resources.Black}" ToolTip="{x:Static prop:Resources.Black}"
 								Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=K, Mode=TwoWay, Converter={local:DoubleToPercentageConverter}}"
-								GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToBlackBrushConverter}}"/>
+								local:GradientBrushPreview.GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToBlackBrushConverter}}"/>
 
 							<Label Content="{x:Static prop:Resources.AlphaInitial}" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="0" Grid.Row="4"
 								AutomationProperties.Name="{x:Static prop:Resources.Alpha}" AutomationProperties.HelpText="{x:Static prop:Resources.Alpha}" ToolTip="{x:Static prop:Resources.Alpha}"/>
-							<local:ColorComponentBox x:Name="alphaEntryCMYK" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="4"
+							<TextBox x:Name="alphaEntryCMYK" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="4"
 								AutomationProperties.Name="{x:Static prop:Resources.Alpha}" AutomationProperties.HelpText="{x:Static prop:Resources.Alpha}" ToolTip="{x:Static prop:Resources.Alpha}"
 								Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=A, Converter={local:ByteToPercentageConverter}, Mode=TwoWay}"
-								GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToAlphaBrushConverter}}"/>
+								local:GradientBrushPreview.GradientBrush="{TemplateBinding Color, Converter={local:ColorComponentToAlphaBrushConverter}}"/>
 						</Grid>
 						
 						<TextBox Name="hexEntry" Margin="2,0,2,0" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="0" Grid.Row="2"
@@ -769,48 +779,6 @@
 		</Setter>
 	</Style>
 
-	<Style TargetType="local:ColorComponentBox" BasedOn="{StaticResource {x:Type TextBox}}">
-		<Setter Property="Background" Value="{DynamicResource InputBackgroundBrush}" />
-		<Setter Property="BorderBrush" Value="{DynamicResource InputBorderBrush}" />
-		<Setter Property="Foreground" Value="{DynamicResource InputForegroundBrush}" />
-		<Setter Property="KeyboardNavigation.TabNavigation" Value="Continue"/>
-		<Setter Property="IsTabStop" Value="False"/>
-		<Setter Property="Template">
-			<Setter.Value>
-				<ControlTemplate TargetType="local:ColorComponentBox">
-					<Grid>
-						<TextBox AcceptsReturn="{TemplateBinding AcceptsReturn}" AcceptsTab="{TemplateBinding AcceptsTab}" AllowDrop="{TemplateBinding AllowDrop}"
-								 AutoWordSelection="{TemplateBinding AutoWordSelection}" Background="{TemplateBinding Background}" BitmapEffect="{TemplateBinding BitmapEffect}"
-								 BitmapEffectInput="{TemplateBinding BitmapEffectInput}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
-								 CacheMode="{TemplateBinding CacheMode}" CaretBrush="{TemplateBinding CaretBrush}" CharacterCasing="{TemplateBinding CharacterCasing}"
-								 Clip="{TemplateBinding Clip}" ClipToBounds="{TemplateBinding ClipToBounds}" ContextMenu="{TemplateBinding ContextMenu}"
-								 Cursor="{TemplateBinding Cursor}" DataContext="{TemplateBinding DataContext}" FlowDirection="{TemplateBinding FlowDirection}"
-								 Focusable="True" FocusVisualStyle="{TemplateBinding FocusVisualStyle}" FontFamily="{TemplateBinding FontFamily}"
-								 FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}"
-								 FontWeight="{TemplateBinding FontWeight}" ForceCursor="{TemplateBinding ForceCursor}" Foreground="{TemplateBinding Foreground}"
-								 Height="{TemplateBinding Height}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-								 HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}" IsHitTestVisible="{TemplateBinding IsHitTestVisible}"
-								 IsEnabled="{TemplateBinding IsEnabled}" IsInactiveSelectionHighlightEnabled="{TemplateBinding IsInactiveSelectionHighlightEnabled}"
-								 IsManipulationEnabled="{TemplateBinding IsManipulationEnabled}" IsReadOnly="{TemplateBinding IsReadOnly}" IsReadOnlyCaretVisible="{TemplateBinding IsReadOnlyCaretVisible}"
-								 IsTabStop="True" IsUndoEnabled="{TemplateBinding IsUndoEnabled}" Margin="{TemplateBinding Margin}"
-								 MaxHeight="{TemplateBinding MaxHeight}" MaxLength="{TemplateBinding MaxLength}" MaxLines="{TemplateBinding MaxLines}"
-								 MaxWidth="{TemplateBinding MaxWidth}" MinHeight="{TemplateBinding MinHeight}" MinLines="{TemplateBinding MinLines}"
-								 MinWidth="{TemplateBinding MinWidth}" Padding="{TemplateBinding Padding}" SelectionOpacity="{TemplateBinding SelectionOpacity}"
-								 SelectionBrush="{TemplateBinding SelectionBrush}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" TextDecorations="{TemplateBinding TextDecorations}"
-								 TextWrapping="{TemplateBinding TextWrapping}" ToolTip="{TemplateBinding ToolTip}" TabIndex="{TemplateBinding TabIndex}"
-								 Tag="{TemplateBinding Tag}" TextAlignment="{TemplateBinding TextAlignment}" UndoLimit="{TemplateBinding UndoLimit}"
-								 UseLayoutRounding="{TemplateBinding UseLayoutRounding}" Uid="{TemplateBinding Uid}"
-								 Text="{Binding Path=Text, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
-								 Grid.Row="0" Grid.Column="0" Panel.ZIndex="0"
-								 AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}" AutomationProperties.HelpText="{TemplateBinding AutomationProperties.Name}"/>
-						<local:BrushBoxControl Brush="{Binding Path=GradientBrush, RelativeSource={RelativeSource TemplatedParent}}"
-											   Height="3" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Grid.Row="0" Grid.Column="0" Panel.ZIndex="1"/>
-					</Grid>
-				</ControlTemplate>
-			</Setter.Value>
-		</Setter>
-	</Style>
-
 	<Style TargetType="local:CurrentColorEditorControl">
 		<Setter Property="IsTabStop" Value="False"/>
 		<Setter Property="Template">
@@ -852,7 +820,7 @@
 		<Setter Property="Template">
 			<Setter.Value>
 				<ControlTemplate TargetType="local:BrushBoxControl">
-					<Grid>
+					<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
 						<Label HorizontalAlignment="Stretch" VerticalAlignment="Center" HorizontalContentAlignment="Center"
 							   Content="{x:Static prop:Resources.NoBrush}" Visibility="{TemplateBinding NoBrushVisible}"
 							   BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Grid.Column="0" Grid.Row="0"/>
diff --git a/Xamarin.PropertyEditing.Windows/Xamarin.PropertyEditing.Windows.csproj b/Xamarin.PropertyEditing.Windows/Xamarin.PropertyEditing.Windows.csproj
index 2112463..86a8813 100644
--- a/Xamarin.PropertyEditing.Windows/Xamarin.PropertyEditing.Windows.csproj
+++ b/Xamarin.PropertyEditing.Windows/Xamarin.PropertyEditing.Windows.csproj
@@ -59,7 +59,6 @@
     <Compile Include="DoubleToPercentageConverter.cs" />
     <Compile Include="ByteToPercentageConverter.cs" />
     <Compile Include="ChoiceControl.cs" />
-    <Compile Include="ColorComponentBox.cs" />
     <Compile Include="ColorComponentModel.cs" />
     <Compile Include="ColorComponentsEditorControl.cs" />
     <Compile Include="ColorComponentToBrushConverter.cs" />
@@ -69,6 +68,7 @@
     <Compile Include="CurrentColorEditorControl.cs" />
     <Compile Include="EditorPropertySelector.cs" />
     <Compile Include="EnumEditorControl.cs" />
+    <Compile Include="GradientBrushPreview.cs" />
     <Compile Include="HexColorConverter.cs" />
     <Compile Include="HostEnvironment.cs" />
     <Compile Include="MenuButton.cs" />
diff --git a/Xamarin.PropertyEditing/Themes/BaseThemeManager.cs b/Xamarin.PropertyEditing/Themes/BaseThemeManager.cs
index 3176d78..e83ebe6 100644
--- a/Xamarin.PropertyEditing/Themes/BaseThemeManager.cs
+++ b/Xamarin.PropertyEditing/Themes/BaseThemeManager.cs
@@ -1,5 +1,4 @@
-using System;
-using System.Drawing;
+using System;
 using System.Linq;
 
 namespace Xamarin.PropertyEditing.Themes
diff --git a/Xamarin.PropertyEditing/Themes/PropertyEditorTheme.cs b/Xamarin.PropertyEditing/Themes/PropertyEditorTheme.cs
index 36854e5..f99ef75 100644
--- a/Xamarin.PropertyEditing/Themes/PropertyEditorTheme.cs
+++ b/Xamarin.PropertyEditing/Themes/PropertyEditorTheme.cs
@@ -1,5 +1,4 @@
-using System;
-using System.Drawing;
+using System;
 
 namespace Xamarin.PropertyEditing.Themes
 {