Merge branch 'main' into main

README.md

@@ -6,12 +6,14 @@
 
 Ursa is a UI library for building cross-platform UIs with Avalonia UI.
 
+![Demo](./assets/demo.png)
+
 ## How to use
 1. Ursa
 
 Add nuget package:
 ```bash
-dotnet add package Irihi.Ursa --version 0.1.0-beta20230702
+dotnet add package Irihi.Ursa --version 0.2.0-beta20240129
 ```
 
 You can now use Ursa controls in your Avalonia Application.
@@ -39,14 +41,18 @@ Ursa.Themes.Semi is a theme package for Ursa inspired by Semi Design. You can ad
 
 Add nuget package:
 ```bash
-dotnet add package Semi.Avalonia --version 11.0.0-rc1
-dotnet add package Irihi.Ursa.Themes.Semi --version 0.1.0-beta20230702
+dotnet add package Semi.Avalonia --version 11.0.7
+dotnet add package Irihi.Ursa.Themes.Semi --version 0.2.0-beta20240129
 ```
 
 Include Styles in application:
 ```xaml
+<Application...
+    xmlns:u-semi="https://irihi.tech/ursa/themes/semi"
+    ....>
+
     <Application.Styles>
         <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
-        <StyleInclude Source="avares://Ursa.Themes.Semi/Index.axaml" />
+        <u-semi:SemiTheme Locale="zh-CN"/>
     </Application.Styles>
-```
+```

Ursa.sln

@@ -16,6 +16,10 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Ursa.Demo.iOS", "demo\Ursa.
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Ursa.Demo.Browser", "demo\Ursa.Demo.Browser\Ursa.Demo.Browser.csproj", "{D1942476-8473-4608-BB9F-5AC01083BBDA}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Ursa.PrismExtension", "src\Ursa.PrismExtension\Ursa.PrismExtension.csproj", "{2E934F60-F5DF-4856-B05A-B949C7F9D948}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Ursa.PrismDialogDemo", "demo\Ursa.PrismDialogDemo\Ursa.PrismDialogDemo.csproj", "{F99B3D07-4560-4B05-892C-0FF2757FEF2E}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -50,6 +54,14 @@ Global
 		{D1942476-8473-4608-BB9F-5AC01083BBDA}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{D1942476-8473-4608-BB9F-5AC01083BBDA}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{D1942476-8473-4608-BB9F-5AC01083BBDA}.Release|Any CPU.Build.0 = Release|Any CPU
+		{2E934F60-F5DF-4856-B05A-B949C7F9D948}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{2E934F60-F5DF-4856-B05A-B949C7F9D948}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{2E934F60-F5DF-4856-B05A-B949C7F9D948}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{2E934F60-F5DF-4856-B05A-B949C7F9D948}.Release|Any CPU.Build.0 = Release|Any CPU
+		{F99B3D07-4560-4B05-892C-0FF2757FEF2E}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{F99B3D07-4560-4B05-892C-0FF2757FEF2E}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{F99B3D07-4560-4B05-892C-0FF2757FEF2E}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{F99B3D07-4560-4B05-892C-0FF2757FEF2E}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(NestedProjects) = preSolution
 		{407A91FD-A88B-459B-8DCE-8C6AA98279FE} = {A41BAF0D-DA61-4A63-889A-084BAD36FD66}
@@ -57,5 +69,6 @@ Global
 		{B6BAB821-A9FE-44F3-B9CD-06E27FDB63F6} = {A41BAF0D-DA61-4A63-889A-084BAD36FD66}
 		{94C2BBD9-8B57-4AE9-AAFD-7D4335B15A8E} = {A41BAF0D-DA61-4A63-889A-084BAD36FD66}
 		{D1942476-8473-4608-BB9F-5AC01083BBDA} = {A41BAF0D-DA61-4A63-889A-084BAD36FD66}
+		{F99B3D07-4560-4B05-892C-0FF2757FEF2E} = {A41BAF0D-DA61-4A63-889A-084BAD36FD66}
 	EndGlobalSection
 EndGlobal

demo/Directory.Build.props

@@ -1,6 +1,6 @@
 <Project>
   <PropertyGroup>
     <Nullable>enable</Nullable>
-    <AvaloniaVersion>11.0.0</AvaloniaVersion>
+    <AvaloniaVersion>11.0.9</AvaloniaVersion>
   </PropertyGroup>
 </Project>

demo/Ursa.Demo.Desktop/Ursa.Demo.Desktop.csproj

@@ -6,6 +6,7 @@
         <TargetFramework>net7.0</TargetFramework>
         <Nullable>enable</Nullable>
         <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
+        <AvaloniaUseCompiledBindingsByDefault>false</AvaloniaUseCompiledBindingsByDefault>
     </PropertyGroup>
 
     <PropertyGroup>

demo/Ursa.Demo/App.axaml

@@ -1,9 +1,10 @@
 <Application
     x:Class="Ursa.Demo.App"
     xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:u-semi="https://irihi.tech/ursa/themes/semi">
     <Application.Styles>
         <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
-        <StyleInclude Source="avares://Ursa.Themes.Semi/Index.axaml" />
+        <u-semi:SemiTheme Locale="zh-CN" />
     </Application.Styles>
 </Application>

demo/Ursa.Demo/Converters/IconNameToPathConverter.cs

@@ -0,0 +1,42 @@
+using System;
+using System.Globalization;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+
+namespace Ursa.Demo.Converters;
+
+public class IconNameToPathConverter: IValueConverter
+{
+    private string[] paths = new[]
+    {
+        "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z",
+        "M16 12L9 2L2 12H3.86L0 18H7V22H11V18H18L14.14 12H16M20.14 12H22L15 2L12.61 5.41L17.92 13H15.97L19.19 18H24L20.14 12M13 19H17V22H13V19Z",
+        "M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z",
+        "M5 21C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5M15.3 16L13.2 13.9L17 10L14.2 7.2L10.4 11.1L8.2 8.9V16H15.3Z",
+        "M16,9V7H12V12.5C11.58,12.19 11.07,12 10.5,12A2.5,2.5 0 0,0 8,14.5A2.5,2.5 0 0,0 10.5,17A2.5,2.5 0 0,0 13,14.5V9H16M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z",
+        "M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22 7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4 16.67,4Z",
+        "M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12S17.5 2 12 2M12.5 13H11V7H12.5V11.3L16.2 9.2L17 10.5L12.5 13Z"
+    };
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is int i)
+        {
+            string s = paths[i % paths.Length];
+            return StreamGeometry.Parse(s);
+        }
+        else if (value is string s)
+        {
+            int hash = s.GetHashCode();
+            string path = paths[Math.Abs(hash) % paths.Length];
+            return StreamGeometry.Parse(path);
+        }
+        return AvaloniaProperty.UnsetValue;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        return AvaloniaProperty.UnsetValue;
+    }
+}

demo/Ursa.Demo/Converters/TimelineIconConverter.cs

@@ -0,0 +1,32 @@
+using System;
+using System.Globalization;
+using Avalonia;
+using Avalonia.Data;
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+using Ursa.Controls;
+
+namespace Ursa.Demo.Converters;
+
+public class TimelineIconConverter: IValueConverter
+{
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is TimelineItemType t)
+        {
+            return t switch
+            {
+                TimelineItemType.Success => Brushes.Green,
+                TimelineItemType.Ongoing => Brushes.Blue,
+                TimelineItemType.Error => Brushes.Red,
+                _ => Brushes.Gray
+            };
+        }
+        return AvaloniaProperty.UnsetValue;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
+    }
+}

demo/Ursa.Demo/DataTemplates/ToolBarItemTemplateSelector.cs

@@ -0,0 +1,56 @@
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Controls.Templates;
+using Avalonia.Data;
+using Ursa.Controls;
+using Ursa.Demo.ViewModels;
+
+namespace Ursa.Demo.Converters;
+
+public class ToolBarItemTemplateSelector: IDataTemplate
+{
+    
+    public static ToolBarItemTemplateSelector Instance { get; } = new();
+    public Control? Build(object? param)
+    {
+        if (param is null) return null;
+        if (param is ToolBarSeparatorViewModel sep)
+        {
+            return new ToolBarSeparator();
+        }
+        if (param is ToolBarButtonItemViewModel vm)
+        {
+            return new Button()
+            {
+                [!ContentControl.ContentProperty] = new Binding() { Path = "Content" },
+                [!Button.CommandProperty] = new Binding() { Path = "Command" },
+                [!ToolBar.OverflowModeProperty] = new Binding(){Path = nameof(ToolBarItemViewModel.OverflowMode)},
+            };
+        }
+        if (param is ToolBarCheckBoxItemViweModel cb)
+        {
+            return new CheckBox()
+            {
+                [!ContentControl.ContentProperty] = new Binding() { Path = "Content" },
+                [!ToggleButton.IsCheckedProperty] = new Binding() { Path = "IsChecked" },
+                [!ToolBar.OverflowModeProperty] = new Binding(){Path = nameof(ToolBarItemViewModel.OverflowMode)},
+            };
+        }
+        if (param is ToolBarComboBoxItemViewModel combo)
+        {
+            return new ComboBox()
+            {
+                [!ContentControl.ContentProperty] = new Binding() { Path = "Content" },
+                [!SelectingItemsControl.SelectedItemProperty] = new Binding() { Path = "SelectedItem" },
+                [!ItemsControl.ItemsSourceProperty] = new Binding() { Path = "Items" },
+                [!ToolBar.OverflowModeProperty] = new Binding(){Path = nameof(ToolBarItemViewModel.OverflowMode)},
+            };
+        }
+        return new Button() { Content = "Undefined Item" };
+    }
+
+    public bool Match(object? data)
+    {
+        return data is ToolBarItemViewModel;
+    }
+}

demo/Ursa.Demo/Dialogs/DialogWithAction.axaml

@@ -0,0 +1,45 @@
+<UserControl
+    x:Class="Ursa.Demo.Dialogs.DialogWithAction"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="clr-namespace:Ursa.Demo.Dialogs"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:u="https://irihi.tech/ursa"
+    HorizontalAlignment="Stretch"
+    VerticalAlignment="Stretch"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="local:DialogWithActionViewModel"
+    Background="{DynamicResource SemiYellow1}"
+    mc:Ignorable="d">
+    <Grid Margin="24" RowDefinitions="Auto, *, Auto">
+        <TextBlock
+            Grid.Row="0"
+            Margin="8"
+            FontSize="16"
+            FontWeight="600"
+            Text="{Binding Title}" />
+        <Calendar
+            Grid.Row="1"
+            HorizontalAlignment="Center"
+            VerticalAlignment="Top"
+            SelectedDate="{Binding Date}" />
+        <StackPanel
+            Grid.Row="2"
+            HorizontalAlignment="Right"
+            Orientation="Horizontal"
+            Spacing="8">
+            <Rectangle Width="10" Height="10" Fill="Red" u:DialogControlBase.CanClose="True"></Rectangle>
+            <Button Command="{Binding DialogCommand}" Content="Dialog" />
+            <Button Command="{Binding OKCommand}" Content="OK" />
+            <Button Command="{Binding CancelCommand}" Content="Cancel" />
+            <ComboBox>
+                <ComboBoxItem>A</ComboBoxItem>
+                <ComboBoxItem>B</ComboBoxItem>
+                <ComboBoxItem>C</ComboBoxItem>
+            </ComboBox>
+        </StackPanel>
+    </Grid>
+</UserControl>

demo/Ursa.Demo/Dialogs/DialogWithAction.axaml.cs

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

demo/Ursa.Demo/Dialogs/DialogWithActionViewModel.cs

@@ -0,0 +1,51 @@
+using System;
+using System.Threading.Tasks;
+using System.Windows.Input;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Irihi.Avalonia.Shared.Contracts;
+using Ursa.Controls;
+
+namespace Ursa.Demo.Dialogs;
+
+public partial class DialogWithActionViewModel: ObservableObject, IDialogContext
+{
+    [ObservableProperty] private string _title;
+    [ObservableProperty] private DateTime _date;
+
+    public void Close()
+    {
+        RequestClose?.Invoke(this, false);
+    }
+
+    public event EventHandler<object?>? RequestClose;
+    
+    public ICommand OKCommand { get; set; }
+    public ICommand CancelCommand { get; set; }
+    
+    public ICommand DialogCommand { get; set; }
+    
+    public DialogWithActionViewModel()
+    {
+        OKCommand = new RelayCommand(OK);
+        CancelCommand = new RelayCommand(Cancel);
+        DialogCommand = new AsyncRelayCommand(ShowDialog);
+        Title = "Please select a date";
+        Date = DateTime.Now;
+    }
+
+    private void OK()
+    {
+        RequestClose?.Invoke(this, true);
+    }
+
+    private void Cancel()
+    {
+        RequestClose?.Invoke(this, false);
+    }
+    
+    private async Task ShowDialog()
+    {
+        await OverlayDialog.ShowCustomModal<DialogWithAction, DialogWithActionViewModel, bool>(new DialogWithActionViewModel());
+    }
+}

demo/Ursa.Demo/Dialogs/PlainDialog.axaml

@@ -0,0 +1,13 @@
+<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"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             xmlns:local="clr-namespace:Ursa.Demo.Dialogs"
+             x:DataType="local:PlainDialogViewModel"
+             x:CompileBindings="True"
+             x:Class="Ursa.Demo.Dialogs.PlainDialog">
+    <StackPanel>
+        <Calendar SelectedDate="{Binding Date}" ></Calendar>
+    </StackPanel>
+</UserControl>

demo/Ursa.Demo/Dialogs/PlainDialog.axaml.cs

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

demo/Ursa.Demo/Dialogs/PlainDialogViewModel.cs

@@ -0,0 +1,15 @@
+using System;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Ursa.Demo.Dialogs;
+
+public class PlainDialogViewModel: ObservableObject
+{
+    private DateTime? _date;
+
+    public DateTime? Date
+    {
+        get => _date;
+        set => SetProperty(ref _date, value);
+    }
+}

demo/Ursa.Demo/Models/MenuKeys.cs

@@ -2,18 +2,35 @@ namespace Ursa.Demo;
 
 public static class MenuKeys
 {
+    public const string MenuKeyIntroduction = "Introduction";
     public const string MenuKeyBadge = "Badge";
     public const string MenuKeyBanner = "Banner";
     public const string MenuKeyButtonGroup = "ButtonGroup";
+    public const string MenuKeyClassInput = "Class Input";
+    public const string MenuKeyDialog = "Dialog";
     public const string MenuKeyDivider = "Divider";
+    public const string MenuKeyDisableContainer = "DisableContainer";
+    public const string MenuKeyDrawer = "Drawer";
     public const string MenuKeyDualBadge = "DualBadge";
+    public const string MenuKeyEnumSelector = "EnumSelector";
+    public const string MenuKeyForm = "Form";
+    public const string MenuKeyImageViewer = "ImageViewer";
     public const string MenuKeyIpBox = "IPv4Box";
+    public const string MenuKeyIconButton = "IconButton";
     public const string MenuKeyKeyGestureInput = "KeyGestureInput";
     public const string MenuKeyLoading = "Loading";
-    public const string MenuKeyNavigation = "Navigation";
+    public const string MenuKeyMessageBox = "MessageBox";
+    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";
+    public const string MenuKeySelectionList = "SelectionList";
     public const string MenuKeyTagInput = "TagInput";
-    public const string MenuKeyTimeline = "Timeline"; 
     public const string MenuKeySkeleton = "Skeleton"; 
+    public const string MenuKeyTimeline = "Timeline";
+    public const string MenuKeyTwoTonePathIcon = "TwoTonePathIcon";
+    public const string MenuKeyThemeToggler = "ThemeToggler";
+    public const string MenuKeyToolBar = "ToolBar";
 
 }

demo/Ursa.Demo/Pages/BadgeDemo.axaml

@@ -8,126 +8,254 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
-        Margin="24"
-        HorizontalAlignment="Left"
-        ClipToBounds="False">
-        <StackPanel.Styles>
-            <Style Selector="u|Badge">
-                <Setter Property="Margin" Value="14" />
-            </Style>
-            <Style Selector="Border">
-                <Setter Property="Background" Value="Orange" />
-            </Style>
-        </StackPanel.Styles>
-        <TextBlock Text="Hello" />
-        <u:Badge
-            HorizontalAlignment="Center"
-            BadgeContent="500"
-            OverflowCount="100">
-            <Border Width="100" Height="50" />
-        </u:Badge>
-        <StackPanel Orientation="Horizontal">
-            <u:Badge BadgeContent="5" CornerPosition="TopLeft">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge BadgeContent="5" CornerPosition="TopRight">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge BadgeContent="5" CornerPosition="BottomLeft">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge BadgeContent="5" CornerPosition="BottomRight">
-                <Border Width="100" Height="50" />
+    <ScrollViewer HorizontalScrollBarVisibility="Auto">
+        <StackPanel
+            Margin="24"
+            HorizontalAlignment="Left"
+            ClipToBounds="False">
+
+            <StackPanel.Styles>
+                <Style Selector="u|Badge">
+                    <Setter Property="Margin" Value="14" />
+                </Style>
+                <Style Selector="u|Badge > Border">
+                    <Setter Property="Background" Value="Orange" />
+                    <Setter Property="CornerRadius" Value="8" />
+                </Style>
+            </StackPanel.Styles>
+
+            <StackPanel Orientation="Horizontal">
+                <u:Badge
+                    HorizontalAlignment="Center"
+                    Header="500"
+                    OverflowCount="100">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="SUCCEED!">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="Hello" />
+                <u:Badge Header="Hello" Dot="True" />
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <u:Badge Header="5" CornerPosition="TopLeft">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="5" CornerPosition="TopRight">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="5" CornerPosition="BottomLeft">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="5" CornerPosition="BottomRight">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <u:Badge
+                    Header="VIP"
+                    CornerPosition="TopLeft"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="VIP"
+                    CornerPosition="TopRight"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="VIP"
+                    CornerPosition="BottomLeft"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="VIP"
+                    CornerPosition="BottomRight"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+            </StackPanel>
+            <u:Badge HorizontalAlignment="Stretch" Header="VIP">
+                <Border Height="50" />
             </u:Badge>
+            <StackPanel Orientation="Horizontal">
+                <u:Badge Header="URSA" Classes="Primary">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Secondary">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Tertiary">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Warning">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Danger">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Success">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <u:Badge Header="URSA" Classes="Light Primary">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Light Secondary">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Light Tertiary">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Light Warning">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Light Danger">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Light Success">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <u:Badge Header="URSA" Classes="Inverted Primary">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Inverted Secondary">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Inverted Tertiary">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Inverted Warning">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Inverted Danger">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge Header="URSA" Classes="Inverted Success">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <u:Badge
+                    Header="URSA"
+                    Classes="Primary"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="URSA"
+                    Classes="Secondary"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="URSA"
+                    Classes="Tertiary"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="URSA"
+                    Classes="Warning"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="URSA"
+                    Classes="Danger"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="URSA"
+                    Classes="Success"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <u:Badge
+                    Header="URSA"
+                    Classes="Light Primary"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="URSA"
+                    Classes="Light Secondary"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="URSA"
+                    Classes="Light Tertiary"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="URSA"
+                    Classes="Light Warning"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="URSA"
+                    Classes="Light Danger"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+                <u:Badge
+                    Header="URSA"
+                    Classes="Light Success"
+                    Dot="True">
+                    <Border Width="100" Height="50" />
+                </u:Badge>
+            </StackPanel>
+            <Border Background="LightGray" CornerRadius="4">
+                <StackPanel Orientation="Horizontal">
+                    <u:Badge
+                        Header="URSA"
+                        Classes="Inverted Primary"
+                        Dot="True">
+                        <Border Width="100" Height="50" />
+                    </u:Badge>
+                    <u:Badge
+                        Header="URSA"
+                        Classes="Inverted Primary"
+                        Dot="True">
+                        <Border Width="100" Height="50" />
+                    </u:Badge>
+                    <u:Badge
+                        Header="URSA"
+                        Classes="Inverted Secondary"
+                        Dot="True">
+                        <Border Width="100" Height="50" />
+                    </u:Badge>
+                    <u:Badge
+                        Header="URSA"
+                        Classes="Inverted Tertiary"
+                        Dot="True">
+                        <Border Width="100" Height="50" />
+                    </u:Badge>
+                    <u:Badge
+                        Header="URSA"
+                        Classes="Inverted Warning"
+                        Dot="True">
+                        <Border Width="100" Height="50" />
+                    </u:Badge>
+                    <u:Badge
+                        Header="URSA"
+                        Classes="Inverted Danger"
+                        Dot="True">
+                        <Border Width="100" Height="50" />
+                    </u:Badge>
+                </StackPanel>
+            </Border>
         </StackPanel>
-        <u:Badge BadgeContent="SUCCEED!">
-            <Border Width="100" Height="50" />
-        </u:Badge>
-        <u:Badge HorizontalAlignment="Stretch" BadgeContent="VIP">
-            <Border Height="50" />
-        </u:Badge>
-        <StackPanel Orientation="Horizontal">
-            <u:Badge
-                BadgeContent="VIP"
-                CornerPosition="TopLeft"
-                Dot="True">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge
-                BadgeContent="VIP"
-                CornerPosition="TopRight"
-                Dot="True">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge
-                BadgeContent="VIP"
-                CornerPosition="BottomLeft"
-                Dot="True">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge
-                BadgeContent="VIP"
-                CornerPosition="BottomRight"
-                Dot="True">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-        </StackPanel>
-        <StackPanel Orientation="Horizontal">
-            <u:Badge BadgeContent="URSA" Classes="Primary">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge BadgeContent="URSA" Classes="Secondary">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge BadgeContent="URSA" Classes="Tertiary">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge BadgeContent="URSA" Classes="Warning">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge BadgeContent="URSA" Classes="Danger">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-        </StackPanel>
-        <StackPanel Orientation="Horizontal">
-            <u:Badge
-                BadgeContent="URSA"
-                Classes="Primary"
-                Dot="True">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge
-                BadgeContent="URSA"
-                Classes="Secondary"
-                Dot="True">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge
-                BadgeContent="URSA"
-                Classes="Tertiary"
-                Dot="True">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge
-                BadgeContent="URSA"
-                Classes="Warning"
-                Dot="True">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-            <u:Badge
-                BadgeContent="URSA"
-                Classes="Danger"
-                Dot="True">
-                <Border Width="100" Height="50" />
-            </u:Badge>
-        </StackPanel>
-        <StackPanel Orientation="Horizontal">
-            <u:Badge VerticalAlignment="Center" BadgeContent="Hello" />
-            <u:Badge
-                VerticalAlignment="Center"
-                BadgeContent="Hello"
-                Dot="True" />
-        </StackPanel>
-    </StackPanel>
-</UserControl>
+    </ScrollViewer>
+</UserControl>

demo/Ursa.Demo/Pages/BannerDemo.axaml

@@ -47,6 +47,5 @@
                 </Grid>
             </Border>
         </Grid>
-
     </StackPanel>
 </UserControl>

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

@@ -14,16 +14,17 @@ public partial class BannerDemo : UserControl
         InitializeComponent();
         this.DataContext = new BannerDemoViewModel();
     }
-    
+
     private void InitializeComponent()
     {
         AvaloniaXamlLoader.Load(this);
     }
 }
 
-public class BannerDemoViewModel: ViewModelBase
+public class BannerDemoViewModel : ViewModelBase
 {
     private ObservableCollection<NotificationType> _types;
+
     public ObservableCollection<NotificationType> Types
     {
         get => _types;
@@ -48,6 +49,9 @@ public class BannerDemoViewModel: ViewModelBase
 
     public BannerDemoViewModel()
     {
-        Types = new ObservableCollection<NotificationType>() { NotificationType.Information, NotificationType.Warning, NotificationType.Error, NotificationType.Success };
+        Types = new ObservableCollection<NotificationType>()
+        {
+            NotificationType.Information, NotificationType.Success, NotificationType.Warning, NotificationType.Error
+        };
     }
 }

demo/Ursa.Demo/Pages/ButtonGroupDemo.axaml

@@ -13,10 +13,23 @@
     mc:Ignorable="d">
 
     <StackPanel Margin="20" Spacing="20">
-        <u:ButtonGroup Classes="Primary Solid" ItemsSource="{Binding Items}" />
-        <u:ButtonGroup Classes="Primary" ItemsSource="{Binding Items}" />
-        <u:ButtonGroup Classes="Primary Borderless" ItemsSource="{Binding Items}" />
-        <u:ButtonGroup Classes="Primary Large" ItemsSource="{Binding Items}" />
-        <u:ButtonGroup Classes="Primary Small" ItemsSource="{Binding Items}" />
+        <u:ButtonGroup Classes="Primary Solid" 
+                       CommandBinding="{Binding InvokeCommand}"
+                       ItemsSource="{Binding Items}" >
+            <u:ButtonGroup.ItemTemplate>
+                <DataTemplate x:DataType="vm:ButtonItem">
+                    <TextBlock>
+                        <Run Text="🐼"></Run>
+                        <Run Text="{Binding Name}"></Run>
+                    </TextBlock>
+                </DataTemplate>
+            </u:ButtonGroup.ItemTemplate>
+        </u:ButtonGroup>
+        
+        <u:ButtonGroup Classes="Primary" 
+                       ContentBinding="{Binding Name}"
+                       CommandBinding="{Binding InvokeCommand}"
+                       ItemsSource="{Binding Items}" >
+        </u:ButtonGroup>
     </StackPanel>
 </UserControl>

demo/Ursa.Demo/Pages/ClassInputDemo.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"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Ursa.Demo.Pages.ClassInputDemo">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
+        <u:ControlClassesInput Name="input" Separator=" " />
+        <Button u:ControlClassesInput.Source="{Binding #input}" Content="Hello Panda" />
+        <Button u:ControlClassesInput.Source="{Binding #input}" Content="Hello Panda" />
+        <Button u:ControlClassesInput.Source="{Binding #input}" Content="Hello Panda" />
+        <TextBox u:ControlClassesInput.Source="{Binding #input}" Width="100" Text="100"></TextBox>
+        <ProgressBar u:ControlClassesInput.Source="{Binding #input}" Width="200" Value="20" ShowProgressText="True"></ProgressBar>
+    </StackPanel>
+</UserControl>

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

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

demo/Ursa.Demo/Pages/DialogDemo.axaml

@@ -0,0 +1,117 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.DialogDemo"
+    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"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:DialogDemoViewModel"
+    mc:Ignorable="d">
+    <Grid ColumnDefinitions="Auto, *">
+        <TabControl Grid.Column="0" Width="300">
+            <TabItem Header="Default">
+                <StackPanel>
+                    <ToggleSwitch
+                        Name="overlay"
+                        Content="Window/Overlay"
+                        IsChecked="{Binding IsWindow}"
+                        OffContent="Overlay"
+                        OnContent="Window" />
+                    <ToggleSwitch
+                        Content="Global/Local"
+                        IsChecked="{Binding IsGlobal}"
+                        IsVisible="{Binding !#overlay.IsChecked}"
+                        OffContent="Local"
+                        OnContent="Global" />
+                    <ToggleSwitch
+                        Name="defaultModal"
+                        Content="Modal/Regular"
+                        IsChecked="{Binding IsModal}"
+                        IsVisible="{Binding !#overlay.IsChecked}"
+                        OffContent="Regular"
+                        OnContent="Modal" />
+                    <ToggleSwitch
+                        Content="ClickOnMaskToClose"
+                        IsChecked="{Binding CanLightDismiss}"
+                        OffContent="No"
+                        OnContent="Yes" />
+                    <StackPanel Orientation="Horizontal">
+                        <TextBlock Text="Buttons" />
+                        <ComboBox ItemsSource="{Binding Buttons}" SelectedItem="{Binding SelectedButton}" />
+                    </StackPanel>
+                    <StackPanel Orientation="Horizontal">
+                        <TextBlock Text="Mode" />
+                        <ComboBox ItemsSource="{Binding Modes}" SelectedItem="{Binding SelectedMode}" />
+                    </StackPanel>
+                    <Button Command="{Binding ShowDialogCommand}" Content="Show Dialog" />
+                    <TextBlock>
+                        <Run Text="Default Result: " />
+                        <Run Text="{Binding DefaultResult}" />
+                    </TextBlock>
+                    <TextBlock>
+                        <Run Text="Dialog Date: " />
+                        <Run Text="{Binding Date}" />
+                    </TextBlock>
+                </StackPanel>
+            </TabItem>
+            <TabItem Header="Custom">
+                <StackPanel>
+                    <ToggleSwitch
+                        Name="overlay2"
+                        Content="Window/Overlay"
+                        IsChecked="{Binding IsWindow}"
+                        OffContent="Overlay"
+                        OnContent="Window" />
+                    <ToggleSwitch
+                        Content="Global/Local"
+                        IsChecked="{Binding IsGlobal}"
+                        IsVisible="{Binding !#overlay2.IsChecked}"
+                        OffContent="Local"
+                        OnContent="Global" />
+                    <ToggleSwitch
+                        Content="Modal/Regular"
+                        Name="modal"
+                        IsChecked="{Binding IsModal}"
+                        OffContent="Regular"
+                        OnContent="Modal" />
+                    <ToggleSwitch
+                        Content="ClickOnMaskToClose"
+                        IsChecked="{Binding CanLightDismiss}"
+                        OffContent="No"
+                        OnContent="Yes" />
+                    <Button Command="{Binding ShowCustomDialogCommand}" Content="Show Dialog" />
+                    <TextBlock>
+                        <Run Text="Custom Result: " />
+                        <Run Text="{Binding Result}" />
+                    </TextBlock>
+                    <TextBlock>
+                        <Run Text="Dialog Date: " />
+                        <Run Text="{Binding Date}" />
+                    </TextBlock>
+                </StackPanel>
+            </TabItem>
+        </TabControl>
+        <Grid Grid.Column="1">
+            <Border
+                BorderBrush="{DynamicResource SemiGrey1}"
+                BorderThickness="1"
+                ClipToBounds="True"
+                CornerRadius="20">
+                <u:OverlayDialogHost HostId="LocalHost">
+                    <u:OverlayDialogHost.DialogDataTemplates>
+                        <DataTemplate DataType="x:String">
+                            <TextBlock
+                                Margin="24,24,48,24"
+                                Foreground="Red"
+                                Text="{Binding Path=.}" />
+                        </DataTemplate>
+                    </u:OverlayDialogHost.DialogDataTemplates>
+                </u:OverlayDialogHost>
+            </Border>
+        </Grid>
+    </Grid>
+</UserControl>

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

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

demo/Ursa.Demo/Pages/DisableContainerDemo.axaml

@@ -0,0 +1,29 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.DisableContainerDemo"
+    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"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
+        <ToggleSwitch Name="s" IsChecked="True" />
+        <u:DisableContainer DisabledTip="This is disabled. ">
+            <Button IsEnabled="{Binding #s.IsChecked}">Hello World!</Button>
+        </u:DisableContainer>
+        <u:DisableContainer DisabledTip="This is disabled. ">
+            <Calendar IsEnabled="{Binding #s.IsChecked}" />
+        </u:DisableContainer>
+        <u:DisableContainer>
+            <Button IsEnabled="{Binding #s.IsChecked}">Hello Avalonia</Button>
+        </u:DisableContainer>
+        <Button
+            u:DisabledAdorner.DisabledTip="Fine"
+            u:DisabledAdorner.IsEnabled="True"
+            IsEnabled="{Binding #s.IsChecked}">
+            Hello Avalonia
+        </Button>
+    </StackPanel>
+</UserControl>

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

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

demo/Ursa.Demo/Pages/DrawerDemo.axaml

@@ -0,0 +1,99 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.DrawerDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:common="clr-namespace:Ursa.Common;assembly=Ursa"
+    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"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:DrawerDemoViewModel"
+    mc:Ignorable="d">
+    <Grid ColumnDefinitions="Auto, *">
+        <TabControl Grid.Column="0" Width="300">
+            <TabItem Header="Default">
+                <StackPanel>
+                    <u:EnumSelector EnumType="common:Position" Value="{Binding SelectedPosition}" />
+                    <ToggleSwitch
+                        Content="Global/Local"
+                        IsChecked="{Binding IsGlobal}"
+                        OffContent="Local"
+                        OnContent="Global" />
+                    <ToggleSwitch
+                        Content="Modal"
+                        IsChecked="{Binding IsModal}"
+                        OffContent="No"
+                        OnContent="Yes" />
+                    <ToggleSwitch
+                        Content="CanLightDismiss"
+                        IsChecked="{Binding CanLightDismiss}"
+                        OffContent="No"
+                        OnContent="Yes" />
+                    <StackPanel Orientation="Horizontal">
+                        <TextBlock Text="Buttons" />
+                        <u:EnumSelector EnumType="{x:Type u:DialogButton}" Value="{Binding SelectedButton}" />
+                    </StackPanel>
+                    <Button Command="{Binding ShowDialogCommand}" Content="Show Default Drawer" />
+                    <TextBlock>
+                        <Run Text="Default Result: " />
+                        <Run Text="{Binding DefaultResult}" />
+                    </TextBlock>
+                    <TextBlock>
+                        <Run Text="Dialog Date: " />
+                        <Run Text="{Binding Date}" />
+                    </TextBlock>
+                </StackPanel>
+            </TabItem>
+            <TabItem Header="Custom">
+                <StackPanel>
+                    <u:EnumSelector EnumType="common:Position" Value="{Binding SelectedPosition}" />
+                    <ToggleSwitch
+                        Content="Global/Local"
+                        IsChecked="{Binding IsGlobal}"
+                        OffContent="Local"
+                        OnContent="Global" />
+                    <ToggleSwitch
+                        Content="CanLightDismiss"
+                        IsChecked="{Binding CanLightDismiss}"
+                        OffContent="No"
+                        OnContent="Yes" />
+                    <ToggleSwitch
+                        Content="Modal"
+                        IsChecked="{Binding IsModal}"
+                        OffContent="No"
+                        OnContent="Yes" />
+                    <Button Command="{Binding ShowCustomDialogCommand}" Content="Show Custom Drawer" />
+                    <TextBlock>
+                        <Run Text="Custom Result: " />
+                        <Run Text="{Binding Result}" />
+                    </TextBlock>
+                    <TextBlock>
+                        <Run Text="Dialog Date: " />
+                        <Run Text="{Binding Date}" />
+                    </TextBlock>
+                </StackPanel>
+            </TabItem>
+        </TabControl>
+        <Grid Grid.Column="1" ClipToBounds="True">
+            <Border
+                BorderBrush="{DynamicResource SemiGrey1}"
+                BorderThickness="1"
+                ClipToBounds="True"
+                CornerRadius="20">
+                <u:OverlayDialogHost HostId="LocalHost">
+                    <u:OverlayDialogHost.DialogDataTemplates>
+                        <DataTemplate DataType="x:String">
+                            <TextBlock
+                                Margin="24,24,48,24"
+                                Foreground="Red"
+                                Text="{Binding Path=.}" />
+                        </DataTemplate>
+                    </u:OverlayDialogHost.DialogDataTemplates>
+                </u:OverlayDialogHost>
+            </Border>
+        </Grid>
+    </Grid>
+</UserControl>

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

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

demo/Ursa.Demo/Pages/EnumSelectorDemo.axaml

@@ -0,0 +1,30 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.EnumSelectorDemo"
+    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"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:EnumSelectorDemoViewModel"
+    mc:Ignorable="d">
+    <StackPanel>
+        <ToggleSwitch Name="description" Content="Show Description" />
+        <TextBlock Text="Select Type" />
+        <ComboBox
+            Width="200"
+            DisplayMemberBinding="{Binding Name}"
+            ItemsSource="{Binding Types}"
+            SelectedItem="{Binding SelectedType}" />
+        <TextBlock Text="Select Value" />
+        <u:EnumSelector
+            Width="200"
+            DisplayDescription="{Binding #description.IsChecked}"
+            EnumType="{Binding SelectedType}"
+            Value="{Binding Value}" />
+        <TextBlock Text="{Binding Value}" />
+    </StackPanel>
+</UserControl>

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

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

demo/Ursa.Demo/Pages/FormDemo.axaml

@@ -0,0 +1,71 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.FormDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:common="clr-namespace:Ursa.Common;assembly=Ursa"
+    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"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:FormDemoViewModel"
+    mc:Ignorable="d">
+    <ScrollViewer>
+        <StackPanel>
+            <Grid RowDefinitions="Auto, Auto" ColumnDefinitions="Auto, Auto">
+                <TextBlock Grid.Row="0" Grid.Column="0" Text="Label Position" VerticalAlignment="Center"></TextBlock>
+                <TextBlock Grid.Row="1" Grid.Column="0" Text="Label Alignment" VerticalAlignment="Center"></TextBlock>
+                <u:EnumSelector Grid.Row="0" Grid.Column="1"
+                    Name="position"
+                    EnumType="common:Position"
+                    Value="{x:Static common:Position.Top}" />
+                <u:EnumSelector Grid.Row="1" Grid.Column="1"
+                    Name="alignment"
+                    EnumType="HorizontalAlignment"
+                    Value="{x:Static HorizontalAlignment.Left}" />
+            </Grid>
+            <u:Form
+                DataContext="{Binding Model}"
+                LabelAlignment="{Binding #alignment.Value}"
+                LabelPosition="{Binding #position.Value}"
+                LabelWidth="*">
+                <u:FormGroup Header="Information">
+                    <TextBox
+                        Width="300"
+                        u:FormItem.IsRequired="True"
+                        u:FormItem.Label="Name"
+                        Text="{Binding Name}" />
+                    <TextBox
+                        Width="300"
+                        u:FormItem.Label="Email"
+                        Text="{Binding Email}" />
+                </u:FormGroup>
+                <u:FormItem Label="Please select a Date">
+                    <CalendarDatePicker SelectedDate="{Binding Date}" />
+                </u:FormItem>
+                
+                <u:FormGroup Header="Education">
+                    <TextBox
+                        HorizontalAlignment="Stretch"
+                        u:FormItem.IsRequired="True"
+                        u:FormItem.Label="Name"
+                        Text="{Binding Name}" />
+                    <TextBox
+                        HorizontalAlignment="Stretch"
+                        u:FormItem.Label="Email"
+                        u:FormItem.IsRequired="True"
+                        Text="{Binding Email}" />
+                </u:FormGroup>
+                <u:FormItem Label="Click to Submit">
+                    <Button Content="Button With Label" />
+                </u:FormItem>
+                <CheckBox Content="I Agree User Agreement" u:FormItem.NoLabel="True"></CheckBox>
+                <u:FormItem NoLabel="True">
+                    <Button HorizontalAlignment="Left" Content="No Label" />
+                </u:FormItem>
+            </u:Form>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>

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

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

demo/Ursa.Demo/Pages/IconButtonDemo.axaml

@@ -0,0 +1,108 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.IconButtonDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:common="clr-namespace:Ursa.Common;assembly=Ursa"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:u="https://irihi.tech/ursa"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <UserControl.Resources>
+        <StreamGeometry x:Key="iconGlyph">M12.0101 1C5.92171 1 1 5.92171 1 12.0101C1 16.8771 4.15354 20.9967 8.5284 22.455C9.07526 22.5644 9.27577 22.218 9.27577 21.9264C9.27577 21.6712 9.25754 20.7962 9.25754 19.8848C6.19514 20.541 5.55714 18.5723 5.55714 18.5723C5.06497 17.2963 4.33583 16.9682 4.33583 16.9682C3.33326 16.2938 4.40874 16.2938 4.40874 16.2938C5.52069 16.3667 6.104 17.4239 6.104 17.4239C7.08834 19.101 8.67423 18.627 9.31223 18.3354C9.40337 17.6245 9.69503 17.1323 10.0049 16.8589C7.56229 16.6037 4.99206 15.6558 4.99206 11.4267C4.99206 10.2237 5.42954 9.23931 6.12223 8.47371C6.01286 8.20028 5.63006 7.07011 6.2316 5.55714C6.2316 5.55714 7.16126 5.26548 9.25754 6.68731C10.1325 6.45034 11.0804 6.32274 12.0101 6.32274C12.9397 6.32274 13.8876 6.45034 14.7626 6.68731C16.8589 5.26548 17.7885 5.55714 17.7885 5.55714C18.3901 7.07011 18.0073 8.20028 17.8979 8.47371C18.6088 9.23931 19.0281 10.2237 19.0281 11.4267C19.0281 15.6558 16.4578 16.5854 13.997 16.8589C14.398 17.2052 14.7443 17.8614 14.7443 18.9004C14.7443 20.377 14.7261 21.5618 14.7261 21.9264C14.7261 22.218 14.9266 22.5644 15.4735 22.455C19.8483 20.9967 23.0019 16.8771 23.0019 12.0101C23.0201 5.92171 18.0802 1 12.0101 1Z</StreamGeometry>
+    </UserControl.Resources>
+    <StackPanel HorizontalAlignment="Left" Spacing="16">
+        <ToggleSwitch Name="loading" Content="Toggle Loading" />
+        <u:EnumSelector Name="placement" EnumType="{x:Type common:Position}" />
+        <u:IconButton
+            Content="Hello World"
+            IconPlacement="{Binding #placement.Value}"
+            IsLoading="{Binding #loading.IsChecked}" />
+        <u:IconButton
+            Content="Hello Panda"
+            IconPlacement="{Binding #placement.Value}"
+            IsLoading="{Binding #loading.IsChecked}">
+            <u:IconButton.Icon>
+                <TextBlock
+                    HorizontalAlignment="Center"
+                    FontSize="40"
+                    Text="🐼" />
+            </u:IconButton.Icon>
+        </u:IconButton>
+        <u:IconButton
+            Content="GitHub"
+            IconPlacement="{Binding #placement.Value}"
+            IsLoading="{Binding #loading.IsChecked}">
+            <u:IconButton.Icon>
+                <PathIcon
+                    Width="14"
+                    Height="14"
+                    Data="{StaticResource iconGlyph}" />
+            </u:IconButton.Icon>
+        </u:IconButton>
+        <u:IconButton
+            Width="150"
+            Content="GitHub"
+            IconPlacement="{Binding #placement.Value}"
+            IsLoading="{Binding #loading.IsChecked}">
+            <u:IconButton.Icon>
+                <PathIcon
+                    Width="14"
+                    Height="14"
+                    Data="{StaticResource iconGlyph}" />
+            </u:IconButton.Icon>
+        </u:IconButton>
+        <u:IconButton
+            Width="150"
+            Classes="Warning"
+            Content="GitHub"
+            IconPlacement="{Binding #placement.Value}"
+            IsLoading="{Binding #loading.IsChecked}">
+            <u:IconButton.Icon>
+                <PathIcon
+                    Width="14"
+                    Height="14"
+                    Data="{StaticResource iconGlyph}" />
+            </u:IconButton.Icon>
+        </u:IconButton>
+        <u:IconButton
+            Width="150"
+            Content="GitHub"
+            IconPlacement="{Binding #placement.Value}"
+            IsLoading="{Binding #loading.IsChecked}"
+            Theme="{DynamicResource SolidIconButton}">
+            <u:IconButton.Icon>
+                <PathIcon
+                    Width="14"
+                    Height="14"
+                    Data="{StaticResource iconGlyph}" />
+            </u:IconButton.Icon>
+        </u:IconButton>
+        <u:IconButton
+            Width="150"
+            Classes="Warning"
+            Content="GitHub"
+            IconPlacement="{Binding #placement.Value}"
+            IsLoading="{Binding #loading.IsChecked}"
+            Theme="{DynamicResource SolidIconButton}">
+            <u:IconButton.Icon>
+                <PathIcon
+                    Width="14"
+                    Height="14"
+                    Data="{StaticResource iconGlyph}" />
+            </u:IconButton.Icon>
+        </u:IconButton>
+        <u:IconButton
+            Classes="Danger"
+            IsLoading="{Binding #loading.IsChecked}"
+            Theme="{DynamicResource SolidIconButton}">
+            <u:IconButton.Icon>
+                <TextBlock
+                    HorizontalAlignment="Center"
+                    FontSize="40"
+                    Text="🐼" />
+            </u:IconButton.Icon>
+        </u:IconButton>
+    </StackPanel>
+</UserControl>

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

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

demo/Ursa.Demo/Pages/ImageViewerDemo.axaml

@@ -0,0 +1,117 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.ImageViewerDemo"
+    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"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <UserControl.Resources>
+        <SolidColorBrush x:Key="MaskBackground" Opacity="0.2" Color="Red" />
+        <SolidColorBrush x:Key="MaskBorder" Color="Red" />
+    </UserControl.Resources>
+    <StackPanel>
+        <u:ImageViewer
+            Name="viewer"
+            Width="600"
+            Height="300"
+            Source="../Assets/WORLD.png">
+            <u:ImageViewer.Overlayer>
+                <Grid
+                    HorizontalAlignment="Stretch"
+                    ColumnDefinitions="*, Auto, *"
+                    IsVisible="{Binding #maskSwitch.IsChecked}">
+                    <Border
+                        Grid.Column="0"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{StaticResource MaskBackground}"
+                        BorderBrush="{StaticResource MaskBorder}"
+                        BorderThickness="0,0,1,0"
+                        IsHitTestVisible="False" />
+                    <Rectangle
+                        Grid.Column="1"
+                        Width="150"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Fill="Transparent"
+                        IsHitTestVisible="False" />
+                    <Border
+                        Grid.Column="2"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{StaticResource MaskBackground}"
+                        BorderBrush="{StaticResource MaskBorder}"
+                        BorderThickness="1,0,0,0"
+                        IsHitTestVisible="False" />
+                </Grid>
+            </u:ImageViewer.Overlayer>
+        </u:ImageViewer>
+
+        <Grid ColumnDefinitions="Auto, Auto, *" RowDefinitions="Auto, Auto, Auto, Auto">
+            <TextBlock
+                Grid.Row="0"
+                Grid.Column="0"
+                Text="Scale" />
+            <Slider
+                Grid.Row="0"
+                Grid.Column="1"
+                Width="200"
+                Maximum="10"
+                Minimum="0.1"
+                Value="{Binding #viewer.Scale}" />
+            <TextBlock
+                Grid.Row="0"
+                Grid.Column="2"
+                Text="{Binding #viewer.Scale, StringFormat=\{0:0.00000\}}" />
+
+            <TextBlock
+                Grid.Row="1"
+                Grid.Column="0"
+                Text="TranslateX" />
+            <Slider
+                Grid.Row="1"
+                Grid.Column="1"
+                Width="200"
+                IsSnapToTickEnabled="True"
+                Maximum="300"
+                Minimum="-300"
+                TickFrequency="0.1"
+                Value="{Binding #viewer.TranslateX}" />
+            <TextBlock
+                Grid.Row="1"
+                Grid.Column="2"
+                Text="{Binding #viewer.TranslateX, StringFormat=\{0:0.0\}}" />
+
+            <TextBlock
+                Grid.Row="2"
+                Grid.Column="0"
+                Text="TranslateY" />
+            <Slider
+                Grid.Row="2"
+                Grid.Column="1"
+                Width="200"
+                IsSnapToTickEnabled="True"
+                Maximum="300"
+                Minimum="-300"
+                TickFrequency="0.1"
+                Value="{Binding #viewer.TranslateY}" />
+            <TextBlock
+                Grid.Row="2"
+                Grid.Column="2"
+                Text="{Binding #viewer.TranslateY, StringFormat=\{0:0.0\}}" />
+
+            <TextBlock
+                Grid.Row="3"
+                Grid.Column="0"
+                Text="Show Mask" />
+            <ToggleSwitch
+                Name="maskSwitch"
+                Grid.Row="3"
+                Grid.Column="1"
+                Theme="{DynamicResource SimpleToggleSwitch}" />
+        </Grid>
+    </StackPanel>
+</UserControl>

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

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

demo/Ursa.Demo/Pages/IntroductionDemo.axaml

@@ -0,0 +1,262 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.IntroductionDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="clr-namespace:Ursa.Demo.Converters"
+    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"
+    d:DesignHeight="800"
+    d:DesignWidth="1600"
+    mc:Ignorable="d">
+    <Design.DataContext>
+        <vm:IntroductionDemoViewModel />
+    </Design.DataContext>
+    <UserControl.Resources>
+        <PathGeometry x:Key="InfoPath">M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z</PathGeometry>
+        <SolidColorBrush x:Key="MaskBackground" Opacity="0.2" Color="{DynamicResource SemiBlue3Color}" />
+        <SolidColorBrush x:Key="MaskBorderBrush" Color="{DynamicResource SemiBlue5Color}" />
+    </UserControl.Resources>
+    <UserControl.Styles>
+        <Style Selector="u|Badge">
+            <Setter Property="Margin" Value="10" />
+            <Style Selector="^ > Border">
+                <Setter Property="Theme" Value="{DynamicResource CardBorder}" />
+                <Setter Property="Width" Value="100" />
+                <Setter Property="Height" Value="60" />
+            </Style>
+        </Style>
+        <Style Selector="u|DualBadge">
+            <Setter Property="Margin" Value="4" />
+        </Style>
+    </UserControl.Styles>
+
+    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
+        <StackPanel Margin="20">
+            <Grid RowDefinitions="Auto, *" ColumnDefinitions="Auto, Auto, Auto">
+                <u:Banner
+                    Grid.Column="0"
+                    Grid.ColumnSpan="3"
+                    Grid.Row="0"
+                    Classes="Bordered"
+                    Content="Aesthetic revolution of productivity. "
+                    Header="Welcome to IRIHI Technology!"
+                    Type="Information" />
+                <StackPanel Grid.Column="1" Grid.Row="1" Spacing="20" Margin="8">
+                    <u:ImageViewer
+                        Name="viewer"
+                        Width="600"
+                        Height="300"
+                        Scale="0.2"
+                        Background="{DynamicResource SemiGrey1Color}"
+                        Source="../Assets/IRIHI.png">
+                        <u:ImageViewer.Overlayer>
+                            <Grid
+                                HorizontalAlignment="Stretch"
+                                ColumnDefinitions="*, Auto, *"
+                                IsVisible="{Binding #maskSwitch.IsChecked}">
+                                <Border
+                                    Grid.Column="0"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
+                                    Background="{DynamicResource MaskBackground}"
+                                    BorderBrush="{DynamicResource MaskBorderBrush}"
+                                    BorderThickness="0,0,1,0"
+                                    IsHitTestVisible="False" />
+                                <Rectangle
+                                    Grid.Column="1"
+                                    Width="150"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
+                                    Fill="Transparent"
+                                    IsHitTestVisible="False" />
+                                <Border
+                                    Grid.Column="2"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
+                                    Background="{DynamicResource MaskBackground}"
+                                    BorderBrush="{DynamicResource MaskBorderBrush}"
+                                    BorderThickness="1,0,0,0"
+                                    IsHitTestVisible="False" />
+                            </Grid>
+                        </u:ImageViewer.Overlayer>
+                    </u:ImageViewer>
+                    <u:Divider>
+                        <ToggleSwitch
+                            Name="maskSwitch"
+                            IsChecked="True"
+                            OnContent="Show Mask"
+                            OffContent="Show Mask" />
+                    </u:Divider>
+                    <Grid ColumnDefinitions="*,Auto,*">
+                        <StackPanel Grid.Column="0" Spacing="20">
+                            <u:IPv4Box HorizontalAlignment="Stretch" />
+                            <u:IPv4Box HorizontalAlignment="Stretch" InputMode="Fast" />
+                            <RepeatButton Command="{Binding ChangeAddress}" Content="Random" />
+                            <u:IPv4Box HorizontalAlignment="Stretch"
+                                       ShowLeadingZero="True"
+                                       IPAddress="{Binding Address}" />
+                            <u:IPv4Box HorizontalAlignment="Stretch" IsEnabled="False" />
+                        </StackPanel>
+                        <u:Timeline Grid.Column="1" HorizontalAlignment="Left" Mode="Alternate">
+                            <u:TimelineItem
+                                Content="Step 1"
+                                Header="ToDo"
+                                Type="Default"
+                                Time="2023-01-14 09:24:05"/>
+                            <u:TimelineItem
+                                Content="Step 2"
+                                Header="Start"
+                                Position="Right"
+                                Type="Ongoing"
+                                Time="2024-01-04 22:32:58"/>
+                            <u:TimelineItem
+                                Content="Step 3"
+                                Header="In Between"
+                                Type="Warning"
+                                Time="2024-01-05 00:08:29"/>
+                            <u:TimelineItem
+                                Content="Step 4"
+                                Header="Finished"
+                                Position="Right"
+                                Type="Success" 
+                                Time="2024-01-05 00:27:44"/>
+                        </u:Timeline>
+                        <StackPanel Grid.Column="2" Spacing="20">
+                            <u:ButtonGroup Classes="Primary Solid" ItemsSource="{Binding ButtonGroupItems}" />
+                            <u:ButtonGroup Classes="Primary" ItemsSource="{Binding ButtonGroupItems}" />
+                            <u:ButtonGroup Classes="Primary Borderless" ItemsSource="{Binding ButtonGroupItems}" />
+                            <u:ButtonGroup Classes="Primary Large" ItemsSource="{Binding ButtonGroupItems}" />
+                            <u:ButtonGroup Classes="Primary Small" ItemsSource="{Binding ButtonGroupItems}" />
+                        </StackPanel>
+                    </Grid>
+                </StackPanel>
+
+                <StackPanel Grid.Column="2" Grid.Row="1" Spacing="20" Margin="8">
+                    <u:Divider HorizontalContentAlignment="Right">Badge</u:Divider>
+                    <WrapPanel Orientation="Horizontal">
+                        <u:Badge Header="Ursa" CornerPosition="TopRight">
+                            <Border Classes="Hover">
+                                <TextBlock Text="Pyro"/>
+                            </Border>
+                        </u:Badge>
+                        <u:Badge
+                            HorizontalAlignment="Center"
+                            CornerPosition="TopRight"
+                            Header="500"
+                            OverflowCount="99">
+                            <Border Classes="Hover">
+                                <TextBlock Text="Hydro"/>
+                            </Border>
+                        </u:Badge>
+                        <u:Badge
+                            Header="Ursa"
+                            CornerPosition="TopRight"
+                            Dot="True">
+                            <Border Classes="Hover">
+                                <TextBlock Text="Ameno"/>
+                            </Border>
+                        </u:Badge>
+
+                        <u:Badge Header="Ursa" />
+                        <u:Badge Header="Ursa" Dot="True" />
+                    </WrapPanel>
+                    <WrapPanel Orientation="Horizontal">
+                        <u:Badge Header="Ursa" Classes="Secondary">
+                            <Border Classes="Hover">
+                                <TextBlock Text="Electro"/>
+                            </Border>
+                        </u:Badge>
+                        <u:Badge Header="Ursa" Classes="Tertiary" CornerPosition="BottomLeft">
+                            <Border Classes="Hover">
+                                <TextBlock Text="Dendro"/>
+                            </Border>
+                        </u:Badge>
+                        <u:Badge Header="Ursa" Classes="Warning" CornerPosition="BottomRight">
+                            <Border Classes="Hover">
+                                <TextBlock Text="Cryo"/>
+                            </Border>
+                        </u:Badge>
+                        <u:Badge Header="Ursa" Classes="Danger" CornerPosition="TopRight">
+                            <Border Classes="Hover">
+                                <TextBlock Text="Geo"/>
+                            </Border>
+                        </u:Badge>
+                    </WrapPanel>
+
+                    <u:Divider>DualBadge</u:Divider>
+                    <WrapPanel Orientation="Horizontal">
+                        <u:DualBadge Header="downloads">
+                            <u:DualBadge.Icon>
+                                <PathIcon
+                                    Width="14"
+                                    Height="14"
+                                    Data="{StaticResource InfoPath}" />
+                            </u:DualBadge.Icon>
+                            2.4k
+                        </u:DualBadge>
+                        <u:DualBadge Classes="FlatSquare" Header="downloads">
+                            <u:DualBadge.Icon>
+                                <PathIcon
+                                    Width="14"
+                                    Height="14"
+                                    Data="{StaticResource InfoPath}" />
+                            </u:DualBadge.Icon>
+                            2.4k
+                        </u:DualBadge>
+                        <u:DualBadge Classes="Plastic" Header="downloads">
+                            <u:DualBadge.Icon>
+                                <PathIcon
+                                    Width="12"
+                                    Height="12"
+                                    Data="{StaticResource InfoPath}" />
+                            </u:DualBadge.Icon>
+                            2.4k
+                        </u:DualBadge>
+                        <u:DualBadge Classes="ForTheBadge" Header="downloads">
+                            <u:DualBadge.Icon>
+                                <PathIcon
+                                    Width="12"
+                                    Height="12"
+                                    Data="{StaticResource InfoPath}" />
+                            </u:DualBadge.Icon>
+                            2.4k
+                        </u:DualBadge>
+                    </WrapPanel>
+
+                    <u:Divider HorizontalContentAlignment="Left">
+                        <ToggleSwitch
+                            Name="s"
+                            OffContent="Divider"
+                            OnContent="Divider"
+                            IsChecked="True" />
+                    </u:Divider>
+                    <u:LoadingContainer
+                        IsLoading="{Binding #s.IsChecked}"
+                        HorizontalContentAlignment="Stretch"
+                        LoadingMessage="Loading...">
+                        <StackPanel Spacing="20">
+                            <StackPanel Orientation="Horizontal">
+                                <TextBlock Text="Windows" />
+                                <u:Divider Margin="12,0" Orientation="Vertical" />
+                                <TextBlock Text="macOS" />
+                                <u:Divider Orientation="Vertical" />
+                                <TextBlock Text="Linux" />
+                            </StackPanel>
+                            <Grid Height="100" Background="{DynamicResource MaskBackground}">
+                                <u:Divider HorizontalContentAlignment="Stretch">Stretch</u:Divider>
+                            </Grid>
+                        </StackPanel>
+                    </u:LoadingContainer>
+                    <u:TagInput HorizontalAlignment="Left" Width="550" />
+                    <u:Pagination
+                        PageSizeOptions="10, 20, 50, 100"
+                        ShowPageSizeSelector="True"
+                        TotalCount="600" />
+                </StackPanel>
+
+            </Grid>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>

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

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

demo/Ursa.Demo/Pages/KeyGestureInputDemo.axaml

@@ -13,8 +13,15 @@
     mc:Ignorable="d">
     <StackPanel Margin="20">
         <TextBlock Text="Accept all keys" />
-        <u:KeyGestureInput HorizontalAlignment="Left" Width="500" />
+        <u:KeyGestureInput HorizontalAlignment="Left" />
         <TextBlock Text="Accept only A,B and C" />
-        <u:KeyGestureInput HorizontalAlignment="Left" AcceptableKeys="{Binding AcceptableKeys}" Width="500" />
+        <u:KeyGestureInput
+            Width="300"
+            HorizontalAlignment="Left"
+            AcceptableKeys="{Binding AcceptableKeys}"
+            Classes="ClearButton"
+            InnerLeftContent="Attack"
+            InnerRightContent="Default" />
+        <u:KeyGestureInput HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" />
     </StackPanel>
 </UserControl>

demo/Ursa.Demo/Pages/MessageBoxDemo.axaml

@@ -0,0 +1,35 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.MessageBoxDemo"
+    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:vm="using:Ursa.Demo.ViewModels"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:MessageBoxDemoViewModel"
+    mc:Ignorable="d">
+    <UserControl.Styles>
+        <Style Selector="Button">
+            <Setter Property="HorizontalAlignment" Value="Left" />
+            <Setter Property="Margin" Value="8"></Setter>
+        </Style>
+    </UserControl.Styles>
+    <StackPanel HorizontalAlignment="Left">
+        <ComboBox ItemsSource="{Binding Icons}" SelectedItem="{Binding SelectedIcon}" />
+        <ToggleSwitch Content="Try Long Message" IsChecked="{Binding UseLong}"></ToggleSwitch>
+        <ToggleSwitch Content="Show Title" IsChecked="{Binding UseTitle}"></ToggleSwitch>
+        <ToggleSwitch Content="Overlay" IsChecked="{Binding UseOverlay}"></ToggleSwitch>
+        <Button Command="{Binding DefaultMessageBoxCommand}" Content="Default" />
+        <Button Command="{Binding OkCommand}" Content="OK" />
+        <Button Command="{Binding OkCancelCommand}" Content="OKCancel" />
+        <Button Command="{Binding YesNoCommand}" Content="YesNo" />
+        <Button Command="{Binding YesNoCancelCommand}" Content="YesNoCancel" />
+        
+        <TextBlock>
+            <Run Text="Last Clicked Result: "></Run>
+            <Run Text="{Binding Result}"></Run>
+        </TextBlock>
+    </StackPanel>
+</UserControl>

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

@@ -0,0 +1,15 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using Ursa.Demo.ViewModels;
+
+namespace Ursa.Demo.Pages;
+
+public partial class MessageBoxDemo : UserControl
+{
+    public MessageBoxDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new MessageBoxDemoViewModel();
+    }
+}

demo/Ursa.Demo/Pages/NavMenuDemo.axaml

@@ -0,0 +1,123 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.NavMenuDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="clr-namespace:Ursa.Demo.Converters"
+    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"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:NavMenuDemoViewModel"
+    mc:Ignorable="d">
+    <UserControl.Resources>
+        <converters:IconNameToPathConverter x:Key="IconConverter" />
+    </UserControl.Resources>
+    <Grid
+        HorizontalAlignment="Left"
+        ColumnDefinitions="Auto, Auto"
+        RowDefinitions="Auto, Auto, *">
+        <ToggleButton
+            Name="collapse"
+            Grid.Row="0"
+            Grid.Column="0"
+            Grid.ColumnSpan="2">
+            Collapse
+        </ToggleButton>
+        <StackPanel Grid.Row="1" Grid.Column="0">
+            <TextBlock Text="{Binding SelectedMenuItem.Header}" />
+            <Button Command="{Binding RandomCommand}">Random a selection</Button>
+        </StackPanel>
+        <Border
+            Grid.Row="2"
+            Grid.Column="0"
+            Padding="0"
+            HorizontalAlignment="Left"
+            Theme="{DynamicResource CardBorder}">
+            <u:NavMenu
+                Name="menu"
+                HeaderBinding="{Binding Header}"
+                IconBinding="{Binding IconIndex}"
+                IsHorizontalCollapsed="{Binding #collapse.IsChecked, Mode=OneWay}"
+                ItemsSource="{Binding MenuItems}"
+                SelectedItem="{Binding SelectedMenuItem}"
+                SubMenuBinding="{Binding Children}">
+                <u:NavMenu.Styles>
+                    <Style x:DataType="vm:MenuItem" Selector="u|NavMenuItem">
+                        <Setter Property="IsSeparator" Value="{Binding IsSeparator}" />
+                    </Style>
+                </u:NavMenu.Styles>
+                <u:NavMenu.IconTemplate>
+                    <DataTemplate DataType="{x:Type x:Int32}">
+                        <u:TwoTonePathIcon
+                            Width="16"
+                            Height="16"
+                            ActiveForeground="{DynamicResource SemiBlue5}"
+                            ActiveStrokeBrush="{DynamicResource SemiBlue5}"
+                            Data="{Binding Converter={StaticResource IconConverter}}"
+                            Foreground="{DynamicResource SemiGrey5}"
+                            IsActive="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=u:NavMenuItem}, Path=IsHighlighted, Mode=TwoWay}"
+                            StrokeBrush="{DynamicResource SemiGrey5}" />
+                    </DataTemplate>
+                </u:NavMenu.IconTemplate>
+                <u:NavMenu.Header>
+                    <Grid HorizontalAlignment="Center" ColumnDefinitions="Auto, Auto">
+                        <Image
+                            Width="48"
+                            Height="48"
+                            Margin="4,12"
+                            u:NavMenu.CanToggle="True"
+                            RenderOptions.BitmapInterpolationMode="HighQuality"
+                            Source="../Assets/Ursa.ico" />
+                        <TextBlock
+                            Grid.Column="1"
+                            VerticalAlignment="Center"
+                            Classes="H5"
+                            IsVisible="{Binding !#menu.IsHorizontalCollapsed}"
+                            Text="Ursa Avalonia"
+                            Theme="{DynamicResource TitleTextBlock}" />
+                    </Grid>
+                </u:NavMenu.Header>
+            </u:NavMenu>
+        </Border>
+        <TextBlock
+            Grid.Row="1"
+            Grid.Column="1"
+            Text="{ReflectionBinding #menu2.SelectedItem.Header}" />
+        <u:NavMenu
+            Name="menu2"
+            Grid.Row="2"
+            Grid.Column="1"
+            IsHorizontalCollapsed="{Binding #collapse.IsChecked}">
+            <u:NavMenuItem Header="Menu 1">
+                <u:NavMenuItem.Icon>
+                    <Rectangle
+                        Width="10"
+                        Height="10"
+                        Fill="Red" />
+                </u:NavMenuItem.Icon>
+                <u:NavMenuItem Header="Sub Menu 1" />
+                <u:NavMenuItem Header="Sub Menu 2" />
+                <u:NavMenuItem Header="Sub Menu 3" />
+            </u:NavMenuItem>
+            <u:NavMenuItem Header="Menu 2">
+                <u:NavMenuItem.Icon>
+                    <Rectangle
+                        Width="10"
+                        Height="10"
+                        Fill="Red" />
+                </u:NavMenuItem.Icon>
+            </u:NavMenuItem>
+            <u:NavMenuItem Header="Menu 3">
+                <u:NavMenuItem.Icon>
+                    <Rectangle
+                        Width="10"
+                        Height="10"
+                        Fill="Red" />
+                </u:NavMenuItem.Icon>
+            </u:NavMenuItem>
+        </u:NavMenu>
+    </Grid>
+</UserControl>

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

@@ -0,0 +1,27 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Shapes;
+using Avalonia.Input;
+using Avalonia.LogicalTree;
+using Avalonia.Markup.Xaml;
+using Ursa.Demo.ViewModels;
+
+namespace Ursa.Demo.Pages;
+
+public partial class NavMenuDemo : UserControl
+{
+    public NavMenuDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new NavMenuDemoViewModel();
+    }
+
+    private void InputElement_OnPointerPressed(object? sender, PointerPressedEventArgs e)
+    {
+        if (sender is Rectangle c)
+        {
+            c.ApplyStyling();
+            var ancestors = c.GetLogicalAncestors();
+        }
+    }
+}

demo/Ursa.Demo/Pages/NavigationMenuDemo.axaml

@@ -1,66 +0,0 @@
-<UserControl
-    x:Class="Ursa.Demo.Pages.NavigationMenuDemo"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:converters="clr-namespace:Ursa.Demo.Converters"
-    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"
-    d:DesignHeight="450"
-    d:DesignWidth="800"
-    x:CompileBindings="True"
-    x:DataType="vm:NavigationMenuDemoViewModel"
-    mc:Ignorable="d">
-    <UserControl.Resources>
-        <converters:IconNameConverter x:Key="IconNameConverter">
-            <PathGeometry x:Key="User">M12 16C13.9818 16 15.7453 14.3394 16.7142 11.8589C17.3163 11.6122 17.8892 10.8644 18.1508 9.88823C18.4909 8.61881 18.4234 7.48536 17.4964 7.13266C17.4064 2.7111 15.6617 1 12 1C8.33858 1 6.59387 2.71088 6.50372 7.13179C5.57454 7.48354 5.50668 8.61777 5.84709 9.8882C6.10904 10.8658 6.68318 11.6143 7.28626 11.8599C8.2552 14.3398 10.0186 16 12 16Z M19.6049 22C20.8385 22 21.7171 20.8487 20.867 19.9547C19.1971 18.1985 15.853 17 12 17C8.14699 17 4.80292 18.1985 3.133 19.9547C2.2829 20.8487 3.16148 22 4.39513 22H19.6049Z</PathGeometry>
-            <PathGeometry x:Key="Star">M10.7525 1.90411C11.1451 0.698628 12.8549 0.698631 13.2475 1.90411L15.2395 8.01946H21.6858C22.9565 8.01946 23.4848 9.64143 22.4568 10.3865L17.2417 14.1659L19.2337 20.2813C19.6263 21.4868 18.2431 22.4892 17.2151 21.7442L12 17.9647L6.78489 21.7442C5.75687 22.4892 4.37368 21.4868 4.76635 20.2813L6.75834 14.1659L1.54323 10.3865C0.515206 9.64142 1.04354 8.01946 2.31425 8.01946H8.76048L10.7525 1.90411Z</PathGeometry>
-            <PathGeometry x:Key="Gear">M7.99973 5.07197C7.19713 5.53535 6.20729 5.53113 5.40866 5.06092L5.1637 4.91669C4.55751 4.55978 3.77662 4.65563 3.34264 5.20927C2.69567 6.03462 2.17585 6.94251 1.79166 7.90124C1.53027 8.55354 1.83733 9.27693 2.449 9.62286L2.69407 9.76145C3.50107 10.2178 4.00002 11.0732 4.00002 12.0003C4.00002 12.9271 3.50145 13.7822 2.69492 14.2387L2.44842 14.3783C1.83596 14.725 1.52888 15.4497 1.79213 16.1024C1.98358 16.577 2.21048 17.044 2.47374 17.5C2.73723 17.9564 3.0285 18.3868 3.34416 18.7902C3.77773 19.3443 4.5588 19.4406 5.16498 19.0834L5.40839 18.9399C6.20714 18.4692 7.19739 18.4648 8.0003 18.9284C8.80291 19.3918 9.29417 20.2511 9.28627 21.1778L9.28386 21.4601C9.27787 22.1629 9.75107 22.7906 10.4468 22.8903C11.4692 23.0368 12.5154 23.0404 13.5537 22.8927C14.2499 22.7936 14.7231 22.1653 14.7169 21.462L14.7143 21.1785C14.7061 20.2514 15.1974 19.3916 16.0003 18.928C16.8029 18.4647 17.7927 18.4689 18.5914 18.9391L18.8363 19.0833C19.4425 19.4402 20.2234 19.3444 20.6574 18.7907C21.3044 17.9654 21.8242 17.0575 22.2084 16.0988C22.4698 15.4465 22.1627 14.7231 21.551 14.3772L21.306 14.2386C20.499 13.7822 20 12.9268 20 11.9997C20 11.0729 20.4986 10.2178 21.3051 9.76126L21.5516 9.62174C22.1641 9.27506 22.4712 8.55029 22.2079 7.89761C22.0165 7.42297 21.7896 6.95598 21.5263 6.50001C21.2628 6.04362 20.9715 5.61325 20.6559 5.20982C20.2223 4.65568 19.4412 4.55944 18.8351 4.91665L18.5916 5.06009C17.7929 5.53078 16.8026 5.53519 15.9997 5.07163C15.1971 4.60825 14.7059 3.74891 14.7138 2.82218L14.7162 2.53994C14.7222 1.83708 14.249 1.20945 13.5532 1.10973C12.5308 0.963214 11.4846 0.959581 10.4464 1.10733C9.75011 1.20641 9.27691 1.83473 9.28317 2.53798L9.28569 2.82154C9.29395 3.74862 8.80264 4.60841 7.99973 5.07197ZM14 15.4641C15.9132 14.3595 16.5687 11.9132 15.4641 9.99999C14.3595 8.08682 11.9132 7.43132 10 8.53589C8.08684 9.64046 7.43134 12.0868 8.53591 14C9.64048 15.9132 12.0868 16.5687 14 15.4641Z</PathGeometry>
-
-        </converters:IconNameConverter>
-    </UserControl.Resources>
-    <StackPanel Orientation="Horizontal">
-        <Border Padding="4" Theme="{DynamicResource CardBorder}">
-            <u:NavigationMenu
-                Name="menu"
-                HorizontalAlignment="Left"
-                ItemsSource="{Binding MenuItems}"
-                ShowCollapseButton="True">
-                <u:NavigationMenu.Header>
-                    <TextBlock
-                        Classes="H5"
-                        Text="Semi Avalonia"
-                        Theme="{DynamicResource TitleTextBlock}" />
-                </u:NavigationMenu.Header>
-                <u:NavigationMenu.Icon>
-                    <PathIcon
-                        Width="32"
-                        Height="32"
-                        Data="M10.6201 17.5C6.06377 17.5 2.37012 13.8063 2.37012 9.25C2.37012 4.69365 6.06377 1 10.6201 1V17.5ZM13.3701 6.5C17.9265 6.5 21.6201 10.1936 21.6201 14.75C21.6201 19.3063 17.9265 23 13.3701 23V6.5Z" />
-                </u:NavigationMenu.Icon>
-                <u:NavigationMenu.ItemTemplate>
-                    <converters:MenuDataTemplateSelector>
-                        <converters:MenuDataTemplateSelector.MenuTemplate>
-                            <DataTemplate DataType="vm:MenuItemViewModel">
-                                <u:NavigationMenuItem Header="{Binding MenuHeader}" ItemsSource="{Binding Children}">
-                                    <u:NavigationMenuItem.Icon>
-                                        <PathIcon
-                                            Width="16"
-                                            Height="16"
-                                            Data="{Binding MenuIconName, Converter={StaticResource IconNameConverter}}" />
-                                    </u:NavigationMenuItem.Icon>
-                                </u:NavigationMenuItem>
-                            </DataTemplate>
-                        </converters:MenuDataTemplateSelector.MenuTemplate>
-                        <converters:MenuDataTemplateSelector.SeparatorTemplate>
-                            <DataTemplate DataType="vm:MenuItemViewModel">
-                                <u:NavigationMenuSeparator Header="{Binding MenuHeader}" />
-                            </DataTemplate>
-                        </converters:MenuDataTemplateSelector.SeparatorTemplate>
-                    </converters:MenuDataTemplateSelector>
-                </u:NavigationMenu.ItemTemplate>
-            </u:NavigationMenu>
-        </Border>
-    </StackPanel>
-</UserControl>

demo/Ursa.Demo/Pages/NumberDisplayerDemo.axaml

@@ -0,0 +1,31 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.NumberDisplayerDemo"
+    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"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:NumberDisplayerDemoViewModel"
+    mc:Ignorable="d">
+    <StackPanel HorizontalAlignment="Left">
+        <Button Command="{Binding IncreaseCommand}">Change</Button>
+        <u:Int32Displayer Value="{Binding Value}" />
+        <u:DoubleDisplayer StringFormat="N2" Value="{Binding DoubleValue}" />
+        <u:DateDisplay
+            FontSize="30"
+            StringFormat="yyyy-MM-dd"
+            Value="{Binding DateValue}" />
+        <TextBlock Text="Selectable: "></TextBlock>
+        <u:Int32Displayer Value="{Binding Value}" IsSelectable="True" />
+        <u:DoubleDisplayer StringFormat="N2" Value="{Binding DoubleValue}" IsSelectable="True" />
+        <u:DateDisplay
+            FontSize="30"
+            StringFormat="yyyy-MM-dd"
+            IsSelectable="True"
+            Value="{Binding DateValue}" />
+    </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/Pages/NumericUpDownDemo.axaml

@@ -0,0 +1,26 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.NumericUpDownDemo"
+    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"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <UserControl.Styles>
+        <Style Selector=":is(u|NumericUpDown)">
+            <Setter Property="Width" Value="240"></Setter>
+        </Style>
+    </UserControl.Styles>
+    <StackPanel HorizontalAlignment="Left">
+        <u:NumericIntUpDown Name="input" InnerLeftContent="Age" Step="1" Value="2" Watermark="Input Value" Classes="ClearButton" />
+        <TextBlock Text="{Binding #input.Value}" ></TextBlock>
+        <u:NumericDoubleUpDown Name="inputDouble" Step="0.5" Value="3.1" EmptyInputValue="1"></u:NumericDoubleUpDown>
+        <TextBlock Text="{Binding #inputDouble.Value}"></TextBlock>
+        <u:NumericByteUpDown Name="inputByte" Step="1" Value="3" EmptyInputValue="1"></u:NumericByteUpDown>
+        <TextBlock Text="{Binding #inputByte.Value}"></TextBlock>
+        <TextBlock Text="Drag"></TextBlock>
+        <u:NumericIntUpDown  Step="1" Value="2" Watermark="Input Value" AllowDrag="True" />
+    </StackPanel>
+</UserControl>

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

@@ -0,0 +1,15 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using Ursa.Demo.ViewModels;
+
+namespace Ursa.Demo.Pages;
+
+public partial class NumericUpDownDemo : UserControl
+{
+    public NumericUpDownDemo()
+    {
+        InitializeComponent();
+        DataContext = new NumericUpDownDemoViewModel();
+    }
+}

demo/Ursa.Demo/Pages/RangeSliderDemo.axaml

@@ -0,0 +1,52 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.RangeSliderDemo"
+    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"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:RangeSliderDemoViewModel"
+    mc:Ignorable="d">
+    <UserControl.Styles>
+        <Style Selector="u|NumericDoubleUpDown">
+            <Setter Property="Width" Value="300" />
+        </Style>
+    </UserControl.Styles>
+    <StackPanel>
+        <u:RangeSlider
+            IsSnapToTick="True"
+            TickFrequency="5"
+            TickPlacement="TopLeft" 
+            Minimum="{Binding #range.Minimum, Mode=TwoWay}"
+            Maximum="{Binding #range.Maximum, Mode=TwoWay}"
+            LowerValue="{Binding #range.LowerValue, Mode=TwoWay}"
+            UpperValue="{Binding #range.UpperValue, Mode=TwoWay}"/>
+        <u:NumericDoubleUpDown InnerLeftContent="Minimum" Value="{Binding #range.Minimum, Mode=TwoWay}" />
+        <u:NumericDoubleUpDown InnerLeftContent="Maximum" Value="{Binding #range.Maximum, Mode=TwoWay}" />
+        <u:NumericDoubleUpDown InnerLeftContent="LowerValue" Value="{Binding #range.LowerValue, Mode=TwoWay}" />
+        <u:NumericDoubleUpDown InnerLeftContent="UpperValue" Value="{Binding #range.UpperValue, Mode=TwoWay}" />
+        <ComboBox ItemsSource="{Binding Orientations}" SelectedItem="{Binding Orientation}" />
+        <u:RangeSlider
+            Name="range"
+            Margin="8"
+            HorizontalAlignment="Left"
+            VerticalAlignment="Top"
+            Orientation="{Binding Orientation}"
+            TickFrequency="5">
+            <u:RangeSlider.Styles>
+                <Style Selector="u|RangeSlider:horizontal">
+                    <Setter Property="Width" Value="400" />
+                    <Setter Property="Height" Value="40" />
+                </Style>
+                <Style Selector="u|RangeSlider:vertical">
+                    <Setter Property="Width" Value="40" />
+                    <Setter Property="Height" Value="400" />
+                </Style>
+            </u:RangeSlider.Styles>
+        </u:RangeSlider>
+    </StackPanel>
+</UserControl>

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

@@ -5,11 +5,11 @@ using Ursa.Demo.ViewModels;
 
 namespace Ursa.Demo.Pages;
 
-public partial class NavigationMenuDemo : UserControl
+public partial class RangeSliderDemo : UserControl
 {
-    public NavigationMenuDemo()
+    public RangeSliderDemo()
     {
         InitializeComponent();
-        this.DataContext = new NavigationMenuDemoViewModel();
+        this.DataContext = new RangeSliderDemoViewModel();
     }
 }

demo/Ursa.Demo/Pages/SelectionBoxDemo.axaml

@@ -0,0 +1,55 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.SelectionListDemo"
+    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"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:SelectionListDemoViewModel"
+    mc:Ignorable="d">
+    <StackPanel HorizontalAlignment="Left">
+        <u:SelectionList ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem}">
+            <u:SelectionList.ItemsPanel>
+                <ItemsPanelTemplate>
+                    <StackPanel Orientation="Horizontal" />
+                </ItemsPanelTemplate>
+            </u:SelectionList.ItemsPanel>
+        </u:SelectionList>
+        <u:SelectionList ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem}" />
+        <u:SelectionList ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem}">
+            <u:SelectionList.Indicator>
+                <Border Background="Transparent" CornerRadius="4">
+                    <Border
+                        Width="4"
+                        Margin="0,8"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Stretch"
+                        Background="{DynamicResource SemiBlue6}"
+                        CornerRadius="4" />
+                </Border>
+            </u:SelectionList.Indicator>
+            <u:SelectionList.ItemTemplate>
+                <DataTemplate>
+                    <Panel Height="40">
+                        <TextBlock
+                            Classes.Active="{Binding $parent[u:SelectionListItem].IsSelected, Mode=OneWay}"
+                            Margin="8,0"
+                            VerticalAlignment="Center"
+                            Text="{Binding}">
+                            <TextBlock.Styles>
+                                <Style Selector="TextBlock.Active">
+                                    <Setter Property="Foreground" Value="{DynamicResource SemiOrange6}" />
+                                </Style>
+                            </TextBlock.Styles>
+                        </TextBlock>
+                    </Panel>
+                </DataTemplate>
+            </u:SelectionList.ItemTemplate>
+        </u:SelectionList>
+        <Button Command="{Binding Clear}">Clear</Button>
+    </StackPanel>
+</UserControl>

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

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

demo/Ursa.Demo/Pages/TagInputDemo.axaml

@@ -5,6 +5,9 @@
     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:TagInputDemoViewModel"
+    x:CompileBindings="True"
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
@@ -12,14 +15,14 @@
         <u:TagInput
             Name="labels"
             Margin="20"
-            AllowDuplicates="False"
+            AllowDuplicates="True"
             Separator="-"
             Tags="{Binding Tags}" />
         <u:TagInput
             Margin="20"
             AllowDuplicates="False"
             Separator="-"
-            Tags="{Binding #labels.Tags}" />
-        <ListBox ItemsSource="{Binding #labels.Tags}" />
+            Tags="{Binding DistinctTags}" />
+        <ListBox ItemsSource="{Binding DistinctTags}" />
     </StackPanel>
 </UserControl>

demo/Ursa.Demo/Pages/ThemeTogglerDemo.axaml

@@ -0,0 +1,26 @@
+<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"
+             mc:Ignorable="d" d:DesignWidth="800"
+             d:DesignHeight="450"
+             x:Class="Ursa.Demo.Pages.ThemeTogglerDemo">
+    <Grid ColumnDefinitions="Auto, *">
+        <StackPanel Grid.Column="0">
+            <TextBlock Text="Global"></TextBlock>
+            <u:ThemeToggleButton/>
+            <TextBlock Text="Target To Scope"></TextBlock>
+            <u:ThemeToggleButton TargetScope="{Binding #scope}"></u:ThemeToggleButton>
+        </StackPanel>
+        <ThemeVariantScope Grid.Column="1" Name="scope" RequestedThemeVariant="Dark">
+            <Border Theme="{DynamicResource CardBorder}">
+                <StackPanel>
+                    <Button Content="Hello World"></Button>
+                    <Calendar></Calendar>
+                    <u:ThemeToggleButton></u:ThemeToggleButton>
+                </StackPanel>
+            </Border>
+        </ThemeVariantScope>
+    </Grid>
+</UserControl>

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

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

demo/Ursa.Demo/Pages/TimelineDemo.axaml

@@ -4,55 +4,84 @@
     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:selectors="clr-namespace:Ursa.Demo.TemplateSelectors"
     xmlns:u="https://irihi.tech/ursa"
     xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    x:CompileBindings="False"
+    x:CompileBindings="True"
     x:DataType="viewModels:TimelineDemoViewModel"
     mc:Ignorable="d">
     <UserControl.Resources>
-        <u:TimelineFormatConverter x:Key="FormatConverter" />
+        <ResourceDictionary>
+            <selectors:TimelineIconTemplateSelector x:Key="IconSelector" >
+                <SolidColorBrush x:Key="Default" Color="{DynamicResource SemiGray6Color}"></SolidColorBrush>
+                <SolidColorBrush x:Key="Ongoing" Color="{DynamicResource SemiBlue6Color}"></SolidColorBrush>
+                <SolidColorBrush x:Key="Success" Color="{DynamicResource SemiGreen6Color}"></SolidColorBrush>
+                <SolidColorBrush x:Key="Warning" Color="{DynamicResource SemiOrange6Color}"></SolidColorBrush>
+                <SolidColorBrush x:Key="Error" Color="{DynamicResource SemiRed6Color}"></SolidColorBrush>
+            </selectors:TimelineIconTemplateSelector>
+        </ResourceDictionary>
     </UserControl.Resources>
-    <StackPanel>
-        <u:Timeline>
-            <u:TimelineItem
-                Content="Start"
-                ItemType="Warning"
-                Time="2022-01-01" />
-            <u:TimelineItem
-                Content="In between"
-                ItemType="Ongoing"
-                Time="2022-01-02" />
-            <u:TimelineItem
-                Content="Finished"
-                ItemType="Error"
-                Time="2022-01-03" />
-            <u:TimelineItem
-                Content="Finished"
-                IconForeground="Yellow"
-                ItemType="Default"
-                Time="2022-01-03" />
+    <WrapPanel>
+        <u:Timeline
+            Mode="Alternate"
+            HorizontalAlignment="Left"
+            ContentMemberBinding="{ReflectionBinding Description}"
+            HeaderMemberBinding="{ReflectionBinding Header}"
+            IconMemberBinding="{ReflectionBinding ItemType}"
+            IconTemplate="{StaticResource IconSelector}"
+            ItemsSource="{Binding Items}"
+            TimeMemberBinding="{ReflectionBinding Time}" >
+                
         </u:Timeline>
-        <u:Timeline HorizontalAlignment="Left" ItemsSource="{Binding Items}">
-            <u:Timeline.ItemTemplate>
-                <DataTemplate x:DataType="viewModels:TimelineItemViewModel">
-                    <u:TimelineItem
-                        Content="{Binding Content}"
-                        ItemType="{Binding ItemType}"
-                        Time="{Binding Time}"
-                        TimeFormat="{Binding TimeFormat}">
-                        <u:TimelineItem.ContentTemplate>
-                            <DataTemplate>
-                                <TextBlock
-                                    MaxWidth="100"
-                                    Text="{Binding}"
-                                    TextWrapping="Wrap" />
-                            </DataTemplate>
-                        </u:TimelineItem.ContentTemplate>
-                    </u:TimelineItem>
-                </DataTemplate>
-            </u:Timeline.ItemTemplate>
+        <u:Timeline
+            Mode="Left"
+            HorizontalAlignment="Left"
+            ContentMemberBinding="{ReflectionBinding Description}"
+            HeaderMemberBinding="{ReflectionBinding Header}"
+            IconMemberBinding="{ReflectionBinding ItemType}"
+            IconTemplate="{StaticResource IconSelector}"
+            ItemsSource="{Binding Items}"
+            TimeMemberBinding="{ReflectionBinding Time}" >
         </u:Timeline>
-    </StackPanel>
+        <u:Timeline
+            Mode="Right"
+            HorizontalAlignment="Left"
+            ContentMemberBinding="{ReflectionBinding Description}"
+            HeaderMemberBinding="{ReflectionBinding Header}"
+            IconMemberBinding="{ReflectionBinding ItemType}"
+            IconTemplate="{StaticResource IconSelector}"
+            ItemsSource="{Binding Items}"
+            TimeMemberBinding="{ReflectionBinding Time}" >
+        </u:Timeline>
+        <u:Timeline HorizontalAlignment="Left" Mode="Alternate">
+            <u:TimelineItem
+                Content="Step 1"
+                Header="第一步"
+                Position="Left"
+                Type="Default" />
+            <u:TimelineItem
+                Content="Step 2"
+                Header="第二步"
+                Position="Right"
+                Type="Success" />
+            <u:TimelineItem
+                Content="Step 3"
+                Header="第三步"
+                Position="Separate"
+                Type="Warning" />
+            <u:TimelineItem
+                Content="Step 4"
+                Header="第四步"
+                Position="Separate"
+                Type="Ongoing" />
+            <u:TimelineItem
+                Content="Step 5"
+                Header="第五步"
+                Position="Separate"
+                TimeFormat="yyyy-MM-dd"
+                Type="Error" />
+        </u:Timeline>
+    </WrapPanel>
 </UserControl>

demo/Ursa.Demo/Pages/ToolBarDemo.axaml

@@ -0,0 +1,136 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.ToolBarDemo"
+    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:template="using:Ursa.Demo.Converters"
+    xmlns:u="https://irihi.tech/ursa"
+    xmlns:vm="using:Ursa.Demo.ViewModels"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:ToolBarDemoViewModel"
+    mc:Ignorable="d">
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <StreamGeometry x:Key="BoldGlyph">M13.5,15.5H10V12.5H13.5A1.5,1.5 0 0,1 15,14A1.5,1.5 0 0,1 13.5,15.5M10,6.5H13A1.5,1.5 0 0,1 14.5,8A1.5,1.5 0 0,1 13,9.5H10M15.6,10.79C16.57,10.11 17.25,9 17.25,8C17.25,5.74 15.5,4 13.25,4H7V18H14.04C16.14,18 17.75,16.3 17.75,14.21C17.75,12.69 16.89,11.39 15.6,10.79Z</StreamGeometry>
+            <StreamGeometry x:Key="ItalicGlyph">M10,4V7H12.21L8.79,15H6V18H14V15H11.79L15.21,7H18V4H10Z</StreamGeometry>
+        </ResourceDictionary>
+    </UserControl.Resources>
+    <Grid ColumnDefinitions="Auto, Auto, *" RowDefinitions="Auto, Auto, *">
+        <u:EnumSelector Name="Orientation" EnumType="Orientation" />
+        <u:ToolBar
+            DockPanel.Dock="Top"
+            Header="Hello World"
+            Orientation="{Binding #Orientation.Value}">
+            <Button u:ToolBar.OverflowMode="Never" Content="Button 1" />
+            <u:ToolBarSeparator />
+            <Button u:ToolBar.OverflowMode="AsNeeded" Content="Button 2" />
+            <Button u:ToolBar.OverflowMode="AsNeeded" Content="Button 3" />
+            <ToggleButton Content="Toggle" />
+            <u:ToolBar.Styles>
+                <Style Selector="u|ToolBar[Orientation=Vertical]">
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Grid.Column" Value="1" />
+                    <Setter Property="Grid.RowSpan" Value="2" />
+                    <Setter Property="Grid.ColumnSpan" Value="1" />
+                </Style>
+                <Style Selector="u|ToolBar[Orientation=Horizontal]">
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Grid.Column" Value="1" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.ColumnSpan" Value="3" />
+                </Style>
+            </u:ToolBar.Styles>
+        </u:ToolBar>
+        <u:ToolBar
+            DockPanel.Dock="Top"
+            ItemsSource="{Binding Items}"
+            Orientation="{Binding #Orientation.Value}">
+            <u:ToolBar.ItemTemplate>
+                <template:ToolBarItemTemplateSelector />
+            </u:ToolBar.ItemTemplate>
+            <u:ToolBar.Styles>
+                <Style Selector="u|ToolBar[Orientation=Vertical]">
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Grid.Column" Value="0" />
+                    <Setter Property="Grid.RowSpan" Value="2" />
+                    <Setter Property="Grid.ColumnSpan" Value="1" />
+                </Style>
+                <Style Selector="u|ToolBar[Orientation=Horizontal]">
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Grid.Column" Value="1" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.ColumnSpan" Value="3" />
+                </Style>
+            </u:ToolBar.Styles>
+        </u:ToolBar>
+        <Grid
+            Grid.Row="2"
+            Grid.Column="2"
+            RowDefinitions="Auto, *">
+            <u:ToolBar Margin="16">
+                <ToggleButton Name="bold">
+                    <PathIcon
+                        Width="16"
+                        Height="16"
+                        Data="{DynamicResource BoldGlyph}" />
+                </ToggleButton>
+                <ToggleButton Name="italic">
+                    <PathIcon
+                        Width="16"
+                        Height="16"
+                        Data="{DynamicResource ItalicGlyph}" />
+                </ToggleButton>
+                <u:ToolBarSeparator />
+                <StackPanel Orientation="Horizontal">
+                    <TextBlock
+                        Margin="8,0"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        Text="Font Size" />
+                    <ComboBox
+                        Name="size"
+                        Width="90"
+                        SelectedIndex="0">
+                        <x:Double>8</x:Double>
+                        <x:Double>16</x:Double>
+                        <x:Double>32</x:Double>
+                    </ComboBox>
+                </StackPanel>
+                <u:ToolBar.Styles>
+                    <Style Selector="u|ToolBar[Orientation=Horizontal]">
+                        <Setter Property="Grid.Row" Value="2" />
+                        <Setter Property="Grid.Column" Value="1" />
+                        <Setter Property="Grid.RowSpan" Value="1" />
+                        <Setter Property="Grid.ColumnSpan" Value="3" />
+                    </Style>
+                </u:ToolBar.Styles>
+
+            </u:ToolBar>
+            <TextBlock
+                Grid.Row="1"
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                Classes.Bold="{Binding #bold.IsChecked}"
+                Classes.Italic="{Binding #italic.IsChecked}"
+                FontSize="{Binding #size.SelectedItem}"
+                Text="Hello Ursa Avalonia">
+                <TextBlock.Styles>
+                    <Style Selector="TextBlock">
+                        <Setter Property="FontWeight" Value="Regular" />
+                        <Setter Property="FontSize" Value="8" />
+                        <Setter Property="FontStyle" Value="Normal" />
+                    </Style>
+                    <Style Selector="TextBlock.Bold">
+                        <Setter Property="FontWeight" Value="Bold" />
+                    </Style>
+                    <Style Selector="TextBlock.Italic">
+                        <Setter Property="FontStyle" Value="Italic" />
+                    </Style>
+                </TextBlock.Styles>
+            </TextBlock>
+        </Grid>
+    </Grid>
+</UserControl>

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

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

demo/Ursa.Demo/Pages/TwoTonePathIconDemo.axaml

@@ -0,0 +1,18 @@
+<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"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Ursa.Demo.Pages.TwoTonePathIconDemo">
+    <StackPanel>
+        <TextBlock Text="Size"></TextBlock>
+        <Slider Name="width" Minimum="0" Maximum="100" Value="20" Width="300"></Slider>
+        <ToggleSwitch Name="active" Content="Active"></ToggleSwitch>
+        <u:TwoTonePathIcon
+            IsActive="{Binding ElementName=active, Path=IsChecked}"
+            Width="{Binding #width.Value}"
+            Height="{Binding #width.Value}"
+            Data="M12 3L2 12H5V20H19V12H22L12 3M13 18H11V16H13V18M13 14H11V8H13V14Z"/>
+    </StackPanel>
+</UserControl>

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

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

demo/Ursa.Demo/TemplateSelectors/TimelineIconTemplateSelector.cs

@@ -0,0 +1,34 @@
+using Avalonia.Controls;
+using Avalonia.Controls.Shapes;
+using Avalonia.Controls.Templates;
+using Avalonia.Media;
+using Ursa.Controls;
+
+namespace Ursa.Demo.TemplateSelectors;
+
+public class TimelineIconTemplateSelector: ResourceDictionary, IDataTemplate
+{
+    
+    public Control? Build(object? param)
+    {
+        if (param is TimelineItemType t)
+        {
+            string s = t.ToString();
+            if (ContainsKey(s))
+            {
+                object? o = this[s];
+                if (o is SolidColorBrush c)
+                {
+                    var ellipse = new Ellipse() { Width = 12, Height = 12, Fill = c };
+                    return ellipse;
+                }
+            }
+        }
+        return null;
+    }
+
+    public bool Match(object? data)
+    {
+        return data is TimelineItemType;
+    }
+}

demo/Ursa.Demo/Ursa.Demo.csproj

@@ -19,7 +19,7 @@
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
         <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
         <PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.0" />
-        <PackageReference Include="Semi.Avalonia" Version="11.0.0" />
+        <PackageReference Include="Semi.Avalonia" Version="11.0.7" />
     </ItemGroup>
 
     <ItemGroup>

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
+{
+    
+}

demo/Ursa.Demo/Views/MainView.axaml

@@ -16,70 +16,92 @@
     <Design.DataContext>
         <vm:MainViewViewModel />
     </Design.DataContext>
-
-    <Grid ColumnDefinitions="Auto, *" RowDefinitions="Auto, *">
-        <Border
-            Grid.RowSpan="2"
-            Padding="8,4"
-            VerticalAlignment="Stretch"
-            Theme="{DynamicResource CardBorder}">
-            <u:NavigationMenu ItemsSource="{Binding Menus.MenuItems}" ShowCollapseButton="True">
-                <u:NavigationMenu.Header>
-                    <TextBlock
-                        Classes="H4"
-                        Text="Ursa"
-                        Theme="{DynamicResource TitleTextBlock}" />
-                </u:NavigationMenu.Header>
-                <u:NavigationMenu.Icon>
-                    <Image
-                        Width="48"
-                        Height="48"
-                        RenderOptions.BitmapInterpolationMode="HighQuality"
-                        Source="../Assets/Ursa.ico" />
-                </u:NavigationMenu.Icon>
-                <u:NavigationMenu.ItemTemplate>
-                    <converters:MenuDataTemplateSelector>
-                        <converters:MenuDataTemplateSelector.MenuTemplate>
-                            <DataTemplate DataType="vm:MenuItemViewModel">
-                                <u:NavigationMenuItem
-                                    Command="{Binding ActivateCommand}"
-                                    Header="{Binding MenuHeader}"
-                                    ItemsSource="{Binding Children}">
-                                    <u:NavigationMenuItem.Icon>
-                                        <Border
-                                            Width="10"
-                                            Height="10"
-                                            Background="{DynamicResource SemiBlue6}"
-                                            CornerRadius="3" />
-                                    </u:NavigationMenuItem.Icon>
-                                </u:NavigationMenuItem>
-                            </DataTemplate>
-                        </converters:MenuDataTemplateSelector.MenuTemplate>
-                        <converters:MenuDataTemplateSelector.SeparatorTemplate>
-                            <DataTemplate DataType="vm:MenuItemViewModel">
-                                <u:NavigationMenuSeparator Header="{Binding MenuHeader}" />
-                            </DataTemplate>
-                        </converters:MenuDataTemplateSelector.SeparatorTemplate>
-                    </converters:MenuDataTemplateSelector>
-                </u:NavigationMenu.ItemTemplate>
-            </u:NavigationMenu>
-        </Border>
-
-        <ToggleButton
-            Grid.Row="0"
-            Grid.Column="1"
-            HorizontalAlignment="Right"
-            Content="Update Theme"
-            IsCheckedChanged="ToggleButton_OnIsCheckedChanged" />
-        <ContentControl
-            Grid.Row="1"
-            Grid.Column="1"
-            Margin="12"
-            Content="{Binding Content}">
-            <ContentControl.ContentTemplate>
-                <converters:ViewLocator />
-            </ContentControl.ContentTemplate>
-        </ContentControl>
-    </Grid>
-
+    <UserControl.Resources>
+        <converters:IconNameToPathConverter x:Key="IconConverter" />
+    </UserControl.Resources>
+    <Panel>
+        <Grid
+            Classes.Blur="{Binding #host.HasModal}"
+            ColumnDefinitions="Auto, *"
+            RowDefinitions="Auto, *">
+            <Grid.Styles>
+                <Style Selector="Grid.Blur">
+                    <Setter Property="Effect" Value="blur(20)" />
+                </Style>
+            </Grid.Styles>
+            <Border
+                Padding="8 4"
+                Grid.RowSpan="2"
+                VerticalAlignment="Stretch"
+                Theme="{DynamicResource CardBorder}">
+                <u:NavMenu Name="menu" ItemsSource="{Binding Menus.MenuItems}"
+                           CommandBinding="{Binding ActivateCommand}"
+                           HeaderBinding="{Binding}"
+                           IconBinding="{Binding MenuHeader}">
+                    <u:NavMenu.Styles>
+                        <Style Selector="u|NavMenuItem" x:DataType="vm:MenuItemViewModel">
+                            <Setter Property="IsSeparator" Value="{Binding IsSeparator}"></Setter>
+                        </Style>
+                    </u:NavMenu.Styles>
+                    <u:NavMenu.IconTemplate>
+                        <DataTemplate x:DataType="x:String">
+                            <u:TwoTonePathIcon
+                                Width="16"
+                                Height="16"
+                                ActiveForeground="{DynamicResource SemiBlue5}"
+                                ActiveStrokeBrush="{DynamicResource SemiBlue5}"
+                                Data="{Binding Converter={StaticResource IconConverter}}"
+                                Foreground="{DynamicResource SemiGrey5}"
+                                IsActive="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=u:NavMenuItem}, Path=IsHighlighted, Mode=TwoWay}"
+                                StrokeBrush="{DynamicResource SemiGrey5}" />
+                        </DataTemplate>
+                    </u:NavMenu.IconTemplate>
+                    <u:NavMenu.HeaderTemplate>
+                        <DataTemplate x:DataType="vm:MenuItemViewModel">
+                            <StackPanel Orientation="Horizontal" MinWidth="240">
+                                <TextBlock HorizontalAlignment="Left" Text="{Binding MenuHeader}" />
+                                <u:Badge
+                                    Margin="8,0,0,0"
+                                    HorizontalAlignment="Left"
+                                    IsVisible="{Binding Status, Converter={x:Static ObjectConverters.IsNotNull}}"
+                                    Header="{Binding Status}"/>
+                            </StackPanel>
+                        </DataTemplate>
+                    </u:NavMenu.HeaderTemplate>
+                    <u:NavMenu.Header>
+                        <DockPanel HorizontalAlignment="Center" Margin="8">
+                            <Image
+                                Width="48"
+                                Height="48"
+                                u:NavMenu.CanToggle="True"
+                                VerticalAlignment="Center"
+                                DockPanel.Dock="Left"
+                                RenderOptions.BitmapInterpolationMode="HighQuality"
+                                Source="../Assets/Ursa.ico" />
+                            <TextBlock
+                                Classes="H4"
+                                Text="Ursa"
+                                IsVisible="{Binding !#menu.IsHorizontalCollapsed}"
+                                VerticalAlignment="Center"
+                                Theme="{DynamicResource TitleTextBlock}" />
+                        </DockPanel>
+                    </u:NavMenu.Header>
+                </u:NavMenu>
+            </Border>
+            <u:ThemeToggleButton
+                Grid.Row="0"
+                Grid.Column="1"
+                HorizontalAlignment="Right" />
+            <ContentControl
+                Grid.Row="1"
+                Grid.Column="1"
+                Margin="12"
+                Content="{Binding Content}">
+                <ContentControl.ContentTemplate>
+                    <converters:ViewLocator />
+                </ContentControl.ContentTemplate>
+            </ContentControl>
+        </Grid>
+        <u:OverlayDialogHost Name="host" SnapThickness="20" />
+    </Panel>
 </UserControl>

demo/Ursa.Demo/Views/MainWindow.axaml.cs

@@ -1,4 +1,5 @@
 using Avalonia.Controls;
+using Avalonia.Interactivity;
 
 namespace Ursa.Demo.Views;
 

demo/Ursa.PrismDialogDemo/App.axaml

@@ -0,0 +1,12 @@
+<Application xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:u-semi="https://irihi.tech/ursa/themes/semi"
+             x:Class="Ursa.PrismDialogDemo.App"
+             RequestedThemeVariant="Default">
+             <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->
+
+    <Application.Styles>
+        <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
+        <u-semi:SemiTheme Locale="zh-CN"/>
+    </Application.Styles>
+</Application>

demo/Ursa.PrismDialogDemo/App.axaml.cs

@@ -0,0 +1,29 @@
+using Avalonia;
+using Avalonia.Controls.ApplicationLifetimes;
+using Avalonia.Markup.Xaml;
+using Prism.DryIoc;
+using Prism.Ioc;
+using Ursa.PrismExtension;
+
+namespace Ursa.PrismDialogDemo;
+
+public partial class App : PrismApplication
+{
+    public override void Initialize()
+    {
+        AvaloniaXamlLoader.Load(this);
+        base.Initialize();
+    }
+
+    protected override void RegisterTypes(IContainerRegistry containerRegistry)
+    {
+        containerRegistry.Register<MainWindow>();
+        containerRegistry.RegisterUrsaDialogService();
+        containerRegistry.RegisterUrsaDialogView<DefaultDialog>("Default");
+    }
+
+    protected override AvaloniaObject CreateShell()
+    {
+        return Container.Resolve<MainWindow>();
+    }
+}

demo/Ursa.PrismDialogDemo/DefaultDialog.axaml

@@ -0,0 +1,8 @@
+<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"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Ursa.PrismDialogDemo.DefaultDialog">
+    Welcome to Ursa Avalonia Dialog!
+</UserControl>

demo/Ursa.PrismDialogDemo/DefaultDialog.axaml.cs

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

demo/Ursa.PrismDialogDemo/MainWindow.axaml

@@ -0,0 +1,16 @@
+<Window 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"
+        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+        x:Class="Ursa.PrismDialogDemo.MainWindow"
+        Title="Ursa.PrismDialogDemo">
+    <Grid>
+        <StackPanel>
+            <Button Click="DialogButton_OnClick">Show Dialog</Button>
+            <Button Click="DrawerButton_OnClick"></Button>
+        </StackPanel>
+        <u:OverlayDialogHost/>
+    </Grid>
+</Window>

demo/Ursa.PrismDialogDemo/MainWindow.axaml.cs

@@ -0,0 +1,28 @@
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+using DryIoc;
+using Ursa.PrismExtension;
+
+namespace Ursa.PrismDialogDemo;
+
+public partial class MainWindow : Window
+{
+    private IUrsaOverlayDialogService _dialogService;
+    private IUrsaDrawerService _drawerService;
+    public MainWindow(IUrsaOverlayDialogService dialogService, IUrsaDrawerService drawerService)
+    {
+        InitializeComponent();
+        _dialogService = dialogService;
+        _drawerService = drawerService;
+    }
+
+    private void DialogButton_OnClick(object? sender, RoutedEventArgs e)
+    {
+        _dialogService.ShowModal("Default", null, null, null);
+    }
+
+    private void DrawerButton_OnClick(object? sender, RoutedEventArgs e)
+    {
+        _drawerService.ShowModal("Default", null, null, null);
+    }
+}

demo/Ursa.PrismDialogDemo/Program.cs

@@ -0,0 +1,21 @@
+using Avalonia;
+using System;
+
+namespace Ursa.PrismDialogDemo;
+
+class Program
+{
+    // Initialization code. Don't use any Avalonia, third-party APIs or any
+    // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
+    // yet and stuff might break.
+    [STAThread]
+    public static void Main(string[] args) => BuildAvaloniaApp()
+        .StartWithClassicDesktopLifetime(args);
+
+    // Avalonia configuration, don't remove; also used by visual designer.
+    public static AppBuilder BuildAvaloniaApp()
+        => AppBuilder.Configure<App>()
+            .UsePlatformDetect()
+            .WithInterFont()
+            .LogToTrace();
+}

demo/Ursa.PrismDialogDemo/Ursa.PrismDialogDemo.csproj

@@ -0,0 +1,28 @@
+<Project Sdk="Microsoft.NET.Sdk">
+    <PropertyGroup>
+        <OutputType>WinExe</OutputType>
+        <TargetFramework>net8.0</TargetFramework>
+        <Nullable>enable</Nullable>
+        <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
+        <ApplicationManifest>app.manifest</ApplicationManifest>
+        <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
+    </PropertyGroup>
+
+
+    <ItemGroup>
+        <PackageReference Include="Avalonia" Version="11.0.7"/>
+        <PackageReference Include="Avalonia.Desktop" Version="11.0.7"/>
+        <PackageReference Include="Avalonia.Themes.Fluent" Version="11.0.7"/>
+        <PackageReference Include="Avalonia.Fonts.Inter" Version="11.0.7"/>
+        <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.7"/>
+        <PackageReference Include="Prism.DryIoc.Avalonia" Version="8.1.97.11072" />
+        <PackageReference Include="Semi.Avalonia" Version="11.0.7" />
+    </ItemGroup>
+
+
+    <ItemGroup>
+      <ProjectReference Include="..\..\src\Ursa.PrismExtension\Ursa.PrismExtension.csproj" />
+      <ProjectReference Include="..\..\src\Ursa.Themes.Semi\Ursa.Themes.Semi.csproj" />
+    </ItemGroup>
+</Project>