feat: update layout.

src/Ursa.Themes.Semi/Controls/TimePicker.axaml

@@ -38,8 +38,8 @@
                     <Rectangle
                         Name="{x:Static u:TimePickerPresenter.PART_FirstSeparator}"
                         Grid.Column="1"
-                        Width="1"
+                        Width="0.5"
-                        Margin="0,4"
+                        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"
+                        Width="0.5"
-                        Margin="0,4"
+                        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"
+                        Width="0.5"
-                        Margin="0,4"
+                        Margin="0,8"
                         VerticalAlignment="Stretch"
                         Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                     <ScrollViewer

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">

src/Ursa/Controls/DateTimePicker/TimePicker.cs

@@ -94,13 +94,7 @@ public class TimePicker : TimePickerBase, IClearControl
 
     private void OnTextBoxGetFocus(object? sender, GotFocusEventArgs e)
     {
-        IsDropdownOpen = true;
+        SetCurrentValue(IsDropdownOpenProperty, true);
-    }
-
-    protected override void OnLostFocus(RoutedEventArgs e)
-    {
-        base.OnLostFocus(e);
-        SetCurrentValue(IsDropdownOpenProperty, IsPointerOver);
     }
 
     protected override void OnKeyDown(KeyEventArgs e)

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)