Add TimeBox Control

demo/Ursa.Demo/Pages/TimeBoxDemo.axaml

@@ -0,0 +1,58 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.TimeBoxDemo"
+    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:vm="clr-namespace:Ursa.Demo.ViewModels;assembly=Ursa.Demo"
+    x:DataType="vm:TimeBoxDemoViewModel"
+    x:CompileBindings="True"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel HorizontalAlignment="Left">
+        <ToggleButton
+            Name="format"
+            Margin="0,0,0,10"
+            Content="Show Leading Zeroes" />
+        <ToggleButton
+            Name="allowDrag"
+            Margin="0,0,0,10"
+            Content="Allow Drag" />
+        <ToggleButton
+            Name="isTimeLoop"
+            Margin="0,0,0,50"
+            Content="Is Time Loop" />
+        <TextBlock Classes="" Text="Normal" />
+        <u:TimeBox
+            Name="box"
+            Width="200"
+            ShowLeadingZero="{Binding #format.IsChecked}"
+            AllowDrag="{Binding #allowDrag.IsChecked}"
+            IsTimeLoop="{Binding #isTimeLoop.IsChecked}"/>
+
+        <TextBlock Text="Time: " />
+        <TextBlock Text="{Binding #box.Time}" />
+        <TextBlock Classes="" Text="Fast input" />
+        <u:TimeBox
+            Width="200"
+            InputMode="Fast"
+            ShowLeadingZero="{Binding #format.IsChecked}"
+            AllowDrag="{Binding #allowDrag.IsChecked}"
+            IsTimeLoop="{Binding #isTimeLoop.IsChecked}"/>
+
+        <TextBlock Classes="" Text="Binding From Source" />
+        <RepeatButton Command="{Binding ChangeRandomTimeCommand}" Content="Random" />
+        <u:TimeBox
+            Width="200"
+            Time="{Binding TimeSpan}"
+            ShowLeadingZero="{Binding #format.IsChecked}"
+            AllowDrag="{Binding #allowDrag.IsChecked}"
+            IsTimeLoop="{Binding #isTimeLoop.IsChecked}"/>
+        <TextBlock Classes="" Text="Disabled" />
+        <u:TimeBox Width="200" IsEnabled="False" Time="{Binding TimeSpan}"
+                   AllowDrag="{Binding #allowDrag.IsChecked}"
+                   IsTimeLoop="{Binding #isTimeLoop.IsChecked}"/>
+    </StackPanel>
+</UserControl>

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

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

demo/Ursa.Demo/ViewModels/MainViewViewModel.cs

@@ -58,6 +58,7 @@ public class MainViewViewModel : ViewModelBase
             MenuKeys.MenuKeyTwoTonePathIcon => new TwoTonePathIconDemoViewModel(),
             MenuKeys.MenuKeyThemeToggler => new ThemeTogglerDemoViewModel(),
             MenuKeys.MenuKeyToolBar => new ToolBarDemoViewModel(),
+            MenuKeys.MenuKeyTimeBox => new TimeBoxDemoViewModel(),
             MenuKeys.MenuKeyVerificationCode => new VerificationCodeDemoViewModel(),
         };
     }

demo/Ursa.Demo/ViewModels/MenuViewModel.cs

@@ -45,6 +45,7 @@ public class MenuViewModel: ViewModelBase
             new() { MenuHeader = "Timeline", Key = MenuKeys.MenuKeyTimeline },
             new() { MenuHeader = "TwoTonePathIcon", Key = MenuKeys.MenuKeyTwoTonePathIcon},
             new() { MenuHeader = "ToolBar", Key = MenuKeys.MenuKeyToolBar },
+            new() { MenuHeader = "Time Box", Key = MenuKeys.MenuKeyTimeBox, Status = "New" },
             new() { MenuHeader = "Verification Code", Key = MenuKeys.MenuKeyVerificationCode, Status = "New" },
         };
     }
@@ -87,5 +88,6 @@ public static class MenuKeys
     public const string MenuKeyThemeToggler = "ThemeToggler";
     public const string MenuKeyToolBar = "ToolBar";
     public const string MenuKeyVerificationCode = "VerificationCode";
+    public const string MenuKeyTimeBox = "TimeBox";
 
 }

demo/Ursa.Demo/ViewModels/TimeBoxDemoViewModel.cs

@@ -0,0 +1,22 @@
+using System;
+using System.Net;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+
+namespace Ursa.Demo.ViewModels;
+
+public partial class TimeBoxDemoViewModel : ObservableObject
+{
+    [ObservableProperty] private TimeSpan? _timeSpan;
+
+    [RelayCommand]
+    private void ChangeRandomTime()
+    {
+        TimeSpan = new TimeSpan(Random.Shared.NextInt64(0x00000000FFFFFFFF));
+    }
+    
+    public TimeBoxDemoViewModel()
+    {
+        TimeSpan = new TimeSpan(0, 21, 11, 36, 54);
+    }
+}