From 1576af3fc74eb438628577a39084d3b661aac0b3 Mon Sep 17 00:00:00 2001
From: rabbitism <dongbin@irihi.tech>
Date: Sat, 27 Apr 2024 14:11:00 +0800
Subject: [PATCH 1/6] feat: create new theme for textbox and use in TimePicker.

---
 src/Ursa.Themes.Semi/Controls/TextBox.axaml   | 79 +++++++++++++++++++
 .../Controls/TimePicker.axaml                 | 26 +-----
 src/Ursa.Themes.Semi/Controls/_index.axaml    |  1 +
 .../DateTimePicker/TimeRangePicker.cs         |  8 ++
 4 files changed, 89 insertions(+), 25 deletions(-)
 create mode 100644 src/Ursa.Themes.Semi/Controls/TextBox.axaml
 create mode 100644 src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs

diff --git a/src/Ursa.Themes.Semi/Controls/TextBox.axaml b/src/Ursa.Themes.Semi/Controls/TextBox.axaml
new file mode 100644
index 0000000..806a0e5
--- /dev/null
+++ b/src/Ursa.Themes.Semi/Controls/TextBox.axaml
@@ -0,0 +1,79 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="LooklessTextBox" TargetType="TextBox">
+        <Setter Property="TextBox.Foreground" Value="{DynamicResource TextBoxForeground}" />
+        <Setter Property="TextBox.SelectionBrush" Value="{DynamicResource TextBoxSelectionBackground}" />
+        <Setter Property="TextBox.SelectionForegroundBrush" Value="{DynamicResource TextBoxSelectionForeground}" />
+        <Setter Property="TextBox.FontSize" Value="14" />
+        <Setter Property="TextBox.Cursor" Value="Ibeam" />
+        <Setter Property="TextBox.CaretBrush" Value="{DynamicResource TextBoxTextCaretBrush}" />
+        <Setter Property="TextBox.Padding" Value="{DynamicResource TextBoxContentPadding}" />
+        <Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxDefaultHeight}" />
+        <Setter Property="TextBox.VerticalAlignment" Value="Center" />
+        <Setter Property="TextBox.VerticalContentAlignment" Value="Center" />
+        <Setter Property="TextBox.FocusAdorner" Value="{x:Null}" />
+        <Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
+        <Setter Property="TextBox.Template">
+            <ControlTemplate TargetType="TextBox">
+                <Border Name="PART_ContentPresenterBorder" MinHeight="{TemplateBinding MinHeight}">
+                    <Grid Margin="{TemplateBinding Padding}" ColumnDefinitions="Auto, *, Auto">
+                        <ContentPresenter
+                            Grid.Column="0"
+                            Padding="{DynamicResource TextBoxInnerLeftContentPadding}"
+                            VerticalAlignment="Center"
+                            Content="{TemplateBinding InnerLeftContent}"
+                            Foreground="{DynamicResource TextBoxInnerForeground}"
+                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerLeftContent, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                        <ScrollViewer
+                            Grid.Column="1"
+                            AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
+                            HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
+                            IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
+                            VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
+                            <Panel>
+                                <TextBlock
+                                    Name="PART_Watermark"
+                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                    IsVisible="{TemplateBinding Text,
+                                                                Converter={x:Static StringConverters.IsNullOrEmpty}}"
+                                    Opacity="0.5"
+                                    Text="{TemplateBinding Watermark}"
+                                    TextAlignment="{TemplateBinding TextAlignment}"
+                                    TextWrapping="{TemplateBinding TextWrapping}" />
+                                <TextPresenter
+                                    Name="PART_TextPresenter"
+                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                    CaretBrush="{TemplateBinding CaretBrush}"
+                                    CaretIndex="{TemplateBinding CaretIndex}"
+                                    LineHeight="{TemplateBinding LineHeight}"
+                                    PasswordChar="{TemplateBinding PasswordChar}"
+                                    RevealPassword="{TemplateBinding RevealPassword}"
+                                    SelectionBrush="{TemplateBinding SelectionBrush}"
+                                    SelectionEnd="{TemplateBinding SelectionEnd}"
+                                    SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
+                                    SelectionStart="{TemplateBinding SelectionStart}"
+                                    Text="{TemplateBinding Text,
+                                                           Mode=TwoWay}"
+                                    TextAlignment="{TemplateBinding TextAlignment}"
+                                    TextWrapping="{TemplateBinding TextWrapping}" />
+                            </Panel>
+                        </ScrollViewer>
+                        <ContentPresenter
+                            Grid.Column="2"
+                            Padding="{DynamicResource TextBoxInnerRightContentPadding}"
+                            VerticalAlignment="Center"
+                            Content="{TemplateBinding InnerRightContent}"
+                            Foreground="{DynamicResource TextBoxInnerForeground}"
+                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerRightContent, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        
+        <Style Selector="^:disabled">
+            <Setter Property="Foreground" Value="{DynamicResource TextBoxDisabledForeground}" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Ursa.Themes.Semi/Controls/TimePicker.axaml b/src/Ursa.Themes.Semi/Controls/TimePicker.axaml
index 779d93f..0a0b301 100644
--- a/src/Ursa.Themes.Semi/Controls/TimePicker.axaml
+++ b/src/Ursa.Themes.Semi/Controls/TimePicker.axaml
@@ -129,36 +129,12 @@
                                 Grid.Column="0"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
-                                Background="Transparent"
-                                BorderBrush="Transparent"
-                                BorderThickness="0"
                                 Foreground="{TemplateBinding Foreground}"
                                 InnerLeftContent="{TemplateBinding InnerLeftContent}"
                                 InnerRightContent="{TemplateBinding InnerRightContent}"
                                 IsReadOnly="{TemplateBinding IsReadonly}"
-                                Theme="{DynamicResource NoErrorTextBox}"
+                                Theme="{DynamicResource LooklessTextBox}"
                                 Watermark="{TemplateBinding Watermark}">
-                                <TextBox.Styles>
-                                    <Style Selector="TextBox#PART_TextBox:pointerover /template/ Border#PART_ContentPresenterBorder">
-                                        <!--  By default the TextBox has its own focused state, override this to disable it here  -->
-                                        <Setter Property="Background" Value="Transparent" />
-                                        <Setter Property="BorderBrush" Value="Transparent" />
-                                        <Setter Property="BorderThickness" Value="0" />
-                                    </Style>
-                                    <Style Selector="TextBox#PART_TextBox:focus /template/ Border#PART_ContentPresenterBorder">
-                                        <!--  By default the TextBox has its own focused state, override this to disable it here  -->
-                                        <Setter Property="Background" Value="Transparent" />
-                                        <Setter Property="BorderBrush" Value="Transparent" />
-                                        <Setter Property="BorderThickness" Value="0" />
-                                    </Style>
-                                    <Style Selector="TextBox#PART_TextBox:disabled">
-                                        <Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
-                                            <!--  By default the TextBox has its own disabled state, override this to make the border background show through  -->
-                                            <Setter Property="Background" Value="Transparent" />
-                                            <Setter Property="BorderBrush" Value="Transparent" />
-                                        </Style>
-                                    </Style>
-                                </TextBox.Styles>
                             </TextBox>
                             <Button
                                 Name="ClearButton"
diff --git a/src/Ursa.Themes.Semi/Controls/_index.axaml b/src/Ursa.Themes.Semi/Controls/_index.axaml
index 0ceb9e3..390ddc3 100644
--- a/src/Ursa.Themes.Semi/Controls/_index.axaml
+++ b/src/Ursa.Themes.Semi/Controls/_index.axaml
@@ -31,6 +31,7 @@
         <ResourceInclude Source="ScrollToButton.axaml" />
         <ResourceInclude Source="SelectionList.axaml" />
         <ResourceInclude Source="TagInput.axaml" />
+        <ResourceInclude Source="TextBox.axaml" />
         <ResourceInclude Source="ThemeSelector.axaml" />
         <ResourceInclude Source="TimePicker.axaml" />
         <ResourceInclude Source="Timeline.axaml" />
diff --git a/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs b/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
new file mode 100644
index 0000000..ef04ec4
--- /dev/null
+++ b/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
@@ -0,0 +1,8 @@
+using Avalonia.Controls.Primitives;
+
+namespace Ursa.Controls;
+
+public class TimeRangePicker: TemplatedControl
+{
+    
+}
\ No newline at end of file

From 6abfb645b0eaa98dea4fe30960ecf3ee48b1e8e3 Mon Sep 17 00:00:00 2001
From: rabbitism <dongbin@irihi.tech>
Date: Sat, 27 Apr 2024 14:28:24 +0800
Subject: [PATCH 2/6] feat: WIP.

---
 .../Controls/TimePicker.axaml                 |  2 +-
 .../Controls/DateTimePicker/TimePicker.cs     |  6 ++--
 .../DateTimePicker/TimeRangePicker.cs         | 36 +++++++++++++++++--
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/Ursa.Themes.Semi/Controls/TimePicker.axaml b/src/Ursa.Themes.Semi/Controls/TimePicker.axaml
index 0a0b301..3bfcf52 100644
--- a/src/Ursa.Themes.Semi/Controls/TimePicker.axaml
+++ b/src/Ursa.Themes.Semi/Controls/TimePicker.axaml
@@ -153,7 +153,7 @@
                                 Focusable="False"
                                 Theme="{DynamicResource InnerIconButton}" />
                             <Popup
-                                Name="{x:Static u:TimePicker.PART_Popup}"
+                                Name="{x:Static iri:PartNames.PART_Popup}"
                                 Grid.Column="0"
                                 IsLightDismissEnabled="True"
                                 IsOpen="{TemplateBinding IsDropdownOpen,
diff --git a/src/Ursa/Controls/DateTimePicker/TimePicker.cs b/src/Ursa/Controls/DateTimePicker/TimePicker.cs
index 25e0ff8..4f9aa2f 100644
--- a/src/Ursa/Controls/DateTimePicker/TimePicker.cs
+++ b/src/Ursa/Controls/DateTimePicker/TimePicker.cs
@@ -6,19 +6,19 @@ using Avalonia.Controls.Primitives;
 using Avalonia.Data;
 using Avalonia.Input;
 using Avalonia.Interactivity;
+using Irihi.Avalonia.Shared.Common;
 using Irihi.Avalonia.Shared.Contracts;
 using Irihi.Avalonia.Shared.Helpers;
 
 namespace Ursa.Controls;
 
 [TemplatePart(PART_TextBox, typeof(TextBox))]
-[TemplatePart(PART_Popup, typeof(Popup))]
+[TemplatePart(PartNames.PART_Popup, typeof(Popup))]
 [TemplatePart(PART_Presenter, typeof(TimePickerPresenter))]
 [TemplatePart(PART_Button, typeof(Button))]
 public class TimePicker : TemplatedControl, IClearControl, IInnerContentControl, IPopupInnerContent
 {
     public const string PART_TextBox = "PART_TextBox";
-    public const string PART_Popup = "PART_Popup";
     public const string PART_Presenter = "PART_Presenter";
     public const string PART_Button = "PART_Button";
 
@@ -157,7 +157,7 @@ public class TimePicker : TemplatedControl, IClearControl, IInnerContentControl,
         Button.ClickEvent.RemoveHandler(OnButtonClick, _button);
 
         _textBox = e.NameScope.Find<TextBox>(PART_TextBox);
-        _popup = e.NameScope.Find<Popup>(PART_Popup);
+        _popup = e.NameScope.Find<Popup>(PartNames.PART_Popup);
         _presenter = e.NameScope.Find<TimePickerPresenter>(PART_Presenter);
         _button = e.NameScope.Find<Button>(PART_Button);
 
diff --git a/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs b/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
index ef04ec4..d53e19c 100644
--- a/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
+++ b/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
@@ -1,8 +1,40 @@
-using Avalonia.Controls.Primitives;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Metadata;
+using Avalonia.Controls.Primitives;
+using Irihi.Avalonia.Shared.Common;
 
 namespace Ursa.Controls;
 
+[TemplatePart(PART_StartTextBox, typeof(TextBox))]
+[TemplatePart(PART_EndTextBox, typeof(TextBox))]
+[TemplatePart(PartNames.PART_Popup, typeof(Popup))]
+[TemplatePart(PART_StartPresenter, typeof(TimePickerPresenter))]
+[TemplatePart(PART_EndPresenter, typeof(TimePickerPresenter))]
+[TemplatePart(PART_Button, typeof(Button))]
 public class TimeRangePicker: TemplatedControl
 {
-    
+    public const string PART_StartTextBox = "PART_StartTextBox";
+    public const string PART_EndTextBox = "PART_EndTextBox";
+    public const string PART_StartPresenter = "PART_StartPresenter";
+    public const string PART_EndPresenter = "PART_EndPresenter";
+    public const string PART_Button = "PART_Button";
+
+    public static readonly StyledProperty<TimeSpan?> StartTimeProperty = AvaloniaProperty.Register<TimeRangePicker, TimeSpan?>(
+        nameof(StartTime));
+
+    public TimeSpan? StartTime
+    {
+        get => GetValue(StartTimeProperty);
+        set => SetValue(StartTimeProperty, value);
+    }
+
+    public static readonly StyledProperty<TimeSpan?> EndTimeProperty = AvaloniaProperty.Register<TimeRangePicker, TimeSpan?>(
+        nameof(EndTime));
+
+    public TimeSpan? EndTime
+    {
+        get => GetValue(EndTimeProperty);
+        set => SetValue(EndTimeProperty, value);
+    }
 }
\ No newline at end of file

From f5aae36754608336e23b4626156d9f58d271386d Mon Sep 17 00:00:00 2001
From: rabbitism <dongbin@irihi.tech>
Date: Sun, 28 Apr 2024 17:32:53 +0800
Subject: [PATCH 3/6] feat: implement template and related feature.

---
 demo/Ursa.Demo/Pages/TimePickerDemo.axaml     |   1 +
 .../Controls/TimeRangePicker.axaml            | 161 ++++++++++++++++++
 src/Ursa.Themes.Semi/Controls/_index.axaml    |   1 +
 .../Controls/DateTimePicker/TimePicker.cs     |  99 +----------
 .../Controls/DateTimePicker/TimePickerBase.cs |  96 +++++++++++
 .../DateTimePicker/TimeRangePicker.cs         | 112 +++++++++++-
 6 files changed, 374 insertions(+), 96 deletions(-)
 create mode 100644 src/Ursa.Themes.Semi/Controls/TimeRangePicker.axaml
 create mode 100644 src/Ursa/Controls/DateTimePicker/TimePickerBase.cs

diff --git a/demo/Ursa.Demo/Pages/TimePickerDemo.axaml b/demo/Ursa.Demo/Pages/TimePickerDemo.axaml
index 219e8e1..3e1b4c9 100644
--- a/demo/Ursa.Demo/Pages/TimePickerDemo.axaml
+++ b/demo/Ursa.Demo/Pages/TimePickerDemo.axaml
@@ -26,5 +26,6 @@
             NeedConfirmation="True"
             InnerLeftContent="时刻"
             InnerRightContent="截止" />
+        <u:TimeRangePicker Width="300"></u:TimeRangePicker>
     </StackPanel>
 </UserControl>
diff --git a/src/Ursa.Themes.Semi/Controls/TimeRangePicker.axaml b/src/Ursa.Themes.Semi/Controls/TimeRangePicker.axaml
new file mode 100644
index 0000000..692ea2a
--- /dev/null
+++ b/src/Ursa.Themes.Semi/Controls/TimeRangePicker.axaml
@@ -0,0 +1,161 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:iri="https://irihi.tech/shared"
+    xmlns:u="https://irihi.tech/ursa">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="{x:Type u:TimeRangePicker}" TargetType="u:TimeRangePicker">
+        <Setter Property="Background" Value="{DynamicResource TextBoxDefaultBackground}" />
+        <Setter Property="Foreground" Value="{DynamicResource TextBoxForeground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource TextBoxDefaultBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource TextBoxBorderThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource TextBoxDefaultCornerRadius}" />
+        <Setter Property="MinHeight" Value="32" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:TimeRangePicker">
+                <DataValidationErrors>
+                    <Panel
+                        x:Name="LayoutRoot"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch">
+                        <Border
+                            x:Name="Background"
+                            HorizontalAlignment="Stretch"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}" />
+                        <Grid ColumnDefinitions="*, Auto, * Auto">
+                            <TextBox
+                                Name="{x:Static u:TimeRangePicker.PART_StartTextBox}"
+                                Grid.Column="0"
+                                HorizontalAlignment="Stretch"
+                                Background="Transparent"
+                                CornerRadius="3 0 0 3"
+                                MinHeight="{TemplateBinding MinHeight}"
+                                BorderThickness="1"
+                                VerticalAlignment="Stretch"
+                                Foreground="{TemplateBinding Foreground}"
+                                InnerLeftContent="{TemplateBinding InnerLeftContent}"
+                                IsReadOnly="{TemplateBinding IsReadonly}"
+                                Watermark="{TemplateBinding StartWatermark}" />
+                            <TextBlock Grid.Column="1" Text="~" VerticalAlignment="Center"></TextBlock>
+                            <TextBox
+                                Name="{x:Static u:TimeRangePicker.PART_EndTextBox}"
+                                MinHeight="{TemplateBinding MinHeight}"
+                                Grid.Column="2"
+                                HorizontalAlignment="Stretch"
+                                Background="Transparent"
+                                CornerRadius="0"
+                                VerticalAlignment="Stretch"
+                                Foreground="{TemplateBinding Foreground}"
+                                InnerRightContent="{TemplateBinding InnerRightContent}"
+                                IsReadOnly="{TemplateBinding IsReadonly}"
+                                Watermark="{TemplateBinding EndWatermark}" />
+                            <Button
+                                Name="ClearButton"
+                                Grid.Column="3"
+                                Padding="0,0,8,0"
+                                Command="{Binding $parent[iri:IClearControl].Clear}"
+                                Content="{DynamicResource IconButtonClearData}"
+                                Focusable="False"
+                                IsVisible="False"
+                                Theme="{DynamicResource InnerIconButton}" />
+                            <Button
+                                Name="{x:Static u:TimePicker.PART_Button}"
+                                Grid.Column="3"
+                                Padding="0,0,8,0"
+                                Content="{DynamicResource TimePickerIconGlyph}"
+                                Focusable="False"
+                                Theme="{DynamicResource InnerIconButton}" />
+                        </Grid>
+                        <Popup
+                            Name="{x:Static iri:PartNames.PART_Popup}"
+                            IsLightDismissEnabled="True"
+                            IsOpen="{TemplateBinding IsDropdownOpen, Mode=TwoWay}"
+                            Placement="BottomEdgeAlignedLeft"
+                            PlacementTarget="Background">
+                            <Border
+                                Margin="0,4"
+                                HorizontalAlignment="Stretch"
+                                Background="{DynamicResource ComboBoxPopupBackground}"
+                                BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
+                                BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}"
+                                BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
+                                ClipToBounds="True"
+                                CornerRadius="6">
+                                <DockPanel>
+                                    <StackPanel DockPanel.Dock="Bottom" IsVisible="{TemplateBinding NeedConfirmation}">
+                                        <Button
+                                            Margin="8"
+                                            HorizontalAlignment="Right"
+                                            Command="{Binding $parent[u:TimeRangePicker].Confirm}"
+                                            Content="{DynamicResource STRING_DATE_TIME_CONFIRM}" />
+                                    </StackPanel>
+                                    <ContentPresenter
+                                        Name="PART_PopupHeader"
+                                        Margin="8,8,8,0"
+                                        Content="{TemplateBinding PopupInnerTopContent}"
+                                        DockPanel.Dock="Top"
+                                        IsVisible="{TemplateBinding PopupInnerTopContent,
+                                                                    Converter={x:Static ObjectConverters.IsNotNull}}" />
+                                    <ContentPresenter
+                                        Name="PART_PopupFooter"
+                                        Margin="8,0,8,8"
+                                        Content="{TemplateBinding PopupInnerBottomContent}"
+                                        DockPanel.Dock="Bottom"
+                                        IsVisible="{TemplateBinding PopupInnerBottomContent,
+                                                                    Converter={x:Static ObjectConverters.IsNotNull}}" />
+                                    <UniformGrid Columns="2">
+                                        <u:TimePickerPresenter
+                                            Name="{x:Static u:TimeRangePicker.PART_StartPresenter}"
+                                            NeedsConfirmation="{TemplateBinding NeedConfirmation}"
+                                            PanelFormat="{TemplateBinding PanelFormat}"
+                                            Time="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=StartTime, Mode=OneWayToSource}" />
+                                        <u:TimePickerPresenter
+                                            Name="{x:Static u:TimeRangePicker.PART_EndPresenter}"
+                                            NeedsConfirmation="{TemplateBinding NeedConfirmation}"
+                                            PanelFormat="{TemplateBinding PanelFormat}"
+                                            Time="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EndTime, Mode=OneWayToSource}" />
+                                    </UniformGrid>
+                                </DockPanel>
+                            </Border>
+                        </Popup>
+                    </Panel>
+                </DataValidationErrors>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^.clearButton, ^.ClearButton">
+            <Style Selector="^:pointerover /template/ Button#ClearButton">
+                <Setter Property="IsVisible" Value="{Binding $parent[u:TimePicker].SelectedTime, Converter={x:Static ObjectConverters.IsNotNull}}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Button#PART_Button">
+                <Setter Property="IsVisible" Value="{Binding $parent[u:TimePicker].SelectedTime, Converter={x:Static ObjectConverters.IsNull}}" />
+            </Style>
+        </Style>
+        
+        <!--  Disabled State  -->
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource CalendarDatePickerDisabledBackground}" />
+            </Style>
+
+            <Style Selector="^ /template/ Button#PART_Button">
+                <Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerDisabledIconForeground}" />
+            </Style>
+            <Style Selector="^ /template/ TextBox#PART_TextBox">
+                <Setter Property="Background" Value="Transparent" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+        </Style>
+
+        <!--  Focused State  -->
+        <Style Selector="^ /template/ Border#Background:focus">
+            <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerFocusBorderBrush}" />
+        </Style>
+        <Style Selector="^ /template/ Border#Background:focus-within">
+            <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerFocusBorderBrush}" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Ursa.Themes.Semi/Controls/_index.axaml b/src/Ursa.Themes.Semi/Controls/_index.axaml
index 390ddc3..bf6acad 100644
--- a/src/Ursa.Themes.Semi/Controls/_index.axaml
+++ b/src/Ursa.Themes.Semi/Controls/_index.axaml
@@ -34,6 +34,7 @@
         <ResourceInclude Source="TextBox.axaml" />
         <ResourceInclude Source="ThemeSelector.axaml" />
         <ResourceInclude Source="TimePicker.axaml" />
+        <ResourceInclude Source="TimeRangePicker.axaml" />
         <ResourceInclude Source="Timeline.axaml" />
         <ResourceInclude Source="TreeComboBox.axaml"/>
         <ResourceInclude Source="Skeleton.axaml" />
diff --git a/src/Ursa/Controls/DateTimePicker/TimePicker.cs b/src/Ursa/Controls/DateTimePicker/TimePicker.cs
index 4f9aa2f..264461a 100644
--- a/src/Ursa/Controls/DateTimePicker/TimePicker.cs
+++ b/src/Ursa/Controls/DateTimePicker/TimePicker.cs
@@ -16,52 +16,19 @@ namespace Ursa.Controls;
 [TemplatePart(PartNames.PART_Popup, typeof(Popup))]
 [TemplatePart(PART_Presenter, typeof(TimePickerPresenter))]
 [TemplatePart(PART_Button, typeof(Button))]
-public class TimePicker : TemplatedControl, IClearControl, IInnerContentControl, IPopupInnerContent
+public class TimePicker : TimePickerBase, IClearControl
 {
     public const string PART_TextBox = "PART_TextBox";
     public const string PART_Presenter = "PART_Presenter";
     public const string PART_Button = "PART_Button";
 
-    public static readonly StyledProperty<string?> DisplayFormatProperty =
-        AvaloniaProperty.Register<TimePicker, string?>(
-            nameof(DisplayFormat), "HH:mm:ss");
-
-    public static readonly StyledProperty<string> PanelFormatProperty = AvaloniaProperty.Register<TimePicker, string>(
-        nameof(PanelFormat), "HH mm ss");
-
     public static readonly StyledProperty<TimeSpan?> SelectedTimeProperty =
         AvaloniaProperty.Register<TimePicker, TimeSpan?>(
             nameof(SelectedTime));
 
-    public static readonly StyledProperty<bool> NeedConfirmationProperty = AvaloniaProperty.Register<TimePicker, bool>(
-        nameof(NeedConfirmation));
-
-    public static readonly StyledProperty<object?> InnerLeftContentProperty =
-        AvaloniaProperty.Register<TimePicker, object?>(
-            nameof(InnerLeftContent));
-
-    public static readonly StyledProperty<object?> InnerRightContentProperty =
-        AvaloniaProperty.Register<TimePicker, object?>(
-            nameof(InnerRightContent));
-
-
-    public static readonly StyledProperty<object?> PopupInnerTopContentProperty =
-        AvaloniaProperty.Register<TimePicker, object?>(
-            nameof(PopupInnerTopContent));
-
-    public static readonly StyledProperty<object?> PopupInnerBottomContentProperty =
-        AvaloniaProperty.Register<TimePicker, object?>(
-            nameof(PopupInnerBottomContent));
-
     public static readonly StyledProperty<string?> WatermarkProperty = AvaloniaProperty.Register<TimePicker, string?>(
         nameof(Watermark));
 
-    public static readonly StyledProperty<bool> IsDropdownOpenProperty = AvaloniaProperty.Register<TimePicker, bool>(
-        nameof(IsDropdownOpen), defaultBindingMode: BindingMode.TwoWay);
-
-    public static readonly StyledProperty<bool> IsReadonlyProperty = AvaloniaProperty.Register<TimePicker, bool>(
-        nameof(IsReadonly));
-
     private Button? _button;
     private Popup? _popup;
     private TimePickerPresenter? _presenter;
@@ -74,79 +41,24 @@ public class TimePicker : TemplatedControl, IClearControl, IInnerContentControl,
             picker.OnSelectionChanged(args));
     }
 
-    public bool IsReadonly
-    {
-        get => GetValue(IsReadonlyProperty);
-        set => SetValue(IsReadonlyProperty, value);
-    }
-
-    public bool IsDropdownOpen
-    {
-        get => GetValue(IsDropdownOpenProperty);
-        set => SetValue(IsDropdownOpenProperty, value);
-    }
-
     public string? Watermark
     {
         get => GetValue(WatermarkProperty);
         set => SetValue(WatermarkProperty, value);
     }
 
-    public string? DisplayFormat
-    {
-        get => GetValue(DisplayFormatProperty);
-        set => SetValue(DisplayFormatProperty, value);
-    }
-
-    public string PanelFormat
-    {
-        get => GetValue(PanelFormatProperty);
-        set => SetValue(PanelFormatProperty, value);
-    }
-
     public TimeSpan? SelectedTime
     {
         get => GetValue(SelectedTimeProperty);
         set => SetValue(SelectedTimeProperty, value);
     }
 
-    public bool NeedConfirmation
-    {
-        get => GetValue(NeedConfirmationProperty);
-        set => SetValue(NeedConfirmationProperty, value);
-    }
-
     public void Clear()
     {
         Focus(NavigationMethod.Pointer);
         _presenter?.SetValue(TimePickerPresenter.TimeProperty, null);
     }
 
-    public object? InnerLeftContent
-    {
-        get => GetValue(InnerLeftContentProperty);
-        set => SetValue(InnerLeftContentProperty, value);
-    }
-
-    public object? InnerRightContent
-    {
-        get => GetValue(InnerRightContentProperty);
-        set => SetValue(InnerRightContentProperty, value);
-    }
-
-    public object? PopupInnerTopContent
-    {
-        get => GetValue(PopupInnerTopContentProperty);
-        set => SetValue(PopupInnerTopContentProperty, value);
-    }
-
-    public object? PopupInnerBottomContent
-    {
-        get => GetValue(PopupInnerBottomContentProperty);
-        set => SetValue(PopupInnerBottomContentProperty, value);
-    }
-
-
     protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
         base.OnApplyTemplate(e);
@@ -185,6 +97,12 @@ public class TimePicker : TemplatedControl, IClearControl, IInnerContentControl,
         IsDropdownOpen = true;
     }
 
+    protected override void OnLostFocus(RoutedEventArgs e)
+    {
+        base.OnLostFocus(e);
+        SetCurrentValue(IsDropdownOpenProperty, IsPointerOver);
+    }
+
     protected override void OnKeyDown(KeyEventArgs e)
     {
         if (e.Key == Key.Escape)
@@ -193,6 +111,7 @@ public class TimePicker : TemplatedControl, IClearControl, IInnerContentControl,
             e.Handled = true;
             return;
         }
+
         if (e.Key == Key.Down)
         {
             SetCurrentValue(IsDropdownOpenProperty, true);
@@ -205,6 +124,7 @@ public class TimePicker : TemplatedControl, IClearControl, IInnerContentControl,
             SetCurrentValue(IsDropdownOpenProperty, false);
             return;
         }
+
         base.OnKeyDown(e);
     }
 
@@ -246,7 +166,6 @@ public class TimePicker : TemplatedControl, IClearControl, IInnerContentControl,
     {
         _presenter?.Confirm();
         SetCurrentValue(IsDropdownOpenProperty, false);
-        TopLevel.GetTopLevel(this);
         Focus();
     }
 
diff --git a/src/Ursa/Controls/DateTimePicker/TimePickerBase.cs b/src/Ursa/Controls/DateTimePicker/TimePickerBase.cs
new file mode 100644
index 0000000..d3f973b
--- /dev/null
+++ b/src/Ursa/Controls/DateTimePicker/TimePickerBase.cs
@@ -0,0 +1,96 @@
+using Avalonia;
+using Avalonia.Controls.Primitives;
+using Avalonia.Data;
+using Irihi.Avalonia.Shared.Contracts;
+
+namespace Ursa.Controls;
+
+public abstract class TimePickerBase : TemplatedControl, IInnerContentControl, IPopupInnerContent
+{
+    public static readonly StyledProperty<string?> DisplayFormatProperty =
+        AvaloniaProperty.Register<TimePicker, string?>(
+            nameof(DisplayFormat), "HH:mm:ss");
+
+    public static readonly StyledProperty<string> PanelFormatProperty = AvaloniaProperty.Register<TimePicker, string>(
+        nameof(PanelFormat), "HH mm ss");
+
+    public static readonly StyledProperty<bool> NeedConfirmationProperty = AvaloniaProperty.Register<TimePicker, bool>(
+        nameof(NeedConfirmation));
+
+    public static readonly StyledProperty<object?> InnerLeftContentProperty =
+        AvaloniaProperty.Register<TimePicker, object?>(
+            nameof(InnerLeftContent));
+
+    public static readonly StyledProperty<object?> InnerRightContentProperty =
+        AvaloniaProperty.Register<TimePicker, object?>(
+            nameof(InnerRightContent));
+
+
+    public static readonly StyledProperty<object?> PopupInnerTopContentProperty =
+        AvaloniaProperty.Register<TimePicker, object?>(
+            nameof(PopupInnerTopContent));
+
+    public static readonly StyledProperty<object?> PopupInnerBottomContentProperty =
+        AvaloniaProperty.Register<TimePicker, object?>(
+            nameof(PopupInnerBottomContent));
+
+    public static readonly StyledProperty<bool> IsDropdownOpenProperty = AvaloniaProperty.Register<TimePicker, bool>(
+        nameof(IsDropdownOpen), defaultBindingMode: BindingMode.TwoWay);
+
+    public static readonly StyledProperty<bool> IsReadonlyProperty = AvaloniaProperty.Register<TimePicker, bool>(
+        nameof(IsReadonly));
+
+    public bool IsReadonly
+    {
+        get => GetValue(IsReadonlyProperty);
+        set => SetValue(IsReadonlyProperty, value);
+    }
+
+    public bool IsDropdownOpen
+    {
+        get => GetValue(IsDropdownOpenProperty);
+        set => SetValue(IsDropdownOpenProperty, value);
+    }
+
+    public string? DisplayFormat
+    {
+        get => GetValue(DisplayFormatProperty);
+        set => SetValue(DisplayFormatProperty, value);
+    }
+
+    public string PanelFormat
+    {
+        get => GetValue(PanelFormatProperty);
+        set => SetValue(PanelFormatProperty, value);
+    }
+
+    public bool NeedConfirmation
+    {
+        get => GetValue(NeedConfirmationProperty);
+        set => SetValue(NeedConfirmationProperty, value);
+    }
+
+    public object? InnerLeftContent
+    {
+        get => GetValue(InnerLeftContentProperty);
+        set => SetValue(InnerLeftContentProperty, value);
+    }
+
+    public object? InnerRightContent
+    {
+        get => GetValue(InnerRightContentProperty);
+        set => SetValue(InnerRightContentProperty, value);
+    }
+
+    public object? PopupInnerTopContent
+    {
+        get => GetValue(PopupInnerTopContentProperty);
+        set => SetValue(PopupInnerTopContentProperty, value);
+    }
+
+    public object? PopupInnerBottomContent
+    {
+        get => GetValue(PopupInnerBottomContentProperty);
+        set => SetValue(PopupInnerBottomContentProperty, value);
+    }
+}
\ No newline at end of file
diff --git a/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs b/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
index d53e19c..1396d82 100644
--- a/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
+++ b/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
@@ -2,7 +2,11 @@
 using Avalonia.Controls;
 using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Primitives;
+using Avalonia.Input;
+using Avalonia.Interactivity;
 using Irihi.Avalonia.Shared.Common;
+using Irihi.Avalonia.Shared.Contracts;
+using Irihi.Avalonia.Shared.Helpers;
 
 namespace Ursa.Controls;
 
@@ -12,7 +16,7 @@ namespace Ursa.Controls;
 [TemplatePart(PART_StartPresenter, typeof(TimePickerPresenter))]
 [TemplatePart(PART_EndPresenter, typeof(TimePickerPresenter))]
 [TemplatePart(PART_Button, typeof(Button))]
-public class TimeRangePicker: TemplatedControl
+public class TimeRangePicker : TimePickerBase, IClearControl
 {
     public const string PART_StartTextBox = "PART_StartTextBox";
     public const string PART_EndTextBox = "PART_EndTextBox";
@@ -20,8 +24,46 @@ public class TimeRangePicker: TemplatedControl
     public const string PART_EndPresenter = "PART_EndPresenter";
     public const string PART_Button = "PART_Button";
 
-    public static readonly StyledProperty<TimeSpan?> StartTimeProperty = AvaloniaProperty.Register<TimeRangePicker, TimeSpan?>(
-        nameof(StartTime));
+
+    public static readonly StyledProperty<TimeSpan?> StartTimeProperty =
+        AvaloniaProperty.Register<TimeRangePicker, TimeSpan?>(
+            nameof(StartTime));
+
+    public static readonly StyledProperty<TimeSpan?> EndTimeProperty =
+        AvaloniaProperty.Register<TimeRangePicker, TimeSpan?>(
+            nameof(EndTime));
+
+    public static readonly StyledProperty<string?> StartWatermarkProperty =
+        AvaloniaProperty.Register<TimeRangePicker, string?>(
+            nameof(StartWatermark));
+
+    public static readonly StyledProperty<string?> EndWatermarkProperty = AvaloniaProperty.Register<TimeRangePicker, string?>(
+        nameof(EndWatermark));
+
+    public string? EndWatermark
+    {
+        get => GetValue(EndWatermarkProperty);
+        set => SetValue(EndWatermarkProperty, value);
+    }
+
+    private Button? _button;
+    private TimePickerPresenter? _endPresenter;
+    private TextBox? _endTextBox;
+    private Popup? _popup;
+    private TimePickerPresenter? _startPresenter;
+
+    private TextBox? _startTextBox;
+
+
+    static TimeRangePicker()
+    {
+    }
+
+    public string? StartWatermark
+    {
+        get => GetValue(StartWatermarkProperty);
+        set => SetValue(StartWatermarkProperty, value);
+    }
 
     public TimeSpan? StartTime
     {
@@ -29,12 +71,70 @@ public class TimeRangePicker: TemplatedControl
         set => SetValue(StartTimeProperty, value);
     }
 
-    public static readonly StyledProperty<TimeSpan?> EndTimeProperty = AvaloniaProperty.Register<TimeRangePicker, TimeSpan?>(
-        nameof(EndTime));
-
     public TimeSpan? EndTime
     {
         get => GetValue(EndTimeProperty);
         set => SetValue(EndTimeProperty, value);
     }
+
+    public void Clear()
+    {
+        Focus(NavigationMethod.Pointer);
+        _startPresenter?.SetValue(TimePickerPresenter.TimeProperty, null);
+        _endPresenter?.SetValue(TimePickerPresenter.TimeProperty, null);
+    }
+
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        base.OnApplyTemplate(e);
+        
+        GotFocusEvent.RemoveHandler(OnTextBoxGetFocus, _startTextBox, _endTextBox);
+        
+        _popup = e.NameScope.Find<Popup>(PartNames.PART_Popup);
+        _startTextBox = e.NameScope.Find<TextBox>(PART_StartTextBox);
+        _endTextBox = e.NameScope.Find<TextBox>(PART_EndTextBox);
+        _startPresenter = e.NameScope.Find<TimePickerPresenter>(PART_StartPresenter);
+        _endPresenter = e.NameScope.Find<TimePickerPresenter>(PART_EndPresenter);
+        _button = e.NameScope.Find<Button>(PART_Button);
+        
+        GotFocusEvent.AddHandler(OnTextBoxGetFocus, _startTextBox, _endTextBox);
+    }
+
+    private void OnTextBoxGetFocus(object sender, GotFocusEventArgs e)
+    {
+        SetCurrentValue(IsDropdownOpenProperty, true);
+    }
+
+    protected override void OnKeyDown(KeyEventArgs e)
+    {
+        if (e.Key == Key.Escape)
+        {
+            SetCurrentValue(IsDropdownOpenProperty, false);
+            e.Handled = true;
+            return;
+        }
+        if (e.Key == Key.Down)
+        {
+            SetCurrentValue(IsDropdownOpenProperty, true);
+            e.Handled = true;
+            return;
+        }
+        if (e.Key == Key.Tab)
+        {
+            if (e.Source == _endTextBox)
+            {
+                SetCurrentValue(IsDropdownOpenProperty, false);
+            }
+            return;
+        }
+        base.OnKeyDown(e);
+    }
+
+    public void Confirm()
+    {
+        _startPresenter?.Confirm();
+        _endPresenter?.Confirm();
+        SetCurrentValue(IsDropdownOpenProperty, false);
+        Focus();
+    }
 }
\ No newline at end of file

From 2b2259376adc147f79b1e32a48e4e78ec1418c28 Mon Sep 17 00:00:00 2001
From: rabbitism <dongbin@irihi.tech>
Date: Sun, 28 Apr 2024 18:06:49 +0800
Subject: [PATCH 4/6] feat: update layout.

---
 .../Controls/TimePicker.axaml                 | 12 ++--
 .../Controls/TimeRangePicker.axaml            | 62 +++++++++++++++----
 .../Controls/DateTimePicker/TimePicker.cs     |  8 +--
 .../DateTimePicker/TimeRangePicker.cs         | 26 ++++++++
 4 files changed, 82 insertions(+), 26 deletions(-)

diff --git a/src/Ursa.Themes.Semi/Controls/TimePicker.axaml b/src/Ursa.Themes.Semi/Controls/TimePicker.axaml
index 3bfcf52..14c5b6b 100644
--- a/src/Ursa.Themes.Semi/Controls/TimePicker.axaml
+++ b/src/Ursa.Themes.Semi/Controls/TimePicker.axaml
@@ -38,8 +38,8 @@
                     <Rectangle
                         Name="{x:Static u:TimePickerPresenter.PART_FirstSeparator}"
                         Grid.Column="1"
-                        Width="1"
-                        Margin="0,4"
+                        Width="0.5"
+                        Margin="0,8"
                         VerticalAlignment="Stretch"
                         Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                     <ScrollViewer
@@ -59,8 +59,8 @@
                     <Rectangle
                         Name="{x:Static u:TimePickerPresenter.PART_SecondSeparator}"
                         Grid.Column="3"
-                        Width="1"
-                        Margin="0,4"
+                        Width="0.5"
+                        Margin="0,8"
                         VerticalAlignment="Stretch"
                         Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                     <ScrollViewer
@@ -80,8 +80,8 @@
                     <Rectangle
                         Name="{x:Static u:TimePickerPresenter.PART_ThirdSeparator}"
                         Grid.Column="5"
-                        Width="1"
-                        Margin="0,4"
+                        Width="0.5"
+                        Margin="0,8"
                         VerticalAlignment="Stretch"
                         Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                     <ScrollViewer
diff --git a/src/Ursa.Themes.Semi/Controls/TimeRangePicker.axaml b/src/Ursa.Themes.Semi/Controls/TimeRangePicker.axaml
index 692ea2a..f4cc0bd 100644
--- a/src/Ursa.Themes.Semi/Controls/TimeRangePicker.axaml
+++ b/src/Ursa.Themes.Semi/Controls/TimeRangePicker.axaml
@@ -29,25 +29,28 @@
                             <TextBox
                                 Name="{x:Static u:TimeRangePicker.PART_StartTextBox}"
                                 Grid.Column="0"
-                                HorizontalAlignment="Stretch"
-                                Background="Transparent"
-                                CornerRadius="3 0 0 3"
                                 MinHeight="{TemplateBinding MinHeight}"
-                                BorderThickness="1"
+                                HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
+                                Background="Transparent"
+                                BorderThickness="1"
+                                CornerRadius="3 0 0 3"
                                 Foreground="{TemplateBinding Foreground}"
                                 InnerLeftContent="{TemplateBinding InnerLeftContent}"
                                 IsReadOnly="{TemplateBinding IsReadonly}"
                                 Watermark="{TemplateBinding StartWatermark}" />
-                            <TextBlock Grid.Column="1" Text="~" VerticalAlignment="Center"></TextBlock>
+                            <TextBlock
+                                Grid.Column="1"
+                                VerticalAlignment="Center"
+                                Text="~" />
                             <TextBox
                                 Name="{x:Static u:TimeRangePicker.PART_EndTextBox}"
-                                MinHeight="{TemplateBinding MinHeight}"
                                 Grid.Column="2"
+                                MinHeight="{TemplateBinding MinHeight}"
                                 HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
                                 Background="Transparent"
                                 CornerRadius="0"
-                                VerticalAlignment="Stretch"
                                 Foreground="{TemplateBinding Foreground}"
                                 InnerRightContent="{TemplateBinding InnerRightContent}"
                                 IsReadOnly="{TemplateBinding IsReadonly}"
@@ -55,7 +58,7 @@
                             <Button
                                 Name="ClearButton"
                                 Grid.Column="3"
-                                Padding="0,0,8,0"
+                                Padding="8,0"
                                 Command="{Binding $parent[iri:IClearControl].Clear}"
                                 Content="{DynamicResource IconButtonClearData}"
                                 Focusable="False"
@@ -64,7 +67,7 @@
                             <Button
                                 Name="{x:Static u:TimePicker.PART_Button}"
                                 Grid.Column="3"
-                                Padding="0,0,8,0"
+                                Padding="8,0"
                                 Content="{DynamicResource TimePickerIconGlyph}"
                                 Focusable="False"
                                 Theme="{DynamicResource InnerIconButton}" />
@@ -72,7 +75,8 @@
                         <Popup
                             Name="{x:Static iri:PartNames.PART_Popup}"
                             IsLightDismissEnabled="True"
-                            IsOpen="{TemplateBinding IsDropdownOpen, Mode=TwoWay}"
+                            IsOpen="{TemplateBinding IsDropdownOpen,
+                                                     Mode=TwoWay}"
                             Placement="BottomEdgeAlignedLeft"
                             PlacementTarget="Background">
                             <Border
@@ -106,18 +110,50 @@
                                         DockPanel.Dock="Bottom"
                                         IsVisible="{TemplateBinding PopupInnerBottomContent,
                                                                     Converter={x:Static ObjectConverters.IsNotNull}}" />
-                                    <UniformGrid Columns="2">
+                                    <Grid ColumnDefinitions="*, Auto, *" RowDefinitions="Auto, Auto, *">
+                                        <TextBlock
+                                            Grid.Row="0"
+                                            Grid.Column="0"
+                                            Margin="0,16"
+                                            HorizontalAlignment="Center"
+                                            FontWeight="Bold"
+                                            Text="Start Time" />
+                                        <TextBlock
+                                            Grid.Row="0"
+                                            Grid.Column="2"
+                                            Margin="0,16"
+                                            HorizontalAlignment="Center"
+                                            FontWeight="Bold"
+                                            Text="End Time" />
+                                        <Rectangle
+                                            Grid.Row="1"
+                                            Grid.Column="0"
+                                            Grid.ColumnSpan="3"
+                                            Fill="{DynamicResource DateTimePickerSeparatorBackground}"
+                                            Margin="8 0"
+                                            Height="1" />
                                         <u:TimePickerPresenter
                                             Name="{x:Static u:TimeRangePicker.PART_StartPresenter}"
+                                            Grid.Row="2"
+                                            Grid.Column="0"
                                             NeedsConfirmation="{TemplateBinding NeedConfirmation}"
                                             PanelFormat="{TemplateBinding PanelFormat}"
                                             Time="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=StartTime, Mode=OneWayToSource}" />
+                                        <Rectangle
+                                            Grid.Row="2"
+                                            Grid.Column="1"
+                                            Width="1"
+                                            Margin="0,4"
+                                            VerticalAlignment="Stretch"
+                                            Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                                         <u:TimePickerPresenter
                                             Name="{x:Static u:TimeRangePicker.PART_EndPresenter}"
+                                            Grid.Row="2"
+                                            Grid.Column="2"
                                             NeedsConfirmation="{TemplateBinding NeedConfirmation}"
                                             PanelFormat="{TemplateBinding PanelFormat}"
                                             Time="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EndTime, Mode=OneWayToSource}" />
-                                    </UniformGrid>
+                                    </Grid>
                                 </DockPanel>
                             </Border>
                         </Popup>
@@ -134,7 +170,7 @@
                 <Setter Property="IsVisible" Value="{Binding $parent[u:TimePicker].SelectedTime, Converter={x:Static ObjectConverters.IsNull}}" />
             </Style>
         </Style>
-        
+
         <!--  Disabled State  -->
         <Style Selector="^:disabled">
             <Style Selector="^ /template/ Border#Background">
diff --git a/src/Ursa/Controls/DateTimePicker/TimePicker.cs b/src/Ursa/Controls/DateTimePicker/TimePicker.cs
index 264461a..c15bdbb 100644
--- a/src/Ursa/Controls/DateTimePicker/TimePicker.cs
+++ b/src/Ursa/Controls/DateTimePicker/TimePicker.cs
@@ -94,13 +94,7 @@ public class TimePicker : TimePickerBase, IClearControl
 
     private void OnTextBoxGetFocus(object? sender, GotFocusEventArgs e)
     {
-        IsDropdownOpen = true;
-    }
-
-    protected override void OnLostFocus(RoutedEventArgs e)
-    {
-        base.OnLostFocus(e);
-        SetCurrentValue(IsDropdownOpenProperty, IsPointerOver);
+        SetCurrentValue(IsDropdownOpenProperty, true);
     }
 
     protected override void OnKeyDown(KeyEventArgs e)
diff --git a/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs b/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
index 1396d82..5b5986e 100644
--- a/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
+++ b/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
@@ -57,6 +57,25 @@ public class TimeRangePicker : TimePickerBase, IClearControl
 
     static TimeRangePicker()
     {
+        StartTimeProperty.Changed.AddClassHandler<TimeRangePicker, TimeSpan?>((picker, args) =>
+            picker.OnSelectionChanged(args, true));
+        EndTimeProperty.Changed.AddClassHandler<TimeRangePicker, TimeSpan?>((picker, args) =>
+            picker.OnSelectionChanged(args, false));
+    }
+
+    private void OnSelectionChanged(AvaloniaPropertyChangedEventArgs<TimeSpan?> args, bool start = true)
+    {
+        var textBox = start ? _startTextBox : _endTextBox;
+        if (textBox is null) return;
+        var time = args.NewValue.Value;
+        if (time is null)
+        {
+            textBox.Text = null;
+            return;
+        }
+        var date = new DateTime(1, 1, 1, time.Value.Hours, time.Value.Minutes, time.Value.Seconds);
+        var text = date.ToString(DisplayFormat);
+        textBox.Text = text;
     }
 
     public string? StartWatermark
@@ -89,6 +108,7 @@ public class TimeRangePicker : TimePickerBase, IClearControl
         base.OnApplyTemplate(e);
         
         GotFocusEvent.RemoveHandler(OnTextBoxGetFocus, _startTextBox, _endTextBox);
+        PointerPressedEvent.RemoveHandler(OnTextBoxPointerPressed, _startTextBox, _endTextBox);
         
         _popup = e.NameScope.Find<Popup>(PartNames.PART_Popup);
         _startTextBox = e.NameScope.Find<TextBox>(PART_StartTextBox);
@@ -98,6 +118,12 @@ public class TimeRangePicker : TimePickerBase, IClearControl
         _button = e.NameScope.Find<Button>(PART_Button);
         
         GotFocusEvent.AddHandler(OnTextBoxGetFocus, _startTextBox, _endTextBox);
+        PointerPressedEvent.AddHandler(OnTextBoxPointerPressed, RoutingStrategies.Tunnel, false, _startTextBox, _endTextBox);
+    }
+
+    private void OnTextBoxPointerPressed(object sender, PointerPressedEventArgs e)
+    {
+        SetCurrentValue(IsDropdownOpenProperty, true);
     }
 
     private void OnTextBoxGetFocus(object sender, GotFocusEventArgs e)

From bfd7f0c44eacc78829764a276b7d8632793fc7f1 Mon Sep 17 00:00:00 2001
From: rabbitism <dongbin@irihi.tech>
Date: Sun, 28 Apr 2024 18:13:20 +0800
Subject: [PATCH 5/6] feat: add button interaction.

---
 .../DateTimePicker/TimeRangePicker.cs         | 75 ++++++++++++-------
 1 file changed, 46 insertions(+), 29 deletions(-)

diff --git a/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs b/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
index 5b5986e..2fcb486 100644
--- a/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
+++ b/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
@@ -37,14 +37,9 @@ public class TimeRangePicker : TimePickerBase, IClearControl
         AvaloniaProperty.Register<TimeRangePicker, string?>(
             nameof(StartWatermark));
 
-    public static readonly StyledProperty<string?> EndWatermarkProperty = AvaloniaProperty.Register<TimeRangePicker, string?>(
-        nameof(EndWatermark));
-
-    public string? EndWatermark
-    {
-        get => GetValue(EndWatermarkProperty);
-        set => SetValue(EndWatermarkProperty, value);
-    }
+    public static readonly StyledProperty<string?> EndWatermarkProperty =
+        AvaloniaProperty.Register<TimeRangePicker, string?>(
+            nameof(EndWatermark));
 
     private Button? _button;
     private TimePickerPresenter? _endPresenter;
@@ -58,24 +53,15 @@ public class TimeRangePicker : TimePickerBase, IClearControl
     static TimeRangePicker()
     {
         StartTimeProperty.Changed.AddClassHandler<TimeRangePicker, TimeSpan?>((picker, args) =>
-            picker.OnSelectionChanged(args, true));
+            picker.OnSelectionChanged(args));
         EndTimeProperty.Changed.AddClassHandler<TimeRangePicker, TimeSpan?>((picker, args) =>
             picker.OnSelectionChanged(args, false));
     }
 
-    private void OnSelectionChanged(AvaloniaPropertyChangedEventArgs<TimeSpan?> args, bool start = true)
+    public string? EndWatermark
     {
-        var textBox = start ? _startTextBox : _endTextBox;
-        if (textBox is null) return;
-        var time = args.NewValue.Value;
-        if (time is null)
-        {
-            textBox.Text = null;
-            return;
-        }
-        var date = new DateTime(1, 1, 1, time.Value.Hours, time.Value.Minutes, time.Value.Seconds);
-        var text = date.ToString(DisplayFormat);
-        textBox.Text = text;
+        get => GetValue(EndWatermarkProperty);
+        set => SetValue(EndWatermarkProperty, value);
     }
 
     public string? StartWatermark
@@ -103,22 +89,47 @@ public class TimeRangePicker : TimePickerBase, IClearControl
         _endPresenter?.SetValue(TimePickerPresenter.TimeProperty, null);
     }
 
+    private void OnSelectionChanged(AvaloniaPropertyChangedEventArgs<TimeSpan?> args, bool start = true)
+    {
+        var textBox = start ? _startTextBox : _endTextBox;
+        if (textBox is null) return;
+        var time = args.NewValue.Value;
+        if (time is null)
+        {
+            textBox.Text = null;
+            return;
+        }
+
+        var date = new DateTime(1, 1, 1, time.Value.Hours, time.Value.Minutes, time.Value.Seconds);
+        var text = date.ToString(DisplayFormat);
+        textBox.Text = text;
+    }
+
     protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
         base.OnApplyTemplate(e);
-        
+
         GotFocusEvent.RemoveHandler(OnTextBoxGetFocus, _startTextBox, _endTextBox);
         PointerPressedEvent.RemoveHandler(OnTextBoxPointerPressed, _startTextBox, _endTextBox);
-        
+        Button.ClickEvent.RemoveHandler(OnButtonClick, _button);
+
         _popup = e.NameScope.Find<Popup>(PartNames.PART_Popup);
         _startTextBox = e.NameScope.Find<TextBox>(PART_StartTextBox);
         _endTextBox = e.NameScope.Find<TextBox>(PART_EndTextBox);
         _startPresenter = e.NameScope.Find<TimePickerPresenter>(PART_StartPresenter);
         _endPresenter = e.NameScope.Find<TimePickerPresenter>(PART_EndPresenter);
         _button = e.NameScope.Find<Button>(PART_Button);
-        
+
         GotFocusEvent.AddHandler(OnTextBoxGetFocus, _startTextBox, _endTextBox);
-        PointerPressedEvent.AddHandler(OnTextBoxPointerPressed, RoutingStrategies.Tunnel, false, _startTextBox, _endTextBox);
+        PointerPressedEvent.AddHandler(OnTextBoxPointerPressed, RoutingStrategies.Tunnel, false, _startTextBox,
+            _endTextBox);
+        Button.ClickEvent.AddHandler(OnButtonClick, _button);
+    }
+
+    private void OnButtonClick(object sender, RoutedEventArgs e)
+    {
+        Focus(NavigationMethod.Pointer);
+        SetCurrentValue(IsDropdownOpenProperty, !IsDropdownOpen);
     }
 
     private void OnTextBoxPointerPressed(object sender, PointerPressedEventArgs e)
@@ -139,20 +150,20 @@ public class TimeRangePicker : TimePickerBase, IClearControl
             e.Handled = true;
             return;
         }
+
         if (e.Key == Key.Down)
         {
             SetCurrentValue(IsDropdownOpenProperty, true);
             e.Handled = true;
             return;
         }
+
         if (e.Key == Key.Tab)
         {
-            if (e.Source == _endTextBox)
-            {
-                SetCurrentValue(IsDropdownOpenProperty, false);
-            }
+            if (e.Source == _endTextBox) SetCurrentValue(IsDropdownOpenProperty, false);
             return;
         }
+
         base.OnKeyDown(e);
     }
 
@@ -163,4 +174,10 @@ public class TimeRangePicker : TimePickerBase, IClearControl
         SetCurrentValue(IsDropdownOpenProperty, false);
         Focus();
     }
+    
+    public void Dismiss()
+    {
+        SetCurrentValue(IsDropdownOpenProperty, false);
+        Focus();
+    }
 }
\ No newline at end of file

From af63bdee112cca28b5ec6f190a0db783d22882d7 Mon Sep 17 00:00:00 2001
From: rabbitism <dongbin@irihi.tech>
Date: Sun, 28 Apr 2024 18:16:23 +0800
Subject: [PATCH 6/6] feat: change default binding mode.

---
 src/Ursa/Controls/DateTimePicker/TimePicker.cs      | 2 +-
 src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/Ursa/Controls/DateTimePicker/TimePicker.cs b/src/Ursa/Controls/DateTimePicker/TimePicker.cs
index c15bdbb..983e3d2 100644
--- a/src/Ursa/Controls/DateTimePicker/TimePicker.cs
+++ b/src/Ursa/Controls/DateTimePicker/TimePicker.cs
@@ -24,7 +24,7 @@ public class TimePicker : TimePickerBase, IClearControl
 
     public static readonly StyledProperty<TimeSpan?> SelectedTimeProperty =
         AvaloniaProperty.Register<TimePicker, TimeSpan?>(
-            nameof(SelectedTime));
+            nameof(SelectedTime), defaultBindingMode: BindingMode.TwoWay);
 
     public static readonly StyledProperty<string?> WatermarkProperty = AvaloniaProperty.Register<TimePicker, string?>(
         nameof(Watermark));
diff --git a/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs b/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
index 2fcb486..6bdf450 100644
--- a/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
+++ b/src/Ursa/Controls/DateTimePicker/TimeRangePicker.cs
@@ -2,6 +2,7 @@
 using Avalonia.Controls;
 using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Primitives;
+using Avalonia.Data;
 using Avalonia.Input;
 using Avalonia.Interactivity;
 using Irihi.Avalonia.Shared.Common;
@@ -27,11 +28,11 @@ public class TimeRangePicker : TimePickerBase, IClearControl
 
     public static readonly StyledProperty<TimeSpan?> StartTimeProperty =
         AvaloniaProperty.Register<TimeRangePicker, TimeSpan?>(
-            nameof(StartTime));
+            nameof(StartTime), defaultBindingMode: BindingMode.TwoWay);
 
     public static readonly StyledProperty<TimeSpan?> EndTimeProperty =
         AvaloniaProperty.Register<TimeRangePicker, TimeSpan?>(
-            nameof(EndTime));
+            nameof(EndTime), defaultBindingMode: BindingMode.TwoWay);
 
     public static readonly StyledProperty<string?> StartWatermarkProperty =
         AvaloniaProperty.Register<TimeRangePicker, string?>(