feat: add transition based number displayer.

demo/Ursa.Demo/Models/MenuKeys.cs

@@ -20,6 +20,7 @@ public static class MenuKeys
     public const string MenuKeyMessageBox = "MessageBox";
     public const string MenuKeyNavigation = "Navigation";
     public const string MenuKeyNavMenu = "NavMenu";
+    public const string MenuKeyNumberDisplayer = "NumberDisplayer";
     public const string MenuKeyNumericUpDown = "NumericUpDown";
     public const string MenuKeyPagination = "Pagination";
     public const string MenuKeyRangeSlider = "RangeSlider";

demo/Ursa.Demo/Pages/NumberDisplayerDemo.axaml

@@ -0,0 +1,16 @@
+<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:vm="using:Ursa.Demo.ViewModels"
+             x:DataType="vm:NumberDisplayerDemoViewModel"
+             x:CompileBindings="True"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Ursa.Demo.Pages.NumberDisplayerDemo">
+    <StackPanel HorizontalAlignment="Left">
+        <Button Command="{Binding IncreaseCommand}" >Change</Button>
+        <u:Int32Displayer Value="{Binding Value}"></u:Int32Displayer>
+        <u:DoubleDisplayer Value="{Binding DoubleValue}" StringFormat="N2"></u:DoubleDisplayer>
+    </StackPanel>
+</UserControl>

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

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

demo/Ursa.Demo/ViewModels/MainViewViewModel.cs

@@ -42,6 +42,7 @@ public class MainViewViewModel : ViewModelBase
             MenuKeys.MenuKeyMessageBox => new MessageBoxDemoViewModel(),
             MenuKeys.MenuKeyNavigation => new NavigationMenuDemoViewModel(),
             MenuKeys.MenuKeyNavMenu => new NavMenuDemoViewModel(),
+            MenuKeys.MenuKeyNumberDisplayer => new NumberDisplayerDemoViewModel(),
             MenuKeys.MenuKeyNumericUpDown => new NumericUpDownDemoViewModel(),
             MenuKeys.MenuKeyPagination => new PaginationDemoViewModel(),
             MenuKeys.MenuKeyRangeSlider => new RangeSliderDemoViewModel(),

demo/Ursa.Demo/ViewModels/MenuViewModel.cs

@@ -29,7 +29,8 @@ public class MenuViewModel: ViewModelBase
             new() { MenuHeader = "Message Box", Key = MenuKeys.MenuKeyMessageBox, Status = "New" },
             new() { MenuHeader = "Navigation", Key = MenuKeys.MenuKeyNavigation, Status = "WIP" },
             new() { MenuHeader = "Nav Menu", Key = MenuKeys.MenuKeyNavMenu, Status = "WIP"},
-            new() { MenuHeader = "NumericUpDown", Key = MenuKeys.MenuKeyNumericUpDown, Status = "New" },
+            new() { MenuHeader = "Number Displayer", Key = MenuKeys.MenuKeyNumberDisplayer, Status = "New" }, 
+            new() { MenuHeader = "Numeric UpDown", Key = MenuKeys.MenuKeyNumericUpDown, Status = "New" },
             new() { MenuHeader = "Pagination", Key = MenuKeys.MenuKeyPagination },
             new() { MenuHeader = "RangeSlider", Key = MenuKeys.MenuKeyRangeSlider, Status = "New"},
             new() { MenuHeader = "Selection List", Key = MenuKeys.MenuKeySelectionList, Status = "New" },

demo/Ursa.Demo/ViewModels/NumberDisplayerDemoViewModel.cs

@@ -0,0 +1,26 @@
+using System;
+using System.Windows.Input;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+
+namespace Ursa.Demo.ViewModels;
+
+public partial class NumberDisplayerDemoViewModel: ObservableObject
+{
+    [ObservableProperty] private int _value;
+    [ObservableProperty] private double _doubleValue;
+    public ICommand IncreaseCommand { get; }
+    public NumberDisplayerDemoViewModel()
+    {
+        IncreaseCommand = new RelayCommand(OnChange);
+        Value = 0;
+        DoubleValue = 0d;
+    }
+
+    private void OnChange()
+    {
+        Random r = new Random();
+        Value = r.Next(int.MaxValue);
+        DoubleValue = r.NextDouble() * 100000;
+    }
+}

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

@@ -0,0 +1,15 @@
+<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  -->
+    <ControlTheme x:Key="{x:Type u:NumberDisplayerBase}" TargetType="u:NumberDisplayerBase">
+        <Setter Property="Duration" Value="0:0:0.2" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:NumberDisplayerBase">
+                <TextBlock Text="{TemplateBinding InternalText, Mode=OneWay}" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

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

@@ -20,6 +20,7 @@
         <ResourceInclude Source="Navigation.axaml" />
         <ResourceInclude Source="NavMenu.axaml" />
         <ResourceInclude Source="NumericUpDown.axaml" />
+        <ResourceInclude Source="NumberDisplayer.axaml" />
         <ResourceInclude Source="Pagination.axaml" />
         <ResourceInclude Source="RangeSlider.axaml" />
         <ResourceInclude Source="SelectionList.axaml" />

src/Ursa/Controls/NumberDisplayer/NumberDisplayer.cs

@@ -0,0 +1,119 @@
+using Avalonia;
+using Avalonia.Animation;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Data;
+
+namespace Ursa.Controls;
+
+public abstract class NumberDisplayerBase : TemplatedControl
+{
+    public static readonly DirectProperty<NumberDisplayerBase, string> InternalTextProperty = AvaloniaProperty.RegisterDirect<NumberDisplayerBase, string>(
+        nameof(InternalText), o => o.InternalText, (o, v) => o.InternalText = v);
+    private string _internalText;
+    public string InternalText
+    {
+        get => _internalText;
+        set => SetAndRaise(InternalTextProperty, ref _internalText, value);
+    }
+
+    public static readonly StyledProperty<TimeSpan> DurationProperty = AvaloniaProperty.Register<NumberDisplayerBase, TimeSpan>(
+        nameof(Duration));
+
+    public TimeSpan Duration
+    {
+        get => GetValue(DurationProperty);
+        set => SetValue(DurationProperty, value);
+    }
+
+    public static readonly StyledProperty<string> StringFormatProperty = AvaloniaProperty.Register<NumberDisplayerBase, string>(
+        nameof(StringFormat));
+
+    public string StringFormat
+    {
+        get => GetValue(StringFormatProperty);
+        set => SetValue(StringFormatProperty, value);
+    }
+}
+
+public abstract class NumberDisplayer<T>: NumberDisplayerBase
+{
+    public static readonly StyledProperty<T?> ValueProperty = AvaloniaProperty.Register<NumberDisplayer<T>, T?>(
+        nameof(Value), defaultBindingMode:BindingMode.TwoWay);
+
+    public T? Value
+    {
+        get => GetValue(ValueProperty);
+        set => SetValue(ValueProperty, value);
+    }
+    
+    public static readonly StyledProperty<T?> InternalValueProperty = AvaloniaProperty.Register<NumberDisplayer<T>, T?>(
+        nameof(InternalValue));
+
+    public T? InternalValue
+    {
+        get => GetValue(InternalValueProperty);
+        set => SetValue(InternalValueProperty, value);
+    }
+
+    static NumberDisplayer()
+    {
+        ValueProperty.Changed.AddClassHandler<NumberDisplayer<T>, T?>((item, args) =>
+        {
+            item.InternalValue = args.NewValue.Value;
+        });
+        InternalValueProperty.Changed.AddClassHandler<NumberDisplayer<T>, T?>((item, args) =>
+        {
+            item.InternalText = args.NewValue.Value is null ? string.Empty : item.GetString(args.NewValue.Value);
+        });
+        DurationProperty.Changed.AddClassHandler<NumberDisplayer<T>, TimeSpan>((item, args) =>item.OnDurationChanged(args));
+    }
+    
+    private void OnDurationChanged(AvaloniaPropertyChangedEventArgs<TimeSpan> args)
+    {
+        this.Transitions ??= new Transitions();
+        this.Transitions?.Clear();
+        this.Transitions?.Add(GetTransition(args.NewValue.Value));
+    }
+
+    protected abstract ITransition GetTransition(TimeSpan duration);
+    protected abstract string GetString(T? value);
+}
+
+public class Int32Displayer : NumberDisplayer<int>
+{
+    protected override Type StyleKeyOverride { get; } = typeof(NumberDisplayerBase);
+
+    protected override ITransition GetTransition(TimeSpan duration)
+    {
+        return new IntegerTransition()
+        {
+            Property = InternalValueProperty,
+            Duration = duration
+        };
+    }
+
+    protected override string GetString(int value)
+    {
+        return value.ToString(StringFormat);
+    }
+}
+
+public class DoubleDisplayer : NumberDisplayer<double>
+{
+    protected override Type StyleKeyOverride { get; } = typeof(NumberDisplayerBase);
+
+    protected override ITransition GetTransition(TimeSpan duration)
+    {
+        return new DoubleTransition()
+        {
+            Property = InternalValueProperty,
+            Duration = duration
+        };
+    }
+
+    protected override string GetString(double value)
+    {
+        return value.ToString(StringFormat);
+    }
+}