From 04e8b20e4767ce7a607ec61efe7699af514242ac Mon Sep 17 00:00:00 2001
From: Jaex <Jaex@users.noreply.github.com>
Date: Mon, 6 Jul 2026 20:43:30 +0300
Subject: [PATCH] Show checkerboard background for transparent color palette
 items (#21613)

---
 .../Themes/Fluent/ColorPicker.xaml            | 20 +++++++++++--------
 .../Themes/Fluent/ColorView.xaml              | 20 +++++++++++--------
 .../Themes/Simple/ColorPicker.xaml            | 20 +++++++++++--------
 .../Themes/Simple/ColorView.xaml              | 20 +++++++++++--------
 4 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
index b74e4e59aa..90904fbc75 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
@@ -182,14 +182,18 @@
                              Margin="12">
                       <ListBox.ItemTemplate>
                         <DataTemplate DataType="{x:Type Color}">
-                          <Border AutomationProperties.Name="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
-                                  ToolTip.Tip="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
-                                  HorizontalAlignment="Stretch"
-                                  VerticalAlignment="Stretch">
-                            <Border.Background>
-                              <SolidColorBrush Color="{Binding}" />
-                            </Border.Background>
-                          </Border>
+                          <Panel AutomationProperties.Name="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
+                                 ToolTip.Tip="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
+                                 HorizontalAlignment="Stretch"
+                                 VerticalAlignment="Stretch">
+                            <Border Background="{StaticResource ColorControlCheckeredBackgroundBrush}" />
+                            <Border HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch">
+                              <Border.Background>
+                                <SolidColorBrush Color="{Binding}" />
+                              </Border.Background>
+                            </Border>
+                          </Panel>
                         </DataTemplate>
                       </ListBox.ItemTemplate>
                       <ListBox.ItemsPanel>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
index ad517e8e80..6f92d20043 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
@@ -426,14 +426,18 @@
                        Margin="12">
                 <ListBox.ItemTemplate>
                   <DataTemplate DataType="{x:Type Color}">
-                    <Border AutomationProperties.Name="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
-                            ToolTip.Tip="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Stretch">
-                      <Border.Background>
-                        <SolidColorBrush Color="{Binding}" />
-                      </Border.Background>
-                    </Border>
+                    <Panel AutomationProperties.Name="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
+                           ToolTip.Tip="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
+                           HorizontalAlignment="Stretch"
+                           VerticalAlignment="Stretch">
+                      <Border Background="{StaticResource ColorControlCheckeredBackgroundBrush}" />
+                      <Border HorizontalAlignment="Stretch"
+                              VerticalAlignment="Stretch">
+                        <Border.Background>
+                          <SolidColorBrush Color="{Binding}" />
+                        </Border.Background>
+                      </Border>
+                    </Panel>
                   </DataTemplate>
                 </ListBox.ItemTemplate>
                 <ListBox.ItemsPanel>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml
index c2535086fa..79ddbc602a 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml
@@ -184,14 +184,18 @@
                              Margin="12">
                       <ListBox.ItemTemplate>
                         <DataTemplate DataType="{x:Type Color}">
-                          <Border AutomationProperties.Name="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
-                                  ToolTip.Tip="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
-                                  HorizontalAlignment="Stretch"
-                                  VerticalAlignment="Stretch">
-                            <Border.Background>
-                              <SolidColorBrush Color="{Binding}" />
-                            </Border.Background>
-                          </Border>
+                          <Panel AutomationProperties.Name="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
+                                 ToolTip.Tip="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
+                                 HorizontalAlignment="Stretch"
+                                 VerticalAlignment="Stretch">
+                            <Border Background="{StaticResource ColorControlCheckeredBackgroundBrush}" />
+                            <Border HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch">
+                              <Border.Background>
+                                <SolidColorBrush Color="{Binding}" />
+                              </Border.Background>
+                            </Border>
+                          </Panel>
                         </DataTemplate>
                       </ListBox.ItemTemplate>
                       <ListBox.ItemsPanel>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml
index 095c82a176..f46bc3f86d 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml
@@ -390,14 +390,18 @@
                        Margin="12">
                 <ListBox.ItemTemplate>
                   <DataTemplate DataType="{x:Type Color}">
-                    <Border AutomationProperties.Name="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
-                            ToolTip.Tip="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Stretch">
-                      <Border.Background>
-                        <SolidColorBrush Color="{Binding}" />
-                      </Border.Background>
-                    </Border>
+                    <Panel AutomationProperties.Name="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
+                           ToolTip.Tip="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
+                           HorizontalAlignment="Stretch"
+                           VerticalAlignment="Stretch">
+                      <Border Background="{StaticResource ColorControlCheckeredBackgroundBrush}" />
+                      <Border HorizontalAlignment="Stretch"
+                              VerticalAlignment="Stretch">
+                        <Border.Background>
+                          <SolidColorBrush Color="{Binding}" />
+                        </Border.Background>
+                      </Border>
+                    </Panel>
                   </DataTemplate>
                 </ListBox.ItemTemplate>
                 <ListBox.ItemsPanel>