feat: 优化 ComboBox 自定义项与 Fluent 设计样式

OrgEleCho · Jun 7, 2024 · a9f6cbc · a9f6cbc
1 parent 582b4ae
commit a9f6cbc
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 12 deletions.
diff --git a/EleCho.WpfSuite.FluentDesign/FluentDesignResources.xaml b/EleCho.WpfSuite.FluentDesign/FluentDesignResources.xaml
@@ -86,6 +86,9 @@
         <Setter Property="Background" Value="#EEFFFFFF"/>
         <Setter Property="HoverBackground" Value="#88FFFFFF"/>
         <Setter Property="PressedBackground" Value="#44FFFFFF"/>
+
+        <!--Popup-->
+        <Setter Property="PopupBorderBrush" Value="{DynamicResource ControlBorder}"/>
     </Style>
 
     <Style TargetType="{x:Type ws:ComboBoxItem}"
@@ -95,13 +98,16 @@
         <Setter Property="CornerRadius" Value="2"/>
         <Setter Property="BorderThickness" Value="2 0 0 0"/>
         <Setter Property="HoverBackground" Value="#11000000"/>
+        <Setter Property="HoverBorderBrush" Value="#11000000"/>
+
         <Setter Property="SelectedBackground" Value="#11000000"/>
-        <Setter Property="SelectedFocusedBackground" Value="#11000000"/>
+        <Setter Property="SelectedBorderBrush" Value="{DynamicResource PrimaryBrush}"/>
+
         <Setter Property="HoverFocusedBackground" Value="#11000000"/>
+        <Setter Property="HoverFocusedBorderBrush" Value="#11000000"/>
+
+        <Setter Property="SelectedFocusedBackground" Value="#11000000"/>
         <Setter Property="HoverSelectedBackground" Value="#11000000"/>
-        <Setter Property="HoverBorderBrush" Value="Transparent"/>
-        <Setter Property="HoverFocusedBorderBrush" Value="Transparent"/>
-        <Setter Property="SelectedBorderBrush" Value="{DynamicResource PrimaryBrush}"/>
         <Setter Property="HoverSelectedBorderBrush" Value="{DynamicResource PrimaryBrush}"/>
         <Setter Property="FocusedBorderBrush" Value="Transparent"/>
     </Style>

diff --git a/EleCho.WpfSuite/Controls/ComboBox.cs b/EleCho.WpfSuite/Controls/ComboBox.cs
@@ -37,6 +37,26 @@ public CornerRadius CornerRadius
             set { SetValue(CornerRadiusProperty, value); }
         }
 
+        public Brush PopupBackground
+        {
+            get { return (Brush)GetValue(PopupBackgroundProperty); }
+            set { SetValue(PopupBackgroundProperty, value); }
+        }
+
+        public Thickness PopupBorderThickness
+        {
+            get { return (Thickness)GetValue(PopupBorderThicknessProperty); }
+            set { SetValue(PopupBorderThicknessProperty, value); }
+        }
+
+        public Brush PopupBorderBrush
+        {
+            get { return (Brush)GetValue(PopupBorderBrushProperty); }
+            set { SetValue(PopupBorderBrushProperty, value); }
+        }
+
+
+
         /// <summary>
         /// CornerRadius of popup content
         /// </summary>
@@ -382,9 +402,18 @@ protected override bool IsItemItsOwnContainerOverride(object item)
         public static readonly DependencyProperty CornerRadiusProperty =
             Border.CornerRadiusProperty.AddOwner(typeof(ComboBox));
 
+        public static readonly DependencyProperty PopupBackgroundProperty =
+            DependencyProperty.Register(nameof(PopupBackground), typeof(Brush), typeof(ComboBox), new PropertyMetadata(SystemColors.WindowBrush));
+
         public static readonly DependencyProperty PopupCornerRadiusProperty =
             DependencyProperty.Register(nameof(PopupCornerRadius), typeof(CornerRadius), typeof(ComboBox), new PropertyMetadata(default(CornerRadius)));
 
+        public static readonly DependencyProperty PopupBorderThicknessProperty =
+            DependencyProperty.Register(nameof(PopupBorderThickness), typeof(Thickness), typeof(ComboBox), new PropertyMetadata(default(Thickness)));
+
+        public static readonly DependencyProperty PopupBorderBrushProperty =
+            DependencyProperty.Register(nameof(PopupBorderBrush), typeof(Brush), typeof(ComboBox), new PropertyMetadata(null));
+
         #endregion
     }
 }
diff --git a/EleCho.WpfSuite/Controls/ComboBoxResources.xaml b/EleCho.WpfSuite/Controls/ComboBoxResources.xaml
@@ -314,10 +314,10 @@
                                               MinWidth="{Binding ActualWidth, ElementName=templateRoot}"
                                               MaxHeight="{TemplateBinding MaxDropDownHeight}">
                     <ws:Border x:Name="dropDownBorder"
-                               Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
-                               BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}"
-                               CornerRadius="{TemplateBinding PopupCornerRadius}"
-                               BorderThickness="1">
+                               Background="{TemplateBinding PopupBackground}"
+                               BorderThickness="{TemplateBinding PopupBorderThickness}"
+                               BorderBrush="{TemplateBinding PopupBorderBrush}"
+                               CornerRadius="{TemplateBinding PopupCornerRadius}">
                         <ScrollViewer x:Name="DropDownScrollViewer">
                             <Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled">
                                 <Canvas x:Name="canvas" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
@@ -430,10 +430,10 @@
                                               MinWidth="{Binding ActualWidth, ElementName=templateRoot}"
                                               MaxHeight="{TemplateBinding MaxDropDownHeight}">
                     <ws:Border x:Name="dropDownBorder"
-                               Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
-                               BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}"
-                               CornerRadius="{TemplateBinding PopupCornerRadius}"
-                               BorderThickness="1">
+                               Background="{TemplateBinding PopupBackground}"
+                               BorderThickness="{TemplateBinding PopupBorderThickness}"
+                               BorderBrush="{TemplateBinding PopupBorderBrush}"
+                               CornerRadius="{TemplateBinding PopupCornerRadius}">
                         <ws:ScrollViewer x:Name="DropDownScrollViewer">
                             <Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled">
                                 <Canvas x:Name="canvas" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
@@ -540,6 +540,8 @@
     </ControlTemplate>
     <Style TargetType="{x:Type ws:ComboBox}">
         <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
+        <Setter Property="PopupBorderBrush" Value="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}"/>
+        <Setter Property="PopupBorderThickness" Value="1"/>
 
         <!--NormalState-->
         <Setter Property="TextBoxBackground" Value="#FFFFFFFF"/>