Merge branch 'main' into main

demo/Ursa.Demo/ViewModels/ButtonGroupDemoViewModel.cs

@@ -1,11 +1,35 @@
 using System.Collections.ObjectModel;
+using System.Threading.Tasks;
+using System.Windows.Input;
+using CommunityToolkit.Mvvm.Input;
+using Ursa.Controls;
 
 namespace Ursa.Demo.ViewModels;
 
 public class ButtonGroupDemoViewModel: ViewModelBase
 {
-    public ObservableCollection<string> Items { get; set; } = new ()
+    public ObservableCollection<ButtonItem> Items { get; set; } = new ()
     {
-        "Ding", "Otter", "Husky", "Mr. 17", "Cass"
+        new ButtonItem(){Name = "Ding" },
+        new ButtonItem(){Name = "Otter" },
+        new ButtonItem(){Name = "Husky" },
+        new ButtonItem(){Name = "Mr. 17" },
+        new ButtonItem(){Name = "Cass" },
     };
+}
+
+public class ButtonItem
+{
+    public string? Name { get; set; }
+    public ICommand InvokeCommand { get; set; }
+
+    public ButtonItem()
+    {
+        InvokeCommand = new AsyncRelayCommand(Invoke);
+    }
+
+    private async Task Invoke()
+    {
+        await MessageBox.ShowAsync("Hello " + Name);
+    }
 }

demo/Ursa.Demo/ViewModels/ClassInputDemoViewModel.cs

@@ -0,0 +1,8 @@
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Ursa.Demo.ViewModels;
+
+public class ClassInputDemoViewModel: ObservableObject
+{
+    
+}

demo/Ursa.Demo/ViewModels/DialogDemoViewModel.cs

@@ -0,0 +1,186 @@
+using System;
+using System.Collections.ObjectModel;
+using System.Threading.Tasks;
+using System.Windows.Input;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Ursa.Common;
+using Ursa.Controls;
+using Ursa.Demo.Dialogs;
+using Ursa.Demo.Pages;
+
+namespace Ursa.Demo.ViewModels;
+
+public class DialogDemoViewModel: ObservableObject
+{
+    public ICommand ShowDialogCommand { get; set; }
+    public ICommand ShowCustomDialogCommand { get; set; }
+
+    private DialogMode _selectedMode;
+    public DialogMode SelectedMode
+    {
+        get => _selectedMode;
+        set => SetProperty(ref _selectedMode, value);
+    }
+    
+    public ObservableCollection<DialogMode> Modes { get; set; }
+    
+    private DialogButton _selectedButton;
+    public DialogButton SelectedButton
+    {
+        get => _selectedButton;
+        set => SetProperty(ref _selectedButton, value);
+    }
+    
+    public ObservableCollection<DialogButton> Buttons { get; set; }
+
+    private bool _isWindow;
+    public bool IsWindow
+    {
+        get => _isWindow;
+        set => SetProperty(ref _isWindow, value);
+    }
+    
+    private bool _isGlobal;
+    public bool IsGlobal
+    {
+        get => _isGlobal;
+        set => SetProperty(ref _isGlobal, value);
+    }
+
+    private bool _isModal;
+    public bool IsModal
+    {
+        get => _isModal;
+        set => SetProperty(ref _isModal, value);
+    }
+    
+    private bool _canLightDismiss;
+    public bool CanLightDismiss
+    {
+        get => _canLightDismiss;
+        set => SetProperty(ref _canLightDismiss, value);
+    }
+
+    private DialogResult? _defaultResult;
+    public DialogResult? DefaultResult
+    {
+        get => _defaultResult;
+        set => SetProperty(ref _defaultResult, value);
+    }
+
+    private bool _result;
+    public bool Result
+    {
+        get => _result;
+        set => SetProperty(ref _result, value);
+    }
+
+    private DateTime? _date;
+    public DateTime? Date
+    {
+        get => _date;
+        set => SetProperty(ref _date, value);
+    }
+    
+    
+    public DialogDemoViewModel()
+    {
+        ShowDialogCommand = new AsyncRelayCommand(ShowDialog);
+        ShowCustomDialogCommand = new AsyncRelayCommand(ShowCustomDialog);
+        Modes = new ObservableCollection<DialogMode>(Enum.GetValues<DialogMode>());
+        Buttons = new ObservableCollection<DialogButton>(Enum.GetValues<DialogButton>());
+    }
+    
+    private async Task ShowDialog()
+    {
+        var vm = new PlainDialogViewModel();
+        if (IsWindow)
+        {
+            DefaultResult = await Dialog.ShowModal<PlainDialog, PlainDialogViewModel>(
+                vm, options: new DialogOptions()
+                {
+                    Title = "Please select a date",
+                    Mode = SelectedMode,
+                    Button = SelectedButton
+                });
+            Date = vm.Date;
+        }
+        else
+        {
+            if (IsModal)
+            {
+                DefaultResult = await OverlayDialog.ShowModal<PlainDialog, PlainDialogViewModel>(
+                    vm,
+                    IsGlobal ? null : "LocalHost",
+                    new OverlayDialogOptions()
+                    {
+                        Title = "Please select a date",
+                        Mode = SelectedMode,
+                        Buttons = SelectedButton,
+                        CanLightDismiss = CanLightDismiss,
+                        HorizontalAnchor = HorizontalPosition.Right,
+                        HorizontalOffset = 50,
+                        VerticalAnchor = VerticalPosition.Top,
+                        VerticalOffset = 50,
+                    }
+                );
+                Date = vm.Date;
+            }
+            else
+            {
+                OverlayDialog.Show<PlainDialog, PlainDialogViewModel>(
+                    new PlainDialogViewModel(),
+                    IsGlobal ? null : "LocalHost",
+                    new OverlayDialogOptions()
+                    {
+                        Title = "Please select a date",
+                        Mode = SelectedMode,
+                        Buttons = SelectedButton,
+                        CanLightDismiss = CanLightDismiss,
+                    });
+            }
+        }
+        
+    }
+    
+    private async Task ShowCustomDialog()
+    {
+        var vm = new DialogWithActionViewModel();
+        if (IsWindow)
+        {
+
+            if (IsModal)
+            {
+                Result = await Dialog.ShowCustomModal<DialogWithAction, DialogWithActionViewModel, bool>(
+                    vm);
+                Date = vm.Date;
+            }
+            else
+            {
+                Dialog.ShowCustom<DialogWithAction, DialogWithActionViewModel>(
+                    vm);
+            }
+            
+        }
+        else
+        {
+            if (IsModal)
+            {
+                Result = await OverlayDialog.ShowCustomModal<DialogWithAction, DialogWithActionViewModel, bool>(
+                    vm, IsGlobal ? null : "LocalHost", options: new OverlayDialogOptions()
+                    {
+                        CanLightDismiss = CanLightDismiss,
+                    });
+                Date = vm.Date;
+            }
+            else
+            {
+                OverlayDialog.ShowCustom<DialogWithAction, DialogWithActionViewModel>(new DialogWithActionViewModel(),
+                    IsGlobal ? null : "LocalHost",
+                    options: new OverlayDialogOptions{ CanLightDismiss = CanLightDismiss });
+            }
+        }
+        
+    }
+}

demo/Ursa.Demo/ViewModels/DisableContainerDemoViewModel.cs

@@ -0,0 +1,8 @@
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Ursa.Demo.ViewModels;
+
+public class DisableContainerDemoViewModel: ObservableObject
+{
+    
+}

demo/Ursa.Demo/ViewModels/DrawerDemoViewModel.cs

@@ -0,0 +1,95 @@
+using System;
+using System.Collections.ObjectModel;
+using System.Threading.Tasks;
+using System.Windows.Input;
+using Avalonia.Controls;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Ursa.Common;
+using Ursa.Controls;
+using Ursa.Controls.Options;
+using Ursa.Demo.Dialogs;
+
+namespace Ursa.Demo.ViewModels;
+
+public partial class DrawerDemoViewModel: ObservableObject
+{
+    public ICommand ShowDialogCommand { get; set; }
+    public ICommand ShowCustomDialogCommand { get; set; }
+
+    [ObservableProperty] private Position _selectedPosition;
+    [ObservableProperty] private DialogButton _selectedButton;
+    [ObservableProperty] private bool _isGlobal;
+    [ObservableProperty] private bool _canLightDismiss;
+    [ObservableProperty] private DialogResult? _defaultResult;
+    [ObservableProperty] private bool _result;
+    [ObservableProperty] private bool _isModal;
+    [ObservableProperty] private DateTime? _date;
+    
+    
+    public DrawerDemoViewModel()
+    {
+        ShowDialogCommand = new AsyncRelayCommand(ShowDefaultDialog);
+        ShowCustomDialogCommand = new AsyncRelayCommand(ShowCustomDrawer);
+    }
+    
+    private async Task ShowDefaultDialog()
+    {
+        var vm = new PlainDialogViewModel();
+        if (IsModal)
+        {
+            DefaultResult = await Drawer.ShowModal<PlainDialog, PlainDialogViewModel>(
+                vm,
+                IsGlobal ? null : "LocalHost",
+                new DrawerOptions()
+                {
+                    Title = "Please select a date",
+                    Position = SelectedPosition,
+                    Buttons = SelectedButton,
+                    CanLightDismiss = CanLightDismiss,
+                });
+            Date = vm.Date;
+        }
+        else
+        {
+            Drawer.Show<PlainDialog, PlainDialogViewModel>(
+                vm,
+                IsGlobal ? null : "LocalHost",
+                new DrawerOptions()
+                {
+                    Title = "Please select a date",
+                    Position = SelectedPosition,
+                    Buttons = SelectedButton,
+                    CanLightDismiss = CanLightDismiss,
+                });
+        }
+    }
+    
+    private async Task ShowCustomDrawer()
+    {
+        var vm = new DialogWithActionViewModel();
+        if (IsModal)
+        {
+            Result = await Drawer.ShowCustomModal<DialogWithAction, DialogWithActionViewModel, bool>(
+                vm,
+                IsGlobal ? null : "LocalHost",
+                new DrawerOptions()
+                {
+                    Position = SelectedPosition,
+                    CanLightDismiss = CanLightDismiss,
+                });
+            Date = vm.Date;
+        }
+        else
+        {
+            Drawer.ShowCustom<DialogWithAction, DialogWithActionViewModel>(
+                vm,
+                IsGlobal ? null : "LocalHost",
+                new DrawerOptions()
+                {
+                    Position = SelectedPosition,
+                    CanLightDismiss = CanLightDismiss,
+                });
+        }
+    }
+}

demo/Ursa.Demo/ViewModels/EnumSelectorDemoViewModel.cs

@@ -0,0 +1,67 @@
+using System;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using System.Windows.Input;
+using Avalonia.Animation;
+using Avalonia.Controls;
+using Avalonia.Data;
+using Avalonia.Input;
+using Avalonia.Interactivity;
+using Avalonia.Layout;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+
+namespace Ursa.Demo.ViewModels;
+
+public class EnumSelectorDemoViewModel: ObservableObject
+{
+    public ObservableCollection<Type?> Types { get; set; }
+    
+    private Type? _selectedType;
+    public Type? SelectedType
+    {
+        get => _selectedType;
+        set
+        {
+            SetProperty(ref _selectedType, value);
+            Value = null;
+        }
+    }
+
+    private object? _value;
+    public object? Value
+    {
+        get => _value;
+        set => SetProperty(ref _value, value);
+    }
+    
+    public EnumSelectorDemoViewModel()
+    {
+        Types = new ObservableCollection<Type?>()
+        {
+            typeof(HorizontalAlignment),
+            typeof(VerticalAlignment),
+            typeof(Orientation),
+            typeof(Dock),
+            typeof(GridResizeDirection),
+            typeof(DayOfWeek),
+            typeof(FillMode),
+            typeof(IterationType),
+            typeof(BindingMode),
+            typeof(BindingPriority),
+            typeof(StandardCursorType),
+            typeof(Key),
+            typeof(KeyModifiers),
+            typeof(RoutingStrategies),
+            typeof(CustomEnum),
+        };
+    }
+}
+
+public enum CustomEnum
+{
+    [Description("是")]
+    Yes,
+    [Description("否")]
+    No,
+}

demo/Ursa.Demo/ViewModels/FormDemoViewModel.cs

@@ -0,0 +1,48 @@
+using System;
+using System.ComponentModel.DataAnnotations;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Ursa.Demo.ViewModels;
+
+public partial class FormDemoViewModel: ObservableObject
+{
+    [ObservableProperty] private DataModel _model;
+
+    public FormDemoViewModel()
+    {
+        Model = new DataModel();
+    }
+}
+
+public partial class DataModel : ObservableObject
+{
+    private string _name;
+
+    [MinLength(10)]
+    public string Name
+    {
+        get=>_name;
+        set => SetProperty(ref _name, value);
+    }
+    
+    private string _email;
+    
+    [EmailAddress]
+    public string Email
+    {
+        get=>_email;
+        set => SetProperty(ref _email, value);
+    }
+
+    private DateTime _date;
+    public DateTime Date
+    {
+        get => _date;
+        set => SetProperty(ref _date, value);
+    }
+
+    public DataModel()
+    {
+        Date = DateTime.Today;
+    }
+}

demo/Ursa.Demo/ViewModels/IconButtonDemoViewModel.cs

@@ -0,0 +1,8 @@
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Ursa.Demo.ViewModels;
+
+public class IconButtonDemoViewModel: ObservableObject
+{
+    
+}

demo/Ursa.Demo/ViewModels/ImageViewerDemoViewModel.cs

@@ -0,0 +1,8 @@
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Ursa.Demo.ViewModels;
+
+public class ImageViewerDemoViewModel: ObservableObject
+{
+    
+}

demo/Ursa.Demo/ViewModels/IntroductionDemoViewModel.cs

@@ -1,9 +1,11 @@
+using System;
 using System.Collections.ObjectModel;
+using System.Net;
 using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Ursa.Demo.ViewModels;
 
-public class NavigationMenuDemoViewModel: ObservableObject
+public partial class IntroductionDemoViewModel : ObservableObject
 {
     public ObservableCollection<MenuItemViewModel> MenuItems { get; set; } = new()
     {
@@ -13,15 +15,17 @@ public class NavigationMenuDemoViewModel: ObservableObject
             MenuIconName = "User",
             Children = new ObservableCollection<MenuItemViewModel>()
             {
-                new (){
-                    MenuHeader = "公告管理" , 
+                new()
+                {
+                    MenuHeader = "公告管理",
                     MenuIconName = "Star",
                     Children = new ObservableCollection<MenuItemViewModel>()
                     {
-                        new () {MenuHeader = "公告设置"},
-                        new () {MenuHeader = "公告处理"}
-                    }},
-                new (){MenuHeader = "任务查询"}
+                        new() { MenuHeader = "公告设置" },
+                        new() { MenuHeader = "公告处理" }
+                    }
+                },
+                new() { MenuHeader = "任务查询" }
             }
         },
         new MenuItemViewModel()
@@ -35,10 +39,22 @@ public class NavigationMenuDemoViewModel: ObservableObject
             MenuIconName = "Gear",
             Children = new ObservableCollection<MenuItemViewModel>()
             {
-                new (){MenuHeader = "任务管理"},
-                new (){MenuHeader = "用户任务查询"}
+                new() { MenuHeader = "任务管理" },
+                new() { MenuHeader = "用户任务查询" }
             }
         }
     };
-}
 
+    public ObservableCollection<string> ButtonGroupItems { get; set; } = new()
+    {
+        "Avalonia", "WPF", "Xamarin"
+    };
+
+    [ObservableProperty] private IPAddress? _address;
+
+    public void ChangeAddress()
+    {
+        long l = Random.Shared.NextInt64(0x00000000FFFFFFFF);
+        Address = new IPAddress(l);
+    }
+}

demo/Ursa.Demo/ViewModels/MainViewViewModel.cs

@@ -24,19 +24,37 @@ public class MainViewViewModel : ViewModelBase
     {
         Content = s switch
         {
+            MenuKeys.MenuKeyIntroduction => new IntroductionDemoViewModel(),
             MenuKeys.MenuKeyBadge => new BadgeDemoViewModel(),
             MenuKeys.MenuKeyBanner => new BannerDemoViewModel(),
             MenuKeys.MenuKeyButtonGroup => new ButtonGroupDemoViewModel(),
+            MenuKeys.MenuKeyClassInput => new ClassInputDemoViewModel(),
+            MenuKeys.MenuKeyDialog => new DialogDemoViewModel(),
             MenuKeys.MenuKeyDivider => new DividerDemoViewModel(),
+            MenuKeys.MenuKeyDisableContainer => new DisableContainerDemoViewModel(),
+            MenuKeys.MenuKeyDrawer => new DrawerDemoViewModel(),
             MenuKeys.MenuKeyDualBadge => new DualBadgeDemoViewModel(),
+            MenuKeys.MenuKeyEnumSelector => new EnumSelectorDemoViewModel(),
+            MenuKeys.MenuKeyForm => new FormDemoViewModel(),
+            MenuKeys.MenuKeyImageViewer => new ImageViewerDemoViewModel(),
+            MenuKeys.MenuKeyIconButton => new IconButtonDemoViewModel(),
             MenuKeys.MenuKeyIpBox => new IPv4BoxDemoViewModel(),
             MenuKeys.MenuKeyKeyGestureInput => new KeyGestureInputDemoViewModel(),
             MenuKeys.MenuKeyLoading => new LoadingDemoViewModel(),
-            MenuKeys.MenuKeyNavigation => new NavigationMenuDemoViewModel(),
+            MenuKeys.MenuKeyMessageBox => new MessageBoxDemoViewModel(),
+            MenuKeys.MenuKeyNavMenu => new NavMenuDemoViewModel(),
+            MenuKeys.MenuKeyNumberDisplayer => new NumberDisplayerDemoViewModel(),
+            MenuKeys.MenuKeyNumericUpDown => new NumericUpDownDemoViewModel(),
             MenuKeys.MenuKeyPagination => new PaginationDemoViewModel(),
+            MenuKeys.MenuKeyRangeSlider => new RangeSliderDemoViewModel(),
+            MenuKeys.MenuKeySelectionList => new SelectionListDemoViewModel(),
+            MenuKeys.MenuKeySkeleton => new SkeletonDemoViewModel(),
             MenuKeys.MenuKeyTagInput => new TagInputDemoViewModel(),
             MenuKeys.MenuKeyTimeline => new TimelineDemoViewModel(),
             MenuKeys.MenuKeySkeleton => new SkeletonDemoViewModel(),
+            MenuKeys.MenuKeyTwoTonePathIcon => new TwoTonePathIconDemoViewModel(),
+            MenuKeys.MenuKeyThemeToggler => new ThemeTogglerDemoViewModel(),
+            MenuKeys.MenuKeyToolBar => new ToolBarDemoViewModel(),
         };
     }
 }

demo/Ursa.Demo/ViewModels/MenuItemViewModel.cs

@@ -5,11 +5,19 @@ using CommunityToolkit.Mvvm.Messaging;
 
 namespace Ursa.Demo.ViewModels;
 
+public enum ControlStatus
+{
+    New,
+    Beta,
+    Stable,
+}
+
 public class MenuItemViewModel: ViewModelBase
 {
     public string MenuHeader { get; set; }
     public string MenuIconName { get; set; }
     public string Key { get; set; }
+    public string Status { get; set; }
     
     public bool IsSeparator { get; set; }
     public ObservableCollection<MenuItemViewModel> Children { get; set; } = new();

demo/Ursa.Demo/ViewModels/MenuViewModel.cs

@@ -10,20 +10,37 @@ public class MenuViewModel: ViewModelBase
     {
         MenuItems = new ObservableCollection<MenuItemViewModel>()
         {
+            new() { MenuHeader = "Introduction", Key = MenuKeys.MenuKeyIntroduction, IsSeparator = false },
             new() { MenuHeader = "Controls", IsSeparator = true },
             new() { MenuHeader = "Badge", Key = MenuKeys.MenuKeyBadge },
             new() { MenuHeader = "Banner", Key = MenuKeys.MenuKeyBanner },
-            new() { MenuHeader = "ButtonGroup", Key = MenuKeys.MenuKeyButtonGroup },
+            new() { MenuHeader = "Button Group", Key = MenuKeys.MenuKeyButtonGroup},
+            new() { MenuHeader = "Class Input", Key = MenuKeys.MenuKeyClassInput, Status = "New" },
+            new() { MenuHeader = "Dialog", Key = MenuKeys.MenuKeyDialog, Status = "Updated"},
+            new() { MenuHeader = "Disable Container", Key = MenuKeys.MenuKeyDisableContainer, Status = "New"},
             new() { MenuHeader = "Divider", Key = MenuKeys.MenuKeyDivider },
+            new() { MenuHeader = "Drawer", Key = MenuKeys.MenuKeyDrawer, Status = "New"},
             new() { MenuHeader = "DualBadge", Key = MenuKeys.MenuKeyDualBadge },
-            new() { MenuHeader = "IPv4Box", Key = MenuKeys.MenuKeyIpBox },
+            new() { MenuHeader = "Enum Selector", Key = MenuKeys.MenuKeyEnumSelector },
+            new() { MenuHeader = "Form", Key = MenuKeys.MenuKeyForm, Status = "New" },
+            new() { MenuHeader = "Icon Button", Key = MenuKeys.MenuKeyIconButton },
+            new() { MenuHeader = "ImageViewer", Key = MenuKeys.MenuKeyImageViewer, Status = "WIP" },
+            new() { MenuHeader = "IPv4Box", Key = MenuKeys.MenuKeyIpBox, Status = "Updated" },
             new() { MenuHeader = "KeyGestureInput", Key = MenuKeys.MenuKeyKeyGestureInput },
-            new() { MenuHeader = "Loading", Key = MenuKeys.MenuKeyLoading },
-            new() { MenuHeader = "Navigation", Key = MenuKeys.MenuKeyNavigation },
+            new() { MenuHeader = "Loading", Key = MenuKeys.MenuKeyLoading, Status = "Updated" },
+            new() { MenuHeader = "Message Box", Key = MenuKeys.MenuKeyMessageBox },
+            new() { MenuHeader = "Nav Menu", Key = MenuKeys.MenuKeyNavMenu, Status = "New"},
+            // new() { MenuHeader = "Number Displayer", Key = MenuKeys.MenuKeyNumberDisplayer, Status = "New" }, 
+            new() { MenuHeader = "Numeric UpDown", Key = MenuKeys.MenuKeyNumericUpDown },
             new() { MenuHeader = "Pagination", Key = MenuKeys.MenuKeyPagination },
-            new() { MenuHeader = "TagInput", Key = MenuKeys.MenuKeyTagInput },
-            new() { MenuHeader = "Timeline", Key = MenuKeys.MenuKeyTimeline },
+            new() { MenuHeader = "RangeSlider", Key = MenuKeys.MenuKeyRangeSlider },
+            new() { MenuHeader = "Selection List", Key = MenuKeys.MenuKeySelectionList, Status = "New" },
             new() { MenuHeader = "Skeleton", Key = MenuKeys.MenuKeySkeleton },
+            new() { MenuHeader = "TagInput", Key = MenuKeys.MenuKeyTagInput },
+            new() { MenuHeader = "Theme Toggler", Key = MenuKeys.MenuKeyThemeToggler, Status = "New" },
+            new() { MenuHeader = "Timeline", Key = MenuKeys.MenuKeyTimeline, Status = "WIP" },
+            new() { MenuHeader = "TwoTonePathIcon", Key = MenuKeys.MenuKeyTwoTonePathIcon},
+            new() { MenuHeader = "ToolBar", Key = MenuKeys.MenuKeyToolBar, Status = "New" }
         };
     }
 }

demo/Ursa.Demo/ViewModels/MessageBoxDemoViewModel.cs

@@ -0,0 +1,132 @@
+using System;
+using System.Collections.ObjectModel;
+using System.Threading.Tasks;
+using System.Windows.Input;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Ursa.Controls;
+
+namespace Ursa.Demo.ViewModels;
+
+public class MessageBoxDemoViewModel: ObservableObject
+{
+    private readonly string _longMessage = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
+
+    private readonly string _shortMessage = "Welcome to Ursa Avalonia!";
+    private string _message;
+    private string _title;
+
+    public ICommand DefaultMessageBoxCommand { get; set; }
+    public ICommand OkCommand { get; set; }
+    public ICommand YesNoCommand { get; set; }
+    public ICommand YesNoCancelCommand { get; set; }
+    public ICommand OkCancelCommand { get; set; }
+    
+    public ObservableCollection<MessageBoxIcon> Icons { get; set; }
+    
+    private MessageBoxIcon _selectedIcon;
+    public MessageBoxIcon SelectedIcon
+    {
+        get => _selectedIcon;
+        set => SetProperty(ref _selectedIcon, value);
+    }
+
+    private MessageBoxResult _result;
+    public MessageBoxResult Result
+    {
+        get => _result;
+        set => SetProperty(ref _result, value);
+    }
+
+    private bool _useLong;
+
+    public bool UseLong
+    {
+        get => _useLong;
+        set
+        {
+            SetProperty(ref _useLong, value);
+            _message = value ? _longMessage : _shortMessage;
+        }
+    }
+
+    private bool _useTitle;
+
+    public bool UseTitle
+    {
+        get => _useTitle;
+        set
+        {
+            SetProperty(ref _useTitle, value);
+            _title = value ? "Ursa MessageBox" : string.Empty;
+        }
+    }
+
+    private bool _useOverlay;
+
+    public bool UseOverlay
+    {
+        get => _useOverlay;
+        set => SetProperty(ref _useOverlay, value);
+    }
+    
+    
+
+    public MessageBoxDemoViewModel()
+    {
+        DefaultMessageBoxCommand = new AsyncRelayCommand(OnDefaultMessageAsync);
+        OkCommand = new AsyncRelayCommand(OnOkAsync);
+        YesNoCommand = new AsyncRelayCommand(OnYesNoAsync);
+        YesNoCancelCommand = new AsyncRelayCommand(OnYesNoCancelAsync);
+        OkCancelCommand = new AsyncRelayCommand(OnOkCancelAsync);
+        Icons = new ObservableCollection<MessageBoxIcon>(
+            Enum.GetValues<MessageBoxIcon>());
+        SelectedIcon = MessageBoxIcon.None;
+        _message = _shortMessage;
+    }
+
+    private async Task OnDefaultMessageAsync()
+    {
+        if (UseOverlay)
+        {
+            Result = await MessageBox.ShowOverlayAsync(_message, _title, icon: SelectedIcon);
+        }
+        else
+        {
+            Result = await MessageBox.ShowAsync(_message, _title, icon: SelectedIcon);
+        }
+        
+    }
+    
+    private async Task OnOkAsync()
+    {
+        await Show(MessageBoxButton.OK);
+    }
+    
+    private async Task OnYesNoAsync()
+    {
+        await Show(MessageBoxButton.YesNo);
+    }
+    
+    private async Task OnYesNoCancelAsync()
+    {
+        await Show(MessageBoxButton.YesNoCancel);
+    }
+
+    private async Task OnOkCancelAsync()
+    {
+        await Show(MessageBoxButton.OKCancel);
+    }
+
+    private async Task Show(MessageBoxButton button)
+    {
+        if (UseOverlay)
+        {
+            Result = await MessageBox.ShowOverlayAsync(_message, _title, icon: SelectedIcon, button:button);
+        }
+        else
+        {
+            Result = await MessageBox.ShowAsync(_message, _title, icon: SelectedIcon, button:button);
+        }
+    }
+}

demo/Ursa.Demo/ViewModels/NavMenuDemoViewModel.cs

@@ -0,0 +1,130 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Threading.Tasks;
+using System.Windows.Input;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Ursa.Controls;
+namespace Ursa.Demo.ViewModels;
+
+public class NavMenuDemoViewModel: ObservableObject
+{
+    private MenuItem? _selectedMenuItem;
+
+    public MenuItem? SelectedMenuItem
+    {
+        get=>_selectedMenuItem;
+        set => SetProperty(ref _selectedMenuItem, value);
+    }
+    public ObservableCollection<MenuItem> MenuItems { get; set; } = new ObservableCollection<MenuItem>
+    {
+        new MenuItem { Header = "Introduction" , Children =
+        {
+            new MenuItem() { Header = "Getting Started", Children =
+            {
+                new MenuItem() { Header = "Code of Conduct" },
+                new MenuItem() { Header = "How to Contribute" },
+                new MenuItem() { Header = "Development Workflow" },
+            }},
+            new MenuItem() { Header = "Design Principles"},
+            new MenuItem() { Header = "Contributing", Children =
+            {
+                new MenuItem() { Header = "Code of Conduct" },
+                new MenuItem() { Header = "How to Contribute" },
+                new MenuItem() { Header = "Development Workflow" },
+            }},
+        }},
+        new MenuItem { Header = "Controls", IsSeparator = true},
+        new MenuItem { Header = "Badge" },
+        new MenuItem { Header = "Banner" },
+        new MenuItem { Header = "ButtonGroup" },
+        new MenuItem { Header = "Class Input" },
+        new MenuItem { Header = "Dialog" },
+        new MenuItem { Header = "Divider" },
+        new MenuItem { Header = "Drawer" },
+        new MenuItem { Header = "DualBadge" },
+        new MenuItem { Header = "EnumSelector" },
+        new MenuItem { Header = "ImageViewer" },
+        new MenuItem { Header = "IPv4Box" },
+        new MenuItem { Header = "IconButton" },
+        new MenuItem { Header = "KeyGestureInput" },
+        new MenuItem { Header = "Loading" },
+        new MenuItem { Header = "MessageBox" },
+        new MenuItem { Header = "Navigation" },
+        new MenuItem { Header = "NavMenu" },
+        new MenuItem { Header = "NumericUpDown" },
+        new MenuItem { Header = "Pagination" },
+        new MenuItem { Header = "RangeSlider" },
+        new MenuItem { Header = "SelectionList" },
+        new MenuItem { Header = "TagInput" },
+        new MenuItem { Header = "Timeline" },
+        new MenuItem { Header = "TwoTonePathIcon" },
+        new MenuItem { Header = "ThemeToggler" }
+    };
+
+    public ICommand RandomCommand { get; set; }
+    public NavMenuDemoViewModel()
+    {
+        RandomCommand = new RelayCommand(OnRandom);
+    }
+
+    private void OnRandom()
+    {
+        var items = GetLeaves();
+        var index = new Random().Next(items.Count);
+        SelectedMenuItem = items[index];
+    }
+    
+    private List<MenuItem> GetLeaves()
+    {
+        List<MenuItem> items = new();
+        foreach (var item in MenuItems)
+        {
+            items.AddRange(item.GetLeaves());
+        }
+
+        return items;
+    }
+}
+
+public class MenuItem
+{
+    static Random r = new Random();
+    
+    public string? Header { get; set; }
+    public int IconIndex { get; set; }
+    public bool IsSeparator { get; set; }
+    public ICommand NavigationCommand { get; set; }
+
+    public MenuItem()
+    {
+        NavigationCommand = new AsyncRelayCommand(OnNavigate);
+        IconIndex = r.Next(100);
+    }
+
+    private async Task OnNavigate()
+    {
+        await MessageBox.ShowOverlayAsync(Header??string.Empty, "Navigation Result");
+    }
+
+    public ObservableCollection<MenuItem> Children { get; set; } = new ObservableCollection<MenuItem>();
+
+    public IEnumerable<MenuItem> GetLeaves()
+    {
+        if (this.Children.Count == 0)
+        {
+            yield return this;
+            yield break;
+        }
+
+        foreach (var child in Children)
+        {
+            var items = child.GetLeaves();
+            foreach (var item in items)
+            {
+                yield return item;
+            }
+        }
+    }
+}

demo/Ursa.Demo/ViewModels/NumberDisplayerDemoViewModel.cs

@@ -0,0 +1,29 @@
+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;
+    [ObservableProperty] private DateTime _dateValue;
+    public ICommand IncreaseCommand { get; }
+    public NumberDisplayerDemoViewModel()
+    {
+        IncreaseCommand = new RelayCommand(OnChange);
+        Value = 0;
+        DoubleValue = 0d;
+        DateValue = DateTime.Now;
+    }
+
+    private void OnChange()
+    {
+        Random r = new Random();
+        Value = r.Next(int.MaxValue);
+        DoubleValue = r.NextDouble() * 100000;
+        DateValue = DateTime.Today.AddDays(r.Next(1000));
+    }
+}

demo/Ursa.Demo/ViewModels/NumericUpDownDemoViewModel.cs

@@ -0,0 +1,8 @@
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Ursa.Demo.ViewModels;
+
+public class NumericUpDownDemoViewModel: ObservableObject
+{
+    
+}

demo/Ursa.Demo/ViewModels/RangeSliderDemoViewModel.cs

@@ -0,0 +1,16 @@
+using System.Collections.ObjectModel;
+using Avalonia.Layout;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Ursa.Demo.ViewModels;
+
+public partial class RangeSliderDemoViewModel: ObservableObject
+{
+    public ObservableCollection<Orientation> Orientations { get; set; } = new ObservableCollection<Orientation>()
+    {
+        Orientation.Horizontal,
+        Orientation.Vertical
+    };
+
+    [ObservableProperty] private Orientation _orientation;
+}

demo/Ursa.Demo/ViewModels/SelectionListDemoViewModel.cs

@@ -0,0 +1,23 @@
+using System.Collections.ObjectModel;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Ursa.Demo.ViewModels;
+
+public partial class SelectionListDemoViewModel: ObservableObject
+{
+    public ObservableCollection<string> Items { get; set; }
+    [ObservableProperty] private string? _selectedItem;
+
+    public SelectionListDemoViewModel()
+    {
+        Items = new ObservableCollection<string>()
+        {
+            "Ding", "Otter", "Husky", "Mr. 17", "Cass"
+        };
+    }
+
+    public void Clear()
+    {
+        SelectedItem = null;
+    }
+}

demo/Ursa.Demo/ViewModels/TagInputDemoViewModel.cs

@@ -4,10 +4,17 @@ namespace Ursa.Demo.ViewModels;
 
 public class TagInputDemoViewModel: ViewModelBase
 {
-    private ObservableCollection<string> _Tags ;
+    private ObservableCollection<string> _tags = new () ;
     public ObservableCollection<string> Tags
     {
-        get { return _Tags; }
-        set { SetProperty(ref _Tags, value); }
+        get => _tags;
+        set => SetProperty(ref _tags, value);
+    }
+
+    private ObservableCollection<string> _distinctTags = new();
+    public ObservableCollection<string> DistinctTags
+    {
+        get => _distinctTags;
+        set => SetProperty(ref _distinctTags, value);
     }
 }

demo/Ursa.Demo/ViewModels/ThemeTogglerDemoViewModel.cs

@@ -0,0 +1,6 @@
+namespace Ursa.Demo.ViewModels;
+
+public class ThemeTogglerDemoViewModel
+{
+    
+}

demo/Ursa.Demo/ViewModels/TimelineDemoViewModel.cs

@@ -11,41 +11,24 @@ public class TimelineDemoViewModel: ViewModelBase
         new()
         {
             Time = DateTime.Now,
-            TimeFormat = "yyyy-MM-dd HH:mm:ss",
             Description = "Item 1",
-            Content = "First",
+            Header = "审核中",
             ItemType = TimelineItemType.Success,
         },
         new()
         {
             Time = DateTime.Now,
-            TimeFormat = "HH:mm:ss",
             Description = "Item 2",
-            Content = "Content 2",
-            ItemType = TimelineItemType.Success,
-        },
-        new()
-        {
-            Time = DateTime.Now,
-            TimeFormat = "HH:mm:ss",
-            Description = "Item 3",
-            Content = "Content 3",
+            Header = "发布成功",
             ItemType = TimelineItemType.Ongoing,
         },
         new()
         {
             Time = DateTime.Now,
-            TimeFormat = "HH:mm:ss",
-            Description = "Item 4",
-            Content = "Content 4"
-        },
-        new()
-        {
-            Time = DateTime.Now,
-            TimeFormat = "HH:mm:ss",
-            Description = "Item 5",
-            Content = "Content 5"
-        },
+            Description = "Item 3",
+            Header = "审核失败",
+            ItemType = TimelineItemType.Error,
+        }
     };
 }
 
@@ -54,6 +37,6 @@ public class TimelineItemViewModel: ObservableObject
     public DateTime Time { get; set; }
     public string? TimeFormat { get; set; }
     public string? Description { get; set; }    
-    public string? Content { get; set; }
+    public string? Header { get; set; }
     public TimelineItemType ItemType { get; set; }
 }

demo/Ursa.Demo/ViewModels/ToolBarDemoViewModel.cs

@@ -0,0 +1,83 @@
+using System.Collections.ObjectModel;
+using System.Windows.Input;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Ursa.Controls;
+
+namespace Ursa.Demo.ViewModels;
+
+public partial class ToolBarDemoViewModel: ObservableObject
+{
+    public ObservableCollection<ToolBarItemViewModel> Items { get; set; }
+    public ToolBarDemoViewModel()
+    {
+        Items = new()
+        {
+            new ToolBarButtonItemViewModel() { Content = "New", OverflowMode = OverflowMode.AsNeeded},
+            new ToolBarButtonItemViewModel() { Content = "Open" },
+            new ToolBarButtonItemViewModel() { Content = "Save1" },
+            new ToolBarButtonItemViewModel() { Content = "Save2" },
+            new ToolBarSeparatorViewModel(),
+            new ToolBarButtonItemViewModel() { Content = "Save3" },
+            new ToolBarButtonItemViewModel() { Content = "Save4" },
+            new ToolBarButtonItemViewModel() { Content = "Save5" },
+            new ToolBarButtonItemViewModel() { Content = "Save6" },
+            new ToolBarButtonItemViewModel() { Content = "Save7" },
+            new ToolBarSeparatorViewModel(),
+            new ToolBarButtonItemViewModel() { Content = "Save8" },
+            new ToolBarCheckBoxItemViweModel() { Content = "Bold" },
+            new ToolBarCheckBoxItemViweModel() { Content = "Italic", OverflowMode = OverflowMode.Never},
+            new ToolBarComboBoxItemViewModel() { Content = "Font Size", Items = new (){ "10", "12", "14"  } }
+        };
+    }
+}
+
+public abstract class ToolBarItemViewModel: ObservableObject
+{
+    public OverflowMode OverflowMode { get; set; }
+}
+
+public class ToolBarButtonItemViewModel: ToolBarItemViewModel
+{
+    public string Content { get; set; }
+    public ICommand Command { get; set; }
+
+    public ToolBarButtonItemViewModel()
+    {
+        Command = new AsyncRelayCommand(async () => { await MessageBox.ShowOverlayAsync(Content); });
+    }
+}
+
+public class ToolBarCheckBoxItemViweModel: ToolBarItemViewModel
+{
+    public string Content { get; set; }
+    public bool IsChecked { get; set; }
+    public ICommand Command { get; set; }
+
+    public ToolBarCheckBoxItemViweModel()
+    {
+        Command = new AsyncRelayCommand(async () => { await MessageBox.ShowOverlayAsync(Content); });
+    }
+}
+
+public class ToolBarComboBoxItemViewModel: ToolBarItemViewModel
+{
+    public string Content { get; set; }
+    public ObservableCollection<string> Items { get; set; }
+
+    private string _selectedItem;
+    public string SelectedItem
+    {
+        get => _selectedItem;
+        set
+        {
+            SetProperty(ref _selectedItem, value);
+            MessageBox.ShowOverlayAsync(value);
+        }
+    }
+}
+
+public class ToolBarSeparatorViewModel: ToolBarItemViewModel
+{
+    
+}

demo/Ursa.Demo/ViewModels/TwoTonePathIconDemoViewModel.cs

@@ -0,0 +1,8 @@
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Ursa.Demo.ViewModels;
+
+public class TwoTonePathIconDemoViewModel:ObservableObject
+{
+    
+}