feat: implement timepicker functions.

demo/Ursa.Demo/Pages/TimePickerDemo.axaml

@@ -8,5 +8,7 @@
     <StackPanel HorizontalAlignment="Left">
         <u:TimePickerPresenter Name="presenter" HorizontalAlignment="Left" VerticalAlignment="Top"/>
         <TextBlock Text="{Binding #presenter.Time}"/>
+        
+        <u:TimePicker Width="200" NeedConfirmation="False"></u:TimePicker>
     </StackPanel>
 </UserControl>

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

@@ -1,6 +1,7 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="clr-namespace:Ursa.Converters;assembly=Ursa"
     xmlns:u="https://irihi.tech/ursa">
     <!--  Add Resources Here  -->
     <Design.PreviewWith>
@@ -34,12 +35,12 @@
                             ShouldLoop="True" />
                     </ScrollViewer>
                     <Rectangle
-                        Grid.Column="1"
                         Name="{x:Static u:TimePickerPresenter.PART_FirstSeparator}"
+                        Grid.Column="1"
                         Width="1"
                         Margin="0,4"
-                        Fill="{DynamicResource DateTimePickerSeparatorBackground}"
+                        VerticalAlignment="Stretch"
-                        VerticalAlignment="Stretch" />
+                        Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                     <ScrollViewer
                         Name="{x:Static u:TimePickerPresenter.PART_MinuteScrollPanel}"
                         Grid.Column="2"
@@ -55,12 +56,12 @@
                             ShouldLoop="True" />
                     </ScrollViewer>
                     <Rectangle
-                        Grid.Column="3"
                         Name="{x:Static u:TimePickerPresenter.PART_SecondSeparator}"
+                        Grid.Column="3"
                         Width="1"
                         Margin="0,4"
-                        Fill="{DynamicResource DateTimePickerSeparatorBackground}"
+                        VerticalAlignment="Stretch"
-                        VerticalAlignment="Stretch" />
+                        Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                     <ScrollViewer
                         Name="{x:Static u:TimePickerPresenter.PART_SecondScrollPanel}"
                         Grid.Column="4"
@@ -76,12 +77,12 @@
                             ShouldLoop="True" />
                     </ScrollViewer>
                     <Rectangle
-                        Grid.Column="5"
                         Name="{x:Static u:TimePickerPresenter.PART_ThirdSeparator}"
+                        Grid.Column="5"
                         Width="1"
                         Margin="0,4"
-                        Fill="{DynamicResource DateTimePickerSeparatorBackground}"
+                        VerticalAlignment="Stretch"
-                        VerticalAlignment="Stretch" />
+                        Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                     <ScrollViewer
                         Name="{x:Static u:TimePickerPresenter.PART_AmPmScrollPanel}"
                         Grid.Column="6"
@@ -99,4 +100,69 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type u:TimePicker}" TargetType="u:TimePicker">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:TimePicker">
+                <DataValidationErrors>
+                    <Panel
+                        x:Name="LayoutRoot"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch">
+                        <Border
+                            x:Name="Background"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}" />
+                        <Grid ColumnDefinitions="Auto, *, Auto, Auto, Auto">
+                            <!--  InnerLeftContent, Text and Watermark, ClearButton, InnerRightContent, Icon  -->
+                            <ContentPresenter
+                                Grid.Column="0"
+                                Padding="{TemplateBinding Padding,
+                                                          Converter={x:Static converters:ThicknessIncludeConverter.Right}}"
+                                VerticalAlignment="Stretch"
+                                VerticalContentAlignment="Center"
+                                Content="{TemplateBinding InnerLeftContent}"
+                                DockPanel.Dock="Left"
+                                Foreground="{DynamicResource TextBoxInnerForeground}"
+                                IsVisible="{Binding Path=InnerLeftContent, RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                            <ContentPresenter
+                                Grid.Column="3"
+                                Padding="{TemplateBinding Padding,
+                                                          Converter={x:Static converters:ThicknessIncludeConverter.Left}}"
+                                VerticalAlignment="Stretch"
+                                VerticalContentAlignment="Center"
+                                Content="{TemplateBinding InnerRightContent}"
+                                DockPanel.Dock="Right"
+                                Foreground="{DynamicResource TextBoxInnerForeground}"
+                                IsVisible="{Binding Path=InnerRightContent, RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                            <TextBlock Grid.Column="1" Text="{TemplateBinding Watermark}" />
+                            <TextBox
+                                Name="{x:Static u:TimePicker.PART_TextBox}"
+                                Grid.Column="1"
+                                VerticalAlignment="Stretch"
+                                BorderThickness="0" />
+                            <Popup
+                                Name="{x:Static u:TimePicker.PART_Popup}"
+                                Grid.Column="0"
+                                IsLightDismissEnabled="True"
+                                IsOpen="{TemplateBinding IsDropdownOpen,
+                                                         Mode=TwoWay}"
+                                Placement="BottomEdgeAlignedLeft"
+                                PlacementTarget="Background">
+                                <Border Theme="{DynamicResource CardBorder}">
+                                    <u:TimePickerPresenter
+                                        Name="{x:Static u:TimePicker.PART_Presenter}"
+                                        NeedsConfirmation="{TemplateBinding NeedConfirmation}"
+                                        PanelFormat="{TemplateBinding PanelFormat}"
+                                        Time="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedTime, Mode=OneWayToSource}" />
+                                </Border>
+                            </Popup>
+                        </Grid>
+                    </Panel>
+                </DataValidationErrors>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
 </ResourceDictionary>

src/Ursa/Controls/DateTimePicker/TimePicker.cs

@@ -1,14 +1,32 @@
-using Avalonia;
+using System.Globalization;
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Primitives;
 using Avalonia.Data;
+using Avalonia.Input;
+using Avalonia.Interactivity;
 using Irihi.Avalonia.Shared.Contracts;
+using Irihi.Avalonia.Shared.Helpers;
 
 namespace Ursa.Controls;
 
-public class TimePicker : TemplatedControl, IClearControl
+[TemplatePart( PART_TextBox, typeof(TextBox))]
+[TemplatePart( PART_Popup, typeof(Popup))]
+[TemplatePart( PART_Presenter, typeof(TimePickerPresenter))]
+public class TimePicker : TemplatedControl, IClearControl, IInnerContentControl, IPopupInnerContent
 {
-    public static readonly StyledProperty<string> DisplayFormatProperty = AvaloniaProperty.Register<TimePicker, string>(
+    public const string PART_TextBox = "PART_TextBox";
+    public const string PART_Popup = "PART_Popup";
+    public const string PART_Presenter = "PART_Presenter";
+    
+    private TextBox? _textBox;
+    private Popup? _popup;
+    private TimePickerPresenter? _presenter;
+
+    private bool _updateFromPresenter;
+    
+    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>(
@@ -21,8 +39,40 @@ public class TimePicker : TemplatedControl, IClearControl
     public static readonly StyledProperty<bool> NeedConfirmationProperty = AvaloniaProperty.Register<TimePicker, bool>(
         nameof(NeedConfirmation));
 
-    public static readonly StyledProperty<bool> IsLoopingProperty = AvaloniaProperty.Register<TimePicker, bool>(
+    public static readonly StyledProperty<object?> InnerLeftContentProperty =
-        nameof(IsLooping));
+        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 bool IsDropdownOpen
+    {
+        get => GetValue(IsDropdownOpenProperty);
+        set => SetValue(IsDropdownOpenProperty, value);
+    }
+
+    public string? Watermark
+    {
+        get => GetValue(WatermarkProperty);
+        set => SetValue(WatermarkProperty, value);
+    }
 
     private TimeSpan? _selectedTimeHolder;
 
@@ -30,9 +80,11 @@ public class TimePicker : TemplatedControl, IClearControl
     {
         PanelFormatProperty.Changed.AddClassHandler<TimePicker, string>((picker, args) =>
             picker.OnPanelFormatChanged(args));
+        SelectedTimeProperty.Changed.AddClassHandler<TimePicker, TimeSpan?>((picker, args) =>
+            picker.OnSelectionChanged(args));
     }
 
-    public string DisplayFormat
+    public string? DisplayFormat
     {
         get => GetValue(DisplayFormatProperty);
         set => SetValue(DisplayFormatProperty, value);
@@ -56,17 +108,35 @@ public class TimePicker : TemplatedControl, IClearControl
         set => SetValue(NeedConfirmationProperty, value);
     }
 
-    public bool IsLooping
-    {
-        get => GetValue(IsLoopingProperty);
-        set => SetValue(IsLoopingProperty, value);
-    }
-
     public void Clear()
     {
         SetCurrentValue(SelectedTimeProperty, 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);
+    }
+
     private void OnPanelFormatChanged(AvaloniaPropertyChangedEventArgs<string> args)
     {
         var format = args.NewValue.Value;
@@ -77,14 +147,50 @@ public class TimePicker : TemplatedControl, IClearControl
     protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
         base.OnApplyTemplate(e);
+        
+        _textBox = e.NameScope.Find<TextBox>(PART_TextBox);
+        _popup = e.NameScope.Find<Popup>(PART_Popup);
+        _presenter = e.NameScope.Find<TimePickerPresenter>(PART_Presenter);
+        TextBox.GotFocusEvent.AddHandler(OnTextBoxGetFocus, _textBox);
+        TextBox.TextChangedEvent.AddDisposableHandler(OnTextChanged, _textBox);
+        TextBox.PointerPressedEvent.AddHandler(OnTextBoxPointerPressed, RoutingStrategies.Tunnel, false, _textBox);
     }
 
-    private void OnSelectionChanged()
+    private void OnTextBoxPointerPressed(object sender, PointerPressedEventArgs e)
     {
-        if (NeedConfirmation)
+        SetCurrentValue(IsDropdownOpenProperty, true);
-            _selectedTimeHolder = new TimeSpan();
+    }
+
+    private void OnTextBoxGetFocus(object sender, GotFocusEventArgs e)
+    {
+        IsDropdownOpen = true;
+    }
+
+
+    private void OnTextChanged(object sender, TextChangedEventArgs e)
+    {
+        if (DisplayFormat is null || DisplayFormat.Length == 0)
+        {
+            if (TimeSpan.TryParse(_textBox?.Text, out var defaultTime))
+            {
+                TimePickerPresenter.TimeProperty.SetValue(defaultTime, _presenter);
+            }
+        }
         else
-            SelectedTime = new TimeSpan();
+        {
+            if(DateTime.TryParseExact(_textBox?.Text, DisplayFormat, CultureInfo.CurrentUICulture, DateTimeStyles.None, out var time))
+            {
+                TimePickerPresenter.TimeProperty.SetValue(time.TimeOfDay, _presenter);
+            }
+        }
+    }
+
+    private void OnSelectionChanged(AvaloniaPropertyChangedEventArgs<TimeSpan?> args)
+    {
+        if (_textBox is null) return;
+        var time = args.NewValue.Value;
+        var text = new DateTime(1,1,1, time?.Hours ?? 0, time?.Minutes ?? 0, time?.Seconds ?? 0).ToString(DisplayFormat);
+        _textBox.Text = text;
     }
 
     public void Confirm()

src/Ursa/Controls/DateTimePicker/TimePickerPresenter.cs

@@ -70,6 +70,15 @@ public class TimePickerPresenter: TemplatedControl
         set => SetValue(MinuteIncrementProperty, value);
     }
 
+    public static readonly StyledProperty<int> SecondIncrementProperty = AvaloniaProperty.Register<TimePickerPresenter, int>(
+        nameof(SecondIncrement));
+
+    public int SecondIncrement
+    {
+        get => GetValue(SecondIncrementProperty);
+        set => SetValue(SecondIncrementProperty, value);
+    }
+
     public static readonly StyledProperty<TimeSpan?> TimeProperty = AvaloniaProperty.Register<TimePickerPresenter, TimeSpan?>(
         nameof(Time));
 
@@ -88,6 +97,8 @@ public class TimePickerPresenter: TemplatedControl
         set => SetValue(PanelFormatProperty, value);
     }
 
+    public event EventHandler<TimePickerSelectedValueChangedEventArgs>? SelectedTimeChanged; 
+
     static TimePickerPresenter()
     {
         PanelFormatProperty.Changed.AddClassHandler<TimePickerPresenter, string>((presenter, args) => presenter.OnPanelFormatChanged(args));
@@ -99,6 +110,8 @@ public class TimePickerPresenter: TemplatedControl
         _updateFromTimeChange = true;
         UpdatePanelsFromSelectedTime();
         _updateFromTimeChange = false;
+        SelectedTimeChanged?.Invoke(this,
+            new TimePickerSelectedValueChangedEventArgs(args.OldValue.Value, args.NewValue.Value));
     }
 
     private void OnPanelFormatChanged(AvaloniaPropertyChangedEventArgs<string> args)
@@ -110,7 +123,7 @@ public class TimePickerPresenter: TemplatedControl
 
     private void UpdatePanelLayout(string panelFormat)
     {
-        var parts = panelFormat.Split(' ', '-', ':');
+        var parts = panelFormat.Split(new[] { ' ', '-', ':' }, StringSplitOptions.RemoveEmptyEntries);
         var panels = new List<Control?>();
         foreach (var part in parts)
         {
@@ -305,4 +318,12 @@ public class TimePickerPresenter: TemplatedControl
             _ampmSelector.MinimumValue = 0;
         }
     }
+
+    public void Confirm()
+    {
+        if (NeedsConfirmation)
+        {
+            SetCurrentValue(TimeProperty, _timeHolder);
+        }
+    }
 }