From 12a8ecb9239f315767448bc5d434b7652b7987f8 Mon Sep 17 00:00:00 2001 From: robloo Date: Sat, 28 May 2022 15:17:40 -0400 Subject: [PATCH] Implement the hex input TextBox in ColorView --- .../ColorView/ColorView.cs | 85 +++++++++++++++++-- .../Themes/Fluent/ColorView.xaml | 19 ++--- 2 files changed, 88 insertions(+), 16 deletions(-) diff --git a/src/Avalonia.Controls.ColorPicker/ColorView/ColorView.cs b/src/Avalonia.Controls.ColorPicker/ColorView/ColorView.cs index 76e3cfe3e1..0363d9c182 100644 --- a/src/Avalonia.Controls.ColorPicker/ColorView/ColorView.cs +++ b/src/Avalonia.Controls.ColorPicker/ColorView/ColorView.cs @@ -1,9 +1,8 @@ using System; -using System.Collections.Generic; using System.Collections.ObjectModel; -using System.Linq; -using System.Text; -using System.Threading.Tasks; +using System.Globalization; +using Avalonia.Controls.Converters; +using Avalonia.Controls.Metadata; using Avalonia.Controls.Primitives; using Avalonia.Media; @@ -12,6 +11,7 @@ namespace Avalonia.Controls /// /// Presents a color for user editing using a spectrum, palette and component sliders. /// + [TemplatePart("PART_HexTextBox", typeof(TextBox))] public partial class ColorView : TemplatedControl { /// @@ -19,20 +19,70 @@ namespace Avalonia.Controls /// public event EventHandler? ColorChanged; - private bool disableUpdates = false; + // XAML template parts + private TextBox? _hexTextBox; private ObservableCollection _customPaletteColors = new ObservableCollection(); + private ColorToHexConverter colorToHexConverter = new ColorToHexConverter(); + private bool disableUpdates = false; /// /// Initializes a new instance of the class. /// public ColorView() : base() { + this.CustomPalette = new FluentColorPalette(); + } + + /// + /// Gets the value of the hex TextBox and sets it as the current . + /// If invalid, the TextBox hex text will revert back to the last valid color. + /// + private void GetColorFromHexTextBox() + { + if (_hexTextBox != null) + { + var convertedColor = colorToHexConverter.ConvertBack(_hexTextBox.Text, typeof(Color), null, CultureInfo.CurrentCulture); + + if (convertedColor is Color color) + { + Color = color; + } + + // Re-apply the hex value + // This ensure the hex color value is always valid and formatted correctly + _hexTextBox.Text = colorToHexConverter.Convert(Color, typeof(string), null, CultureInfo.CurrentCulture) as string; + } + } + + /// + /// Sets the current to the hex TextBox. + /// + private void SetColorToHexTextBox() + { + if (_hexTextBox != null) + { + _hexTextBox.Text = colorToHexConverter.Convert(Color, typeof(string), null, CultureInfo.CurrentCulture) as string; + } } + /// protected override void OnApplyTemplate(TemplateAppliedEventArgs e) { - this.CustomPalette = new FluentColorPalette(); + if (_hexTextBox != null) + { + _hexTextBox.KeyDown -= HexTextBox_KeyDown; + _hexTextBox.LostFocus -= HexTextBox_LostFocus; + } + + _hexTextBox = e.NameScope.Find("PART_HexTextBox"); + SetColorToHexTextBox(); + + if (_hexTextBox != null) + { + _hexTextBox.KeyDown += HexTextBox_KeyDown; + _hexTextBox.LostFocus += HexTextBox_LostFocus; + } base.OnApplyTemplate(e); } @@ -52,6 +102,7 @@ namespace Avalonia.Controls disableUpdates = true; HsvColor = Color.ToHsv(); + SetColorToHexTextBox(); OnColorChanged(new ColorChangedEventArgs( change.GetOldValue(), @@ -64,6 +115,7 @@ namespace Avalonia.Controls disableUpdates = true; Color = HsvColor.ToRgb(); + SetColorToHexTextBox(); OnColorChanged(new ColorChangedEventArgs( change.GetOldValue().ToRgb(), @@ -103,5 +155,26 @@ namespace Avalonia.Controls { ColorChanged?.Invoke(this, e); } + + /// + /// Event handler for when a key is pressed within the Hex RGB value TextBox. + /// This is used to trigger re-evaluation of the color based on the TextBox value. + /// + private void HexTextBox_KeyDown(object? sender, Input.KeyEventArgs e) + { + if (e.Key == Input.Key.Enter) + { + GetColorFromHexTextBox(); + } + } + + /// + /// Event handler for when the Hex RGB value TextBox looses focus. + /// This is used to trigger re-evaluation of the color based on the TextBox value. + /// + private void HexTextBox_LostFocus(object? sender, Interactivity.RoutedEventArgs e) + { + GetColorFromHexTextBox(); + } } } diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml index 09feeb38f9..9800b1b3a5 100644 --- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml +++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml @@ -152,8 +152,7 @@ Grid.Row="0" Grid.RowSpan="2" Components="{TemplateBinding ColorSpectrumComponents}" - Color="{TemplateBinding Color}" - HsvColor="{TemplateBinding HsvColor}" + HsvColor="{Binding $parent[ColorView].HsvColor}" MinHue="{TemplateBinding MinHue}" MaxHue="{TemplateBinding MaxHue}" MinSaturation="{TemplateBinding MinSaturation}" @@ -188,7 +187,7 @@ @@ -369,12 +368,12 @@ HorizontalAlignment="Center" VerticalAlignment="Center" /> - + @@ -419,7 +418,7 @@ Orientation="Horizontal" ColorComponent="Component1" ColorModel="{TemplateBinding ColorModel, Mode=OneWay}" - HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}" + HsvColor="{Binding $parent[ColorView].HsvColor}" Margin="12,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Center" /> @@ -462,7 +461,7 @@ Orientation="Horizontal" ColorComponent="Component2" ColorModel="{TemplateBinding ColorModel, Mode=OneWay}" - HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}" + HsvColor="{Binding $parent[ColorView].HsvColor}" Margin="12,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Center" /> @@ -505,7 +504,7 @@ Orientation="Horizontal" ColorComponent="Component3" ColorModel="{TemplateBinding ColorModel, Mode=OneWay}" - HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}" + HsvColor="{Binding $parent[ColorView].HsvColor}" Margin="12,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Center" /> @@ -543,7 +542,7 @@ Orientation="Horizontal" ColorComponent="Alpha" ColorModel="{TemplateBinding ColorModel, Mode=OneWay}" - HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}" + HsvColor="{Binding $parent[ColorView].HsvColor}" Margin="12,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Center" /> @@ -553,7 +552,7 @@