Merge pull request #4209 from maxkatz6/fixes/fluent-update-combobox-style

Update ComboBox selected and focus styles with ContentAlignment props

src/Avalonia.Controls/ComboBox.cs

@@ -7,6 +7,7 @@ using Avalonia.Controls.Shapes;
 using Avalonia.Controls.Templates;
 using Avalonia.Input;
 using Avalonia.Interactivity;
+using Avalonia.Layout;
 using Avalonia.LogicalTree;
 using Avalonia.Media;
 using Avalonia.VisualTree;
@@ -63,6 +64,18 @@ namespace Avalonia.Controls
         public static readonly StyledProperty<IBrush> PlaceholderForegroundProperty =
             AvaloniaProperty.Register<ComboBox, IBrush>(nameof(PlaceholderForeground));
 
+        /// <summary>
+        /// Defines the <see cref="HorizontalContentAlignment"/> property.
+        /// </summary>
+        public static readonly StyledProperty<HorizontalAlignment> HorizontalContentAlignmentProperty =
+            ContentControl.HorizontalContentAlignmentProperty.AddOwner<ComboBox>();
+
+        /// <summary>
+        /// Defines the <see cref="VerticalContentAlignment"/> property.
+        /// </summary>
+        public static readonly StyledProperty<VerticalAlignment> VerticalContentAlignmentProperty =
+            ContentControl.VerticalContentAlignmentProperty.AddOwner<ComboBox>();
+
         private bool _isDropDownOpen;
         private Popup _popup;
         private object _selectionBoxItem;
@@ -133,6 +146,24 @@ namespace Avalonia.Controls
             set { SetValue(VirtualizationModeProperty, value); }
         }
 
+        /// <summary>
+        /// Gets or sets the horizontal alignment of the content within the control.
+        /// </summary>
+        public HorizontalAlignment HorizontalContentAlignment
+        {
+            get { return GetValue(HorizontalContentAlignmentProperty); }
+            set { SetValue(HorizontalContentAlignmentProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or sets the vertical alignment of the content within the control.
+        /// </summary>
+        public VerticalAlignment VerticalContentAlignment
+        {
+            get { return GetValue(VerticalContentAlignmentProperty); }
+            set { SetValue(VerticalContentAlignmentProperty, value); }
+        }
+
         /// <inheritdoc/>
         protected override IItemContainerGenerator CreateItemContainerGenerator()
         {

src/Avalonia.Controls/Presenters/ContentPresenter.cs

@@ -95,6 +95,7 @@ namespace Avalonia.Controls.Presenters
         static ContentPresenter()
         {
             AffectsRender<ContentPresenter>(BackgroundProperty, BorderBrushProperty, BorderThicknessProperty, CornerRadiusProperty);
+            AffectsArrange<ContentPresenter>(HorizontalContentAlignmentProperty, VerticalContentAlignmentProperty);
             AffectsMeasure<ContentPresenter>(BorderThicknessProperty, PaddingProperty);
             ContentProperty.Changed.AddClassHandler<ContentPresenter>((x, e) => x.ContentChanged(e));
             ContentTemplateProperty.Changed.AddClassHandler<ContentPresenter>((x, e) => x.ContentChanged(e));

src/Avalonia.Themes.Default/ComboBox.xaml

@@ -1,10 +1,29 @@
 <Styles xmlns="https://github.com/avaloniaui">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <StackPanel Spacing="10">
+        <ComboBox PlaceholderText="Select an item">
+          <ComboBoxItem>Item 1</ComboBoxItem>
+          <ComboBoxItem>Item 2</ComboBoxItem>
+        </ComboBox>
+        <ComboBox IsEnabled="False"
+                  Width="200"
+                  SelectedIndex="1"
+                  HorizontalContentAlignment="Center">
+          <ComboBoxItem>Item 1</ComboBoxItem>
+          <ComboBoxItem>Item 2</ComboBoxItem>
+        </ComboBox>
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
   <Style Selector="ComboBox">
-    <Setter Property="Background" Value="Transparent"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}"/>
-    <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}"/>
-    <Setter Property="Padding" Value="4"/>
-    <Setter Property="MinHeight" Value="20"/>
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}" />
+    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="Padding" Value="4" />
+    <Setter Property="MinHeight" Value="20" />
     <Setter Property="Template">
       <ControlTemplate>
         <Border Name="border"
@@ -15,8 +34,8 @@
             <ContentControl Content="{TemplateBinding SelectionBoxItem}"
                             ContentTemplate="{TemplateBinding ItemTemplate}"
                             Margin="{TemplateBinding Padding}"
-                            HorizontalAlignment="Left"
-                            VerticalAlignment="Center"/>
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" />
             <ToggleButton Name="toggle"
                           BorderThickness="0"
                           Background="Transparent"
@@ -30,7 +49,7 @@
                     Stretch="Uniform"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
-                    Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z"/>
+                    Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z" />
             </ToggleButton>
             <Popup Name="PART_Popup"
                    IsOpen="{TemplateBinding IsDropDownOpen, Mode=TwoWay}"
@@ -45,8 +64,7 @@
                                   Items="{TemplateBinding Items}"
                                   ItemsPanel="{TemplateBinding ItemsPanel}"
                                   ItemTemplate="{TemplateBinding ItemTemplate}"
-                                  VirtualizationMode="{TemplateBinding VirtualizationMode}"
-                              />
+                                  VirtualizationMode="{TemplateBinding VirtualizationMode}" />
                 </ScrollViewer>
               </Border>
             </Popup>
@@ -56,7 +74,7 @@
     </Setter>
   </Style>
   <Style Selector="ComboBox:pointerover /template/ Border#border">
-    <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderHighBrush}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderHighBrush}" />
   </Style>
   <Style Selector="ComboBox:disabled /template/ Border#border">
     <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />

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">
@@ -6,8 +7,10 @@
           <ComboBoxItem>Item 1</ComboBoxItem>
           <ComboBoxItem>Item 2</ComboBoxItem>
         </ComboBox>
-
-        <ComboBox IsEnabled="False">
+        <ComboBox IsEnabled="False"
+                  Width="200"
+                  SelectedIndex="1"
+                  HorizontalContentAlignment="Center">
           <ComboBoxItem>Item 1</ComboBoxItem>
           <ComboBoxItem>Item 2</ComboBoxItem>
         </ComboBox>
@@ -25,6 +28,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}" />
@@ -32,6 +36,8 @@
     <Setter Property="BorderThickness" Value="{DynamicResource ComboBoxBorderThemeThickness}" />
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
     <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
     <Setter Property="HorizontalAlignment" Value="Left" />
     <Setter Property="VerticalAlignment" Value="Top" />
     <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
@@ -39,70 +45,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="{TemplateBinding HorizontalContentAlignment}"
+                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                     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}"
+                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
 
           <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 +126,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 +147,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-visible /template/ Border#HighlightBackground">
+    <Setter Property="IsVisible" Value="True" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBackgroundBorderBrushFocused}" />
   </Style>
 
-  <!-- Focused State -->
+  <Style Selector="ComboBox:focus-visible /template/ ContentControl#ContentPresenter">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource ComboBoxForegroundFocused}" />
+  </Style>
 
-  <!-- Focus Pressed State -->
+  <Style Selector="ComboBox:focus-visible /template/ TextBlock#PlaceholderTextBlock">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource ComboBoxForegroundFocused}" />
+  </Style>
 
-  <!-- Unfocused State -->
+  <Style Selector="ComboBox:focus-visible /template/ Path#DropDownGlyph">
+    <Setter Property="Fill" Value="{DynamicResource ComboBoxDropDownGlyphForegroundFocused}" />
+  </Style>
 
+  <!--  Focus Pressed State  -->
+  <Style Selector="ComboBox:focused:pressed /template/ ContentControl#ContentPresenter">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource ComboBoxForegroundFocusedPressed}" />
+  </Style>
+
+  <Style Selector="ComboBox:focused:pressed /template/ TextBlock#PlaceholderTextBlock">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource ComboBoxPlaceHolderForegroundFocusedPressed}" />
+  </Style>
+
+  <Style Selector="ComboBox:focused:pressed /template/ Path#DropDownGlyph">
+    <Setter Property="Fill" Value="{DynamicResource ComboBoxDropDownGlyphForegroundFocusedPressed}" />
+  </Style>
 </Styles>

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>