feat: adjust ComboBox, ListBox, DatePicker & TimePicker item Padding.

irihitech · Nov 12, 2024 · d3f2977 · d3f2977
1 parent dfcb357
commit d3f2977
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 14 deletions.
diff --git a/src/Semi.Avalonia/Controls/ComboBox.axaml b/src/Semi.Avalonia/Controls/ComboBox.axaml
@@ -66,8 +66,7 @@
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                             TextTrimming="CharacterEllipsis"
                             Foreground="{TemplateBinding Foreground}"
-                            IsVisible="{TemplateBinding SelectionBoxItem,
-                                                        Converter={x:Static ObjectConverters.IsNull}}"
+                            IsVisible="{TemplateBinding SelectionBoxItem,Converter={x:Static ObjectConverters.IsNull}}"
                             Opacity="0.3"
                             Text="{TemplateBinding PlaceholderText}" />
                         <ContentPresenter
@@ -130,11 +129,10 @@
                                 CornerRadius="6">
                                 <ScrollViewer
                                     HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
-                                    IsDeferredScrollingEnabled="{TemplateBinding (ScrollViewer.IsDeferredScrollingEnabled)}"
+                                    IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                     VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                                     <ItemsPresenter
                                         Name="PART_ItemsPresenter"
-                                        Margin="{DynamicResource ComboBoxDropdownContentMargin}"
                                         ItemsPanel="{TemplateBinding ItemsPanel}" />
                                 </ScrollViewer>
                             </Border>

diff --git a/src/Semi.Avalonia/Controls/DatePicker.axaml b/src/Semi.Avalonia/Controls/DatePicker.axaml
@@ -22,7 +22,8 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     BoxShadow="{DynamicResource DateTimePickerFlyoutBoxShadow}"
-                    CornerRadius="{TemplateBinding CornerRadius}">
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    ClipToBounds="True">
                     <Grid Name="ContentPanel" RowDefinitions="*,Auto">
                         <Grid Name="PART_PickerContainer">
                             <Grid.Styles>
@@ -108,6 +109,7 @@
                                     Data="{DynamicResource DateTimePickerDismissGlyph}" />
                             </Button>
                             <Rectangle
+                                Grid.Column="0"
                                 Grid.ColumnSpan="2"
                                 Height="1"
                                 VerticalAlignment="Top"
@@ -177,6 +179,7 @@
                                     <TextBlock
                                         Name="PART_MonthTextBlock"
                                         Padding="12,0"
+                                        HorizontalAlignment="Center"
                                         VerticalAlignment="Center"
                                         FontFamily="{TemplateBinding FontFamily}"
                                         FontSize="{TemplateBinding FontSize}"

diff --git a/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml b/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml
@@ -65,10 +65,6 @@
         <Style Selector="^:selected">
             <Setter Property="IsHitTestVisible" Value="False" />
         </Style>
-        <Style Selector="^.MonthItem">
-            <Setter Property="Padding" Value="{DynamicResource DatePickerFlyoutPresenterMonthPadding}" />
-            <Setter Property="HorizontalContentAlignment" Value="Left" />
-        </Style>
     </ControlTheme>
 
     <!--  This is used for both the accept/dismiss & buttons in the presenter  -->

diff --git a/src/Semi.Avalonia/Controls/TimePicker.axaml b/src/Semi.Avalonia/Controls/TimePicker.axaml
@@ -22,7 +22,8 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     BoxShadow="{DynamicResource DateTimePickerFlyoutBoxShadow}"
-                    CornerRadius="{TemplateBinding CornerRadius}">
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    ClipToBounds="True">
                     <Grid Name="ContentPanel" RowDefinitions="*,Auto">
                         <Grid Name="PART_PickerContainer">
                             <Grid.Styles>
@@ -130,6 +131,7 @@
                                     Data="{DynamicResource DateTimePickerDismissGlyph}" />
                             </Button>
                             <Rectangle
+                                Grid.Column="0"
                                 Grid.ColumnSpan="2"
                                 Height="1"
                                 VerticalAlignment="Top"

diff --git a/src/Semi.Avalonia/Themes/Shared/ComboBox.axaml b/src/Semi.Avalonia/Themes/Shared/ComboBox.axaml
@@ -1,7 +1,7 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <CornerRadius x:Key="ComboBoxSelectorCornerRadius">3</CornerRadius>
 
-    <Thickness x:Key="ComboBoxItemDefaultPadding">8 4</Thickness>
+    <Thickness x:Key="ComboBoxItemDefaultPadding">12 8</Thickness>
     <Thickness x:Key="ComboBoxSelectorDefaultPadding">8 0</Thickness>
 
     <Thickness x:Key="ComboBoxPopupBorderThickness">1</Thickness>

diff --git a/src/Semi.Avalonia/Themes/Shared/DateTimePickerShared.axaml b/src/Semi.Avalonia/Themes/Shared/DateTimePickerShared.axaml
@@ -4,10 +4,10 @@
     <StreamGeometry x:Key="DateTimePickerAcceptGlyph">M17.4111 7.30848C18.0692 7.81171 18.1947 8.75312 17.6915 9.41119L11.1915 17.9112C10.909 18.2806 10.4711 18.4981 10.0061 18.5C9.54105 18.5019 9.10143 18.288 8.81592 17.9209L5.31592 13.4209C4.80731 12.767 4.92512 11.8246 5.57904 11.316C6.23296 10.8074 7.17537 10.9252 7.68398 11.5791L9.98988 14.5438L15.3084 7.58884C15.8116 6.93077 16.7531 6.80525 17.4111 7.30848Z</StreamGeometry>
     <StreamGeometry x:Key="DateTimePickerDismissGlyph">M17.6568 19.7782C18.2426 20.3639 19.1924 20.3639 19.7782 19.7782C20.3639 19.1924 20.3639 18.2426 19.7782 17.6568L14.1213 12L19.7782 6.34313C20.3639 5.75734 20.3639 4.8076 19.7782 4.22181C19.1924 3.63602 18.2426 3.63602 17.6568 4.22181L12 9.87866L6.34313 4.22181C5.75734 3.63602 4.8076 3.63602 4.22181 4.22181C3.63602 4.8076 3.63602 5.75734 4.22181 6.34313L9.87866 12L4.22181 17.6568C3.63602 18.2426 3.63602 19.1924 4.22181 19.7782C4.8076 20.3639 5.75734 20.3639 6.34313 19.7782L12 14.1213L17.6568 19.7782Z</StreamGeometry>
 
-    <x:Double x:Key="DateTimePickerListBoxItemHeight">30</x:Double>
+    <x:Double x:Key="DateTimePickerListBoxItemHeight">36</x:Double>
 
 
-    <Thickness x:Key="DateTimePickerFlyoutPadding">16 0</Thickness>
+    <Thickness x:Key="DateTimePickerFlyoutPadding">0</Thickness>
     <Thickness x:Key="DateTimePickerFlyoutBorderMargin">8</Thickness>
 
     <x:Double x:Key="DateTimePickerButtonSmallHeight">24</x:Double>

diff --git a/src/Semi.Avalonia/Themes/Shared/ListBox.axaml b/src/Semi.Avalonia/Themes/Shared/ListBox.axaml
@@ -1,6 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!-- ListBox -->
-    <Thickness x:Key="ListBoxItemDefaultPadding">8 4</Thickness>
+    <Thickness x:Key="ListBoxItemDefaultPadding">12 8</Thickness>
     <CornerRadius x:Key="ListBoxItemCornerRadius">3</CornerRadius>
 
 </ResourceDictionary>