diff --git a/demo/Semi.Avalonia.Demo/Constant/ColorTokens.cs b/demo/Semi.Avalonia.Demo/Constant/ColorTokens.cs
index 2ae59f0..7475113 100644
--- a/demo/Semi.Avalonia.Demo/Constant/ColorTokens.cs
+++ b/demo/Semi.Avalonia.Demo/Constant/ColorTokens.cs
@@ -5,8 +5,8 @@ namespace Semi.Avalonia.Demo.Constant;
 
 public static class ColorTokens
 {
-    public static IReadOnlyList<Tuple<string, string>> PrimaryTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> PrimaryTokens { get; } =
+    [
         new("SemiColorPrimary", "Primary"),
         new("SemiColorPrimaryPointerover", "Primary Pointerover"),
         new("SemiColorPrimaryActive", "Primary Active"),
@@ -14,130 +14,130 @@ public static class ColorTokens
         new("SemiColorPrimaryLight", "Primary Light"),
         new("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
         new("SemiColorPrimaryLightActive", "Primary Light Active"),
-    };
+    ];
 
-    public static IReadOnlyList<Tuple<string, string>> SecondaryTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> SecondaryTokens { get; } =
+    [
         new("SemiColorSecondary", "Secondary"),
         new("SemiColorSecondaryPointerover", "Secondary Pointerover"),
         new("SemiColorSecondaryActive", "Secondary Active"),
         new("SemiColorSecondaryDisabled", "Secondary Disabled"),
         new("SemiColorSecondaryLight", "Secondary Light"),
         new("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"),
-        new("SemiColorSecondaryLightActive", "Secondary Light Active"),
-    };
+        new("SemiColorSecondaryLightActive", "Secondary Light Active")
+    ];
 
-    public static IReadOnlyList<Tuple<string, string>> TertiaryTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> TertiaryTokens { get; } =
+    [
         new("SemiColorTertiary", "Tertiary"),
         new("SemiColorTertiaryPointerover", "Tertiary Pointerover"),
         new("SemiColorTertiaryActive", "Tertiary Active"),
         new("SemiColorTertiaryLight", "Tertiary Light"),
         new("SemiColorTertiaryLightPointerover", "Tertiary Light Pointerover"),
-        new("SemiColorTertiaryLightActive", "Tertiary Light Active"),
-    };
+        new("SemiColorTertiaryLightActive", "Tertiary Light Active")
+    ];
 
-    public static IReadOnlyList<Tuple<string, string>> InformationTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> InformationTokens { get; } =
+    [
         new("SemiColorInformation", "Information"),
         new("SemiColorInformationPointerover", "Information Pointerover"),
         new("SemiColorInformationActive", "Information Active"),
         new("SemiColorInformationDisabled", "Information Disabled"),
         new("SemiColorInformationLight", "Information Light"),
         new("SemiColorInformationLightPointerover", "Information Light Pointerover"),
-        new("SemiColorInformationLightActive", "Information Light Active"),
-    };
+        new("SemiColorInformationLightActive", "Information Light Active")
+    ];
 
-    public static IReadOnlyList<Tuple<string, string>> SuccessTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> SuccessTokens { get; } =
+    [
         new("SemiColorSuccess", "Success"),
         new("SemiColorSuccessPointerover", "Success Pointerover"),
         new("SemiColorSuccessActive", "Success Active"),
         new("SemiColorSuccessDisabled", "Success Disabled"),
         new("SemiColorSuccessLight", "Success Light"),
         new("SemiColorSuccessLightPointerover", "Success Light Pointerover"),
-        new("SemiColorSuccessLightActive", "Success Light Active"),
-    };
+        new("SemiColorSuccessLightActive", "Success Light Active")
+    ];
 
-    public static IReadOnlyList<Tuple<string, string>> WarningTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> WarningTokens { get; } =
+    [
         new("SemiColorWarning", "Warning"),
         new("SemiColorWarningPointerover", "Warning Pointerover"),
         new("SemiColorWarningActive", "Warning Active"),
         new("SemiColorWarningLight", "Warning Light"),
         new("SemiColorWarningLightPointerover", "Warning Light Pointerover"),
-        new("SemiColorWarningLightActive", "Warning Light Active"),
-    };
+        new("SemiColorWarningLightActive", "Warning Light Active")
+    ];
 
-    public static IReadOnlyList<Tuple<string, string>> DangerTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> DangerTokens { get; } =
+    [
         new("SemiColorDanger", "Danger"),
         new("SemiColorDangerPointerover", "Danger Pointerover"),
         new("SemiColorDangerActive", "Danger Active"),
         new("SemiColorDangerLight", "Danger Light"),
         new("SemiColorDangerLightPointerover", "Danger Light Pointerover"),
-        new("SemiColorDangerLightActive", "Danger Light Active"),
-    };
+        new("SemiColorDangerLightActive", "Danger Light Active")
+    ];
 
-    public static IReadOnlyList<Tuple<string, string>> TextTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> TextTokens { get; } =
+    [
         new("SemiColorText0", "Text 0"),
         new("SemiColorText1", "Text 1"),
         new("SemiColorText2", "Text 2"),
-        new("SemiColorText3", "Text 3"),
-    };
+        new("SemiColorText3", "Text 3")
+    ];
 
-    public static IReadOnlyList<Tuple<string, string>> LinkTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> LinkTokens { get; } =
+    [
         new("SemiColorLink", "Link"),
         new("SemiColorLinkPointerover", "Link Pointerover"),
         new("SemiColorLinkActive", "Link Active"),
-        new("SemiColorLinkVisited", "Link Visited"),
-    };
+        new("SemiColorLinkVisited", "Link Visited")
+    ];
 
-    public static IReadOnlyList<Tuple<string, string>> BackgroundTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> BackgroundTokens { get; } =
+    [
         new("SemiColorBackground0", "Background 0"),
         new("SemiColorBackground1", "Background 1"),
         new("SemiColorBackground2", "Background 2"),
         new("SemiColorBackground3", "Background 3"),
-        new("SemiColorBackground4", "Background 4"),
-    };
+        new("SemiColorBackground4", "Background 4")
+    ];
 
-    public static IReadOnlyList<Tuple<string, string>> FillTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> FillTokens { get; } =
+    [
         new("SemiColorFill0", "Fill 0"),
         new("SemiColorFill1", "Fill 1"),
-        new("SemiColorFill2", "Fill 2"),
-    };
+        new("SemiColorFill2", "Fill 2")
+    ];
 
-    public static IReadOnlyList<Tuple<string, string>> BorderTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> BorderTokens { get; } =
+    [
         new("SemiColorBorder", "Border"),
-        new("SemiColorFocusBorder", "Focus Border"),
-    };
+        new("SemiColorFocusBorder", "Focus Border")
+    ];
 
-    public static IReadOnlyList<Tuple<string, string>> DisabledTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> DisabledTokens { get; } =
+    [
         new("SemiColorDisabledText", "Disabled Text"),
         new("SemiColorDisabledBorder", "Disabled Border"),
         new("SemiColorDisabledBackground", "Disabled Background"),
-        new("SemiColorDisabledFill", "Disabled Fill"),
-    };
+        new("SemiColorDisabledFill", "Disabled Fill")
+    ];
 
-    public static IReadOnlyList<Tuple<string, string>> OtherTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> OtherTokens { get; } =
+    [
         new("SemiColorWhite", "White"),
         new("SemiColorBlack", "Black"),
         new("SemiColorNavBackground", "Navigation Background"),
         new("SemiColorOverlayBackground", "Overlay Background"),
         new("SemiColorHighlightBackground", "Highlight Background"),
-        new("SemiColorHighlight", "Highlight Text"),
-    };
+        new("SemiColorHighlight", "Highlight Text")
+    ];
 
-    public static IReadOnlyList<Tuple<string, string>> ShadowTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> ShadowTokens { get; } =
+    [
         new("SemiColorShadow", "Shadow"),
-        new("SemiShadowElevated", "Shadow Elevated"),
-    };
+        new("SemiShadowElevated", "Shadow Elevated")
+    ];
 }
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/AboutUs.axaml b/demo/Semi.Avalonia.Demo/Pages/AboutUs.axaml
index c8b7ad6..6fa1c0b 100644
--- a/demo/Semi.Avalonia.Demo/Pages/AboutUs.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/AboutUs.axaml
@@ -6,8 +6,8 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:iri="https://irihi.tech/shared"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
-    x:DataType="pages:AboutUsViewModel"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    x:DataType="vm:AboutUsViewModel"
     x:CompileBindings="True"
     d:DesignHeight="450"
     d:DesignWidth="800"
diff --git a/demo/Semi.Avalonia.Demo/Pages/AboutUs.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/AboutUs.axaml.cs
index 0f945aa..bbdabcd 100644
--- a/demo/Semi.Avalonia.Demo/Pages/AboutUs.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/AboutUs.axaml.cs
@@ -1,12 +1,6 @@
-using System;
-using System.Collections.Generic;
-using System.Threading.Tasks;
-using System.Windows.Input;
 using Avalonia.Controls;
 using Avalonia.Interactivity;
-using Avalonia.Platform.Storage;
-using CommunityToolkit.Mvvm.ComponentModel;
-using CommunityToolkit.Mvvm.Input;
+using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -27,31 +21,4 @@ public partial class AboutUs : UserControl
             vm.Launcher = launcher;
         }
     }
-}
-
-public partial class AboutUsViewModel : ObservableObject
-{
-    public ICommand NavigateCommand { get; set; }
-
-    internal ILauncher? Launcher { get; set; }
-
-    public AboutUsViewModel()
-    {
-        NavigateCommand = new AsyncRelayCommand<string>(OnNavigateAsync);
-    }
-
-    private static readonly IReadOnlyDictionary<string, string> _keyToUrlMapping = new Dictionary<string, string>()
-    {
-        ["semi"] = "https://github.com/irihitech/Semi.Avalonia",
-        ["ursa"] = "https://github.com/irihitech/Ursa.Avalonia",
-        ["mantra"] = "https://www.bilibili.com/video/BV15pfKYbEEQ",
-    };
-
-    private async Task OnNavigateAsync(string? arg)
-    {
-        if (Launcher is not null && arg is not null && _keyToUrlMapping.TryGetValue(arg.ToLower(), out var uri))
-        {
-            await Launcher.LaunchUriAsync(new Uri(uri));
-        }
-    }
 }
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml
index 7fc2efb..bb33519 100644
--- a/demo/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml
@@ -3,15 +3,15 @@
     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:Semi.Avalonia.Demo.Pages"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     d:DesignHeight="450"
     d:DesignWidth="800"
     x:CompileBindings="False"
-    x:DataType="local:AutoCompleteBoxDemoViewModel"
+    x:DataType="vm:AutoCompleteBoxDemoViewModel"
     mc:Ignorable="d">
     <Design.DataContext>
-        <local:AutoCompleteBoxDemoViewModel />
+        <vm:AutoCompleteBoxDemoViewModel />
     </Design.DataContext>
     <StackPanel HorizontalAlignment="Left" Spacing="20">
         <StackPanel.Styles>
@@ -21,7 +21,7 @@
                     <Binding Path="States" />
                 </Setter>
                 <Setter Property="ItemTemplate">
-                    <DataTemplate DataType="local:StateData">
+                    <DataTemplate DataType="vm:StateData">
                         <TextBlock Text="{Binding Name}" />
                     </DataTemplate>
                 </Setter>
diff --git a/demo/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml.cs
index 7915aaf..cbc46a5 100644
--- a/demo/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml.cs
@@ -1,7 +1,5 @@
-using System.Collections.Generic;
-using System.Collections.ObjectModel;
 using Avalonia.Controls;
-using CommunityToolkit.Mvvm.ComponentModel;
+using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -12,85 +10,4 @@ public partial class AutoCompleteBoxDemo : UserControl
         InitializeComponent();
         this.DataContext = new AutoCompleteBoxDemoViewModel();
     }
-}
-
-public class AutoCompleteBoxDemoViewModel : ObservableObject
-{
-    public ObservableCollection<StateData> States { get; set; }
-
-    public AutoCompleteBoxDemoViewModel()
-    {
-        States = new ObservableCollection<StateData>(GetStates());
-    }
-
-    private static List<StateData> GetStates()
-    {
-        return new List<StateData>
-        {
-            new StateData("Alabama", "AL", "Montgomery"),
-            new StateData("Alaska", "AK", "Juneau"),
-            new StateData("Arizona", "AZ", "Phoenix"),
-            new StateData("Arkansas", "AR", "Little Rock"),
-            new StateData("California", "CA", "Sacramento"),
-            new StateData("Colorado", "CO", "Denver"),
-            new StateData("Connecticut", "CT", "Hartford"),
-            new StateData("Delaware", "DE", "Dover"),
-            new StateData("Florida", "FL", "Tallahassee"),
-            new StateData("Georgia", "GA", "Atlanta"),
-            new StateData("Hawaii", "HI", "Honolulu"),
-            new StateData("Idaho", "ID", "Boise"),
-            new StateData("Illinois", "IL", "Springfield"),
-            new StateData("Indiana", "IN", "Indianapolis"),
-            new StateData("Iowa", "IA", "Des Moines"),
-            new StateData("Kansas", "KS", "Topeka"),
-            new StateData("Kentucky", "KY", "Frankfort"),
-            new StateData("Louisiana", "LA", "Baton Rouge"),
-            new StateData("Maine", "ME", "Augusta"),
-            new StateData("Maryland", "MD", "Annapolis"),
-            new StateData("Massachusetts", "MA", "Boston"),
-            new StateData("Michigan", "MI", "Lansing"),
-            new StateData("Minnesota", "MN", "St. Paul"),
-            new StateData("Mississippi", "MS", "Jackson"),
-            new StateData("Missouri", "MO", "Jefferson City"),
-            new StateData("Montana", "MT", "Helena"),
-            new StateData("Nebraska", "NE", "Lincoln"),
-            new StateData("Nevada", "NV", "Carson City"),
-            new StateData("New Hampshire", "NH", "Concord"),
-            new StateData("New Jersey", "NJ", "Trenton"),
-            new StateData("New Mexico", "NM", "Santa Fe"),
-            new StateData("New York", "NY", "Albany"),
-            new StateData("North Carolina", "NC", "Raleigh"),
-            new StateData("North Dakota", "ND", "Bismarck"),
-            new StateData("Ohio", "OH", "Columbus"),
-            new StateData("Oklahoma", "OK", "Oklahoma City"),
-            new StateData("Oregon", "OR", "Salem"),
-            new StateData("Pennsylvania", "PA", "Harrisburg"),
-            new StateData("Rhode Island", "RI", "Providence"),
-            new StateData("South Carolina", "SC", "Columbia"),
-            new StateData("South Dakota", "SD", "Pierre"),
-            new StateData("Tennessee", "TN", "Nashville"),
-            new StateData("Texas", "TX", "Austin"),
-            new StateData("Utah", "UT", "Salt Lake City"),
-            new StateData("Vermont", "VT", "Montpelier"),
-            new StateData("Virginia", "VA", "Richmond"),
-            new StateData("Washington", "WA", "Olympia"),
-            new StateData("West Virginia", "WV", "Charleston"),
-            new StateData("Wisconsin", "WI", "Madison"),
-            new StateData("Wyoming", "WY", "Cheyenne"),
-        };
-    }
-}
-
-public class StateData
-{
-    public string Name { get; private set; }
-    public string Abbreviation { get; private set; }
-    public string Capital { get; private set; }
-
-    public StateData(string name, string abbreviation, string capital)
-    {
-        Name = name;
-        Abbreviation = abbreviation;
-        Capital = capital;
-    }
 }
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
index 993795b..673dc3d 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
@@ -4,12 +4,12 @@
     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:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     d:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
     <Design.DataContext>
-        <pages:ComboBoxDemoViewModel />
+        <vm:ComboBoxDemoViewModel />
     </Design.DataContext>
     <StackPanel Spacing="20">
         <StackPanel.Styles>
diff --git a/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml.cs
index 3c8cba2..a92b0ed 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml.cs
@@ -1,6 +1,5 @@
-using System.Collections.ObjectModel;
 using Avalonia.Controls;
-using CommunityToolkit.Mvvm.ComponentModel;
+using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -11,9 +10,4 @@ public partial class ComboBoxDemo : UserControl
         InitializeComponent();
         this.DataContext = new ComboBoxDemoViewModel();
     }
-}
-
-public class ComboBoxDemoViewModel : ObservableObject
-{
-    public ObservableCollection<string> Items { get; set; } = ["Ding", "Otter", "Husky", "Mr.17", "Cass"];
 }
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/RefreshContainerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/RefreshContainerDemo.axaml
index 5c47465..0de521a 100644
--- a/demo/Semi.Avalonia.Demo/Pages/RefreshContainerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/RefreshContainerDemo.axaml
@@ -4,10 +4,10 @@
     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:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    x:DataType="pages:RefreshContainerDemoViewModel"
+    x:DataType="vm:RefreshContainerDemoViewModel"
     x:CompileBindings="True"
     mc:Ignorable="d">
     <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Top">
diff --git a/demo/Semi.Avalonia.Demo/Pages/RefreshContainerDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/RefreshContainerDemo.axaml.cs
index 7e13123..9cd7629 100644
--- a/demo/Semi.Avalonia.Demo/Pages/RefreshContainerDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/RefreshContainerDemo.axaml.cs
@@ -1,8 +1,5 @@
-using System.Collections.ObjectModel;
-using System.Linq;
-using System.Threading.Tasks;
 using Avalonia.Controls;
-using CommunityToolkit.Mvvm.ComponentModel;
+using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -13,34 +10,14 @@ public partial class RefreshContainerDemo : UserControl
     public RefreshContainerDemo()
     {
         InitializeComponent();
-
         _viewModel = new RefreshContainerDemoViewModel();
-
         DataContext = _viewModel;
     }
 
     private async void RefreshContainerPage_RefreshRequested(object? sender, RefreshRequestedEventArgs e)
     {
         var deferral = e.GetDeferral();
-
         await _viewModel.AddToTop();
-
         deferral.Complete();
     }
-}
-
-public class RefreshContainerDemoViewModel : ObservableObject
-{
-    public ObservableCollection<string> Items { get; }
-
-    public RefreshContainerDemoViewModel()
-    {
-        Items = new ObservableCollection<string>(Enumerable.Range(1, 200).Select(i => $"Item {i}"));
-    }
-
-    public async Task AddToTop()
-    {
-        await Task.Delay(1000);
-        Items.Insert(0, $"Item {200 - Items.Count}");
-    }
 }
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
index a16ade3..21ac243 100644
--- a/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
@@ -4,12 +4,12 @@
     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:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     d:DesignHeight="1000"
     d:DesignWidth="800"
     mc:Ignorable="d">
     <Design.DataContext>
-        <pages:SplitViewDemoViewModel />
+        <vm:SplitViewDemoViewModel />
     </Design.DataContext>
     <Border>
         <Grid ColumnDefinitions="*,400">
@@ -49,7 +49,7 @@
                         Grid.Row="3" Grid.Column="1"
                         Name="DisplayModeSelector"
                         HorizontalAlignment="Stretch"
-                        ItemsSource="{x:Static pages:SplitViewDemoViewModel.DisplayModes}"
+                        ItemsSource="{x:Static vm:SplitViewDemoViewModel.DisplayModes}"
                         SelectedItem="{x:Static SplitViewDisplayMode.CompactInline}" />
 
                     <Label
diff --git a/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml.cs
index 84108b7..2a3e55c 100644
--- a/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml.cs
@@ -1,6 +1,5 @@
-using System.Collections.ObjectModel;
 using Avalonia.Controls;
-using CommunityToolkit.Mvvm.ComponentModel;
+using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -11,28 +10,4 @@ public partial class SplitViewDemo : UserControl
         InitializeComponent();
         this.DataContext = new SplitViewDemoViewModel();
     }
-}
-
-public class SplitViewDemoViewModel : ObservableObject
-{
-    public ObservableCollection<string> Songs { get; set; } =
-    [
-        "320万年前",
-        "隐德来希",
-        "孔明",
-        "锦鲤卟噜噜",
-        "指鹿为马",
-        "热带季风Remix",
-        "加州梦境",
-        "渐近自由",
-        "世界所有的烂漫",
-    ];
-
-    public static ObservableCollection<SplitViewDisplayMode> DisplayModes { get; set; } =
-    [
-        SplitViewDisplayMode.Inline,
-        SplitViewDisplayMode.CompactInline,
-        SplitViewDisplayMode.Overlay,
-        SplitViewDisplayMode.CompactOverlay,
-    ];
 }
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/ViewModels/AboutUsViewModel.cs b/demo/Semi.Avalonia.Demo/ViewModels/AboutUsViewModel.cs
new file mode 100644
index 0000000..153f537
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/ViewModels/AboutUsViewModel.cs
@@ -0,0 +1,37 @@
+using System;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using System.Windows.Input;
+using Avalonia.Platform.Storage;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public partial class AboutUsViewModel : ObservableObject
+{
+    public ICommand NavigateCommand { get; set; }
+
+    internal ILauncher? Launcher { get; set; }
+
+    public AboutUsViewModel()
+    {
+        NavigateCommand = new AsyncRelayCommand<string>(OnNavigateAsync);
+    }
+
+    private static readonly IReadOnlyDictionary<string, string> _keyToUrlMapping = new Dictionary<string, string>()
+    {
+        ["semi"] = "https://github.com/irihitech/Semi.Avalonia",
+        ["ursa"] = "https://github.com/irihitech/Ursa.Avalonia",
+        ["mantra"] = "https://www.bilibili.com/video/BV15pfKYbEEQ",
+        ["huska"] = "https://www.bilibili.com/video/BV1knj1zWE4A",
+    };
+
+    private async Task OnNavigateAsync(string? arg)
+    {
+        if (Launcher is not null && arg is not null && _keyToUrlMapping.TryGetValue(arg.ToLower(), out var uri))
+        {
+            await Launcher.LaunchUriAsync(new Uri(uri));
+        }
+    }
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/ViewModels/AutoCompleteBoxDemoViewModel.cs b/demo/Semi.Avalonia.Demo/ViewModels/AutoCompleteBoxDemoViewModel.cs
new file mode 100644
index 0000000..2a01937
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/ViewModels/AutoCompleteBoxDemoViewModel.cs
@@ -0,0 +1,68 @@
+using System.Collections.ObjectModel;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class AutoCompleteBoxDemoViewModel : ObservableObject
+{
+    public ObservableCollection<StateData> States { get; set; } =
+    [
+        new("Alabama", "AL", "Montgomery"),
+        new("Alaska", "AK", "Juneau"),
+        new("Arizona", "AZ", "Phoenix"),
+        new("Arkansas", "AR", "Little Rock"),
+        new("California", "CA", "Sacramento"),
+        new("Colorado", "CO", "Denver"),
+        new("Connecticut", "CT", "Hartford"),
+        new("Delaware", "DE", "Dover"),
+        new("Florida", "FL", "Tallahassee"),
+        new("Georgia", "GA", "Atlanta"),
+        new("Hawaii", "HI", "Honolulu"),
+        new("Idaho", "ID", "Boise"),
+        new("Illinois", "IL", "Springfield"),
+        new("Indiana", "IN", "Indianapolis"),
+        new("Iowa", "IA", "Des Moines"),
+        new("Kansas", "KS", "Topeka"),
+        new("Kentucky", "KY", "Frankfort"),
+        new("Louisiana", "LA", "Baton Rouge"),
+        new("Maine", "ME", "Augusta"),
+        new("Maryland", "MD", "Annapolis"),
+        new("Massachusetts", "MA", "Boston"),
+        new("Michigan", "MI", "Lansing"),
+        new("Minnesota", "MN", "St. Paul"),
+        new("Mississippi", "MS", "Jackson"),
+        new("Missouri", "MO", "Jefferson City"),
+        new("Montana", "MT", "Helena"),
+        new("Nebraska", "NE", "Lincoln"),
+        new("Nevada", "NV", "Carson City"),
+        new("New Hampshire", "NH", "Concord"),
+        new("New Jersey", "NJ", "Trenton"),
+        new("New Mexico", "NM", "Santa Fe"),
+        new("New York", "NY", "Albany"),
+        new("North Carolina", "NC", "Raleigh"),
+        new("North Dakota", "ND", "Bismarck"),
+        new("Ohio", "OH", "Columbus"),
+        new("Oklahoma", "OK", "Oklahoma City"),
+        new("Oregon", "OR", "Salem"),
+        new("Pennsylvania", "PA", "Harrisburg"),
+        new("Rhode Island", "RI", "Providence"),
+        new("South Carolina", "SC", "Columbia"),
+        new("South Dakota", "SD", "Pierre"),
+        new("Tennessee", "TN", "Nashville"),
+        new("Texas", "TX", "Austin"),
+        new("Utah", "UT", "Salt Lake City"),
+        new("Vermont", "VT", "Montpelier"),
+        new("Virginia", "VA", "Richmond"),
+        new("Washington", "WA", "Olympia"),
+        new("West Virginia", "WV", "Charleston"),
+        new("Wisconsin", "WI", "Madison"),
+        new("Wyoming", "WY", "Cheyenne")
+    ];
+}
+
+public class StateData(string name, string abbreviation, string capital)
+{
+    public string Name { get; private set; } = name;
+    public string Abbreviation { get; private set; } = abbreviation;
+    public string Capital { get; private set; } = capital;
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/ViewModels/ComboBoxDemoViewModel.cs b/demo/Semi.Avalonia.Demo/ViewModels/ComboBoxDemoViewModel.cs
new file mode 100644
index 0000000..7faf689
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/ViewModels/ComboBoxDemoViewModel.cs
@@ -0,0 +1,9 @@
+using System.Collections.ObjectModel;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class ComboBoxDemoViewModel : ObservableObject
+{
+    public ObservableCollection<string> Items { get; set; } = ["Ding", "Otter", "Husky", "Mr.17", "Cass"];
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/ViewModels/RefreshContainerDemoViewModel.cs b/demo/Semi.Avalonia.Demo/ViewModels/RefreshContainerDemoViewModel.cs
new file mode 100644
index 0000000..5ca6e09
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/ViewModels/RefreshContainerDemoViewModel.cs
@@ -0,0 +1,22 @@
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Threading.Tasks;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class RefreshContainerDemoViewModel : ObservableObject
+{
+    public ObservableCollection<string> Items { get; }
+
+    public RefreshContainerDemoViewModel()
+    {
+        Items = new ObservableCollection<string>(Enumerable.Range(1, 200).Select(i => $"Item {i}"));
+    }
+
+    public async Task AddToTop()
+    {
+        await Task.Delay(1000);
+        Items.Insert(0, $"Item {200 - Items.Count}");
+    }
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/ViewModels/SplitViewDemoViewModel.cs b/demo/Semi.Avalonia.Demo/ViewModels/SplitViewDemoViewModel.cs
new file mode 100644
index 0000000..a351142
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/ViewModels/SplitViewDemoViewModel.cs
@@ -0,0 +1,29 @@
+using System.Collections.ObjectModel;
+using Avalonia.Controls;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class SplitViewDemoViewModel : ObservableObject
+{
+    public ObservableCollection<string> Songs { get; set; } =
+    [
+        "320万年前",
+        "隐德来希",
+        "孔明",
+        "锦鲤卟噜噜",
+        "指鹿为马",
+        "热带季风Remix",
+        "加州梦境",
+        "渐近自由",
+        "世界所有的烂漫",
+    ];
+
+    public static ObservableCollection<SplitViewDisplayMode> DisplayModes { get; set; } =
+    [
+        SplitViewDisplayMode.Inline,
+        SplitViewDisplayMode.CompactInline,
+        SplitViewDisplayMode.Overlay,
+        SplitViewDisplayMode.CompactOverlay,
+    ];
+}
\ No newline at end of file