From 8142dd48cd98e7b67c5d62d7ef94a0c0a0014996 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Sun, 24 Mar 2024 21:00:20 +0800
Subject: [PATCH 1/3] feat: ComboBox BackgroundSizing.

---
 .../Pages/ComboBoxDemo.axaml                  | 95 +++++++------------
 .../Pages/ComboBoxDemo.axaml.cs               | 10 +-
 src/Semi.Avalonia/Controls/ComboBox.axaml     |  9 +-
 3 files changed, 45 insertions(+), 69 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
index 488a8ff..3bf4425 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
@@ -4,71 +4,40 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    d:DesignHeight="450"
+    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+    d:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
+    <Design.DataContext>
+        <pages:ComboBoxDemoViewModel />
+    </Design.DataContext>
     <StackPanel Spacing="20">
-        <ComboBox Width="150">
-            <ComboBoxItem>Ding</ComboBoxItem>
-            <ComboBoxItem>Otter</ComboBoxItem>
-            <ComboBoxItem>Husky</ComboBoxItem>
-            <ComboBoxItem>Mr. 17</ComboBoxItem>
-            <ComboBoxItem>Cass</ComboBoxItem>
-        </ComboBox>
-        <ComboBox Width="150" Classes="ClearButton">
-            <ComboBoxItem>Ding</ComboBoxItem>
-            <ComboBoxItem>Otter</ComboBoxItem>
-            <ComboBoxItem>Husky</ComboBoxItem>
-            <ComboBoxItem>Mr. 17</ComboBoxItem>
-            <ComboBoxItem>Cass</ComboBoxItem>
-        </ComboBox>
-        <ComboBox Width="150" PlaceholderText="Please Select">
-            <ComboBoxItem>Ding</ComboBoxItem>
-            <ComboBoxItem>Otter</ComboBoxItem>
-            <ComboBoxItem>Husky</ComboBoxItem>
-            <ComboBoxItem>Mr. 17</ComboBoxItem>
-            <ComboBoxItem>Cass</ComboBoxItem>
-        </ComboBox>
-        <ComboBox Width="150" IsEnabled="False">
-            <ComboBoxItem>Ding</ComboBoxItem>
-            <ComboBoxItem>Otter</ComboBoxItem>
-            <ComboBoxItem>Husky</ComboBoxItem>
-            <ComboBoxItem>Mr. 17</ComboBoxItem>
-            <ComboBoxItem>Cass</ComboBoxItem>
-        </ComboBox>
-        <ComboBox
-            Width="150"
-            Classes="Large"
-            IsEnabled="False">
-            <ComboBoxItem>Ding</ComboBoxItem>
-            <ComboBoxItem>Otter</ComboBoxItem>
-            <ComboBoxItem>Husky</ComboBoxItem>
-            <ComboBoxItem>Mr. 17</ComboBoxItem>
-            <ComboBoxItem>Cass</ComboBoxItem>
-        </ComboBox>
-        <ComboBox Width="150" Classes="Small">
-            <ComboBoxItem>Ding</ComboBoxItem>
-            <ComboBoxItem>Otter</ComboBoxItem>
-            <ComboBoxItem>Husky</ComboBoxItem>
-            <ComboBoxItem>Mr. 17</ComboBoxItem>
-            <ComboBoxItem>Cass</ComboBoxItem>
-        </ComboBox>
-        <ComboBox Width="150" Classes="Bordered">
-            <ComboBoxItem>Ding</ComboBoxItem>
-            <ComboBoxItem>Otter</ComboBoxItem>
-            <ComboBoxItem>Husky</ComboBoxItem>
-            <ComboBoxItem>Mr. 17</ComboBoxItem>
-            <ComboBoxItem>Cass</ComboBoxItem>
-        </ComboBox>
-        <ComboBox
-            Width="150"
-            Classes="Bordered"
-            IsEnabled="False">
-            <ComboBoxItem>Ding</ComboBoxItem>
-            <ComboBoxItem>Otter</ComboBoxItem>
-            <ComboBoxItem>Husky</ComboBoxItem>
-            <ComboBoxItem>Mr. 17</ComboBoxItem>
-            <ComboBoxItem>Cass</ComboBoxItem>
-        </ComboBox>
+        <StackPanel.Styles>
+            <Style Selector="ComboBox">
+                <Setter Property="Width" Value="300" />
+                <Setter Property="ItemsSource" Value="{Binding Items}" />
+            </Style>
+        </StackPanel.Styles>
+
+        <ComboBox />
+        <ComboBox Classes="ClearButton" />
+        <ComboBox PlaceholderText="Please Select" />
+        <ComboBox IsEnabled="False" />
+        <ComboBox Classes="Large" IsEnabled="False" />
+        <ComboBox Classes="Small" />
+        <ComboBox Classes="Bordered" />
+        <ComboBox Classes="Bordered" IsEnabled="False" />
+
+        <StackPanel Orientation="Horizontal">
+            <ComboBox Width="100" Classes="Large" PlaceholderText="Large" />
+            <ComboBox Width="100" PlaceholderText="Default" />
+            <ComboBox Width="100" Classes="Small" PlaceholderText="Small" />
+        </StackPanel>
+
+        <StackPanel Orientation="Horizontal">
+            <ComboBox Width="100" IsEnabled="False" PlaceholderText="Disabled" />
+            <ComboBox Width="100" Classes="Bordered" PlaceholderText="Bordered" />
+            <ComboBox Width="100" Classes="Bordered" IsEnabled="False" />
+        </StackPanel>
     </StackPanel>
 </UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml.cs
index 80b05bc..3c8cba2 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml.cs
@@ -1,6 +1,6 @@
-using Avalonia;
+using System.Collections.ObjectModel;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
+using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -9,5 +9,11 @@ public partial class ComboBoxDemo : UserControl
     public ComboBoxDemo()
     {
         InitializeComponent();
+        this.DataContext = new ComboBoxDemoViewModel();
     }
+}
+
+public class ComboBoxDemoViewModel : ObservableObject
+{
+    public ObservableCollection<string> Items { get; set; } = ["Ding", "Otter", "Husky", "Mr.17", "Cass"];
 }
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/ComboBox.axaml b/src/Semi.Avalonia/Controls/ComboBox.axaml
index b59da08..b37c66e 100644
--- a/src/Semi.Avalonia/Controls/ComboBox.axaml
+++ b/src/Semi.Avalonia/Controls/ComboBox.axaml
@@ -32,6 +32,7 @@
         <Setter Property="FocusAdorner" Value="{x:Null}" />
         <Setter Property="MaxDropDownHeight" Value="504" />
         <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorBackground}" />
+        <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
         <Setter Property="BorderThickness" Value="1" />
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="CornerRadius" Value="{DynamicResource ComboBoxSelectorCornerRadius}" />
@@ -41,6 +42,7 @@
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Top" />
+        <Setter Property="MinHeight" Value="{DynamicResource ComboBoxDefaultHeight}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ComboBox">
                 <DataValidationErrors>
@@ -49,9 +51,8 @@
                             x:Name="Background"
                             Grid.Column="0"
                             Grid.ColumnSpan="3"
-                            MinWidth="{DynamicResource ComboBoxThemeMinWidth}"
-                            MinHeight="{DynamicResource ComboBoxDefaultHeight}"
                             Background="{TemplateBinding Background}"
+                            BackgroundSizing="{TemplateBinding BackgroundSizing}"
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}"
                             CornerRadius="{TemplateBinding CornerRadius}" />
@@ -147,10 +148,10 @@
             </Style>
         </Style>
 
-        <Style Selector="^.Large /template/ Border#Background">
+        <Style Selector="^.Large">
             <Setter Property="MinHeight" Value="{DynamicResource ComboBoxLargeHeight}" />
         </Style>
-        <Style Selector="^.Small /template/ Border#Background">
+        <Style Selector="^.Small">
             <Setter Property="MinHeight" Value="{DynamicResource ComboBoxSmallHeight}" />
         </Style>
 

From 8de7a1ae8c1b782bca8d162398bc4c660a9cdcad Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Sun, 24 Mar 2024 21:56:46 +0800
Subject: [PATCH 2/3] fix: various issues of demos.

---
 .../Pages/AutoCompleteBoxDemo.axaml           | 58 ++++++++-----
 .../Pages/NumericUpDownDemo.axaml             | 81 +++++++++----------
 .../Pages/SplitViewDemo.axaml                 |  2 +
 .../Pages/TextBoxDemo.axaml                   | 43 +++++++---
 .../Pages/ToggleButtonDemo.axaml              |  6 +-
 5 files changed, 107 insertions(+), 83 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml
index 0e13eda..7fc2efb 100644
--- a/demo/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml
@@ -26,29 +26,7 @@
                     </DataTemplate>
                 </Setter>
             </Style>
-            <Style Selector="AutoCompleteBox.Split">
-                <Setter Property="Width" Value="100" />
-            </Style>
         </StackPanel.Styles>
-        <StackPanel Orientation="Horizontal">
-            <AutoCompleteBox Classes="Split Large"
-                             ValueMemberBinding="{ReflectionBinding Name}" />
-            <AutoCompleteBox Classes="Split"
-                             ValueMemberBinding="{ReflectionBinding Name}" />
-            <AutoCompleteBox Classes="Split Small"
-                             ValueMemberBinding="{ReflectionBinding Name}" />
-        </StackPanel>
-
-        <StackPanel Orientation="Horizontal">
-            <AutoCompleteBox Classes="Split"
-                             IsEnabled="False"
-                             ValueMemberBinding="{ReflectionBinding Name}" />
-            <AutoCompleteBox Classes="Split Bordered"
-                             ValueMemberBinding="{ReflectionBinding Name}" />
-            <AutoCompleteBox Classes="Split Bordered"
-                             IsEnabled="False"
-                             ValueMemberBinding="{ReflectionBinding Name}" />
-        </StackPanel>
 
         <AutoCompleteBox
             Watermark="Please select a State"
@@ -70,5 +48,41 @@
             InnerLeftContent="https://"
             InnerRightContent=".com"
             ValueMemberBinding="{ReflectionBinding Name}" />
+
+        <StackPanel Orientation="Horizontal">
+            <AutoCompleteBox
+                Width="100"
+                Classes="Large"
+                Watermark="Large"
+                ValueMemberBinding="{ReflectionBinding Name}" />
+            <AutoCompleteBox
+                Width="100"
+                Watermark="Default"
+                ValueMemberBinding="{ReflectionBinding Name}" />
+            <AutoCompleteBox
+                Width="100"
+                Classes="Small"
+                Watermark="Small"
+                ValueMemberBinding="{ReflectionBinding Name}" />
+        </StackPanel>
+
+        <StackPanel Orientation="Horizontal">
+            <AutoCompleteBox
+                Width="100"
+                IsEnabled="False"
+                Watermark="Disabled"
+                ValueMemberBinding="{ReflectionBinding Name}" />
+            <AutoCompleteBox
+                Width="100"
+                Classes="Bordered"
+                Watermark="Bordered"
+                ValueMemberBinding="{ReflectionBinding Name}" />
+            <AutoCompleteBox
+                Width="100"
+                Classes="Bordered"
+                IsEnabled="False"
+                ValueMemberBinding="{ReflectionBinding Name}" />
+        </StackPanel>
+
     </StackPanel>
 </UserControl>
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/NumericUpDownDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/NumericUpDownDemo.axaml
index 64193c8..b249c23 100644
--- a/demo/Semi.Avalonia.Demo/Pages/NumericUpDownDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/NumericUpDownDemo.axaml
@@ -4,62 +4,53 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    d:DesignHeight="450"
+    d:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
     <StackPanel HorizontalAlignment="Left" Spacing="20">
+        <StackPanel.Styles>
+            <Style Selector="NumericUpDown">
+                <Setter Property="Width" Value="300" />
+                <Setter Property="Maximum" Value="100" />
+                <Setter Property="Minimum" Value="0" />
+            </Style>
+        </StackPanel.Styles>
+
+        <NumericUpDown />
+        <NumericUpDown Increment="10" />
+        <NumericUpDown ButtonSpinnerLocation="Left" />
+        <NumericUpDown ShowButtonSpinner="False" />
+        <NumericUpDown Classes="Large" />
+        <NumericUpDown Classes="Small" />
+        <NumericUpDown InnerLeftContent="Price" InnerRightContent="$" />
+
         <StackPanel Orientation="Horizontal">
-            <NumericUpDown Classes="Large" Width="150" ButtonSpinnerLocation="Left"/>
-            <NumericUpDown Width="150" ShowButtonSpinner="False" />
-            <NumericUpDown Classes="Small" Width="150" />
+            <NumericUpDown
+                Width="100"
+                Classes="Large"
+                Watermark="Large"
+                ButtonSpinnerLocation="Left" />
+            <NumericUpDown
+                Width="100"
+                Watermark="Default"
+                ShowButtonSpinner="False" />
+            <NumericUpDown
+                Width="100"
+                Watermark="Small"
+                Classes="Small" />
         </StackPanel>
 
         <StackPanel Orientation="Horizontal">
-            <NumericUpDown Width="150" ButtonSpinnerLocation="Left" />
-            <NumericUpDown Width="150" ShowButtonSpinner="False" />
-            <NumericUpDown Width="150" />
+            <NumericUpDown Width="100" ButtonSpinnerLocation="Left" />
+            <NumericUpDown Width="100" ShowButtonSpinner="False" />
+            <NumericUpDown Width="100" />
         </StackPanel>
 
         <StackPanel Orientation="Horizontal">
-            <NumericUpDown Width="150" ShowButtonSpinner="False" />
-            <NumericUpDown IsEnabled="False" Width="150" />
-            <NumericUpDown Width="150" ButtonSpinnerLocation="Left" />
+            <NumericUpDown Width="100" ShowButtonSpinner="False" />
+            <NumericUpDown Width="100" IsEnabled="False" />
+            <NumericUpDown Width="100" ButtonSpinnerLocation="Left" />
         </StackPanel>
 
-        <NumericUpDown
-            Width="200"
-            Maximum="100"
-            Minimum="0" />
-        <NumericUpDown
-            Width="200"
-            Increment="10"
-            Maximum="100"
-            Minimum="0" />
-        <NumericUpDown
-            Width="200"
-            ButtonSpinnerLocation="Left"
-            Maximum="100"
-            Minimum="0" />
-        <NumericUpDown
-            Width="200"
-            Maximum="100"
-            Minimum="0"
-            ShowButtonSpinner="False" />
-        <NumericUpDown
-            Width="200"
-            Classes="Large"
-            Maximum="100"
-            Minimum="0" />
-        <NumericUpDown
-            Width="200"
-            Classes="Small"
-            Maximum="100"
-            Minimum="0" />
-        <NumericUpDown
-            Width="200"
-            InnerLeftContent="Price"
-            InnerRightContent="$"
-            Maximum="100"
-            Minimum="0" />
     </StackPanel>
 </UserControl>
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
index 38a6db3..b63b60c 100644
--- a/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
@@ -14,11 +14,13 @@
                 Orientation="Vertical"
                 Spacing="4">
                 <ToggleButton
+                    HorizontalAlignment="Stretch"
                     Name="PaneOpenButton"
                     Content="IsPaneOpen"
                     IsChecked="{Binding IsPaneOpen, ElementName=SplitView}" />
 
                 <ToggleButton
+                    HorizontalAlignment="Stretch"
                     Name="UseLightDismissOverlayModeButton"
                     Content="UseLightDismissOverlayMode"
                     IsChecked="{Binding UseLightDismissOverlayMode, ElementName=SplitView}" />
diff --git a/demo/Semi.Avalonia.Demo/Pages/TextBoxDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/TextBoxDemo.axaml
index e5af706..e8dc197 100644
--- a/demo/Semi.Avalonia.Demo/Pages/TextBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TextBoxDemo.axaml
@@ -5,23 +5,11 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:system="clr-namespace:System;assembly=netstandard"
-    d:DesignHeight="450"
+    d:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
     <ScrollViewer>
         <StackPanel HorizontalAlignment="Left" Spacing="20">
-            <StackPanel Orientation="Horizontal">
-                <TextBox Classes="Large" Width="150"/>
-                <TextBox Width="150"/>
-                <TextBox Classes="Small" Width="150"/>
-            </StackPanel>
-
-            <StackPanel Orientation="Horizontal">
-                <TextBox IsEnabled="False" Width="150"/>
-                <TextBox Classes="Bordered" Width="150"/>
-                <TextBox Classes="Bordered" IsEnabled="False" Width="150"/>
-            </StackPanel>
-
             <TextBox Width="300" />
             <TextBox Width="300" Classes="Large" />
             <TextBox Width="300" Classes="Small" />
@@ -54,6 +42,35 @@
                 InnerLeftContent="http://"
                 InnerRightContent=".com"
                 IsEnabled="False" />
+
+            <StackPanel Orientation="Horizontal">
+                <TextBox
+                    Width="150"
+                    Classes="Large"
+                    Watermark="Large" />
+                <TextBox
+                    Width="150"
+                    Watermark="Default" />
+                <TextBox
+                    Width="150"
+                    Classes="Small"
+                    Watermark="Small" />
+            </StackPanel>
+
+            <StackPanel Orientation="Horizontal">
+                <TextBox
+                    Width="150"
+                    IsEnabled="False"
+                    Watermark="Disabled" />
+                <TextBox
+                    Width="150"
+                    Classes="Bordered"
+                    Watermark="Bordered" />
+                <TextBox
+                    Width="150"
+                    Classes="Bordered"
+                    IsEnabled="False" />
+            </StackPanel>
         </StackPanel>
     </ScrollViewer>
 </UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/ToggleButtonDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ToggleButtonDemo.axaml
index 60e6019..d349fef 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ToggleButtonDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ToggleButtonDemo.axaml
@@ -17,7 +17,7 @@
             <ToggleButton Classes="Success">Success</ToggleButton>
             <ToggleButton Classes="Warning">Warning</ToggleButton>
             <ToggleButton Classes="Danger">Danger</ToggleButton>
-            <ToggleButton Classes="Danger" IsEnabled="False">Danger</ToggleButton>
+            <ToggleButton Classes="Danger" IsEnabled="False">Disabled</ToggleButton>
         </StackPanel>
         <TextBlock Text="Toggle Button Checked State" />
         <StackPanel Orientation="Horizontal" Spacing="20">
@@ -32,7 +32,7 @@
                 Classes="Danger"
                 IsChecked="True"
                 IsEnabled="False">
-                Danger
+                Disabled
             </ToggleButton>
         </StackPanel>
         <TextBlock Text="Toggle Button Three State" />
@@ -79,7 +79,7 @@
                 IsChecked="{x:Null}"
                 IsEnabled="False"
                 IsThreeState="True">
-                Danger
+                Disabled
             </ToggleButton>
         </StackPanel>
         <StackPanel Orientation="Horizontal">

From 4e7681d4d4f1e660c32b9fa40affdea0fe871ef0 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Wed, 27 Mar 2024 15:35:13 +0800
Subject: [PATCH 3/3] feat: Small Classes and BackgroundSizing of
 DateTimePicker, ComboBox TextTrimming.

---
 .../Pages/DatePickerDemo.axaml                | 11 +++++++++++
 .../Pages/TimePickerDemo.axaml                | 11 +++++++++++
 src/Semi.Avalonia/Controls/ComboBox.axaml     |  1 +
 src/Semi.Avalonia/Controls/DatePicker.axaml   | 19 +++++++++++--------
 .../Controls/DateTimePickerShared.axaml       |  4 +++-
 src/Semi.Avalonia/Controls/TimePicker.axaml   | 15 +++++++--------
 6 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml
index 3baefe4..cb6c0df 100644
--- a/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml
@@ -14,5 +14,16 @@
         <DatePicker IsEnabled="False" />
         <DatePicker Classes="Large" />
         <DatePicker Classes="Small" />
+        <StackPanel Orientation="Horizontal">
+            <DatePicker Classes="Large" />
+            <DatePicker />
+            <DatePicker Classes="Small" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <DatePicker IsEnabled="False" />
+            <DatePicker Classes="Bordered" />
+            <DatePicker Classes="Bordered" IsEnabled="False" />
+        </StackPanel>
+
     </StackPanel>
 </UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
index c4b3216..c0f7ec8 100644
--- a/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
@@ -15,5 +15,16 @@
         <TimePicker ClockIdentifier="12HourClock" IsEnabled="False" />
         <TimePicker Classes="Large" />
         <TimePicker Classes="Small" />
+        <StackPanel Orientation="Horizontal">
+            <TimePicker Classes="Large" ClockIdentifier="12HourClock"/>
+            <TimePicker ClockIdentifier="12HourClock"/>
+            <TimePicker Classes="Small" ClockIdentifier="12HourClock"/>
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <TimePicker IsEnabled="False" />
+            <TimePicker Classes="Bordered" />
+            <TimePicker Classes="Bordered" IsEnabled="False" />
+        </StackPanel>
+
     </StackPanel>
 </UserControl>
diff --git a/src/Semi.Avalonia/Controls/ComboBox.axaml b/src/Semi.Avalonia/Controls/ComboBox.axaml
index b37c66e..1a05313 100644
--- a/src/Semi.Avalonia/Controls/ComboBox.axaml
+++ b/src/Semi.Avalonia/Controls/ComboBox.axaml
@@ -62,6 +62,7 @@
                             Margin="{TemplateBinding Padding}"
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            TextTrimming="CharacterEllipsis"
                             Foreground="{TemplateBinding Foreground}"
                             IsVisible="{TemplateBinding SelectionBoxItem,
                                                         Converter={x:Static ObjectConverters.IsNull}}"
diff --git a/src/Semi.Avalonia/Controls/DatePicker.axaml b/src/Semi.Avalonia/Controls/DatePicker.axaml
index 7a3210a..515bc26 100644
--- a/src/Semi.Avalonia/Controls/DatePicker.axaml
+++ b/src/Semi.Avalonia/Controls/DatePicker.axaml
@@ -132,6 +132,7 @@
         <Setter Property="CornerRadius" Value="{DynamicResource DateTimePickerButtonCornerRadius}" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonDefaultHeight}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="DatePicker">
                 <DataValidationErrors>
@@ -145,7 +146,7 @@
                             Grid.ColumnSpan="2"
                             Width="298"
                             MinWidth="298"
-                            MinHeight="{DynamicResource DateTimePickerButtonDefaultHeight}"
+                            MinHeight="0"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Background="{TemplateBinding Background}"
@@ -165,7 +166,7 @@
                                     ColumnDefinitions="78*,Auto,132*,Auto,78*">
                                     <TextBlock
                                         Name="PART_DayTextBlock"
-                                        Padding="12,4"
+                                        Padding="12,0"
                                         HorizontalAlignment="Center"
                                         VerticalAlignment="Center"
                                         FontFamily="{TemplateBinding FontFamily}"
@@ -174,7 +175,7 @@
                                         Text="day" />
                                     <TextBlock
                                         Name="PART_MonthTextBlock"
-                                        Padding="12,4"
+                                        Padding="12,0"
                                         VerticalAlignment="Center"
                                         FontFamily="{TemplateBinding FontFamily}"
                                         FontSize="{TemplateBinding FontSize}"
@@ -183,7 +184,7 @@
                                         TextAlignment="Left" />
                                     <TextBlock
                                         Name="PART_YearTextBlock"
-                                        Padding="12,4"
+                                        Padding="12,0"
                                         HorizontalAlignment="Center"
                                         VerticalAlignment="Center"
                                         FontFamily="{TemplateBinding FontFamily}"
@@ -194,14 +195,16 @@
                                         x:Name="PART_FirstSpacer"
                                         Grid.Column="1"
                                         Width="1"
-                                        Margin="0,4"
+                                        Height="{TemplateBinding Height}"
+                                        MinHeight="{TemplateBinding MinHeight}"
                                         HorizontalAlignment="Center"
                                         Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                                     <Rectangle
                                         x:Name="PART_SecondSpacer"
                                         Grid.Column="3"
                                         Width="1"
-                                        Margin="0,4"
+                                        Height="{TemplateBinding Height}"
+                                        MinHeight="{TemplateBinding MinHeight}"
                                         HorizontalAlignment="Center"
                                         Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                                 </Grid>
@@ -255,10 +258,10 @@
         <Style Selector="^:hasnodate /template/ Button#PART_FlyoutButton TextBlock">
             <Setter Property="Foreground" Value="{DynamicResource DateTimePickerEmptyForeground}" />
         </Style>
-        <Style Selector="^.Large /template/ Button#PART_FlyoutButton">
+        <Style Selector="^.Large">
             <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonLargeHeight}" />
         </Style>
-        <Style Selector="^.Small /template/ Button#PART_FlyoutButton">
+        <Style Selector="^.Small">
             <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonSmallHeight}" />
         </Style>
     </ControlTheme>
diff --git a/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml b/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml
index f18ddaf..6addc9c 100644
--- a/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml
+++ b/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml
@@ -6,7 +6,8 @@
 
     <ControlTheme x:Key="DateTimePickerFlyoutButton" TargetType="Button">
         <Setter Property="RenderTransform" Value="none" />
-        <Setter Property="Button.VerticalAlignment" Value="Stretch" />
+        <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
+        <Setter Property="VerticalAlignment" Value="Stretch" />
         <Setter Property="Template">
             <ControlTemplate>
                 <ContentPresenter
@@ -14,6 +15,7 @@
                     HorizontalContentAlignment="Stretch"
                     VerticalContentAlignment="Stretch"
                     Background="{TemplateBinding Background}"
+                    BackgroundSizing="{TemplateBinding BackgroundSizing}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     Content="{TemplateBinding Content}"
diff --git a/src/Semi.Avalonia/Controls/TimePicker.axaml b/src/Semi.Avalonia/Controls/TimePicker.axaml
index 3e34bd6..3e7a943 100644
--- a/src/Semi.Avalonia/Controls/TimePicker.axaml
+++ b/src/Semi.Avalonia/Controls/TimePicker.axaml
@@ -136,6 +136,7 @@
         <Setter Property="CornerRadius" Value="3" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonDefaultHeight}" />
         <Setter Property="Template">
             <ControlTemplate>
                 <DataValidationErrors>
@@ -149,7 +150,7 @@
                             Grid.ColumnSpan="2"
                             Width="242"
                             MinWidth="242"
-                            MinHeight="{DynamicResource DateTimePickerButtonDefaultHeight}"
+                            MinHeight="0"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Background="{TemplateBinding Background}"
@@ -171,7 +172,7 @@
                                         VerticalAlignment="Stretch">
                                         <TextBlock
                                             x:Name="PART_HourTextBlock"
-                                            Padding="12,4"
+                                            Padding="12,0"
                                             HorizontalAlignment="Center"
                                             VerticalAlignment="Center"
                                             FontFamily="{TemplateBinding FontFamily}"
@@ -183,7 +184,6 @@
                                         Name="PART_FirstColumnDivider"
                                         Grid.Column="1"
                                         Width="1"
-                                        Margin="0,4"
                                         HorizontalAlignment="Center"
                                         Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
 
@@ -194,7 +194,7 @@
                                         VerticalAlignment="Stretch">
                                         <TextBlock
                                             x:Name="PART_MinuteTextBlock"
-                                            Padding="12,4"
+                                            Padding="12,0"
                                             HorizontalAlignment="Center"
                                             VerticalAlignment="Center"
                                             FontFamily="{TemplateBinding FontFamily}"
@@ -206,7 +206,6 @@
                                         Name="PART_SecondColumnDivider"
                                         Grid.Column="3"
                                         Width="1"
-                                        Margin="0,4"
                                         HorizontalAlignment="Center"
                                         Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
 
@@ -217,7 +216,7 @@
                                         VerticalAlignment="Stretch">
                                         <TextBlock
                                             x:Name="PART_PeriodTextBlock"
-                                            Padding="12,4"
+                                            Padding="12,0"
                                             HorizontalAlignment="Center"
                                             VerticalAlignment="Center"
                                             FontFamily="{TemplateBinding FontFamily}"
@@ -278,10 +277,10 @@
             <Setter Property="Foreground" Value="{DynamicResource DateTimePickerEmptyForeground}" />
         </Style>
 
-        <Style Selector="^.Large /template/ Button#PART_FlyoutButton">
+        <Style Selector="^.Large">
             <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonLargeHeight}" />
         </Style>
-        <Style Selector="^.Small /template/ Button#PART_FlyoutButton">
+        <Style Selector="^.Small">
             <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonSmallHeight}" />
         </Style>
     </ControlTheme>