From c87f6a811276b9c8eb18f8558f21da472189173c Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Thu, 14 Nov 2024 18:07:34 +0800
Subject: [PATCH] fix: fix popup BoxShadow and unclosed corner issues.

(cherry picked from commit 3a31924c6b454ae59571690259f00a6586420b29)
---
 src/Semi.Avalonia.ColorPicker/Dark.axaml      |   2 +-
 src/Semi.Avalonia.ColorPicker/Light.axaml     |   2 +-
 .../Controls/AutoCompleteBox.axaml            |  32 +--
 src/Semi.Avalonia/Controls/ComboBox.axaml     |  23 ++-
 src/Semi.Avalonia/Controls/DatePicker.axaml   | 191 +++++++++---------
 .../Controls/MenuFlyoutPresenter.axaml        |   1 -
 src/Semi.Avalonia/Controls/TimePicker.axaml   | 119 ++++++-----
 .../Themes/Shared/ComboBox.axaml              |   2 +-
 8 files changed, 199 insertions(+), 173 deletions(-)

diff --git a/src/Semi.Avalonia.ColorPicker/Dark.axaml b/src/Semi.Avalonia.ColorPicker/Dark.axaml
index e96849e..7ba3a79 100644
--- a/src/Semi.Avalonia.ColorPicker/Dark.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Dark.axaml
@@ -17,5 +17,5 @@
 
     <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
 
-    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1AFFFFFF</BoxShadows>
+    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">inset 0 0 0 1 #1AFFFFFF, 0 4 14 0 #40000000</BoxShadows>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia.ColorPicker/Light.axaml b/src/Semi.Avalonia.ColorPicker/Light.axaml
index 6148e2f..946f707 100644
--- a/src/Semi.Avalonia.ColorPicker/Light.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Light.axaml
@@ -17,5 +17,5 @@
 
     <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
 
-    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1A000000</BoxShadows>
+    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 1 0 #4A000000, 0 4 14 0 #1A000000</BoxShadows>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/AutoCompleteBox.axaml b/src/Semi.Avalonia/Controls/AutoCompleteBox.axaml
index d3e18ef..1687af0 100644
--- a/src/Semi.Avalonia/Controls/AutoCompleteBox.axaml
+++ b/src/Semi.Avalonia/Controls/AutoCompleteBox.axaml
@@ -39,12 +39,16 @@
                                 BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
                                 BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
                                 CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
-                                <ListBox
-                                    Name="PART_SelectingItemsControl"
-                                    Foreground="{TemplateBinding Foreground}"
-                                    ItemTemplate="{TemplateBinding ItemTemplate}"
-                                    ScrollViewer.HorizontalScrollBarVisibility="Auto"
-                                    ScrollViewer.VerticalScrollBarVisibility="Auto" />
+                                <Border
+                                    CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}"
+                                    ClipToBounds="True">
+                                    <ListBox
+                                        Name="PART_SelectingItemsControl"
+                                        Foreground="{TemplateBinding Foreground}"
+                                        ItemTemplate="{TemplateBinding ItemTemplate}"
+                                        ScrollViewer.HorizontalScrollBarVisibility="Auto"
+                                        ScrollViewer.VerticalScrollBarVisibility="Auto" />
+                                </Border>
                             </Border>
                         </Popup>
                     </Panel>
@@ -77,12 +81,16 @@
                                 BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
                                 BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
                                 CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
-                                <ListBox
-                                    Name="PART_SelectingItemsControl"
-                                    Foreground="{TemplateBinding Foreground}"
-                                    ItemTemplate="{TemplateBinding ItemTemplate}"
-                                    ScrollViewer.HorizontalScrollBarVisibility="Auto"
-                                    ScrollViewer.VerticalScrollBarVisibility="Auto" />
+                                <Border
+                                    CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}"
+                                    ClipToBounds="True">
+                                    <ListBox
+                                        Name="PART_SelectingItemsControl"
+                                        Foreground="{TemplateBinding Foreground}"
+                                        ItemTemplate="{TemplateBinding ItemTemplate}"
+                                        ScrollViewer.HorizontalScrollBarVisibility="Auto"
+                                        ScrollViewer.VerticalScrollBarVisibility="Auto" />
+                                </Border>
                             </Border>
                         </Popup>
                     </Panel>
diff --git a/src/Semi.Avalonia/Controls/ComboBox.axaml b/src/Semi.Avalonia/Controls/ComboBox.axaml
index 7b7ff5e..c5f39b5 100644
--- a/src/Semi.Avalonia/Controls/ComboBox.axaml
+++ b/src/Semi.Avalonia/Controls/ComboBox.axaml
@@ -117,16 +117,19 @@
                                 BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
                                 BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}"
                                 BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
-                                CornerRadius="{DynamicResource ComboBoxPopupBoxCornerRadius}"
-                                ClipToBounds="True">
-                                <ScrollViewer
-                                    HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
-                                    IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
-                                    VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
-                                    <ItemsPresenter
-                                        Name="PART_ItemsPresenter"
-                                        ItemsPanel="{TemplateBinding ItemsPanel}" />
-                                </ScrollViewer>
+                                CornerRadius="{DynamicResource ComboBoxPopupBoxCornerRadius}">
+                                <Border
+                                    CornerRadius="{DynamicResource ComboBoxPopupBoxCornerRadius}"
+                                    ClipToBounds="True">
+                                    <ScrollViewer
+                                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                                        IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
+                                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                                        <ItemsPresenter
+                                            Name="PART_ItemsPresenter"
+                                            ItemsPanel="{TemplateBinding ItemsPanel}" />
+                                    </ScrollViewer>
+                                </Border>
                             </Border>
                         </Popup>
                     </Grid>
diff --git a/src/Semi.Avalonia/Controls/DatePicker.axaml b/src/Semi.Avalonia/Controls/DatePicker.axaml
index cae06c4..7010742 100644
--- a/src/Semi.Avalonia/Controls/DatePicker.axaml
+++ b/src/Semi.Avalonia/Controls/DatePicker.axaml
@@ -21,100 +21,107 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     BoxShadow="{DynamicResource DateTimePickerFlyoutBoxShadow}"
-                    CornerRadius="{TemplateBinding CornerRadius}"
-                    ClipToBounds="True">
-                    <Grid Name="ContentPanel" RowDefinitions="*,Auto">
-                        <Grid Name="PART_PickerContainer">
-                            <Grid.Styles>
-                                <Style Selector="DateTimePickerPanel > ListBoxItem">
-                                    <Setter Property="Theme" Value="{StaticResource DateTimePickerItem}" />
-                                </Style>
-                            </Grid.Styles>
-                            <!--  Column Definitions set in code, ignore here  -->
-                            <Panel Name="PART_MonthHost">
-                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
-                                    <DateTimePickerPanel
-                                        Name="PART_MonthSelector"
-                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
-                                        PanelType="Month"
-                                        ShouldLoop="True" />
-                                </ScrollViewer>
-                                <RepeatButton Name="PART_MonthUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
-                                <RepeatButton Name="PART_MonthDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
-                            </Panel>
-                            <Panel Name="PART_DayHost">
-                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
-                                    <DateTimePickerPanel
-                                        Name="PART_DaySelector"
-                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
-                                        PanelType="Day"
-                                        ShouldLoop="True" />
-                                </ScrollViewer>
-                                <RepeatButton Name="PART_DayUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
-                                <RepeatButton Name="PART_DayDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
-                            </Panel>
-                            <Panel Name="PART_YearHost">
-                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
-                                    <DateTimePickerPanel
-                                        Name="PART_YearSelector"
-                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
-                                        PanelType="Year"
-                                        ShouldLoop="False" />
-                                </ScrollViewer>
-                                <RepeatButton Name="PART_YearUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
-                                <RepeatButton Name="PART_YearDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
-                            </Panel>
-                            <Rectangle
-                                Name="PART_FirstSpacer"
-                                Grid.Column="1"
-                                Width="1"
-                                Margin="0,4"
-                                HorizontalAlignment="Center"
-                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
-                            <Rectangle
-                                Name="PART_SecondSpacer"
-                                Grid.Column="3"
-                                Width="1"
-                                Margin="0,4"
-                                HorizontalAlignment="Center"
-                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
-                        </Grid>
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Border
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        ClipToBounds="True">
+                        <Grid Name="ContentPanel" RowDefinitions="*,Auto">
+                            <Grid Name="PART_PickerContainer">
+                                <Grid.Styles>
+                                    <Style Selector="DateTimePickerPanel > ListBoxItem">
+                                        <Setter Property="Theme" Value="{StaticResource DateTimePickerItem}" />
+                                    </Style>
+                                </Grid.Styles>
+                                <!--  Column Definitions set in code, ignore here  -->
+                                <Panel Name="PART_MonthHost">
+                                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                        <DateTimePickerPanel
+                                            Name="PART_MonthSelector"
+                                            ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                            PanelType="Month"
+                                            ShouldLoop="True" />
+                                    </ScrollViewer>
+                                    <RepeatButton Name="PART_MonthUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                                    <RepeatButton Name="PART_MonthDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
+                                </Panel>
+                                <Panel Name="PART_DayHost">
+                                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                        <DateTimePickerPanel
+                                            Name="PART_DaySelector"
+                                            ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                            PanelType="Day"
+                                            ShouldLoop="True" />
+                                    </ScrollViewer>
+                                    <RepeatButton Name="PART_DayUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                                    <RepeatButton Name="PART_DayDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
+                                </Panel>
+                                <Panel Name="PART_YearHost">
+                                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                        <DateTimePickerPanel
+                                            Name="PART_YearSelector"
+                                            ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                            PanelType="Year"
+                                            ShouldLoop="False" />
+                                    </ScrollViewer>
+                                    <RepeatButton Name="PART_YearUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                                    <RepeatButton Name="PART_YearDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
+                                </Panel>
+                                <Rectangle
+                                    Name="PART_FirstSpacer"
+                                    Grid.Column="1"
+                                    Width="1"
+                                    Margin="0,4"
+                                    HorizontalAlignment="Center"
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                <Rectangle
+                                    Name="PART_SecondSpacer"
+                                    Grid.Column="3"
+                                    Width="1"
+                                    Margin="0,4"
+                                    HorizontalAlignment="Center"
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                            </Grid>
 
-                        <Grid
-                            Name="AcceptDismissGrid"
-                            Grid.Row="1"
-                            ColumnDefinitions="*,*">
-                            <Button
-                                Name="PART_AcceptButton"
-                                Grid.Column="0"
-                                HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                Theme="{StaticResource DateTimePickerButton}">
-                                <PathIcon
-                                    Width="12"
-                                    Height="12"
-                                    Data="{DynamicResource DateTimePickerAcceptGlyph}" />
-                            </Button>
-                            <Button
-                                Name="PART_DismissButton"
-                                Grid.Column="1"
-                                HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                FontSize="16"
-                                Theme="{StaticResource DateTimePickerButton}">
-                                <PathIcon
-                                    Width="12"
-                                    Height="12"
-                                    Data="{DynamicResource DateTimePickerDismissGlyph}" />
-                            </Button>
-                            <Rectangle
-                                Grid.Column="0"
-                                Grid.ColumnSpan="2"
-                                Height="1"
-                                VerticalAlignment="Top"
-                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                            <Grid
+                                Name="AcceptDismissGrid"
+                                Grid.Row="1"
+                                ColumnDefinitions="*,Auto,*">
+                                <Button
+                                    Name="PART_AcceptButton"
+                                    Grid.Column="0"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
+                                    Theme="{StaticResource DateTimePickerButton}">
+                                    <PathIcon
+                                        Width="12"
+                                        Height="12"
+                                        Data="{DynamicResource DateTimePickerAcceptGlyph}" />
+                                </Button>
+                                <Rectangle
+                                    Grid.Column="1"
+                                    Width="1"
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                <Button
+                                    Name="PART_DismissButton"
+                                    Grid.Column="2"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
+                                    FontSize="16"
+                                    Theme="{StaticResource DateTimePickerButton}">
+                                    <PathIcon
+                                        Width="12"
+                                        Height="12"
+                                        Data="{DynamicResource DateTimePickerDismissGlyph}" />
+                                </Button>
+                                <Rectangle
+                                    Grid.Column="0"
+                                    Grid.ColumnSpan="3"
+                                    Height="1"
+                                    VerticalAlignment="Top"
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                            </Grid>
                         </Grid>
-                    </Grid>
+                    </Border>
                 </Border>
             </ControlTemplate>
         </Setter>
diff --git a/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml b/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml
index 91f9651..a51e3c6 100644
--- a/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml
+++ b/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml
@@ -37,7 +37,6 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     BoxShadow="{DynamicResource MenuFlyoutBorderBoxShadow}"
-                    ClipToBounds="True"
                     CornerRadius="{TemplateBinding CornerRadius}"
                     UseLayoutRounding="False">
                     <ScrollViewer
diff --git a/src/Semi.Avalonia/Controls/TimePicker.axaml b/src/Semi.Avalonia/Controls/TimePicker.axaml
index e5f013d..4a153df 100644
--- a/src/Semi.Avalonia/Controls/TimePicker.axaml
+++ b/src/Semi.Avalonia/Controls/TimePicker.axaml
@@ -8,6 +8,8 @@
         <Setter Property="MaxHeight" Value="300" />
         <Setter Property="FontWeight" Value="Normal" />
         <Setter Property="Background" Value="{DynamicResource DateTimePickerPopupBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerPopupBorderBrush}" />
+        <Setter Property="BorderThickness" Value="1" />
         <Setter Property="CornerRadius" Value="6" />
         <Setter Property="Template">
             <ControlTemplate TargetType="TimePickerPresenter">
@@ -20,27 +22,29 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     BoxShadow="{DynamicResource DateTimePickerFlyoutBoxShadow}"
-                    CornerRadius="{TemplateBinding CornerRadius}"
-                    ClipToBounds="True">
-                    <Grid Name="ContentPanel" RowDefinitions="*,Auto">
-                        <Grid Name="PART_PickerContainer">
-                            <Grid.Styles>
-                                <Style Selector="DateTimePickerPanel > ListBoxItem">
-                                    <Setter Property="Theme" Value="{StaticResource DateTimePickerItem}" />
-                                </Style>
-                            </Grid.Styles>
-                            <!--  Ignore col defs here, set in code  -->
-                            <Panel Name="PART_HourHost" Grid.Column="0">
-                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
-                                    <DateTimePickerPanel
-                                        Name="PART_HourSelector"
-                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
-                                        PanelType="Hour"
-                                        ShouldLoop="True" />
-                                </ScrollViewer>
-                                <RepeatButton Name="PART_HourUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
-                                <RepeatButton Name="PART_HourDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
-                            </Panel>
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Border
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        ClipToBounds="True">
+                        <Grid Name="ContentPanel" RowDefinitions="*,Auto">
+                            <Grid Name="PART_PickerContainer">
+                                <Grid.Styles>
+                                    <Style Selector="DateTimePickerPanel > ListBoxItem">
+                                        <Setter Property="Theme" Value="{StaticResource DateTimePickerItem}" />
+                                    </Style>
+                                </Grid.Styles>
+                                <!--  Ignore col defs here, set in code  -->
+                                <Panel Name="PART_HourHost" Grid.Column="0">
+                                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                        <DateTimePickerPanel
+                                            Name="PART_HourSelector"
+                                            ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                            PanelType="Hour"
+                                            ShouldLoop="True" />
+                                    </ScrollViewer>
+                                    <RepeatButton Name="PART_HourUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                                    <RepeatButton Name="PART_HourDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
+                                </Panel>
 
                             <Panel Name="PART_MinuteHost" Grid.Column="2">
                                 <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
@@ -82,41 +86,46 @@
                                 Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                         </Grid>
 
-                        <Grid
-                            Name="AcceptDismissGrid"
-                            Grid.Row="1"
-                            ColumnDefinitions="*,*">
-                            <Button
-                                Name="PART_AcceptButton"
-                                Grid.Column="0"
-                                HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                Theme="{StaticResource DateTimePickerButton}">
-                                <PathIcon
-                                    Width="12"
-                                    Height="12"
-                                    Data="{DynamicResource DateTimePickerAcceptGlyph}" />
-                            </Button>
-                            <Button
-                                Name="PART_DismissButton"
-                                Grid.Column="1"
-                                HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                FontSize="16"
-                                Theme="{StaticResource DateTimePickerButton}">
-                                <PathIcon
-                                    Width="12"
-                                    Height="12"
-                                    Data="{DynamicResource DateTimePickerDismissGlyph}" />
-                            </Button>
-                            <Rectangle
-                                Grid.Column="0"
-                                Grid.ColumnSpan="2"
-                                Height="1"
-                                VerticalAlignment="Top"
-                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                            <Grid
+                                Name="AcceptDismissGrid"
+                                Grid.Row="1"
+                                ColumnDefinitions="*,Auto,*">
+                                <Button
+                                    Name="PART_AcceptButton"
+                                    Grid.Column="0"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
+                                    Theme="{StaticResource DateTimePickerButton}">
+                                    <PathIcon
+                                        Width="12"
+                                        Height="12"
+                                        Data="{DynamicResource DateTimePickerAcceptGlyph}" />
+                                </Button>
+                                <Rectangle
+                                    Grid.Column="1"
+                                    Width="1"
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                <Button
+                                    Name="PART_DismissButton"
+                                    Grid.Column="2"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
+                                    FontSize="16"
+                                    Theme="{StaticResource DateTimePickerButton}">
+                                    <PathIcon
+                                        Width="12"
+                                        Height="12"
+                                        Data="{DynamicResource DateTimePickerDismissGlyph}" />
+                                </Button>
+                                <Rectangle
+                                    Grid.Column="0"
+                                    Grid.ColumnSpan="3"
+                                    Height="1"
+                                    VerticalAlignment="Top"
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                            </Grid>
                         </Grid>
-                    </Grid>
+                    </Border>
                 </Border>
             </ControlTemplate>
         </Setter>
diff --git a/src/Semi.Avalonia/Themes/Shared/ComboBox.axaml b/src/Semi.Avalonia/Themes/Shared/ComboBox.axaml
index 2930b5f..512f24a 100644
--- a/src/Semi.Avalonia/Themes/Shared/ComboBox.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/ComboBox.axaml
@@ -16,7 +16,7 @@
     <StreamGeometry x:Key="ComboBoxIcon">
         M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z
     </StreamGeometry>
-    <Thickness x:Key="ComboBoxPopupBorderMargin">0 4</Thickness>
+    <Thickness x:Key="ComboBoxPopupBorderMargin">4</Thickness>
 
     <x:Double x:Key="ComboBoxDefaultHeight">32</x:Double>
     <x:Double x:Key="ComboBoxSmallHeight">24</x:Double>