From 3a31924c6b454ae59571690259f00a6586420b29 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.

---
 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   | 231 +++++++++---------
 .../Themes/Shared/ComboBox.axaml              |   2 +-
 8 files changed, 254 insertions(+), 230 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 8aa84a6..ebd07ce 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 760380a..59dcdc2 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 ec4716c..79d35a9 100644
--- a/src/Semi.Avalonia/Controls/DatePicker.axaml
+++ b/src/Semi.Avalonia/Controls/DatePicker.axaml
@@ -22,100 +22,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 bc95b47..72de1b2 100644
--- a/src/Semi.Avalonia/Controls/TimePicker.axaml
+++ b/src/Semi.Avalonia/Controls/TimePicker.axaml
@@ -22,122 +22,129 @@
                     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">
-                                    <DateTimePickerPanel
-                                        Name="PART_MinuteSelector"
-                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
-                                        PanelType="Minute"
-                                        ShouldLoop="True" />
-                                </ScrollViewer>
-                                <RepeatButton Name="PART_MinuteUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
-                                <RepeatButton Name="PART_MinuteDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
-                            </Panel>
-                            
-                            <Panel Name="PART_SecondHost" Grid.Column="4">
-                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
-                                    <DateTimePickerPanel
-                                        Name="PART_SecondSelector"
-                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
-                                        PanelType="Second"
-                                        ShouldLoop="True" />
-                                </ScrollViewer>
-                                <RepeatButton Name="PART_SecondUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
-                                <RepeatButton Name="PART_SecondDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
-                            </Panel>
+                                <Panel Name="PART_MinuteHost" Grid.Column="2">
+                                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                        <DateTimePickerPanel
+                                            Name="PART_MinuteSelector"
+                                            ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                            PanelType="Minute"
+                                            ShouldLoop="True" />
+                                    </ScrollViewer>
+                                    <RepeatButton Name="PART_MinuteUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                                    <RepeatButton Name="PART_MinuteDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
+                                </Panel>
 
-                            <Panel Name="PART_PeriodHost" Grid.Column="6">
-                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
-                                    <DateTimePickerPanel
-                                        Name="PART_PeriodSelector"
-                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
-                                        PanelType="TimePeriod"
-                                        ShouldLoop="False" />
-                                </ScrollViewer>
-                                <RepeatButton Name="PART_PeriodUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
-                                <RepeatButton Name="PART_PeriodDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
-                            </Panel>
+                                <Panel Name="PART_SecondHost" Grid.Column="4">
+                                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                        <DateTimePickerPanel
+                                            Name="PART_SecondSelector"
+                                            ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                            PanelType="Second"
+                                            ShouldLoop="True" />
+                                    </ScrollViewer>
+                                    <RepeatButton Name="PART_SecondUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                                    <RepeatButton Name="PART_SecondDownButton" 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}" />
-                            <Rectangle
-                                Name="PART_ThirdSpacer"
-                                Grid.Column="5"
-                                Width="1"
-                                Margin="0,4"
-                                HorizontalAlignment="Center"
-                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                <Panel Name="PART_PeriodHost" Grid.Column="6">
+                                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                        <DateTimePickerPanel
+                                            Name="PART_PeriodSelector"
+                                            ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                            PanelType="TimePeriod"
+                                            ShouldLoop="False" />
+                                    </ScrollViewer>
+                                    <RepeatButton Name="PART_PeriodUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                                    <RepeatButton Name="PART_PeriodDownButton" 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}" />
+                                <Rectangle
+                                    Name="PART_ThirdSpacer"
+                                    Grid.Column="5"
+                                    Width="1"
+                                    Margin="0,4"
+                                    HorizontalAlignment="Center"
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                            </Grid>
+
+                            <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
-                            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>
-                    </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>