From f0e93683f00df286384f77405f481a992fb0ab66 Mon Sep 17 00:00:00 2001 From: robloo Date: Sat, 6 May 2023 20:51:59 -0400 Subject: [PATCH 01/16] Add special coercion logic to initial ColorSpectrum selection This specially handles #00000000 to be much more intuitive for end-users. --- .../ColorSpectrum/ColorSpectrum.cs | 86 ++++++++++++++++++- 1 file changed, 85 insertions(+), 1 deletion(-) diff --git a/src/Avalonia.Controls.ColorPicker/ColorSpectrum/ColorSpectrum.cs b/src/Avalonia.Controls.ColorPicker/ColorSpectrum/ColorSpectrum.cs index 9198a2f237..98a721ec91 100644 --- a/src/Avalonia.Controls.ColorPicker/ColorSpectrum/ColorSpectrum.cs +++ b/src/Avalonia.Controls.ColorPicker/ColorSpectrum/ColorSpectrum.cs @@ -45,6 +45,7 @@ namespace Avalonia.Controls.Primitives private bool _updatingColor = false; private bool _updatingHsvColor = false; + private bool _coercedInitialColor = false; private bool _isPointerPressed = false; private bool _shouldShowLargeSelection = false; private List _hsvValues = new List(); @@ -601,14 +602,97 @@ namespace Avalonia.Controls.Primitives } } + /// + /// Changes the currently selected color (always in HSV) and applies all necessary updates. + /// + /// + /// Some additional logic is applied in certain situations to coerce and sync color values. + /// Use this method instead of update the or directly. + /// + /// The new HSV color to change to. private void UpdateColor(Hsv newHsv) { _updatingColor = true; _updatingHsvColor = true; - Rgb newRgb = newHsv.ToRgb(); double alpha = HsvColor.A; + // It is common for the ColorPicker (and therefore the Spectrum) to be initialized + // with a #00000000 color value in some use cases. This is usually used to indicate + // that no color has been selected by the user. Note that #00000000 is different than + // #00FFFFFF (Transparent). + // + // In this situation, the first time the user clicks on the spectrum the third + // component and alpha component will remain zero. This is because the spectrum only + // controls two components at any given time. + // + // This is very unintuitive from a user-standpoint as after the user clicks on the + // spectrum they must then increase the alpha and then the third component sliders + // to the desired value. In fact, until they increase these slider values no color + // will show at all since it is fully transparent and black. In almost all cases + // though the desired value is simply full color. + // + // To work around this usability issue with an initial #00000000 color, the selected + // color is coerced (only the first time) into a color with maximum third component + // value and maximum alpha. This can only happen once and only if those two components + // are already zero. + // + // Also note this is NOT currently done for #00FFFFFF (Transparent) but based on + // further usability study that case may need to be handled here as well. Right now + // Transparent is treated as a normal color value with the alpha intentionally set + // to zero so the alpha slider must still be adjusted after the spectrum. + if (!_coercedInitialColor && + IsLoaded) + { + bool isAlphaComponentZero = (alpha == 0.0); + bool isThirdComponentZero = false; + + switch (Components) + { + case ColorSpectrumComponents.HueValue: + case ColorSpectrumComponents.ValueHue: + isThirdComponentZero = (newHsv.S == 0.0); + break; + + case ColorSpectrumComponents.HueSaturation: + case ColorSpectrumComponents.SaturationHue: + isThirdComponentZero = (newHsv.V == 0.0); + break; + + case ColorSpectrumComponents.ValueSaturation: + case ColorSpectrumComponents.SaturationValue: + isThirdComponentZero = (newHsv.H == 0.0); + break; + } + + if (isAlphaComponentZero && isThirdComponentZero) + { + alpha = 1.0; + + switch (Components) + { + case ColorSpectrumComponents.HueValue: + case ColorSpectrumComponents.ValueHue: + newHsv.S = 1.0; + break; + + case ColorSpectrumComponents.HueSaturation: + case ColorSpectrumComponents.SaturationHue: + newHsv.V = 1.0; + break; + + case ColorSpectrumComponents.ValueSaturation: + case ColorSpectrumComponents.SaturationValue: + newHsv.H = 1.0; + break; + } + + _coercedInitialColor = true; + } + } + + Rgb newRgb = newHsv.ToRgb(); + SetCurrentValue(ColorProperty, newRgb.ToColor(alpha)); SetCurrentValue(HsvColorProperty, newHsv.ToHsvColor(alpha)); From 4fd4970ce7c0cab42830f2d061798bb7a2622421 Mon Sep 17 00:00:00 2001 From: robloo Date: Sat, 6 May 2023 21:38:15 -0400 Subject: [PATCH 02/16] Fix Hue in new ColorSpectrum coercion logic --- .../ColorSpectrum/ColorSpectrum.cs | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/Avalonia.Controls.ColorPicker/ColorSpectrum/ColorSpectrum.cs b/src/Avalonia.Controls.ColorPicker/ColorSpectrum/ColorSpectrum.cs index 98a721ec91..6683346eeb 100644 --- a/src/Avalonia.Controls.ColorPicker/ColorSpectrum/ColorSpectrum.cs +++ b/src/Avalonia.Controls.ColorPicker/ColorSpectrum/ColorSpectrum.cs @@ -683,7 +683,12 @@ namespace Avalonia.Controls.Primitives case ColorSpectrumComponents.ValueSaturation: case ColorSpectrumComponents.SaturationValue: - newHsv.H = 1.0; + // Hue is mathematically NOT a special case; however, is one conceptually. + // It doesn't make sense to change the selected Hue value, so why is it set here? + // Setting to 360.0 is equivalent to the max set for other components and is + // internally wrapped back to 0.0 (since 360 degrees = 0 degrees). + // This means effectively there is no change to the hue component value. + newHsv.H = 360.0; break; } From 2f2f290e7f427c1d8847e6f088b6c8825f4b7afc Mon Sep 17 00:00:00 2001 From: robloo Date: Sat, 6 May 2023 21:40:37 -0400 Subject: [PATCH 03/16] Always force max saturation and value in the third component slider --- .../Themes/Fluent/ColorPicker.xaml | 2 +- src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml | 2 +- .../Themes/Simple/ColorPicker.xaml | 2 +- src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml index b3c7cd9f9c..73dbb3b527 100644 --- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml +++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml @@ -114,7 +114,7 @@ AutomationProperties.Name="Third Component" Grid.Column="0" IsAlphaMaxForced="True" - IsSaturationValueMaxForced="False" + IsSaturationValueMaxForced="True" Orientation="Vertical" ColorModel="Hsva" ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}" diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml index acd2c7ff15..14a10f4943 100644 --- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml +++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml @@ -361,7 +361,7 @@ AutomationProperties.Name="Third Component" Grid.Column="0" IsAlphaMaxForced="True" - IsSaturationValueMaxForced="False" + IsSaturationValueMaxForced="True" Orientation="Vertical" ColorModel="Hsva" ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}" diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml index ff4e1d93a8..b7f07b1ef0 100644 --- a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml +++ b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml @@ -113,7 +113,7 @@ AutomationProperties.Name="Third Component" Grid.Column="0" IsAlphaMaxForced="True" - IsSaturationValueMaxForced="False" + IsSaturationValueMaxForced="True" Orientation="Vertical" ColorModel="Hsva" ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}" diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml index a26d3179b5..7279ef6369 100644 --- a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml +++ b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml @@ -323,7 +323,7 @@ AutomationProperties.Name="Third Component" Grid.Column="0" IsAlphaMaxForced="True" - IsSaturationValueMaxForced="False" + IsSaturationValueMaxForced="True" Orientation="Vertical" ColorModel="Hsva" ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}" From 0c223cbcee5d56017a9304351c145c87a0921831 Mon Sep 17 00:00:00 2001 From: robloo Date: Sat, 6 May 2023 22:31:48 -0400 Subject: [PATCH 04/16] Rename ColorSlider.IsAlphaMaxForced to IsAlphaVisible --- .../ColorSlider/ColorSlider.Properties.cs | 25 +++++++++++-------- .../ColorSlider/ColorSlider.cs | 15 ++++++----- .../Helpers/ColorPickerHelpers.cs | 8 +++--- .../Themes/Fluent/ColorPicker.xaml | 2 +- .../Themes/Fluent/ColorView.xaml | 2 +- .../Themes/Simple/ColorPicker.xaml | 2 +- .../Themes/Simple/ColorView.xaml | 2 +- 7 files changed, 30 insertions(+), 26 deletions(-) diff --git a/src/Avalonia.Controls.ColorPicker/ColorSlider/ColorSlider.Properties.cs b/src/Avalonia.Controls.ColorPicker/ColorSlider/ColorSlider.Properties.cs index e2a34a7f90..ef734cf1db 100644 --- a/src/Avalonia.Controls.ColorPicker/ColorSlider/ColorSlider.Properties.cs +++ b/src/Avalonia.Controls.ColorPicker/ColorSlider/ColorSlider.Properties.cs @@ -41,12 +41,12 @@ namespace Avalonia.Controls.Primitives defaultBindingMode: BindingMode.TwoWay); /// - /// Defines the property. + /// Defines the property. /// - public static readonly StyledProperty IsAlphaMaxForcedProperty = + public static readonly StyledProperty IsAlphaVisibleProperty = AvaloniaProperty.Register( - nameof(IsAlphaMaxForced), - true); + nameof(IsAlphaVisible), + false); /// /// Defines the property. @@ -109,14 +109,19 @@ namespace Avalonia.Controls.Primitives } /// - /// Gets or sets a value indicating whether the alpha component is always forced to maximum for components - /// other than . - /// This ensures that the background is always visible and never transparent regardless of the actual color. + /// Gets or sets a value indicating whether the alpha component is visible and rendered in the spectrum. + /// When false, this ensures that the spectrum is always visible and never transparent regardless of + /// the actual color. /// - public bool IsAlphaMaxForced + /// + /// Setting to false means the alpha component is always forced to maximum for components other than + /// during rendering. This doesn't change the value of the alpha component + /// in the color – it is only for display. + /// + public bool IsAlphaVisible { - get => GetValue(IsAlphaMaxForcedProperty); - set => SetValue(IsAlphaMaxForcedProperty, value); + get => GetValue(IsAlphaVisibleProperty); + set => SetValue(IsAlphaVisibleProperty, value); } /// diff --git a/src/Avalonia.Controls.ColorPicker/ColorSlider/ColorSlider.cs b/src/Avalonia.Controls.ColorPicker/ColorSlider/ColorSlider.cs index ce47a797ec..6aaf6aab35 100644 --- a/src/Avalonia.Controls.ColorPicker/ColorSlider/ColorSlider.cs +++ b/src/Avalonia.Controls.ColorPicker/ColorSlider/ColorSlider.cs @@ -52,8 +52,7 @@ namespace Avalonia.Controls.Primitives // This means under a certain alpha threshold, neither a white or black selector thumb // should be shown and instead the default slider thumb color should be used instead. if (Color.A < 128 && - (IsAlphaMaxForced == false || - ColorComponent == ColorComponent.Alpha)) + (IsAlphaVisible || ColorComponent == ColorComponent.Alpha)) { PseudoClasses.Set(pcDarkSelector, false); PseudoClasses.Set(pcLightSelector, false); @@ -122,7 +121,7 @@ namespace Avalonia.Controls.Primitives ColorModel, ColorComponent, HsvColor, - IsAlphaMaxForced, + IsAlphaVisible, IsSaturationValueMaxForced); if (_backgroundBitmap != null) @@ -319,10 +318,10 @@ namespace Avalonia.Controls.Primitives private HsvColor GetEquivalentBackgroundColor(HsvColor hsvColor) { var component = ColorComponent; - var isAlphaMaxForced = IsAlphaMaxForced; + var isAlphaVisible = IsAlphaVisible; var isSaturationValueMaxForced = IsSaturationValueMaxForced; - if (isAlphaMaxForced && + if (isAlphaVisible == false && component != ColorComponent.Alpha) { hsvColor = new HsvColor(1.0, hsvColor.H, hsvColor.S, hsvColor.V); @@ -362,9 +361,9 @@ namespace Avalonia.Controls.Primitives private Color GetEquivalentBackgroundColor(Color rgbColor) { var component = ColorComponent; - var isAlphaMaxForced = IsAlphaMaxForced; + var isAlphaVisible = IsAlphaVisible; - if (isAlphaMaxForced && + if (isAlphaVisible == false && component != ColorComponent.Alpha) { rgbColor = new Color(255, rgbColor.R, rgbColor.G, rgbColor.B); @@ -401,7 +400,7 @@ namespace Avalonia.Controls.Primitives } else if (change.Property == ColorComponentProperty || change.Property == ColorModelProperty || - change.Property == IsAlphaMaxForcedProperty || + change.Property == IsAlphaVisibleProperty || change.Property == IsSaturationValueMaxForcedProperty) { ignorePropertyChanged = true; diff --git a/src/Avalonia.Controls.ColorPicker/Helpers/ColorPickerHelpers.cs b/src/Avalonia.Controls.ColorPicker/Helpers/ColorPickerHelpers.cs index dbd92d4ac5..cb64b3f6d5 100644 --- a/src/Avalonia.Controls.ColorPicker/Helpers/ColorPickerHelpers.cs +++ b/src/Avalonia.Controls.ColorPicker/Helpers/ColorPickerHelpers.cs @@ -29,8 +29,8 @@ namespace Avalonia.Controls.Primitives /// The color model being used: RGBA or HSVA. /// The specific color component to sweep. /// The base HSV color used for components not being changed. - /// Fix the alpha component value to maximum during calculation. - /// This will remove any alpha/transparency from the other component backgrounds. + /// Whether the alpha component is visible and rendered in the bitmap. + /// This property is ignored when the alpha component itself is being rendered. /// Fix the saturation and value components to maximum /// during calculation with the HSVA color model. /// This will ensure colors are always discernible regardless of saturation/value. @@ -42,7 +42,7 @@ namespace Avalonia.Controls.Primitives ColorModel colorModel, ColorComponent component, HsvColor baseHsvColor, - bool isAlphaMaxForced, + bool isAlphaVisible, bool isSaturationValueMaxForced) { if (width == 0 || height == 0) @@ -67,7 +67,7 @@ namespace Avalonia.Controls.Primitives bgraPixelDataWidth = width * 4; // Maximize alpha component value - if (isAlphaMaxForced && + if (isAlphaVisible == false && component != ColorComponent.Alpha) { baseHsvColor = new HsvColor(1.0, baseHsvColor.H, baseHsvColor.S, baseHsvColor.V); diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml index 73dbb3b527..592494a1e3 100644 --- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml +++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml @@ -113,7 +113,7 @@ Date: Sat, 6 May 2023 23:45:50 -0400 Subject: [PATCH 05/16] Replace ColorSlider.IsSaturationValueMaxForced with more powerful/general-purpose IsPerceptive --- .../ColorSlider/ColorSlider.Properties.cs | 53 ++++++++------ .../ColorSlider/ColorSlider.cs | 73 +++++++++++-------- .../Helpers/ColorPickerHelpers.cs | 52 ++++++++----- .../Themes/Fluent/ColorPicker.xaml | 17 ++++- .../Themes/Fluent/ColorView.xaml | 17 ++++- .../Themes/Simple/ColorPicker.xaml | 17 ++++- .../Themes/Simple/ColorView.xaml | 17 ++++- 7 files changed, 173 insertions(+), 73 deletions(-) diff --git a/src/Avalonia.Controls.ColorPicker/ColorSlider/ColorSlider.Properties.cs b/src/Avalonia.Controls.ColorPicker/ColorSlider/ColorSlider.Properties.cs index ef734cf1db..b2deb913f1 100644 --- a/src/Avalonia.Controls.ColorPicker/ColorSlider/ColorSlider.Properties.cs +++ b/src/Avalonia.Controls.ColorPicker/ColorSlider/ColorSlider.Properties.cs @@ -49,20 +49,20 @@ namespace Avalonia.Controls.Primitives false); /// - /// Defines the property. + /// Defines the property. /// - public static readonly StyledProperty IsRoundingEnabledProperty = + public static readonly StyledProperty IsPerceptiveProperty = AvaloniaProperty.Register( - nameof(IsRoundingEnabled), - false); + nameof(IsPerceptive), + true); /// - /// Defines the property. + /// Defines the property. /// - public static readonly StyledProperty IsSaturationValueMaxForcedProperty = + public static readonly StyledProperty IsRoundingEnabledProperty = AvaloniaProperty.Register( - nameof(IsSaturationValueMaxForced), - true); + nameof(IsRoundingEnabled), + false); /// /// Gets or sets the currently selected color in the RGB color model. @@ -109,9 +109,9 @@ namespace Avalonia.Controls.Primitives } /// - /// Gets or sets a value indicating whether the alpha component is visible and rendered in the spectrum. - /// When false, this ensures that the spectrum is always visible and never transparent regardless of - /// the actual color. + /// Gets or sets a value indicating whether the alpha component is visible and rendered. + /// When false, this ensures that the gradient is always visible and never transparent regardless of + /// the actual color. This property is ignored when the alpha component itself is being displayed. /// /// /// Setting to false means the alpha component is always forced to maximum for components other than @@ -124,6 +124,26 @@ namespace Avalonia.Controls.Primitives set => SetValue(IsAlphaVisibleProperty, value); } + /// + /// Gets or sets a value indicating whether the slider adapts rendering to improve user-perception + /// over exactness. When true in the HSVA color model, this ensures that the gradient is always visible and + /// never washed out regardless of the actual color. When true in the RGBA color model, this ensures + /// the components always appear as red, green or blue. + /// + /// + /// For example, with Hue in the HSVA color model, the Saturation and Value components are always forced + /// to maximum values during rendering. In the RGBA color model, all components other than + /// are forced to minimum values during rendering. + ///

+ /// Also note this property will only adjust components other than during rendering. + /// This doesn't change the values of any components in the color – it is only for display. + /// + public bool IsPerceptive + { + get => GetValue(IsPerceptiveProperty); + set => SetValue(IsPerceptiveProperty, value); + } + /// /// Gets or sets a value indicating whether rounding of color component values is enabled. /// @@ -136,16 +156,5 @@ namespace Avalonia.Controls.Primitives get => GetValue(IsRoundingEnabledProperty); set => SetValue(IsRoundingEnabledProperty, value); } - - /// - /// Gets or sets a value indicating whether the saturation and value components are always forced to maximum values - /// when using the HSVA color model. Only component values other than will be changed. - /// This ensures, for example, that the Hue background is always visible and never washed out regardless of the actual color. - /// - public bool IsSaturationValueMaxForced - { - get => GetValue(IsSaturationValueMaxForcedProperty); - set => SetValue(IsSaturationValueMaxForcedProperty, value); - } } } diff --git a/src/Avalonia.Controls.ColorPicker/ColorSlider/ColorSlider.cs b/src/Avalonia.Controls.ColorPicker/ColorSlider/ColorSlider.cs index 6aaf6aab35..a6d9ca459f 100644 --- a/src/Avalonia.Controls.ColorPicker/ColorSlider/ColorSlider.cs +++ b/src/Avalonia.Controls.ColorPicker/ColorSlider/ColorSlider.cs @@ -63,11 +63,11 @@ namespace Avalonia.Controls.Primitives if (ColorModel == ColorModel.Hsva) { - perceivedColor = GetEquivalentBackgroundColor(HsvColor).ToRgb(); + perceivedColor = GetPerceptiveBackgroundColor(HsvColor).ToRgb(); } else { - perceivedColor = GetEquivalentBackgroundColor(Color); + perceivedColor = GetPerceptiveBackgroundColor(Color); } if (ColorHelper.GetRelativeLuminance(perceivedColor) <= 0.5) @@ -107,7 +107,7 @@ namespace Avalonia.Controls.Primitives { // As a fallback, attempt to calculate using the overall control size // This shouldn't happen as a track is a required template part of a slider - // However, if it does, the spectrum will still be shown + // However, if it does, the spectrum gradient will still be shown pixelWidth = Convert.ToInt32(Bounds.Width * scale); pixelHeight = Convert.ToInt32(Bounds.Height * scale); } @@ -122,7 +122,7 @@ namespace Avalonia.Controls.Primitives ColorComponent, HsvColor, IsAlphaVisible, - IsSaturationValueMaxForced); + IsPerceptive); if (_backgroundBitmap != null) { @@ -315,11 +315,11 @@ namespace Avalonia.Controls.Primitives /// /// The actual color to get the equivalent background color for. /// The equivalent, perceived background color. - private HsvColor GetEquivalentBackgroundColor(HsvColor hsvColor) + private HsvColor GetPerceptiveBackgroundColor(HsvColor hsvColor) { var component = ColorComponent; var isAlphaVisible = IsAlphaVisible; - var isSaturationValueMaxForced = IsSaturationValueMaxForced; + var isPerceptive = IsPerceptive; if (isAlphaVisible == false && component != ColorComponent.Alpha) @@ -327,28 +327,23 @@ namespace Avalonia.Controls.Primitives hsvColor = new HsvColor(1.0, hsvColor.H, hsvColor.S, hsvColor.V); } - switch (component) + if (isPerceptive) { - case ColorComponent.Component1: - return new HsvColor( - hsvColor.A, - hsvColor.H, - isSaturationValueMaxForced ? 1.0 : hsvColor.S, - isSaturationValueMaxForced ? 1.0 : hsvColor.V); - case ColorComponent.Component2: - return new HsvColor( - hsvColor.A, - hsvColor.H, - hsvColor.S, - isSaturationValueMaxForced ? 1.0 : hsvColor.V); - case ColorComponent.Component3: - return new HsvColor( - hsvColor.A, - hsvColor.H, - isSaturationValueMaxForced ? 1.0 : hsvColor.S, - hsvColor.V); - default: - return hsvColor; + switch (component) + { + case ColorComponent.Component1: + return new HsvColor(hsvColor.A, hsvColor.H, 1.0, 1.0); + case ColorComponent.Component2: + return new HsvColor(hsvColor.A, hsvColor.H, hsvColor.S, 1.0); + case ColorComponent.Component3: + return new HsvColor(hsvColor.A, hsvColor.H, 1.0, hsvColor.V); + default: + return hsvColor; + } + } + else + { + return hsvColor; } } @@ -358,10 +353,11 @@ namespace Avalonia.Controls.Primitives /// /// The actual color to get the equivalent background color for. /// The equivalent, perceived background color. - private Color GetEquivalentBackgroundColor(Color rgbColor) + private Color GetPerceptiveBackgroundColor(Color rgbColor) { var component = ColorComponent; var isAlphaVisible = IsAlphaVisible; + var isPerceptive = IsPerceptive; if (isAlphaVisible == false && component != ColorComponent.Alpha) @@ -369,7 +365,24 @@ namespace Avalonia.Controls.Primitives rgbColor = new Color(255, rgbColor.R, rgbColor.G, rgbColor.B); } - return rgbColor; + if (isPerceptive) + { + switch (component) + { + case ColorComponent.Component1: + return new Color(rgbColor.A, rgbColor.R, 0, 0); + case ColorComponent.Component2: + return new Color(rgbColor.A, 0, rgbColor.G, 0); + case ColorComponent.Component3: + return new Color(rgbColor.A, 0, 0, rgbColor.B); + default: + return rgbColor; + } + } + else + { + return rgbColor; + } } /// @@ -401,7 +414,7 @@ namespace Avalonia.Controls.Primitives else if (change.Property == ColorComponentProperty || change.Property == ColorModelProperty || change.Property == IsAlphaVisibleProperty || - change.Property == IsSaturationValueMaxForcedProperty) + change.Property == IsPerceptiveProperty) { ignorePropertyChanged = true; diff --git a/src/Avalonia.Controls.ColorPicker/Helpers/ColorPickerHelpers.cs b/src/Avalonia.Controls.ColorPicker/Helpers/ColorPickerHelpers.cs index cb64b3f6d5..c2332751af 100644 --- a/src/Avalonia.Controls.ColorPicker/Helpers/ColorPickerHelpers.cs +++ b/src/Avalonia.Controls.ColorPicker/Helpers/ColorPickerHelpers.cs @@ -31,9 +31,8 @@ namespace Avalonia.Controls.Primitives /// The base HSV color used for components not being changed. /// Whether the alpha component is visible and rendered in the bitmap. /// This property is ignored when the alpha component itself is being rendered. - /// Fix the saturation and value components to maximum - /// during calculation with the HSVA color model. - /// This will ensure colors are always discernible regardless of saturation/value. + /// Whether the slider adapts rendering to improve user-perception over exactness. + /// This will ensure colors are always discernible. /// A new bitmap representing a gradient of color component values. public static async Task> CreateComponentBitmapAsync( int width, @@ -43,7 +42,7 @@ namespace Avalonia.Controls.Primitives ColorComponent component, HsvColor baseHsvColor, bool isAlphaVisible, - bool isSaturationValueMaxForced) + bool isPerceptive) { if (width == 0 || height == 0) { @@ -79,22 +78,41 @@ namespace Avalonia.Controls.Primitives baseRgbColor = baseHsvColor.ToRgb(); } - // Maximize Saturation and Value components when in HSVA mode - if (isSaturationValueMaxForced && - colorModel == ColorModel.Hsva && + // Apply any perceptive adjustments to the color + if (isPerceptive && component != ColorComponent.Alpha) { - switch (component) + if (colorModel == ColorModel.Hsva) { - case ColorComponent.Component1: - baseHsvColor = new HsvColor(baseHsvColor.A, baseHsvColor.H, 1.0, 1.0); - break; - case ColorComponent.Component2: - baseHsvColor = new HsvColor(baseHsvColor.A, baseHsvColor.H, baseHsvColor.S, 1.0); - break; - case ColorComponent.Component3: - baseHsvColor = new HsvColor(baseHsvColor.A, baseHsvColor.H, 1.0, baseHsvColor.V); - break; + // Maximize Saturation and Value components + switch (component) + { + case ColorComponent.Component1: // Hue + baseHsvColor = new HsvColor(baseHsvColor.A, baseHsvColor.H, 1.0, 1.0); + break; + case ColorComponent.Component2: // Saturation + baseHsvColor = new HsvColor(baseHsvColor.A, baseHsvColor.H, baseHsvColor.S, 1.0); + break; + case ColorComponent.Component3: // Value + baseHsvColor = new HsvColor(baseHsvColor.A, baseHsvColor.H, 1.0, baseHsvColor.V); + break; + } + } + else + { + // Minimize component values other than the current one + switch (component) + { + case ColorComponent.Component1: // Red + baseRgbColor = new Color(baseRgbColor.A, baseRgbColor.R, 0, 0); + break; + case ColorComponent.Component2: // Green + baseRgbColor = new Color(baseRgbColor.A, 0, baseRgbColor.G, 0); + break; + case ColorComponent.Component3: // Blue + baseRgbColor = new Color(baseRgbColor.A, 0, 0, baseRgbColor.B); + break; + } } } diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml index 592494a1e3..a0daff2e3f 100644 --- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml +++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml @@ -114,7 +114,7 @@ AutomationProperties.Name="Third Component" Grid.Column="0" IsAlphaVisible="False" - IsSaturationValueMaxForced="True" + IsPerceptive="False" Orientation="Vertical" ColorModel="Hsva" ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}" @@ -502,6 +502,21 @@ + + + + + + + diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml index 0f5a93e75b..e7db283c9e 100644 --- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml +++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml @@ -361,7 +361,7 @@ AutomationProperties.Name="Third Component" Grid.Column="0" IsAlphaVisible="False" - IsSaturationValueMaxForced="True" + IsPerceptive="False" Orientation="Vertical" ColorModel="Hsva" ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}" @@ -746,6 +746,21 @@ + + + + + + + diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml index 131ea41eba..bad4ae9e44 100644 --- a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml +++ b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml @@ -113,7 +113,7 @@ AutomationProperties.Name="Third Component" Grid.Column="0" IsAlphaVisible="False" - IsSaturationValueMaxForced="True" + IsPerceptive="False" Orientation="Vertical" ColorModel="Hsva" ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}" @@ -501,6 +501,21 @@ + + + + + + + diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml index c389ac310a..a3cb7bca1d 100644 --- a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml +++ b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml @@ -323,7 +323,7 @@ AutomationProperties.Name="Third Component" Grid.Column="0" IsAlphaVisible="False" - IsSaturationValueMaxForced="True" + IsPerceptive="False" Orientation="Vertical" ColorModel="Hsva" ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}" @@ -708,6 +708,21 @@ + + + + + + + From 31a1e514fa9d4075386b032b117fb46eab1b56b7 Mon Sep 17 00:00:00 2001 From: robloo Date: Sun, 7 May 2023 10:11:34 -0400 Subject: [PATCH 06/16] Improve ColorPreviewer margins with drop shadow This sets ClipToBounds to false for the control which allows the drop shadow to fully draw above/below the control itself. Doing this removes the need to adjust margins in almost all places. This is a big simplification to margin calculation and removes strange negative values. --- samples/ControlCatalog/Pages/ColorPickerPage.xaml | 3 ++- .../Themes/Fluent/ColorPicker.xaml | 4 ++-- .../Themes/Fluent/ColorPreviewer.xaml | 13 +++++-------- .../Themes/Fluent/ColorView.xaml | 4 ++-- .../Themes/Simple/ColorPicker.xaml | 4 ++-- .../Themes/Simple/ColorPreviewer.xaml | 13 +++++-------- .../Themes/Simple/ColorView.xaml | 4 ++-- 7 files changed, 20 insertions(+), 25 deletions(-) diff --git a/samples/ControlCatalog/Pages/ColorPickerPage.xaml b/samples/ControlCatalog/Pages/ColorPickerPage.xaml index b759720cf2..25fffabfd2 100644 --- a/samples/ControlCatalog/Pages/ColorPickerPage.xaml +++ b/samples/ControlCatalog/Pages/ColorPickerPage.xaml @@ -103,7 +103,8 @@ HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1}" />--> + HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1}" + Margin="0,2,0,0" /> diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml index a0daff2e3f..bbb3c0c01a 100644 --- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml +++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml @@ -490,11 +490,11 @@ - + diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPreviewer.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPreviewer.xaml index e05fa5a907..fabc5d0349 100644 --- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPreviewer.xaml +++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPreviewer.xaml @@ -8,7 +8,9 @@ - + + + @@ -21,7 +23,6 @@ Height="{StaticResource ColorPreviewerAccentSectionHeight}" Width="{StaticResource ColorPreviewerAccentSectionWidth}" ColumnDefinitions="*,*" - Margin="0,0,-10,0" VerticalAlignment="Center"> + CornerRadius="{TemplateBinding CornerRadius}"> @@ -82,8 +80,7 @@ + VerticalAlignment="Stretch"> diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml index e7db283c9e..6159a96cc5 100644 --- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml +++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml @@ -737,11 +737,11 @@ - + diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml index bad4ae9e44..82c98e22f7 100644 --- a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml +++ b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml @@ -489,11 +489,11 @@ - + diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPreviewer.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPreviewer.xaml index a39dd91f52..9e123b2a1f 100644 --- a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPreviewer.xaml +++ b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPreviewer.xaml @@ -8,7 +8,9 @@ - + + + @@ -21,7 +23,6 @@ Height="{StaticResource ColorPreviewerAccentSectionHeight}" Width="{StaticResource ColorPreviewerAccentSectionWidth}" ColumnDefinitions="*,*" - Margin="0,0,-10,0" VerticalAlignment="Center"> + CornerRadius="{TemplateBinding CornerRadius}"> @@ -82,8 +80,7 @@ + VerticalAlignment="Stretch"> diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml index a3cb7bca1d..97a8d4b885 100644 --- a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml +++ b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml @@ -699,11 +699,11 @@ - + From 6ddef20ef7847c05855b1ee3af8958a757ffc884 Mon Sep 17 00:00:00 2001 From: robloo Date: Sun, 7 May 2023 10:17:19 -0400 Subject: [PATCH 07/16] Improve comments --- .../ColorView/ColorView.Properties.cs | 6 ++++++ src/Avalonia.Controls.ColorPicker/Helpers/Hsv.cs | 2 +- src/Avalonia.Controls.ColorPicker/Helpers/Rgb.cs | 2 +- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/Avalonia.Controls.ColorPicker/ColorView/ColorView.Properties.cs b/src/Avalonia.Controls.ColorPicker/ColorView/ColorView.Properties.cs index 532e87a9fc..701dab97f7 100644 --- a/src/Avalonia.Controls.ColorPicker/ColorView/ColorView.Properties.cs +++ b/src/Avalonia.Controls.ColorPicker/ColorView/ColorView.Properties.cs @@ -504,6 +504,12 @@ namespace Avalonia.Controls /// /// Gets or sets the index of the selected tab/panel/page (subview). /// + /// + /// When using the default control theme, this property is designed to be used with the + /// enum. The enum defines the + /// index values of each of the three standard tabs. + /// Use like `SelectedIndex = (int)ColorViewTab.Palette`. + /// public int SelectedIndex { get => GetValue(SelectedIndexProperty); diff --git a/src/Avalonia.Controls.ColorPicker/Helpers/Hsv.cs b/src/Avalonia.Controls.ColorPicker/Helpers/Hsv.cs index 8a425b9581..76f33b3d83 100644 --- a/src/Avalonia.Controls.ColorPicker/Helpers/Hsv.cs +++ b/src/Avalonia.Controls.ColorPicker/Helpers/Hsv.cs @@ -11,7 +11,7 @@ namespace Avalonia.Controls.Primitives /// Contains and allows modification of Hue, Saturation and Value components. /// /// - /// The is a specialized struct optimized for permanence and memory: + /// The is a specialized struct optimized for performance and memory: /// /// This is not a read-only struct like and allows editing the fields /// Removes the alpha component unnecessary in core calculations diff --git a/src/Avalonia.Controls.ColorPicker/Helpers/Rgb.cs b/src/Avalonia.Controls.ColorPicker/Helpers/Rgb.cs index 72e3821c2b..ee81a22ecf 100644 --- a/src/Avalonia.Controls.ColorPicker/Helpers/Rgb.cs +++ b/src/Avalonia.Controls.ColorPicker/Helpers/Rgb.cs @@ -12,7 +12,7 @@ namespace Avalonia.Controls.Primitives /// Contains and allows modification of Red, Green and Blue components. /// /// - /// The is a specialized struct optimized for permanence and memory: + /// The is a specialized struct optimized for performance and memory: /// /// This is not a read-only struct like and allows editing the fields /// Removes the alpha component unnecessary in core calculations From 8fed1f30f0ef19703a1e4fc7dddd12aab363012a Mon Sep 17 00:00:00 2001 From: robloo Date: Thu, 11 May 2023 21:37:05 -0400 Subject: [PATCH 08/16] Always enable ColorSlider.IsPerceptive This works-around #11271 and stabilizes the API. It can be revisited later. --- .../Themes/Fluent/ColorPicker.xaml | 4 +++- .../Themes/Fluent/ColorView.xaml | 4 +++- .../Themes/Simple/ColorPicker.xaml | 4 +++- .../Themes/Simple/ColorView.xaml | 4 +++- 4 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml index bbb3c0c01a..f3100a648a 100644 --- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml +++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml @@ -114,7 +114,7 @@ AutomationProperties.Name="Third Component" Grid.Column="0" IsAlphaVisible="False" - IsPerceptive="False" + IsPerceptive="True" Orientation="Vertical" ColorModel="Hsva" ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}" @@ -503,6 +503,7 @@ + diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml index 6159a96cc5..8793467b36 100644 --- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml +++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml @@ -361,7 +361,7 @@ AutomationProperties.Name="Third Component" Grid.Column="0" IsAlphaVisible="False" - IsPerceptive="False" + IsPerceptive="True" Orientation="Vertical" ColorModel="Hsva" ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}" @@ -747,6 +747,7 @@ + diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml index 82c98e22f7..d9ba8bb9d2 100644 --- a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml +++ b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml @@ -113,7 +113,7 @@ AutomationProperties.Name="Third Component" Grid.Column="0" IsAlphaVisible="False" - IsPerceptive="False" + IsPerceptive="True" Orientation="Vertical" ColorModel="Hsva" ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}" @@ -502,6 +502,7 @@ + diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml index 97a8d4b885..d4f02933f2 100644 --- a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml +++ b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml @@ -323,7 +323,7 @@ AutomationProperties.Name="Third Component" Grid.Column="0" IsAlphaVisible="False" - IsPerceptive="False" + IsPerceptive="True" Orientation="Vertical" ColorModel="Hsva" ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}" @@ -709,6 +709,7 @@ + From 1d5703e5657ac6e9f57c7a0bb40e558c179b89fa Mon Sep 17 00:00:00 2001 From: robloo Date: Sat, 13 May 2023 11:44:48 -0400 Subject: [PATCH 09/16] Remove static color conversion methods This functionality is already provided by, for example, HsvColor.ToRgb(). Having these separate methods just clutters the API. --- src/Avalonia.Base/Media/Color.cs | 30 ----------------------------- src/Avalonia.Base/Media/HslColor.cs | 12 +----------- src/Avalonia.Base/Media/HsvColor.cs | 12 +----------- 3 files changed, 2 insertions(+), 52 deletions(-) diff --git a/src/Avalonia.Base/Media/Color.cs b/src/Avalonia.Base/Media/Color.cs index 50c2faacc0..7d74b4d602 100644 --- a/src/Avalonia.Base/Media/Color.cs +++ b/src/Avalonia.Base/Media/Color.cs @@ -517,21 +517,6 @@ namespace Avalonia.Media } } - /// - /// Converts the given RGB color to its HSL color equivalent. - /// - /// The color in the RGB color model. - /// A new equivalent to the given RGBA values. - public static HslColor ToHsl(Color color) - { - // Normalize RGBA components into the 0..1 range - return Color.ToHsl( - (byteToDouble * color.R), - (byteToDouble * color.G), - (byteToDouble * color.B), - (byteToDouble * color.A)); - } - /// /// Converts the given RGBA color component values to their HSL color equivalent. /// @@ -606,21 +591,6 @@ namespace Avalonia.Media return new HslColor(a, 60 * h1, saturation, lightness, clampValues: false); } - /// - /// Converts the given RGB color to its HSV color equivalent. - /// - /// The color in the RGB color model. - /// A new equivalent to the given RGBA values. - public static HsvColor ToHsv(Color color) - { - // Normalize RGBA components into the 0..1 range - return Color.ToHsv( - (byteToDouble * color.R), - (byteToDouble * color.G), - (byteToDouble * color.B), - (byteToDouble * color.A)); - } - /// /// Converts the given RGBA color component values to their HSV color equivalent. /// diff --git a/src/Avalonia.Base/Media/HslColor.cs b/src/Avalonia.Base/Media/HslColor.cs index 897c883875..624cc88ad4 100644 --- a/src/Avalonia.Base/Media/HslColor.cs +++ b/src/Avalonia.Base/Media/HslColor.cs @@ -90,7 +90,7 @@ namespace Avalonia.Media /// The RGB color to convert to HSL. public HslColor(Color color) { - var hsl = Color.ToHsl(color); + var hsl = color.ToHsl(); A = hsl.A; H = hsl.H; @@ -349,16 +349,6 @@ namespace Avalonia.Media return new HslColor(1.0, h, s, l); } - /// - /// Converts the given HSL color to its RGB color equivalent. - /// - /// The color in the HSL color model. - /// A new RGB equivalent to the given HSLA values. - public static Color ToRgb(HslColor hslColor) - { - return HslColor.ToRgb(hslColor.H, hslColor.S, hslColor.L, hslColor.A); - } - /// /// Converts the given HSLA color component values to their RGB color equivalent. /// diff --git a/src/Avalonia.Base/Media/HsvColor.cs b/src/Avalonia.Base/Media/HsvColor.cs index df68252065..3c6336c445 100644 --- a/src/Avalonia.Base/Media/HsvColor.cs +++ b/src/Avalonia.Base/Media/HsvColor.cs @@ -90,7 +90,7 @@ namespace Avalonia.Media /// The RGB color to convert to HSV. public HsvColor(Color color) { - var hsv = Color.ToHsv(color); + var hsv = color.ToHsv(); A = hsv.A; H = hsv.H; @@ -379,16 +379,6 @@ namespace Avalonia.Media return new HsvColor(1.0, h, s, v); } - /// - /// Converts the given HSV color to its RGB color equivalent. - /// - /// The color in the HSV color model. - /// A new RGB equivalent to the given HSVA values. - public static Color ToRgb(HsvColor hsvColor) - { - return HsvColor.ToRgb(hsvColor.H, hsvColor.S, hsvColor.V, hsvColor.A); - } - /// /// Converts the given HSVA color component values to their RGB color equivalent. /// From fac0a045d47e8e5a10ad52393409e62619b2fb55 Mon Sep 17 00:00:00 2001 From: robloo Date: Sat, 13 May 2023 11:46:16 -0400 Subject: [PATCH 10/16] Add direct conversions for HsvColor.ToHsl() and HslColor.ToHsv() --- src/Avalonia.Base/Media/Color.cs | 2 - src/Avalonia.Base/Media/HslColor.cs | 66 ++++++++++++++++++- src/Avalonia.Base/Media/HsvColor.cs | 66 ++++++++++++++++++- .../Media/ColorTests.cs | 29 ++++++++ 4 files changed, 157 insertions(+), 6 deletions(-) diff --git a/src/Avalonia.Base/Media/Color.cs b/src/Avalonia.Base/Media/Color.cs index 7d74b4d602..3ee151389a 100644 --- a/src/Avalonia.Base/Media/Color.cs +++ b/src/Avalonia.Base/Media/Color.cs @@ -478,7 +478,6 @@ namespace Avalonia.Media /// The HSL equivalent color. public HslColor ToHsl() { - // Don't use the HslColor(Color) constructor to avoid an extra HslColor return Color.ToHsl(R, G, B, A); } @@ -488,7 +487,6 @@ namespace Avalonia.Media /// The HSV equivalent color. public HsvColor ToHsv() { - // Don't use the HsvColor(Color) constructor to avoid an extra HsvColor return Color.ToHsv(R, G, B, A); } diff --git a/src/Avalonia.Base/Media/HslColor.cs b/src/Avalonia.Base/Media/HslColor.cs index 624cc88ad4..84f2149367 100644 --- a/src/Avalonia.Base/Media/HslColor.cs +++ b/src/Avalonia.Base/Media/HslColor.cs @@ -165,10 +165,18 @@ namespace Avalonia.Media /// The RGB equivalent color. public Color ToRgb() { - // Use the by-component conversion method directly for performance return HslColor.ToRgb(H, S, L, A); } + /// + /// Returns the HSV color model equivalent of this HSL color. + /// + /// The HSV equivalent color. + public HsvColor ToHsv() + { + return HslColor.ToHsv(H, S, L, A); + } + /// public override string ToString() { @@ -432,13 +440,67 @@ namespace Avalonia.Media b1 = x; } - return Color.FromArgb( + return new Color( (byte)Math.Round(255 * alpha), (byte)Math.Round(255 * (r1 + m)), (byte)Math.Round(255 * (g1 + m)), (byte)Math.Round(255 * (b1 + m))); } + /// + /// Converts the given HSLA color component values to their HSV color equivalent. + /// + /// The Hue component in the HSL color model in the range from 0..360. + /// The Saturation component in the HSL color model in the range from 0..1. + /// The Lightness component in the HSL color model in the range from 0..1. + /// The Alpha component in the range from 0..1. + /// A new equivalent to the given HSLA values. + public static HsvColor ToHsv( + double hue, + double saturation, + double lightness, + double alpha = 1.0) + { + // We want the hue to be between 0 and 359, + // so we first ensure that that's the case. + while (hue >= 360.0) + { + hue -= 360.0; + } + + while (hue < 0.0) + { + hue += 360.0; + } + + // We similarly clamp saturation, lightness and alpha between 0 and 1. + saturation = saturation < 0.0 ? 0.0 : saturation; + saturation = saturation > 1.0 ? 1.0 : saturation; + + lightness = lightness < 0.0 ? 0.0 : lightness; + lightness = lightness > 1.0 ? 1.0 : lightness; + + alpha = alpha < 0.0 ? 0.0 : alpha; + alpha = alpha > 1.0 ? 1.0 : alpha; + + // The conversion algorithm is from the below link + // https://en.wikipedia.org/wiki/HSL_and_HSV#Interconversion + + double s; + double v = lightness + (saturation * Math.Min(lightness, 1.0 - lightness)); + + if (v <= 0) + { + s = 0; + } + else + { + s = 2.0 * (1.0 - (lightness / v)); + } + + return new HsvColor(alpha, hue, s, v); + } + /// /// Indicates whether the values of two specified objects are equal. /// diff --git a/src/Avalonia.Base/Media/HsvColor.cs b/src/Avalonia.Base/Media/HsvColor.cs index 3c6336c445..03949d32aa 100644 --- a/src/Avalonia.Base/Media/HsvColor.cs +++ b/src/Avalonia.Base/Media/HsvColor.cs @@ -195,10 +195,18 @@ namespace Avalonia.Media /// The RGB equivalent color. public Color ToRgb() { - // Use the by-component conversion method directly for performance return HsvColor.ToRgb(H, S, V, A); } + /// + /// Returns the HSL color model equivalent of this HSV color. + /// + /// The HSL equivalent color. + public HslColor ToHsl() + { + return HsvColor.ToHsl(H, S, V, A); + } + /// public override string ToString() { @@ -510,13 +518,67 @@ namespace Avalonia.Media break; } - return Color.FromArgb( + return new Color( (byte)Math.Round(alpha * 255), (byte)Math.Round(r * 255), (byte)Math.Round(g * 255), (byte)Math.Round(b * 255)); } + /// + /// Converts the given HSVA color component values to their HSL color equivalent. + /// + /// The Hue component in the HSV color model in the range from 0..360. + /// The Saturation component in the HSV color model in the range from 0..1. + /// The Value component in the HSV color model in the range from 0..1. + /// The Alpha component in the range from 0..1. + /// A new equivalent to the given HSVA values. + public static HslColor ToHsl( + double hue, + double saturation, + double value, + double alpha = 1.0) + { + // We want the hue to be between 0 and 359, + // so we first ensure that that's the case. + while (hue >= 360.0) + { + hue -= 360.0; + } + + while (hue < 0.0) + { + hue += 360.0; + } + + // We similarly clamp saturation, value and alpha between 0 and 1. + saturation = saturation < 0.0 ? 0.0 : saturation; + saturation = saturation > 1.0 ? 1.0 : saturation; + + value = value < 0.0 ? 0.0 : value; + value = value > 1.0 ? 1.0 : value; + + alpha = alpha < 0.0 ? 0.0 : alpha; + alpha = alpha > 1.0 ? 1.0 : alpha; + + // The conversion algorithm is from the below link + // https://en.wikipedia.org/wiki/HSL_and_HSV#Interconversion + + double s; + double l = value * (1.0 - (saturation / 2.0)); + + if (l <= 0 || l >= 1) + { + s = 0.0; + } + else + { + s = (value - l) / Math.Min(l, 1.0 - l); + } + + return new HslColor(alpha, hue, s, l); + } + /// /// Indicates whether the values of two specified objects are equal. /// diff --git a/tests/Avalonia.Base.UnitTests/Media/ColorTests.cs b/tests/Avalonia.Base.UnitTests/Media/ColorTests.cs index 36929d5e95..1ed3ea50b9 100644 --- a/tests/Avalonia.Base.UnitTests/Media/ColorTests.cs +++ b/tests/Avalonia.Base.UnitTests/Media/ColorTests.cs @@ -335,5 +335,34 @@ namespace Avalonia.Base.UnitTests.Media Assert.True(dataPoint.Item2 == parsedColor); } } + + [Fact] + public void Hsv_To_From_Hsl_Conversion() + { + // Note that conversion of values more representative of actual colors is not done due to rounding error + // It would be necessary to introduce a different equality comparison that accounts for rounding differences in values + // This is a result of the math in the conversion itself + // RGB doesn't have this problem because it uses whole numbers + var data = new Tuple[] + { + Tuple.Create(new HsvColor(1.0, 0.0, 0.0, 0.0), new HslColor(1.0, 0.0, 0.0, 0.0)), + Tuple.Create(new HsvColor(1.0, 359.0, 1.0, 1.0), new HslColor(1.0, 359.0, 1.0, 0.5)), + + Tuple.Create(new HsvColor(1.0, 128.0, 0.0, 0.0), new HslColor(1.0, 128.0, 0.0, 0.0)), + Tuple.Create(new HsvColor(1.0, 128.0, 0.0, 1.0), new HslColor(1.0, 128.0, 0.0, 1.0)), + Tuple.Create(new HsvColor(1.0, 128.0, 1.0, 1.0), new HslColor(1.0, 128.0, 1.0, 0.5)), + + Tuple.Create(new HsvColor(0.23, 0.5, 1.0, 1.0), new HslColor(0.23, 0.5, 1.0, 0.5)), + }; + + foreach (var dataPoint in data) + { + var convertedHsl = dataPoint.Item1.ToHsl(); + var convertedHsv = dataPoint.Item2.ToHsv(); + + Assert.Equal(convertedHsv, dataPoint.Item1); + Assert.Equal(convertedHsl, dataPoint.Item2); + } + } } } From a91571aa49c025b96a4a280c64d1f6e9ba8fdea1 Mon Sep 17 00:00:00 2001 From: robloo Date: Sat, 13 May 2023 11:47:34 -0400 Subject: [PATCH 11/16] Switch ColorPreviewer's AccentColorConverter to use the FluentTheme's HSL algorithm --- .../Converters/AccentColorConverter.cs | 54 +++++++++++++++---- 1 file changed, 45 insertions(+), 9 deletions(-) diff --git a/src/Avalonia.Controls.ColorPicker/Converters/AccentColorConverter.cs b/src/Avalonia.Controls.ColorPicker/Converters/AccentColorConverter.cs index 2c8e09adc9..7a8644f9de 100644 --- a/src/Avalonia.Controls.ColorPicker/Converters/AccentColorConverter.cs +++ b/src/Avalonia.Controls.ColorPicker/Converters/AccentColorConverter.cs @@ -13,11 +13,6 @@ namespace Avalonia.Controls.Primitives.Converters /// public class AccentColorConverter : IValueConverter { - /// - /// The amount to change the Value component for each accent color step. - /// - public const double ValueDelta = 0.1; - /// public object? Convert( object? value, @@ -101,13 +96,54 @@ namespace Avalonia.Controls.Primitives.Converters /// The new accent color. public static HsvColor GetAccent(HsvColor hsvColor, int accentStep) { + // Accent steps are taken from the FluentTheme: + // SystemAccentColors.cs -> CalculateAccentShades() + // + // This is currently believed to be the most accurate representation of the algorithm in Windows. + // It replaces the previous implementation which adjusted Value +/- 10% per step. + // Any changes to FluentTheme's accent color calculation should be copied here. + + const double dark1step = 28.5 / 255d; + const double dark2step = 49 / 255d; + const double dark3step = 74.5 / 255d; + const double light1step = 39 / 255d; + const double light2step = 70 / 255d; + const double light3step = 103 / 255d; + if (accentStep != 0) { - double colorValue = hsvColor.V; - colorValue += (accentStep * AccentColorConverter.ValueDelta); - colorValue = Math.Round(colorValue, 2); + // Temporary colors are used to preserve Hue through the RGB conversion + // Otherwise, at Black/White hue information would be lost + // This should be improved in the future with direct conversions to/from HSV/HSL. + var hslAccent = hsvColor.ToHsl(); + + double lightnessAdjustment = 0.0; + switch (accentStep) + { + case -3: + lightnessAdjustment = -dark3step; + break; + case -2: + lightnessAdjustment = -dark2step; + break; + case -1: + lightnessAdjustment = -dark1step; + break; + case 1: + lightnessAdjustment = light1step; + break; + case 2: + lightnessAdjustment = light2step; + break; + case 3: + lightnessAdjustment = light3step; + break; + } + + var adjustedHsl = new HslColor(hslAccent.A, hslAccent.H, hslAccent.S, hslAccent.L + lightnessAdjustment); + // Rounding may be required here - return new HsvColor(hsvColor.A, hsvColor.H, hsvColor.S, colorValue); + return adjustedHsl.ToHsv(); } else { From 27dff43e53fcc2c78243999f24ee0ab74f6c0e50 Mon Sep 17 00:00:00 2001 From: robloo Date: Sat, 13 May 2023 11:48:50 -0400 Subject: [PATCH 12/16] Revert "Switch ColorPreviewer's AccentColorConverter to use the FluentTheme's HSL algorithm" This reverts commit a91571aa49c025b96a4a280c64d1f6e9ba8fdea1. --- .../Converters/AccentColorConverter.cs | 54 ++++--------------- 1 file changed, 9 insertions(+), 45 deletions(-) diff --git a/src/Avalonia.Controls.ColorPicker/Converters/AccentColorConverter.cs b/src/Avalonia.Controls.ColorPicker/Converters/AccentColorConverter.cs index 7a8644f9de..2c8e09adc9 100644 --- a/src/Avalonia.Controls.ColorPicker/Converters/AccentColorConverter.cs +++ b/src/Avalonia.Controls.ColorPicker/Converters/AccentColorConverter.cs @@ -13,6 +13,11 @@ namespace Avalonia.Controls.Primitives.Converters /// public class AccentColorConverter : IValueConverter { + /// + /// The amount to change the Value component for each accent color step. + /// + public const double ValueDelta = 0.1; + /// public object? Convert( object? value, @@ -96,54 +101,13 @@ namespace Avalonia.Controls.Primitives.Converters /// The new accent color. public static HsvColor GetAccent(HsvColor hsvColor, int accentStep) { - // Accent steps are taken from the FluentTheme: - // SystemAccentColors.cs -> CalculateAccentShades() - // - // This is currently believed to be the most accurate representation of the algorithm in Windows. - // It replaces the previous implementation which adjusted Value +/- 10% per step. - // Any changes to FluentTheme's accent color calculation should be copied here. - - const double dark1step = 28.5 / 255d; - const double dark2step = 49 / 255d; - const double dark3step = 74.5 / 255d; - const double light1step = 39 / 255d; - const double light2step = 70 / 255d; - const double light3step = 103 / 255d; - if (accentStep != 0) { - // Temporary colors are used to preserve Hue through the RGB conversion - // Otherwise, at Black/White hue information would be lost - // This should be improved in the future with direct conversions to/from HSV/HSL. - var hslAccent = hsvColor.ToHsl(); - - double lightnessAdjustment = 0.0; - switch (accentStep) - { - case -3: - lightnessAdjustment = -dark3step; - break; - case -2: - lightnessAdjustment = -dark2step; - break; - case -1: - lightnessAdjustment = -dark1step; - break; - case 1: - lightnessAdjustment = light1step; - break; - case 2: - lightnessAdjustment = light2step; - break; - case 3: - lightnessAdjustment = light3step; - break; - } - - var adjustedHsl = new HslColor(hslAccent.A, hslAccent.H, hslAccent.S, hslAccent.L + lightnessAdjustment); - // Rounding may be required here + double colorValue = hsvColor.V; + colorValue += (accentStep * AccentColorConverter.ValueDelta); + colorValue = Math.Round(colorValue, 2); - return adjustedHsl.ToHsv(); + return new HsvColor(hsvColor.A, hsvColor.H, hsvColor.S, colorValue); } else { From a4661bbee11c9a52adbb392721403cbccfde35f4 Mon Sep 17 00:00:00 2001 From: robloo Date: Sat, 13 May 2023 11:58:08 -0400 Subject: [PATCH 13/16] Improve IsPerceptive comments --- .../ColorSlider/ColorSlider.Properties.cs | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/Avalonia.Controls.ColorPicker/ColorSlider/ColorSlider.Properties.cs b/src/Avalonia.Controls.ColorPicker/ColorSlider/ColorSlider.Properties.cs index b2deb913f1..a065a7f826 100644 --- a/src/Avalonia.Controls.ColorPicker/ColorSlider/ColorSlider.Properties.cs +++ b/src/Avalonia.Controls.ColorPicker/ColorSlider/ColorSlider.Properties.cs @@ -126,17 +126,19 @@ namespace Avalonia.Controls.Primitives /// /// Gets or sets a value indicating whether the slider adapts rendering to improve user-perception - /// over exactness. When true in the HSVA color model, this ensures that the gradient is always visible and - /// never washed out regardless of the actual color. When true in the RGBA color model, this ensures - /// the components always appear as red, green or blue. + /// over exactness. /// /// + /// When true in the HSVA color model, this ensures that the gradient is always visible and + /// never washed out regardless of the actual color. When true in the RGBA color model, this ensures + /// the gradient always appears as red, green or blue. + ///

/// For example, with Hue in the HSVA color model, the Saturation and Value components are always forced /// to maximum values during rendering. In the RGBA color model, all components other than /// are forced to minimum values during rendering. ///

- /// Also note this property will only adjust components other than during rendering. - /// This doesn't change the values of any components in the color – it is only for display. + /// Note this property will only adjust components other than during rendering. + /// This also doesn't change the values of any components in the actual color – it is only for display. /// public bool IsPerceptive { From af346d31785633d67ee2ba0db1c26a0a17f59dff Mon Sep 17 00:00:00 2001 From: Dan Walmsley Date: Wed, 17 May 2023 13:30:51 +0100 Subject: [PATCH 14/16] bump build services with latest fixes. --- packages/Avalonia/Avalonia.csproj | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/Avalonia/Avalonia.csproj b/packages/Avalonia/Avalonia.csproj index 412251bc9c..9f2cf870f9 100644 --- a/packages/Avalonia/Avalonia.csproj +++ b/packages/Avalonia/Avalonia.csproj @@ -5,7 +5,7 @@ - + all From 4b09e99382cd5f8cc8c4e8c090c061e5dfce1cf6 Mon Sep 17 00:00:00 2001 From: Dan Walmsley Date: Wed, 17 May 2023 15:49:58 +0100 Subject: [PATCH 15/16] bump avalonia build services. --- packages/Avalonia/Avalonia.csproj | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/Avalonia/Avalonia.csproj b/packages/Avalonia/Avalonia.csproj index 9f2cf870f9..8ac2fb28ed 100644 --- a/packages/Avalonia/Avalonia.csproj +++ b/packages/Avalonia/Avalonia.csproj @@ -5,7 +5,7 @@ - + all From c6e047e6d4dff79dcd08cfd56a5193991eb56cf7 Mon Sep 17 00:00:00 2001 From: wangchuang <515497782@qq.com> Date: Thu, 18 May 2023 09:37:56 +0800 Subject: [PATCH 16/16] fix: CalendarItem PopulateGrids --- src/Avalonia.Controls/Calendar/CalendarItem.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Avalonia.Controls/Calendar/CalendarItem.cs b/src/Avalonia.Controls/Calendar/CalendarItem.cs index 2e3f1f96ce..e81ed8072e 100644 --- a/src/Avalonia.Controls/Calendar/CalendarItem.cs +++ b/src/Avalonia.Controls/Calendar/CalendarItem.cs @@ -171,7 +171,7 @@ namespace Avalonia.Controls.Primitives var childCount = Calendar.RowsPerMonth + Calendar.RowsPerMonth * Calendar.ColumnsPerMonth; using var children = new PooledList(childCount); - for (int i = 0; i < Calendar.RowsPerMonth; i++) + for (int i = 0; i < Calendar.ColumnsPerMonth; i++) { if (DayTitleTemplate?.Build() is Control cell) {