Merge pull request #580 from irihitech/commitinput

Update Date and Time pickers for better text input experience.

demo/Ursa.Demo/Pages/DatePickerDemo.axaml

@@ -1,24 +1,28 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:u="https://irihi.tech/ursa"
-             xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
-             x:DataType="viewModels:DatePickerDemoViewModel"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="Ursa.Demo.Pages.DatePickerDemo">
+<UserControl
+    x:Class="Ursa.Demo.Pages.DatePickerDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:u="https://irihi.tech/ursa"
+    xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:DataType="viewModels:DatePickerDemoViewModel"
+    mc:Ignorable="d">
     <StackPanel Margin="20" HorizontalAlignment="Left">
-        <u:Form>
-            <u:DatePicker Width="200" u:FormItem.Label="_Test"/>
-            <TextBox Width="200" u:FormItem.Label="_West"/>
-        </u:Form>
-        <u:CalendarView DateSelected="CalendarView_OnOnDateSelected" DatePreviewed="CalendarView_OnOnDatePreviewed"/>
-        <TextBlock Text="{Binding #singlePicker.SelectedDate}" ></TextBlock>
-        <u:DatePicker Name="singlePicker" Width="200" Classes="ClearButton" />
-        <u:DateRangePicker Width="300" DisplayFormat="yyyyMMdd" Classes="ClearButton" />
-
-        <TextBlock Text="Binding"></TextBlock>
-        <u:DatePicker Width="200" SelectedDate="{Binding SelectedDate, Mode=TwoWay}"/>
-        <u:DateRangePicker Width="300" SelectedStartDate="{Binding StartDate}" SelectedEndDate="{Binding EndDate}"/>
+        <TextBox Name="format" InnerLeftContent="Display Format" Text="yyyy-MM-dd" />
+        <TextBlock Text="Default" />
+        <u:DatePicker Width="200" DisplayFormat="{Binding #format.Text}" />
+        <TextBlock Text="Binding" />
+        <u:DatePicker
+            Width="200"
+            DisplayFormat="{Binding #format.Text}"
+            SelectedDate="{Binding SelectedDate, Mode=TwoWay}" />
+        <TextBlock Text="Clear Button" />
+        <u:DatePicker
+            Name="singlePicker"
+            Width="200"
+            Classes="ClearButton" />
     </StackPanel>
-</UserControl>
+</UserControl>

demo/Ursa.Demo/Pages/DatePickerDemo.axaml.cs

@@ -10,14 +10,4 @@ public DatePickerDemo()
     {
         InitializeComponent();
     }
-
-    private void CalendarView_OnOnDateSelected(object? _, CalendarDayButtonEventArgs e)
-    {
-        Debug.WriteLine("Pressed: "+ e.Date?.ToLongDateString());
-    }
-
-    private void CalendarView_OnOnDatePreviewed(object? _, CalendarDayButtonEventArgs e)
-    {
-        Debug.WriteLine("Hovered: "+e.Date?.ToLongDateString());
-    }
 }

demo/Ursa.Demo/Pages/DateRangePickerDemo.axaml

@@ -0,0 +1,37 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.DateRangePickerDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:u="https://irihi.tech/ursa"
+    xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:DataType="viewModels:DateRangePickerDemoViewModel"
+    mc:Ignorable="d">
+    <StackPanel HorizontalAlignment="Left">
+        <TextBox
+            Name="format"
+            Text="yyyy-MM-dd"
+            Watermark="Display Format" />
+        <TextBlock Text="Default" />
+        <u:DateRangePicker
+            Width="360"
+            DisplayFormat="{Binding #format.Text}"
+            SelectedEndDate="{Binding EndDate}"
+            SelectedStartDate="{Binding StartDate}" />
+
+        <TextBlock Text="Clear Button" />
+        <u:DateRangePicker
+            Width="360"
+            Classes="ClearButton"
+            DisplayFormat="{Binding #format.Text}" />
+        <TextBlock Text="Initialized with Binding" />
+        <u:DateRangePicker
+            Width="360"
+            DisplayFormat="{Binding #format.Text}"
+            SelectedEndDate="{Binding EndDate}"
+            SelectedStartDate="{Binding StartDate}" />
+    </StackPanel>
+</UserControl>

demo/Ursa.Demo/Pages/DateRangePickerDemo.axaml.cs

@@ -0,0 +1,13 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Ursa.Demo.Pages;
+
+public partial class DateRangePickerDemo : UserControl
+{
+    public DateRangePickerDemo()
+    {
+        InitializeComponent();
+    }
+}

demo/Ursa.Demo/Pages/TimePickerDemo.axaml

@@ -43,10 +43,6 @@
             InnerRightContent="截止"
             NeedConfirmation="True"
             PanelFormat="{Binding #panelFormat.Text}" />
-        <u:TimeRangePicker
-            Width="300"
-            DisplayFormat="{Binding #displayFormat.Text}"
-            PanelFormat="{Binding #panelFormat.Text}" />
 
         <TextBlock Text="Binding"/>
         <u:TimePicker
@@ -55,11 +51,5 @@
             SelectedTime="{Binding Time}"
             DisplayFormat="{Binding #displayFormat.Text}"
             PanelFormat="{Binding #panelFormat.Text}" />
-        <u:TimeRangePicker
-            Width="300"
-            StartTime="{Binding StartTime}"
-            EndTime="{Binding EndTime}"
-            DisplayFormat="{Binding #displayFormat.Text}"
-            PanelFormat="{Binding #panelFormat.Text}" />
     </StackPanel>
 </UserControl>

demo/Ursa.Demo/Pages/TimeRangePickerDemo.axaml

@@ -0,0 +1,44 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
+             xmlns:u="https://irihi.tech/ursa"
+             mc:Ignorable="d" d:DesignWidth="800"
+             d:DesignHeight="450"
+             x:DataType="viewModels:TimeRangePickerDemoViewModel"
+             x:Class="Ursa.Demo.Pages.TimeRangePickerDemo">
+    <StackPanel HorizontalAlignment="Left">
+        <TextBox
+            Name="displayFormat"
+            Width="300"
+            InnerLeftContent="Display Format"
+            Text="HH:mm:ss" />
+        <TextBox
+            Name="panelFormat"
+            Width="300"
+            InnerLeftContent="Panel Format"
+            Text="tt HH mm ss" />
+
+        <TextBlock Text="Default"/>
+        <u:TimeRangePicker
+            Width="300"
+            DisplayFormat="{Binding #displayFormat.Text}"
+            PanelFormat="{Binding #panelFormat.Text}" />
+
+        <TextBlock Text="Initialized by Binding"/>
+        <u:TimeRangePicker
+            Width="300"
+            StartTime="{Binding StartTime}"
+            EndTime="{Binding EndTime}"
+            DisplayFormat="{Binding #displayFormat.Text}"
+            PanelFormat="{Binding #panelFormat.Text}" />
+
+        <TextBlock Text="Clear Button"/>
+        <u:TimeRangePicker
+            Width="300"
+            Classes="ClearButton"
+            DisplayFormat="{Binding #displayFormat.Text}"
+            PanelFormat="{Binding #panelFormat.Text}" />
+    </StackPanel>
+</UserControl>

demo/Ursa.Demo/Pages/TimeRangePickerDemo.axaml.cs

@@ -0,0 +1,13 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Ursa.Demo.Pages;
+
+public partial class TimeRangePickerDemo : UserControl
+{
+    public TimeRangePickerDemo()
+    {
+        InitializeComponent();
+    }
+}

demo/Ursa.Demo/ViewModels/DatePickerDemoViewModel.cs

@@ -7,22 +7,9 @@ namespace Ursa.Demo.ViewModels;
 public partial class DatePickerDemoViewModel: ObservableObject
 {
     [ObservableProperty] private DateTime? _selectedDate;
-    [ObservableProperty] private DateTime? _startDate;
-    [ObservableProperty] private DateTime? _endDate;
 
     public DatePickerDemoViewModel()
     {
         SelectedDate = DateTime.Today;
-        StartDate = DateTime.Today;
-        EndDate = DateTime.Today.AddDays(7);
-    }
-
-    protected override void OnPropertyChanged(PropertyChangedEventArgs e)
-    {
-        base.OnPropertyChanged(e);
-        if (e.PropertyName == nameof(SelectedDate))
-        {
-
-        }
     }
 }

demo/Ursa.Demo/ViewModels/DateRangePickerDemoViewModel.cs

@@ -0,0 +1,16 @@
+using System;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Ursa.Demo.ViewModels;
+
+public partial class DateRangePickerDemoViewModel: ObservableObject
+{
+    [ObservableProperty] private DateTime? _startDate;
+    [ObservableProperty] private DateTime? _endDate;
+
+    public DateRangePickerDemoViewModel()
+    {
+        StartDate = DateTime.Today;
+        EndDate = DateTime.Today.AddDays(7);
+    }
+}

demo/Ursa.Demo/ViewModels/MainViewViewModel.cs

@@ -41,6 +41,7 @@ private void OnNavigation(MainViewViewModel vm, string s)
             MenuKeys.MenuKeyClassInput => new ClassInputDemoViewModel(),
             MenuKeys.MenuKeyClock => new ClockDemoViewModel(),
             MenuKeys.MenuKeyDatePicker => new DatePickerDemoViewModel(),
+            MenuKeys.MenuKeyDateRangePicker => new DateRangePickerDemoViewModel(),
             MenuKeys.MenuKeyDateTimePicker => new DateTimePickerDemoViewModel(),
             MenuKeys.MenuKeyDialog => new DialogDemoViewModel(),
             MenuKeys.MenuKeyDisableContainer => new DisableContainerDemoViewModel(),
@@ -75,6 +76,7 @@ private void OnNavigation(MainViewViewModel vm, string s)
             MenuKeys.MenuKeyTimeBox => new TimeBoxDemoViewModel(),
             MenuKeys.MenuKeyTimeline => new TimelineDemoViewModel(),
             MenuKeys.MenuKeyTimePicker => new TimePickerDemoViewModel(),
+            MenuKeys.MenuKeyTimeRangePicker => new TimeRangePickerDemoViewModel(),
             MenuKeys.MenuKeyToast => new ToastDemoViewModel(),
             MenuKeys.MenuKeyToolBar => new ToolBarDemoViewModel(),
             MenuKeys.MenuKeyTreeComboBox => new TreeComboBoxDemoViewModel(),

demo/Ursa.Demo/ViewModels/MenuViewModel.cs

@@ -52,10 +52,12 @@ public MenuViewModel()
             {
                 MenuHeader = "Date & Time", Children = new ObservableCollection<MenuItemViewModel>
                 {
-                    new() { MenuHeader = "Date Picker", Key = MenuKeys.MenuKeyDatePicker },
-                    new() { MenuHeader = "Date Time Picker", Key = MenuKeys.MenuKeyDateTimePicker },
+                    new() { MenuHeader = "Date Picker", Key = MenuKeys.MenuKeyDatePicker, Status = "Updated" },
+                    new() { MenuHeader = "Date Range Picker", Key = MenuKeys.MenuKeyDateRangePicker, Status = "Updated" },
+                    new() { MenuHeader = "Date Time Picker", Key = MenuKeys.MenuKeyDateTimePicker, Status = "Updated" },
                     new() { MenuHeader = "Time Box", Key = MenuKeys.MenuKeyTimeBox },
-                    new() { MenuHeader = "TimePicker", Key = MenuKeys.MenuKeyTimePicker },
+                    new() { MenuHeader = "Time Picker", Key = MenuKeys.MenuKeyTimePicker, Status = "Updated" },
+                    new() { MenuHeader = "Time Range Picker", Key = MenuKeys.MenuKeyTimeRangePicker, Status = "Updated" },
                     new() { MenuHeader = "Clock", Key = MenuKeys.MenuKeyClock }
                 }
             },
@@ -108,6 +110,7 @@ public static class MenuKeys
     public const string MenuKeyClassInput = "Class Input";
     public const string MenuKeyClock = "Clock";
     public const string MenuKeyDatePicker = "DatePicker";
+    public const string MenuKeyDateRangePicker = "DateRangePicker";
     public const string MenuKeyDateTimePicker = "DateTimePicker";
     public const string MenuKeyDialog = "Dialog";
     public const string MenuKeyDisableContainer = "DisableContainer";
@@ -142,6 +145,7 @@ public static class MenuKeys
     public const string MenuKeyTimeBox = "TimeBox";
     public const string MenuKeyTimeline = "Timeline";
     public const string MenuKeyTimePicker = "TimePicker";
+    public const string MenuKeyTimeRangePicker = "TimeRangePicker";
     public const string MenuKeyToast = "Toast";
     public const string MenuKeyToolBar = "ToolBar";
     public const string MenuKeyTreeComboBox = "TreeComboBox";

demo/Ursa.Demo/ViewModels/TimePickerDemoViewModel.cs

@@ -6,13 +6,9 @@ namespace Ursa.Demo.ViewModels;
 public partial class TimePickerDemoViewModel: ObservableObject
 {
     [ObservableProperty] private TimeSpan? _time;
-    [ObservableProperty] private TimeSpan? _startTime;
-    [ObservableProperty] private TimeSpan? _endTime;
-
+
     public TimePickerDemoViewModel()
     {
         Time = new TimeSpan(12, 20, 0);
-        StartTime = new TimeSpan(8, 21, 0);
-        EndTime = new TimeSpan(18, 22, 0);
     }
 }

demo/Ursa.Demo/ViewModels/TimeRangePickerDemoViewModel.cs

@@ -0,0 +1,16 @@
+using System;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Ursa.Demo.ViewModels;
+
+public partial class TimeRangePickerDemoViewModel: ObservableObject
+{
+    [ObservableProperty] private TimeSpan? _startTime;
+    [ObservableProperty] private TimeSpan? _endTime;
+
+    public TimeRangePickerDemoViewModel()
+    {
+        StartTime = new TimeSpan(8, 21, 0);
+        EndTime = new TimeSpan(18, 22, 0);
+    }
+}

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

@@ -26,7 +26,7 @@
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}"
                             CornerRadius="{TemplateBinding CornerRadius}" />
-                        <Grid ColumnDefinitions="*, Auto, * Auto">
+                        <Grid ColumnDefinitions="*, Auto, * Auto" Name="PART_PassThroughElement">
                             <TextBox
                                 Name="{x:Static u:DateRangePicker.PART_StartTextBox}"
                                 Grid.Column="0"
@@ -75,6 +75,7 @@
                         </Grid>
                         <Popup
                             Name="{x:Static contracts:PartNames.PART_Popup}"
+                            OverlayInputPassThroughElement="{Binding #PART_PassThroughElement}"
                             HorizontalOffset="-4"
                             IsLightDismissEnabled="True"
                             IsOpen="{TemplateBinding IsDropdownOpen,

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

@@ -70,6 +70,7 @@
                                 Margin="8,0"
                                 Content="{DynamicResource TimePickerIconGlyph}"
                                 Focusable="False"
+                                IsVisible="{Binding !#ClearButton.IsVisible}"
                                 Theme="{DynamicResource InnerIconButton}" />
                         </Grid>
                         <Popup
@@ -164,11 +165,8 @@
         </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 Selector="^:not(:empty):pointerover /template/ Button#ClearButton">
+                <Setter Property="IsVisible" Value="True" />
             </Style>
         </Style>