Merge pull request #228 from irihitech/timerange

TimeRangePicker

demo/Ursa.Demo/Pages/TimePickerDemo.axaml

@@ -26,5 +26,6 @@
             NeedConfirmation="True"
             InnerLeftContent="时刻"
             InnerRightContent="截止" />
+        <u:TimeRangePicker Width="300"></u:TimeRangePicker>
     </StackPanel>
 </UserControl>

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>

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
@@ -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"
@@ -177,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,

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

@@ -0,0 +1,197 @@
+<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"
+                                MinHeight="{TemplateBinding MinHeight}"
+                                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"
+                                VerticalAlignment="Center"
+                                Text="~" />
+                            <TextBox
+                                Name="{x:Static u:TimeRangePicker.PART_EndTextBox}"
+                                Grid.Column="2"
+                                MinHeight="{TemplateBinding MinHeight}"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Background="Transparent"
+                                CornerRadius="0"
+                                Foreground="{TemplateBinding Foreground}"
+                                InnerRightContent="{TemplateBinding InnerRightContent}"
+                                IsReadOnly="{TemplateBinding IsReadonly}"
+                                Watermark="{TemplateBinding EndWatermark}" />
+                            <Button
+                                Name="ClearButton"
+                                Grid.Column="3"
+                                Padding="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="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}}" />
+                                    <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}" />
+                                    </Grid>
+                                </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

@@ -31,8 +31,10 @@
         <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="TimeRangePicker.axaml" />
         <ResourceInclude Source="Timeline.axaml" />
         <ResourceInclude Source="TreeComboBox.axaml"/>
         <ResourceInclude Source="Skeleton.axaml" />

src/Ursa/Controls/DateTimePicker/TimePicker.cs

@@ -6,62 +6,29 @@ 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 class TimePicker : TimePickerBase, IClearControl
 {
     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";
 
-    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));
+            nameof(SelectedTime), defaultBindingMode: BindingMode.TwoWay);
 
     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);
@@ -157,7 +69,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);
 
@@ -182,7 +94,7 @@ public class TimePicker : TemplatedControl, IClearControl, IInnerContentControl,
 
     private void OnTextBoxGetFocus(object? sender, GotFocusEventArgs e)
     {
-        IsDropdownOpen = true;
+        SetCurrentValue(IsDropdownOpenProperty, true);
     }
 
     protected override void OnKeyDown(KeyEventArgs e)
@@ -193,6 +105,7 @@ public class TimePicker : TemplatedControl, IClearControl, IInnerContentControl,
             e.Handled = true;
             return;
         }
+
         if (e.Key == Key.Down)
         {
             SetCurrentValue(IsDropdownOpenProperty, true);
@@ -205,6 +118,7 @@ public class TimePicker : TemplatedControl, IClearControl, IInnerContentControl,
             SetCurrentValue(IsDropdownOpenProperty, false);
             return;
         }
+
         base.OnKeyDown(e);
     }
 
@@ -246,7 +160,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

@@ -0,0 +1,184 @@
+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.Common;
+using Irihi.Avalonia.Shared.Contracts;
+using Irihi.Avalonia.Shared.Helpers;
+
+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 : TimePickerBase, IClearControl
+{
+    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), defaultBindingMode: BindingMode.TwoWay);
+
+    public static readonly StyledProperty<TimeSpan?> EndTimeProperty =
+        AvaloniaProperty.Register<TimeRangePicker, TimeSpan?>(
+            nameof(EndTime), defaultBindingMode: BindingMode.TwoWay);
+
+    public static readonly StyledProperty<string?> StartWatermarkProperty =
+        AvaloniaProperty.Register<TimeRangePicker, string?>(
+            nameof(StartWatermark));
+
+    public static readonly StyledProperty<string?> EndWatermarkProperty =
+        AvaloniaProperty.Register<TimeRangePicker, string?>(
+            nameof(EndWatermark));
+
+    private Button? _button;
+    private TimePickerPresenter? _endPresenter;
+    private TextBox? _endTextBox;
+    private Popup? _popup;
+    private TimePickerPresenter? _startPresenter;
+
+    private TextBox? _startTextBox;
+
+
+    static TimeRangePicker()
+    {
+        StartTimeProperty.Changed.AddClassHandler<TimeRangePicker, TimeSpan?>((picker, args) =>
+            picker.OnSelectionChanged(args));
+        EndTimeProperty.Changed.AddClassHandler<TimeRangePicker, TimeSpan?>((picker, args) =>
+            picker.OnSelectionChanged(args, false));
+    }
+
+    public string? EndWatermark
+    {
+        get => GetValue(EndWatermarkProperty);
+        set => SetValue(EndWatermarkProperty, value);
+    }
+
+    public string? StartWatermark
+    {
+        get => GetValue(StartWatermarkProperty);
+        set => SetValue(StartWatermarkProperty, value);
+    }
+
+    public TimeSpan? StartTime
+    {
+        get => GetValue(StartTimeProperty);
+        set => SetValue(StartTimeProperty, value);
+    }
+
+    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);
+    }
+
+    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);
+        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)
+    {
+        SetCurrentValue(IsDropdownOpenProperty, true);
+    }
+
+    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();
+    }
+    
+    public void Dismiss()
+    {
+        SetCurrentValue(IsDropdownOpenProperty, false);
+        Focus();
+    }
+}