From a08f00d78fb22ea78905b703aefb1d02e3bb7124 Mon Sep 17 00:00:00 2001
From: Maksym Katsydan <maxkatz6@outlook.com>
Date: Tue, 30 Jun 2020 20:21:18 -0400
Subject: [PATCH] Update ComboBox selected and focus styles

---
 src/Avalonia.Themes.Fluent/ComboBox.xaml     | 191 +++++++++++--------
 src/Avalonia.Themes.Fluent/ComboBoxItem.xaml |  70 +++++--
 2 files changed, 161 insertions(+), 100 deletions(-)

diff --git a/src/Avalonia.Themes.Fluent/ComboBox.xaml b/src/Avalonia.Themes.Fluent/ComboBox.xaml
index 1fc657c1a3..8cac89f156 100644
--- a/src/Avalonia.Themes.Fluent/ComboBox.xaml
+++ b/src/Avalonia.Themes.Fluent/ComboBox.xaml
@@ -1,4 +1,5 @@
-<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Design.PreviewWith>
     <Border Padding="20">
       <StackPanel Spacing="10">
@@ -25,6 +26,7 @@
   </Styles.Resources>
   <Style Selector="ComboBox">
     <Setter Property="Padding" Value="{DynamicResource ComboBoxPadding}" />
+    <Setter Property="FocusAdorner" Value="{x:Null}" />
     <Setter Property="MaxDropDownHeight" Value="504" />
     <Setter Property="Foreground" Value="{DynamicResource ComboBoxForeground}" />
     <Setter Property="Background" Value="{DynamicResource ComboBoxBackground}" />
@@ -39,70 +41,76 @@
     <Setter Property="PlaceholderForeground" Value="{DynamicResource ComboBoxPlaceHolderForeground}" />
     <Setter Property="Template">
       <ControlTemplate>
-        <Grid RowDefinitions="Auto, *, Auto" ColumnDefinitions="*,32">
+        <Grid RowDefinitions="Auto, *, Auto"
+              ColumnDefinitions="*,32">
           <ContentPresenter x:Name="HeaderContentPresenter"
-                          Grid.Row="0"
-                          Grid.Column="0"
-                          Grid.ColumnSpan="2"
-                          TextBlock.FontWeight="{DynamicResource ComboBoxHeaderThemeFontWeight}"
-                          Margin="{DynamicResource ComboBoxTopHeaderMargin}"
-                          VerticalAlignment="Top" />
+                            Grid.Row="0"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
+                            TextBlock.FontWeight="{DynamicResource ComboBoxHeaderThemeFontWeight}"
+                            Margin="{DynamicResource ComboBoxTopHeaderMargin}"
+                            VerticalAlignment="Top" />
           <Border x:Name="Background"
-                          Grid.Row="1"
-                          Grid.Column="0"
-                          Grid.ColumnSpan="2"
-                          Background="{TemplateBinding Background}"
-                          BorderBrush="{TemplateBinding BorderBrush}"
-                          BorderThickness="{TemplateBinding BorderThickness}"
-                          CornerRadius="{DynamicResource ControlCornerRadius}"
-                          MinWidth="{DynamicResource ComboBoxThemeMinWidth}" />
+                  Grid.Row="1"
+                  Grid.Column="0"
+                  Grid.ColumnSpan="2"
+                  Background="{TemplateBinding Background}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
+                  CornerRadius="{DynamicResource ControlCornerRadius}"
+                  MinWidth="{DynamicResource ComboBoxThemeMinWidth}" />
 
           <Border x:Name="HighlightBackground"
-                          Grid.Row="1"
-                          Grid.Column="0"
-                          Grid.ColumnSpan="2"
-                          Background="{DynamicResource ComboBoxBackgroundUnfocused}"
-                          BorderBrush="{DynamicResource ComboBoxBackgroundBorderBrushUnfocused}"
-                          BorderThickness="{TemplateBinding BorderThickness}"
-                          CornerRadius="{DynamicResource ControlCornerRadius}"
-                          Opacity="0" />
-          <TextBlock  x:Name="PlaceholderTextBlock"
-                      Grid.Row="1"
-                      Grid.Column="0"
-                      HorizontalAlignment="Left"
-                      VerticalAlignment="Center"
-                      Margin="{TemplateBinding Padding}"
-                                 Foreground="{TemplateBinding PlaceholderForeground}"
-                                 Text="{TemplateBinding PlaceholderText}" IsVisible="{TemplateBinding SelectionBoxItem, Converter={x:Static ObjectConverters.IsNull}}"/>
+                  Grid.Row="1"
+                  Grid.Column="0"
+                  Grid.ColumnSpan="2"
+                  Background="{DynamicResource ComboBoxBackgroundUnfocused}"
+                  BorderBrush="{DynamicResource ComboBoxBackgroundBorderBrushUnfocused}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
+                  CornerRadius="{DynamicResource ControlCornerRadius}" />
+          <TextBlock x:Name="PlaceholderTextBlock"
+                     Grid.Row="1"
+                     Grid.Column="0"
+                     HorizontalAlignment="Left"
+                     VerticalAlignment="Center"
+                     Margin="{TemplateBinding Padding}"
+                     Text="{TemplateBinding PlaceholderText}"
+                     IsVisible="{TemplateBinding SelectionBoxItem, Converter={x:Static ObjectConverters.IsNull}}" />
           <ContentControl x:Name="ContentPresenter"
                           Content="{TemplateBinding SelectionBoxItem}"
                           ContentTemplate="{TemplateBinding ItemTemplate}"
-                         Grid.Row="1"
-                         Grid.Column="0"
-                         Margin="{TemplateBinding Padding}"
-                         HorizontalAlignment="Left"
-                         VerticalAlignment="Center">
-          </ContentControl>
+                          Grid.Row="1"
+                          Grid.Column="0"
+                          Margin="{TemplateBinding Padding}"
+                          HorizontalAlignment="Left"
+                          VerticalAlignment="Center" />
 
           <Border x:Name="DropDownOverlay"
-                          Grid.Row="1"
-                          Grid.Column="1"
-                          Background="Transparent"
-                          Margin="0,1,1,1"
-                          Width="30" IsVisible="False"
-                          HorizontalAlignment="Right" />
+                  Grid.Row="1"
+                  Grid.Column="1"
+                  Background="Transparent"
+                  Margin="0,1,1,1"
+                  Width="30"
+                  IsVisible="False"
+                  HorizontalAlignment="Right" />
 
           <Viewbox UseLayoutRounding="False"
-            MinHeight="{DynamicResource ComboBoxMinHeight}"
-              Grid.Row="1"
-              Grid.Column="1"
-              IsHitTestVisible="False"
-              Margin="0,0,10,0" Height="12" Width="12"
-              HorizontalAlignment="Right"
-              VerticalAlignment="Center">
+                   MinHeight="{DynamicResource ComboBoxMinHeight}"
+                   Grid.Row="1"
+                   Grid.Column="1"
+                   IsHitTestVisible="False"
+                   Margin="0,0,10,0"
+                   Height="12"
+                   Width="12"
+                   HorizontalAlignment="Right"
+                   VerticalAlignment="Center">
             <Panel>
-              <Panel Height="12" Width="12" />
-              <Path x:Name="DropDownGlyph" Stretch="Uniform" VerticalAlignment="Center" Data="M1939 486L2029 576L1024 1581L19 576L109 486L1024 1401L1939 486Z" />
+              <Panel Height="12"
+                     Width="12" />
+              <Path x:Name="DropDownGlyph"
+                    Stretch="Uniform"
+                    VerticalAlignment="Center"
+                    Data="M1939 486L2029 576L1024 1581L19 576L109 486L1024 1401L1939 486Z" />
             </Panel>
           </Viewbox>
           <Popup Name="PART_Popup"
@@ -114,20 +122,19 @@
                  StaysOpen="False">
             <Border x:Name="PopupBorder"
                     Background="{DynamicResource ComboBoxDropDownBackground}"
-                                BorderBrush="{DynamicResource ComboBoxDropDownBorderBrush}"
-                                BorderThickness="{DynamicResource ComboBoxDropdownBorderThickness}"
-                                Margin="0,-1,0,-1"
-                                Padding="{DynamicResource ComboBoxDropdownBorderPadding}"
-                                HorizontalAlignment="Stretch"
-                                CornerRadius="{DynamicResource OverlayCornerRadius}">
+                    BorderBrush="{DynamicResource ComboBoxDropDownBorderBrush}"
+                    BorderThickness="{DynamicResource ComboBoxDropdownBorderThickness}"
+                    Margin="0,-1,0,-1"
+                    Padding="{DynamicResource ComboBoxDropdownBorderPadding}"
+                    HorizontalAlignment="Stretch"
+                    CornerRadius="{DynamicResource OverlayCornerRadius}">
               <ScrollViewer>
                 <ItemsPresenter Name="PART_ItemsPresenter"
                                 Items="{TemplateBinding Items}"
                                 Margin="{DynamicResource ComboBoxDropdownContentMargin}"
                                 ItemsPanel="{TemplateBinding ItemsPanel}"
                                 ItemTemplate="{TemplateBinding ItemTemplate}"
-                                VirtualizationMode="{TemplateBinding VirtualizationMode}"
-                              />
+                                VirtualizationMode="{TemplateBinding VirtualizationMode}" />
               </ScrollViewer>
             </Border>
           </Popup>
@@ -136,57 +143,81 @@
     </Setter>
   </Style>
 
-  <!-- NormalState -->
+  <!--  NormalState  -->
   <Style Selector="ComboBox /template/ TextBlock#PlaceholderTextBlock">
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxPlaceHolderForeground}"/>
+    <Setter Property="Foreground" Value="{DynamicResource ComboBoxPlaceHolderForeground}" />
+  </Style>
+
+  <Style Selector="ComboBox /template/ Border#HighlightBackground">
+    <Setter Property="IsVisible" Value="False" />
   </Style>
 
   <Style Selector="ComboBox /template/ Path#DropDownGlyph">
-    <Setter Property="Fill" Value="{DynamicResource ComboBoxDropDownGlyphForeground}"/>
+    <Setter Property="Fill" Value="{DynamicResource ComboBoxDropDownGlyphForeground}" />
   </Style>
 
-  <!-- PointerOver State -->
+  <!--  PointerOver State  -->
   <Style Selector="ComboBox:pointerover /template/ Border#Background">
-    <Setter Property="Background" Value="{DynamicResource ComboBoxBackgroundPointerOver}"/>
+    <Setter Property="Background" Value="{DynamicResource ComboBoxBackgroundPointerOver}" />
     <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBorderBrushPointerOver}" />
   </Style>
 
-  <!-- Pressed State -->
+  <!--  Pressed State  -->
   <Style Selector="ComboBox:pressed /template/ Border#Background">
-    <Setter Property="Background" Value="{DynamicResource ComboBoxBackgroundPressed}"/>
+    <Setter Property="Background" Value="{DynamicResource ComboBoxBackgroundPressed}" />
     <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBorderBrushPressed}" />
   </Style>
 
-  <!-- Disabled State -->
+  <!--  Disabled State  -->
   <Style Selector="ComboBox:disabled /template/ Border#Background">
-    <Setter Property="Background" Value="{DynamicResource ComboBoxBackgroundDisabled}"/>
+    <Setter Property="Background" Value="{DynamicResource ComboBoxBackgroundDisabled}" />
     <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBorderBrushDisabled}" />
   </Style>
 
   <Style Selector="ComboBox:disabled /template/ ContentPresenter#HeaderContentPresenter">
-    <Setter Property="TextBlock.Foreground" Value="{DynamicResource ComboBoxForegroundDisabled}"/>
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource ComboBoxForegroundDisabled}" />
   </Style>
 
   <Style Selector="ComboBox:disabled /template/ ContentControl#ContentPresenter">
-    <Setter Property="TextBlock.Foreground" Value="{DynamicResource ComboBoxForegroundDisabled}"/>
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource ComboBoxForegroundDisabled}" />
   </Style>
 
   <Style Selector="ComboBox:disabled /template/ TextBlock#PlaceholderTextBlock">
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundDisabled}"/>
+    <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundDisabled}" />
   </Style>
 
-  <Style Selector="ComboBox:disabled /template/ TextBlock#PlaceholderTextBlock">
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundDisabled}"/>
+  <Style Selector="ComboBox:disabled /template/ Path#DropDownGlyph">
+    <Setter Property="Fill" Value="{DynamicResource ComboBoxDropDownGlyphForegroundDisabled}" />
   </Style>
 
-  <Style Selector="ComboBox:disabled /template/ Path#DropDownGlyph">
-    <Setter Property="Fill" Value="{DynamicResource ComboBoxDropDownGlyphForegroundDisabled}"/>
+  <!--  Focused State  -->
+  <Style Selector="ComboBox:focus /template/ Border#HighlightBackground">
+    <Setter Property="IsVisible" Value="True" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBackgroundBorderBrushFocused}" />
+  </Style>
+
+  <Style Selector="ComboBox:focus /template/ ContentControl#ContentPresenter">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource ComboBoxForegroundFocused}" />
+  </Style>
+
+  <Style Selector="ComboBox:focus /template/ TextBlock#PlaceholderTextBlock">
+    <Setter Property="TextBlock.Foreground" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={DynamicResource ComboBoxForegroundFocused}}" />
   </Style>
 
-  <!-- Focused State -->
+  <Style Selector="ComboBox:focus /template/ Path#DropDownGlyph">
+    <Setter Property="Fill" Value="{DynamicResource ComboBoxDropDownGlyphForegroundFocused}" />
+  </Style>
 
-  <!-- Focus Pressed State -->
+  <!--  Focus Pressed State  -->
+  <Style Selector="ComboBox:focused:pressed /template/ ContentControl#ContentPresenter">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource ComboBoxForegroundFocusedPressed}" />
+  </Style>
 
-  <!-- Unfocused State -->
+  <Style Selector="ComboBox:focused:pressed /template/ TextBlock#PlaceholderTextBlock">
+    <Setter Property="TextBlock.Foreground" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={DynamicResource ComboBoxPlaceHolderForegroundFocusedPressed}}" />
+  </Style>
 
+  <Style Selector="ComboBox:focused:pressed /template/ Path#DropDownGlyph">
+    <Setter Property="Fill" Value="{DynamicResource ComboBoxDropDownGlyphForegroundFocusedPressed}" />
+  </Style>
 </Styles>
diff --git a/src/Avalonia.Themes.Fluent/ComboBoxItem.xaml b/src/Avalonia.Themes.Fluent/ComboBoxItem.xaml
index c26dec3d34..66ccea99b5 100644
--- a/src/Avalonia.Themes.Fluent/ComboBoxItem.xaml
+++ b/src/Avalonia.Themes.Fluent/ComboBoxItem.xaml
@@ -1,17 +1,19 @@
 <Styles xmlns="https://github.com/avaloniaui">
   <Design.PreviewWith>
     <Border Padding="20">
-      <StackPanel Spacing="10">
-        <ComboBox>
+      <Border Background="{DynamicResource ComboBoxDropDownBackground}"
+              BorderBrush="{DynamicResource ComboBoxDropDownBorderBrush}"
+              BorderThickness="{DynamicResource ComboBoxDropdownBorderThickness}"
+              Margin="0,-1,0,-1"
+              Padding="{DynamicResource ComboBoxDropdownBorderPadding}"
+              CornerRadius="{DynamicResource OverlayCornerRadius}">
+        <StackPanel HorizontalAlignment="Stretch">
           <ComboBoxItem>Item 1</ComboBoxItem>
-          <ComboBoxItem>Item 2</ComboBoxItem>
-        </ComboBox>
-
-        <ComboBox IsEnabled="False">
-          <ComboBoxItem>Item 1</ComboBoxItem>
-          <ComboBoxItem>Item 2</ComboBoxItem>
-        </ComboBox>
-      </StackPanel>
+          <ComboBoxItem>Item 2 long</ComboBoxItem>
+          <ComboBoxItem IsSelected="True">Item 3</ComboBoxItem>
+          <ComboBoxItem IsEnabled="False">Item 4</ComboBoxItem>
+        </StackPanel>
+      </Border>
     </Border>
   </Design.PreviewWith>
 
@@ -19,12 +21,11 @@
     <Setter Property="TextBlock.Foreground" Value="{DynamicResource ComboBoxItemForeground}" />
     <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackground}" />
     <Setter Property="Padding" Value="{DynamicResource ComboBoxItemThemePadding}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemRevealBorderBrush}" />
-    <Setter Property="BorderThickness" Value="{DynamicResource ComboBoxItemRevealBorderThemeThickness}" />
     <Setter Property="HorizontalContentAlignment" Value="Stretch" />
     <Setter Property="Template">
       <ControlTemplate>
         <ContentPresenter Name="PART_ContentPresenter"
+                          TextBlock.Foreground="{TemplateBinding Foreground}"
                           Background="{TemplateBinding Background}"
                           BorderBrush="{TemplateBinding BorderBrush}"
                           BorderThickness="{TemplateBinding BorderThickness}"
@@ -32,28 +33,57 @@
                           Content="{TemplateBinding Content}"
                           HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                          Padding="{TemplateBinding Padding}"/>
+                          Padding="{TemplateBinding Padding}" />
       </ControlTemplate>
     </Setter>
   </Style>
 
+  <!--  PointerOver state  -->
   <Style Selector="ComboBoxItem:pointerover /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}"/>
+    <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundPointerOver}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushPointerOver}" />
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource ComboBoxItemForegroundPointerOver}" />
+  </Style>
+
+  <!--  Disabled state  -->
+  <Style Selector="ComboBoxItem:disabled /template/ ContentPresenter">
+    <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundDisabled}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushDisabled}" />
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource ComboBoxItemForegroundDisabled}" />
+  </Style>
+
+  <!--  Pressed state  -->
+  <Style Selector="ComboBoxItem:pressed /template/ ContentPresenter">
+    <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundPressed}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushPressed}" />
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource ComboBoxItemForegroundPressed}" />
   </Style>
 
+  <!--  Selected state  -->
   <Style Selector="ComboBoxItem:selected /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush4}"/>
+    <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundSelected}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushSelected}" />
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource ComboBoxItemForegroundSelected}" />
   </Style>
 
-  <Style Selector="ComboBoxItem:selected:focus /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}"/>
+  <!--  Selected Disabled state  -->
+  <Style Selector="ComboBoxItem:selected:disabled /template/ ContentPresenter">
+    <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundSelectedDisabled}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushSelectedDisabled}" />
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource ComboBoxItemForegroundSelectedDisabled}" />
   </Style>
 
+  <!--  Selected PointerOver state  -->
   <Style Selector="ComboBoxItem:selected:pointerover /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}"/>
+    <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundSelectedPointerOver}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushSelectedPointerOver}" />
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource ComboBoxItemForegroundSelectedPointerOver}" />
   </Style>
 
-  <Style Selector="ComboBoxItem:selected:focus:pointerover /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}"/>
+  <!--  Selected Pressed state  -->
+  <Style Selector="ComboBoxItem:selected:pressed /template/ ContentPresenter">
+    <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundSelectedPressed}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushSelectedPressed}" />
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource ComboBoxItemForegroundSelectedPressed}" />
   </Style>
 </Styles>