feat: implement template and related feature.

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>

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

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();
     }
 

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);
+    }
+}

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();
+    }
 }