tsai
/
Avalonia
mirror of https://github.com/AvaloniaUI/Avalonia.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Implement the hex input TextBox in ColorView

pull/8215/head
robloo 4 years ago
parent
8ef440ceda
commit
12a8ecb923
2 changed files with 88 additions and 16 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 85
      src/Avalonia.Controls.ColorPicker/ColorView/ColorView.cs
  2. 19
      src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml

85
src/Avalonia.Controls.ColorPicker/ColorView/ColorView.cs
View File

@ -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
/// <summary>
/// Presents a color for user editing using a spectrum, palette and component sliders.
/// </summary>
[TemplatePart("PART_HexTextBox", typeof(TextBox))]
public partial class ColorView : TemplatedControl
{
/// <summary>
@ -19,20 +19,70 @@ namespace Avalonia.Controls
/// </summary>
public event EventHandler<ColorChangedEventArgs>? ColorChanged;
private bool disableUpdates = false;
// XAML template parts
private TextBox? _hexTextBox;
private ObservableCollection<Color> _customPaletteColors = new ObservableCollection<Color>();
private ColorToHexConverter colorToHexConverter = new ColorToHexConverter();
private bool disableUpdates = false;
/// <summary>
/// Initializes a new instance of the <see cref="ColorView"/> class.
/// </summary>
public ColorView() : base()
{
this.CustomPalette = new FluentColorPalette();
}
/// <summary>
/// Gets the value of the hex TextBox and sets it as the current <see cref="Color"/>.
/// If invalid, the TextBox hex text will revert back to the last valid color.
/// </summary>
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;
}
}
/// <summary>
/// Sets the current <see cref="Color"/> to the hex TextBox.
/// </summary>
private void SetColorToHexTextBox()
{
if (_hexTextBox != null)
{
_hexTextBox.Text = colorToHexConverter.Convert(Color, typeof(string), null, CultureInfo.CurrentCulture) as string;
}
}
/// <inheritdoc/>
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<TextBox>("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<Color>(),
@ -64,6 +115,7 @@ namespace Avalonia.Controls
disableUpdates = true;
Color = HsvColor.ToRgb();
SetColorToHexTextBox();
OnColorChanged(new ColorChangedEventArgs(
change.GetOldValue<HsvColor>().ToRgb(),
@ -103,5 +155,26 @@ namespace Avalonia.Controls
{
ColorChanged?.Invoke(this, e);
}
/// <summary>
/// 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.
/// </summary>
private void HexTextBox_KeyDown(object? sender, Input.KeyEventArgs e)
{
if (e.Key == Input.Key.Enter)
{
GetColorFromHexTextBox();
}
}
/// <summary>
/// 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.
/// </summary>
private void HexTextBox_LostFocus(object? sender, Interactivity.RoutedEventArgs e)
{
GetColorFromHexTextBox();
}
}
}

19
src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
View File

@ -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 @@
</Border>
</TabItem.Header>
<ListBox Items="{TemplateBinding CustomPaletteColors}"
SelectedItem="{Binding Color, ElementName=ColorSpectrum}"
SelectedItem="{Binding $parent[ColorView].Color}"
UseLayoutRounding="False"
Margin="12">
<ListBox.Styles>
@ -369,12 +368,12 @@
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<TextBox x:Name="HexTextBox"
<!-- Color updated in code-behind -->
<TextBox x:Name="PART_HexTextBox"
Grid.Column="1"
AutomationProperties.Name="Hexadecimal Color"
Height="32"
MaxLength="8"
Text="{Binding Color, ElementName=ColorSpectrum, Converter={StaticResource ColorToHex}}"
HorizontalAlignment="Stretch"
CornerRadius="0,4,4,0" />
</Grid>
@ -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 @@
<!-- Previewer -->
<primitives:ColorPreviewer Grid.Row="1"
ShowAccentColors="True"
HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
HsvColor="{Binding $parent[ColorView].HsvColor}"
Margin="12,0,12,12" />
</Grid>
</ControlTemplate>

Write Preview
Loading…
Cancel
Save