Merge pull request #10816 from robloo/colorpicker-updates-6

ColorPicker Fixes

src/Avalonia.Controls.ColorPicker/ColorView/ColorView.Properties.cs

@@ -48,7 +48,7 @@ namespace Avalonia.Controls
         public static readonly StyledProperty<AlphaComponentPosition> HexInputAlphaPositionProperty =
             AvaloniaProperty.Register<ColorView, AlphaComponentPosition>(
                 nameof(HexInputAlphaPosition),
-                AlphaComponentPosition.Trailing); // Match CSS (and default slider order) instead of XAML/WinUI
+                AlphaComponentPosition.Leading); // By default match XAML and the WinUI control
 
         /// <summary>
         /// Defines the <see cref="HsvColor"/> property.

src/Avalonia.Controls.ColorPicker/ColorView/ColorView.cs

@@ -61,7 +61,11 @@ namespace Avalonia.Controls
         {
             if (_hexTextBox != null)
             {
-                _hexTextBox.Text = ColorToHexConverter.ToHexString(Color, HexInputAlphaPosition);
+                _hexTextBox.Text = ColorToHexConverter.ToHexString(
+                    Color,
+                    HexInputAlphaPosition,
+                    includeAlpha: (IsAlphaEnabled && IsAlphaVisible),
+                    includeSymbol: false);
             }
         }
 

src/Avalonia.Controls.ColorPicker/Converters/ColorToHexConverter.cs

@@ -11,6 +11,18 @@ namespace Avalonia.Controls.Converters
     /// </summary>
     public class ColorToHexConverter : IValueConverter
     {
+        /// <summary>
+        /// Gets or sets a value indicating whether the alpha component is visible in the Hex formatted text.
+        /// </summary>
+        /// <remarks>
+        /// When hidden the existing alpha component value is maintained. Also when hidden the user is still
+        /// able to input an 8-digit number with alpha. Alpha will be processed but then removed when displayed.
+        ///
+        /// Because this property only controls whether alpha is displayed (and it is still processed regardless)
+        /// it is termed 'Visible' instead of 'Enabled'.
+        /// </remarks>
+        public bool IsAlphaVisible { get; set; } = true;
+
         /// <summary>
         /// Gets or sets the position of a color's alpha component relative to all other components.
         /// </summary>
@@ -48,7 +60,7 @@ namespace Avalonia.Controls.Converters
                 return AvaloniaProperty.UnsetValue;
             }
 
-            return ToHexString(color, AlphaPosition, includeSymbol);
+            return ToHexString(color, AlphaPosition, IsAlphaVisible, includeSymbol);
         }
 
         /// <inheritdoc/>
@@ -67,26 +79,40 @@ namespace Avalonia.Controls.Converters
         /// </summary>
         /// <param name="color">The color to represent as a hex value string.</param>
         /// <param name="alphaPosition">The output position of the alpha component.</param>
+        /// <param name="includeAlpha">Whether the alpha component will be included in the hex string.</param>
         /// <param name="includeSymbol">Whether the hex symbol '#' will be added.</param>
         /// <returns>The input color converted to its hex value string.</returns>
         public static string ToHexString(
             Color color,
             AlphaComponentPosition alphaPosition,
+            bool includeAlpha = true,
             bool includeSymbol = false)
         {
             uint intColor;
-            if (alphaPosition == AlphaComponentPosition.Trailing)
+            string hexColor;
+
+            if (includeAlpha)
             {
-                intColor = ((uint)color.R << 24) | ((uint)color.G << 16) | ((uint)color.B << 8) | (uint)color.A;
+                if (alphaPosition == AlphaComponentPosition.Trailing)
+                {
+                    intColor = ((uint)color.R << 24) | ((uint)color.G << 16) | ((uint)color.B << 8) | (uint)color.A;
+                }
+                else
+                {
+                    // Default is Leading alpha (same as XAML)
+                    intColor = ((uint)color.A << 24) | ((uint)color.R << 16) | ((uint)color.G << 8) | (uint)color.B;
+                }
+
+                hexColor = intColor.ToString("x8", CultureInfo.InvariantCulture).ToUpperInvariant();
             }
             else
             {
-                // Default is Leading alpha
-                intColor = ((uint)color.A << 24) | ((uint)color.R << 16) | ((uint)color.G << 8) | (uint)color.B;
+                // In this case the alpha position no longer matters
+                // Both cases are calculated the same
+                intColor = ((uint)color.R << 16) | ((uint)color.G << 8) | (uint)color.B;
+                hexColor = intColor.ToString("x6", CultureInfo.InvariantCulture).ToUpperInvariant();
             }
 
-            string hexColor = intColor.ToString("x8", CultureInfo.InvariantCulture).ToUpperInvariant();
-
             if (includeSymbol)
             {
                 hexColor = '#' + hexColor;

src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml

@@ -6,6 +6,8 @@
   <ControlTheme x:Key="{x:Type ColorPicker}"
                 TargetType="ColorPicker">
     <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+    <!-- Alpha position should match CSS (and default slider order) instead of XAML/WinUI -->
+    <Setter Property="HexInputAlphaPosition" Value="Trailing" />
     <Setter Property="Height" Value="32" />
     <Setter Property="Width" Value="64" />
     <Setter Property="MinWidth" Value="64" />

src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPreviewer.xaml

@@ -64,6 +64,7 @@
             <Border Grid.Column="1"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
+                    Background="Transparent"
                     BoxShadow="0 0 10 2 #BF000000"
                     CornerRadius="{TemplateBinding CornerRadius}"
                     Margin="10">

src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml

@@ -295,6 +295,8 @@
   <ControlTheme x:Key="{x:Type ColorView}"
                 TargetType="ColorView">
     <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+    <!-- Alpha position should match CSS (and default slider order) instead of XAML/WinUI -->
+    <Setter Property="HexInputAlphaPosition" Value="Trailing" />
     <Setter Property="Palette">
       <controls:FluentColorPalette />
     </Setter>

src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml

@@ -6,6 +6,8 @@
   <ControlTheme x:Key="{x:Type ColorPicker}"
                 TargetType="ColorPicker">
     <Setter Property="CornerRadius" Value="0" />
+    <!-- Alpha position should match CSS (and default slider order) instead of XAML/WinUI -->
+    <Setter Property="HexInputAlphaPosition" Value="Trailing" />
     <Setter Property="Height" Value="32" />
     <Setter Property="Width" Value="64" />
     <Setter Property="MinWidth" Value="64" />

src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPreviewer.xaml

@@ -64,6 +64,7 @@
             <Border Grid.Column="1"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
+                    Background="Transparent"
                     BoxShadow="0 0 10 2 #BF000000"
                     CornerRadius="{TemplateBinding CornerRadius}"
                     Margin="10">

src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml

@@ -257,6 +257,8 @@
   <ControlTheme x:Key="{x:Type ColorView}"
                 TargetType="ColorView">
     <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+    <!-- Alpha position should match CSS (and default slider order) instead of XAML/WinUI -->
+    <Setter Property="HexInputAlphaPosition" Value="Trailing" />
     <Setter Property="Palette">
       <controls:FluentColorPalette />
     </Setter>

src/Avalonia.Controls/SplitButton/ToggleSplitButton.cs

@@ -70,7 +70,7 @@ namespace Avalonia.Controls
         /// </summary>
         protected void Toggle()
         {
-            IsChecked = !IsChecked;
+            SetCurrentValue(IsCheckedProperty, !IsChecked);
         }
 
         /// <inheritdoc/>

src/Avalonia.Diagnostics/Diagnostics/Controls/BrushEditor.cs

@@ -34,7 +34,11 @@ namespace Avalonia.Diagnostics.Controls
                 {
                     case ISolidColorBrush scb:
                     {
-                        var colorView = new ColorView { Color = scb.Color };
+                        var colorView = new ColorView
+                        {
+                            HexInputAlphaPosition = AlphaComponentPosition.Leading, // Always match XAML
+                            Color = scb.Color,
+                        };
 
                         colorView.ColorChanged += (_, e) => Brush = new ImmutableSolidColorBrush(e.NewColor);
 

src/Avalonia.Diagnostics/Diagnostics/Views/PropertyValueEditorView.cs

@@ -130,7 +130,10 @@ namespace Avalonia.Diagnostics.Views
                     IsEnabled = !Property.IsReadonly
                 };
 
-                var cv = new ColorView();
+                var cv = new ColorView
+                {
+                    HexInputAlphaPosition = AlphaComponentPosition.Leading, // Always match XAML
+                };
 
                 cv.Bind(
                         ColorView.ColorProperty,