Merge branch 'main' into release

Merge pull request #250 from irihitech/upgrade
Upgrade to 11.0.1.
2026-03-03 00:00:55 +08:00 · 2023-08-30 13:50:16 +08:00 · 2023-08-30 13:38:44 +08:00 · 2023-08-30 11:35:01 +08:00 · 2023-08-30 00:40:31 +08:00 · 2023-08-30 00:34:51 +08:00
214 changed files with 5258 additions and 2830 deletions
--- a/.github/workflows/Pack.yml
+++ b/.github/workflows/Pack.yml
@@ -16,11 +16,14 @@ jobs:
      - name: Nuget Semi.Avalonia
        run: dotnet pack ./src/Semi.Avalonia -o ./nugets

+      - name: Nuget Semi.Avalonia.ColorPicker
+        run: dotnet pack ./src/Semi.Avalonia.ColorPicker  -o ./nugets
+
      - name: Nuget Semi.Avalonia.DataGrid
        run: dotnet pack ./src/Semi.Avalonia.DataGrid  -o ./nugets

-      - name: Nuget Semi.Avalonia.ColorPicker
-        run: dotnet pack ./src/Semi.Avalonia.ColorPicker  -o ./nugets
+      - name: Nuget Semi.Avalonia.TreeDataGrid
+        run: dotnet pack ./src/Semi.Avalonia.TreeDataGrid  -o ./nugets

      - name: Desktop
        run: dotnet publish ./demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true --self-contained true
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,50 @@
+name: Deploy to GitHub Pages
+
+env:
+    PROJECT_PATH: demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj
+    OUTPUT_PATH: demo/Semi.Avalonia.Demo.Web/bin/Debug/net7.0/browser-wasm/AppBundle
+on:
+  push:
+    branches: [ "deploy" ]
+  pull_request:
+    branches: [ "deploy" ]
+
+jobs:
+  deploy-to-github-pages:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+
+    - name: Setup .NET Core SDK
+      uses: actions/setup-dotnet@v1.9.0
+
+    - name: Install wasm-tools
+      run: dotnet workload install wasm-tools wasm-experimental
+
+    - name: Install DotNetCompress
+      run: dotnet tool install --global DotNetCompress --version 2.0.0 --no-cache
+
+    - name: Publish .NET Project
+      run: dotnet publish $PROJECT_PATH -c Debug -o debug --nologo
+
+    - name: Change base-tag in index.html
+      run: sed -i 's/<base href="\/" \/>/<base href="\/Semi.Avalonia\/" \/>/g' $OUTPUT_PATH/index.html
+
+    - name: copy index.html to 404.html
+      run: cp $OUTPUT_PATH/index.html $OUTPUT_PATH/404.html
+
+    - name: Compress Output using Brotli
+      run: DotNetCompress -d $OUTPUT_PATH -p "*.dll" "*.js" "*.wasm" --format br --threads 4
+
+    - name: Compress Output using GZip
+      run: DotNetCompress -d $OUTPUT_PATH -p "*.dll" "*.js" "*.wasm" --format gz --threads 4
+
+    - name: Add .nojekyll file
+      run: touch $OUTPUT_PATH/.nojekyll
+
+    - name: Commit wwwroot to GitHub Pages
+      uses: JamesIves/github-pages-deploy-action@4.1.7
+      with:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        BRANCH: gh-pages
+        FOLDER: ${{ env.OUTPUT_PATH }}
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@ Avalonia Theme inspired by Semi Design

 ## Installation
 ```bash
-dotnet add package Semi.Avalonia --version 11.0.0-rc1
+dotnet add package Semi.Avalonia --version 11.0.1
 ```
 Include Semi Design Styles in application:

@@ -21,15 +21,17 @@ Include Semi Design Styles in application:

 That's all. 

-DataGrid and ColorPicker are distributed in separated packages. Please install if you need. 
+ColorPicker, DataGrid and TreeDataGrid are distributed in separated packages. Please install if you need. 
 ```bash
-dotnet add package Semi.Avalonia.ColorPicker --version 11.0.0-rc1
-dotnet add package Semi.Avalonia.DataGrid --version 11.0.0-rc1
+dotnet add package Semi.Avalonia.ColorPicker --version 11.0.1
+dotnet add package Semi.Avalonia.DataGrid --version 11.0.1
+dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.1
 ```
 ```xaml
 <Application.Styles>
-    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
 </Application.Styles>
 ```

@@ -42,20 +44,9 @@ https://github.com/irihitech/Semi.Avalonia/releases

 | Semi Design Version | Avalonia Version |
 |:--------------------|:-----------------|
-| 11.0.0-rc1          | 11.0.0-rc1.1     |
-| 0.1.0-preview3      | 11.0-preview4    |
-| 0.1.0-preview5.x    | 11.0-preview5    |
-| 0.1.0-preview6.x    | 11.0-preview6    |
-| 0.1.0-preview7.x    | 11.0-preview7    |
-| 0.1.0-preview8.x    | 11.0-preview8    |
-
-**NOTE**
-
-Semi Avalonia theme is moving forward together with Avalonia preview versions now. So new feature/fixes are not backported to previous preview versions. If you need a feature/fix for outdated avalonia preview version, please raise an issue so we can do that for you. 
-
+| 11.0.x              | 11.0.x           |

 ## TODO
-* DataValidationErrors
 * FocusAdorner

 ## Credits
--- a/Semi.Avalonia.sln
+++ b/Semi.Avalonia.sln
@@ -26,6 +26,12 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.ColorPicker",
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.Demo.Android", "demo\Semi.Avalonia.Demo.Android\Semi.Avalonia.Demo.Android.csproj", "{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.Demo.Drm", "demo\Semi.Avalonia.Demo.Drm\Semi.Avalonia.Demo.Drm.csproj", "{86D93406-412A-4429-93B2-92AAD0407784}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.TreeDataGrid", "src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj", "{398D2998-0835-41F5-99A3-608CAB8051E2}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.TreeDataGrid.Demo", "demo\Semi.Avalonia.TreeDataGrid.Demo\Semi.Avalonia.TreeDataGrid.Demo.csproj", "{6178B545-4BB6-458C-A27C-EE11F3885D38}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -61,6 +67,18 @@ Global
 		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
 		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}.Release|Any CPU.Build.0 = Release|Any CPU
+		{86D93406-412A-4429-93B2-92AAD0407784}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{86D93406-412A-4429-93B2-92AAD0407784}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{86D93406-412A-4429-93B2-92AAD0407784}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{86D93406-412A-4429-93B2-92AAD0407784}.Release|Any CPU.Build.0 = Release|Any CPU
+		{398D2998-0835-41F5-99A3-608CAB8051E2}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{398D2998-0835-41F5-99A3-608CAB8051E2}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{398D2998-0835-41F5-99A3-608CAB8051E2}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{398D2998-0835-41F5-99A3-608CAB8051E2}.Release|Any CPU.Build.0 = Release|Any CPU
+		{6178B545-4BB6-458C-A27C-EE11F3885D38}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{6178B545-4BB6-458C-A27C-EE11F3885D38}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{6178B545-4BB6-458C-A27C-EE11F3885D38}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{6178B545-4BB6-458C-A27C-EE11F3885D38}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -70,6 +88,8 @@ Global
 		{69A2C77D-6DB7-4AE4-B179-D1F5CF5E2DF0} = {43091528-9509-43CB-A003-9C5C11E96DD6}
 		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0} = {43091528-9509-43CB-A003-9C5C11E96DD6}
 		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F} = {43091528-9509-43CB-A003-9C5C11E96DD6}
+		{86D93406-412A-4429-93B2-92AAD0407784} = {43091528-9509-43CB-A003-9C5C11E96DD6}
+		{6178B545-4BB6-458C-A27C-EE11F3885D38} = {43091528-9509-43CB-A003-9C5C11E96DD6}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {7CA41ED3-2CED-40CC-AA21-28C3B42B1E86}
--- a/demo/Semi.Avalonia.Demo.Android/MainActivity.cs
+++ b/demo/Semi.Avalonia.Demo.Android/MainActivity.cs
@@ -4,9 +4,13 @@ using Avalonia.Android;

 namespace Semi.Avalonia.Demo.Android;

-[Activity(Label = "Semi.Avalonia.Demo.Android", Icon = "@drawable/Icon", Theme = "@style/MyTheme.NoActionBar",
-    LaunchMode = LaunchMode.SingleTop, ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.ScreenSize)]
-public class MainActivity : AvaloniaMainActivity
+[Activity(
+    Label = "Semi.Avalonia",
+    Theme = "@style/MyTheme.NoActionBar",
+    Icon = "@drawable/Icon",
+    MainLauncher = true,
+    LaunchMode = LaunchMode.SingleTop,
+    ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.ScreenSize | ConfigChanges.UiMode)]
+public class MainActivity : AvaloniaMainActivity<App>
 {
-    
 }
--- a/demo/Semi.Avalonia.Demo.Android/SplashActivity.cs
+++ b/demo/Semi.Avalonia.Demo.Android/SplashActivity.cs
@@ -1,22 +0,0 @@
-using Android.App;
-using Android.Content;
-using Avalonia;
-using Avalonia.Android;
-using Application = Android.App.Application;
-
-namespace Semi.Avalonia.Demo.Android;
-
-[Activity(Theme = "@style/MyTheme.Splash", MainLauncher = true, NoHistory = true)]
-public class SplashActivity: AvaloniaMainActivity<App>
-{
-    protected override AppBuilder CustomizeAppBuilder(AppBuilder builder)
-    {
-        return base.CustomizeAppBuilder(builder);
-    }
-
-    protected override void OnResume()
-    {
-        base.OnResume();
-        StartActivity(new Intent(Application.Context, typeof(MainActivity)));
-    }
-}
--- a/demo/Semi.Avalonia.Demo.Android/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo.Android/Views/MainView.axaml
@@ -1,11 +0,0 @@
-<UserControl
-    x:Class="Semi.Avalonia.Demo.Android.Views.MainView"
-    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"
-    d:DesignHeight="450"
-    d:DesignWidth="800"
-    mc:Ignorable="d">
-    Welcome to Avalonia!
-</UserControl>
--- a/demo/Semi.Avalonia.Demo.Desktop/App.axaml
+++ b/demo/Semi.Avalonia.Demo.Desktop/App.axaml
@@ -1,13 +0,0 @@
-<Application
-    x:Class="Semi.Avalonia.Demo.Desktop.App"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Semi.Avalonia.Demo.Desktop"
-    RequestedThemeVariant="Light">
-    <Application.Styles>
-        <!--<StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />-->
-        <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
-        <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
-        <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
-    </Application.Styles>
-</Application>
--- a/demo/Semi.Avalonia.Demo.Desktop/Program.cs
+++ b/demo/Semi.Avalonia.Demo.Desktop/Program.cs
@@ -1,7 +1,9 @@
-using System;
-using Avalonia;
+using Avalonia;
 using Avalonia.Dialogs;
 using Avalonia.Media;
+using System;
+using System.Linq;
+using System.Threading;

 namespace Semi.Avalonia.Demo.Desktop;

--- a/demo/Semi.Avalonia.Demo.Drm/Program.cs
+++ b/demo/Semi.Avalonia.Demo.Drm/Program.cs
@@ -0,0 +1,59 @@
+using Avalonia;
+using Avalonia.Dialogs;
+using Avalonia.Media;
+using System;
+using System.Linq;
+using System.Threading;
+
+namespace Semi.Avalonia.Demo.Drm
+{
+    internal 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)
+        {
+            var builder = BuildAvaloniaApp();
+            builder.With(new FontManagerOptions
+            {
+                FontFallbacks = new[]
+                {
+                new FontFallback
+                {
+                    FontFamily = new FontFamily("Microsoft YaHei")
+                }
+            }
+            });
+            if (args.Contains("--drm"))
+            {
+                SilenceConsole();
+                builder.StartLinuxDrm(args: args, card: "/dev/dri/card0", scaling: 1);
+            }
+            else
+            {
+                builder.StartWithClassicDesktopLifetime(args);
+            }
+        }
+
+        // Avalonia configuration, don't remove; also used by visual designer.
+        public static AppBuilder BuildAvaloniaApp()
+            => AppBuilder.Configure<App>()
+                .UseManagedSystemDialogs()
+                .UsePlatformDetect()
+                .With(new Win32PlatformOptions())
+                .LogToTrace();
+
+        private static void SilenceConsole()
+        {
+            new Thread(() =>
+            {
+                Console.CursorVisible = false;
+                while (true)
+                    Console.ReadKey(true);
+            })
+            { IsBackground = true }.Start();
+        }
+    }
+}
--- a/demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj
+++ b/demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj
@@ -0,0 +1,22 @@
+<Project Sdk="Microsoft.NET.Sdk">
+  <PropertyGroup>
+    <OutputType>WinExe</OutputType>
+    <TargetFramework>net7.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
+    <ApplicationManifest>app.manifest</ApplicationManifest>
+  </PropertyGroup>
+
+
+  <ItemGroup>
+    <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
+    <!--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="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)" />
+  </ItemGroup>
+
+
+  <ItemGroup>
+    <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
+  </ItemGroup>
+</Project>
--- a/demo/Semi.Avalonia.Demo.Drm/app.manifest
+++ b/demo/Semi.Avalonia.Demo.Drm/app.manifest
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1">
+  <!-- This manifest is used on Windows only.
+       Don't remove it as it might cause problems with window transparency and embeded controls.
+       For more details visit https://learn.microsoft.com/en-us/windows/win32/sbscs/application-manifests -->
+  <assemblyIdentity version="1.0.0.0" name="Semi.Avalonia.Demo.Drm.Desktop"/>
+
+  <compatibility xmlns="urn:schemas-microsoft-com:compatibility.v1">
+    <application>
+      <!-- A list of the Windows versions that this application has been tested on
+           and is designed to work with. Uncomment the appropriate elements
+           and Windows will automatically select the most compatible environment. -->
+
+      <!-- Windows 10 -->
+      <supportedOS Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}" />
+    </application>
+  </compatibility>
+</assembly>
--- a/demo/Semi.Avalonia.Demo.Drm/使用方法.md
+++ b/demo/Semi.Avalonia.Demo.Drm/使用方法.md
@@ -0,0 +1,51 @@
+# DRM启动步骤
+
+(Ubuntu18.04Server版本 虚拟机测试OK)
+
+Avalonia官方参考文档：https://docs.avaloniaui.net/docs/next/guides/platforms/rpi/running-on-raspbian-lite-via-drm
+
+1.Linux端运行命令
+ sudo apt update
+ sudo apt upgrade
+ sudo reboot
+ sudo apt - get install libgbm1 libgl1 - mesa - dri libegl1 - mesa libinput10
+
+2.安装测试工具测试(出现一个彩色立方体说明环境安装完成)
+ sudo apt-get install kmscube
+ sudo kmscube
+
+3.安装.net运行时(参考网址：https://learn.microsoft.com/zh-cn/dotnet/core/install/linux?WT.mc_id=dotnet-35129-website)
+
+4.新建一个Avalonia项目，nuget里面添加Avalonia.LinuxFramebuffer包
+
+5.添加StartLinuxDrm代码(不知道怎么添加看Semi.Avalonia.Demo.Drm项目代码)
+
+6.发布程序到Linux(安装.net，怎么运行这些省略)
+            
+7.运行 ./Semi.Avalonia.Demo.Drm --drm
+
+## 报错处理：
+
+1. 报错内容
+
+>Unhandled exception. Avalonia.Markup.Xaml.XamlLoadException: No precompiled XAML found for avares://Semi.Avalonia/Themes/Light/Light.axaml (baseUri: avares://Semi.Avalonia/Themes/Index.axaml), make sure to specify x:Class and include your XAML file as AvaloniaResource
+
+ 解决方法：
+    如果使用Semi发布文件不要裁剪，如果裁剪会报错
+         
+
+2. 报错内容
+>Unhandled exception. System.TypeInitializationException: The type initializer for 'SkiaSharp.SKImageInfo' threw an exception.**
+    **--->System.DllNotFoundException: Unable to load shared library 'libSkiaSharp' or one of its dependencies.In order to help diagnose loading problems, consider setting the LD_DEBUG environment variable: liblibSkiaSharp: cannot open shared object file: No such file or directory
+    at SkiaSharp.SkiaApi.sk_colortype_get_default_8888()
+    at SkiaSharp.SKImageInfo..cctor()
+
+解决方法：
+    Linux命令行安装一下 apt-get install -y libfontconfig1
+    参考网址：https://github.com/mono/SkiaSharp/issues/509
+
+3. 报错内容
+>Permission denied
+
+解决方法：
+    sudo chmod +x ./Semi.Avalonia.Demo.Drm
--- a/demo/Semi.Avalonia.Demo.Web/App.axaml
+++ b/demo/Semi.Avalonia.Demo.Web/App.axaml
@@ -1,10 +0,0 @@
-<Application
-    x:Class="Semi.Avalonia.Demo.Web.App"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Semi.Avalonia.Demo.Web">
-    <Application.Styles>
-        <FluentTheme />
-        <StyleInclude Source="avares://Semi.Avalonia/Themes/LightTheme.axaml" />
-    </Application.Styles>
-</Application>
--- a/demo/Semi.Avalonia.Demo.Web/App.axaml.cs
+++ b/demo/Semi.Avalonia.Demo.Web/App.axaml.cs
@@ -1,23 +0,0 @@
-using Avalonia;
-using Avalonia.Controls.ApplicationLifetimes;
-using Avalonia.Markup.Xaml;
-using Semi.Avalonia.Demo.Views;
-
-namespace Semi.Avalonia.Demo.Web;
-
-public partial class App : Application
-{
-    public override void Initialize()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
-
-    public override void OnFrameworkInitializationCompleted()
-    {
-        if (ApplicationLifetime is ISingleViewApplicationLifetime singleViewPlatform)
-        {
-            singleViewPlatform.MainView = new MainView();
-        }
-        base.OnFrameworkInitializationCompleted();
-    }
-}
--- a/demo/Semi.Avalonia.Demo.Web/AppBundle/app.css
+++ b/demo/Semi.Avalonia.Demo.Web/AppBundle/app.css
@@ -1,4 +1,11 @@
-/* HTML styles for the splash screen */
+:root {
+    --sat: env(safe-area-inset-top);
+    --sar: env(safe-area-inset-right);
+    --sab: env(safe-area-inset-bottom);
+    --sal: env(safe-area-inset-left);
+}
+
+/* HTML styles for the splash screen */

 .highlight {
    color: white;
--- a/demo/Semi.Avalonia.Demo.Web/AppBundle/index.html
+++ b/demo/Semi.Avalonia.Demo.Web/AppBundle/index.html
@@ -10,7 +10,6 @@
    <link rel="modulepreload" href="./dotnet.js" />
    <link rel="modulepreload" href="./avalonia.js" />
    <link rel="stylesheet" href="./app.css" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
 </head>

 <body style="margin: 0px; overflow: hidden">
--- a/demo/Semi.Avalonia.Demo.Web/AppBundle/main.js
+++ b/demo/Semi.Avalonia.Demo.Web/AppBundle/main.js
@@ -1,5 +1,4 @@
 import { dotnet } from './dotnet.js'
-import { registerAvaloniaModule } from './avalonia.js';

 const is_browser = typeof window != "undefined";
 if (!is_browser) throw new Error(`Expected to be running in a browser`);
@@ -9,8 +8,6 @@ const dotnetRuntime = await dotnet
    .withApplicationArgumentsFromQuery()
    .create();

-await registerAvaloniaModule(dotnetRuntime);
-
 const config = dotnetRuntime.getConfig();

 await dotnetRuntime.runMainAndExit(config.mainAssemblyName, [window.location.search]);
--- a/demo/Semi.Avalonia.Demo.Web/Program.cs
+++ b/demo/Semi.Avalonia.Demo.Web/Program.cs
@@ -1,17 +1,16 @@
 using System.Runtime.Versioning;
+using System.Threading.Tasks;
 using Avalonia;
-using Avalonia.Media;
-using Semi.Avalonia.Demo.Web;
 using Avalonia.Browser;

 [assembly: SupportedOSPlatform("browser")]

+namespace Semi.Avalonia.Demo.Web;
+
 internal partial class Program
 {
-    private static void Main(string[] args)
-    {
-        BuildAvaloniaApp(); //.SetupBrowserApp("out");
-    }
+    private static async Task Main(string[] args) => await BuildAvaloniaApp()
+        .StartBrowserAppAsync("out");

    public static AppBuilder BuildAvaloniaApp()
        => AppBuilder.Configure<App>();
--- a/demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj
+++ b/demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj
@@ -10,20 +10,11 @@
        <WasmExtraFilesToDeploy Include="AppBundle\**" />
    </ItemGroup>

-    <ItemGroup>
-      <None Remove="Assets\SourceHanSansCN-Regular.otf" />
-    </ItemGroup>
-
-    <ItemGroup>
-      <AvaloniaResource Include="Assets\SourceHanSansCN-Regular.otf" />
-    </ItemGroup>
-
    <ItemGroup>
        <PackageReference Include="Avalonia.Browser" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.Themes.Fluent" Version="$(AvaloniaVersion)" />
    </ItemGroup>

    <ItemGroup>
-      <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
+        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
    </ItemGroup>
 </Project>
--- a/demo/Semi.Avalonia.Demo.Android/App.axaml
+++ b/demo/Semi.Avalonia.Demo.Android/App.axaml
@@ -1,8 +1,7 @@
 <Application
-    x:Class="Semi.Avalonia.Demo.Android.App"
+    x:Class="Semi.Avalonia.Demo.App"
    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Semi.Avalonia.Demo.Android">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Application.Styles>
        <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
        <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
--- a/demo/Semi.Avalonia.Demo.Android/App.axaml.cs
+++ b/demo/Semi.Avalonia.Demo.Android/App.axaml.cs
@@ -1,10 +1,9 @@
 using Avalonia;
-using Avalonia.Controls;
 using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Markup.Xaml;
 using Semi.Avalonia.Demo.Views;

-namespace Semi.Avalonia.Demo.Android;
+namespace Semi.Avalonia.Demo;

 public partial class App : Application
 {
@@ -15,13 +14,16 @@ public partial class App : Application

    public override void OnFrameworkInitializationCompleted()
    {
-        if (ApplicationLifetime is ISingleViewApplicationLifetime single)
+        switch (ApplicationLifetime)
        {
-            single.MainView = new MainView()
-            {
-
-            };
+            case IClassicDesktopStyleApplicationLifetime desktop:
+                desktop.MainWindow = new MainWindow();
+                break;
+            case ISingleViewApplicationLifetime singleView:
+                singleView.MainView = new MainView();
+                break;
        }
+
        base.OnFrameworkInitializationCompleted();
    }
 }
--- a/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml
@@ -17,8 +17,7 @@
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
-                Background="Gray"
-                Text="Everest" />
+                Text="A.S.I.A" />
        </ButtonSpinner>
        <ButtonSpinner
            Height="30"
@@ -30,8 +29,7 @@
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
-                Background="Gray"
-                Text="Everest" />
+                Text="A.S.I.A" />
        </ButtonSpinner>
    </StackPanel>
 </UserControl>
--- a/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml.cs
@@ -36,15 +36,20 @@ public partial class ButtonSpinnerDemo : UserControl

    private readonly string[] _mountains = new[]
    {
-        "Everest",
-        "K2 (Mount Godwin Austen)",
-        "Kangchenjunga",
-        "Lhotse",
-        "Makalu",
-        "Cho Oyu",
-        "Dhaulagiri",
-        "Manaslu",
-        "Nanga Parbat",
-        "Annapurna"
+        "A.S.I.A",
+        "饕餮人间",
+        "七步咙咚呛",
+        "大惊小怪",
+        "The ONE",
+        "以梦为马 (壮志骄阳版)",
+        "emo了",
+        "一眼万年",
+        "冲刺吧",
+        "爱的赏味期限",
+        "COSMIC ANTHEM / 手紙",
+        "世界晚安",
+        "明年也要好好长大",
+        "320万年前",
+        "W.O.R.L.D.",
    };
 }
--- a/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
@@ -47,126 +47,79 @@
                    IsThreeState="True"
                    Theme="{StaticResource SimpleCheckBox}" />
            </StackPanel>
-            <TextBlock Margin="0,16" Text="CardCheckBox" />
+            <TextBlock Text="CardCheckBox" />
            <StackPanel Orientation="Horizontal">
-                <CheckBox Width="300" Theme="{DynamicResource CardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
+                <StackPanel.Styles>
+                    <Style Selector="CheckBox">
+                        <Setter Property="Width" Value="150" />
+                        <Setter Property="Margin" Value="8" />
+                    </Style>
+                </StackPanel.Styles>
                <CheckBox
-                    Width="300"
+                    Content="Windows"
                    IsChecked="True"
-                    Theme="{DynamicResource CardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
+                    Theme="{DynamicResource CardCheckBox}" />
                <CheckBox
-                    Width="300"
+                    Content="macOS"
+                    IsChecked="True"
+                    IsEnabled="False"
+                    Theme="{DynamicResource CardCheckBox}" />
+                <CheckBox
+                    Content="Linux"
+                    IsChecked="True"
+                    Theme="{DynamicResource CardCheckBox}" />
+                <CheckBox
+                    Content="iOS"
                    IsChecked="{x:Null}"
                    IsThreeState="True"
-                    Theme="{DynamicResource CardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
+                    Theme="{DynamicResource CardCheckBox}" />
+                <CheckBox
+                    Content="Android"
+                    IsChecked="{x:Null}"
+                    IsThreeState="True"
+                    Theme="{DynamicResource CardCheckBox}" />
+                <CheckBox
+                    Content="Wasm"
+                    IsChecked="False"
+                    IsThreeState="True"
+                    Theme="{DynamicResource CardCheckBox}" />
            </StackPanel>
+            <TextBlock Text="PureCardCheckBox" />
            <StackPanel Orientation="Horizontal">
+                <StackPanel.Styles>
+                    <Style Selector="CheckBox">
+                        <Setter Property="Width" Value="150" />
+                        <Setter Property="Margin" Value="8" />
+                    </Style>
+                </StackPanel.Styles>
                <CheckBox
-                    Width="300"
-                    IsEnabled="False"
-                    Theme="{DynamicResource CardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
+                    Content="Windows"
+                    IsChecked="True"
+                    Theme="{DynamicResource PureCardCheckBox}" />
                <CheckBox
-                    Width="300"
+                    Content="macOS"
                    IsChecked="True"
                    IsEnabled="False"
-                    Theme="{DynamicResource CardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
+                    Theme="{DynamicResource PureCardCheckBox}" />
                <CheckBox
-                    Width="300"
-                    IsChecked="{x:Null}"
-                    IsEnabled="False"
-                    IsThreeState="True"
-                    Theme="{DynamicResource CardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
-            </StackPanel>
-            <TextBlock Margin="0,16" Text="PureCardCheckBox" />
-            <StackPanel Orientation="Horizontal">
-                <CheckBox Width="300" Theme="{DynamicResource PureCardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
-                <CheckBox
-                    Width="300"
+                    Content="Linux"
                    IsChecked="True"
-                    Theme="{DynamicResource PureCardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
+                    Theme="{DynamicResource PureCardCheckBox}" />
                <CheckBox
-                    Width="300"
+                    Content="iOS"
                    IsChecked="{x:Null}"
-                    IsEnabled="True"
                    IsThreeState="True"
-                    Theme="{DynamicResource PureCardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
-            </StackPanel>
-            <StackPanel Orientation="Horizontal">
+                    Theme="{DynamicResource PureCardCheckBox}" />
                <CheckBox
-                    Width="300"
-                    IsEnabled="False"
-                    Theme="{DynamicResource PureCardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
-                <CheckBox
-                    Width="300"
-                    IsChecked="True"
-                    IsEnabled="False"
-                    Theme="{DynamicResource PureCardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
-                <CheckBox
-                    Width="300"
+                    Content="Android"
                    IsChecked="{x:Null}"
-                    IsEnabled="False"
                    IsThreeState="True"
-                    Theme="{DynamicResource PureCardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
+                    Theme="{DynamicResource PureCardCheckBox}" />
+                <CheckBox
+                    Content="Wasm"
+                    IsChecked="False"
+                    IsThreeState="True"
+                    Theme="{DynamicResource PureCardCheckBox}" />
            </StackPanel>
        </StackPanel>
    </ScrollViewer>
--- a/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
@@ -9,45 +9,59 @@
    mc:Ignorable="d">
    <StackPanel Spacing="20">
        <ComboBox Width="150">
-            <ComboBoxItem>AAA</ComboBoxItem>
-            <ComboBoxItem>BBB</ComboBoxItem>
-            <ComboBoxItem>CCC</ComboBoxItem>
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
        </ComboBox>
        <ComboBox Width="150" PlaceholderText="Please Select">
-            <ComboBoxItem>AAA</ComboBoxItem>
-            <ComboBoxItem>BBB</ComboBoxItem>
-            <ComboBoxItem>CCC</ComboBoxItem>
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
        </ComboBox>
        <ComboBox Width="150" IsEnabled="False">
-            <ComboBoxItem>AAA</ComboBoxItem>
-            <ComboBoxItem>BBB</ComboBoxItem>
-            <ComboBoxItem>CCC</ComboBoxItem>
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
        </ComboBox>
        <ComboBox
            Width="150"
            Classes="Large"
            IsEnabled="False">
-            <ComboBoxItem>AAA</ComboBoxItem>
-            <ComboBoxItem>BBB</ComboBoxItem>
-            <ComboBoxItem>CCC</ComboBoxItem>
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
        </ComboBox>
        <ComboBox Width="150" Classes="Small">
-            <ComboBoxItem>AAA</ComboBoxItem>
-            <ComboBoxItem>BBB</ComboBoxItem>
-            <ComboBoxItem>CCC</ComboBoxItem>
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
        </ComboBox>
        <ComboBox Width="150" Classes="Bordered">
-            <ComboBoxItem>AAA</ComboBoxItem>
-            <ComboBoxItem>BBB</ComboBoxItem>
-            <ComboBoxItem>CCC</ComboBoxItem>
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
        </ComboBox>
        <ComboBox
            Width="150"
            Classes="Bordered"
            IsEnabled="False">
-            <ComboBoxItem>AAA</ComboBoxItem>
-            <ComboBoxItem>BBB</ComboBoxItem>
-            <ComboBoxItem>CCC</ComboBoxItem>
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
        </ComboBox>
    </StackPanel>
 </UserControl>
--- a/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml
@@ -5,122 +5,95 @@
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:Semi.Avalonia.Demo.Pages"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels;assembly=Semi.Avalonia.Demo"
    d:DesignHeight="450"
    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:DataGridDemoViewModel"
    mc:Ignorable="d">
    <TabControl>
        <TabItem Header="DataGrid">
-            <DockPanel>
-                <CheckBox
-                    x:Name="ShowGDP"
-                    Content="Toggle GDP Column Visibility"
-                    DockPanel.Dock="Top"
-                    IsChecked="True" />
-                <DataGrid
-                    Name="dataGrid1"
-                    Margin="12"
-                    CanUserReorderColumns="True"
-                    CanUserResizeColumns="True"
-                    CanUserSortColumns="True"
-                    HeadersVisibility="All">
-                    <DataGrid.Columns>
-                        <!--  Using HeaderTemplate  -->
-                        <DataGridTextColumn
-                            Width="6*"
-                            x:DataType="local:Country"
-                            Binding="{Binding Name}"
-                            Header="Country or Region" />
-                        <DataGridTextColumn
-                            Width="4*"
-                            x:DataType="local:Country"
-                            Binding="{Binding Region}"
-                            Header="Region" />
-                        <DataGridTextColumn
-                            Width="3*"
-                            x:DataType="local:Country"
-                            Binding="{Binding Population}"
-                            Header="Population" />
-                        <DataGridTextColumn
-                            Width="3*"
-                            x:DataType="local:Country"
-                            Binding="{Binding Area}"
-                            Header="Area" />
-                        <DataGridTextColumn
-                            Width="3*"
-                            MinWidth="200"
-                            x:DataType="local:Country"
-                            Binding="{Binding GDP}"
-                            Header="GDP"
-                            IsVisible="{Binding #ShowGDP.IsChecked}" />
-                    </DataGrid.Columns>
-                    <DataGrid.CellTheme>
-                        <ControlTheme BasedOn="{StaticResource {x:Type DataGridCell}}" TargetType="DataGridCell">
-                            <ControlTheme.Children>
-                                <Style Selector="^:nth-child(1)">
-                                    <Setter Property="FontWeight" Value="Bold" />
-                                </Style>
-                            </ControlTheme.Children>
-                        </ControlTheme>
-                    </DataGrid.CellTheme>
-                    <DataGrid.ColumnHeaderTheme>
-                        <ControlTheme BasedOn="{StaticResource {x:Type DataGridColumnHeader}}" TargetType="DataGridColumnHeader">
-                            <ControlTheme.Children>
-                                <Style Selector="^:nth-child(1)">
-                                    <Setter Property="FontWeight" Value="Bold" />
-                                </Style>
-                            </ControlTheme.Children>
-                        </ControlTheme>
-                    </DataGrid.ColumnHeaderTheme>
-                </DataGrid>
-            </DockPanel>
-        </TabItem>
-        <TabItem Header="Grouping">
-            <DataGrid Name="dataGridGrouping" Margin="12">
+            <DataGrid
+                Margin="8"
+                CanUserReorderColumns="True"
+                CanUserResizeColumns="True"
+                CanUserSortColumns="True"
+                HeadersVisibility="All"
+                IsReadOnly="True"
+                ItemsSource="{Binding GridData1}">
                <DataGrid.Columns>
                    <DataGridTextColumn
                        Width="6*"
-                        x:DataType="local:Country"
-                        Binding="{Binding Name}"
-                        Header="Country or Region" />
+                        x:DataType="vm:Song"
+                        Binding="{Binding Title}"
+                        Header="Title" />
                    <DataGridTextColumn
-                        Width="4*"
-                        x:DataType="local:Country"
-                        Binding="{Binding Region}"
-                        Header="Region" />
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Artist}"
+                        Header="Artist" />
                    <DataGridTextColumn
-                        Width="3*"
-                        x:DataType="local:Country"
-                        Binding="{Binding Population}"
-                        DisplayIndex="3"
-                        Header="Population" />
-                    <DataGridTextColumn
-                        Width="3*"
-                        x:DataType="local:Country"
-                        Binding="{Binding Area}"
-                        DisplayIndex="2"
-                        Header="Area" />
-                    <DataGridTextColumn
-                        Width="3*"
-                        x:DataType="local:Country"
-                        Binding="{Binding GDP}"
-                        Header="GDP" />
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Album}"
+                        Header="Album" />
+                    <DataGridTemplateColumn Header="Duration" SortMemberPath="Duration">
+                        <DataGridTemplateColumn.CellTemplate>
+                            <DataTemplate>
+                                <TextBlock
+                                    Margin="8,0,0,0"
+                                    VerticalAlignment="Center"
+                                    Text="{Binding Duration}" />
+                            </DataTemplate>
+                        </DataGridTemplateColumn.CellTemplate>
+                    </DataGridTemplateColumn>
+                </DataGrid.Columns>
+
+            </DataGrid>
+        </TabItem>
+        <TabItem Header="Grouping">
+            <DataGrid
+                Margin="8"
+                CanUserReorderColumns="True"
+                CanUserResizeColumns="True"
+                CanUserSortColumns="True"
+                HeadersVisibility="All"
+                IsReadOnly="True"
+                ItemsSource="{Binding GridData2}">
+                <DataGrid.Columns>
+                    <DataGridTextColumn
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Title}"
+                        Header="Title" />
+                    <DataGridTextColumn
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Artist}"
+                        Header="Artist" />
+                    <DataGridTextColumn
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Album}"
+                        Header="Album" />
+                    <DataGridTemplateColumn
+                        x:DataType="vm:Song"
+                        Header="Duration"
+                        SortMemberPath="Duration">
+                        <DataGridTemplateColumn.CellTemplate>
+                            <DataTemplate x:DataType="vm:Song">
+                                <TextBlock
+                                    Margin="8,0,0,0"
+                                    VerticalAlignment="Center"
+                                    Text="{Binding Duration}" />
+                            </DataTemplate>
+                        </DataGridTemplateColumn.CellTemplate>
+                    </DataGridTemplateColumn>
                </DataGrid.Columns>
-                <DataGrid.RowTheme>
-                    <ControlTheme BasedOn="{StaticResource {x:Type DataGridRow}}" TargetType="DataGridRow">
-                        <ControlTheme.Children>
-                            <Style Selector="^:nth-child(5n+3)">
-                                <Setter Property="Foreground" Value="Red" />
-                            </Style>
-                            <Style Selector="^:nth-last-child(5n+1)">
-                                <Setter Property="Foreground" Value="Blue" />
-                            </Style>
-                        </ControlTheme.Children>
-                    </ControlTheme>
-                </DataGrid.RowTheme>
            </DataGrid>
        </TabItem>
        <TabItem x:Name="EditableTab" Header="Editable">
-            <Grid RowDefinitions="Auto,*,Auto">
+            <Grid Margin="8" RowDefinitions="Auto,*,Auto">
                <StackPanel
                    Grid.Row="0"
                    Orientation="Horizontal"
@@ -138,35 +111,39 @@
                        Content="IsThreeState"
                        IsChecked="False" />
                </StackPanel>
-                <!--  Example of columns inheriting the data type from the Items source  -->
                <DataGrid
-                    Name="dataGridEdit"
                    Grid.Row="1"
-                    Margin="12"
-                    ItemsSource="{Binding DataGrid3Source}">
+                    Margin="8"
+                    ItemsSource="{Binding GridData3}">
                    <DataGrid.Columns>
-                        <DataGridTextColumn
-                            Width="2*"
-                            Binding="{Binding FirstName}"
-                            FontSize="{Binding #FontSizeSlider.Value, Mode=OneWay}"
-                            Header="First Name" />
-                        <DataGridTextColumn
-                            Width="2*"
-                            Binding="{Binding LastName}"
-                            FontSize="{Binding #FontSizeSlider.Value, Mode=OneWay}"
-                            Header="Last" />
                        <DataGridCheckBoxColumn
-                            Width="*"
-                            Binding="{Binding IsBanned}"
-                            Header="Is Banned"
+                            Width="2*"
+                            Binding="{Binding IsSelected}"
+                            Header="Select"
                            IsThreeState="{Binding #IsThreeStateCheckBox.IsChecked, Mode=OneWay}" />
-                        <DataGridTemplateColumn Header="Age">
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:SongViewModel"
+                            Binding="{Binding Title}"
+                            FontSize="{Binding #FontSizeSlider.Value, Mode=OneWay}"
+                            Header="Title" />
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:SongViewModel"
+                            Binding="{Binding Artist}"
+                            Header="Artist" />
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:SongViewModel"
+                            Binding="{Binding Album}"
+                            Header="Album" />
+                        <DataGridTemplateColumn Width="2*" Header="Comments">
                            <DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
-                                        Text="{Binding Age, StringFormat='{}{0} years'}" />
+                                        Text="{Binding CountOfComment}" />
                                </DataTemplate>
                            </DataGridTemplateColumn.CellTemplate>
                            <DataGridTemplateColumn.CellEditingTemplate>
@@ -174,17 +151,14 @@
                                    <NumericUpDown
                                        HorizontalAlignment="Stretch"
                                        FormatString="N0"
-                                        Maximum="120"
                                        Minimum="0"
-                                        TemplateApplied="NumericUpDown_OnTemplateApplied"
-                                        Value="{Binding Age}" />
+                                        Value="{Binding CountOfComment}" />
                                </DataTemplate>
                            </DataGridTemplateColumn.CellEditingTemplate>
                        </DataGridTemplateColumn>
                    </DataGrid.Columns>
                </DataGrid>
                <Button
-                    Name="btnAdd"
                    Grid.Row="2"
                    Margin="12,0,12,12"
                    HorizontalAlignment="Right"
--- a/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml.cs
@@ -13,6 +13,7 @@ using Avalonia.Input;
 using Avalonia.Input.Raw;
 using Avalonia.Markup.Xaml;
 using Avalonia.Threading;
+using Semi.Avalonia.Demo.ViewModels;

 namespace Semi.Avalonia.Demo.Pages;

@@ -21,488 +22,6 @@ public partial class DataGridDemo : UserControl
    public DataGridDemo()
    {
        InitializeComponent();
-        var dataGridSortDescription = DataGridSortDescription.FromPath(nameof(Country.Region), ListSortDirection.Ascending, new ReversedStringComparer());
-        var collectionView1 = new DataGridCollectionView(Countries.All);
-        collectionView1.SortDescriptions.Add(dataGridSortDescription);
-        var dg1 = this.Get<DataGrid>("dataGrid1");
-        dg1.IsReadOnly = true;
-        dg1.LoadingRow += Dg1_LoadingRow;
-        dg1.Sorting += (s, a) =>
-        {
-            var binding = (a.Column as DataGridBoundColumn)?.Binding as Binding;
-
-            if (binding?.Path is string property
-                && property == dataGridSortDescription.PropertyPath
-                && !collectionView1.SortDescriptions.Contains(dataGridSortDescription))
-            {
-                collectionView1.SortDescriptions.Add(dataGridSortDescription);
-            }
-        };
-        dg1.ItemsSource = collectionView1;
-
-        var dg2 = this.Get<DataGrid>("dataGridGrouping");
-        dg2.IsReadOnly = true;
-
-        var collectionView2 = new DataGridCollectionView(Countries.All);
-        collectionView2.GroupDescriptions.Add(new DataGridPathGroupDescription("Region"));
-
-        dg2.ItemsSource = collectionView2;
-
-        var dg3 = this.Get<DataGrid>("dataGridEdit");
-        dg3.IsReadOnly = false;
-
-        var list = new ObservableCollection<Person>
-        {
-            new Person { FirstName = "John", LastName = "Doe" , Age = 30},
-            new Person { FirstName = "Elizabeth", LastName = "Thomas", IsBanned = true , Age = 40 },
-            new Person { FirstName = "Zack", LastName = "Ward" , Age = 50 }
-        };
-        DataGrid3Source = list;
-
-        var addButton = this.Get<Button>("btnAdd");
-        addButton.Click += (a, b) => list.Add(new Person());
-
-        DataContext = this;
-    }
-    
-    public IEnumerable<Person> DataGrid3Source { get; }
-        
-    private void Dg1_LoadingRow(object? sender, DataGridRowEventArgs e)
-    {
-        e.Row.Header = e.Row.GetIndex() + 1;
-    }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
-
-    private class ReversedStringComparer : IComparer<object>, IComparer
-    {
-        public int Compare(object? x, object? y)
-        {
-            if (x is string left && y is string right)
-            {
-                var reversedLeft = new string(left.Reverse().ToArray());
-                var reversedRight = new string(right.Reverse().ToArray());
-                return reversedLeft.CompareTo(reversedRight);
-            }
-
-            return Comparer.Default.Compare(x, y);
-        }
-    }
-
-    private void NumericUpDown_OnTemplateApplied(object sender, TemplateAppliedEventArgs e)
-    {
-        // We want to focus the TextBox of the NumericUpDown. To do so we search for this control when the template
-        // is applied, but we postpone the action until the control is actually loaded. 
-        if (e.NameScope.Find<TextBox>("PART_TextBox") is {} textBox)
-        {
-            Dispatcher.UIThread.InvokeAsync(() =>
-            {
-                textBox.Focus();
-                textBox.SelectAll();
-            }, DispatcherPriority.Loaded);
-        }
-    }
-}
-
-public class Person : INotifyDataErrorInfo, INotifyPropertyChanged
-    {
-        string _firstName = string.Empty;
-        string _lastName = string.Empty;
-        bool _isBanned;
-        private int _age;
-
-        public string FirstName
-        {
-            get => _firstName;
-            set
-            {
-                _firstName = value;
-                if (string.IsNullOrWhiteSpace(value))
-                    SetError(nameof(FirstName), "First Name Required");
-                else
-                    SetError(nameof(FirstName), null);
-
-                OnPropertyChanged(nameof(FirstName));
-            }
-
-        }
-
-        public string LastName
-        {
-            get => _lastName;
-            set
-            {
-                _lastName = value;
-                if (string.IsNullOrWhiteSpace(value))
-                    SetError(nameof(LastName), "Last Name Required");
-                else
-                    SetError(nameof(LastName), null);
-
-                OnPropertyChanged(nameof(LastName));
-            }
-        }
-
-        public bool IsBanned
-        {
-            get => _isBanned;
-            set
-            {
-                _isBanned = value;
-
-                OnPropertyChanged(nameof(_isBanned));
-            }
-        }
-
-        
-        /// <summary>
-        ///    Gets or sets the age of the person
-        /// </summary>
-        public int Age
-        {
-            get => _age;
-            set
-            {
-                _age = value;
-                OnPropertyChanged(nameof(Age));
-            }
-        }
-
-        Dictionary<string, List<string>> _errorLookup = new Dictionary<string, List<string>>();
-
-        void SetError(string propertyName, string? error)
-        {
-            if (string.IsNullOrEmpty(error))
-            {
-                if (_errorLookup.Remove(propertyName))
-                    OnErrorsChanged(propertyName);
-            }
-            else
-            {
-                if (_errorLookup.TryGetValue(propertyName, out var errorList))
-                {
-                    errorList.Clear();
-                    errorList.Add(error!);
-                }
-                else
-                {
-                    var errors = new List<string> { error! };
-                    _errorLookup.Add(propertyName, errors);
-                }
-
-                OnErrorsChanged(propertyName);
-            }
-        }
-
-        public bool HasErrors => _errorLookup.Count > 0;
-
-        public event EventHandler<DataErrorsChangedEventArgs>? ErrorsChanged;
-        public event PropertyChangedEventHandler? PropertyChanged;
-
-        void OnErrorsChanged(string propertyName)
-        {
-            ErrorsChanged?.Invoke(this, new DataErrorsChangedEventArgs(propertyName));
-        }
-        void OnPropertyChanged(string propertyName)
-        {
-            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
-        }
-
-        public IEnumerable GetErrors(string? propertyName)
-        {
-            if (propertyName is { } && _errorLookup.TryGetValue(propertyName, out var errorList))
-                return errorList;
-            else
-                return Array.Empty<object>();
-        }
-    }
-    
-    public static class Countries
-    {
-        static IEnumerable<Country> GetCountries()
-        {
-            yield return new Country("Afghanistan", "ASIA (EX. NEAR EAST)", 31056997, 647500, 48, 0, 23.06, 163.07, 700, 36, 3.2, 46.6, 20.34);
-            yield return new Country("Albania", "EASTERN EUROPE", 3581655, 28748, 124.6, 1.26, -4.93, 21.52, 4500, 86.5, 71.2, 15.11, 5.22);
-            yield return new Country("Algeria", "NORTHERN AFRICA", 32930091, 2381740, 13.8, 0.04, -0.39, 31, 6000, 70, 78.1, 17.14, 4.61);
-            yield return new Country("American Samoa", "OCEANIA", 57794, 199, 290.4, 58.29, -20.71, 9.27, 8000, 97, 259.5, 22.46, 3.27);
-            yield return new Country("Andorra", "WESTERN EUROPE", 71201, 468, 152.1, 0, 6.6, 4.05, 19000, 100, 497.2, 8.71, 6.25);
-            yield return new Country("Angola", "SUB-SAHARAN AFRICA", 12127071, 1246700, 9.7, 0.13, 0, 191.19, 1900, 42, 7.8, 45.11, 24.2);
-            yield return new Country("Anguilla", "LATIN AMER. & CARIB", 13477, 102, 132.1, 59.8, 10.76, 21.03, 8600, 95, 460, 14.17, 5.34);
-            yield return new Country("Antigua & Barbuda", "LATIN AMER. & CARIB", 69108, 443, 156, 34.54, -6.15, 19.46, 11000, 89, 549.9, 16.93, 5.37);
-            yield return new Country("Argentina", "LATIN AMER. & CARIB", 39921833, 2766890, 14.4, 0.18, 0.61, 15.18, 11200, 97.1, 220.4, 16.73, 7.55);
-            yield return new Country("Armenia", "C.W. OF IND. STATES", 2976372, 29800, 99.9, 0, -6.47, 23.28, 3500, 98.6, 195.7, 12.07, 8.23);
-            yield return new Country("Aruba", "LATIN AMER. & CARIB", 71891, 193, 372.5, 35.49, 0, 5.89, 28000, 97, 516.1, 11.03, 6.68);
-            yield return new Country("Australia", "OCEANIA", 20264082, 7686850, 2.6, 0.34, 3.98, 4.69, 29000, 100, 565.5, 12.14, 7.51);
-            yield return new Country("Austria", "WESTERN EUROPE", 8192880, 83870, 97.7, 0, 2, 4.66, 30000, 98, 452.2, 8.74, 9.76);
-            yield return new Country("Azerbaijan", "C.W. OF IND. STATES", 7961619, 86600, 91.9, 0, -4.9, 81.74, 3400, 97, 137.1, 20.74, 9.75);
-            yield return new Country("The Bahamas", "LATIN AMER. & CARIB", 303770, 13940, 21.8, 25.41, -2.2, 25.21, 16700, 95.6, 460.6, 17.57, 9.05);
-            yield return new Country("Bahrain", "NEAR EAST", 698585, 665, 1050.5, 24.21, 1.05, 17.27, 16900, 89.1, 281.3, 17.8, 4.14);
-            yield return new Country("Bangladesh", "ASIA (EX. NEAR EAST)", 147365352, 144000, 1023.4, 0.4, -0.71, 62.6, 1900, 43.1, 7.3, 29.8, 8.27);
-            yield return new Country("Barbados", "LATIN AMER. & CARIB", 279912, 431, 649.5, 22.51, -0.31, 12.5, 15700, 97.4, 481.9, 12.71, 8.67);
-            yield return new Country("Belarus", "C.W. OF IND. STATES", 10293011, 207600, 49.6, 0, 2.54, 13.37, 6100, 99.6, 319.1, 11.16, 14.02);
-            yield return new Country("Belgium", "WESTERN EUROPE", 10379067, 30528, 340, 0.22, 1.23, 4.68, 29100, 98, 462.6, 10.38, 10.27);
-            yield return new Country("Belize", "LATIN AMER. & CARIB", 287730, 22966, 12.5, 1.68, 0, 25.69, 4900, 94.1, 115.7, 28.84, 5.72);
-            yield return new Country("Benin", "SUB-SAHARAN AFRICA", 7862944, 112620, 69.8, 0.11, 0, 85, 1100, 40.9, 9.7, 38.85, 12.22);
-            yield return new Country("Bermuda", "NORTHERN AMERICA", 65773, 53, 1241, 194.34, 2.49, 8.53, 36000, 98, 851.4, 11.4, 7.74);
-            yield return new Country("Bhutan", "ASIA (EX. NEAR EAST)", 2279723, 47000, 48.5, 0, 0, 100.44, 1300, 42.2, 14.3, 33.65, 12.7);
-            yield return new Country("Bolivia", "LATIN AMER. & CARIB", 8989046, 1098580, 8.2, 0, -1.32, 53.11, 2400, 87.2, 71.9, 23.3, 7.53);
-            yield return new Country("Bosnia & Herzegovina", "EASTERN EUROPE", 4498976, 51129, 88, 0.04, 0.31, 21.05, 6100,null, 215.4, 8.77, 8.27);
-            yield return new Country("Botswana", "SUB-SAHARAN AFRICA", 1639833, 600370, 2.7, 0, 0, 54.58, 9000, 79.8, 80.5, 23.08, 29.5);
-            yield return new Country("Brazil", "LATIN AMER. & CARIB", 188078227, 8511965, 22.1, 0.09, -0.03, 29.61, 7600, 86.4, 225.3, 16.56, 6.17);
-            yield return new Country("British Virgin Is.", "LATIN AMER. & CARIB", 23098, 153, 151, 52.29, 10.01, 18.05, 16000, 97.8, 506.5, 14.89, 4.42);
-            yield return new Country("Brunei", "ASIA (EX. NEAR EAST)", 379444, 5770, 65.8, 2.79, 3.59, 12.61, 18600, 93.9, 237.2, 18.79, 3.45);
-            yield return new Country("Bulgaria", "EASTERN EUROPE", 7385367, 110910, 66.6, 0.32, -4.58, 20.55, 7600, 98.6, 336.3, 9.65, 14.27);
-            yield return new Country("Burkina Faso", "SUB-SAHARAN AFRICA", 13902972, 274200, 50.7, 0, 0, 97.57, 1100, 26.6, 7, 45.62, 15.6);
-            yield return new Country("Burma", "ASIA (EX. NEAR EAST)", 47382633, 678500, 69.8, 0.28, -1.8, 67.24, 1800, 85.3, 10.1, 17.91, 9.83);
-            yield return new Country("Burundi", "SUB-SAHARAN AFRICA", 8090068, 27830, 290.7, 0, -0.06, 69.29, 600, 51.6, 3.4, 42.22, 13.46);
-            yield return new Country("Cambodia", "ASIA (EX. NEAR EAST)", 13881427, 181040, 76.7, 0.24, 0, 71.48, 1900, 69.4, 2.6, 26.9, 9.06);
-            yield return new Country("Cameroon", "SUB-SAHARAN AFRICA", 17340702, 475440, 36.5, 0.08, 0, 68.26, 1800, 79, 5.7, 33.89, 13.47);
-            yield return new Country("Canada", "NORTHERN AMERICA", 33098932, 9984670, 3.3, 2.02, 5.96, 4.75, 29800, 97, 552.2, 10.78, 7.8);
-            yield return new Country("Cape Verde", "SUB-SAHARAN AFRICA", 420979, 4033, 104.4, 23.93, -12.07, 47.77, 1400, 76.6, 169.6, 24.87, 6.55);
-            yield return new Country("Cayman Islands", "LATIN AMER. & CARIB", 45436, 262, 173.4, 61.07, 18.75, 8.19, 35000, 98, 836.3, 12.74, 4.89);
-            yield return new Country("Central African Rep.", "SUB-SAHARAN AFRICA", 4303356, 622984, 6.9, 0, 0, 91, 1100, 51, 2.3, 33.91, 18.65);
-            yield return new Country("Chad", "SUB-SAHARAN AFRICA", 9944201, 1284000, 7.7, 0, -0.11, 93.82, 1200, 47.5, 1.3, 45.73, 16.38);
-            yield return new Country("Chile", "LATIN AMER. & CARIB", 16134219, 756950, 21.3, 0.85, 0, 8.8, 9900, 96.2, 213, 15.23, 5.81);
-            yield return new Country("China", "ASIA (EX. NEAR EAST)", 1313973713, 9596960, 136.9, 0.15, -0.4, 24.18, 5000, 90.9, 266.7, 13.25, 6.97);
-            yield return new Country("Colombia", "LATIN AMER. & CARIB", 43593035, 1138910, 38.3, 0.28, -0.31, 20.97, 6300, 92.5, 176.2, 20.48, 5.58);
-            yield return new Country("Comoros", "SUB-SAHARAN AFRICA", 690948, 2170, 318.4, 15.67, 0, 74.93, 700, 56.5, 24.5, 36.93, 8.2);
-            yield return new Country("Congo, Dem.Rep.", "SUB - SAHARAN AFRICA", 62660551, 2345410, 26.7, 0, 0, 94.69, 700, 65.5, 0.2, 43.69, 13.27);
-            yield return new Country("Congo, Repub.of the", "SUB - SAHARAN AFRICA", 3702314, 342000, 10.8, 0.05, -0.17, 93.86, 700, 83.8, 3.7, 42.57, 12.93);
-            yield return new Country("Cook Islands", "OCEANIA", 21388, 240, 89.1, 50,null,null, 5000, 95, 289.9, 21,null);
-            yield return new Country("Costa Rica", "LATIN AMER. & CARIB", 4075261, 51100, 79.8, 2.52, 0.51, 9.95, 9100, 96, 340.7, 18.32, 4.36);
-            yield return new Country("Cote d'Ivoire", "SUB-SAHARAN AFRICA", 17654843, 322460, 54.8, 0.16, -0.07, 90.83, 1400, 50.9, 14.6, 35.11, 14.84);
-            yield return new Country("Croatia", "EASTERN EUROPE", 4494749, 56542, 79.5, 10.32, 1.58, 6.84, 10600, 98.5, 420.4, 9.61, 11.48);
-            yield return new Country("Cuba", "LATIN AMER. & CARIB", 11382820, 110860, 102.7, 3.37, -1.58, 6.33, 2900, 97, 74.7, 11.89, 7.22);
-            yield return new Country("Cyprus", "NEAR EAST", 784301, 9250, 84.8, 7.01, 0.43, 7.18, 19200, 97.6,null, 12.56, 7.68);
-            yield return new Country("Czech Republic", "EASTERN EUROPE", 10235455, 78866, 129.8, 0, 0.97, 3.93, 15700, 99.9, 314.3, 9.02, 10.59);
-            yield return new Country("Denmark", "WESTERN EUROPE", 5450661, 43094, 126.5, 16.97, 2.48, 4.56, 31100, 100, 614.6, 11.13, 10.36);
-            yield return new Country("Djibouti", "SUB-SAHARAN AFRICA", 486530, 23000, 21.2, 1.37, 0, 104.13, 1300, 67.9, 22.8, 39.53, 19.31);
-            yield return new Country("Dominica", "LATIN AMER. & CARIB", 68910, 754, 91.4, 19.63, -13.87, 14.15, 5400, 94, 304.8, 15.27, 6.73);
-            yield return new Country("Dominican Republic", "LATIN AMER. & CARIB", 9183984, 48730, 188.5, 2.64, -3.22, 32.38, 6000, 84.7, 97.4, 23.22, 5.73);
-            yield return new Country("East Timor", "ASIA (EX. NEAR EAST)", 1062777, 15007, 70.8, 4.7, 0, 47.41, 500, 58.6,null, 26.99, 6.24);
-            yield return new Country("Ecuador", "LATIN AMER. & CARIB", 13547510, 283560, 47.8, 0.79, -8.58, 23.66, 3300, 92.5, 125.6, 22.29, 4.23);
-            yield return new Country("Egypt", "NORTHERN AFRICA", 78887007, 1001450, 78.8, 0.24, -0.22, 32.59, 4000, 57.7, 131.8, 22.94, 5.23);
-            yield return new Country("El Salvador", "LATIN AMER. & CARIB", 6822378, 21040, 324.3, 1.46, -3.74, 25.1, 4800, 80.2, 142.4, 26.61, 5.78);
-            yield return new Country("Equatorial Guinea", "SUB-SAHARAN AFRICA", 540109, 28051, 19.3, 1.06, 0, 85.13, 2700, 85.7, 18.5, 35.59, 15.06);
-            yield return new Country("Eritrea", "SUB-SAHARAN AFRICA", 4786994, 121320, 39.5, 1.84, 0, 74.87, 700, 58.6, 7.9, 34.33, 9.6);
-            yield return new Country("Estonia", "BALTICS", 1324333, 45226, 29.3, 8.39, -3.16, 7.87, 12300, 99.8, 333.8, 10.04, 13.25);
-            yield return new Country("Ethiopia", "SUB-SAHARAN AFRICA", 74777981, 1127127, 66.3, 0, 0, 95.32, 700, 42.7, 8.2, 37.98, 14.86);
-            yield return new Country("Faroe Islands", "WESTERN EUROPE", 47246, 1399, 33.8, 79.84, 1.41, 6.24, 22000,null, 503.8, 14.05, 8.7);
-            yield return new Country("Fiji", "OCEANIA", 905949, 18270, 49.6, 6.18, -3.14, 12.62, 5800, 93.7, 112.6, 22.55, 5.65);
-            yield return new Country("Finland", "WESTERN EUROPE", 5231372, 338145, 15.5, 0.37, 0.95, 3.57, 27400, 100, 405.3, 10.45, 9.86);
-            yield return new Country("France", "WESTERN EUROPE", 60876136, 547030, 111.3, 0.63, 0.66, 4.26, 27600, 99, 586.4, 11.99, 9.14);
-            yield return new Country("French Guiana", "LATIN AMER. & CARIB", 199509, 91000, 2.2, 0.42, 6.27, 12.07, 8300, 83, 255.6, 20.46, 4.88);
-            yield return new Country("French Polynesia", "OCEANIA", 274578, 4167, 65.9, 60.6, 2.94, 8.44, 17500, 98, 194.5, 16.68, 4.69);
-            yield return new Country("Gabon", "SUB-SAHARAN AFRICA", 1424906, 267667, 5.3, 0.33, 0, 53.64, 5500, 63.2, 27.4, 36.16, 12.25);
-            yield return new Country("Gambia, The", "SUB - SAHARAN AFRICA", 1641564, 11300, 145.3, 0.71, 1.57, 72.02, 1700, 40.1, 26.8, 39.37, 12.25);
-            yield return new Country("Gaza Strip", "NEAR EAST", 1428757, 360, 3968.8, 11.11, 1.6, 22.93, 600,null, 244.3, 39.45, 3.8);
-            yield return new Country("Georgia", "C.W. OF IND. STATES", 4661473, 69700, 66.9, 0.44, -4.7, 18.59, 2500, 99, 146.6, 10.41, 9.23);
-            yield return new Country("Germany", "WESTERN EUROPE", 82422299, 357021, 230.9, 0.67, 2.18, 4.16, 27600, 99, 667.9, 8.25, 10.62);
-            yield return new Country("Ghana", "SUB-SAHARAN AFRICA", 22409572, 239460, 93.6, 0.23, -0.64, 51.43, 2200, 74.8, 14.4, 30.52, 9.72);
-            yield return new Country("Gibraltar", "WESTERN EUROPE", 27928, 7, 3989.7, 171.43, 0, 5.13, 17500,null, 877.7, 10.74, 9.31);
-            yield return new Country("Greece", "WESTERN EUROPE", 10688058, 131940, 81, 10.37, 2.35, 5.53, 20000, 97.5, 589.7, 9.68, 10.24);
-            yield return new Country("Greenland", "NORTHERN AMERICA", 56361, 2166086, 0, 2.04, -8.37, 15.82, 20000,null, 448.9, 15.93, 7.84);
-            yield return new Country("Grenada", "LATIN AMER. & CARIB", 89703, 344, 260.8, 35.17, -13.92, 14.62, 5000, 98, 364.5, 22.08, 6.88);
-            yield return new Country("Guadeloupe", "LATIN AMER. & CARIB", 452776, 1780, 254.4, 17.19, -0.15, 8.6, 8000, 90, 463.8, 15.05, 6.09);
-            yield return new Country("Guam", "OCEANIA", 171019, 541, 316.1, 23.2, 0, 6.94, 21000, 99, 492, 18.79, 4.48);
-            yield return new Country("Guatemala", "LATIN AMER. & CARIB", 12293545, 108890, 112.9, 0.37, -1.67, 35.93, 4100, 70.6, 92.1, 29.88, 5.2);
-            yield return new Country("Guernsey", "WESTERN EUROPE", 65409, 78, 838.6, 64.1, 3.84, 4.71, 20000,null, 842.4, 8.81, 10.01);
-            yield return new Country("Guinea", "SUB-SAHARAN AFRICA", 9690222, 245857, 39.4, 0.13, -3.06, 90.37, 2100, 35.9, 2.7, 41.76, 15.48);
-            yield return new Country("Guinea-Bissau", "SUB-SAHARAN AFRICA", 1442029, 36120, 39.9, 0.97, -1.57, 107.17, 800, 42.4, 7.4, 37.22, 16.53);
-            yield return new Country("Guyana", "LATIN AMER. & CARIB", 767245, 214970, 3.6, 0.21, -2.07, 33.26, 4000, 98.8, 143.5, 18.28, 8.28);
-            yield return new Country("Haiti", "LATIN AMER. & CARIB", 8308504, 27750, 299.4, 6.38, -3.4, 73.45, 1600, 52.9, 16.9, 36.44, 12.17);
-            yield return new Country("Honduras", "LATIN AMER. & CARIB", 7326496, 112090, 65.4, 0.73, -1.99, 29.32, 2600, 76.2, 67.5, 28.24, 5.28);
-            yield return new Country("Hong Kong", "ASIA (EX. NEAR EAST)", 6940432, 1092, 6355.7, 67.12, 5.24, 2.97, 28800, 93.5, 546.7, 7.29, 6.29);
-            yield return new Country("Hungary", "EASTERN EUROPE", 9981334, 93030, 107.3, 0, 0.86, 8.57, 13900, 99.4, 336.2, 9.72, 13.11);
-            yield return new Country("Iceland", "WESTERN EUROPE", 299388, 103000, 2.9, 4.83, 2.38, 3.31, 30900, 99.9, 647.7, 13.64, 6.72);
-            yield return new Country("India", "ASIA (EX. NEAR EAST)", 1095351995, 3287590, 333.2, 0.21, -0.07, 56.29, 2900, 59.5, 45.4, 22.01, 8.18);
-            yield return new Country("Indonesia", "ASIA (EX. NEAR EAST)", 245452739, 1919440, 127.9, 2.85, 0, 35.6, 3200, 87.9, 52, 20.34, 6.25);
-            yield return new Country("Iran", "ASIA (EX. NEAR EAST)", 68688433, 1648000, 41.7, 0.15, -0.84, 41.58, 7000, 79.4, 276.4, 17, 5.55);
-            yield return new Country("Iraq", "NEAR EAST", 26783383, 437072, 61.3, 0.01, 0, 50.25, 1500, 40.4, 38.6, 31.98, 5.37);
-            yield return new Country("Ireland", "WESTERN EUROPE", 4062235, 70280, 57.8, 2.06, 4.99, 5.39, 29600, 98, 500.5, 14.45, 7.82);
-            yield return new Country("Isle of Man", "WESTERN EUROPE", 75441, 572, 131.9, 27.97, 5.36, 5.93, 21000,null, 676, 11.05, 11.19);
-            yield return new Country("Israel", "NEAR EAST", 6352117, 20770, 305.8, 1.31, 0.68, 7.03, 19800, 95.4, 462.3, 17.97, 6.18);
-            yield return new Country("Italy", "WESTERN EUROPE", 58133509, 301230, 193, 2.52, 2.07, 5.94, 26700, 98.6, 430.9, 8.72, 10.4);
-            yield return new Country("Jamaica", "LATIN AMER. & CARIB", 2758124, 10991, 250.9, 9.3, -4.92, 12.36, 3900, 87.9, 124, 20.82, 6.52);
-            yield return new Country("Japan", "ASIA (EX. NEAR EAST)", 127463611, 377835, 337.4, 7.87, 0, 3.26, 28200, 99, 461.2, 9.37, 9.16);
-            yield return new Country("Jersey", "WESTERN EUROPE", 91084, 116, 785.2, 60.34, 2.76, 5.24, 24800,null, 811.3, 9.3, 9.28);
-            yield return new Country("Jordan", "NEAR EAST", 5906760, 92300, 64, 0.03, 6.59, 17.35, 4300, 91.3, 104.5, 21.25, 2.65);
-            yield return new Country("Kazakhstan", "C.W. OF IND. STATES", 15233244, 2717300, 5.6, 0, -3.35, 29.21, 6300, 98.4, 164.1, 16, 9.42);
-            yield return new Country("Kenya", "SUB-SAHARAN AFRICA", 34707817, 582650, 59.6, 0.09, -0.1, 61.47, 1000, 85.1, 8.1, 39.72, 14.02);
-            yield return new Country("Kiribati", "OCEANIA", 105432, 811, 130, 140.94, 0, 48.52, 800,null, 42.7, 30.65, 8.26);
-            yield return new Country("North Korea", "ASIA(EX.NEAR EAST)", 23113019, 120540, 191.8, 2.07, 0, 24.04, 1300, 99, 42.4, 15.54, 7.13);
-            yield return new Country("South Korea", "ASIA(EX.NEAR EAST)", 48846823, 98480, 496, 2.45, 0, 7.05, 17800, 97.9, 486.1, 10, 5.85);
-            yield return new Country("Kuwait", "NEAR EAST", 2418393, 17820, 135.7, 2.8, 14.18, 9.95, 19000, 83.5, 211, 21.94, 2.41);
-            yield return new Country("Kyrgyzstan", "C.W. OF IND. STATES", 5213898, 198500, 26.3, 0, -2.45, 35.64, 1600, 97, 84, 22.8, 7.08);
-            yield return new Country("Laos", "ASIA (EX. NEAR EAST)", 6368481, 236800, 26.9, 0, 0, 85.22, 1700, 66.4, 14.1, 35.49, 11.55);
-            yield return new Country("Latvia", "BALTICS", 2274735, 64589, 35.2, 0.82, -2.23, 9.55, 10200, 99.8, 321.4, 9.24, 13.66);
-            yield return new Country("Lebanon", "NEAR EAST", 3874050, 10400, 372.5, 2.16, 0, 24.52, 4800, 87.4, 255.6, 18.52, 6.21);
-            yield return new Country("Lesotho", "SUB-SAHARAN AFRICA", 2022331, 30355, 66.6, 0, -0.74, 84.23, 3000, 84.8, 23.7, 24.75, 28.71);
-            yield return new Country("Liberia", "SUB-SAHARAN AFRICA", 3042004, 111370, 27.3, 0.52, 0, 128.87, 1000, 57.5, 2.3, 44.77, 23.1);
-            yield return new Country("Libya", "NORTHERN AFRICA", 5900754, 1759540, 3.4, 0.1, 0, 24.6, 6400, 82.6, 127.1, 26.49, 3.48);
-            yield return new Country("Liechtenstein", "WESTERN EUROPE", 33987, 160, 212.4, 0, 4.85, 4.7, 25000, 100, 585.5, 10.21, 7.18);
-            yield return new Country("Lithuania", "BALTICS", 3585906, 65200, 55, 0.14, -0.71, 6.89, 11400, 99.6, 223.4, 8.75, 10.98);
-            yield return new Country("Luxembourg", "WESTERN EUROPE", 474413, 2586, 183.5, 0, 8.97, 4.81, 55100, 100, 515.4, 11.94, 8.41);
-            yield return new Country("Macau", "ASIA (EX. NEAR EAST)", 453125, 28, 16183, 146.43, 4.86, 4.39, 19400, 94.5, 384.9, 8.48, 4.47);
-            yield return new Country("Macedonia", "EASTERN EUROPE", 2050554, 25333, 80.9, 0, -1.45, 10.09, 6700,null, 260, 12.02, 8.77);
-            yield return new Country("Madagascar", "SUB-SAHARAN AFRICA", 18595469, 587040, 31.7, 0.82, 0, 76.83, 800, 68.9, 3.6, 41.41, 11.11);
-            yield return new Country("Malawi", "SUB-SAHARAN AFRICA", 13013926, 118480, 109.8, 0, 0, 103.32, 600, 62.7, 7.9, 43.13, 19.33);
-            yield return new Country("Malaysia", "ASIA (EX. NEAR EAST)", 24385858, 329750, 74, 1.42, 0, 17.7, 9000, 88.7, 179, 22.86, 5.05);
-            yield return new Country("Maldives", "ASIA (EX. NEAR EAST)", 359008, 300, 1196.7, 214.67, 0, 56.52, 3900, 97.2, 90, 34.81, 7.06);
-            yield return new Country("Mali", "SUB-SAHARAN AFRICA", 11716829, 1240000, 9.5, 0, -0.33, 116.79, 900, 46.4, 6.4, 49.82, 16.89);
-            yield return new Country("Malta", "WESTERN EUROPE", 400214, 316, 1266.5, 62.28, 2.07, 3.89, 17700, 92.8, 505, 10.22, 8.1);
-            yield return new Country("Marshall Islands", "OCEANIA", 60422, 11854, 5.1, 3.12, -6.04, 29.45, 1600, 93.7, 91.2, 33.05, 4.78);
-            yield return new Country("Martinique", "LATIN AMER. & CARIB", 436131, 1100, 396.5, 31.82, -0.05, 7.09, 14400, 97.7, 394.4, 13.74, 6.48);
-            yield return new Country("Mauritania", "SUB-SAHARAN AFRICA", 3177388, 1030700, 3.1, 0.07, 0, 70.89, 1800, 41.7, 12.9, 40.99, 12.16);
-            yield return new Country("Mauritius", "SUB-SAHARAN AFRICA", 1240827, 2040, 608.3, 8.68, -0.9, 15.03, 11400, 85.6, 289.3, 15.43, 6.86);
-            yield return new Country("Mayotte", "SUB-SAHARAN AFRICA", 201234, 374, 538.1, 49.52, 6.78, 62.4, 2600,null, 49.7, 40.95, 7.7);
-            yield return new Country("Mexico", "LATIN AMER. & CARIB", 107449525, 1972550, 54.5, 0.47, -4.87, 20.91, 9000, 92.2, 181.6, 20.69, 4.74);
-            yield return new Country("Micronesia, Fed.St.", "OCEANIA", 108004, 702, 153.9, 870.66, -20.99, 30.21, 2000, 89, 114.8, 24.68, 4.75);
-            yield return new Country("Moldova", "C.W. OF IND. STATES", 4466706, 33843, 132, 0, -0.26, 40.42, 1800, 99.1, 208.1, 15.7, 12.64);
-            yield return new Country("Monaco", "WESTERN EUROPE", 32543, 2, 16271.5, 205, 7.75, 5.43, 27000, 99, 1035.6, 9.19, 12.91);
-            yield return new Country("Mongolia", "ASIA (EX. NEAR EAST)", 2832224, 1564116, 1.8, 0, 0, 53.79, 1800, 97.8, 55.1, 21.59, 6.95);
-            yield return new Country("Montserrat", "LATIN AMER. & CARIB", 9439, 102, 92.5, 39.22, 0, 7.35, 3400, 97,null, 17.59, 7.1);
-            yield return new Country("Morocco", "NORTHERN AFRICA", 33241259, 446550, 74.4, 0.41, -0.98, 41.62, 4000, 51.7, 40.4, 21.98, 5.58);
-            yield return new Country("Mozambique", "SUB-SAHARAN AFRICA", 19686505, 801590, 24.6, 0.31, 0, 130.79, 1200, 47.8, 3.5, 35.18, 21.35);
-            yield return new Country("Namibia", "SUB-SAHARAN AFRICA", 2044147, 825418, 2.5, 0.19, 0, 48.98, 7200, 84, 62.6, 24.32, 18.86);
-            yield return new Country("Nauru", "OCEANIA", 13287, 21, 632.7, 142.86, 0, 9.95, 5000,null, 143, 24.76, 6.7);
-            yield return new Country("Nepal", "ASIA (EX. NEAR EAST)", 28287147, 147181, 192.2, 0, 0, 66.98, 1400, 45.2, 15.9, 30.98, 9.31);
-            yield return new Country("Netherlands", "WESTERN EUROPE", 16491461, 41526, 397.1, 1.09, 2.91, 5.04, 28600, 99, 460.8, 10.9, 8.68);
-            yield return new Country("Netherlands Antilles", "LATIN AMER. & CARIB", 221736, 960, 231, 37.92, -0.41, 10.03, 11400, 96.7, 365.3, 14.78, 6.45);
-            yield return new Country("New Caledonia", "OCEANIA", 219246, 19060, 11.5, 11.83, 0, 7.72, 15000, 91, 252.2, 18.11, 5.69);
-            yield return new Country("New Zealand", "OCEANIA", 4076140, 268680, 15.2, 5.63, 4.05, 5.85, 21600, 99, 441.7, 13.76, 7.53);
-            yield return new Country("Nicaragua", "LATIN AMER. & CARIB", 5570129, 129494, 43, 0.7, -1.22, 29.11, 2300, 67.5, 39.7, 24.51, 4.45);
-            yield return new Country("Niger", "SUB-SAHARAN AFRICA", 12525094, 1267000, 9.9, 0, -0.67, 121.69, 800, 17.6, 1.9, 50.73, 20.91);
-            yield return new Country("Nigeria", "SUB-SAHARAN AFRICA", 131859731, 923768, 142.7, 0.09, 0.26, 98.8, 900, 68, 9.3, 40.43, 16.94);
-            yield return new Country("N. Mariana Islands", "OCEANIA", 82459, 477, 172.9, 310.69, 9.61, 7.11, 12500, 97, 254.7, 19.43, 2.29);
-            yield return new Country("Norway", "WESTERN EUROPE", 4610820, 323802, 14.2, 7.77, 1.74, 3.7, 37800, 100, 461.7, 11.46, 9.4);
-            yield return new Country("Oman", "NEAR EAST", 3102229, 212460, 14.6, 0.98, 0.28, 19.51, 13100, 75.8, 85.5, 36.24, 3.81);
-            yield return new Country("Pakistan", "ASIA (EX. NEAR EAST)", 165803560, 803940, 206.2, 0.13, -2.77, 72.44, 2100, 45.7, 31.8, 29.74, 8.23);
-            yield return new Country("Palau", "OCEANIA", 20579, 458, 44.9, 331.66, 2.85, 14.84, 9000, 92, 325.6, 18.03, 6.8);
-            yield return new Country("Panama", "LATIN AMER. & CARIB", 3191319, 78200, 40.8, 3.18, -0.91, 20.47, 6300, 92.6, 137.9, 21.74, 5.36);
-            yield return new Country("Papua New Guinea", "OCEANIA", 5670544, 462840, 12.3, 1.11, 0, 51.45, 2200, 64.6, 10.9, 29.36, 7.25);
-            yield return new Country("Paraguay", "LATIN AMER. & CARIB", 6506464, 406750, 16, 0, -0.08, 25.63, 4700, 94, 49.2, 29.1, 4.49);
-            yield return new Country("Peru", "LATIN AMER. & CARIB", 28302603, 1285220, 22, 0.19, -1.05, 31.94, 5100, 90.9, 79.5, 20.48, 6.23);
-            yield return new Country("Philippines", "ASIA (EX. NEAR EAST)", 89468677, 300000, 298.2, 12.1, -1.5, 23.51, 4600, 92.6, 38.4, 24.89, 5.41);
-            yield return new Country("Poland", "EASTERN EUROPE", 38536869, 312685, 123.3, 0.16, -0.49, 8.51, 11100, 99.8, 306.3, 9.85, 9.89);
-            yield return new Country("Portugal", "WESTERN EUROPE", 10605870, 92391, 114.8, 1.94, 3.57, 5.05, 18000, 93.3, 399.2, 10.72, 10.5);
-            yield return new Country("Puerto Rico", "LATIN AMER. & CARIB", 3927188, 13790, 284.8, 3.63, -1.46, 8.24, 16800, 94.1, 283.1, 12.77, 7.65);
-            yield return new Country("Qatar", "NEAR EAST", 885359, 11437, 77.4, 4.92, 16.29, 18.61, 21500, 82.5, 232, 15.56, 4.72);
-            yield return new Country("Reunion", "SUB-SAHARAN AFRICA", 787584, 2517, 312.9, 8.22, 0, 7.78, 5800, 88.9, 380.9, 18.9, 5.49);
-            yield return new Country("Romania", "EASTERN EUROPE", 22303552, 237500, 93.9, 0.09, -0.13, 26.43, 7000, 98.4, 196.9, 10.7, 11.77);
-            yield return new Country("Russia", "C.W. OF IND. STATES", 142893540, 17075200, 8.4, 0.22, 1.02, 15.39, 8900, 99.6, 280.6, 9.95, 14.65);
-            yield return new Country("Rwanda", "SUB-SAHARAN AFRICA", 8648248, 26338, 328.4, 0, 0, 91.23, 1300, 70.4, 2.7, 40.37, 16.09);
-            yield return new Country("Saint Helena", "SUB-SAHARAN AFRICA", 7502, 413, 18.2, 14.53, 0, 19, 2500, 97, 293.3, 12.13, 6.53);
-            yield return new Country("Saint Kitts & Nevis", "LATIN AMER. & CARIB", 39129, 261, 149.9, 51.72, -7.11, 14.49, 8800, 97, 638.9, 18.02, 8.33);
-            yield return new Country("Saint Lucia", "LATIN AMER. & CARIB", 168458, 616, 273.5, 25.65, -2.67, 13.53, 5400, 67, 303.3, 19.68, 5.08);
-            yield return new Country("St Pierre & Miquelon", "NORTHERN AMERICA", 7026, 242, 29, 49.59, -4.86, 7.54, 6900, 99, 683.2, 13.52, 6.83);
-            yield return new Country("Saint Vincent and the Grenadines", "LATIN AMER. & CARIB", 117848, 389, 303, 21.59, -7.64, 14.78, 2900, 96, 190.9, 16.18, 5.98);
-            yield return new Country("Samoa", "OCEANIA", 176908, 2944, 60.1, 13.69, -11.7, 27.71, 5600, 99.7, 75.2, 16.43, 6.62);
-            yield return new Country("San Marino", "WESTERN EUROPE", 29251, 61, 479.5, 0, 10.98, 5.73, 34600, 96, 704.3, 10.02, 8.17);
-            yield return new Country("Sao Tome & Principe", "SUB-SAHARAN AFRICA", 193413, 1001, 193.2, 20.88, -2.72, 43.11, 1200, 79.3, 36.2, 40.25, 6.47);
-            yield return new Country("Saudi Arabia", "NEAR EAST", 27019731, 1960582, 13.8, 0.13, -2.71, 13.24, 11800, 78.8, 140.6, 29.34, 2.58);
-            yield return new Country("Senegal", "SUB-SAHARAN AFRICA", 11987121, 196190, 61.1, 0.27, 0.2, 55.51, 1600, 40.2, 22.2, 32.78, 9.42);
-            yield return new Country("Serbia", "EASTERN EUROPE", 9396411, 88361, 106.3, 0, -1.33, 12.89, 2200, 93, 285.8,null,null);
-            yield return new Country("Seychelles", "SUB-SAHARAN AFRICA", 81541, 455, 179.2, 107.91, -5.69, 15.53, 7800, 58, 262.4, 16.03, 6.29);
-            yield return new Country("Sierra Leone", "SUB-SAHARAN AFRICA", 6005250, 71740, 83.7, 0.56, 0, 143.64, 500, 31.4, 4, 45.76, 23.03);
-            yield return new Country("Singapore", "ASIA (EX. NEAR EAST)", 4492150, 693, 6482.2, 27.85, 11.53, 2.29, 23700, 92.5, 411.4, 9.34, 4.28);
-            yield return new Country("Slovakia", "EASTERN EUROPE", 5439448, 48845, 111.4, 0, 0.3, 7.41, 13300,null, 220.1, 10.65, 9.45);
-            yield return new Country("Slovenia", "EASTERN EUROPE", 2010347, 20273, 99.2, 0.23, 1.12, 4.45, 19000, 99.7, 406.1, 8.98, 10.31);
-            yield return new Country("Solomon Islands", "OCEANIA", 552438, 28450, 19.4, 18.67, 0, 21.29, 1700,null, 13.4, 30.01, 3.92);
-            yield return new Country("Somalia", "SUB-SAHARAN AFRICA", 8863338, 637657, 13.9, 0.47, 5.37, 116.7, 500, 37.8, 11.3, 45.13, 16.63);
-            yield return new Country("South Africa", "SUB-SAHARAN AFRICA", 44187637, 1219912, 36.2, 0.23, -0.29, 61.81, 10700, 86.4, 107, 18.2, 22);
-            yield return new Country("Spain", "WESTERN EUROPE", 40397842, 504782, 80, 0.98, 0.99, 4.42, 22000, 97.9, 453.5, 10.06, 9.72);
-            yield return new Country("Sri Lanka", "ASIA (EX. NEAR EAST)", 20222240, 65610, 308.2, 2.04, -1.31, 14.35, 3700, 92.3, 61.5, 15.51, 6.52);
-            yield return new Country("Sudan", "SUB-SAHARAN AFRICA", 41236378, 2505810, 16.5, 0.03, -0.02, 62.5, 1900, 61.1, 16.3, 34.53, 8.97);
-            yield return new Country("Suriname", "LATIN AMER. & CARIB", 439117, 163270, 2.7, 0.24, -8.81, 23.57, 4000, 93, 184.7, 18.02, 7.27);
-            yield return new Country("Swaziland", "SUB-SAHARAN AFRICA", 1136334, 17363, 65.5, 0, 0, 69.27, 4900, 81.6, 30.8, 27.41, 29.74);
-            yield return new Country("Sweden", "WESTERN EUROPE", 9016596, 449964, 20, 0.72, 1.67, 2.77, 26800, 99, 715, 10.27, 10.31);
-            yield return new Country("Switzerland", "WESTERN EUROPE", 7523934, 41290, 182.2, 0, 4.05, 4.39, 32700, 99, 680.9, 9.71, 8.49);
-            yield return new Country("Syria", "NEAR EAST", 18881361, 185180, 102, 0.1, 0, 29.53, 3300, 76.9, 153.8, 27.76, 4.81);
-            yield return new Country("Taiwan", "ASIA (EX. NEAR EAST)", 23036087, 35980, 640.3, 4.35, 0, 6.4, 23400, 96.1, 591, 12.56, 6.48);
-            yield return new Country("Tajikistan", "C.W. OF IND. STATES", 7320815, 143100, 51.2, 0, -2.86, 110.76, 1000, 99.4, 33.5, 32.65, 8.25);
-            yield return new Country("Tanzania", "SUB-SAHARAN AFRICA", 37445392, 945087, 39.6, 0.15, -2.06, 98.54, 600, 78.2, 4, 37.71, 16.39);
-            yield return new Country("Thailand", "ASIA (EX. NEAR EAST)", 64631595, 514000, 125.7, 0.63, 0, 20.48, 7400, 92.6, 108.9, 13.87, 7.04);
-            yield return new Country("Togo", "SUB-SAHARAN AFRICA", 5548702, 56785, 97.7, 0.1, 0, 66.61, 1500, 60.9, 10.6, 37.01, 9.83);
-            yield return new Country("Tonga", "OCEANIA", 114689, 748, 153.3, 56.02, 0, 12.62, 2200, 98.5, 97.7, 25.37, 5.28);
-            yield return new Country("Trinidad & Tobago", "LATIN AMER. & CARIB", 1065842, 5128, 207.9, 7.06, -10.83, 24.31, 9500, 98.6, 303.5, 12.9, 10.57);
-            yield return new Country("Tunisia", "NORTHERN AFRICA", 10175014, 163610, 62.2, 0.7, -0.57, 24.77, 6900, 74.2, 123.6, 15.52, 5.13);
-            yield return new Country("Turkey", "NEAR EAST", 70413958, 780580, 90.2, 0.92, 0, 41.04, 6700, 86.5, 269.5, 16.62, 5.97);
-            yield return new Country("Turkmenistan", "C.W. OF IND. STATES", 5042920, 488100, 10.3, 0, -0.86, 73.08, 5800, 98, 74.6, 27.61, 8.6);
-            yield return new Country("Turks & Caicos Is", "LATIN AMER. & CARIB", 21152, 430, 49.2, 90.47, 11.68, 15.67, 9600, 98, 269.5, 21.84, 4.21);
-            yield return new Country("Tuvalu", "OCEANIA", 11810, 26, 454.2, 92.31, 0, 20.03, 1100,null, 59.3, 22.18, 7.11);
-            yield return new Country("Uganda", "SUB-SAHARAN AFRICA", 28195754, 236040, 119.5, 0, 0, 67.83, 1400, 69.9, 3.6, 47.35, 12.24);
-            yield return new Country("Ukraine", "C.W. OF IND. STATES", 46710816, 603700, 77.4, 0.46, -0.39, 20.34, 5400, 99.7, 259.9, 8.82, 14.39);
-            yield return new Country("United Arab Emirates", "NEAR EAST", 2602713, 82880, 31.4, 1.59, 1.03, 14.51, 23200, 77.9, 475.3, 18.96, 4.4);
-            yield return new Country("United Kingdom", "WESTERN EUROPE", 60609153, 244820, 247.6, 5.08, 2.19, 5.16, 27700, 99, 543.5, 10.71, 10.13);
-            yield return new Country("United States", "NORTHERN AMERICA", 298444215, 9631420, 31, 0.21, 3.41, 6.5, 37800, 97, 898, 14.14, 8.26);
-            yield return new Country("Uruguay", "LATIN AMER. & CARIB", 3431932, 176220, 19.5, 0.37, -0.32, 11.95, 12800, 98, 291.4, 13.91, 9.05);
-            yield return new Country("Uzbekistan", "C.W. OF IND. STATES", 27307134, 447400, 61, 0, -1.72, 71.1, 1700, 99.3, 62.9, 26.36, 7.84);
-            yield return new Country("Vanuatu", "OCEANIA", 208869, 12200, 17.1, 20.72, 0, 55.16, 2900, 53, 32.6, 22.72, 7.82);
-            yield return new Country("Venezuela", "LATIN AMER. & CARIB", 25730435, 912050, 28.2, 0.31, -0.04, 22.2, 4800, 93.4, 140.1, 18.71, 4.92);
-            yield return new Country("Vietnam", "ASIA (EX. NEAR EAST)", 84402966, 329560, 256.1, 1.05, -0.45, 25.95, 2500, 90.3, 187.7, 16.86, 6.22);
-            yield return new Country("Virgin Islands", "LATIN AMER. & CARIB", 108605, 1910, 56.9, 9.84, -8.94, 8.03, 17200,null, 652.8, 13.96, 6.43);
-            yield return new Country("Wallis and Futuna", "OCEANIA", 16025, 274, 58.5, 47.08,null,null, 3700, 50, 118.6,null,null);
-            yield return new Country("West Bank", "NEAR EAST", 2460492, 5860, 419.9, 0, 2.98, 19.62, 800,null, 145.2, 31.67, 3.92);
-            yield return new Country("Yemen", "NEAR EAST", 21456188, 527970, 40.6, 0.36, 0, 61.5, 800, 50.2, 37.2, 42.89, 8.3);
-            yield return new Country("Zambia", "SUB-SAHARAN AFRICA", 11502010, 752614, 15.3, 0, 0, 88.29, 800, 80.6, 8.2, 41, 19.93);
-            yield return new Country("Zimbabwe", "SUB-SAHARAN AFRICA", 12236805, 390580, 31.3, 0, 0, 67.69, 1900, 90.7, 26.8, 28.01, 21.84);
-        }
-
-        static IReadOnlyList<Country>? _all;
-
-        public static IReadOnlyList<Country> All
-        {
-            get
-            {
-                if(_all == null)
-                {
-                    _all = GetCountries().ToList().AsReadOnly();
-                }
-
-                return _all;
-            }
-
-        }
-    }
-    
-public class Country
-{
-    public string Name { get; private set; }
-    public string Region { get; private set; }
-    public int Population { get; private set; }
-    //Square Miles
-    public int Area { get; private set; }
-    //Per Square Mile
-    public double PopulationDensity { get; private set; }
-    //Coast / Area
-    public double CoastLine { get; private set; }
-    public double? NetMigration { get; private set; }
-    //per 1000 births
-    public double? InfantMortality { get; private set; }
-    public int GDP { get; private set; }
-    public double? LiteracyPercent { get; private set; }
-    //per 1000
-    public double? Phones { get; private set; }
-    public double? BirthRate { get; private set; }
-    public double? DeathRate { get; private set; }
-
-    public Country(string name, string region, int population, int area, double density, double coast, double? migration, 
-        double? infantMorality, int gdp, double? literacy, double? phones, double? birth, double? death)
-    {
-        Name = name;
-        Region = region;
-        Population = population;
-        Area = area;
-        PopulationDensity = density;
-        CoastLine = coast;
-        NetMigration = migration;
-        InfantMortality = infantMorality;
-        GDP = gdp;
-        LiteracyPercent = literacy;
-        BirthRate = birth;
-        DeathRate = death;
+        DataContext = new DataGridDemoViewModel();
    }
 }
--- a/demo/Semi.Avalonia.Demo/Pages/FlyoutDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/FlyoutDemo.axaml
@@ -129,22 +129,22 @@
            <Button.Flyout>
                <Flyout FlyoutPresenterTheme="{StaticResource LightFlyout}" Placement="Top">
                    <StackPanel>
-                        <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-                        <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-                        <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-                        <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
-                        <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-                        <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-                        <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-                        <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-                        <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-                        <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                        <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
                        <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
                        <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-                        <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
-                        <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
                        <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                        <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                        <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                        <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                        <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                        <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                        <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
+                        <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                        <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
                        <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                        <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                        <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                        <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
                        <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
                    </StackPanel>
                </Flyout>
--- a/demo/Semi.Avalonia.Demo/Pages/HeaderedContentControlDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/HeaderedContentControlDemo.axaml
@@ -6,7 +6,7 @@
             x:Class="Semi.Avalonia.Demo.Pages.HeaderedContentControlDemo">
    <ScrollViewer>
        <StackPanel HorizontalAlignment="Left" Spacing="20">
-            <HeaderedContentControl Theme="{DynamicResource GroupBox}" Header="Semi Design">
+            <HeaderedContentControl Theme="{DynamicResource GroupBox}" Header="Semi Design" Width="400" Height="200">
                <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</TextBlock>
            </HeaderedContentControl>
        </StackPanel>
--- a/demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml
@@ -7,77 +7,220 @@
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
-    <StackPanel
-        Width="500"
-        HorizontalAlignment="Left"
-        Spacing="20">
-        <StackPanel.Styles>
-            <Style Selector="Label">
-                <Setter Property="Margin" Value="4" />
-            </Style>
-        </StackPanel.Styles>
-        <WrapPanel>
-            <Label Theme="{StaticResource TagLabel}">Label</Label>
-            <Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
-            <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
-            <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
-        </WrapPanel>
-        <WrapPanel>
-            <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-            <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-            <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-            <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
-            <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-            <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-            <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-            <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-            <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-            <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
-            <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
-            <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-            <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
-            <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
-            <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
-            <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
-            <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
-        </WrapPanel>
-        <WrapPanel>
-            <Label Classes="Ghost Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-            <Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-            <Label Classes="Ghost Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-            <Label Classes="Ghost Green" Theme="{StaticResource TagLabel}">Green</Label>
-            <Label Classes="Ghost Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-            <Label Classes="Ghost Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-            <Label Classes="Ghost LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-            <Label Classes="Ghost LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-            <Label Classes="Ghost Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-            <Label Classes="Ghost Orange" Theme="{StaticResource TagLabel}">Orange</Label>
-            <Label Classes="Ghost Pink" Theme="{StaticResource TagLabel}">Pink</Label>
-            <Label Classes="Ghost Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-            <Label Classes="Ghost Red" Theme="{StaticResource TagLabel}">Red</Label>
-            <Label Classes="Ghost Teal" Theme="{StaticResource TagLabel}">Teal</Label>
-            <Label Classes="Ghost Violet" Theme="{StaticResource TagLabel}">Violet</Label>
-            <Label Classes="Ghost Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
-            <Label Classes="Ghost White" Theme="{StaticResource TagLabel}">White</Label>
-        </WrapPanel>
-        <WrapPanel>
-            <Label Classes="Solid Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-            <Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-            <Label Classes="Solid Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-            <Label Classes="Solid Green" Theme="{StaticResource TagLabel}">Green</Label>
-            <Label Classes="Solid Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-            <Label Classes="Solid Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-            <Label Classes="Solid LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-            <Label Classes="Solid LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-            <Label Classes="Solid Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-            <Label Classes="Solid Orange" Theme="{StaticResource TagLabel}">Orange</Label>
-            <Label Classes="Solid Pink" Theme="{StaticResource TagLabel}">Pink</Label>
-            <Label Classes="Solid Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-            <Label Classes="Solid Red" Theme="{StaticResource TagLabel}">Red</Label>
-            <Label Classes="Solid Teal" Theme="{StaticResource TagLabel}">Teal</Label>
-            <Label Classes="Solid Violet" Theme="{StaticResource TagLabel}">Violet</Label>
-            <Label Classes="Solid Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
-            <Label Classes="Solid White" Theme="{StaticResource TagLabel}">White</Label>
-        </WrapPanel>
-    </StackPanel>
+    <ScrollViewer>
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
+            <StackPanel.Styles>
+                <Style Selector="Label">
+                    <Setter Property="Margin" Value="4" />
+                </Style>
+            </StackPanel.Styles>
+            <ScrollViewer HorizontalScrollBarVisibility="Auto">
+                <StackPanel Orientation="Horizontal">
+                    <StackPanel.Styles>
+                        <Style Selector="Label, TextBlock">
+                            <Setter Property="VerticalAlignment" Value="Center" />
+                            <Setter Property="Margin" Value="4" />
+                        </Style>
+                    </StackPanel.Styles>
+                    <HeaderedContentControl
+                        Width="400"
+                        Height="400"
+                        Margin="16"
+                        VerticalAlignment="Top"
+                        Header="Default Theme"
+                        Theme="{DynamicResource GroupBox}">
+                        <Grid
+                            VerticalAlignment="Top"
+                            ColumnDefinitions="Auto, *"
+                            RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
+                            <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
+                            <TextBlock Grid.Row="2" Grid.Column="0">-</TextBlock>
+                            <TextBlock Grid.Row="3" Grid.Column="0">Secondary</TextBlock>
+                            <TextBlock Grid.Row="4" Grid.Column="0">Tertiary</TextBlock>
+                            <TextBlock Grid.Row="5" Grid.Column="0">Quaternary</TextBlock>
+                            <TextBlock Grid.Row="6" Grid.Column="0">Warning</TextBlock>
+                            <TextBlock Grid.Row="7" Grid.Column="0">Danger</TextBlock>
+                            <TextBlock Grid.Row="8" Grid.Column="0">Success</TextBlock>
+                            <TextBlock Grid.Row="9" Grid.Column="0">Mark</TextBlock>
+                            <TextBlock Grid.Row="10" Grid.Column="0">Code</TextBlock>
+                            <Label Grid.Row="2" Grid.Column="1">Text</Label>
+                            <Label
+                                Grid.Row="3"
+                                Grid.Column="1"
+                                Classes="Secondary">
+                                Secondary
+                            </Label>
+                            <Label
+                                Grid.Row="4"
+                                Grid.Column="1"
+                                Classes="Tertiary">
+                                Tertiary
+                            </Label>
+                            <Label
+                                Grid.Row="5"
+                                Grid.Column="1"
+                                Classes="Quaternary">
+                                Quaternary
+                            </Label>
+                            <Label
+                                Grid.Row="6"
+                                Grid.Column="1"
+                                Classes="Warning">
+                                Warning
+                            </Label>
+                            <Label
+                                Grid.Row="7"
+                                Grid.Column="1"
+                                Classes="Danger">
+                                Danger
+                            </Label>
+                            <Label
+                                Grid.Row="8"
+                                Grid.Column="1"
+                                Classes="Success">
+                                Success
+                            </Label>
+                            <Label
+                                Grid.Row="9"
+                                Grid.Column="1"
+                                Classes="Mark">
+                                Default Mark
+                            </Label>
+                            <Label
+                                Grid.Row="10"
+                                Grid.Column="1"
+                                Classes="Code">
+                                Code
+                            </Label>
+                        </Grid>
+                    </HeaderedContentControl>
+                    <HeaderedContentControl
+                        Width="400"
+                        Height="400"
+                        Margin="16"
+                        VerticalAlignment="Top"
+                        Header="Theme: TitleLabel"
+                        Theme="{DynamicResource GroupBox}">
+                        <Grid
+                            VerticalAlignment="Top"
+                            ColumnDefinitions="Auto, *"
+                            RowDefinitions="*,*,*,*,*,*,*,*">
+                            <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
+                            <TextBlock Grid.Row="2" Grid.Column="0">H1</TextBlock>
+                            <TextBlock Grid.Row="3" Grid.Column="0">H2</TextBlock>
+                            <TextBlock Grid.Row="4" Grid.Column="0">H3</TextBlock>
+                            <TextBlock Grid.Row="5" Grid.Column="0">H4</TextBlock>
+                            <TextBlock Grid.Row="6" Grid.Column="0">H5</TextBlock>
+                            <TextBlock Grid.Row="7" Grid.Column="0">H6</TextBlock>
+                            <Label
+                                Grid.Row="2"
+                                Grid.Column="1"
+                                Classes="H1"
+                                Theme="{StaticResource TitleLabel}">
+                                Header 1
+                            </Label>
+                            <Label
+                                Grid.Row="3"
+                                Grid.Column="1"
+                                Classes="H2"
+                                Theme="{StaticResource TitleLabel}">
+                                Header 2
+                            </Label>
+                            <Label
+                                Grid.Row="4"
+                                Grid.Column="1"
+                                Classes="H3"
+                                Theme="{StaticResource TitleLabel}">
+                                Header 3
+                            </Label>
+                            <Label
+                                Grid.Row="5"
+                                Grid.Column="1"
+                                Classes="H4"
+                                Theme="{StaticResource TitleLabel}">
+                                Header 4
+                            </Label>
+                            <Label
+                                Grid.Row="6"
+                                Grid.Column="1"
+                                Classes="H5"
+                                Theme="{StaticResource TitleLabel}">
+                                Header 5
+                            </Label>
+                            <Label
+                                Grid.Row="7"
+                                Grid.Column="1"
+                                Classes="H6"
+                                Theme="{StaticResource TitleLabel}">
+                                Header 6
+                            </Label>
+                        </Grid>
+                    </HeaderedContentControl>
+                </StackPanel>
+            </ScrollViewer>
+            <WrapPanel>
+                <Label Theme="{StaticResource TagLabel}">Label</Label>
+                <Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
+                <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
+                <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
+            </WrapPanel>
+            <WrapPanel>
+                <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
+                <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
+                <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
+            </WrapPanel>
+            <WrapPanel>
+                <Label Classes="Ghost Red" Theme="{StaticResource TagLabel}">Red</Label>
+                <Label Classes="Ghost Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                <Label Classes="Ghost Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                <Label Classes="Ghost Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                <Label Classes="Ghost Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                <Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                <Label Classes="Ghost LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                <Label Classes="Ghost Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                <Label Classes="Ghost Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                <Label Classes="Ghost Green" Theme="{StaticResource TagLabel}">Green</Label>
+                <Label Classes="Ghost LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                <Label Classes="Ghost Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                <Label Classes="Ghost Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                <Label Classes="Ghost Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                <Label Classes="Ghost Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                <Label Classes="Ghost Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                <Label Classes="Ghost White" Theme="{StaticResource TagLabel}">White</Label>
+            </WrapPanel>
+            <WrapPanel>
+                <Label Classes="Solid Red" Theme="{StaticResource TagLabel}">Red</Label>
+                <Label Classes="Solid Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                <Label Classes="Solid Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                <Label Classes="Solid Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                <Label Classes="Solid Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                <Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                <Label Classes="Solid LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                <Label Classes="Solid Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                <Label Classes="Solid Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                <Label Classes="Solid Green" Theme="{StaticResource TagLabel}">Green</Label>
+                <Label Classes="Solid LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                <Label Classes="Solid Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                <Label Classes="Solid Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                <Label Classes="Solid Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                <Label Classes="Solid Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                <Label Classes="Solid Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                <Label Classes="Solid White" Theme="{StaticResource TagLabel}">White</Label>
+            </WrapPanel>
+        </StackPanel>
+    </ScrollViewer>
 </UserControl>
--- a/demo/Semi.Avalonia.Demo/Pages/ListBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ListBoxDemo.axaml
@@ -4,22 +4,145 @@
    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"
-    d:DesignHeight="450"
+    xmlns:local="clr-namespace:Semi.Avalonia.Demo.Pages"
+    d:DesignHeight="900"
    d:DesignWidth="800"
    mc:Ignorable="d">
-    <ListBox>
-        <ListBoxItem>Item 1</ListBoxItem>
-        <ListBoxItem>Item 2</ListBoxItem>
-        <ListBoxItem IsEnabled="False">Item 3</ListBoxItem>
-        <ListBoxItem>Item 4</ListBoxItem>
-        <ListBoxItem>Item 5</ListBoxItem>
-        <ListBoxItem>Item 6</ListBoxItem>
-        <ListBoxItem>Item 7</ListBoxItem>
-        <ListBoxItem IsEnabled="False">Item 8</ListBoxItem>
-        <ListBoxItem>Item 9</ListBoxItem>
-        <ListBoxItem>Item 10</ListBoxItem>
-        <ListBoxItem>Item 11</ListBoxItem>
-        <ListBoxItem>Item 12</ListBoxItem>
-        <ListBoxItem>Item 13</ListBoxItem>
-    </ListBox>
-</UserControl>
+    <ScrollViewer>
+        <Grid ColumnDefinitions="*,*,*">
+            <HeaderedContentControl
+                Grid.Column="0"
+                Theme="{StaticResource GroupBox}"
+                Header="Default">
+                <ScrollViewer>
+                    <StackPanel Spacing="20">
+                        <TextBlock Text="Theme: Default"/>
+                        <ListBox ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
+                        <ListBox IsEnabled="False">
+                            <ListBoxItem IsSelected="True">Avalonia</ListBoxItem>
+                            <ListBoxItem>WPF</ListBoxItem>
+                        </ListBox>
+                    </StackPanel>
+                </ScrollViewer>
+            </HeaderedContentControl>
+
+            <HeaderedContentControl
+                Grid.Column="1"
+                Theme="{DynamicResource GroupBox}"
+                Header="RadioGroupListBox">
+                <StackPanel Spacing="20">
+                    <TextBlock Text="Theme: RadioGroupListBox"/>
+                    <ListBox
+                        Theme="{DynamicResource RadioGroupListBox}"
+                        ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
+                    <ListBox Theme="{DynamicResource RadioGroupListBox}" IsEnabled="False">
+                        <ListBoxItem>Avalonia</ListBoxItem>
+                        <ListBoxItem IsSelected="True">WPF</ListBoxItem>
+                    </ListBox>
+
+                    <TextBlock Text="Theme: ButtonRadioGroupListBox"/>
+                    <StackPanel Orientation="Horizontal">
+                        <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                            <ListBox Theme="{DynamicResource ButtonRadioGroupListBox}">
+                                <ListBoxItem Classes="Small" IsSelected="True">Small 1</ListBoxItem>
+                                <ListBoxItem Classes="Small">Small 2</ListBoxItem>
+                            </ListBox>
+                        </Border>
+                        <Border
+                            Margin="8,0"
+                            HorizontalAlignment="Left"
+                            Theme="{StaticResource RadioButtonGroupBorder}">
+                            <ListBox Theme="{DynamicResource ButtonRadioGroupListBox}" IsEnabled="False">
+                                <ListBoxItem Classes="Small" IsSelected="True">Small 1</ListBoxItem>
+                                <ListBoxItem Classes="Small">Small 2</ListBoxItem>
+                            </ListBox>
+                        </Border>
+                    </StackPanel>
+                    <StackPanel Orientation="Horizontal">
+                        <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                            <ListBox Theme="{DynamicResource ButtonRadioGroupListBox}">
+                                <ListBoxItem IsSelected="True">Default 1</ListBoxItem>
+                                <ListBoxItem>Default 2</ListBoxItem>
+                            </ListBox>
+                        </Border>
+                        <Border
+                            Margin="8,0"
+                            HorizontalAlignment="Left"
+                            Theme="{StaticResource RadioButtonGroupBorder}">
+                            <ListBox Theme="{DynamicResource ButtonRadioGroupListBox}" IsEnabled="False">
+                                <ListBoxItem IsSelected="True">Default 1</ListBoxItem>
+                                <ListBoxItem>Default 2</ListBoxItem>
+                            </ListBox>
+                        </Border>
+                    </StackPanel>
+                    <StackPanel Orientation="Horizontal">
+                        <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                            <ListBox Theme="{DynamicResource ButtonRadioGroupListBox}">
+                                <ListBoxItem Classes="Large" IsSelected="True">Small 1</ListBoxItem>
+                                <ListBoxItem Classes="Large">Small 2</ListBoxItem>
+                            </ListBox>
+                        </Border>
+                        <Border
+                            Margin="8,0"
+                            HorizontalAlignment="Left"
+                            Theme="{StaticResource RadioButtonGroupBorder}">
+                            <ListBox Theme="{DynamicResource ButtonRadioGroupListBox}" IsEnabled="False">
+                                <ListBoxItem Classes="Large" IsSelected="True">Small 1</ListBoxItem>
+                                <ListBoxItem Classes="Large">Small 2</ListBoxItem>
+                            </ListBox>
+                        </Border>
+                    </StackPanel>
+
+                    <TextBlock Text="Theme: CardRadioGroupListBox"/>
+                    <ListBox Theme="{DynamicResource CardRadioGroupListBox}"
+                             ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
+                    <ListBox Theme="{DynamicResource CardRadioGroupListBox}" IsEnabled="False">
+                        <ListBoxItem IsSelected="True">Avalonia</ListBoxItem>
+                        <ListBoxItem>WPF</ListBoxItem>
+                    </ListBox>
+
+                    <TextBlock Text="Theme: PureCardRadioGroupListBox"/>
+                    <ListBox Theme="{DynamicResource PureCardRadioGroupListBox}"
+                             ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
+                    <ListBox Theme="{DynamicResource PureCardRadioGroupListBox}" IsEnabled="False">
+                        <ListBoxItem>Avalonia</ListBoxItem>
+                        <ListBoxItem IsSelected="True">WPF</ListBoxItem>
+                    </ListBox>
+                </StackPanel>
+            </HeaderedContentControl>
+
+            <HeaderedContentControl
+                Grid.Column="2"
+                Theme="{DynamicResource GroupBox}"
+                Header="CheckGroupListBox">
+                <ScrollViewer>
+                    <StackPanel Spacing="20">
+                        <TextBlock Text="Theme: CheckGroupListBox"/>
+                        <ListBox
+                            SelectionMode="Multiple"
+                            Theme="{DynamicResource CheckGroupListBox}"
+                            ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
+                        <ListBox Theme="{DynamicResource CheckGroupListBox}"
+                                 SelectionMode="Multiple"
+                                 IsEnabled="False">
+                            <ListBoxItem IsSelected="True">Avalonia</ListBoxItem>
+                            <ListBoxItem>WPF</ListBoxItem>
+                        </ListBox>
+
+                        <TextBlock Text="Theme: CardCheckGroupListBox"/>
+                        <ListBox
+                            SelectionMode="Multiple"
+                            Theme="{DynamicResource CardCheckGroupListBox}"
+                            ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
+                        <ListBox Theme="{DynamicResource CardCheckGroupListBox}"
+                                 SelectionMode="Multiple"
+                                 IsEnabled="False">
+                            <ListBoxItem>Avalonia</ListBoxItem>
+                            <ListBoxItem IsSelected="True">WPF</ListBoxItem>
+                        </ListBox>
+                    </StackPanel>
+                </ScrollViewer>
+            </HeaderedContentControl>
+        </Grid>
+    </ScrollViewer>
+</UserControl>
--- a/demo/Semi.Avalonia.Demo/Pages/ListBoxDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/ListBoxDemo.axaml.cs
@@ -1,6 +1,6 @@
-using Avalonia;
+using System.Collections;
+using System.Collections.Generic;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;

 namespace Semi.Avalonia.Demo.Pages;

@@ -10,4 +10,6 @@ public partial class ListBoxDemo : UserControl
    {
        InitializeComponent();
    }
+
+    public IEnumerable Items { get; set; } = new List<string> { "Ding", "Otter", "Husky", "Mr.17", "Cass", };
 }
--- a/demo/Semi.Avalonia.Demo/Pages/Overview.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/Overview.axaml
@@ -2,233 +2,402 @@
    x:Class="Semi.Avalonia.Demo.Pages.Overview"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="clr-namespace:Avalonia.Markup.Xaml.Converters;assembly=Avalonia.Markup.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"
    d:DesignHeight="1000"
-    d:DesignWidth="800"
+    d:DesignWidth="1920"
    mc:Ignorable="d">
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <converters:ColorToBrushConverter x:Key="ColorToBrushConverter" />
+        </ResourceDictionary>
+    </UserControl.Resources>
+    <UserControl.Styles>
+        <Style Selector="Border.CodeBlock">
+            <Setter Property="BorderBrush" Value="{DynamicResource SemiColorBorder}" />
+            <Setter Property="Padding" Value="16" />
+            <Setter Property="CornerRadius" Value="6" />
+            <Setter Property="Background" Value="{DynamicResource SemiColorFill0}" />
+        </Style>
+    </UserControl.Styles>
    <ScrollViewer HorizontalScrollBarVisibility="Auto">
-        <StackPanel Spacing="5">
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
-                <Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
-                <Button Classes="Tertiary" Theme="{DynamicResource SolidButton}">Tertiary</Button>
-                <Button Classes="Success" Theme="{DynamicResource SolidButton}">Success</Button>
-                <Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
-                <Button Classes="Danger" Theme="{DynamicResource SolidButton}">Danger</Button>
-                <Button
-                    Classes="Primary"
-                    IsEnabled="False"
-                    Theme="{DynamicResource SolidButton}">
-                    Danger
-                </Button>
+        <StackPanel Margin="20">
+            <StackPanel
+                Margin="20"
+                HorizontalAlignment="Center"
+                Orientation="Horizontal">
+                <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" />
+                <PathIcon
+                    Width="10"
+                    Height="10"
+                    Margin="20,0"
+                    Data="M20.5 13.5C21.3284 13.5 22 12.8284 22 12C22 11.1716 21.3284 10.5 20.5 10.5L13.5 10.5L13.5 3.5C13.5 2.67157 12.8284 2 12 2C11.1716 2 10.5 2.67157 10.5 3.5L10.5 10.5L3.5 10.5C2.67157 10.5 2 11.1716 2 12C2 12.8284 2.67157 13.5 3.5 13.5L10.5 13.5V20.5C10.5 21.3284 11.1716 22 12 22C12.8284 22 13.5 21.3284 13.5 20.5V13.5L20.5 13.5Z" />
+                <Image Width="32" Height="32">
+                    <Image.Source>
+                        <DrawingImage>
+                            <DrawingGroup>
+                                <GeometryDrawing Brush="#8B44AC" Geometry="M74.8535 85.8231C75.0263 85.8231 75.1954 85.8231 75.3679 85.8231C80.7347 85.8231 85.1439 81.8027 85.7614 76.6019L85.8357 41.7604C85.2255 18.5931 66.2537 0 42.9393 0C19.2399 0 0.02771 19.2122 0.02771 42.9116C0.02771 66.3573 18.8309 85.418 42.18 85.8231H74.8535Z" />
+                                <GeometryDrawing Brush="#F9F9FB" Geometry="M43.0585 14.6143C29.5513 14.6143 18.2555 24.082 15.4454 36.7432C18.1357 37.4975 20.1087 39.9679 20.1087 42.8992C20.1087 45.8305 18.1357 48.301 15.4454 49.0552C18.2555 61.7164 29.5513 71.1842 43.0585 71.1842C47.9754 71.1842 52.5993 69.9296 56.6276 67.723V70.9926H71.3435V44.0716C71.3569 43.7138 71.3435 43.2603 71.3435 42.8992C71.3435 27.2779 58.6799 14.6143 43.0585 14.6143ZM29.5096 42.8992C29.5096 35.4164 35.5757 29.3503 43.0585 29.3503C50.5414 29.3503 56.6074 35.4164 56.6074 42.8992C56.6074 50.3821 50.5414 56.4481 43.0585 56.4481C35.5757 56.4481 29.5096 50.3821 29.5096 42.8992Z" />
+                                <GeometryDrawing Brush="#F9F9FB" Geometry="M18.105 42.8805C18.105 45.3803 16.0785 47.4068 13.5787 47.4068C11.0789 47.4068 9.05237 45.3803 9.05237 42.8805C9.05237 40.3807 11.0789 38.3542 13.5787 38.3542C16.0785 38.3542 18.105 40.3807 18.105 42.8805Z" />
+                            </DrawingGroup>
+                        </DrawingImage>
+                    </Image.Source>
+                </Image>
            </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <Label Theme="{StaticResource TagLabel}">Label</Label>
-                <Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
-                <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
-                <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
+            <TextBlock
+                HorizontalAlignment="Center"
+                Classes="H1"
+                Text="Semi Avalonia"
+                Theme="{DynamicResource TitleTextBlock}" />
+            <TextBlock
+                MaxWidth="600"
+                Margin="0,20,0,0"
+                HorizontalAlignment="Center"
+                Classes="Secondary"
+                Text="AvaloniaUI Theme inspired by Semi Design. An easy-to-customize modern design system that helps designers and developers create high-quality products."
+                TextWrapping="Wrap" />
+            <StackPanel
+                Margin="0,10,0,0"
+                HorizontalAlignment="Center"
+                Orientation="Horizontal">
+                <TextBlock
+                    Margin="12,0"
+                    FontWeight="600"
+                    Text="Modern" />
+                <TextBlock
+                    Margin="12,0"
+                    FontWeight="600"
+                    Foreground="{Binding #color.Color, Converter={StaticResource ColorToBrushConverter}, Mode=TwoWay}"
+                    Text="Flexible" />
+                <TextBlock
+                    Margin="12,0"
+                    FontWeight="600"
+                    Text="Simple" />
            </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <Label Classes="Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
-                <Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
-                <Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
-            </StackPanel>
-            <StackPanel Orientation="Horizontal">
-                <StackPanel
-                    Margin="0,0,16,0"
-                    VerticalAlignment="Center"
-                    Orientation="Horizontal">
-                    <RadioButton Margin="0,0,8,0">Option 1</RadioButton>
-                    <RadioButton>Option 2</RadioButton>
-                </StackPanel>
-                <Border VerticalAlignment="Center" Theme="{StaticResource RadioButtonGroupBorder}">
+            <StackPanel HorizontalAlignment="Center">
+                <StackPanel>
                    <StackPanel Orientation="Horizontal">
-                        <RadioButton IsChecked="True" Theme="{StaticResource ButtonRadioButton}">选项 1</RadioButton>
-                        <RadioButton Theme="{StaticResource ButtonRadioButton}">选项 2</RadioButton>
+                        <StackPanel Margin="16,0">
+                            <Button
+                                Margin="0,8"
+                                Classes="Primary"
+                                Content="Primary"
+                                Theme="{DynamicResource SolidButton}" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Secondary"
+                                Content="Secondary"
+                                Theme="{DynamicResource SolidButton}" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Tertiary"
+                                Content="Tertiary"
+                                Theme="{DynamicResource SolidButton}" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Success"
+                                Content="Success"
+                                Theme="{DynamicResource SolidButton}" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Warning"
+                                Content="Warning"
+                                Theme="{DynamicResource SolidButton}" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Danger"
+                                Content="Danger"
+                                Theme="{DynamicResource SolidButton}" />
+                        </StackPanel>
+                        <Calendar Margin="16,0" />
+                        <StackPanel Margin="16,0">
+                            <TextBox
+                                Width="300"
+                                Margin="0,12"
+                                InnerLeftContent="https://"
+                                InnerRightContent=".com" />
+                            <DatePicker Width="300" Margin="0,12" />
+                            <CalendarDatePicker Width="300" Margin="0,12" />
+                            <NumericUpDown Width="300" Margin="0,12" />
+                            <ComboBox Width="300" Margin="0,12">
+                                <ComboBoxItem>Avalonia</ComboBoxItem>
+                                <ComboBoxItem>Semi Design</ComboBoxItem>
+                                <ComboBoxItem>IRIHI Technology</ComboBoxItem>
+                            </ComboBox>
+                        </StackPanel>
+                        <StackPanel>
+                            <UniformGrid HorizontalAlignment="Center" Columns="3">
+                                <UniformGrid.Styles>
+                                    <Style Selector="CheckBox">
+                                        <Setter Property="Margin" Value="4" />
+                                    </Style>
+                                </UniformGrid.Styles>
+                                <CheckBox Content="Windows" IsChecked="True" />
+                                <CheckBox Content="macOS" IsChecked="True" />
+                                <CheckBox Content="Linux" IsChecked="True" />
+                                <CheckBox
+                                    Content="iOS"
+                                    IsChecked="{x:Null}"
+                                    IsThreeState="True" />
+                                <CheckBox
+                                    Content="Android"
+                                    IsChecked="{x:Null}"
+                                    IsThreeState="True" />
+                                <CheckBox
+                                    Content="Wasm"
+                                    IsChecked="{x:Null}"
+                                    IsThreeState="True" />
+                            </UniformGrid>
+                            <UniformGrid HorizontalAlignment="Center" Columns="3">
+                                <UniformGrid.Styles>
+                                    <Style Selector="CheckBox">
+                                        <Setter Property="Margin" Value="4" />
+                                    </Style>
+                                </UniformGrid.Styles>
+                                <CheckBox
+                                    Content="Windows"
+                                    IsChecked="True"
+                                    Theme="{DynamicResource CardCheckBox}" />
+                                <CheckBox
+                                    Content="macOS"
+                                    IsChecked="True"
+                                    Theme="{DynamicResource CardCheckBox}" />
+                                <CheckBox
+                                    Content="Linux"
+                                    IsChecked="True"
+                                    Theme="{DynamicResource CardCheckBox}" />
+                                <CheckBox
+                                    Content="iOS"
+                                    IsChecked="{x:Null}"
+                                    IsThreeState="True"
+                                    Theme="{DynamicResource CardCheckBox}" />
+                                <CheckBox
+                                    Content="Android"
+                                    IsChecked="{x:Null}"
+                                    IsThreeState="True"
+                                    Theme="{DynamicResource CardCheckBox}" />
+                                <CheckBox
+                                    Content="Wasm"
+                                    IsChecked="{x:Null}"
+                                    IsThreeState="True"
+                                    Theme="{DynamicResource CardCheckBox}" />
+                            </UniformGrid>
+                        </StackPanel>
+
                    </StackPanel>
-                </Border>
-                <StackPanel Orientation="Horizontal">
-                    <RadioButton Margin="4" Theme="{StaticResource CardRadioButton}">
-                        <StackPanel>
-                            <TextBlock FontWeight="Bold">Option 1</TextBlock>
-                            <TextBlock Classes="Tertiary">Description 1</TextBlock>
+                    <StackPanel Orientation="Horizontal">
+                        <StackPanel Margin="16,0">
+                            <Button
+                                Margin="0,8"
+                                Classes="Primary"
+                                Content="Primary" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Secondary"
+                                Content="Secondary" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Tertiary"
+                                Content="Tertiary" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Success"
+                                Content="Success" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Warning"
+                                Content="Warning" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Danger"
+                                Content="Danger" />
                        </StackPanel>
-                    </RadioButton>
-                    <RadioButton
-                        Margin="4"
-                        IsChecked="True"
-                        Theme="{StaticResource CardRadioButton}">
-                        <StackPanel>
-                            <TextBlock FontWeight="Bold">Option 2</TextBlock>
-                            <TextBlock Classes="Tertiary">Description 2</TextBlock>
-                        </StackPanel>
-                    </RadioButton>
-                </StackPanel>
-                <StackPanel Orientation="Horizontal">
-                    <RadioButton Margin="4" Theme="{StaticResource PureCardRadioButton}">
-                        <StackPanel>
-                            <TextBlock FontWeight="Bold">Option 1</TextBlock>
-                            <TextBlock Classes="Tertiary">Description 1</TextBlock>
-                        </StackPanel>
-                    </RadioButton>
-                    <RadioButton
-                        Margin="4"
-                        IsChecked="True"
-                        Theme="{StaticResource PureCardRadioButton}">
-                        <StackPanel>
-                            <TextBlock FontWeight="Bold">Option 2</TextBlock>
-                            <TextBlock Classes="Tertiary">Description 2</TextBlock>
-                        </StackPanel>
-                    </RadioButton>
-                </StackPanel>
-            </StackPanel>
-            <StackPanel Orientation="Horizontal">
-                <StackPanel Orientation="Horizontal">
-                    <CheckBox Margin="0,0,8,0">Avalonia</CheckBox>
-                    <CheckBox Margin="0,0,8,0" IsChecked="True">WPF</CheckBox>
-                    <CheckBox IsChecked="{x:Null}" IsThreeState="True">UWP</CheckBox>
-                </StackPanel>
-                <StackPanel Orientation="Horizontal">
-                    <CheckBox Margin="4" Theme="{StaticResource CardCheckBox}">
-                        <StackPanel>
-                            <TextBlock FontWeight="Bold">Option 1</TextBlock>
-                            <TextBlock Classes="Tertiary">Description 1</TextBlock>
-                        </StackPanel>
-                    </CheckBox>
-                    <CheckBox
-                        Margin="4"
-                        IsChecked="True"
-                        Theme="{StaticResource CardCheckBox}">
-                        <StackPanel>
-                            <TextBlock FontWeight="Bold">Option 2</TextBlock>
-                            <TextBlock Classes="Tertiary">Description 2</TextBlock>
-                        </StackPanel>
-                    </CheckBox>
-                    <CheckBox
-                        Margin="4"
-                        IsChecked="{x:Null}"
-                        IsThreeState="True"
-                        Theme="{StaticResource CardCheckBox}">
-                        <StackPanel>
-                            <TextBlock FontWeight="Bold">Option 3</TextBlock>
-                            <TextBlock Classes="Tertiary">Description 3</TextBlock>
-                        </StackPanel>
-                    </CheckBox>
-                </StackPanel>
-                <StackPanel Orientation="Horizontal">
-                    <CheckBox Margin="4" Theme="{StaticResource PureCardCheckBox}">
-                        <StackPanel>
-                            <TextBlock FontWeight="Bold">Option 1</TextBlock>
-                            <TextBlock Classes="Tertiary">Description 1</TextBlock>
-                        </StackPanel>
-                    </CheckBox>
-                    <CheckBox
-                        Margin="4"
-                        IsChecked="True"
-                        Theme="{StaticResource PureCardCheckBox}">
-                        <StackPanel>
-                            <TextBlock FontWeight="Bold">Option 2</TextBlock>
-                            <TextBlock Classes="Tertiary">Description 2</TextBlock>
-                        </StackPanel>
-                    </CheckBox>
-                    <CheckBox
-                        Margin="4"
-                        IsChecked="{x:Null}"
-                        IsThreeState="True"
-                        Theme="{StaticResource PureCardCheckBox}">
-                        <StackPanel>
-                            <TextBlock FontWeight="Bold">Option 3</TextBlock>
-                            <TextBlock Classes="Tertiary">Description 3</TextBlock>
-                        </StackPanel>
-                    </CheckBox>
-                </StackPanel>
-            </StackPanel>
-            <StackPanel Orientation="Horizontal">
-                <ToggleSwitch
-                    Content="Content"
-                    OffContent="No"
-                    OnContent="Yes" />
-                <ProgressBar
-                    Classes="Right"
-                    ShowProgressText="True"
-                    Value="20" />
-                <Slider
-                    Width="200"
-                    Margin="30,0"
-                    Orientation="Horizontal"
-                    Value="30" />
-            </StackPanel>
-            <TabControl>
-                <TabItem Header="Tab 1">
-                    <TextBlock Margin="8">Tab Content 1</TextBlock>
-                </TabItem>
-                <TabItem Header="Tab 2">
-                    <TextBlock Margin="8">Tab Content 2</TextBlock>
-                </TabItem>
-                <TabItem Header="Tab 3">
-                    <TextBlock Margin="8">Tab Content 3</TextBlock>
-                </TabItem>
-            </TabControl>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <ComboBox Width="200" PlaceholderText="Please Select">
-                    <ComboBoxItem>Item 1</ComboBoxItem>
-                    <ComboBoxItem>Item 2</ComboBoxItem>
-                    <ComboBoxItem>Item 3</ComboBoxItem>
-                </ComboBox>
-                <DatePicker />
-                <TimePicker />
-                <CalendarDatePicker />
-            </StackPanel>
-            <Grid ColumnDefinitions="*, *, *">
-                <Border Theme="{StaticResource CardBorder}">
-                    <TextBlock>Card</TextBlock>
-                </Border>
-                <Border
-                    Grid.Column="1"
-                    Classes="Hover"
-                    Theme="{StaticResource CardBorder}">
-                    <TextBlock>Shadow on hover</TextBlock>
-                </Border>
-                <Border
-                    Grid.Column="2"
-                    Classes="Shadow"
-                    Theme="{StaticResource CardBorder}">
-                    <TextBlock>Shadow</TextBlock>
-                </Border>
-            </Grid>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <TextBox
-                    Width="200"
-                    InnerLeftContent="http://"
-                    InnerRightContent=".com" />
-                <TextBox
-                    Width="200"
-                    Classes="revealPasswordButton"
-                    PasswordChar="*"
-                    Text="Avalonia" />
+                        <ColorView
+                            Name="color"
+                            VerticalAlignment="Top"
+                            Palette="{DynamicResource SemiColorPalette}"
+                            SelectedIndex="2"
+                            Color="#8B44AC" />
+                        <StackPanel Width="300" Margin="8">
+                            <StackPanel Orientation="Horizontal">
+                                <Slider
+                                    Name="slider"
+                                    Width="200"
+                                    Margin="16"
+                                    Maximum="100"
+                                    Minimum="0" />
+                                <ToggleSwitch Name="three" IsChecked="True" />
+                            </StackPanel>
+                            <UniformGrid Columns="2">
+                                <ProgressBar
+                                    Width="100"
+                                    MinWidth="100"
+                                    Margin="0,16"
+                                    IsIndeterminate="{Binding #three.IsChecked}"
+                                    ShowProgressText="True"
+                                    Value="{Binding #slider.Value}" />
+                                <ProgressBar
+                                    Width="100"
+                                    Height="100"
+                                    IsIndeterminate="{Binding #three.IsChecked}"
+                                    ShowProgressText="True"
+                                    Theme="{DynamicResource ProgressRing}"
+                                    Value="{Binding #slider.Value}" />
+                            </UniformGrid>
+                            <TabStrip Margin="0,8">
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                            </TabStrip>
+                            <Menu Margin="0,8">
+                                <MenuItem Header="Menu 1">
+                                    <MenuItem Header="SubMenu 1" />
+                                    <MenuItem Header="SubMenu 2" />
+                                    <MenuItem Header="SubMenu 3" />
+                                </MenuItem>
+                                <MenuItem Header="Menu 2">
+                                    <MenuItem Header="SubMenu 1" />
+                                    <MenuItem Header="SubMenu 2" />
+                                    <MenuItem Header="SubMenu 3" />
+                                    <MenuItem Header="SubMenu 4">
+                                        <MenuItem Header="SubMenu 1" />
+                                        <MenuItem Header="SubMenu 2" />
+                                        <MenuItem Header="SubMenu 3" />
+                                    </MenuItem>
+                                </MenuItem>
+                                <MenuItem Header="Menu 3" />
+                            </Menu>

-            </StackPanel>
+                        </StackPanel>
+                        <StackPanel Margin="8">

-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <TreeView>
-                    <TreeViewItem Header="Level 1" IsExpanded="True">
-                        <TreeViewItem Header="Level 2" />
-                        <TreeViewItem Header="Level 2" />
-                        <TreeViewItem Header="Level 2" IsExpanded="True">
-                            <TreeViewItem Header="Level 3" />
-                            <TreeViewItem Header="Level 3" />
-                        </TreeViewItem>
-                    </TreeViewItem>
-                </TreeView>
-                <ListBox SelectedIndex="3">
-                    <TextBlock>List Item 1</TextBlock>
-                    <TextBlock>List Item 2</TextBlock>
-                    <TextBlock>List Item 3</TextBlock>
-                    <TextBlock>List Item 4</TextBlock>
-                    <TextBlock>List Item 5</TextBlock>
-                </ListBox>
-                <Calendar />
+                            <UniformGrid HorizontalAlignment="Center" Columns="3">
+                                <UniformGrid.Styles>
+                                    <Style Selector="RadioButton">
+                                        <Setter Property="Margin" Value="4" />
+                                        <Setter Property="HorizontalAlignment" Value="Center" />
+                                    </Style>
+                                </UniformGrid.Styles>
+                                <RadioButton Content="Avalonia" IsChecked="True" />
+                                <RadioButton Content="WPF" />
+                                <RadioButton Content="Xamarin" />
+                            </UniformGrid>
+                            <UniformGrid HorizontalAlignment="Center" Columns="3">
+                                <UniformGrid.Styles>
+                                    <Style Selector="RadioButton">
+                                        <Setter Property="Margin" Value="4" />
+                                        <Setter Property="HorizontalAlignment" Value="Center" />
+                                    </Style>
+                                </UniformGrid.Styles>
+                                <RadioButton
+                                    Content="Avalonia"
+                                    IsChecked="True"
+                                    Theme="{DynamicResource CardRadioButton}" />
+                                <RadioButton Content="WPF" Theme="{DynamicResource CardRadioButton}" />
+                                <RadioButton Content="Xamarin" Theme="{DynamicResource CardRadioButton}" />
+                            </UniformGrid>
+                            <WrapPanel Width="300">
+                                <WrapPanel.Styles>
+                                    <Style Selector="Label">
+                                        <Setter Property="Margin" Value="4" />
+                                        <Setter Property="HorizontalContentAlignment" Value="Center" />
+                                    </Style>
+                                </WrapPanel.Styles>
+                                <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
+                                <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                                <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                                <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                                <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                                <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                                <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                                <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                                <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                                <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
+                                <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                                <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                                <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                                <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                                <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                                <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                                <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
+                                <Label Classes="Large" Theme="{StaticResource TagLabel}">Large</Label>
+                                <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle</Label>
+                            </WrapPanel>
+                        </StackPanel>
+                    </StackPanel>
+                </StackPanel>
+                <TextBlock
+                    Margin="0,32,0,16"
+                    Classes="H5"
+                    Text="Start to install"
+                    Theme="{DynamicResource TitleTextBlock}" />
+                <TabControl Padding="8">
+                    <TabItem Header="Main">
+                        <StackPanel>
+                            <TextBlock Text="Install via nuget: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].MainInstall}" />
+                            </Border>
+                            <TextBlock Text="Reference styles: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock
+                                    FontFamily="Consolas"
+                                    Text="{Binding $parent[local:Overview].MainStyle}"
+                                    TextWrapping="Wrap" />
+                            </Border>
+                        </StackPanel>
+                    </TabItem>
+                    <TabItem Header="ColorPicker">
+                        <StackPanel>
+                            <TextBlock Text="Install via nuget: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].ColorPickerInstall}" />
+                            </Border>
+                            <TextBlock Text="Reference styles: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock
+                                    FontFamily="Consolas"
+                                    Text="{Binding $parent[local:Overview].ColorPickerStyle}"
+                                    TextWrapping="Wrap" />
+                            </Border>
+                        </StackPanel>
+                    </TabItem>
+                    <TabItem Header="DataGrid">
+                        <StackPanel>
+                            <TextBlock Text="Install via nuget: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].DataGridInstall}" />
+                            </Border>
+                            <TextBlock Text="Reference styles: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock
+                                    FontFamily="Consolas"
+                                    Text="{Binding $parent[local:Overview].DataGridStyle}"
+                                    TextWrapping="Wrap" />
+                            </Border>
+                        </StackPanel>
+                    </TabItem>
+                    <TabItem Header="TreeDataGrid">
+                        <StackPanel>
+                            <TextBlock Text="Install via nuget: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].TreeDataGridInstall}" />
+                            </Border>
+                            <TextBlock Text="Reference styles: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock
+                                    FontFamily="Consolas"
+                                    Text="{Binding $parent[local:Overview].TreeDataGridStyle}"
+                                    TextWrapping="Wrap" />
+                            </Border>
+                        </StackPanel>
+                    </TabItem>
+                </TabControl>
            </StackPanel>
        </StackPanel>
    </ScrollViewer>
--- a/demo/Semi.Avalonia.Demo/Pages/Overview.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/Overview.axaml.cs
@@ -13,16 +13,35 @@ public partial class Overview : UserControl
        InitializeComponent();
    }

-    private void ToggleButton_OnIsCheckedChanged(object sender, RoutedEventArgs e)
-    {
-        var variant = Application.Current!.RequestedThemeVariant;
-        if (variant?.Key == "Dark")
-        {
-            Application.Current!.RequestedThemeVariant = ThemeVariant.Light;
-        }
-        else
-        {
-            Application.Current!.RequestedThemeVariant = ThemeVariant.Dark;
-        }
-    }
+    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.0.1";
+
+    public string MainStyle { get; set; } = """
+<Application.Styles>
+    <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
+</Application.Styles>
+""";
+
+    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.0.1";
+
+    public string ColorPickerStyle { get; set; } = """
+<Application.Styles>
+    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+</Application.Styles>
+""";
+
+    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.0.1";
+
+    public string DataGridStyle { get; set; } = """
+<Application.Styles>
+    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+</Application.Styles>
+""";
+
+    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.1";
+
+    public string TreeDataGridStyle { get; set; } = """
+<Application.Styles>
+    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
+</Application.Styles>
+""";
 }
--- a/demo/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml
@@ -107,81 +107,54 @@
            </StackPanel>
            <TextBlock Text="Radio Button as Card" />
            <StackPanel Orientation="Horizontal">
-                <RadioButton Width="300" Theme="{DynamicResource CardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </RadioButton>
                <RadioButton
                    Width="300"
+                    Content="Avalonia"
                    IsChecked="True"
-                    Theme="{DynamicResource CardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </RadioButton>
+                    Theme="{DynamicResource CardRadioButton}" />
+                <RadioButton
+                    Width="300"
+                    Content="WPF"
+                    IsChecked="True"
+                    Theme="{DynamicResource CardRadioButton}" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <RadioButton
                    Width="300"
+                    Content="Avalonia"
                    IsEnabled="False"
-                    Theme="{DynamicResource CardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </RadioButton>
+                    Theme="{DynamicResource CardRadioButton}" />
                <RadioButton
                    Width="300"
+                    Content="WPF"
                    IsChecked="True"
                    IsEnabled="False"
-                    Theme="{DynamicResource CardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </RadioButton>
+                    Theme="{DynamicResource CardRadioButton}" />
            </StackPanel>
            <TextBlock Text="Radio Button as Pure Card" />
            <StackPanel Orientation="Horizontal">
-                <RadioButton Width="300" Theme="{DynamicResource PureCardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </RadioButton>
                <RadioButton
                    Width="300"
+                    Content="Avalonia"
                    IsChecked="True"
-                    Theme="{DynamicResource PureCardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </RadioButton>
+                    Theme="{DynamicResource PureCardRadioButton}" />
+                <RadioButton
+                    Width="300"
+                    Content="WPF"
+                    Theme="{DynamicResource PureCardRadioButton}" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <RadioButton
                    Width="300"
-                    IsEnabled="False"
-                    Theme="{DynamicResource PureCardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </RadioButton>
-                <RadioButton
-                    Width="300"
+                    Content="Avalonia"
                    IsChecked="True"
                    IsEnabled="False"
-                    Theme="{DynamicResource PureCardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </RadioButton>
+                    Theme="{DynamicResource PureCardRadioButton}" />
+                <RadioButton
+                    Width="300"
+                    Content="WPF"
+                    IsEnabled="False"
+                    Theme="{DynamicResource PureCardRadioButton}" />
            </StackPanel>
        </StackPanel>
    </ScrollViewer>
--- a/demo/Semi.Avalonia.Demo/Pages/ScrollViewerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ScrollViewerDemo.axaml
@@ -7,27 +7,69 @@
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
-    <StackPanel>
-        <ScrollViewer
-            Width="200"
-            Height="200"
-            Margin="10"
-            HorizontalScrollBarVisibility="Auto">
-            <Rectangle
-                Width="300"
-                Height="300"
-                Fill="{DynamicResource SemiYellow2}" />
-        </ScrollViewer>
-        <ScrollViewer
-            Width="200"
-            Height="200"
-            Margin="10"
-            HorizontalScrollBarVisibility="Auto"
-            Theme="{DynamicResource StaticScrollViewer}">
-            <Rectangle
-                Width="300"
-                Height="300"
-                Fill="{DynamicResource SemiYellow2}" />
-        </ScrollViewer>
-    </StackPanel>
-</UserControl>
+    <ScrollViewer>
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
+            <ScrollViewer
+                Width="200"
+                Height="200"
+                Margin="10"
+                HorizontalScrollBarVisibility="Auto">
+                <Grid RowDefinitions="Auto,Auto"
+                      ColumnDefinitions="Auto,Auto"
+                      Width="300" Height="300">
+                    <Rectangle
+                        Grid.Row="0" Grid.Column="0"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiYellow2}" />
+                    <Rectangle
+                        Grid.Row="0" Grid.Column="1"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiBlue2}" />
+                    <Rectangle
+                        Grid.Row="1" Grid.Column="0"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiPink2}" />
+                    <Rectangle
+                        Grid.Row="1" Grid.Column="1"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiGreen2}" />
+                </Grid>
+            </ScrollViewer>
+            <ScrollViewer
+                Width="200"
+                Height="200"
+                Margin="10"
+                HorizontalScrollBarVisibility="Auto"
+                Theme="{DynamicResource StaticScrollViewer}">
+                <Grid RowDefinitions="Auto,Auto"
+                      ColumnDefinitions="Auto,Auto"
+                      Width="300" Height="300">
+                    <Rectangle
+                        Grid.Row="0" Grid.Column="0"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiYellow2}" />
+                    <Rectangle
+                        Grid.Row="0" Grid.Column="1"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiBlue2}" />
+                    <Rectangle
+                        Grid.Row="1" Grid.Column="0"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiPink2}" />
+                    <Rectangle
+                        Grid.Row="1" Grid.Column="1"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiGreen2}" />
+                </Grid>
+            </ScrollViewer>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>
--- a/demo/Semi.Avalonia.Demo/Pages/SelectableTextBlock.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/SelectableTextBlock.axaml
@@ -0,0 +1,163 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.SelectableTextBlockDemo"
+    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"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
+        <StackPanel Orientation="Horizontal">
+            <StackPanel.Styles>
+                <Style Selector="SelectableTextBlock">
+                    <Setter Property="VerticalAlignment" Value="Center" />
+                    <Setter Property="Margin" Value="4" />
+                </Style>
+            </StackPanel.Styles>
+            <HeaderedContentControl
+                Width="400"
+                Height="400"
+                Margin="16"
+                VerticalAlignment="Top"
+                Header="Default Theme"
+                Theme="{DynamicResource GroupBox}">
+                <Grid
+                    VerticalAlignment="Top"
+                    ColumnDefinitions="Auto, *"
+                    RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
+                    <SelectableTextBlock Grid.Row="1" Grid.Column="0">Classes</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="2" Grid.Column="0">-</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="3" Grid.Column="0">Secondary</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="4" Grid.Column="0">Tertiary</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="5" Grid.Column="0">Quaternary</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">Warning</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">Danger</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="8" Grid.Column="0">Success</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="9" Grid.Column="0">Mark</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="10" Grid.Column="0">Underline</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="11" Grid.Column="0">Delete</SelectableTextBlock>
+
+                    <SelectableTextBlock Grid.Row="2" Grid.Column="1">Text</SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="3"
+                        Grid.Column="1"
+                        Classes="Secondary">
+                        Secondary
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="4"
+                        Grid.Column="1"
+                        Classes="Tertiary">
+                        Tertiary
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="5"
+                        Grid.Column="1"
+                        Classes="Quaternary">
+                        Quaternary
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="6"
+                        Grid.Column="1"
+                        Classes="Warning">
+                        Warning
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="7"
+                        Grid.Column="1"
+                        Classes="Danger">
+                        Danger
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="8"
+                        Grid.Column="1"
+                        Classes="Success">
+                        Success
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="9"
+                        Grid.Column="1"
+                        Classes="Mark">
+                        Default Mark
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="10"
+                        Grid.Column="1"
+                        Classes="Underline">
+                        Underline
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="11"
+                        Grid.Column="1"
+                        Classes="Delete">
+                        Delete
+                    </SelectableTextBlock>
+                </Grid>
+            </HeaderedContentControl>
+            <HeaderedContentControl
+                Width="400"
+                Height="400"
+                Margin="16"
+                VerticalAlignment="Top"
+                Header="Theme: TitleSelectableTextBlock"
+                Theme="{DynamicResource GroupBox}">
+                <Grid
+                    VerticalAlignment="Top"
+                    Background="{Binding}"
+                    ColumnDefinitions="Auto, *"
+                    RowDefinitions="*,*,*,*,*,*,*,*">
+                    <SelectableTextBlock Grid.Row="1" Grid.Column="0">Classes</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="2" Grid.Column="0">H1</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="3" Grid.Column="0">H2</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="4" Grid.Column="0">H3</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="5" Grid.Column="0">H4</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">H5</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">H6</SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="2"
+                        Grid.Column="1"
+                        Classes="H1"
+                        Theme="{StaticResource TitleSelectableTextBlock}">
+                        Header 1
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="3"
+                        Grid.Column="1"
+                        Classes="H2"
+                        Theme="{StaticResource TitleSelectableTextBlock}">
+                        Header 2
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="4"
+                        Grid.Column="1"
+                        Classes="H3"
+                        Theme="{StaticResource TitleSelectableTextBlock}">
+                        Header 3
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="5"
+                        Grid.Column="1"
+                        Classes="H4"
+                        Theme="{StaticResource TitleSelectableTextBlock}">
+                        Header 4
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="6"
+                        Grid.Column="1"
+                        Classes="H5"
+                        Theme="{StaticResource TitleSelectableTextBlock}">
+                        Header 5
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="7"
+                        Grid.Column="1"
+                        Classes="H6"
+                        Theme="{StaticResource TitleSelectableTextBlock}">
+                        Header 6
+                    </SelectableTextBlock>
+                </Grid>
+            </HeaderedContentControl>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>
--- a/demo/Semi.Avalonia.Demo/Pages/SelectableTextBlock.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/SelectableTextBlock.axaml.cs
@@ -2,11 +2,11 @@ using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;

-namespace Semi.Avalonia.Demo.Android.Views;
+namespace Semi.Avalonia.Demo.Pages;

-public partial class MainView : UserControl
+public partial class SelectableTextBlockDemo : UserControl
 {
-    public MainView()
+    public SelectableTextBlockDemo()
    {
        InitializeComponent();
    }
--- a/demo/Semi.Avalonia.Demo/Pages/TextBlockDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TextBlockDemo.axaml
@@ -7,82 +7,157 @@
    d:DesignHeight="600"
    d:DesignWidth="800"
    mc:Ignorable="d">
-    <StackPanel Orientation="Horizontal">
-        <StackPanel
-            Margin="20"
-            HorizontalAlignment="Left"
-            Spacing="5">
-            <TextBlock>Styles for TextBlock</TextBlock>
-            <TextBlock Classes="H1" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
-            <TextBlock Classes="H2" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
-            <TextBlock Classes="H3" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
-            <TextBlock Classes="H4" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
-            <TextBlock Classes="H5" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
-            <TextBlock Classes="H6" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
+    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
+        <StackPanel Orientation="Horizontal">
+            <StackPanel.Styles>
+                <Style Selector="TextBlock">
+                    <Setter Property="VerticalAlignment" Value="Center" />
+                    <Setter Property="Margin" Value="4" />
+                </Style>
+            </StackPanel.Styles>
+            <HeaderedContentControl
+                Width="400"
+                Height="400"
+                Margin="16"
+                VerticalAlignment="Top"
+                Header="Default Theme"
+                Theme="{DynamicResource GroupBox}">
+                <Grid
+                    VerticalAlignment="Top"
+                    ColumnDefinitions="Auto, *"
+                    RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
+                    <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
+                    <TextBlock Grid.Row="2" Grid.Column="0">-</TextBlock>
+                    <TextBlock Grid.Row="3" Grid.Column="0">Secondary</TextBlock>
+                    <TextBlock Grid.Row="4" Grid.Column="0">Tertiary</TextBlock>
+                    <TextBlock Grid.Row="5" Grid.Column="0">Quaternary</TextBlock>
+                    <TextBlock Grid.Row="6" Grid.Column="0">Warning</TextBlock>
+                    <TextBlock Grid.Row="7" Grid.Column="0">Danger</TextBlock>
+                    <TextBlock Grid.Row="8" Grid.Column="0">Success</TextBlock>
+                    <TextBlock Grid.Row="9" Grid.Column="0">Mark</TextBlock>
+                    <TextBlock Grid.Row="10" Grid.Column="0">Underline</TextBlock>
+                    <TextBlock Grid.Row="11" Grid.Column="0">Delete</TextBlock>

-            <TextBlock>Text</TextBlock>
-            <TextBlock Classes="Secondary">Secondary</TextBlock>
-            <TextBlock Classes="Tertiary">Tertiary</TextBlock>
-            <TextBlock Classes="Quaternary">Quaternary</TextBlock>
-            <TextBlock Classes="Warning">Warning</TextBlock>
-            <TextBlock Classes="Warning" IsEnabled="False">Warning disabled</TextBlock>
-            <TextBlock Classes="Danger">Danger</TextBlock>
-            <TextBlock Classes="Success">Success</TextBlock>
-            <TextBlock IsEnabled="False">Disabled</TextBlock>
-            <TextBlock Classes="Mark">Default Mark</TextBlock>
-            <TextBlock Classes="Underline">Underline</TextBlock>
-            <TextBlock Classes="Delete">Delete</TextBlock>
-            <TextBlock Classes="Underline Delete">Underline and Delete</TextBlock>
-        </StackPanel>
-        <StackPanel
-            Margin="20"
-            HorizontalAlignment="Left"
-            Spacing="5">
-            <TextBlock>Styles for SelectableTextBlock</TextBlock>
-            <SelectableTextBlock Classes="H1" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
-            <SelectableTextBlock Classes="H2" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
-            <SelectableTextBlock Classes="H3" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
-            <SelectableTextBlock Classes="H4" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
-            <SelectableTextBlock Classes="H5" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
-            <SelectableTextBlock Classes="H6" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
+                    <TextBlock Grid.Row="2" Grid.Column="1">Text</TextBlock>
+                    <TextBlock
+                        Grid.Row="3"
+                        Grid.Column="1"
+                        Classes="Secondary">
+                        Secondary
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="4"
+                        Grid.Column="1"
+                        Classes="Tertiary">
+                        Tertiary
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="5"
+                        Grid.Column="1"
+                        Classes="Quaternary">
+                        Quaternary
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="6"
+                        Grid.Column="1"
+                        Classes="Warning">
+                        Warning
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="7"
+                        Grid.Column="1"
+                        Classes="Danger">
+                        Danger
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="8"
+                        Grid.Column="1"
+                        Classes="Success">
+                        Success
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="9"
+                        Grid.Column="1"
+                        Classes="Mark">
+                        Default Mark
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="10"
+                        Grid.Column="1"
+                        Classes="Underline">
+                        Underline
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="11"
+                        Grid.Column="1"
+                        Classes="Delete">
+                        Delete
+                    </TextBlock>
+                </Grid>
+            </HeaderedContentControl>
+            <HeaderedContentControl
+                Width="400"
+                Height="400"
+                Margin="16"
+                VerticalAlignment="Top"
+                Header="Theme: TitleTextBlock"
+                Theme="{DynamicResource GroupBox}">
+                <Grid
+                    VerticalAlignment="Top"
+                    ColumnDefinitions="Auto, *"
+                    RowDefinitions="*,*,*,*,*,*,*,*">
+                    <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
+                    <TextBlock Grid.Row="2" Grid.Column="0">H1</TextBlock>
+                    <TextBlock Grid.Row="3" Grid.Column="0">H2</TextBlock>
+                    <TextBlock Grid.Row="4" Grid.Column="0">H3</TextBlock>
+                    <TextBlock Grid.Row="5" Grid.Column="0">H4</TextBlock>
+                    <TextBlock Grid.Row="6" Grid.Column="0">H5</TextBlock>
+                    <TextBlock Grid.Row="7" Grid.Column="0">H6</TextBlock>
+                    <TextBlock
+                        Grid.Row="2"
+                        Grid.Column="1"
+                        Classes="H1"
+                        Theme="{StaticResource TitleTextBlock}">
+                        Header 1
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="3"
+                        Grid.Column="1"
+                        Classes="H2"
+                        Theme="{StaticResource TitleTextBlock}">
+                        Header 2
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="4"
+                        Grid.Column="1"
+                        Classes="H3"
+                        Theme="{StaticResource TitleTextBlock}">
+                        Header 3
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="5"
+                        Grid.Column="1"
+                        Classes="H4"
+                        Theme="{StaticResource TitleTextBlock}">
+                        Header 4
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="6"
+                        Grid.Column="1"
+                        Classes="H5"
+                        Theme="{StaticResource TitleTextBlock}">
+                        Header 5
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="7"
+                        Grid.Column="1"
+                        Classes="H6"
+                        Theme="{StaticResource TitleTextBlock}">
+                        Header 6
+                    </TextBlock>
+                </Grid>

-            <SelectableTextBlock>Text</SelectableTextBlock>
-            <SelectableTextBlock Classes="Secondary">Secondary</SelectableTextBlock>
-            <SelectableTextBlock Classes="Tertiary">Tertiary</SelectableTextBlock>
-            <SelectableTextBlock Classes="Quaternary">Quaternary</SelectableTextBlock>
-            <SelectableTextBlock Classes="Warning">Warning</SelectableTextBlock>
-            <SelectableTextBlock Classes="Warning" IsEnabled="False">Warning disabled</SelectableTextBlock>
-            <SelectableTextBlock Classes="Danger">Danger</SelectableTextBlock>
-            <SelectableTextBlock Classes="Success">Success</SelectableTextBlock>
-            <SelectableTextBlock IsEnabled="False">Disabled</SelectableTextBlock>
-            <SelectableTextBlock Classes="Mark">Default Mark</SelectableTextBlock>
-            <SelectableTextBlock Classes="Underline">Underline</SelectableTextBlock>
-            <SelectableTextBlock Classes="Delete">Delete</SelectableTextBlock>
-            <SelectableTextBlock Classes="Underline Delete">Underline and Delete</SelectableTextBlock>
+            </HeaderedContentControl>
        </StackPanel>
-        <StackPanel
-            Margin="20"
-            HorizontalAlignment="Left"
-            Spacing="5">
-            <TextBlock>Styles for Label</TextBlock>
-            <Label Classes="H1" Theme="{StaticResource TitleLabel}">Header 1</Label>
-            <Label Classes="H2" Theme="{StaticResource TitleLabel}">Header 1</Label>
-            <Label Classes="H3" Theme="{StaticResource TitleLabel}">Header 1</Label>
-            <Label Classes="H4" Theme="{StaticResource TitleLabel}">Header 1</Label>
-            <Label Classes="H5" Theme="{StaticResource TitleLabel}">Header 1</Label>
-            <Label Classes="H6" Theme="{StaticResource TitleLabel}">Header 1</Label>
-
-            <Label>Text</Label>
-            <Label Classes="Secondary">Secondary</Label>
-            <Label Classes="Tertiary">Tertiary</Label>
-            <Label Classes="Quaternary">Quaternary</Label>
-            <Label Classes="Warning">Warning</Label>
-            <Label Classes="Warning" IsEnabled="False">Warning disabled</Label>
-            <Label Classes="Danger">Danger</Label>
-            <Label Classes="Success">Success</Label>
-            <Label IsEnabled="False">Disabled</Label>
-            <Label Classes="Mark">Default Mark</Label>
-            <Label Classes="Code">Example Code</Label>
-        </StackPanel>
-    </StackPanel>
+    </ScrollViewer>
 </UserControl>
--- a/demo/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml
@@ -4,53 +4,79 @@
    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:models="using:Semi.Avalonia.Demo.Pages"
    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.Pages"
    d:DesignHeight="450"
    d:DesignWidth="800"
    x:CompileBindings="True"
    x:DataType="vm:TreeViewVm"
    mc:Ignorable="d">
-    <StackPanel HorizontalAlignment="Left">
-        <TreeView>
-            <TreeViewItem Header="Level 1">
-                <TreeViewItem Header="Level 2" />
-                <TreeViewItem Header="Level 2" />
-                <TreeViewItem Header="Level 2" />
-                <TreeViewItem Header="Level 2" />
-                <TreeViewItem Header="Level 2">
-                    <TreeViewItem Header="Level 3" />
-                    <TreeViewItem Header="Level 3" />
-                    <TreeViewItem>
-                        <TreeViewItem.Header>
-                            <StackPanel>
-                                <TextBlock>Layer 1</TextBlock>
-                                <TextBlock>Layer 2</TextBlock>
-                                <TextBlock>Layer 3</TextBlock>
-                            </StackPanel>
-                        </TreeViewItem.Header>
-                        <TreeViewItem Header="Level 4" />
-                        <TreeViewItem Header="Level 4" />
-                        <TreeViewItem Header="Level 4" />
-                        <TreeViewItem Header="Level 4" />
-                        <TreeViewItem Header="Level 4" />
-                        <TreeViewItem Header="Level 4" />
+
+    <Grid ColumnDefinitions="*,*,*">
+
+        <Border Theme="{StaticResource CardBorder}">
+            <TreeView>
+                <TreeViewItem Header="Level 1">
+                    <TreeViewItem Header="Level 2" />
+                    <TreeViewItem Header="Level 2" />
+                    <TreeViewItem Header="Level 2" />
+                    <TreeViewItem Header="Level 2" />
+                    <TreeViewItem Header="Level 2">
+                        <TreeViewItem Header="Level 3" />
+                        <TreeViewItem Header="Level 3" />
+                        <TreeViewItem>
+                            <TreeViewItem.Header>
+                                <StackPanel>
+                                    <TextBlock>Layer 1</TextBlock>
+                                    <TextBlock>Layer 2</TextBlock>
+                                    <TextBlock>Layer 3</TextBlock>
+                                </StackPanel>
+                            </TreeViewItem.Header>
+                            <TreeViewItem Header="Level 4" />
+                            <TreeViewItem Header="Level 4" />
+                            <TreeViewItem Header="Level 4" />
+                            <TreeViewItem Header="Level 4" />
+                            <TreeViewItem Header="Level 4" />
+                            <TreeViewItem Header="Level 4" />
+                        </TreeViewItem>
+                        <TreeViewItem Header="Level 3" />
+                        <TreeViewItem Header="Level 3" />
+                        <TreeViewItem Header="Level 3" />
+                        <TreeViewItem Header="Level 3" />
+                        <TreeViewItem Header="Level 3" />
+                        <TreeViewItem Header="Level 3" />
+                        <TreeViewItem Header="Level 3" />
                    </TreeViewItem>
-                    <TreeViewItem Header="Level 3" />
-                    <TreeViewItem Header="Level 3" />
-                    <TreeViewItem Header="Level 3" />
-                    <TreeViewItem Header="Level 3" />
-                    <TreeViewItem Header="Level 3" />
-                    <TreeViewItem Header="Level 3" />
-                    <TreeViewItem Header="Level 3" />
                </TreeViewItem>
-            </TreeViewItem>
-        </TreeView>
-        <TreeView ItemsSource="{Binding Items}">
-            <TreeView.ItemTemplate>
-                <TreeDataTemplate ItemsSource="{Binding Items}">
-                    <TextBlock Text="{Binding Name}" />
-                </TreeDataTemplate>
-            </TreeView.ItemTemplate>
-        </TreeView>
-    </StackPanel>
+            </TreeView>
+        </Border>
+
+        <Border Grid.Column="1" Theme="{StaticResource CardBorder}">
+            <TreeView Margin="0,10" ItemsSource="{Binding Items}">
+                <TreeView.ItemTemplate>
+                    <TreeDataTemplate ItemsSource="{Binding Items}">
+                        <TextBlock Text="{Binding Name}" />
+                    </TreeDataTemplate>
+                </TreeView.ItemTemplate>
+            </TreeView>
+        </Border>
+
+        <Border Grid.Column="2" Theme="{StaticResource CardBorder}">
+            <TreeView ItemsSource="{Binding MultipleLevelItems}">
+                <TreeView.DataTemplates>
+                    <TreeDataTemplate DataType="models:FirstItem" ItemsSource="{Binding SecondItems}">
+                        <TextBlock Text="{Binding Name}" />
+                    </TreeDataTemplate>
+                    <TreeDataTemplate DataType="models:SecondItem" ItemsSource="{Binding ThirdItemItems}">
+                        <TextBlock Text="{Binding Name}" />
+                    </TreeDataTemplate>
+                    <TreeDataTemplate DataType="models:ThirdItem">
+                        <TextBlock Text="{Binding Name}" />
+                    </TreeDataTemplate>
+                </TreeView.DataTemplates>
+            </TreeView>
+        </Border>
+
+    </Grid>
+
 </UserControl>
--- a/demo/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml.cs
@@ -19,6 +19,8 @@ public class TreeViewVm : ObservableObject
 {
    public ObservableCollection<TreeViewItemVm> Items { get; set; }

+    public ObservableCollection<FirstItem>? MultipleLevelItems { get; set; }
+
    public TreeViewVm()
    {
        Items = new ObservableCollection<TreeViewItemVm>()
@@ -33,6 +35,25 @@ public class TreeViewVm : ObservableObject
            },
            },
        };
+
+        MultipleLevelItems = new();
+        for (int i = 1; i < 6; i++)
+        {
+            FirstItem firstItem = new FirstItem { Id = i, Name = $"FirstItem {i}" };
+            firstItem.SecondItems = new();
+            for (int j = 1; j < 6; j++)
+            {
+                SecondItem secondItem = new SecondItem { Id = j, Name = $"SecondItem {j}" };
+                secondItem.ThirdItemItems = new();
+                for (int k = 1; k < 6; k++)
+                {
+                    ThirdItem thirdItem = new ThirdItem { Id = k, Name = $"ThirdItem {k}" };
+                    secondItem.ThirdItemItems.Add(thirdItem);
+                }
+                firstItem.SecondItems.Add(secondItem);
+            }
+            MultipleLevelItems.Add(firstItem);
+        }
    }
 }

@@ -41,4 +62,25 @@ public partial class TreeViewItemVm : ObservableObject
    public ObservableCollection<TreeViewItemVm> Items { get; set; }
    public string Name { get; set; }
    public string Id { get; set; }
-}
+}
+
+public class ItemBase
+{
+    public int Id { get; set; }
+    public string? Name { get; set; }
+}
+public class FirstItem : ItemBase
+{
+    public ObservableCollection<SecondItem>? SecondItems { get; set; }
+}
+public class SecondItem : ItemBase
+{
+    public ObservableCollection<ThirdItem>? ThirdItemItems { get; set; }
+
+}
+public class ThirdItem : ItemBase
+{
+}
+
+
+
--- a/demo/Semi.Avalonia.Demo/ViewModels/DataGridDemoViewModel.cs
+++ b/demo/Semi.Avalonia.Demo/ViewModels/DataGridDemoViewModel.cs
@@ -0,0 +1,153 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using Avalonia.Collections;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class DataGridDemoViewModel: ObservableObject
+{
+    public ObservableCollection<Song> GridData1 { get; set; }
+    
+    public DataGridCollectionView GridData2 { get; set; }
+    
+    public ObservableCollection<SongViewModel> GridData3 { get; set; }
+
+    public DataGridDemoViewModel()
+    {
+        GridData1 = new ObservableCollection<Song>(Song.Songs);
+        GridData2 = new DataGridCollectionView(Song.Songs);
+        GridData2.GroupDescriptions.Add(new DataGridPathGroupDescription("Album"));
+        GridData3 = new ObservableCollection<SongViewModel>(Song.Songs.Take(10).Select(a=>new SongViewModel()
+        {
+            Title = a.Title,
+            Artist = a.Artist,
+            Album = a.Album,
+            CountOfComment = a.CountOfComment,
+            IsSelected = false
+        }));
+    }
+}
+
+public class Song
+{
+    public string? Title { get; set; }
+    public string? Artist { get; set; }
+    public TimeSpan? Duration { get; set; }
+    public string? Album { get; set; }
+    public int CountOfComment { get; set; }
+    public string Url { get; set; }
+
+    public Song(string title, string artist, int m, int s, string album, int countOfComment, int netEaseId)
+    {
+        Title = title;
+        Artist = artist;
+        Duration = new TimeSpan(0, m, s);
+        Album = album;
+        CountOfComment = countOfComment;
+        Url = $"https://music.163.com/song?id={netEaseId}";
+        
+    }
+
+    public static List<Song> Songs { get; set; } = new List<Song>()
+    {
+        new("好肚有肚(feat.李玲玉)", "熊猫堂ProducePandas", 2, 50, "A.S.I.A", 730, 1487039339),
+        new("荒诞秀", "熊猫堂ProducePandas", 3, 15, "A.S.I.A", 639, 1487037601),
+        new("长大", "熊猫堂ProducePandas", 4, 6, "A.S.I.A", 1114, 1487037690),
+        new("招财猫(feat.纪粹希(G-Tracy))", "熊猫堂ProducePandas", 3, 37, "A.S.I.A", 361, 1487039632),
+        new("千转", "熊猫堂ProducePandas", 4, 0, "A.S.I.A", 1115, 1477312398),
+        new("辣辣辣", "熊猫堂ProducePandas", 3, 24, "A.S.I.A", 1873, 1465043716),
+        new("碎碎念", "熊猫堂ProducePandas", 3, 25, "A.S.I.A", 676, 1474142064),
+        new("盘他", "熊猫堂ProducePandas", 2, 16, "A.S.I.A", 365, 1481652786),
+        new("Na Na Na", "熊猫堂ProducePandas", 3, 26, "A.S.I.A", 312, 1469022662),
+        new("Indigo", "熊猫堂ProducePandas", 3, 15, "A.S.I.A", 137, 1487039517),
+        new("饕餮人间", "熊猫堂ProducePandas", 3, 20, "饕餮人间", 1295, 1499584605),
+        new("七步咙咚呛", "熊猫堂ProducePandas", 3, 10, "七步咙咚呛", 175, 1809095152),
+        new("大惊小怪", "熊猫堂ProducePandas", 3, 32, "大惊小怪", 10420, 1847477425),
+        new("工具人", "熊猫堂ProducePandas", 2, 46, "大惊小怪", 1135, 1847476499),
+        new("以梦为马", "熊猫堂ProducePandas", 4, 19, "大惊小怪", 18361, 1836034373),
+        new("以梦为马(Piano Version)", "熊猫堂ProducePandas", 3, 4, "大惊小怪", 570, 1847477423),
+        new("The ONE", "熊猫堂ProducePandas", 2, 58, "The ONE", 1508, 1864329424),
+        new("The ONE(日文版)", "熊猫堂ProducePandas", 2, 57, "The ONE", 385, 1864329429),
+        new("以梦为马 (壮志骄阳版)", "熊猫堂ProducePandas", 4, 19, "以梦为马 (壮志骄阳版)", 161, 1865138896),
+        new("New Horse", "熊猫堂ProducePandas", 2, 30, "emo了", 643, 1887021307),
+        new("不例外", "熊猫堂ProducePandas", 3, 31, "emo了", 1818, 1887022665),
+        new("满意", "熊猫堂ProducePandas", 4, 32, "emo了", 1081, 1882433472),
+        new("就算与全世界为敌也要跟你在一起", "熊猫堂ProducePandas", 3, 32, "emo了", 2119, 1881759960),
+        new("The ONE", "熊猫堂ProducePandas", 2, 58, "emo了", 67, 1887022648),
+        new("口香糖", "熊猫堂ProducePandas", 3, 10, "emo了", 2181, 1885502254),
+        new("Suuuuuuper Mario", "熊猫堂ProducePandas", 3, 32, "emo了", 1010, 1887021318),
+        new("饕餮人间", "熊猫堂ProducePandas", 3, 22, "emo了", 109, 1887021320),
+        new("以梦为马 (壮志骄阳版)", "熊猫堂ProducePandas", 4, 21, "emo了", 34, 1887022666),
+        new("The ONE(日文版)", "熊猫堂ProducePandas", 2, 57, "emo了", 27, 1887022646),
+        new("满意(DJheap九天版)", "熊猫堂ProducePandas", 4, 31, "emo了", 31, 1901605941),
+        new("一眼万年", "熊猫堂ProducePandas", 3, 54, "一眼万年", 20, 1922599361),
+        new("冲刺", "熊猫堂ProducePandas", 3, 49, "冲刺吧", 1006, 1932878194),
+        new("滴答滴", "熊猫堂ProducePandas", 2, 30, "爱的赏味期限", 86, 1957515790),
+        new("热带季风", "熊猫堂ProducePandas", 2, 45, "爱的赏味期限", 212, 1957514964),
+        new("渣", "熊猫堂ProducePandas", 3, 28, "爱的赏味期限", 22, 1957514965),
+        new("独特", "熊猫堂ProducePandas", 3, 33, "爱的赏味期限", 62, 1957514966),
+        new("雨后", "熊猫堂ProducePandas", 4, 15, "爱的赏味期限", 23, 1957514967),
+        new("然后然后", "熊猫堂ProducePandas", 3, 50, "爱的赏味期限", 108, 1957514968),
+        new("丢", "熊猫堂ProducePandas", 3, 26, "爱的赏味期限", 30, 1957515792),
+        new("热带疾风(FACEVOID桃心连哥 Remix)", "熊猫堂ProducePandas", 3, 23, "爱的赏味期限", 55, 1957515793),
+        new("COSMIC ANTHEM -Japanese Ver.-", "熊猫堂ProducePandas", 3, 11, "COSMIC ANTHEM / 手紙", 0, 1977171493),
+        new("手紙 (「長大-You Raise Me Up-」-Japanese Ver.-)", "熊猫堂ProducePandas", 4, 11, "COSMIC ANTHEM / 手紙", 0,
+            1977171494),
+        new("COSMIC ANTHEM -Chinese Ver.-", "熊猫堂ProducePandas", 3, 31, "COSMIC ANTHEM / 手紙", 0, 1977172202),
+        new("世界晚安", "熊猫堂ProducePandas", 2, 59, "世界晚安", 652, 1985063377),
+        new("世界晚安(泰文版)", "熊猫堂ProducePandas", 2, 59, "世界晚安", 134, 1987842504),
+        new("世界晚安(钢琴版)", "熊猫堂ProducePandas", 3, 2, "世界晚安", 76, 1990475933),
+        new("世界晚安(泰文钢琴版)", "熊猫堂ProducePandas", 3, 2, "世界晚安", 29, 1990475934),
+        new("世界晚安(DJ沈念版)", "熊猫堂ProducePandas", 3, 9, "世界晚安", 34, 2014263184),
+        new("世界晚安(钢琴配乐)", "熊猫堂ProducePandas", 2, 59, "世界晚安", 11, 2014263185),
+        new("明年也要好好长大", "熊猫堂ProducePandas", 3, 12, "明年也要好好长大", 0, 2010515162),
+        new("320万年前（DJ沈念版）", "熊猫堂ProducePandas", 3, 21, "320万年前", 8, 2055888636),
+        new("320万年前", "熊猫堂ProducePandas", 3, 7, "W.O.R.L.D.", 329, 2049770469),
+        new("隐德来希", "熊猫堂ProducePandas", 3, 3, "W.O.R.L.D.", 594, 2061317924),
+        new("孔明", "熊猫堂ProducePandas", 3, 59, "W.O.R.L.D.", 91, 2063175274),
+        new("锦鲤卟噜噜", "熊猫堂ProducePandas", 3, 5, "W.O.R.L.D.", 67, 2059208262),
+        new("指鹿为马", "熊猫堂ProducePandas", 3, 12, "W.O.R.L.D.", 74, 2063175272),
+        new("热带季风Remix", "熊猫堂ProducePandas", 3, 22, "W.O.R.L.D.", 23, 2063173319),
+        new("加州梦境", "熊猫堂ProducePandas", 2, 56, "W.O.R.L.D.", 1662, 2063173324),
+        new("渐进自由", "熊猫堂ProducePandas", 4, 19, "W.O.R.L.D.", 124, 2063173321),
+        new("世界所有的烂漫", "熊猫堂ProducePandas", 3, 30, "W.O.R.L.D.", 335, 2053388775),
+    };
+}
+
+public class SongViewModel: ObservableObject
+{
+    private string? _title;
+    private string? _artist;
+    private string? _album;
+    private int _countOfComment;
+    private bool? _isSelected;
+    public string? Title
+    {
+        get => _title;
+        set => SetProperty(ref _title, value);
+    }
+    public string? Artist
+    {
+        get => _artist;
+        set => SetProperty(ref _artist, value);
+    }
+    public string? Album
+    {
+        get => _album;
+        set => SetProperty(ref _album, value);
+    }
+    public int CountOfComment
+    {
+        get => _countOfComment;
+        set => SetProperty(ref _countOfComment, value);
+    }
+    public bool? IsSelected
+    {
+        get => _isSelected;
+        set => SetProperty(ref _isSelected, value);
+    }
+    
+}
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -159,6 +159,9 @@
            <TabItem Header="ScrollViewer">
                <pages:ScrollViewerDemo />
            </TabItem>
+            <TabItem Header="SelectableTextBlock">
+                <pages:SelectableTextBlockDemo />
+            </TabItem>
            <TabItem Header="Slider">
                <pages:SliderDemo />
            </TabItem>
--- a/demo/Semi.Avalonia.TreeDataGrid.Demo/App.axaml
+++ b/demo/Semi.Avalonia.TreeDataGrid.Demo/App.axaml
@@ -0,0 +1,12 @@
+<Application
+    x:Class="Semi.Avalonia.TreeDataGrid.Demo.App"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    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" />
+        <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
+    </Application.Styles>
+</Application>
--- a/demo/Semi.Avalonia.TreeDataGrid.Demo/App.axaml.cs
+++ b/demo/Semi.Avalonia.TreeDataGrid.Demo/App.axaml.cs
@@ -1,10 +1,8 @@
 using Avalonia;
 using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Markup.Xaml;
-using Avalonia.Styling;
-using Semi.Avalonia.Demo.Views;

-namespace Semi.Avalonia.Demo.Desktop;
+namespace Semi.Avalonia.TreeDataGrid.Demo;

 public partial class App : Application
 {
@@ -19,6 +17,7 @@ public partial class App : Application
        {
            desktop.MainWindow = new MainWindow();
        }
+
        base.OnFrameworkInitializationCompleted();
    }
 }
--- a/demo/Semi.Avalonia.TreeDataGrid.Demo/Converters/FileIconConverter.cs
+++ b/demo/Semi.Avalonia.TreeDataGrid.Demo/Converters/FileIconConverter.cs
@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using Avalonia;
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+using Avalonia.Metadata;
+
+namespace Semi.Avalonia.TreeDataGrid.Demo.Converters;
+
+public class FileIconConverter: IMultiValueConverter
+{
+    [Content] 
+    public Dictionary<string, PathGeometry> Items { get; set; } = new Dictionary<string, PathGeometry>();
+
+    public object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (values[0] is bool isDirectory && values[1] is bool isOpen)
+        {
+            if (!isDirectory)
+            {
+                return Items["file"];
+            }
+            return isOpen ? Items["folderOpen"] : Items["folderClosed"];
+        }
+        return AvaloniaProperty.UnsetValue;
+    }
+}
--- a/demo/Semi.Avalonia.TreeDataGrid.Demo/MainWindow.axaml
+++ b/demo/Semi.Avalonia.TreeDataGrid.Demo/MainWindow.axaml
@@ -0,0 +1,138 @@
+<Window
+    x:Class="Semi.Avalonia.TreeDataGrid.Demo.MainWindow"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="clr-namespace:Semi.Avalonia.TreeDataGrid.Demo.Converters"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:vm="clr-namespace:Semi.Avalonia.TreeDataGrid.Demo.ViewModels;assembly=Semi.Avalonia.TreeDataGrid.Demo"
+    Title="Semi.Avalonia.TreeDataGrid.Demo"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:DataType="vm:MainViewModel"
+    mc:Ignorable="d">
+    <Window.Resources>
+        <converters:FileIconConverter x:Key="FileIconConverter">
+            <PathGeometry x:Key="file">M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z</PathGeometry>
+            <PathGeometry x:Key="folderOpen">M6.1,10L4,18V8H21A2,2 0 0,0 19,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H19C19.9,20 20.7,19.4 20.9,18.5L23.2,10H6.1M19,18H6L7.6,12H20.6L19,18Z</PathGeometry>
+            <PathGeometry x:Key="folderClosed">M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z</PathGeometry>
+        </converters:FileIconConverter>
+    </Window.Resources>
+    <Grid RowDefinitions="Auto, *">
+        <Button
+            HorizontalAlignment="Right"
+            Click="Button_OnClick"
+            Content="Theme" />
+        <TabControl Grid.Row="1">
+            <TabItem Header="Songs">
+                <TreeDataGrid
+                    AutoDragDropRows="True"
+                    DataContext="{Binding SongsContext}"
+                    Source="{Binding Songs}">
+                    <TreeDataGrid.Resources>
+                        <DataTemplate x:Key="AlbumCell" DataType="vm:SongViewModel">
+                            <TextBlock
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Center"
+                                Background="Transparent"
+                                Text="{Binding Album}" />
+                        </DataTemplate>
+                        <DataTemplate x:Key="AlbumEditCell" DataType="vm:SongViewModel">
+                            <ComboBox
+                                VerticalAlignment="Center"
+                                Classes="Small"
+                                ItemsSource="{x:Static vm:Song.Albums}"
+                                SelectedItem="{Binding Album}" />
+                        </DataTemplate>
+                        <DataTemplate x:Key="CommentsCell" DataType="vm:SongViewModel">
+                            <TextBlock VerticalAlignment="Center" Text="{Binding CountOfComment}" />
+                        </DataTemplate>
+                        <DataTemplate x:Key="CommentsEditCell" DataType="vm:SongViewModel">
+                            <NumericUpDown
+                                Width="100"
+                                HorizontalAlignment="Left"
+                                VerticalAlignment="Center"
+                                Classes="Small"
+                                Value="{Binding CountOfComment}" />
+                        </DataTemplate>
+                    </TreeDataGrid.Resources>
+                    <TreeDataGrid.Styles>
+                        <Style Selector="TreeDataGrid TreeDataGridRow:nth-last-child(2n)">
+                            <Setter Property="Background" Value="#20808080" />
+                        </Style>
+                    </TreeDataGrid.Styles>
+                </TreeDataGrid>
+            </TabItem>
+            <TabItem Header="Files">
+                <Grid DataContext="{Binding FilesContext}" RowDefinitions="Auto, *">
+                    <DockPanel Margin="0,4" DockPanel.Dock="Top">
+                        <ComboBox
+                            DockPanel.Dock="Left"
+                            ItemsSource="{Binding Drives}"
+                            SelectedItem="{Binding SelectedDrive}" />
+                        <TextBox
+                            Margin="4,0,0,0"
+                            VerticalContentAlignment="Center"
+                            KeyDown="SelectedPath_KeyDown"
+                            Text="{Binding SelectedPath, Mode=OneWay}" />
+                    </DockPanel>
+                    <TreeDataGrid
+                        Name="fileViewer"
+                        Grid.Row="1"
+                        Source="{Binding Source}">
+                        <TreeDataGrid.Resources>
+
+                            <!--  Template for Name column cells  -->
+                            <DataTemplate x:Key="FileNameCell" DataType="vm:FileNodeViewModel">
+                                <StackPanel Orientation="Horizontal">
+                                    <PathIcon
+                                        Width="16"
+                                        Height="16"
+                                        Margin="8,0"
+                                        VerticalAlignment="Center">
+                                        <PathIcon.Data>
+                                            <MultiBinding Converter="{StaticResource FileIconConverter}">
+                                                <Binding Path="IsDirectory" />
+                                                <Binding Path="IsExpanded" />
+                                            </MultiBinding>
+                                        </PathIcon.Data>
+                                    </PathIcon>
+                                    <TextBlock VerticalAlignment="Center" Text="{Binding Name}" />
+                                </StackPanel>
+                            </DataTemplate>
+
+                            <!--  Edit template for Name column cells  -->
+                            <DataTemplate x:Key="FileNameEditCell" DataType="vm:FileNodeViewModel">
+                                <StackPanel Orientation="Horizontal">
+                                    <Image Margin="0,0,4,0" VerticalAlignment="Center">
+                                        <Image.Source>
+                                            <MultiBinding Converter="{StaticResource FileIconConverter}">
+                                                <Binding Path="IsDirectory" />
+                                                <Binding Path="IsExpanded" />
+                                            </MultiBinding>
+                                        </Image.Source>
+                                    </Image>
+                                    <TextBox
+                                        VerticalAlignment="Center"
+                                        Classes="Small"
+                                        Text="{Binding Name}">
+                                        <TextBox.Styles>
+                                            <Style Selector="DataValidationErrors">
+                                                <Setter Property="Theme" Value="{DynamicResource TooltipDataValidationErrors}" />
+                                            </Style>
+                                        </TextBox.Styles>
+                                    </TextBox>
+                                </StackPanel>
+                            </DataTemplate>
+                        </TreeDataGrid.Resources>
+                        <TreeDataGrid.Styles>
+                            <Style Selector="TreeDataGrid TreeDataGridRow:nth-child(2n)">
+                                <Setter Property="Background" Value="#20808080" />
+                            </Style>
+                        </TreeDataGrid.Styles>
+                    </TreeDataGrid>
+                </Grid>
+            </TabItem>
+        </TabControl>
+    </Grid>
+</Window>
--- a/demo/Semi.Avalonia.TreeDataGrid.Demo/MainWindow.axaml.cs
+++ b/demo/Semi.Avalonia.TreeDataGrid.Demo/MainWindow.axaml.cs
@@ -0,0 +1,36 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Input;
+using Avalonia.Interactivity;
+using Avalonia.Styling;
+using Semi.Avalonia.TreeDataGrid.Demo.ViewModels;
+
+namespace Semi.Avalonia.TreeDataGrid.Demo;
+
+public partial class MainWindow : Window
+{
+    public MainWindow()
+    {
+        InitializeComponent();
+        this.DataContext = new MainViewModel();
+    }
+
+    private void Button_OnClick(object? sender, RoutedEventArgs e)
+    {
+        var app = Application.Current;
+        if (app is not null)
+        {
+            var theme = app.ActualThemeVariant;
+            app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
+        }
+    }
+    
+    private void SelectedPath_KeyDown(object? sender, KeyEventArgs e)
+    {
+        if (e.Key == Key.Enter)
+        {
+            var vm = (MainViewModel)DataContext!;
+            vm.FilesContext.SelectedPath = ((TextBox)sender!).Text;
+        }
+    }
+}
--- a/demo/Semi.Avalonia.TreeDataGrid.Demo/Program.cs
+++ b/demo/Semi.Avalonia.TreeDataGrid.Demo/Program.cs
@@ -0,0 +1,21 @@
+using Avalonia;
+using System;
+
+namespace Semi.Avalonia.TreeDataGrid.Demo;
+
+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();
+}
--- a/demo/Semi.Avalonia.TreeDataGrid.Demo/Semi.Avalonia.TreeDataGrid.Demo.csproj
+++ b/demo/Semi.Avalonia.TreeDataGrid.Demo/Semi.Avalonia.TreeDataGrid.Demo.csproj
@@ -0,0 +1,27 @@
+<Project Sdk="Microsoft.NET.Sdk">
+    <PropertyGroup>
+        <OutputType>WinExe</OutputType>
+        <TargetFramework>net6.0</TargetFramework>
+        <Nullable>enable</Nullable>
+        <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
+        <ApplicationManifest>app.manifest</ApplicationManifest>
+        <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
+    </PropertyGroup>
+
+
+    <ItemGroup>
+        <PackageReference Include="Avalonia" Version="11.0.0" />
+        <PackageReference Include="Avalonia.Desktop" Version="11.0.0" />
+        <PackageReference Include="Avalonia.Themes.Fluent" Version="11.0.0" />
+        <PackageReference Include="Avalonia.Fonts.Inter" Version="11.0.0" />
+        <!--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.0" />
+        <PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.1" />
+    </ItemGroup>
+
+
+    <ItemGroup>
+      <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj" />
+      <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj" />
+    </ItemGroup>
+</Project>
--- a/demo/Semi.Avalonia.TreeDataGrid.Demo/ViewModels/FilesPageViewModel.cs
+++ b/demo/Semi.Avalonia.TreeDataGrid.Demo/ViewModels/FilesPageViewModel.cs
@@ -0,0 +1,399 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices;
+using Avalonia.Controls;
+using Avalonia.Controls.Models.TreeDataGrid;
+using Avalonia.Controls.Selection;
+using Avalonia.Threading;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.TreeDataGrid.Demo.ViewModels;
+
+public class FilesPageViewModel: ObservableObject
+{
+    public IList<string> Drives { get; }
+    private string _selectedDrive;
+    private string? _selectedPath;
+    private FileNodeViewModel? _root;
+    public string SelectedDrive
+    {
+        get => _selectedDrive;
+        set
+        {
+            SetProperty(ref _selectedDrive, value);
+            _root = new FileNodeViewModel(_selectedDrive, isDirectory: true, isRoot: true);
+            Source.Items = new[] { _root };
+        }
+    }
+    
+    public string? SelectedPath
+    {
+        get => _selectedPath;
+        set => SetSelectedPath(value);
+    }
+    
+    public HierarchicalTreeDataGridSource<FileNodeViewModel> Source { get; }
+
+    public FilesPageViewModel()
+    {
+        Drives= DriveInfo.GetDrives().Select(x => x.Name).ToList();
+        if (RuntimeInformation.IsOSPlatform(OSPlatform.Windows))
+        {
+            _selectedDrive = "C:\\";
+        }
+        else
+        {
+            _selectedDrive = Drives.FirstOrDefault() ?? "/";
+        }
+
+        Source = new HierarchicalTreeDataGridSource<FileNodeViewModel>(Array.Empty<FileNodeViewModel>())
+        {
+            Columns =
+            {
+                new CheckBoxColumn<FileNodeViewModel>(
+                    null,
+                    x => x.IsChecked,
+                    (o, v) => o.IsChecked = v,
+                    options: new()
+                    {
+                        CanUserResizeColumn = false,
+                    }),
+                new HierarchicalExpanderColumn<FileNodeViewModel>(
+                    new TemplateColumn<FileNodeViewModel>(
+                        "Name",
+                        "FileNameCell",
+                        "FileNameEditCell",
+                        new GridLength(1, GridUnitType.Star),
+                        new()
+                        {
+                            CompareAscending = FileNodeViewModel.SortAscending(x => x.Name),
+                            CompareDescending = FileNodeViewModel.SortDescending(x => x.Name),
+                            IsTextSearchEnabled = true,
+                            TextSearchValueSelector = x => x.Name
+                        }),
+                    x => x.Children,
+                    x => x.HasChildren,
+                    x => x.IsExpanded),
+                new TextColumn<FileNodeViewModel, long?>(
+                    "Size",
+                    x => x.Size,
+                    options: new()
+                    {
+                        CompareAscending = FileNodeViewModel.SortAscending(x => x.Size),
+                        CompareDescending = FileNodeViewModel.SortDescending(x => x.Size),
+                    }),
+                new TextColumn<FileNodeViewModel, DateTimeOffset?>(
+                    "Modified",
+                    x => x.Modified,
+                    options: new()
+                    {
+                        CompareAscending = FileNodeViewModel.SortAscending(x => x.Modified),
+                        CompareDescending = FileNodeViewModel.SortDescending(x => x.Modified),
+                    }),
+            }
+        };
+        Source.RowSelection!.SingleSelect = false;
+        Source.RowSelection.SelectionChanged += SelectionChanged;
+    }
+    
+    private void SelectionChanged(object? sender, TreeSelectionModelSelectionChangedEventArgs<FileNodeViewModel> e)
+    {
+        var selectedPath = Source.RowSelection?.SelectedItem?.Path;
+        this.SetProperty(ref _selectedPath, selectedPath, nameof(SelectedPath));
+
+        foreach (var i in e.DeselectedItems)
+            System.Diagnostics.Trace.WriteLine($"Deselected '{i?.Path}'");
+        foreach (var i in e.SelectedItems)
+            System.Diagnostics.Trace.WriteLine($"Selected '{i?.Path}'");
+    }
+    
+    private void SetSelectedPath(string? value)
+    {
+        if (string.IsNullOrEmpty(value))
+        {
+            Source.RowSelection!.Clear();
+            return;
+        }
+
+        var path = value;
+        var components = new Stack<string>();
+        DirectoryInfo? d = null;
+
+        if (File.Exists(path))
+        {
+            var f = new FileInfo(path);
+            components.Push(f.Name);
+            d = f.Directory;
+        }
+        else if (Directory.Exists(path))
+        {
+            d = new DirectoryInfo(path);
+        }
+
+        while (d is not null)
+        {
+            components.Push(d.Name);
+            d = d.Parent;
+        }
+
+        var index = IndexPath.Unselected;
+
+        if (components.Count > 0)
+        {
+            var drive = components.Pop();
+            var driveIndex = Drives.FindIndex(x => string.Equals(x, drive, StringComparison.OrdinalIgnoreCase));
+
+            if (driveIndex >= 0)
+                SelectedDrive = Drives[driveIndex];
+
+            FileNodeViewModel? node = _root;
+            index = new IndexPath(0);
+
+            while (node is not null && components.Count > 0)
+            {
+                node.IsExpanded = true;
+
+                var component = components.Pop();
+                var i = node.Children.FindIndex(x => string.Equals(x.Name, component, StringComparison.OrdinalIgnoreCase));
+                node = i >= 0 ? node.Children[i] : null;
+                index = i >= 0 ? index.Append(i) : default;
+            }
+        }
+
+        Source.RowSelection!.SelectedIndex = index;
+    }
+}
+
+public class FileNodeViewModel: ObservableObject, IEditableObject
+{
+    private string _path;
+    private string _name;
+    private string? _undoName;
+    private long? _size;
+    private DateTimeOffset? _modified;
+    private FileSystemWatcher? _watcher;
+    private ObservableCollection<FileNodeViewModel>? _children;
+    private bool _hasChildren = true;
+    private bool _isExpanded;
+
+    public FileNodeViewModel( string path, bool isDirectory, bool isRoot = false)
+    {
+        _path = path;
+        _name = isRoot ? path : System.IO.Path.GetFileName(Path);
+        _isExpanded = isRoot;
+        IsDirectory = isDirectory;
+        HasChildren = isDirectory;
+
+        if (!isDirectory)
+        {
+            var info = new FileInfo(path);
+            Size = info.Length;
+            Modified = info.LastWriteTimeUtc;
+        }
+    }
+
+    public string Path 
+    {
+        get => _path;
+        private set => SetProperty(ref _path, value);
+    }
+
+    public string Name 
+    {
+        get => _name;
+        private set => SetProperty(ref _name, value);
+    }
+
+    public long? Size 
+    {
+        get => _size;
+        private set => SetProperty(ref _size, value);
+    }
+
+    public DateTimeOffset? Modified 
+    {
+        get => _modified;
+        private set => SetProperty(ref _modified, value);
+    }
+
+    public bool HasChildren
+    {
+        get => _hasChildren;
+        private set => SetProperty(ref _hasChildren, value);
+    }
+
+    public bool IsExpanded
+    {
+        get => _isExpanded;
+        set => SetProperty(ref _isExpanded, value);
+    }
+
+    public bool IsChecked { get; set; }
+    public bool IsDirectory { get; }
+    public IReadOnlyList<FileNodeViewModel> Children => _children ??= LoadChildren();
+
+    private ObservableCollection<FileNodeViewModel> LoadChildren()
+    {
+        if (!IsDirectory)
+        {
+            throw new NotSupportedException();
+        }
+
+        var options = new EnumerationOptions { IgnoreInaccessible = true };
+        var result = new ObservableCollection<FileNodeViewModel>();
+
+        foreach (var d in Directory.EnumerateDirectories(Path, "*", options))
+        {
+            result.Add(new FileNodeViewModel(d, true));
+        }
+
+        foreach (var f in Directory.EnumerateFiles(Path, "*", options))
+        {
+            result.Add(new FileNodeViewModel(f, false));
+        }
+
+        _watcher = new FileSystemWatcher
+        {
+            Path = Path,
+            NotifyFilter = NotifyFilters.FileName | NotifyFilters.Size | NotifyFilters.LastWrite,
+        };
+
+        _watcher.Changed += OnChanged;
+        _watcher.Created += OnCreated;
+        _watcher.Deleted += OnDeleted;
+        _watcher.Renamed += OnRenamed;
+        _watcher.EnableRaisingEvents = true;
+
+        if (result.Count == 0)
+            HasChildren = false;
+
+        return result;
+    }
+
+    public static Comparison<FileNodeViewModel?> SortAscending<T>(Func<FileNodeViewModel, T> selector)
+    {
+        return (x, y) =>
+        {
+            if (x is null && y is null)
+                return 0;
+            else if (x is null)
+                return -1;
+            else if (y is null)
+                return 1;
+            if (x.IsDirectory == y.IsDirectory)
+                return Comparer<T>.Default.Compare(selector(x), selector(y));
+            else if (x.IsDirectory)
+                return -1;
+            else
+                return 1;
+        };
+    }
+
+    public static Comparison<FileNodeViewModel?> SortDescending<T>(Func<FileNodeViewModel, T> selector)
+    {
+        return (x, y) =>
+        {
+            if (x is null && y is null)
+                return 0;
+            else if (x is null)
+                return 1;
+            else if (y is null)
+                return -1;
+            if (x.IsDirectory == y.IsDirectory)
+                return Comparer<T>.Default.Compare(selector(y), selector(x));
+            else if (x.IsDirectory)
+                return -1;
+            else
+                return 1;
+        };
+    }
+
+    void IEditableObject.BeginEdit() => _undoName = _name;
+    void IEditableObject.CancelEdit() => _name = _undoName!;
+    void IEditableObject.EndEdit() => _undoName = null;
+
+    private void OnChanged(object sender, FileSystemEventArgs e)
+    {
+        if (e.ChangeType == WatcherChangeTypes.Changed && File.Exists(e.FullPath))
+        {
+            Dispatcher.UIThread.Post(() =>
+            {
+                foreach (var child in _children!)
+                {
+                    if (child.Path == e.FullPath)
+                    {
+                        if (!child.IsDirectory)
+                        {
+                            var info = new FileInfo(e.FullPath);
+                            child.Size = info.Length;
+                            child.Modified = info.LastWriteTimeUtc;
+                        }
+                        break;
+                    }
+                }
+            });
+        }
+    }
+
+    private void OnCreated(object sender, FileSystemEventArgs e)
+    {
+        Dispatcher.UIThread.Post(() =>
+        {
+            var node = new FileNodeViewModel(
+                e.FullPath,
+                File.GetAttributes(e.FullPath).HasFlag(FileAttributes.Directory));
+            _children!.Add(node);
+        });
+    }
+
+    private void OnDeleted(object sender, FileSystemEventArgs e)
+    {
+        Dispatcher.UIThread.Post(() =>
+        {
+            for (var i = 0; i < _children!.Count; ++i)
+            {
+                if (_children[i].Path == e.FullPath)
+                {
+                    _children.RemoveAt(i);
+                    System.Diagnostics.Debug.WriteLine($"Removed {e.FullPath}");
+                    break;
+                }
+            }
+        });
+    }
+
+    private void OnRenamed(object sender, RenamedEventArgs e)
+    {
+        Dispatcher.UIThread.Post(() =>
+        {
+            foreach (var child in _children!)
+            {
+                if (child.Path == e.OldFullPath)
+                {
+                    child.Path = e.FullPath;
+                    child.Name = e.Name ?? string.Empty;
+                    break;
+                }
+            }
+        });
+    }
+}
+
+internal static class ListExtensions
+{
+    public static int FindIndex<T>(this IEnumerable<T> source, Func<T, bool> predicate)
+    {
+        int i = 0;
+        foreach (var item in source)
+        {
+            if (predicate(item))
+                return i;
+            i++;
+        }
+        return -1;
+    }
+}
--- a/demo/Semi.Avalonia.TreeDataGrid.Demo/ViewModels/MainViewModel.cs
+++ b/demo/Semi.Avalonia.TreeDataGrid.Demo/ViewModels/MainViewModel.cs
@@ -0,0 +1,9 @@
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.TreeDataGrid.Demo.ViewModels;
+
+public class MainViewModel: ObservableObject
+{
+    public SongsPageViewModel SongsContext { get; } = new();
+    public FilesPageViewModel FilesContext { get; } = new();
+}
--- a/demo/Semi.Avalonia.TreeDataGrid.Demo/ViewModels/SongsPageViewModel.cs
+++ b/demo/Semi.Avalonia.TreeDataGrid.Demo/ViewModels/SongsPageViewModel.cs
@@ -0,0 +1,184 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using Avalonia.Controls;
+using Avalonia.Controls.Models.TreeDataGrid;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.TreeDataGrid.Demo.ViewModels;
+
+public class SongsPageViewModel: ObservableObject
+{
+    private readonly ObservableCollection<SongViewModel> _songs;
+    
+    public FlatTreeDataGridSource<SongViewModel> Songs { get; }
+
+    public SongsPageViewModel()
+    {
+        _songs = new ObservableCollection<SongViewModel>(Song.Songs.Select(a => new SongViewModel()
+        {
+            Title = a.Title, Artist = a.Artist, Album = a.Album, CountOfComment = a.CountOfComment,
+            IsSelected = false
+        }));
+
+        Songs = new FlatTreeDataGridSource<SongViewModel>(_songs)
+        {
+            Columns =
+            {
+                new CheckBoxColumn<SongViewModel>("IsSelected", a => a.IsSelected,
+                    (model, b) => { model.IsSelected = b; }, new GridLength(108, GridUnitType.Pixel)),
+                new TextColumn<SongViewModel, string>("Title", a => a.Title, (o, a) => o.Title = a,
+                    new GridLength(6, GridUnitType.Star)),
+                new TextColumn<SongViewModel, string>("Artist", a => a.Artist, (o, a) => o.Artist = a,
+                    new GridLength(6, GridUnitType.Star)),
+                new TemplateColumn<SongViewModel>("Album", "AlbumCell", "AlbumEditCell",
+                    new GridLength(6, GridUnitType.Star)),
+                new TemplateColumn<SongViewModel>("Comments", "CommentsCell", "CommentsEditCell",
+                    new GridLength(6, GridUnitType.Star)),
+            }
+        };
+    }
+
+}
+
+
+public class Song
+{
+    public string? Title { get; set; }
+    public string? Artist { get; set; }
+    public TimeSpan? Duration { get; set; }
+    public string? Album { get; set; }
+    public int? CountOfComment { get; set; }
+    public string Url { get; set; }
+
+    public Song(string title, string artist, int m, int s, string album, int countOfComment, int netEaseId)
+    {
+        Title = title;
+        Artist = artist;
+        Duration = new TimeSpan(0, m, s);
+        Album = album;
+        CountOfComment = countOfComment;
+        Url = $"https://music.163.com/song?id={netEaseId}";
+        
+    }
+
+    public static List<string> Albums { get; set; } = new List<string>()
+    {
+        "A.S.I.A",
+        "饕餮人间",
+        "七步咙咚呛",
+        "大惊小怪",
+        "The ONE",
+        "以梦为马 (壮志骄阳版)",
+        "emo了",
+        "一眼万年",
+        "冲刺吧",
+        "爱的赏味期限",
+        "COSMIC ANTHEM / 手紙",
+        "世界晚安",
+        "明年也要好好长大",
+        "320万年前",
+        "W.O.R.L.D.",
+    };
+
+    public static List<Song> Songs { get; set; } = new List<Song>()
+    {
+        new("好肚有肚(feat.李玲玉)", "熊猫堂ProducePandas", 2, 50, "A.S.I.A", 730, 1487039339),
+        new("荒诞秀", "熊猫堂ProducePandas", 3, 15, "A.S.I.A", 639, 1487037601),
+        new("长大", "熊猫堂ProducePandas", 4, 6, "A.S.I.A", 1114, 1487037690),
+        new("招财猫(feat.纪粹希(G-Tracy))", "熊猫堂ProducePandas", 3, 37, "A.S.I.A", 361, 1487039632),
+        new("千转", "熊猫堂ProducePandas", 4, 0, "A.S.I.A", 1115, 1477312398),
+        new("辣辣辣", "熊猫堂ProducePandas", 3, 24, "A.S.I.A", 1873, 1465043716),
+        new("碎碎念", "熊猫堂ProducePandas", 3, 25, "A.S.I.A", 676, 1474142064),
+        new("盘他", "熊猫堂ProducePandas", 2, 16, "A.S.I.A", 365, 1481652786),
+        new("Na Na Na", "熊猫堂ProducePandas", 3, 26, "A.S.I.A", 312, 1469022662),
+        new("Indigo", "熊猫堂ProducePandas", 3, 15, "A.S.I.A", 137, 1487039517),
+        new("饕餮人间", "熊猫堂ProducePandas", 3, 20, "饕餮人间", 1295, 1499584605),
+        new("七步咙咚呛", "熊猫堂ProducePandas", 3, 10, "七步咙咚呛", 175, 1809095152),
+        new("大惊小怪", "熊猫堂ProducePandas", 3, 32, "大惊小怪", 10420, 1847477425),
+        new("工具人", "熊猫堂ProducePandas", 2, 46, "大惊小怪", 1135, 1847476499),
+        new("以梦为马", "熊猫堂ProducePandas", 4, 19, "大惊小怪", 18361, 1836034373),
+        new("以梦为马(Piano Version)", "熊猫堂ProducePandas", 3, 4, "大惊小怪", 570, 1847477423),
+        new("The ONE", "熊猫堂ProducePandas", 2, 58, "The ONE", 1508, 1864329424),
+        new("The ONE(日文版)", "熊猫堂ProducePandas", 2, 57, "The ONE", 385, 1864329429),
+        new("以梦为马 (壮志骄阳版)", "熊猫堂ProducePandas", 4, 19, "以梦为马 (壮志骄阳版)", 161, 1865138896),
+        new("New Horse", "熊猫堂ProducePandas", 2, 30, "emo了", 643, 1887021307),
+        new("不例外", "熊猫堂ProducePandas", 3, 31, "emo了", 1818, 1887022665),
+        new("满意", "熊猫堂ProducePandas", 4, 32, "emo了", 1081, 1882433472),
+        new("就算与全世界为敌也要跟你在一起", "熊猫堂ProducePandas", 3, 32, "emo了", 2119, 1881759960),
+        new("The ONE", "熊猫堂ProducePandas", 2, 58, "emo了", 67, 1887022648),
+        new("口香糖", "熊猫堂ProducePandas", 3, 10, "emo了", 2181, 1885502254),
+        new("Suuuuuuper Mario", "熊猫堂ProducePandas", 3, 32, "emo了", 1010, 1887021318),
+        new("饕餮人间", "熊猫堂ProducePandas", 3, 22, "emo了", 109, 1887021320),
+        new("以梦为马 (壮志骄阳版)", "熊猫堂ProducePandas", 4, 21, "emo了", 34, 1887022666),
+        new("The ONE(日文版)", "熊猫堂ProducePandas", 2, 57, "emo了", 27, 1887022646),
+        new("满意(DJheap九天版)", "熊猫堂ProducePandas", 4, 31, "emo了", 31, 1901605941),
+        new("一眼万年", "熊猫堂ProducePandas", 3, 54, "一眼万年", 20, 1922599361),
+        new("冲刺", "熊猫堂ProducePandas", 3, 49, "冲刺吧", 1006, 1932878194),
+        new("滴答滴", "熊猫堂ProducePandas", 2, 30, "爱的赏味期限", 86, 1957515790),
+        new("热带季风", "熊猫堂ProducePandas", 2, 45, "爱的赏味期限", 212, 1957514964),
+        new("渣", "熊猫堂ProducePandas", 3, 28, "爱的赏味期限", 22, 1957514965),
+        new("独特", "熊猫堂ProducePandas", 3, 33, "爱的赏味期限", 62, 1957514966),
+        new("雨后", "熊猫堂ProducePandas", 4, 15, "爱的赏味期限", 23, 1957514967),
+        new("然后然后", "熊猫堂ProducePandas", 3, 50, "爱的赏味期限", 108, 1957514968),
+        new("丢", "熊猫堂ProducePandas", 3, 26, "爱的赏味期限", 30, 1957515792),
+        new("热带疾风(FACEVOID桃心连哥 Remix)", "熊猫堂ProducePandas", 3, 23, "爱的赏味期限", 55, 1957515793),
+        new("COSMIC ANTHEM -Japanese Ver.-", "熊猫堂ProducePandas", 3, 11, "COSMIC ANTHEM / 手紙", 0, 1977171493),
+        new("手紙 (「長大-You Raise Me Up-」-Japanese Ver.-)", "熊猫堂ProducePandas", 4, 11, "COSMIC ANTHEM / 手紙", 0,
+            1977171494),
+        new("COSMIC ANTHEM -Chinese Ver.-", "熊猫堂ProducePandas", 3, 31, "COSMIC ANTHEM / 手紙", 0, 1977172202),
+        new("世界晚安", "熊猫堂ProducePandas", 2, 59, "世界晚安", 652, 1985063377),
+        new("世界晚安(泰文版)", "熊猫堂ProducePandas", 2, 59, "世界晚安", 134, 1987842504),
+        new("世界晚安(钢琴版)", "熊猫堂ProducePandas", 3, 2, "世界晚安", 76, 1990475933),
+        new("世界晚安(泰文钢琴版)", "熊猫堂ProducePandas", 3, 2, "世界晚安", 29, 1990475934),
+        new("世界晚安(DJ沈念版)", "熊猫堂ProducePandas", 3, 9, "世界晚安", 34, 2014263184),
+        new("世界晚安(钢琴配乐)", "熊猫堂ProducePandas", 2, 59, "世界晚安", 11, 2014263185),
+        new("明年也要好好长大", "熊猫堂ProducePandas", 3, 12, "明年也要好好长大", 0, 2010515162),
+        new("320万年前（DJ沈念版）", "熊猫堂ProducePandas", 3, 21, "320万年前", 8, 2055888636),
+        new("320万年前", "熊猫堂ProducePandas", 3, 7, "W.O.R.L.D.", 329, 2049770469),
+        new("隐德来希", "熊猫堂ProducePandas", 3, 3, "W.O.R.L.D.", 594, 2061317924),
+        new("孔明", "熊猫堂ProducePandas", 3, 59, "W.O.R.L.D.", 91, 2063175274),
+        new("锦鲤卟噜噜", "熊猫堂ProducePandas", 3, 5, "W.O.R.L.D.", 67, 2059208262),
+        new("指鹿为马", "熊猫堂ProducePandas", 3, 12, "W.O.R.L.D.", 74, 2063175272),
+        new("热带季风Remix", "熊猫堂ProducePandas", 3, 22, "W.O.R.L.D.", 23, 2063173319),
+        new("加州梦境", "熊猫堂ProducePandas", 2, 56, "W.O.R.L.D.", 1662, 2063173324),
+        new("渐进自由", "熊猫堂ProducePandas", 4, 19, "W.O.R.L.D.", 124, 2063173321),
+        new("世界所有的烂漫", "熊猫堂ProducePandas", 3, 30, "W.O.R.L.D.", 335, 2053388775),
+    };
+}
+
+public class SongViewModel: ObservableObject
+{
+    private string? _title;
+    private string? _artist;
+    private string? _album;
+    private int? _countOfComment;
+    private bool? _isSelected;
+    public string? Title
+    {
+        get => _title;
+        set => SetProperty(ref _title, value);
+    }
+    public string? Artist
+    {
+        get => _artist;
+        set => SetProperty(ref _artist, value);
+    }
+    public string? Album
+    {
+        get => _album;
+        set => SetProperty(ref _album, value);
+    }
+    public int? CountOfComment
+    {
+        get => _countOfComment;
+        set => SetProperty(ref _countOfComment, value);
+    }
+    public bool? IsSelected
+    {
+        get => _isSelected;
+        set => SetProperty(ref _isSelected, value);
+    }
+    
+}
--- a/demo/Semi.Avalonia.TreeDataGrid.Demo/app.manifest
+++ b/demo/Semi.Avalonia.TreeDataGrid.Demo/app.manifest
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1">
+  <!-- This manifest is used on Windows only.
+       Don't remove it as it might cause problems with window transparency and embeded controls.
+       For more details visit https://learn.microsoft.com/en-us/windows/win32/sbscs/application-manifests -->
+  <assemblyIdentity version="1.0.0.0" name="Semi.Avalonia.TreeDataGrid.Demo.Desktop"/>
+
+  <compatibility xmlns="urn:schemas-microsoft-com:compatibility.v1">
+    <application>
+      <!-- A list of the Windows versions that this application has been tested on
+           and is designed to work with. Uncomment the appropriate elements
+           and Windows will automatically select the most compatible environment. -->
+
+      <!-- Windows 10 -->
+      <supportedOS Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}" />
+    </application>
+  </compatibility>
+</assembly>
--- a/demo/global.json
+++ b/demo/global.json
@@ -1,5 +1,5 @@
 {
    "sdk": {
-        "version": "7.0.100"
+        "version": "7.0"
    }
 }
--- a/docs/Dark.png
+++ b/docs/Dark.png
--- a/docs/Light.png
+++ b/docs/Light.png
--- a/docs/cover.png
+++ b/docs/cover.png
--- a/src/Package.props
+++ b/src/Package.props
@@ -2,10 +2,10 @@
    <PropertyGroup>
        <TargetFrameworks>net6.0;netstandard2.0</TargetFrameworks>
        <Nullable>enable</Nullable>
-        <LangVersion>10</LangVersion>
-        <Version>11.0.0</Version>
+        <LangVersion>11</LangVersion>
+        <Version>11.0.1</Version>
        <Authors>IRIHI Technology</Authors>
-        <Description>Avalonia Theme inspired by Semi Design. </Description>
+        <Description>Avalonia Theme inspired by Semi Design.</Description>
        <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
        <AvaloniaVersion>11.0.0</AvaloniaVersion>
        <PackageLicenseExpression>MIT</PackageLicenseExpression>
--- a/src/Semi.Avalonia.ColorPicker/Dark.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Dark.axaml
@@ -1,8 +1,4 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker">
-    <!--  Add Resources Here  -->
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#54A9FF" />
    <SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="#1C1F23" />
    <SolidColorBrush x:Key="ColorViewRadioButtonPointeroverBackground" Opacity="0.16" Color="White" />
@@ -11,39 +7,15 @@
    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedBackground" Color="#54A9FF" />
    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPointeroverBackground" Color="#7FC1FF" />
    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPressedBackground" Color="#A9D7FF" />
-    <FontWeight x:Key="ColorViewRadioButtonFontWeight">600</FontWeight>
-    <Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness>
-    <x:Double x:Key="ColorViewNumericUpDownWidth">70</x:Double>

    <SolidColorBrush x:Key="ColorViewTabItemSelectedForeground" Color="#54A9FF" />

-    <PathGeometry x:Key="ColorViewSpectrumIconGlyph">
-        M6.92,19L5,17.08L13.06,9L15,10.94M20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L13.84,6.41L11.91,4.5L10.5,5.91L11.92,7.33L3,16.25V21H7.75L16.67,12.08L18.09,13.5L19.5,12.09L17.58,10.17L20.7,7.05C21.1,6.65 21.1,6 20.71,5.63Z
-    </PathGeometry>
-    <PathGeometry x:Key="ColorViewPaletteIconGlyph">
-        M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z
-    </PathGeometry>
-    <PathGeometry x:Key="ColorViewComponentsIconGlyph">
-        M4 6.5C5.10457 6.5 6 5.60457 6 4.5C6 3.39543 5.10457 2.5 4 2.5C2.89543 2.5 2 3.39543 2 4.5C2 5.60457 2.89543 6.5 4 6.5ZM9.5 3C8.67157 3 8 3.67157 8 4.5C8 5.32843 8.67157 6 9.5 6H20.5C21.3284 6 22 5.32843 22 4.5C22 3.67157 21.3284 3 20.5 3H9.5ZM8 11.5C8 10.6716 8.67157 10 9.5 10H20.5C21.3284 10 22 10.6716 22 11.5C22 12.3284 21.3284 13 20.5 13H9.5C8.67157 13 8 12.3284 8 11.5ZM8 18.5C8 17.6716 8.67157 17 9.5 17H20.5C21.3284 17 22 17.6716 22 18.5C22 19.3284 21.3284 20 20.5 20H9.5C8.67157 20 8 19.3284 8 18.5ZM6 11.5C6 12.6046 5.10457 13.5 4 13.5C2.89543 13.5 2 12.6046 2 11.5C2 10.3954 2.89543 9.5 4 9.5C5.10457 9.5 6 10.3954 6 11.5ZM4 20.5C5.10457 20.5 6 19.6046 6 18.5C6 17.3954 5.10457 16.5 4 16.5C2.89543 16.5 2 17.3954 2 18.5C2 19.6046 2.89543 20.5 4 20.5Z
-    </PathGeometry>

    <SolidColorBrush x:Key="ColorSliderDefaultBorderBrush" Color="Black" />
    <SolidColorBrush x:Key="ColorSliderLightBorderBrush" Color="White" />
    <SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />

-    <x:Double x:Key="ColorSliderWidth">16</x:Double>
-    <CornerRadius x:Key="ColorSliderCornerRadius">6</CornerRadius>
-    <Thickness x:Key="ColorSliderThumbBorderBrush">2</Thickness>
-    <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows>
-
    <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />

-    <x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double>
-    <x:Double x:Key="ColorPreviewerAccentSectionHeight">20</x:Double>
-    <x:Double x:Key="ColorPreviewerHeight">48</x:Double>
-    <CornerRadius x:Key="ColorPreviewerCornerRadius">3</CornerRadius>
-
    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1AFFFFFF</BoxShadows>
-
-    <colorPicker:SemiColorDarkPalette x:Key="SemiColorPalette" />
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia.ColorPicker/Index.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Index.axaml
@@ -1,5 +1,4 @@
 <Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
    <Styles.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
@@ -8,7 +7,8 @@
            </ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary.MergedDictionaries>
                <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml" />
+                <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Shared.axaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Styles.Resources>
-</Styles>
+</Styles>
--- a/src/Semi.Avalonia.ColorPicker/Light.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Light.axaml
@@ -1,8 +1,4 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker">
-    <!--  Add Resources Here  -->
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#0077FA" />
    <SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="White" />
    <SolidColorBrush x:Key="ColorViewRadioButtonPointeroverBackground" Opacity="0.09" Color="#2E3238" />
@@ -11,38 +7,15 @@
    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedBackground" Color="#0077FA" />
    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPointeroverBackground" Color="#0062D6" />
    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPressedBackground" Color="#004FB3" />
-    <FontWeight x:Key="ColorViewRadioButtonFontWeight">600</FontWeight>
-    <Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness>
-    <x:Double x:Key="ColorViewNumericUpDownWidth">70</x:Double>

    <SolidColorBrush x:Key="ColorViewTabItemSelectedForeground" Color="#0077FA" />

-    <PathGeometry x:Key="ColorViewSpectrumIconGlyph">
-        M6.92,19L5,17.08L13.06,9L15,10.94M20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L13.84,6.41L11.91,4.5L10.5,5.91L11.92,7.33L3,16.25V21H7.75L16.67,12.08L18.09,13.5L19.5,12.09L17.58,10.17L20.7,7.05C21.1,6.65 21.1,6 20.71,5.63Z
-    </PathGeometry>
-    <PathGeometry x:Key="ColorViewPaletteIconGlyph">
-        M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z
-    </PathGeometry>
-    <PathGeometry x:Key="ColorViewComponentsIconGlyph">
-        M4 6.5C5.10457 6.5 6 5.60457 6 4.5C6 3.39543 5.10457 2.5 4 2.5C2.89543 2.5 2 3.39543 2 4.5C2 5.60457 2.89543 6.5 4 6.5ZM9.5 3C8.67157 3 8 3.67157 8 4.5C8 5.32843 8.67157 6 9.5 6H20.5C21.3284 6 22 5.32843 22 4.5C22 3.67157 21.3284 3 20.5 3H9.5ZM8 11.5C8 10.6716 8.67157 10 9.5 10H20.5C21.3284 10 22 10.6716 22 11.5C22 12.3284 21.3284 13 20.5 13H9.5C8.67157 13 8 12.3284 8 11.5ZM8 18.5C8 17.6716 8.67157 17 9.5 17H20.5C21.3284 17 22 17.6716 22 18.5C22 19.3284 21.3284 20 20.5 20H9.5C8.67157 20 8 19.3284 8 18.5ZM6 11.5C6 12.6046 5.10457 13.5 4 13.5C2.89543 13.5 2 12.6046 2 11.5C2 10.3954 2.89543 9.5 4 9.5C5.10457 9.5 6 10.3954 6 11.5ZM4 20.5C5.10457 20.5 6 19.6046 6 18.5C6 17.3954 5.10457 16.5 4 16.5C2.89543 16.5 2 17.3954 2 18.5C2 19.6046 2.89543 20.5 4 20.5Z
-    </PathGeometry>

    <SolidColorBrush x:Key="ColorSliderDefaultBorderBrush" Color="Black" />
    <SolidColorBrush x:Key="ColorSliderLightBorderBrush" Color="White" />
    <SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />

-    <x:Double x:Key="ColorSliderWidth">16</x:Double>
-    <CornerRadius x:Key="ColorSliderCornerRadius">6</CornerRadius>
-    <Thickness x:Key="ColorSliderThumbBorderBrush">2</Thickness>
-    <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #1A000000</BoxShadows>
-
    <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />

-    <x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double>
-    <x:Double x:Key="ColorPreviewerAccentSectionHeight">20</x:Double>
-    <x:Double x:Key="ColorPreviewerHeight">48</x:Double>
-    <CornerRadius x:Key="ColorPreviewerCornerRadius">3</CornerRadius>
-
    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1A000000</BoxShadows>
-    <colorPicker:SemiColorLightPalette x:Key="SemiColorPalette" />
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia.ColorPicker/Semi.Avalonia.ColorPicker.csproj
+++ b/src/Semi.Avalonia.ColorPicker/Semi.Avalonia.ColorPicker.csproj
@@ -1,15 +1,15 @@
 <Project Sdk="Microsoft.NET.Sdk">

-    <Import Project="../Package.props" />
+    <Import Project="../Package.props"/>

    <PropertyGroup>
        <Title>Semi.Avalonia.ColorPicker</Title>
-        <PackageReleaseNotes>Update to Avalonia 11.0.0-rc1</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to 11.0.1</PackageReleaseNotes>
    </PropertyGroup>

    <ItemGroup>
-      <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
-      <PackageReference Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
    </ItemGroup>

 </Project>
--- a/src/Semi.Avalonia.ColorPicker/Shared.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Shared.axaml
@@ -0,0 +1,30 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker">
+    <FontWeight x:Key="ColorViewRadioButtonFontWeight">600</FontWeight>
+    <Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness>
+    <x:Double x:Key="ColorViewNumericUpDownWidth">70</x:Double>
+
+    <PathGeometry x:Key="ColorViewSpectrumIconGlyph">
+        M6.92,19L5,17.08L13.06,9L15,10.94M20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L13.84,6.41L11.91,4.5L10.5,5.91L11.92,7.33L3,16.25V21H7.75L16.67,12.08L18.09,13.5L19.5,12.09L17.58,10.17L20.7,7.05C21.1,6.65 21.1,6 20.71,5.63Z
+    </PathGeometry>
+    <PathGeometry x:Key="ColorViewPaletteIconGlyph">
+        M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z
+    </PathGeometry>
+    <PathGeometry x:Key="ColorViewComponentsIconGlyph">
+        M4 6.5C5.10457 6.5 6 5.60457 6 4.5C6 3.39543 5.10457 2.5 4 2.5C2.89543 2.5 2 3.39543 2 4.5C2 5.60457 2.89543 6.5 4 6.5ZM9.5 3C8.67157 3 8 3.67157 8 4.5C8 5.32843 8.67157 6 9.5 6H20.5C21.3284 6 22 5.32843 22 4.5C22 3.67157 21.3284 3 20.5 3H9.5ZM8 11.5C8 10.6716 8.67157 10 9.5 10H20.5C21.3284 10 22 10.6716 22 11.5C22 12.3284 21.3284 13 20.5 13H9.5C8.67157 13 8 12.3284 8 11.5ZM8 18.5C8 17.6716 8.67157 17 9.5 17H20.5C21.3284 17 22 17.6716 22 18.5C22 19.3284 21.3284 20 20.5 20H9.5C8.67157 20 8 19.3284 8 18.5ZM6 11.5C6 12.6046 5.10457 13.5 4 13.5C2.89543 13.5 2 12.6046 2 11.5C2 10.3954 2.89543 9.5 4 9.5C5.10457 9.5 6 10.3954 6 11.5ZM4 20.5C5.10457 20.5 6 19.6046 6 18.5C6 17.3954 5.10457 16.5 4 16.5C2.89543 16.5 2 17.3954 2 18.5C2 19.6046 2.89543 20.5 4 20.5Z
+    </PathGeometry>
+
+    <x:Double x:Key="ColorSliderWidth">16</x:Double>
+    <CornerRadius x:Key="ColorSliderCornerRadius">6</CornerRadius>
+    <Thickness x:Key="ColorSliderThumbBorderBrush">2</Thickness>
+    <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows>
+
+    <x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double>
+    <x:Double x:Key="ColorPreviewerAccentSectionHeight">20</x:Double>
+    <x:Double x:Key="ColorPreviewerHeight">48</x:Double>
+    <CornerRadius x:Key="ColorPreviewerCornerRadius">3</CornerRadius>
+
+    <colorPicker:SemiColorDarkPalette x:Key="SemiColorPalette" />
+</ResourceDictionary>
--- a/src/Semi.Avalonia.DataGrid/Dark.axaml
+++ b/src/Semi.Avalonia.DataGrid/Dark.axaml
@@ -1,29 +1,19 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
    <SolidColorBrush x:Key="DataGridLineBrush" Opacity="0.08" Color="White" />

-    <Thickness x:Key="DataGridCellTextBlockDefaultMargin">12 0</Thickness>
    <SolidColorBrush x:Key="DataGridCellBackground" Color="Transparent" />
    <SolidColorBrush x:Key="DataGridCellFocusBorderBrush" Color="#41464C" />
    <SolidColorBrush x:Key="DataGridCellCurrentBorderBrush" Opacity="0.08" Color="White" />
    <SolidColorBrush x:Key="DataGridCellErrorBrush" Color="#6C090B" />
-    <x:Double x:Key="DataGridCellMinHeight">32</x:Double>
-    <Thickness x:Key="DataGridCellVisualBorderThickness">1</Thickness>
-    <x:Double x:Key="DataGridCellVisualStrokeThickness">1</x:Double>


-    <SolidColorBrush x:Key="DataGridColumnHeaderForeground" Opacity="0.62" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="DataGridColumnHeaderForeground" Opacity="0.6" Color="#F9F9F9" />
    <SolidColorBrush x:Key="DataGridColumnHeaderBackground" Color="Transparent" />
-    <Thickness x:Key="DataGridColumnHeaderPadding">12 0 0 0</Thickness>
-    <x:Double x:Key="DataGridColumnHeaderMinHeight">32</x:Double>
+
    <SolidColorBrush x:Key="DataGridColumnHeaderPointeroverBackground" Opacity="0.16" Color="White" />
    <SolidColorBrush x:Key="DataGridColumnHeaderPressedBackground" Opacity="0.20" Color="White" />

-    <PathGeometry x:Key="DataGridColumnHeaderAscendingGlyph">M6.45096 8.34102L11.247 2.86102C11.3408 2.75361 11.4566 2.66753 11.5865 2.60854C11.7163 2.54956 11.8573 2.51904 12 2.51904C12.1426 2.51904 12.2836 2.54956 12.4135 2.60854C12.5433 2.66753 12.6591 2.75361 12.753 2.86102L17.549 8.34102C18.115 8.98802 17.655 10 16.796 10H7.20396C6.34396 10 5.88496 8.98802 6.45096 8.34102Z</PathGeometry>
-    <PathGeometry x:Key="DataGridColumnHeaderDescendingGlyph">M17.549 15.659L12.753 21.139C12.6591 21.2464 12.5434 21.3325 12.4135 21.3915C12.2836 21.4505 12.1427 21.481 12 21.481C11.8574 21.481 11.7164 21.4505 11.5865 21.3915C11.4566 21.3325 11.3409 21.2464 11.247 21.139L6.45101 15.659C5.88501 15.011 6.34501 14 7.20401 14H16.796C17.656 14 18.115 15.012 17.549 15.659Z</PathGeometry>
-
    <SolidColorBrush x:Key="DataGridRowBackground" Color="Transparent" />
-    <Thickness x:Key="DataGridRowHeaderMargin">8 0</Thickness>

    <SolidColorBrush x:Key="DataGridRowErrorBackground" Color="#6C090B" />
    <SolidColorBrush x:Key="DataGridDetailsPresenterBackground" Color="Transparent" />
@@ -31,13 +21,10 @@
    <SolidColorBrush x:Key="DataGridRowPointeroverBackground" Opacity="0.16" Color="White" />
    <SolidColorBrush x:Key="DataGridRowSelectedBackground" Opacity="0.2" Color="#FF54A9FF" />
    <SolidColorBrush x:Key="DataGridRowSelectedPointeroverBackground" Opacity="0.3" Color="#FF54A9FF" />
-
-    <PathGeometry x:Key="DataGridRowGroupHeaderExpandIconGlyph">M7.43934 19.7957C6.85355 19.2099 6.85355 18.2601 7.43934 17.6744L13.0962 12.0175L7.43934 6.36065C6.85355 5.77486 6.85355 4.82511 7.43934 4.23933C8.02513 3.65354 8.97487 3.65354 9.56066 4.23933L16.2782 10.9568C16.864 11.5426 16.864 12.4924 16.2782 13.0782L9.56066 19.7957C8.97487 20.3815 8.02513 20.3815 7.43934 19.7957Z</PathGeometry>
-    <SolidColorBrush x:Key="DataGridRowGroupHeaderExpandIconForeground" Opacity="0.62" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderExpandIconForeground" Opacity="0.6" Color="#F9F9F9" />
    <SolidColorBrush x:Key="DataGridRowGroupHeaderBackground" Opacity="0.12" Color="White" />

    <SolidColorBrush x:Key="DataGridRowGroupHeaderCurrentBorderBrush" Opacity="0.08" Color="White" />
-    <x:Double x:Key="DataGridRowGroupHeaderVisualStrokeThickness">1</x:Double>

    <SolidColorBrush x:Key="DataGridDisabledBackground" Color="#F9F9F9" />
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia.DataGrid/Index.axaml
+++ b/src/Semi.Avalonia.DataGrid/Index.axaml
@@ -1,5 +1,4 @@
 <Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
    <Styles.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
@@ -8,7 +7,8 @@
            </ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary.MergedDictionaries>
                <ResourceInclude Source="avares://Semi.Avalonia.DataGrid/DataGrid.axaml" />
+                <ResourceInclude Source="avares://Semi.Avalonia.DataGrid/Shared.axaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Styles.Resources>
-</Styles>
+</Styles>
--- a/src/Semi.Avalonia.DataGrid/Light.axaml
+++ b/src/Semi.Avalonia.DataGrid/Light.axaml
@@ -1,29 +1,18 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
    <SolidColorBrush x:Key="DataGridLineBrush" Opacity="0.08" Color="#1C1F23" />

-    <Thickness x:Key="DataGridCellTextBlockDefaultMargin">12 0</Thickness>
    <SolidColorBrush x:Key="DataGridCellBackground" Color="Transparent" />
    <SolidColorBrush x:Key="DataGridCellFocusBorderBrush" Color="#C6CACD" />
    <SolidColorBrush x:Key="DataGridCellCurrentBorderBrush" Opacity="0.08" Color="#1C1F23" />
    <SolidColorBrush x:Key="DataGridCellErrorBrush" Color="#FEF2ED" />
-    <x:Double x:Key="DataGridCellMinHeight">32</x:Double>
-    <Thickness x:Key="DataGridCellVisualBorderThickness">1</Thickness>
-    <x:Double x:Key="DataGridCellVisualStrokeThickness">1</x:Double>


    <SolidColorBrush x:Key="DataGridColumnHeaderForeground" Opacity="0.62" Color="#1C1F23" />
    <SolidColorBrush x:Key="DataGridColumnHeaderBackground" Color="Transparent" />
-    <Thickness x:Key="DataGridColumnHeaderPadding">12 0 0 0</Thickness>
-    <x:Double x:Key="DataGridColumnHeaderMinHeight">32</x:Double>
    <SolidColorBrush x:Key="DataGridColumnHeaderPointeroverBackground" Opacity="0.09" Color="#2E3238" />
    <SolidColorBrush x:Key="DataGridColumnHeaderPressedBackground" Opacity="0.13" Color="#2E3238" />

-    <PathGeometry x:Key="DataGridColumnHeaderAscendingGlyph">M6.45096 8.34102L11.247 2.86102C11.3408 2.75361 11.4566 2.66753 11.5865 2.60854C11.7163 2.54956 11.8573 2.51904 12 2.51904C12.1426 2.51904 12.2836 2.54956 12.4135 2.60854C12.5433 2.66753 12.6591 2.75361 12.753 2.86102L17.549 8.34102C18.115 8.98802 17.655 10 16.796 10H7.20396C6.34396 10 5.88496 8.98802 6.45096 8.34102Z</PathGeometry>
-    <PathGeometry x:Key="DataGridColumnHeaderDescendingGlyph">M17.549 15.659L12.753 21.139C12.6591 21.2464 12.5434 21.3325 12.4135 21.3915C12.2836 21.4505 12.1427 21.481 12 21.481C11.8574 21.481 11.7164 21.4505 11.5865 21.3915C11.4566 21.3325 11.3409 21.2464 11.247 21.139L6.45101 15.659C5.88501 15.011 6.34501 14 7.20401 14H16.796C17.656 14 18.115 15.012 17.549 15.659Z</PathGeometry>
-
    <SolidColorBrush x:Key="DataGridRowBackground" Color="Transparent" />
-    <Thickness x:Key="DataGridRowHeaderMargin">8 0</Thickness>

    <SolidColorBrush x:Key="DataGridRowErrorBackground" Color="#FEF2ED" />
    <SolidColorBrush x:Key="DataGridDetailsPresenterBackground" Color="Transparent" />
@@ -32,12 +21,10 @@
    <SolidColorBrush x:Key="DataGridRowSelectedBackground" Color="#EAF5FF" />
    <SolidColorBrush x:Key="DataGridRowSelectedPointeroverBackground" Color="#CBE7FE" />

-    <PathGeometry x:Key="DataGridRowGroupHeaderExpandIconGlyph">M7.43934 19.7957C6.85355 19.2099 6.85355 18.2601 7.43934 17.6744L13.0962 12.0175L7.43934 6.36065C6.85355 5.77486 6.85355 4.82511 7.43934 4.23933C8.02513 3.65354 8.97487 3.65354 9.56066 4.23933L16.2782 10.9568C16.864 11.5426 16.864 12.4924 16.2782 13.0782L9.56066 19.7957C8.97487 20.3815 8.02513 20.3815 7.43934 19.7957Z</PathGeometry>
    <SolidColorBrush x:Key="DataGridRowGroupHeaderExpandIconForeground" Opacity="0.62" Color="#1C1F23" />
    <SolidColorBrush x:Key="DataGridRowGroupHeaderBackground" Opacity="0.05" Color="#2E3238" />

    <SolidColorBrush x:Key="DataGridRowGroupHeaderCurrentBorderBrush" Opacity="0.08" Color="#1C1F23" />
-    <x:Double x:Key="DataGridRowGroupHeaderVisualStrokeThickness">1</x:Double>

    <SolidColorBrush x:Key="DataGridDisabledBackground" Color="#F9F9F9" />
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia.DataGrid/Semi.Avalonia.DataGrid.csproj
+++ b/src/Semi.Avalonia.DataGrid/Semi.Avalonia.DataGrid.csproj
@@ -1,15 +1,15 @@
 <Project Sdk="Microsoft.NET.Sdk">

-    <Import Project="../Package.props" />
-    
+    <Import Project="../Package.props"/>
+
    <PropertyGroup>
        <Title>Semi.Avalonia.DataGrid</Title>
-        <PackageReleaseNotes>Update to Avalonia 11.0.0-rc1</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to 11.0.1</PackageReleaseNotes>
    </PropertyGroup>

    <ItemGroup>
-        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(AvaloniaVersion)"/>
    </ItemGroup>
-    
+
 </Project>
--- a/src/Semi.Avalonia.DataGrid/Shared.axaml
+++ b/src/Semi.Avalonia.DataGrid/Shared.axaml
@@ -0,0 +1,19 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Thickness x:Key="DataGridCellTextBlockDefaultMargin">12 0</Thickness>
+
+    <x:Double x:Key="DataGridCellMinHeight">32</x:Double>
+    <Thickness x:Key="DataGridCellVisualBorderThickness">1</Thickness>
+    <x:Double x:Key="DataGridCellVisualStrokeThickness">1</x:Double>
+
+    <Thickness x:Key="DataGridColumnHeaderPadding">12 0 0 0</Thickness>
+    <x:Double x:Key="DataGridColumnHeaderMinHeight">32</x:Double>
+
+    <PathGeometry x:Key="DataGridColumnHeaderAscendingGlyph">M6.45096 8.34102L11.247 2.86102C11.3408 2.75361 11.4566 2.66753 11.5865 2.60854C11.7163 2.54956 11.8573 2.51904 12 2.51904C12.1426 2.51904 12.2836 2.54956 12.4135 2.60854C12.5433 2.66753 12.6591 2.75361 12.753 2.86102L17.549 8.34102C18.115 8.98802 17.655 10 16.796 10H7.20396C6.34396 10 5.88496 8.98802 6.45096 8.34102Z</PathGeometry>
+    <PathGeometry x:Key="DataGridColumnHeaderDescendingGlyph">M17.549 15.659L12.753 21.139C12.6591 21.2464 12.5434 21.3325 12.4135 21.3915C12.2836 21.4505 12.1427 21.481 12 21.481C11.8574 21.481 11.7164 21.4505 11.5865 21.3915C11.4566 21.3325 11.3409 21.2464 11.247 21.139L6.45101 15.659C5.88501 15.011 6.34501 14 7.20401 14H16.796C17.656 14 18.115 15.012 17.549 15.659Z</PathGeometry>
+
+    <Thickness x:Key="DataGridRowHeaderMargin">8 0</Thickness>
+
+    <PathGeometry x:Key="DataGridRowGroupHeaderExpandIconGlyph">M7.43934 19.7957C6.85355 19.2099 6.85355 18.2601 7.43934 17.6744L13.0962 12.0175L7.43934 6.36065C6.85355 5.77486 6.85355 4.82511 7.43934 4.23933C8.02513 3.65354 8.97487 3.65354 9.56066 4.23933L16.2782 10.9568C16.864 11.5426 16.864 12.4924 16.2782 13.0782L9.56066 19.7957C8.97487 20.3815 8.02513 20.3815 7.43934 19.7957Z</PathGeometry>
+
+    <x:Double x:Key="DataGridRowGroupHeaderVisualStrokeThickness">1</x:Double>
+</ResourceDictionary>
--- a/src/Semi.Avalonia.TreeDataGrid/Dark.axaml
+++ b/src/Semi.Avalonia.TreeDataGrid/Dark.axaml
@@ -0,0 +1,12 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Opacity="0.08" Color="White" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBackground" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPressedBackground" Opacity="0.20" Color="White" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBorderBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPressedBorderBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverForeground" Opacity="0.8" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPressedForeground" Opacity="1" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="TreeDataGridCellSelectedBackground" Opacity="0.2" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="TreeDataGridColumnHeaderForeground" Opacity="0.6" Color="#F9F9F9" />
+</ResourceDictionary>
--- a/src/Semi.Avalonia.TreeDataGrid/Index.axaml
+++ b/src/Semi.Avalonia.TreeDataGrid/Index.axaml
@@ -0,0 +1,15 @@
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <Styles.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.ThemeDictionaries>
+                <MergeResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.TreeDataGrid/Light.axaml" />
+                <MergeResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.TreeDataGrid/Dark.axaml" />
+            </ResourceDictionary.ThemeDictionaries>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceInclude Source="avares://Semi.Avalonia.TreeDataGrid/TreeDataGrid.axaml" />
+                <ResourceInclude Source="avares://Semi.Avalonia.TreeDataGrid/Shared.axaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Styles.Resources>
+</Styles>
--- a/src/Semi.Avalonia.TreeDataGrid/Light.axaml
+++ b/src/Semi.Avalonia.TreeDataGrid/Light.axaml
@@ -0,0 +1,12 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Opacity="0.08" Color="#1C1F23" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPressedBackground" Opacity="0.13" Color="#2E3238" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBorderBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPressedBorderBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverForeground" Opacity="0.8" Color="#1C1F23" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPressedForeground" Opacity="1" Color="#1C1F23" />
+    <SolidColorBrush x:Key="TreeDataGridCellSelectedBackground" Color="#EAF5FF" />
+    <SolidColorBrush x:Key="TreeDataGridColumnHeaderForeground" Opacity="0.62" Color="#1C1F23" />
+</ResourceDictionary>
--- a/src/Semi.Avalonia.TreeDataGrid/Semi.Avalonia.TreeDataGrid.csproj
+++ b/src/Semi.Avalonia.TreeDataGrid/Semi.Avalonia.TreeDataGrid.csproj
@@ -0,0 +1,19 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+    <PropertyGroup>
+        <TargetFramework>net6.0</TargetFramework>
+        <Nullable>enable</Nullable>
+        <LangVersion>11</LangVersion>
+        <Version>11.0.1</Version>
+        <Authors>IRIHI Technology</Authors>
+        <Description>Avalonia Theme inspired by Semi Design.</Description>
+        <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
+        <AvaloniaVersion>11.0.0</AvaloniaVersion>
+        <PackageLicenseExpression>MIT</PackageLicenseExpression>
+    </PropertyGroup>
+
+    <ItemGroup>
+        <PackageReference Include="Avalonia.Controls.TreeDataGrid" Version="$(AvaloniaVersion)"/>
+    </ItemGroup>
+
+</Project>
--- a/src/Semi.Avalonia.TreeDataGrid/Shared.axaml
+++ b/src/Semi.Avalonia.TreeDataGrid/Shared.axaml
@@ -0,0 +1,8 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <StreamGeometry x:Key="TreeDataGridSortIconDescendingPath">
+        M17.549 15.659L12.753 21.139C12.6591 21.2464 12.5434 21.3325 12.4135 21.3915C12.2836 21.4505 12.1427 21.481 12 21.481C11.8574 21.481 11.7164 21.4505 11.5865 21.3915C11.4566 21.3325 11.3409 21.2464 11.247 21.139L6.45101 15.659C5.88501 15.011 6.34501 14 7.20401 14H16.796C17.656 14 18.115 15.012 17.549 15.659Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="TreeDataGridSortIconAscendingPath">M6.45096 8.34102L11.247 2.86102C11.3408 2.75361 11.4566 2.66753 11.5865 2.60854C11.7163 2.54956 11.8573 2.51904 12 2.51904C12.1426 2.51904 12.2836 2.54956 12.4135 2.60854C12.5433 2.66753 12.6591 2.75361 12.753 2.86102L17.549 8.34102C18.115 8.98802 17.655 10 16.796 10H7.20396C6.34396 10 5.88496 8.98802 6.45096 8.34102Z</StreamGeometry>
+    <StreamGeometry x:Key="TreeDataGridItemCollapsedChevronPathData">M9.65618 3.44015L18.6322 11.2454C19.0906 11.644 19.0906 12.356 18.6322 12.7546L9.65618 20.5598C9.00895 21.1226 8 20.6629 8 19.8052V4.19475C8 3.33705 9.00895 2.87734 9.65618 3.44015Z</StreamGeometry>
+</ResourceDictionary>
--- a/src/Semi.Avalonia.TreeDataGrid/TreeDataGrid.axaml
+++ b/src/Semi.Avalonia.TreeDataGrid/TreeDataGrid.axaml
@@ -0,0 +1,342 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:conv="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls.TreeDataGrid">
+    <!--  Add Resources Here  -->
+    <Design.PreviewWith>
+        <StackPanel Margin="20">
+            <TreeDataGridColumnHeader Header="123" />
+        </StackPanel>
+    </Design.PreviewWith>
+    <ControlTheme x:Key="{x:Type TreeDataGrid}" TargetType="TreeDataGrid">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="TreeDataGrid">
+                <Border
+                    x:Name="RootBorder"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <DockPanel>
+                        <ScrollViewer
+                            Name="PART_HeaderScrollViewer"
+                            DockPanel.Dock="Top"
+                            HorizontalScrollBarVisibility="Hidden"
+                            IsVisible="{TemplateBinding ShowColumnHeaders}"
+                            VerticalScrollBarVisibility="Disabled">
+                            <Border x:Name="ColumnHeadersPresenterBorder">
+                                <TreeDataGridColumnHeadersPresenter
+                                    Name="PART_ColumnHeadersPresenter"
+                                    ElementFactory="{TemplateBinding ElementFactory}"
+                                    Items="{TemplateBinding Columns}" />
+                            </Border>
+                        </ScrollViewer>
+                        <ScrollViewer Name="PART_ScrollViewer" HorizontalScrollBarVisibility="Auto">
+                            <TreeDataGridRowsPresenter
+                                Name="PART_RowsPresenter"
+                                Columns="{TemplateBinding Columns}"
+                                ElementFactory="{TemplateBinding ElementFactory}"
+                                Items="{TemplateBinding Rows}" />
+                        </ScrollViewer>
+                    </DockPanel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^/template/ Border#ColumnHeadersPresenterBorder">
+            <Setter Property="BorderThickness" Value="0 0 0 1" />
+            <Setter Property="BorderBrush" Value="{DynamicResource TreeDataGridGridLinesBrush}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type TreeDataGridColumnHeader}" TargetType="TreeDataGridColumnHeader">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="MinHeight" Value="32" />
+        <Setter Property="Padding" Value="8 2 0 2" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="CornerRadius" Value="4" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Foreground" Value="{DynamicResource TreeDataGridColumnHeaderForeground}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="TreeDataGridColumnHeader">
+                <Panel>
+                    <Border
+                        Name="DataGridBorder"
+                        Margin="4"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                    <DockPanel VerticalAlignment="Stretch">
+                        <Panel DockPanel.Dock="Right" TabIndex="2">
+                            <Rectangle
+                                Width="1"
+                                HorizontalAlignment="Right"
+                                Fill="{DynamicResource TreeDataGridGridLinesBrush}" />
+                            <Thumb
+                                Name="PART_Resizer"
+                                Width="5"
+                                Background="Transparent"
+                                Cursor="SizeWestEast"
+                                DockPanel.Dock="Right"
+                                IsVisible="{TemplateBinding CanUserResize}">
+                                <Thumb.Template>
+                                    <ControlTemplate>
+                                        <Border VerticalAlignment="Stretch" Background="{TemplateBinding Background}" />
+                                    </ControlTemplate>
+                                </Thumb.Template>
+                            </Thumb>
+                        </Panel>
+                        <PathIcon
+                            Name="SortIcon"
+                            Width="8"
+                            Height="8"
+                            Margin="0,0,8,0"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            DockPanel.Dock="Right"
+                            Foreground="{TemplateBinding Foreground}"
+                            TabIndex="1" />
+                        <ContentPresenter
+                            Name="PART_ContentPresenter"
+                            Padding="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding Header}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            TabIndex="0">
+                            <ContentPresenter.DataTemplates>
+                                <DataTemplate DataType="x:String">
+                                    <TextBlock Text="{Binding}" TextTrimming="CharacterEllipsis" />
+                                </DataTemplate>
+                            </ContentPresenter.DataTemplates>
+                        </ContentPresenter>
+                    </DockPanel>
+                </Panel>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:pointerover /template/ Border#DataGridBorder">
+            <Setter Property="Background" Value="{DynamicResource TreeDataGridHeaderPointerOverBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource TreeDataGridHeaderPointerOverBorderBrush}" />
+            <Setter Property="TextBlock.Foreground" Value="{DynamicResource TreeDataGridHeaderPointerOverForeground}" />
+        </Style>
+
+        <Style Selector="^:pressed /template/ Border#DataGridBorder">
+            <Setter Property="Background" Value="{DynamicResource TreeDataGridHeaderPressedBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource TreeDataGridHeaderPressedBorderBrush}" />
+            <Setter Property="TextBlock.Foreground" Value="{DynamicResource TreeDataGridHeaderPressedForeground}" />
+        </Style>
+
+        <Style Selector="^[SortDirection=Ascending] /template/ PathIcon#SortIcon">
+            <Setter Property="IsVisible" Value="True" />
+            <Setter Property="Data" Value="{DynamicResource TreeDataGridSortIconAscendingPath}" />
+        </Style>
+
+        <Style Selector="^[SortDirection=Descending] /template/ PathIcon#SortIcon">
+            <Setter Property="IsVisible" Value="True" />
+            <Setter Property="Data" Value="{DynamicResource TreeDataGridSortIconDescendingPath}" />
+        </Style>
+
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type TreeDataGridRow}" TargetType="TreeDataGridRow">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="CornerRadius" Value="3" />
+        <Setter Property="MinHeight" Value="32" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Panel>
+                    <Border
+                        Name="RowBorder"
+                        Margin="2"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                    <TreeDataGridCellsPresenter
+                        Name="PART_CellsPresenter"
+                        ElementFactory="{TemplateBinding ElementFactory}"
+                        Items="{TemplateBinding Columns}"
+                        Rows="{TemplateBinding Rows}" />
+                </Panel>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:selected /template/ Border#RowBorder">
+            <Setter Property="Background" Value="{DynamicResource TreeDataGridCellSelectedBackground}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type TreeDataGridCheckBoxCell}" TargetType="TreeDataGridCheckBoxCell">
+        <Setter Property="Padding" Value="4 2" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border
+                    x:Name="CellBorder"
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <CheckBox
+                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                        VerticalAlignment="Center"
+                        IsChecked="{TemplateBinding Value,
+                                                    Mode=TwoWay}"
+                        IsEnabled="{Binding !IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}"
+                        IsThreeState="{TemplateBinding IsThreeState}"
+                        Theme="{DynamicResource SimpleCheckBox}" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="TreeDataGridExpandCollapseChevron" TargetType="ToggleButton">
+        <Setter Property="Margin" Value="0" />
+        <Setter Property="Width" Value="8" />
+        <Setter Property="Height" Value="8" />
+        <Setter Property="Foreground" Value="{DynamicResource TreeDataGridColumnHeaderForeground}" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border
+                    Width="{TemplateBinding Width}"
+                    Height="{TemplateBinding Height}"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    Background="Transparent">
+                    <PathIcon
+                        x:Name="ChevronPath"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        Data="{DynamicResource TreeDataGridItemCollapsedChevronPathData}"
+                        Foreground="{TemplateBinding Foreground}" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:checked /template/ PathIcon#ChevronPath">
+            <Setter Property="PathIcon.RenderTransform" Value="rotate(90deg)" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type TreeDataGridExpanderCell}" TargetType="TreeDataGridExpanderCell">
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border
+                    x:Name="CellBorder"
+                    Padding="{TemplateBinding Indent,
+                                              Converter={x:Static conv:IndentConverter.Instance}}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <DockPanel>
+                        <Border
+                            Width="12"
+                            Height="12"
+                            Margin="4,0"
+                            DockPanel.Dock="Left">
+                            <ToggleButton
+                                Focusable="False"
+                                IsChecked="{TemplateBinding IsExpanded,
+                                                            Mode=TwoWay}"
+                                IsVisible="{TemplateBinding ShowExpander}"
+                                Theme="{StaticResource TreeDataGridExpandCollapseChevron}" />
+                        </Border>
+                        <Decorator Name="PART_Content" />
+                    </DockPanel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type TreeDataGridTextCell}" TargetType="TreeDataGridTextCell">
+        <Setter Property="Padding" Value="8 4" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border
+                    x:Name="CellBorder"
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <TextBlock
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Center"
+                        Background="Transparent"
+                        Text="{TemplateBinding Value}"
+                        TextTrimming="{TemplateBinding TextTrimming}"
+                        TextWrapping="{TemplateBinding TextWrapping}" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:editing">
+            <Setter Property="Padding" Value="4 2" />
+            <Setter Property="Template">
+                <ControlTemplate>
+                    <Border
+                        x:Name="CellBorder"
+                        Padding="{TemplateBinding Padding}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <TextBox
+                            Name="PART_Edit"
+                            Classes="Small"
+                            Text="{TemplateBinding Value,
+                                                   Mode=TwoWay}" />
+                    </Border>
+                </ControlTemplate>
+            </Setter>
+        </Style>
+
+        <Style Selector="^:editing /template/ TextBox#PART_Edit">
+            <Setter Property="Background" Value="Transparent" />
+            <Setter Property="MinHeight" Value="25" />
+            <Setter Property="Padding" Value="10,3,6,3" />
+            <Setter Property="VerticalAlignment" Value="Center" />
+        </Style>
+
+        <Style Selector="^:editing /template/ TextBox#PART_Edit DataValidationErrors">
+            <Setter Property="Theme" Value="{DynamicResource TooltipDataValidationErrors}" />
+        </Style>
+
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type TreeDataGridTemplateCell}" TargetType="TreeDataGridTemplateCell">
+        <Setter Property="Template">
+            <ControlTemplate>
+                <ContentPresenter
+                    Name="PART_ContentPresenter"
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}" />
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:editing">
+            <Setter Property="Padding" Value="4 2" />
+            <Setter Property="Template">
+                <ControlTemplate>
+                    <ContentPresenter
+                        Name="PART_EditingContentPresenter"
+                        Padding="{TemplateBinding Padding}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding EditingTemplate}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                </ControlTemplate>
+            </Setter>
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Controls/HeaderedContentControl.axaml
+++ b/src/Semi.Avalonia/Controls/HeaderedContentControl.axaml
@@ -7,8 +7,6 @@
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="{DynamicResource HeaderedContentControlDefaultBorderBrush}" />
        <Setter Property="CornerRadius" Value="{DynamicResource HeaderedContentControlCornerRadius}" />
-        <Setter Property="Width" Value="400" />
-        <Setter Property="Height" Value="200" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
@@ -23,7 +21,7 @@
                    BorderBrush="{TemplateBinding BorderBrush}"
                    CornerRadius="{TemplateBinding CornerRadius}"
                    BorderThickness="{TemplateBinding BorderThickness}">
-                    <Grid RowDefinitions="Auto,Auto,*">
+                    <Grid RowDefinitions="Auto,Auto,Auto">
                        <ContentPresenter
                            Grid.Row="0"
                            FontWeight="Bold"
--- a/src/Semi.Avalonia/Controls/Label.axaml
+++ b/src/Semi.Avalonia/Controls/Label.axaml
@@ -20,60 +20,60 @@
                <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
            </WrapPanel>
            <WrapPanel>
-                <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-                <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-                <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-                <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
-                <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-                <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-                <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-                <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-                <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-                <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
                <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
                <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-                <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
-                <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
                <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
+                <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
                <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
                <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
            </WrapPanel>
            <WrapPanel>
-                <Label Classes="Ghost Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-                <Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-                <Label Classes="Ghost Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-                <Label Classes="Ghost Green" Theme="{StaticResource TagLabel}">Green</Label>
-                <Label Classes="Ghost Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-                <Label Classes="Ghost Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-                <Label Classes="Ghost LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-                <Label Classes="Ghost LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-                <Label Classes="Ghost Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-                <Label Classes="Ghost Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                <Label Classes="Ghost Red" Theme="{StaticResource TagLabel}">Red</Label>
                <Label Classes="Ghost Pink" Theme="{StaticResource TagLabel}">Pink</Label>
                <Label Classes="Ghost Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-                <Label Classes="Ghost Red" Theme="{StaticResource TagLabel}">Red</Label>
-                <Label Classes="Ghost Teal" Theme="{StaticResource TagLabel}">Teal</Label>
                <Label Classes="Ghost Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                <Label Classes="Ghost Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                <Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                <Label Classes="Ghost LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                <Label Classes="Ghost Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                <Label Classes="Ghost Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                <Label Classes="Ghost Green" Theme="{StaticResource TagLabel}">Green</Label>
+                <Label Classes="Ghost LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                <Label Classes="Ghost Lime" Theme="{StaticResource TagLabel}">Lime</Label>
                <Label Classes="Ghost Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                <Label Classes="Ghost Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                <Label Classes="Ghost Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                <Label Classes="Ghost Grey" Theme="{StaticResource TagLabel}">Grey</Label>
                <Label Classes="Ghost White" Theme="{StaticResource TagLabel}">White</Label>
            </WrapPanel>
            <WrapPanel>
-                <Label Classes="Solid Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-                <Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-                <Label Classes="Solid Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-                <Label Classes="Solid Green" Theme="{StaticResource TagLabel}">Green</Label>
-                <Label Classes="Solid Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-                <Label Classes="Solid Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-                <Label Classes="Solid LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-                <Label Classes="Solid LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-                <Label Classes="Solid Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-                <Label Classes="Solid Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                <Label Classes="Solid Red" Theme="{StaticResource TagLabel}">Red</Label>
                <Label Classes="Solid Pink" Theme="{StaticResource TagLabel}">Pink</Label>
                <Label Classes="Solid Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-                <Label Classes="Solid Red" Theme="{StaticResource TagLabel}">Red</Label>
-                <Label Classes="Solid Teal" Theme="{StaticResource TagLabel}">Teal</Label>
                <Label Classes="Solid Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                <Label Classes="Solid Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                <Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                <Label Classes="Solid LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                <Label Classes="Solid Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                <Label Classes="Solid Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                <Label Classes="Solid Green" Theme="{StaticResource TagLabel}">Green</Label>
+                <Label Classes="Solid LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                <Label Classes="Solid Lime" Theme="{StaticResource TagLabel}">Lime</Label>
                <Label Classes="Solid Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                <Label Classes="Solid Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                <Label Classes="Solid Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                <Label Classes="Solid Grey" Theme="{StaticResource TagLabel}">Grey</Label>
                <Label Classes="Solid White" Theme="{StaticResource TagLabel}">White</Label>
            </WrapPanel>

@@ -162,7 +162,7 @@
    <!--  Light, Ghost, Solid.  -->
    <!--  Shape: Square,Circle. Default is Square  -->
    <!--  Size: Small, Large. Default is Small  -->
-    <!--  Color: Amber, Blue, Cyan, Green, Grey, Indigo, LightBlue, LightGreen, Lime, Orange, Pink, Purple, Red, Teal, Violet, Yellow, White. Default is Grey  -->
+    <!--  Color: Red, Pink, Purple, Violet, Indigo, Blue, LightBlue, Cyan, Teal, Green, LightGreen, Lime, Yellow, Amber, Orange, Grey, White. Default is Grey  -->
    <ControlTheme x:Key="TagLabel" TargetType="Label">
        <Setter Property="Label.BorderThickness" Value="{DynamicResource LabelTagBorderThickness}" />
        <Setter Property="Label.MinHeight" Value="{DynamicResource LabelTagSmallHeight}" />
@@ -203,45 +203,9 @@
            <Setter Property="Label.BorderBrush" Value="Transparent" />
            <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightGreyBackground}" />
            <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightGreyForeground}" />
-            <Style Selector="^.Amber">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightAmberBackground}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightAmberForeground}" />
-            </Style>
-            <Style Selector="^.Blue">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightBlueBackground}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightBlueForeground}" />
-            </Style>
-            <Style Selector="^.Cyan">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightCyanBackground}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightCyanForeground}" />
-            </Style>
-            <Style Selector="^.Green">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightGreenBackground}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightGreenForeground}" />
-            </Style>
-            <Style Selector="^.Grey">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightGreyBackground}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightGreyForeground}" />
-            </Style>
-            <Style Selector="^.Indigo">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightIndigoBackground}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightIndigoForeground}" />
-            </Style>
-            <Style Selector="^.LightBlue">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightLightBlueBackground}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightLightBlueForeground}" />
-            </Style>
-            <Style Selector="^.LightGreen">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightLightGreenBackground}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightLightGreenForeground}" />
-            </Style>
-            <Style Selector="^.Lime">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightLimeBackground}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightLimeForeground}" />
-            </Style>
-            <Style Selector="^.Orange">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightOrangeBackground}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightOrangeForeground}" />
+            <Style Selector="^.Red">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightRedBackground}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightRedForeground}" />
            </Style>
            <Style Selector="^.Pink">
                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightPinkBackground}" />
@@ -251,22 +215,58 @@
                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightPurpleBackground}" />
                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightPurpleForeground}" />
            </Style>
-            <Style Selector="^.Red">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightRedBackground}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightRedForeground}" />
+            <Style Selector="^.Violet">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightVioletBackground}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightVioletForeground}" />
+            </Style>
+            <Style Selector="^.Indigo">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightIndigoBackground}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightIndigoForeground}" />
+            </Style>
+            <Style Selector="^.Blue">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightBlueBackground}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightBlueForeground}" />
+            </Style>
+            <Style Selector="^.LightBlue">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightLightBlueBackground}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightLightBlueForeground}" />
+            </Style>
+            <Style Selector="^.Cyan">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightCyanBackground}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightCyanForeground}" />
            </Style>
            <Style Selector="^.Teal">
                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightTealBackground}" />
                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightTealForeground}" />
            </Style>
-            <Style Selector="^.Violet">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightVioletBackground}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightVioletForeground}" />
+            <Style Selector="^.Green">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightGreenBackground}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightGreenForeground}" />
+            </Style>
+            <Style Selector="^.LightGreen">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightLightGreenBackground}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightLightGreenForeground}" />
+            </Style>
+            <Style Selector="^.Lime">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightLimeBackground}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightLimeForeground}" />
            </Style>
            <Style Selector="^.Yellow">
                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightYellowBackground}" />
                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightYellowForeground}" />
            </Style>
+            <Style Selector="^.Amber">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightAmberBackground}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightAmberForeground}" />
+            </Style>
+            <Style Selector="^.Orange">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightOrangeBackground}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightOrangeForeground}" />
+            </Style>
+            <Style Selector="^.Grey">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightGreyBackground}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightGreyForeground}" />
+            </Style>
            <Style Selector="^.White">
                <Setter Property="Label.Background" Value="{DynamicResource LabelTagLightWhiteBackground}" />
                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightWhiteForeground}" />
@@ -277,45 +277,9 @@
            <Setter Property="Label.Background" Value="Transparent" />
            <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagLightGreyBackground}" />
            <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagLightGreyForeground}" />
-            <Style Selector="^.Amber">
-                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostAmberBorderBrush}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostAmberForeground}" />
-            </Style>
-            <Style Selector="^.Blue">
-                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostBlueBorderBrush}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostBlueForeground}" />
-            </Style>
-            <Style Selector="^.Cyan">
-                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostCyanBorderBrush}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostCyanForeground}" />
-            </Style>
-            <Style Selector="^.Green">
-                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostGreenBorderBrush}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostGreenForeground}" />
-            </Style>
-            <Style Selector="^.Grey">
-                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostGreyBorderBrush}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostGreyForeground}" />
-            </Style>
-            <Style Selector="^.Indigo">
-                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostIndigoBorderBrush}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostIndigoForeground}" />
-            </Style>
-            <Style Selector="^.LightBlue">
-                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostLightBlueBorderBrush}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostLightBlueForeground}" />
-            </Style>
-            <Style Selector="^.LightGreen">
-                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostLightGreenBorderBrush}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostLightGreenForeground}" />
-            </Style>
-            <Style Selector="^.Lime">
-                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostLimeBorderBrush}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostLimeForeground}" />
-            </Style>
-            <Style Selector="^.Orange">
-                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostOrangeBorderBrush}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostOrangeForeground}" />
+            <Style Selector="^.Red">
+                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostRedBorderBrush}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostRedForeground}" />
            </Style>
            <Style Selector="^.Pink">
                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostPinkBorderBrush}" />
@@ -325,22 +289,58 @@
                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostPurpleBorderBrush}" />
                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostPurpleForeground}" />
            </Style>
-            <Style Selector="^.Red">
-                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostRedBorderBrush}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostRedForeground}" />
+            <Style Selector="^.Violet">
+                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostVioletBorderBrush}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostVioletForeground}" />
+            </Style>
+            <Style Selector="^.Indigo">
+                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostIndigoBorderBrush}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostIndigoForeground}" />
+            </Style>
+            <Style Selector="^.Blue">
+                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostBlueBorderBrush}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostBlueForeground}" />
+            </Style>
+            <Style Selector="^.LightBlue">
+                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostLightBlueBorderBrush}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostLightBlueForeground}" />
+            </Style>
+            <Style Selector="^.Cyan">
+                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostCyanBorderBrush}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostCyanForeground}" />
            </Style>
            <Style Selector="^.Teal">
                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostTealBorderBrush}" />
                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostTealForeground}" />
            </Style>
-            <Style Selector="^.Violet">
-                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostVioletBorderBrush}" />
-                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostVioletForeground}" />
+            <Style Selector="^.Green">
+                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostGreenBorderBrush}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostGreenForeground}" />
+            </Style>
+            <Style Selector="^.LightGreen">
+                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostLightGreenBorderBrush}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostLightGreenForeground}" />
+            </Style>
+            <Style Selector="^.Lime">
+                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostLimeBorderBrush}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostLimeForeground}" />
            </Style>
            <Style Selector="^.Yellow">
                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostYellowBorderBrush}" />
                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostYellowForeground}" />
            </Style>
+            <Style Selector="^.Amber">
+                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostAmberBorderBrush}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostAmberForeground}" />
+            </Style>
+            <Style Selector="^.Orange">
+                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostOrangeBorderBrush}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostOrangeForeground}" />
+            </Style>
+            <Style Selector="^.Grey">
+                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostGreyBorderBrush}" />
+                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostGreyForeground}" />
+            </Style>
            <Style Selector="^.White">
                <Setter Property="Label.Background" Value="{DynamicResource LabelTagGhostWhiteBackground}" />
                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostWhiteForeground}" />
@@ -351,35 +351,8 @@
            <Setter Property="Label.BorderBrush" Value="Transparent" />
            <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagSolidForeground}" />
            <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidGreyBackground}" />
-            <Style Selector="^.Amber">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidAmberBackground}" />
-            </Style>
-            <Style Selector="^.Blue">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidBlueBackground}" />
-            </Style>
-            <Style Selector="^.Cyan">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidCyanBackground}" />
-            </Style>
-            <Style Selector="^.Green">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidGreenBackground}" />
-            </Style>
-            <Style Selector="^.Grey">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidGreyBackground}" />
-            </Style>
-            <Style Selector="^.Indigo">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidIndigoBackground}" />
-            </Style>
-            <Style Selector="^.LightBlue">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidLightBlueBackground}" />
-            </Style>
-            <Style Selector="^.LightGreen">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidLightGreenBackground}" />
-            </Style>
-            <Style Selector="^.Lime">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidLimeBackground}" />
-            </Style>
-            <Style Selector="^.Orange">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidOrangeBackground}" />
+            <Style Selector="^.Red">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidRedBackground}" />
            </Style>
            <Style Selector="^.Pink">
                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidPinkBackground}" />
@@ -387,18 +360,45 @@
            <Style Selector="^.Purple">
                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidPurpleBackground}" />
            </Style>
-            <Style Selector="^.Red">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidRedBackground}" />
+            <Style Selector="^.Violet">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidVioletBackground}" />
+            </Style>
+            <Style Selector="^.Indigo">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidIndigoBackground}" />
+            </Style>
+            <Style Selector="^.Blue">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidBlueBackground}" />
+            </Style>
+            <Style Selector="^.LightBlue">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidLightBlueBackground}" />
+            </Style>
+            <Style Selector="^.Cyan">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidCyanBackground}" />
            </Style>
            <Style Selector="^.Teal">
                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidTealBackground}" />
            </Style>
-            <Style Selector="^.Violet">
-                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidVioletBackground}" />
+            <Style Selector="^.Green">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidGreenBackground}" />
+            </Style>
+            <Style Selector="^.LightGreen">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidLightGreenBackground}" />
+            </Style>
+            <Style Selector="^.Lime">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidLimeBackground}" />
            </Style>
            <Style Selector="^.Yellow">
                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidYellowBackground}" />
            </Style>
+            <Style Selector="^.Amber">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidAmberBackground}" />
+            </Style>
+            <Style Selector="^.Orange">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidOrangeBackground}" />
+            </Style>
+            <Style Selector="^.Grey">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagSolidGreyBackground}" />
+            </Style>
            <Style Selector="^.White">
                <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagSolidWhiteForeground}" />
                <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagSolidWhiteBorderBrush}" />
--- a/src/Semi.Avalonia/Controls/ListBox.axaml
+++ b/src/Semi.Avalonia/Controls/ListBox.axaml
@@ -11,6 +11,7 @@
            <ListBoxItem>Item 4</ListBoxItem>
        </ListBox>
    </Design.PreviewWith>
+
    <ControlTheme x:Key="{x:Type ListBox}" TargetType="ListBox">
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
@@ -39,7 +40,6 @@
            </ControlTemplate>
        </Setter>
    </ControlTheme>
-
    <ControlTheme x:Key="{x:Type ListBoxItem}" TargetType="ListBoxItem">
        <Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemDefaultBackground}" />
        <Setter Property="ListBoxItem.Padding" Value="{DynamicResource ListBoxItemDefaultPadding}" />
@@ -66,7 +66,8 @@
            <Setter Property="ListBoxItem.Foreground" Value="{DynamicResource ListBoxItemDisabledForeground}" />
            <Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemDisabledBackground}" />
            <Style Selector="^:selected">
-                <Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemSelectedDisabledBackground}" />
+                <Setter Property="ListBoxItem.Background"
+                        Value="{DynamicResource ListBoxItemSelectedDisabledBackground}" />
            </Style>
        </Style>

@@ -84,8 +85,849 @@
        <Style Selector="^:selected">
            <Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemSelectedBackground}" />
            <Style Selector="^:pointerover">
-                <Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemSelectedPointeroverBackground}" />
+                <Setter Property="ListBoxItem.Background"
+                        Value="{DynamicResource ListBoxItemSelectedPointeroverBackground}" />
            </Style>
        </Style>
    </ControlTheme>
-</ResourceDictionary>
+
+    <!-- RadioGroup -->
+    <ControlTheme x:Key="RadioGroupListBox" TargetType="ListBox">
+        <Setter Property="ListBox.ItemContainerTheme" Value="{DynamicResource RadioGroupListBoxItem}" />
+        <Setter Property="ListBox.ItemsPanel">
+            <ItemsPanelTemplate>
+                <StackPanel Orientation="Horizontal" />
+            </ItemsPanelTemplate>
+        </Setter>
+        <Setter Property="ListBox.Template">
+            <ControlTemplate TargetType="ListBox">
+                <Border
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    ClipToBounds="{TemplateBinding ClipToBounds}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <ItemsPresenter
+                        Theme="{DynamicResource RadioGroupListBoxItem}"
+                        ItemsPanel="{TemplateBinding ItemsPanel}" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+    <ControlTheme x:Key="RadioGroupListBoxItem" TargetType="ListBoxItem">
+        <Setter Property="ListBoxItem.HorizontalAlignment" Value="Left" />
+        <Setter Property="ListBoxItem.VerticalAlignment" Value="Top" />
+        <Setter Property="ListBoxItem.Cursor" Value="Hand" />
+        <Setter Property="ListBoxItem.HorizontalContentAlignment" Value="Left" />
+        <Setter Property="ListBoxItem.VerticalContentAlignment" Value="Center" />
+        <Setter Property="ListBoxItem.FontSize" Value="{DynamicResource ListBoxItemRadioGroupFontSize}" />
+        <Setter Property="ListBoxItem.CornerRadius" Value="{DynamicResource ListBoxItemRadioGroupBoxCornerRadius}" />
+        <Setter Property="ListBoxItem.Foreground" Value="{DynamicResource ListBoxItemRadioGroupForeground}" />
+        <Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemRadioGroupDefaultBackground}" />
+        <Setter Property="ListBoxItem.BorderBrush" Value="{DynamicResource ListBoxItemRadioGroupDefaultBorderBrush}" />
+        <Setter Property="ListBoxItem.Template">
+            <ControlTemplate TargetType="ListBoxItem">
+                <Border
+                    Name="RootBorder"
+                    Margin="{TemplateBinding Margin}"
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid ColumnDefinitions="Auto,*">
+                        <Grid Margin="{DynamicResource ListBoxItemRadioGroupIconMargin}"
+                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
+                            <Ellipse
+                                Name="OuterEllipse"
+                                Width="{DynamicResource ListBoxItemRadioGroupIconRadius}"
+                                Height="{DynamicResource ListBoxItemRadioGroupIconRadius}"
+                                Fill="{DynamicResource ListBoxItemRadioGroupUncheckIconDefaultBackground}"
+                                Stroke="{DynamicResource ListBoxItemRadioGroupUncheckIconDefaultBorderBrush}"
+                                StrokeThickness="1"
+                                UseLayoutRounding="False" />
+
+                            <Ellipse
+                                Name="CheckGlyph"
+                                Width="{DynamicResource ListBoxItemRadioGroupGlyphRadius}"
+                                Height="{DynamicResource ListBoxItemRadioGroupGlyphRadius}"
+                                Fill="{DynamicResource ListBoxItemRadioGroupCheckGlyphFill}"
+                                Opacity="0"
+                                Stroke="{DynamicResource ListBoxItemRadioGroupCheckGlyphFill}"
+                                StrokeThickness="0"
+                                UseLayoutRounding="False" />
+                        </Grid>
+
+                        <ContentPresenter
+                            Name="PART_ContentPresenter"
+                            Grid.Column="1"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            Foreground="{TemplateBinding Foreground}"
+                            RecognizesAccessKey="True"
+                            TextElement.FontSize="{DynamicResource ListBoxItemRadioGroupFontSize}"
+                            TextElement.Foreground="{DynamicResource ListBoxItemRadioGroupForeground}" />
+                    </Grid>
+                </Border>
+
+            </ControlTemplate>
+        </Setter>
+
+
+        <!--  Unchecked State  -->
+        <Style Selector="^ /template/ Ellipse#OuterEllipse">
+            <Setter Property="Stroke" Value="{DynamicResource ListBoxItemRadioGroupUncheckIconDefaultBorderBrush}" />
+            <Setter Property="Fill" Value="{DynamicResource ListBoxItemRadioGroupUncheckIconDefaultBackground}" />
+        </Style>
+        <Style Selector="^ /template/ Ellipse#CheckGlyph">
+            <Setter Property="Ellipse.Opacity" Value="0" />
+        </Style>
+
+        <!--  Unchecked Pointerover State  -->
+        <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke"
+                        Value="{DynamicResource ListBoxItemRadioGroupUncheckIconPointeroverBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource ListBoxItemRadioGroupUncheckIconPointeroverBackground}" />
+            </Style>
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="0" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Pressed State  -->
+        <Style Selector="^:pressed">
+            <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource ListBoxItemRadioGroupUncheckIconPressedBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource ListBoxItemRadioGroupUncheckIconPressedBackground}" />
+            </Style>
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="0" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Disabled state  -->
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource ListBoxItemRadioGroupUncheckIconDisabledBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource ListBoxItemRadioGroupUncheckIconDisabledBackground}" />
+            </Style>
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="0" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource ListBoxItemRadioGroupDisabledForeground}" />
+            </Style>
+        </Style>
+
+        <!--  Checked State  -->
+        <Style Selector="^:selected">
+            <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource ListBoxItemRadioGroupCheckIconDefaultBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource ListBoxItemRadioGroupCheckIconDefaultBackground}" />
+            </Style>
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="1" />
+            </Style>
+
+            <!--  Checked Pointerover State  -->
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke"
+                            Value="{DynamicResource ListBoxItemRadioGroupCheckIconPointeroverBorderBrush}" />
+                    <Setter Property="Fill"
+                            Value="{DynamicResource ListBoxItemRadioGroupCheckIconPointeroverBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="1" />
+                </Style>
+            </Style>
+
+            <!--  Checked Pressed State  -->
+            <Style Selector="^:pressed">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke"
+                            Value="{DynamicResource ListBoxItemRadioGroupCheckIconPressedBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource ListBoxItemRadioGroupCheckIconPressedBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="1" />
+                </Style>
+            </Style>
+
+            <!--  Checked Disabled State  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke"
+                            Value="{DynamicResource ListBoxItemRadioGroupCheckIconDisabledBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource ListBoxItemRadioGroupCheckIconDisabledBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="1" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource ListBoxItemRadioGroupDisabledForeground}" />
+                </Style>
+            </Style>
+        </Style>
+    </ControlTheme>
+
+
+    <ControlTheme x:Key="ButtonRadioGroupListBox"
+                  BasedOn="{StaticResource RadioGroupListBox}"
+                  TargetType="ListBox">
+        <Setter Property="ListBox.ItemContainerTheme" Value="{DynamicResource ButtonRadioGroupListBoxItem}" />
+    </ControlTheme>
+    <ControlTheme x:Key="ButtonRadioGroupListBoxItem" TargetType="ListBoxItem">
+        <Setter Property="ListBoxItem.CornerRadius" Value="{DynamicResource ListBoxItemRadioGroupButtonCornerRadius}" />
+        <Setter Property="ListBoxItem.VerticalContentAlignment" Value="Center" />
+        <Setter Property="ListBoxItem.Margin" Value="2" />
+        <Setter Property="ListBoxItem.Cursor" Value="Hand" />
+        <Setter Property="ListBoxItem.FontWeight" Value="{DynamicResource ListBoxItemRadioGroupButtonFontWeight}" />
+        <Setter Property="ListBoxItem.FontSize" Value="{DynamicResource ListBoxItemRadioGroupButtonDefaultFontSize}" />
+        <Setter Property="ListBoxItem.Padding" Value="{DynamicResource ListBoxItemRadioGroupButtonDefaultPadding}" />
+        <Setter Property="ListBoxItem.Foreground"
+                Value="{DynamicResource ListBoxItemRadioGroupButtonUncheckedForeground}" />
+        <Setter Property="ListBoxItem.Template">
+            <ControlTemplate TargetType="ListBoxItem">
+                <ContentPresenter
+                    x:Name="PART_ContentPresenter"
+                    Margin="{TemplateBinding Margin}"
+                    Padding="{TemplateBinding Padding}"
+                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    RecognizesAccessKey="True"
+                    TextElement.FontSize="{TemplateBinding FontSize}"
+                    TextElement.FontWeight="{TemplateBinding FontWeight}"
+                    UseLayoutRounding="False" />
+            </ControlTemplate>
+        </Setter>
+        <Setter Property="ListBoxItem.Background" Value="Transparent" />
+        <Style Selector="^:pointerover">
+            <Setter Property="ListBoxItem.Background"
+                    Value="{DynamicResource ListBoxItemRadioGroupButtonUncheckedPointeroverBackground}" />
+        </Style>
+        <Style Selector="^:disabled">
+            <Setter Property="ListBoxItem.Foreground"
+                    Value="{DynamicResource ListBoxItemRadioGroupButtonUncheckedDisabledForeground}" />
+        </Style>
+        <Style Selector="^:selected">
+            <Setter Property="ListBoxItem.Background"
+                    Value="{DynamicResource ListBoxItemRadioGroupButtonCheckedBackground}" />
+            <Setter Property="ListBoxItem.Foreground"
+                    Value="{DynamicResource ListBoxItemRadioGroupButtonCheckedForeground}" />
+            <Style Selector="^:disabled">
+                <Setter Property="ListBoxItem.Foreground"
+                        Value="{DynamicResource ListBoxItemRadioGroupButtonCheckedDisabledForeground}" />
+            </Style>
+        </Style>
+        <Style Selector="^.Small">
+            <Setter Property="ListBoxItem.FontSize" Value="{DynamicResource ListBoxItemRadioGroupButtonSmallFontSize}" />
+            <Setter Property="ListBoxItem.Padding" Value="{DynamicResource ListBoxItemRadioGroupButtonSmallPadding}" />
+        </Style>
+        <Style Selector="^.Large">
+            <Setter Property="ListBoxItem.FontSize" Value="{DynamicResource ListBoxItemRadioGroupButtonLargeFontSize}" />
+            <Setter Property="ListBoxItem.Padding" Value="{DynamicResource ListBoxItemRadioGroupButtonLargePadding}" />
+        </Style>
+    </ControlTheme>
+
+
+    <ControlTheme x:Key="CardRadioGroupListBox"
+                  BasedOn="{StaticResource RadioGroupListBox}"
+                  TargetType="ListBox">
+        <Setter Property="ListBox.ItemContainerTheme" Value="{DynamicResource CardRadioGroupListBoxItem}" />
+    </ControlTheme>
+    <ControlTheme x:Key="CardRadioGroupListBoxItem" TargetType="ListBoxItem">
+        <Setter Property="ListBoxItem.Padding" Value="{DynamicResource ListBoxItemRadioGroupCardPadding}" />
+        <Setter Property="ListBoxItem.BorderThickness" Value="1" />
+        <Setter Property="ListBoxItem.CornerRadius" Value="{DynamicResource ListBoxItemRadioGroupCardCornerRadius}" />
+        <Setter Property="ListBoxItem.Cursor" Value="Hand" />
+        <Setter Property="ListBoxItem.HorizontalAlignment" Value="Left" />
+        <Setter Property="ListBoxItem.VerticalAlignment" Value="Center" />
+        <Setter Property="ListBoxItem.HorizontalContentAlignment" Value="Left" />
+        <Setter Property="ListBoxItem.VerticalContentAlignment" Value="Center" />
+        <Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemRadioGroupCardDefaultBackground}" />
+        <Setter Property="ListBoxItem.FontSize" Value="{DynamicResource ListBoxItemRadioGroupFontSize}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ListBoxItem">
+                <Border
+                    Name="RootBorder"
+                    Margin="{TemplateBinding Margin}"
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid
+                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                        ColumnDefinitions="Auto,*">
+                        <Grid Margin="{DynamicResource ListBoxItemRadioGroupIconMargin}" VerticalAlignment="Top">
+                            <Ellipse
+                                Name="OuterEllipse"
+                                Width="{DynamicResource ListBoxItemRadioGroupIconRadius}"
+                                Height="{DynamicResource ListBoxItemRadioGroupIconRadius}"
+                                Fill="{DynamicResource ListBoxItemRadioGroupUncheckIconDefaultBackground}"
+                                Stroke="{DynamicResource ListBoxItemRadioGroupUncheckIconDefaultBorderBrush}"
+                                StrokeThickness="1"
+                                UseLayoutRounding="False" />
+
+                            <Ellipse
+                                Name="CheckGlyph"
+                                Width="{DynamicResource ListBoxItemRadioGroupGlyphRadius}"
+                                Height="{DynamicResource ListBoxItemRadioGroupGlyphRadius}"
+                                Fill="{DynamicResource ListBoxItemRadioGroupCheckGlyphFill}"
+                                Opacity="0"
+                                Stroke="{DynamicResource ListBoxItemRadioGroupCheckGlyphFill}"
+                                StrokeThickness="0"
+                                UseLayoutRounding="False" />
+                        </Grid>
+
+                        <ContentPresenter
+                            Name="PART_ContentPresenter"
+                            Grid.Column="1"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            Foreground="{TemplateBinding Foreground}"
+                            RecognizesAccessKey="True"
+                            TextElement.FontSize="{DynamicResource ListBoxItemRadioGroupFontSize}"
+                            TextElement.Foreground="{DynamicResource ListBoxItemRadioGroupForeground}" />
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <!--  Unchecked State  -->
+        <Style Selector="^ /template/ Ellipse#OuterEllipse">
+            <Setter Property="Stroke" Value="{DynamicResource ListBoxItemRadioGroupUncheckIconDefaultBorderBrush}" />
+            <Setter Property="Fill" Value="{DynamicResource ListBoxItemRadioGroupUncheckIconDefaultBackground}" />
+        </Style>
+        <Style Selector="^ /template/ Ellipse#CheckGlyph">
+            <Setter Property="Ellipse.Opacity" Value="0" />
+        </Style>
+
+        <!--  Unchecked Pointerover State  -->
+        <Style Selector="^:pointerover">
+            <Setter Property="ListBoxItem.Background"
+                    Value="{DynamicResource ListBoxItemRadioGroupCardUncheckPointeroverBackground}" />
+            <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke"
+                        Value="{DynamicResource ListBoxItemRadioGroupUncheckIconPointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="0" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Pressed State  -->
+        <Style Selector="^:pressed">
+            <Setter Property="ListBoxItem.Background"
+                    Value="{DynamicResource ListBoxItemRadioGroupCardUncheckPressedBackground}" />
+            <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource ListBoxItemRadioGroupUncheckIconPressedBorderBrush}" />
+            </Style>
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="0" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Disabled state  -->
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource ListBoxItemRadioGroupUncheckIconDisabledBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource ListBoxItemRadioGroupUncheckIconDisabledBackground}" />
+            </Style>
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="0" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource ListBoxItemRadioGroupDisabledForeground}" />
+            </Style>
+        </Style>
+
+        <!--  Checked State  -->
+        <Style Selector="^:selected">
+            <Setter Property="ListBoxItem.Background"
+                    Value="{DynamicResource ListBoxItemRadioGroupCardCheckedBackground}" />
+            <Setter Property="ListBoxItem.BorderBrush"
+                    Value="{DynamicResource ListBoxItemRadioGroupCardCheckDefaultBorderBrush}" />
+            <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource ListBoxItemRadioGroupCheckIconDefaultBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource ListBoxItemRadioGroupCheckIconDefaultBackground}" />
+            </Style>
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="1" />
+            </Style>
+
+            <!--  Checked Pointerover State  -->
+            <Style Selector="^:pointerover">
+                <Setter Property="ListBoxItem.BorderBrush"
+                        Value="{DynamicResource ListBoxItemRadioGroupCardCheckPointeroverBorderBrush}" />
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke"
+                            Value="{DynamicResource ListBoxItemRadioGroupCheckIconPointeroverBorderBrush}" />
+                    <Setter Property="Fill"
+                            Value="{DynamicResource ListBoxItemRadioGroupCheckIconPointeroverBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke"
+                            Value="{DynamicResource ListBoxItemRadioGroupCheckIconPointeroverBorderBrush}" />
+                    <Setter Property="Fill"
+                            Value="{DynamicResource ListBoxItemRadioGroupCheckIconPointeroverBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="1" />
+                </Style>
+            </Style>
+
+            <!--  Checked Pressed State  -->
+            <Style Selector="^:pressed">
+                <Setter Property="ListBoxItem.BorderBrush"
+                        Value="{DynamicResource ListBoxItemRadioGroupCardCheckPressedBorderBrush}" />
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke"
+                            Value="{DynamicResource ListBoxItemRadioGroupCheckIconPressedBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource ListBoxItemRadioGroupCheckIconPressedBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="1" />
+                </Style>
+            </Style>
+
+            <!--  Checked Disabled State  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke"
+                            Value="{DynamicResource ListBoxItemRadioGroupCheckIconDisabledBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource ListBoxItemRadioGroupCheckIconDisabledBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="1" />
+                </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush"
+                            Value="{DynamicResource ListBoxItemRadioGroupCheckIconDisabledBackground}" />
+                    <Setter Property="Background" Value="{DynamicResource ListBoxItemRadioGroupCardCheckedBackground}" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource ListBoxItemRadioGroupDisabledForeground}" />
+                </Style>
+            </Style>
+        </Style>
+    </ControlTheme>
+
+
+    <ControlTheme x:Key="PureCardRadioGroupListBox"
+                  BasedOn="{StaticResource RadioGroupListBox}"
+                  TargetType="ListBox">
+        <Setter Property="ListBox.ItemContainerTheme" Value="{DynamicResource PureCardRadioGroupListBoxItem}" />
+    </ControlTheme>
+    <ControlTheme x:Key="PureCardRadioGroupListBoxItem" TargetType="ListBoxItem">
+        <Setter Property="ListBoxItem.CornerRadius" Value="{DynamicResource ListBoxItemRadioGroupCardCornerRadius}" />
+        <Setter Property="ListBoxItem.Cursor" Value="Hand" />
+        <Setter Property="ListBoxItem.VerticalContentAlignment" Value="Center" />
+        <Setter Property="ListBoxItem.BorderThickness" Value="1" />
+        <Setter Property="ListBoxItem.FontSize" Value="{DynamicResource ListBoxItemRadioGroupFontSize}" />
+        <Setter Property="ListBoxItem.Padding" Value="{DynamicResource ListBoxItemRadioGroupCardPadding}" />
+        <Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemRadioGroupCardDefaultBackground}" />
+        <Setter Property="ListBoxItem.Template">
+            <ControlTemplate TargetType="ListBoxItem">
+                <ContentPresenter
+                    x:Name="PART_ContentPresenter"
+                    Margin="{TemplateBinding Margin}"
+                    Padding="{TemplateBinding Padding}"
+                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    RecognizesAccessKey="True"
+                    UseLayoutRounding="False" />
+            </ControlTemplate>
+        </Setter>
+        <Setter Property="ListBoxItem.BorderBrush"
+                Value="{DynamicResource ListBoxItemRadioGroupCardDefaultBorderBrush}" />
+        <Style Selector="^:pointerover">
+            <Setter Property="ListBoxItem.Background"
+                    Value="{DynamicResource ListBoxItemRadioGroupCardUncheckPointeroverBackground}" />
+        </Style>
+        <Style Selector="^:pressed">
+            <Setter Property="ListBoxItem.Background"
+                    Value="{DynamicResource ListBoxItemRadioGroupCardUncheckPressedBackground}" />
+        </Style>
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource ListBoxItemRadioGroupDisabledForeground}" />
+            </Style>
+        </Style>
+        <Style Selector="^:selected">
+            <Setter Property="ListBoxItem.Background"
+                    Value="{DynamicResource ListBoxItemRadioGroupCardCheckedBackground}" />
+            <Setter Property="ListBoxItem.BorderBrush"
+                    Value="{DynamicResource ListBoxItemRadioGroupCardCheckDefaultBorderBrush}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="ListBoxItem.BorderBrush"
+                        Value="{DynamicResource ListBoxItemRadioGroupCardCheckPointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="ListBoxItem.BorderBrush"
+                        Value="{DynamicResource ListBoxItemRadioGroupCardCheckPressedBorderBrush}" />
+            </Style>
+            <Style Selector="^:disabled">
+                <Setter Property="BorderBrush"
+                        Value="{DynamicResource ListBoxItemRadioGroupCheckIconDisabledBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ListBoxItemRadioGroupCardCheckedBackground}" />
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource ListBoxItemRadioGroupDisabledForeground}" />
+                </Style>
+            </Style>
+        </Style>
+    </ControlTheme>
+
+
+    <!-- CheckGroup -->
+    <ControlTheme x:Key="CheckGroupListBox"
+                  BasedOn="{StaticResource RadioGroupListBox}"
+                  TargetType="ListBox">
+        <Setter Property="ListBox.ItemContainerTheme" Value="{DynamicResource CheckGroupListBoxItem}" />
+    </ControlTheme>
+    <ControlTheme x:Key="CheckGroupListBoxItem" TargetType="ListBoxItem">
+        <Setter Property="Padding" Value="8,0,0,0" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="VerticalAlignment" Value="Top" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="HorizontalContentAlignment" Value="Left" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="FontSize" Value="{DynamicResource ListBoxItemCheckFontSize}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ListBoxItemCheckBoxCornerRadius}" />
+        <Setter Property="MinHeight" Value="32" />
+        <Setter Property="Foreground" Value="{DynamicResource ListBoxItemCheckForeground}" />
+        <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckDefaultBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckDefaultBorderBrush}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ListBoxItem">
+                <Border
+                    x:Name="RootBorder"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
+                        <Grid
+                            Grid.Column="0"
+                            Margin="0,0,0,0"
+                            VerticalAlignment="Center">
+                            <Border
+                                x:Name="NormalRectangle"
+                                Width="{DynamicResource ListBoxItemCheckBoxWidth}"
+                                Height="{DynamicResource ListBoxItemCheckBoxHeight}"
+                                Background="{DynamicResource ListBoxItemCheckDefaultBackground}"
+                                BorderBrush="{DynamicResource ListBoxItemCheckDefaultBorderBrush}"
+                                BorderThickness="{DynamicResource ListBoxItemCheckBoxBorderThickness}"
+                                CornerRadius="{TemplateBinding CornerRadius}"
+                                UseLayoutRounding="False" />
+                            <PathIcon
+                                Name="CheckGlyph"
+                                Width="{DynamicResource ListBoxItemCheckBoxGlyphWidth}"
+                                Height="{DynamicResource ListBoxItemCheckBoxGlyphHeight}"
+                                Foreground="{DynamicResource ListBoxItemCheckGlyphFill}" />
+                        </Grid>
+                        <ContentPresenter
+                            x:Name="ContentPresenter"
+                            Grid.Column="1"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="Center"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            IsVisible="{TemplateBinding Content,Converter={x:Static ObjectConverters.IsNotNull}}"
+                            RecognizesAccessKey="True"
+                            TextWrapping="Wrap" />
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <!--  Unchecked Pointerover State  -->
+        <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckPointeroverBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckPointeroverBackground}" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Pressed State  -->
+        <Style Selector="^:pressed">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckPressedBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckPressedBackground}" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Disabled state  -->
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource ListBoxItemCheckDisabledForeground}" />
+            </Style>
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckDefaultDisabledBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckDefaultDisabledBackground}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:selected">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckCheckedDefaultBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCheckedDefaultBackground}" />
+            </Style>
+
+            <Style Selector="^ /template/ PathIcon#CheckGlyph">
+                <Setter Property="Data" Value="{DynamicResource ListBoxItemCheckCheckGlyph}" />
+                <Setter Property="Opacity" Value="1" />
+            </Style>
+
+            <!--  Checked Pointerover State  -->
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush"
+                            Value="{DynamicResource ListBoxItemCheckCheckedPointeroverBorderBrush}" />
+                    <Setter Property="Background"
+                            Value="{DynamicResource ListBoxItemCheckCheckedPointeroverBackground}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Pressed State  -->
+            <Style Selector="^:pressed">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckCheckedPressedBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCheckedPressedBackground}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Disabled State  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource ListBoxItemCheckDisabledForeground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckCheckedDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCheckedDisabledBackground}" />
+                </Style>
+
+                <Style Selector="^ /template/ Path#CheckGlyph">
+                    <Setter Property="Fill" Value="{DynamicResource ListBoxItemCheckGlyphDisabledFill}" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^:indeterminate">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckCheckedDefaultBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCheckedDefaultBackground}" />
+            </Style>
+
+            <Style Selector="^ /template/ PathIcon#CheckGlyph">
+                <Setter Property="Data" Value="{DynamicResource ListBoxItemCheckIndeterminateGlyph}" />
+                <Setter Property="Opacity" Value="1" />
+            </Style>
+
+            <!--  Checked Pointerover State  -->
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush"
+                            Value="{DynamicResource ListBoxItemCheckCheckedPointeroverBorderBrush}" />
+                    <Setter Property="Background"
+                            Value="{DynamicResource ListBoxItemCheckCheckedPointeroverBackground}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Pressed State  -->
+            <Style Selector="^:pressed">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckCheckedPressedBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCheckedPressedBackground}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Disabled State  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource ListBoxItemCheckDisabledForeground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckCheckedDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCheckedDisabledBackground}" />
+                </Style>
+
+                <Style Selector="^ /template/ Path#CheckGlyph">
+                    <Setter Property="Fill" Value="{DynamicResource ListBoxItemCheckGlyphDisabledFill}" />
+                </Style>
+            </Style>
+        </Style>
+    </ControlTheme>
+
+
+    <ControlTheme x:Key="CardCheckGroupListBox"
+                  BasedOn="{StaticResource RadioGroupListBox}"
+                  TargetType="ListBox">
+        <Setter Property="ListBox.ItemContainerTheme" Value="{DynamicResource CardCheckGroupListBoxItem}" />
+    </ControlTheme>
+    <ControlTheme x:Key="CardCheckGroupListBoxItem" TargetType="ListBoxItem">
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Padding" Value="{DynamicResource ListBoxItemCheckCardPadding}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource ListBoxItemCheckCardBorderThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ListBoxItemCheckCardCornerRadius}" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="ListBoxItem.Template">
+            <ControlTemplate TargetType="ListBoxItem">
+                <Border
+                    Name="RootBorder"
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid
+                        x:Name="RootGrid"
+                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                        ColumnDefinitions="Auto,*">
+                        <Grid Grid.Column="0" VerticalAlignment="Top">
+                            <Border
+                                x:Name="NormalRectangle"
+                                Width="{DynamicResource ListBoxItemCheckBoxWidth}"
+                                Height="{DynamicResource ListBoxItemCheckBoxHeight}"
+                                Background="{DynamicResource ListBoxItemCheckDefaultBackground}"
+                                BorderBrush="{DynamicResource ListBoxItemCheckDefaultBorderBrush}"
+                                BorderThickness="{DynamicResource ListBoxItemCheckBoxBorderThickness}"
+                                CornerRadius="{DynamicResource ListBoxItemCheckBoxCornerRadius}"
+                                UseLayoutRounding="False" />
+                            <PathIcon
+                                Name="CheckGlyph"
+                                Width="{DynamicResource ListBoxItemCheckBoxGlyphWidth}"
+                                Height="{DynamicResource ListBoxItemCheckBoxGlyphHeight}"
+                                Foreground="{DynamicResource ListBoxItemCheckGlyphFill}" />
+
+                        </Grid>
+                        <ContentPresenter
+                            x:Name="ContentPresenter"
+                            Grid.Column="1"
+                            Margin="8,0,0,0"
+                            VerticalAlignment="Center"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            IsVisible="{TemplateBinding Content,
+                                                        Converter={x:Static ObjectConverters.IsNotNull}}"
+                            RecognizesAccessKey="True"
+                            TextWrapping="Wrap" />
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <!--  Unchecked Pointerover State  -->
+        <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckPointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCardPointeroverBackground}" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Pressed State  -->
+        <Style Selector="^:pressed">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckPressedBorderBrush}" />
+            </Style>
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCardPressedBackground}" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Disabled state  -->
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource ListBoxItemCheckDisabledForeground}" />
+            </Style>
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckDefaultDisabledBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckDefaultDisabledBackground}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:selected">
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckCardCheckedBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCardCheckedBackground}" />
+            </Style>
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckCheckedDefaultBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCheckedDefaultBackground}" />
+            </Style>
+
+            <Style Selector="^ /template/ PathIcon#CheckGlyph">
+                <Setter Property="Data" Value="{DynamicResource ListBoxItemCheckCheckGlyph}" />
+                <Setter Property="Opacity" Value="1" />
+            </Style>
+
+            <!--  Checked Pointerover State  -->
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush"
+                            Value="{DynamicResource ListBoxItemCheckCheckedPointeroverBorderBrush}" />
+                    <Setter Property="Background"
+                            Value="{DynamicResource ListBoxItemCheckCheckedPointeroverBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush"
+                            Value="{DynamicResource ListBoxItemCheckCardCheckedPointeroverBorderBrush}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Pressed State  -->
+            <Style Selector="^:pressed">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckCheckedPressedBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCheckedPressedBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush"
+                            Value="{DynamicResource ListBoxItemCheckCardCheckedPressedBorderBrush}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Disabled State  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush"
+                            Value="{DynamicResource ListBoxItemCheckCardCheckedDisabledBorderBrush}" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource ListBoxItemCheckDisabledForeground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckCheckedDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCheckedDisabledBackground}" />
+                </Style>
+
+                <Style Selector="^ /template/ Path#CheckGlyph">
+                    <Setter Property="Fill" Value="{DynamicResource ListBoxItemCheckGlyphDisabledFill}" />
+                </Style>
+            </Style>
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Controls/Controls.axaml
+++ b/src/Semi.Avalonia/Controls/Controls.axaml
@@ -2,7 +2,6 @@
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:CompileBindings="True">
-    <!--  Add Resources Here  -->
    <ResourceDictionary.MergedDictionaries>
        <ResourceInclude Source="avares://Semi.Avalonia/Controls/AutoCompleteBox.axaml" />
        <ResourceInclude Source="avares://Semi.Avalonia/Controls/Border.axaml" />
@@ -61,4 +60,4 @@
        <ResourceInclude Source="avares://Semi.Avalonia/Controls/Window.axaml" />
        <ResourceInclude Source="avares://Semi.Avalonia/Controls/WindowNotificationManager.axaml" />
    </ResourceDictionary.MergedDictionaries>
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Semi.Avalonia.csproj
+++ b/src/Semi.Avalonia/Semi.Avalonia.csproj
@@ -1,18 +1,14 @@
 <Project Sdk="Microsoft.NET.Sdk">
-  
-  <Import Project="../Package.props" />
-  
-  <PropertyGroup>
-    <Title>Semi.Avalonia</Title>
-    <PackageReleaseNotes>Update to Avalonia 11.0.0-rc1</PackageReleaseNotes>
-  </PropertyGroup>

-  <ItemGroup>
-    <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
-  </ItemGroup>
+    <Import Project="../Package.props"/>

-  <ItemGroup>
-    <Folder Include="Themes\Styles" />
-  </ItemGroup>
+    <PropertyGroup>
+        <Title>Semi.Avalonia</Title>
+        <PackageReleaseNotes>Update to 11.0.1</PackageReleaseNotes>
+    </PropertyGroup>
+
+    <ItemGroup>
+        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
+    </ItemGroup>

 </Project>
--- a/src/Semi.Avalonia/Themes/Base.axaml
+++ b/src/Semi.Avalonia/Themes/Base.axaml
@@ -1,8 +1,4 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:sys="clr-namespace:System;assembly=System.Runtime">
-    <!--  Add Resources Here  -->
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
            <SolidColorBrush x:Key="DefaultForeground" Color="#1C1F23" />
@@ -11,7 +7,7 @@
            <SolidColorBrush x:Key="DefaultForeground" Color="#F9F9F9" />
        </ResourceDictionary>
    </ResourceDictionary.ThemeDictionaries>
-    <sys:Double x:Key="DefaultFontSize">14</sys:Double>
+    <x:Double x:Key="DefaultFontSize">14</x:Double>
    <FontFamily x:Key="DefaultFontFamily">Inter, -apple-system,BlinkMacSystemFont,PingFang SC, Microsoft YaHei, Segoe UI, Hiragino Sans GB, Helvetica Neue,Helvetica,Arial,sans-serif</FontFamily>
    <FontFamily x:Key="CodeFontFamily">Cascadia Code, Consolas, Inconsolata, monospace</FontFamily>
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Dark/AutoCompleteBox.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/AutoCompleteBox.axaml
@@ -2,12 +2,4 @@
    <BoxShadows x:Key="AutoCompleteBoxPopupBoxShadow">0 0 8 0 #1AFFFFFF</BoxShadows>
    <SolidColorBrush x:Key="AutoCompleteBoxPopupBackground" Color="#35363C" />
    <SolidColorBrush x:Key="AutoCompleteBoxPopupBorderBrush" Opacity="0.08" Color="#F9F9F9" />
-    <Thickness x:Key="AutoCompleteBoxPopupBorderThickness">1</Thickness>
-    <Thickness x:Key="AutoCompleteBoxPopupMargin">4</Thickness>
-    <CornerRadius x:Key="AutoCompleteBoxPopupCornerRadius">6</CornerRadius>
-    <CornerRadius x:Key="AutoCompleteBoxCornerRadius">3</CornerRadius>
-    <x:Double x:Key="AutoCompleteBoxDefaultHeight">32</x:Double>
-    <x:Double x:Key="AutoCompleteBoxSmallHeight">24</x:Double>
-    <x:Double x:Key="AutoCompleteBoxLargeHeight">40</x:Double>
-    <x:Double x:Key="AutoCompleteMaxDropdownHeight">600</x:Double>
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Dark/Border.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/Border.axaml
@@ -1,12 +1,5 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:sys="clr-namespace:System;assembly=System.Runtime">
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <SolidColorBrush x:Key="BorderCardBackground" Color="#232429" />
    <SolidColorBrush x:Key="BorderCardBorderBrush" Opacity="0.08" Color="White" />
-    <CornerRadius x:Key="RadiusCardCornerRadius">4</CornerRadius>
-    <Thickness x:Key="ThicknessCardPadding">20</Thickness>
-    <Thickness x:Key="ThicknessCardMargin">4</Thickness>
-    <Thickness x:Key="ThicknessCardBorderThickness">1</Thickness>
    <BoxShadows x:Key="BorderCardBoxShadow">0 0 14 0 #1AFFFFFF</BoxShadows>
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Dark/Button.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/Button.axaml
@@ -1,19 +1,4 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:sys="using:System">
-    <!--  Add Resources Here  -->
-    <sys:Double x:Key="ButtonDefaultFontSize">14</sys:Double>
-    <FontWeight x:Key="ButtonDefaultFontWeight">600</FontWeight>
-
-    <Thickness x:Key="ButtonDefaultPadding">12 6</Thickness>
-    <Thickness x:Key="ButtonLargePadding">16 10</Thickness>
-    <Thickness x:Key="ButtonSmallPadding">6 2</Thickness>
-
-    <Thickness x:Key="ButtonBorderThickness">1</Thickness>
-
-    <CornerRadius x:Key="ButtonCornerRadius">3</CornerRadius>
-
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!--  Light  -->
    <SolidColorBrush x:Key="ButtonDefaultPrimaryForeground" Color="#54A9FF" />
    <SolidColorBrush x:Key="ButtonDefaultSecondaryForeground" Color="#40B4F3" />
@@ -32,7 +17,6 @@
    <SolidColorBrush x:Key="ButtonDefaultPointeroverBorderBrush" Color="Transparent" />
    <SolidColorBrush x:Key="ButtonDefaultPressedBorderBrush" Color="Transparent" />
    <SolidColorBrush x:Key="ButtonDefaultDisabledBorderBrush" Color="Transparent" />
-
    <!--  end Light  -->

    <!--  Solid  -->
@@ -91,4 +75,4 @@

    <SolidColorBrush x:Key="ButtonSolidDisabledBorderBrush" Color="#FF2E3238" />
    <!--  end Solid  -->
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Dark/ButtonSpinner.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/ButtonSpinner.axaml
@@ -1,15 +1,8 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
-    <PathGeometry x:Key="ButtonSpinnerIncreaseButtonGlyph">M19.637 16.4369C19.0513 17.0227 18.1015 17.0227 17.5157 16.4369L11.8589 10.7801L6.20202 16.4369C5.61623 17.0227 4.66648 17.0227 4.0807 16.4369C3.49491 15.8511 3.49491 14.9014 4.0807 14.3156L10.7982 7.59809C11.384 7.01231 12.3337 7.01231 12.9195 7.59809L19.637 14.3156C20.2228 14.9014 20.2228 15.8511 19.637 16.4369Z</PathGeometry>
-    <PathGeometry x:Key="ButtonSpinnerDecreaseButtonGlyph">M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z</PathGeometry>
    <SolidColorBrush x:Key="ButtonSpinnerRepeatButtonBackground" Color="#FF35363C" />
    <SolidColorBrush x:Key="ButtonSpinnerRepeatButtonPointeroverBackground" Opacity="0.12" Color="White" />
    <SolidColorBrush x:Key="ButtonSpinnerRepeatButtonPressedBackground" Opacity="0.16" Color="White" />
    <SolidColorBrush x:Key="ButtonSpinnerRepeatButtonDisabledBackground" Opacity="0.04" Color="#FF2E3238" />
-    <SolidColorBrush x:Key="ButtonSpinnerRepeatButtonForeground" Opacity="0.62" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="ButtonSpinnerRepeatButtonForeground" Opacity="0.6" Color="#F9F9F9" />
    <SolidColorBrush x:Key="ButtonSpinnerRepeatButtonBorderBrush" Opacity="0.08" Color="#F9F9F9" />
-
-    <CornerRadius x:Key="ButtonSpinnerButtonGroupCornerRadius">3</CornerRadius>
-    <Thickness x:Key="ButtonSpinnerButtonGroupBorderThickness">1</Thickness>
-
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Dark/Calendar.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/Calendar.axaml
@@ -1,37 +1,24 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:sys="using:System">
-    <!--  Add Resources Here  -->
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <SolidColorBrush x:Key="CalendarBackground" Color="#232429" />
    <SolidColorBrush x:Key="CalendarForeground" Color="#F9F9F9" />
    <SolidColorBrush x:Key="CalendarBorderBrush" Opacity="0.08" Color="#F9F9F9" />
-    <Thickness x:Key="CalendarBorderThickness">1</Thickness>
-    <CornerRadius x:Key="CalendarCornerRadius">6</CornerRadius>
-    <GridLength x:Key="CalendarItemWeekDayNameHeight">40</GridLength>
-    <SolidColorBrush x:Key="CalendarItemWeekDayNameForeground" Opacity="0.62" Color="#F9F9F9" />
-    <SolidColorBrush x:Key="CalendarItemIconForeground" Opacity="0.62" Color="#F9F9F9" />
-    <PathGeometry x:Key="CalendarItemPreviousIconGlyph">M16.2782 4.23933C16.864 4.82511 16.864 5.77486 16.2782 6.36065L10.6213 12.0175L16.2782 17.6744C16.864 18.2601 16.864 19.2099 16.2782 19.7957C15.6924 20.3815 14.7426 20.3815 14.1569 19.7957L7.43934 13.0782C6.85355 12.4924 6.85355 11.5426 7.43934 10.9568L14.1569 4.23933C14.7426 3.65354 15.6924 3.65354 16.2782 4.23933Z</PathGeometry>
-    <PathGeometry x:Key="CalendarItemNextIconGlyph">M7.43934 19.7957C6.85355 19.2099 6.85355 18.2601 7.43934 17.6744L13.0962 12.0175L7.43934 6.36065C6.85355 5.77486 6.85355 4.82511 7.43934 4.23933C8.02513 3.65354 8.97487 3.65354 9.56066 4.23933L16.2782 10.9568C16.864 11.5426 16.864 12.4924 16.2782 13.0782L9.56066 19.7957C8.97487 20.3815 8.02513 20.3815 7.43934 19.7957Z</PathGeometry>
+    <SolidColorBrush x:Key="CalendarItemWeekDayNameForeground" Opacity="0.6" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="CalendarItemIconForeground" Opacity="0.6" Color="#F9F9F9" />

    <SolidColorBrush x:Key="CalendarItemCalendarButtonBackground" Color="#232429" />
    <SolidColorBrush x:Key="CalendarItemCalendarButtonForeground" Color="#F9F9F9" />
    <SolidColorBrush x:Key="CalendarItemCalendarButtonBorderBrush" Color="Transparent" />
-    <Thickness x:Key="CalendarItemCalendarButtonBorderThickness">0</Thickness>
    <SolidColorBrush x:Key="CalendarItemCalendarButtonPointeroverBackground" Opacity="0.16" Color="White" />
    <SolidColorBrush x:Key="CalendarItemCalendarButtonPressedBackground" Opacity="0.20" Color="White" />
    <SolidColorBrush x:Key="CalendarItemCalendarButtonSelectedBackground" Color="#54A9FF" />
    <SolidColorBrush x:Key="CalendarItemCalendarButtonSelectedForeground" Color="#232429" />
-    <FontWeight x:Key="CalendarItemCalendarButtonSelectedFontWeight">600</FontWeight>
    <SolidColorBrush x:Key="CalendarItemCalendarButtonDisabledForeground" Opacity="0.35" Color="#F9F9F9" />
    <SolidColorBrush x:Key="CalendarItemCalendarButtonBlackoutForeground" Opacity="0.35" Color="#F9F9F9" />
    <SolidColorBrush x:Key="CalendarItemCalendarButtonInactiveForeground" Opacity="0.65" Color="#F9F9F9" />
-    <CornerRadius x:Key="CalendarItemCalendarButtonCornerRadius">3</CornerRadius>

    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonForeground" Color="#F9F9F9" />
    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonBackground" Color="Transparent" />
    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonBorderBrush" Color="Transparent" />
-    <CornerRadius x:Key="CalendarItemCalendarDayButtonCornerRadius">3</CornerRadius>

    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonPointeroverBackground" Opacity="0.16" Color="White" />
    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonPressedBackground" Opacity="0.20" Color="White" />
@@ -44,8 +31,5 @@

    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonDisabledForeground" Opacity="0.35" Color="#F9F9F9" />
    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonBlackoutForeground" Opacity="0.35" Color="#F9F9F9" />
-    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonInactiveForeground" Opacity="0.62" Color="#F9F9F9" />
-
-    <sys:Double x:Key="CalendarMinWidth">240</sys:Double>
-    <sys:Double x:Key="CalendarMinHeight">250</sys:Double>
-</ResourceDictionary>
+    <SolidColorBrush x:Key="CalendarItemCalendarDayButtonInactiveForeground" Opacity="0.6" Color="#F9F9F9" />
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Dark/CalendarDatePicker.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/CalendarDatePicker.axaml
@@ -1,26 +1,13 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--    -->
-    <SolidColorBrush x:Key="CalendarDatePickerIconForeground" Opacity="0.62" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="CalendarDatePickerIconForeground" Opacity="0.6" Color="#F9F9F9" />
    <SolidColorBrush x:Key="CalendarDatePickerForeground" Color="#F9F9F9" />
    <SolidColorBrush x:Key="CalendarDatePickerIconPointeroverForeground" Color="#F9F9F9" />
-    <PathGeometry x:Key="CalendarDatePickerIconGlyph">M4 20V8H20V20H4ZM2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20V4ZM6 10.5C6 10.2239 6.22386 10 6.5 10H8.5C8.77614 10 9 10.2239 9 10.5V12.5C9 12.7761 8.77614 13 8.5 13H6.5C6.22386 13 6 12.7761 6 12.5V10.5ZM6.5 15C6.22386 15 6 15.2239 6 15.5V17.5C6 17.7761 6.22386 18 6.5 18H8.5C8.77614 18 9 17.7761 9 17.5V15.5C9 15.2239 8.77614 15 8.5 15H6.5ZM10.5 10.5C10.5 10.2239 10.7239 10 11 10H13C13.2761 10 13.5 10.2239 13.5 10.5V12.5C13.5 12.7761 13.2761 13 13 13H11C10.7239 13 10.5 12.7761 10.5 12.5V10.5ZM11 15C10.7239 15 10.5 15.2239 10.5 15.5V17.5C10.5 17.7761 10.7239 18 11 18H13C13.2761 18 13.5 17.7761 13.5 17.5V15.5C13.5 15.2239 13.2761 15 13 15H11ZM15 10.5C15 10.2239 15.2239 10 15.5 10H17.5C17.7761 10 18 10.2239 18 10.5V12.5C18 12.7761 17.7761 13 17.5 13H15.5C15.2239 13 15 12.7761 15 12.5V10.5ZM15.5 15C15.2239 15 15 15.2239 15 15.5V17.5C15 17.7761 15.2239 18 15.5 18H17.5C17.7761 18 18 17.7761 18 17.5V15.5C18 15.2239 17.7761 15 17.5 15H15.5Z</PathGeometry>
    <SolidColorBrush x:Key="CalendarDatePickerBackground" Opacity="0.12" Color="White" />
    <SolidColorBrush x:Key="CalendarDatePickerPointeroverBackground" Opacity="0.16" Color="White" />
-    <SolidColorBrush x:Key="CalendarDatePickerPressedBackground" Opacity="0.2" Color="White" />
-    <SolidColorBrush x:Key="CalendarDatePickerBorderBrush" Color="Transparent" />
-    <Thickness x:Key="CalendarDatePickerBorderThickness">1</Thickness>
-    <CornerRadius x:Key="CalendarDatePickerCornerRadius">3</CornerRadius>
    <SolidColorBrush x:Key="CalendarDatePickerFocusBorderBrush" Color="#54A9FF" />
    <SolidColorBrush x:Key="CalendarDatePickerDisabledBackground" Opacity="0.04" Color="#E6E8EA" />
-    <SolidColorBrush x:Key="CalendarDatePickerDisabledBorderBrush" Color="Transparent" />
    <SolidColorBrush x:Key="CalendarDatePickerDisabledIconForeground" Opacity="0.4" Color="#E6E8EA" />
    <BoxShadows x:Key="CalendarDatePickerPopupBoxShadows">0 0 8 0 #1AFFFFFF</BoxShadows>
-    <x:Double x:Key="CalendarDatePickerInnerDefaultHeight">30</x:Double>
-    <x:Double x:Key="CalendarDatePickerInnerSmallHeight">22</x:Double>
-    <x:Double x:Key="CalendarDatePickerInnerLargeHeight">38</x:Double>
-    <x:Double x:Key="CalendarDatePickerDefaultHeight">32</x:Double>
-    <x:Double x:Key="CalendarDatePickerSmallHeight">24</x:Double>
-    <x:Double x:Key="CalendarDatePickerLargeHeight">40</x:Double>

    <SolidColorBrush x:Key="CalendarDatePickerBorderedDefaultBackground" Color="Transparent" />
    <SolidColorBrush x:Key="CalendarDatePickerBorderedDefaultBorderBrush" Opacity="0.12" Color="White" />
--- a/src/Semi.Avalonia/Themes/Dark/CaptionButtons.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/CaptionButtons.axaml
@@ -1,14 +1,7 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
-    <PathGeometry x:Key="WindowCloseIconGlyph">M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z</PathGeometry>
-    <PathGeometry x:Key="WindowMaximizeGlyph">M4,4H20V20H4V4M6,8V18H18V8H6Z</PathGeometry>
-    <PathGeometry x:Key="WindowMinimizeGlyph">M20,14H4V10H20</PathGeometry>
-    <PathGeometry x:Key="WindowRestoreGlyph">M4,8H8V4H20V16H16V20H4V8M16,8V14H18V6H10V8H16M6,12V18H14V12H6Z</PathGeometry>
-    <PathGeometry x:Key="WindowExpandGlyph">M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z</PathGeometry>
-    <PathGeometry x:Key="WindowCollapseGlyph">M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z</PathGeometry>
    <SolidColorBrush x:Key="CaptionButtonPointeroverBackground" Opacity="0.16" Color="White" />
    <SolidColorBrush x:Key="CaptionButtonPressedBackground" Opacity="0.20" Color="White" />
    <SolidColorBrush x:Key="CaptionButtonClosePointeroverBackground" Color="#FD9983" />
    <SolidColorBrush x:Key="CaptionButtonClosePressedBackground" Color="#FDBEAC" />
-    <SolidColorBrush x:Key="CaptionButtonForeground" Opacity="0.62" Color="#F9F9F9" />
-</ResourceDictionary>
+    <SolidColorBrush x:Key="CaptionButtonForeground" Opacity="0.6" Color="#F9F9F9" />
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Dark/Carousel.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/Carousel.axaml
@@ -1,7 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
-    <PathGeometry x:Key="CarouselButtonGlyph">M16.2782 4.23933C16.864 4.82511 16.864 5.77486 16.2782 6.36065L10.6213 12.0175L16.2782 17.6744C16.864 18.2601 16.864 19.2099 16.2782 19.7957C15.6924 20.3815 14.7426 20.3815 14.1569 19.7957L7.43934 13.0782C6.85355 12.4924 6.85355 11.5426 7.43934 10.9568L14.1569 4.23933C14.7426 3.65354 15.6924 3.65354 16.2782 4.23933Z</PathGeometry>
-
    <SolidColorBrush x:Key="CarouselButtonForeground" Opacity="0.5" Color="Black" />
    <SolidColorBrush x:Key="CarouselButtonPointeroverForeground" Opacity="0.7" Color="Black" />
    <SolidColorBrush x:Key="CarouselButtonPressedForeground" Opacity="0.7" Color="Black" />
@@ -9,8 +6,4 @@
    <SolidColorBrush x:Key="CarouselIndicatorPointeroverForeground" Opacity="0.7" Color="Black" />
    <SolidColorBrush x:Key="CarouselIndicatorPressedForeground" Opacity="0.7" Color="Black" />
    <SolidColorBrush x:Key="CarouselIndicatorSelectedForeground" Color="Black" />
-
-    <x:Double x:Key="CarouselIndicatorLineSelectedWidth">48</x:Double>
-    <x:Double x:Key="CarouselIndicatorSelectedHeight">8</x:Double>
-    <Thickness x:Key="CarouselButtonMargin">8</Thickness>
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Dark/CheckBox.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/CheckBox.axaml
@@ -1,7 +1,4 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:sys="clr-namespace:System;assembly=System.Runtime">
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <SolidColorBrush x:Key="CheckBoxForeground" Color="#F9F9F9" />
    <SolidColorBrush x:Key="CheckBoxDisabledForeground" Opacity="0.35" Color="#F9F9F9" />

@@ -27,20 +24,6 @@
    <SolidColorBrush x:Key="CheckBoxCheckedDisabledBackground" Color="#135cb8" />
    <SolidColorBrush x:Key="CheckBoxCheckedDisabledBorderBrush" Color="#135cb8" />

-    <sys:Double x:Key="CheckBoxFontSize">14</sys:Double>
-    <sys:Double x:Key="CheckBoxBoxWidth">16</sys:Double>
-    <sys:Double x:Key="CheckBoxBoxHeight">16</sys:Double>
-    <sys:Double x:Key="CheckBoxBoxGlyphWidth">10</sys:Double>
-    <sys:Double x:Key="CheckBoxBoxGlyphHeight">10</sys:Double>
-    <FontWeight x:Key="CheckBoxFontWeight">400</FontWeight>
-
-    <CornerRadius x:Key="CheckBoxBoxCornerRadius">3</CornerRadius>
-    <Thickness x:Key="CheckBoxContentMargin">8 0 0 0</Thickness>
-    <Thickness x:Key="CheckBoxBoxBorderThickness">1</Thickness>
-
-    <PathGeometry x:Key="CheckBoxCheckGlyph">M17.4111 7.30848C18.0692 7.81171 18.1947 8.75312 17.6915 9.41119L11.1915 17.9112C10.909 18.2806 10.4711 18.4981 10.0061 18.5C9.54105 18.5019 9.10143 18.288 8.81592 17.9209L5.31592 13.4209C4.80731 12.767 4.92512 11.8246 5.57904 11.316C6.23296 10.8074 7.17537 10.9252 7.68398 11.5791L9.98988 14.5438L15.3084 7.58884C15.8116 6.93077 16.7531 6.80525 17.4111 7.30848Z</PathGeometry>
-    <PathGeometry x:Key="CheckBoxIndeterminateGlyph">M5 12.5C5 11.6716 5.67157 11 6.5 11H17.5C18.3284 11 19 11.6716 19 12.5C19 13.3284 18.3284 14 17.5 14H6.5C5.67157 14 5 13.3284 5 12.5Z</PathGeometry>
-
    <SolidColorBrush x:Key="CheckBoxCardCheckedBackground" Opacity="0.2" Color="#FF54A9FF" />
    <SolidColorBrush x:Key="CheckBoxCardCheckedBorderBrush" Color="#FF54A9FF" />
    <SolidColorBrush x:Key="CheckBoxCardCheckedDisabledBorderBrush" Color="#FF135CB8" />
@@ -48,8 +31,4 @@
    <SolidColorBrush x:Key="CheckBoxCardPressedBackground" Opacity="0.09" Color="#FFFFFFFF" />
    <SolidColorBrush x:Key="CheckBoxCardCheckedPointeroverBorderBrush" Color="#FF7FC1FF" />
    <SolidColorBrush x:Key="CheckBoxCardCheckedPressedBorderBrush" Color="#FFA9D7FF" />
-
-    <Thickness x:Key="CheckBoxCardBorderThickness">1</Thickness>
-    <Thickness x:Key="CheckBoxCardPadding">16</Thickness>
-    <CornerRadius x:Key="CheckBoxCardCornerRadius">3</CornerRadius>
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Dark/ComboBox.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/ComboBox.axaml
@@ -7,22 +7,16 @@
    <SolidColorBrush x:Key="ComboBoxSelectorPointeroverBorderBrush" Color="Transparent" />
    <SolidColorBrush x:Key="ComboBoxSelectorPressedBorderBrush" Color="#A9D7FF" />

-    <CornerRadius x:Key="ComboBoxSelectorCornerRadius">3</CornerRadius>
-
-    <SolidColorBrush x:Key="ComboBoxIconDefaultForeground" Opacity="0.62" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="ComboBoxIconDefaultForeground" Opacity="0.6" Color="#F9F9F9" />
    <SolidColorBrush x:Key="ComboBoxIconPointeroverForeground" Color="#F9F9F9" />
    <SolidColorBrush x:Key="ComboBoxIconPressedForeground" Color="#F9F9F9" />
    <SolidColorBrush x:Key="ComboBoxIconDisabledForeground" Opacity="0.35" Color="#F9F9F9" />

    <SolidColorBrush x:Key="ComboBoxDisabledForeground" Opacity="0.35" Color="#F9F9F9" />

-    <Thickness x:Key="ComboBoxItemDefaultPadding">8 4</Thickness>
-    <Thickness x:Key="ComboBoxSelectorDefaultPadding">8 0</Thickness>
-
    <BoxShadows x:Key="ComboBoxPopupBoxShadow">0 0 8 0 #1AFFFFFF</BoxShadows>
    <SolidColorBrush x:Key="ComboBoxPopupBackground" Color="#35363C" />
    <SolidColorBrush x:Key="ComboBoxPopupBorderBrush" Opacity="0.08" Color="#F9F9F9" />
-    <Thickness x:Key="ComboBoxPopupBorderThickness">1</Thickness>

    <SolidColorBrush x:Key="ComboBoxItemForeground" Color="#F9F9F9" />

@@ -34,13 +28,6 @@

    <SolidColorBrush x:Key="ComboBoxItemDisabledBackground" Color="Transparent" />
    <SolidColorBrush x:Key="ComboBoxItemSelectedDisabledBackground" Opacity="0.04" Color="#E6E8EA" />
-    <PathGeometry x:Key="ComboBoxIcon">
-        M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z
-    </PathGeometry>
-
-    <x:Double x:Key="ComboBoxDefaultHeight">32</x:Double>
-    <x:Double x:Key="ComboBoxSmallHeight">24</x:Double>
-    <x:Double x:Key="ComboBoxLargeHeight">40</x:Double>

    <SolidColorBrush x:Key="ComboBoxSelectorBorderedBackground" Color="Transparent" />
    <SolidColorBrush x:Key="ComboBoxSelectorBorderedBorderBrush" Opacity="0.12" Color="White" />
--- a/src/Semi.Avalonia/Themes/Dark/DataValidationErrors.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/DataValidationErrors.axaml
@@ -1,5 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
    <SolidColorBrush x:Key="DataValidationErrorsForeground" Color="#FFFC725A" />
    <SolidColorBrush x:Key="DataValidationErrorsBackground" Opacity="0.2" Color="#FFFC725A" />
    <SolidColorBrush x:Key="DataValidationErrorsBorderBrush" Opacity="0.2" Color="#FFFC725A" />
@@ -9,4 +8,4 @@
    <SolidColorBrush x:Key="DataValidationErrorsPressedBorderBrush" Opacity="0.4" Color="#FFFC725A" />
    <SolidColorBrush x:Key="DataValidationErrorsSelectedBackground" Opacity="0.2" Color="#FFFC725A" />
    <SolidColorBrush x:Key="DataValidationErrorsSelectedBorderBrush" Color="#FFFC725A" />
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Dark/DatePicker.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/DatePicker.axaml
@@ -1,4 +1,2 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
-    <PathGeometry x:Key="DatePickerIconGlyph">M4 20V8H20V20H4ZM2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20V4ZM6 10.5C6 10.2239 6.22386 10 6.5 10H8.5C8.77614 10 9 10.2239 9 10.5V12.5C9 12.7761 8.77614 13 8.5 13H6.5C6.22386 13 6 12.7761 6 12.5V10.5ZM6.5 15C6.22386 15 6 15.2239 6 15.5V17.5C6 17.7761 6.22386 18 6.5 18H8.5C8.77614 18 9 17.7761 9 17.5V15.5C9 15.2239 8.77614 15 8.5 15H6.5ZM10.5 10.5C10.5 10.2239 10.7239 10 11 10H13C13.2761 10 13.5 10.2239 13.5 10.5V12.5C13.5 12.7761 13.2761 13 13 13H11C10.7239 13 10.5 12.7761 10.5 12.5V10.5ZM11 15C10.7239 15 10.5 15.2239 10.5 15.5V17.5C10.5 17.7761 10.7239 18 11 18H13C13.2761 18 13.5 17.7761 13.5 17.5V15.5C13.5 15.2239 13.2761 15 13 15H11ZM15 10.5C15 10.2239 15.2239 10 15.5 10H17.5C17.7761 10 18 10.2239 18 10.5V12.5C18 12.7761 17.7761 13 17.5 13H15.5C15.2239 13 15 12.7761 15 12.5V10.5ZM15.5 15C15.2239 15 15 15.2239 15 15.5V17.5C15 17.7761 15.2239 18 15.5 18H17.5C17.7761 18 18 17.7761 18 17.5V15.5C18 15.2239 17.7761 15 17.5 15H15.5Z</PathGeometry>
-</ResourceDictionary>
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Dark/DateTimePickerShared.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/DateTimePickerShared.axaml
@@ -1,12 +1,7 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:sys="clr-namespace:System;assembly=System.Runtime">
-    <!--  Add Resources Here  -->
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <SolidColorBrush x:Key="DateTimePickerListItemBackground" Color="Transparent" />
    <SolidColorBrush x:Key="DateTimePickerPopupBackground" Color="#35363C" />
-    <Thickness x:Key="DateTimePickerListItemPadding">0 3 0 6</Thickness>
-    <SolidColorBrush x:Key="DateTimePickerFlyoutButtonForeground" Opacity="0.62" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="DateTimePickerFlyoutButtonForeground" Opacity="0.6" Color="#F9F9F9" />
    <SolidColorBrush x:Key="DateTimePickerFlyoutButtonPointeroverForeground" Color="#F9F9F9" />
    <SolidColorBrush x:Key="DateTimePickerFlyoutButtonPressedForeground" Color="#F9F9F9" />

@@ -14,20 +9,14 @@
    <SolidColorBrush x:Key="DateTimePickerFlyoutButtonPointeroverBackground" Opacity="0.16" Color="White" />
    <SolidColorBrush x:Key="DateTimePickerFlyoutButtonPressedBackground" Opacity="0.20" Color="White" />

-    <PathGeometry x:Key="DateTimePickerButtonUpGlyph">M6.45096 8.34102L11.247 2.86102C11.3408 2.75361 11.4566 2.66753 11.5865 2.60854C11.7163 2.54956 11.8573 2.51904 12 2.51904C12.1426 2.51904 12.2836 2.54956 12.4135 2.60854C12.5433 2.66753 12.6591 2.75361 12.753 2.86102L17.549 8.34102C18.115 8.98802 17.655 10 16.796 10H7.20396C6.34396 10 5.88496 8.98802 6.45096 8.34102Z</PathGeometry>
-    <PathGeometry x:Key="DateTimePickerButtonDownGlyph">M17.549 15.659L12.753 21.139C12.6591 21.2464 12.5434 21.3325 12.4135 21.3915C12.2836 21.4505 12.1427 21.481 12 21.481C11.8574 21.481 11.7164 21.4505 11.5865 21.3915C11.4566 21.3325 11.3409 21.2464 11.247 21.139L6.45101 15.659C5.88501 15.011 6.34501 14 7.20401 14H16.796C17.656 14 18.115 15.012 17.549 15.659Z</PathGeometry>
-    <PathGeometry x:Key="DateTimePickerAcceptGlyph">M17.4111 7.30848C18.0692 7.81171 18.1947 8.75312 17.6915 9.41119L11.1915 17.9112C10.909 18.2806 10.4711 18.4981 10.0061 18.5C9.54105 18.5019 9.10143 18.288 8.81592 17.9209L5.31592 13.4209C4.80731 12.767 4.92512 11.8246 5.57904 11.316C6.23296 10.8074 7.17537 10.9252 7.68398 11.5791L9.98988 14.5438L15.3084 7.58884C15.8116 6.93077 16.7531 6.80525 17.4111 7.30848Z</PathGeometry>
-    <PathGeometry x:Key="DateTimePickerDismissGlyph">M17.6568 19.7782C18.2426 20.3639 19.1924 20.3639 19.7782 19.7782C20.3639 19.1924 20.3639 18.2426 19.7782 17.6568L14.1213 12L19.7782 6.34313C20.3639 5.75734 20.3639 4.8076 19.7782 4.22181C19.1924 3.63602 18.2426 3.63602 17.6568 4.22181L12 9.87866L6.34313 4.22181C5.75734 3.63602 4.8076 3.63602 4.22181 4.22181C3.63602 4.8076 3.63602 5.75734 4.22181 6.34313L9.87866 12L4.22181 17.6568C3.63602 18.2426 3.63602 19.1924 4.22181 19.7782C4.8076 20.3639 5.75734 20.3639 6.34313 19.7782L12 14.1213L17.6568 19.7782Z</PathGeometry>
-
    <SolidColorBrush x:Key="DateTimePickerSeparatorBackground" Opacity="0.08" Color="#F9F9F9" />
-    <sys:Double x:Key="DateTimePickerListBoxItemHeight">30</sys:Double>


    <SolidColorBrush x:Key="DateTimePickerButtonBorderBrush" Color="Transparent" />
    <SolidColorBrush x:Key="DateTimePickerButtonBackground" Opacity="0.12" Color="White" />
    <SolidColorBrush x:Key="DateTimePickerButtonForeground" Color="#F9F9F9" />

-    <SolidColorBrush x:Key="DateTimePickerIconForeground" Opacity="0.62" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="DateTimePickerIconForeground" Opacity="0.6" Color="#F9F9F9" />
    <SolidColorBrush x:Key="DateTimePickerEmptyForeground" Opacity="0.5" Color="#F9F9F9" />

    <SolidColorBrush x:Key="DateTimePickerButtonPointeroverBackground" Opacity="0.16" Color="White" />
@@ -36,14 +25,4 @@
    <SolidColorBrush x:Key="DateTimePickerButtonDisabledIconForeground" Opacity="0.4" Color="#E6E8EA" />

    <BoxShadows x:Key="DateTimePickerFlyoutBoxShadow">0 0 8 0 #1AFFFFFF</BoxShadows>
-    <Thickness x:Key="DateTimePickerFlyoutPadding">16 0</Thickness>
-    <Thickness x:Key="DateTimePickerFlyoutBorderMargin">8</Thickness>
-
-    <x:Double x:Key="DateTimePickerButtonSmallHeight">24</x:Double>
-    <x:Double x:Key="DateTimePickerButtonDefaultHeight">32</x:Double>
-    <x:Double x:Key="DateTimePickerButtonLargeHeight">40</x:Double>
-
-    <Thickness x:Key="DateTimePickerButtonBorderThickness">1</Thickness>
-    <CornerRadius x:Key="DateTimePickerButtonCornerRadius">3</CornerRadius>
-
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Dark/DropDownButton.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/DropDownButton.axaml
@@ -1,4 +1,2 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
-    <PathGeometry x:Key="DropDownButtonIconGlyph">M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z</PathGeometry>
-</ResourceDictionary>
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Dark/Expander.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/Expander.axaml
@@ -1,27 +1,10 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:sys="clr-namespace:System;assembly=System.Runtime">
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <SolidColorBrush x:Key="ExpanderSeparatorBorderBrush" Opacity="0.08" Color="#F9F9F9" />
    <SolidColorBrush x:Key="ExpanderHeaderForeground" Color="#F9F9F9" />
    <SolidColorBrush x:Key="ExpanderHeaderDisabledForeground" Opacity="0.35" Color="#F9F9F9" />
-    <SolidColorBrush x:Key="ExpanderIconForeground" Opacity="0.62" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="ExpanderIconForeground" Opacity="0.6" Color="#F9F9F9" />
    <SolidColorBrush x:Key="ExpanderHeaderDefaultBackground" Color="Transparent" />
    <SolidColorBrush x:Key="ExpanderHeaderHoverBackground" Opacity="0.12" Color="White" />
    <SolidColorBrush x:Key="ExpanderHeaderPressedBackground" Opacity="0.16" Color="White" />
    <SolidColorBrush x:Key="ExpanderContentForeground" Opacity="0.8" Color="#F9F9F9" />
-
-    <FontWeight x:Key="ExpanderHeaderFontWeight">600</FontWeight>
-    <sys:Double x:Key="ExpanderIconSize">8</sys:Double>
-
-    <CornerRadius x:Key="ExpanderHeaderCornerRadius">3</CornerRadius>
-    <Thickness x:Key="ExpanderHeaderMargin">8 4</Thickness>
-    <Thickness x:Key="ExpanderHeaderPadding">8</Thickness>
-    <Thickness x:Key="ExpanderEndIconMargin">0 0 8 0</Thickness>
-    <Thickness x:Key="ExpanderContentMargin">16 4 16 8</Thickness>
-    <Thickness x:Key="ExpanderFrontIconMargin">8 0 0 0</Thickness>
-    <Thickness x:Key="ExpanderDownContentBorderThickness">0 0 0 1</Thickness>
-    <Thickness x:Key="ExpanderUpContentBorderThickness">0 1 0 0</Thickness>
-    <Thickness x:Key="ExpanderLeftContentBorderThickness">1 0 0 0</Thickness>
-    <Thickness x:Key="ExpanderRightContentBorderThickness">0 0 1 0</Thickness>
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Dark/Flyout.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/Flyout.axaml
@@ -1,18 +1,6 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:sys="clr-namespace:System;assembly=System.Runtime">
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <SolidColorBrush x:Key="FlyoutBackground" Color="#35363C" />
    <SolidColorBrush x:Key="FlyoutForeground" Color="#F9F9F9" />
    <SolidColorBrush x:Key="FlyoutBorderBrush" Opacity="0.08" Color="#F9F9F9" />
-    <FontWeight x:Key="FlyoutFontWeight">400</FontWeight>
-    <Thickness x:Key="FlyoutBorderThickness">1</Thickness>
    <BoxShadows x:Key="FlyoutBorderBoxShadow">0 0 8 0 #1AFFFFFF</BoxShadows>
-    <sys:Double x:Key="FlyoutMinHeight">100</sys:Double>
-    <sys:Double x:Key="FlyoutMinWidth">100</sys:Double>
-    <sys:Double x:Key="FlyoutMaxHeight">600</sys:Double>
-    <sys:Double x:Key="FlyoutMaxWidth">600</sys:Double>
-    <CornerRadius x:Key="FlyoutCornerRadius">6</CornerRadius>
-    <Thickness x:Key="FlyoutPadding">8</Thickness>
-
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Dark/GridSplitter.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/GridSplitter.axaml
@@ -1,5 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
    <SolidColorBrush x:Key="GridSplitterBackground" Opacity="0.4" Color="#F9F9F9" />
    <SolidColorBrush x:Key="GridSplitterPreviewBackground" Color="#0A4694" />
-</ResourceDictionary>
+</ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Dark/HeaderedContentControl.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/HeaderedContentControl.axaml
@@ -1,6 +1,4 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <SolidColorBrush x:Key="HeaderedContentControlDefaultBackground" Color="Transparent" />
    <SolidColorBrush x:Key="HeaderedContentControlDefaultBorderBrush" Opacity="0.08" Color="#F9F9F9" />
-    <CornerRadius x:Key="HeaderedContentControlCornerRadius">4</CornerRadius>
 </ResourceDictionary>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Zhang Dian	9e766c759a	Merge branch 'main' into release	2023-08-30 13:50:16 +08:00
Dong Bin	e563f860ad	Merge pull request #250 from irihitech/upgrade Upgrade to 11.0.1.	2023-08-30 13:38:44 +08:00
Zhang Dian	b8df9c2b96	misc: upgrade to 11.0.1.	2023-08-30 11:35:01 +08:00
Zhang Dian	655c6b5da7	Merge branch 'main' into release	2023-08-30 00:40:31 +08:00
Dong Bin	255e21d5ae	Merge pull request #249 from irihitech/enhance Several Enhancements	2023-08-30 00:34:51 +08:00
Zhang Dian	d54e4ab2b7	misc: extract App.axaml; Android demo display label.	2023-08-30 00:14:40 +08:00
Zhang Dian	d01f39e20d	misc: label order.	2023-08-29 23:46:57 +08:00
Dong Bin	de578d3b99	Merge pull request #246 from irihitech/listbox Add ListBox Themes	2023-08-17 11:26:37 +08:00
Zhang Dian	bb392af76f	feat: remove PureCardCheckGroupListBox because of duplication.	2023-08-16 23:28:16 +08:00
Zhang Dian	a2927266b4	feat: description.	2023-08-16 21:04:30 +08:00
Zhang Dian	29dce1de51	feat: transform style resources.	2023-08-16 20:51:06 +08:00
Zhang Dian	6a4065f3b7	feat: CheckGroup.	2023-08-16 18:02:27 +08:00
Zhang Dian	430a7e56ca	feat: ListBox demo.	2023-08-14 18:49:33 +08:00
Zhang Dian	a1e17b0e19	feat: description.	2023-08-14 17:46:05 +08:00
Zhang Dian	8a51f98532	feat: separate resource dictionary.	2023-08-14 17:22:01 +08:00
Zhang Dian	eef4e5b62a	feat: ButtonRadioGroupListBox, CardRadioGroupListBox, PureCardRadioGroupListBox.	2023-08-14 16:50:50 +08:00
Zhang Dian	a6fe50e6bc	feat: transform style resources.	2023-08-14 11:17:07 +08:00
Zhang Dian	e1588120f2	feat: RadioGroupListBox theme.	2023-08-14 11:00:03 +08:00
Zhang Dian	437e9ea42b	Merge pull request #242 from irihitech/tree Add TreeDataGrid default themes	2023-07-27 10:15:51 +08:00
rabbitism	1c98ce4682	fix: fix identation, fix error theme in demo.	2023-07-27 00:30:32 +08:00
rabbitism	17fa10333a	fix: fix number nullability.	2023-07-26 23:52:29 +08:00
rabbitism	3d174bf65f	feat: add hierarchical demo.	2023-07-26 16:42:17 +08:00
rabbitism	591c728d69	feat: fix dark color. add theme switch in demo. add checkbox demo.	2023-07-26 03:04:10 +08:00
rabbitism	4b2f390fa3	feat: update	2023-07-26 02:50:01 +08:00
rabbitism	38aa8e6e5b	feat: WIP.	2023-07-26 01:23:05 +08:00
rabbitism	b665c0c7e3	feat: initialize tree data grid projects.	2023-07-25 23:19:27 +08:00
Zhang Dian	8c42a87e49	Merge pull request #240 from irihitech/data Replace some demo data.	2023-07-25 15:30:29 +08:00
rabbitism	ead6e07b24	feat: update overview page and checkbox/radiobutton samples.	2023-07-25 13:37:40 +08:00
rabbitism	52f2b6503f	feat: update overview page.	2023-07-25 13:06:55 +08:00
rabbitism	98fc651c45	feat: update some demo data.	2023-07-25 11:05:16 +08:00
rabbitism	5e94fd7bfa	feat: change DataGrid demo data.	2023-07-25 10:46:50 +08:00
Dong Bin	4cf29aeefd	Merge pull request #239 from irihitech/deploy Add github pages	2023-07-25 10:29:07 +08:00
Zhang Dian	9877014512	feat: github pages.	2023-07-24 18:02:22 +08:00
Dong Bin	694a9b4c3f	Merge pull request #233 from irihitech/wasm support WASM	2023-07-21 01:01:04 +08:00
Dong Bin	07074eb5e5	Merge pull request #235 from irihitech/shared Extract non-theme resources to shared directory	2023-07-21 00:54:14 +08:00
Zhang Dian	eaff3ebad0	fix: restore the missing resources.	2023-07-19 11:50:30 +08:00
Zhang Dian	95c7b9a807	feat: extract non-theme resources of ColorPicker and DataGrid.	2023-07-19 11:16:10 +08:00
Zhang Dian	54bdd69b2a	fix: restore BoxShadows.	2023-07-19 03:29:23 +08:00
Zhang Dian	cb9bf96b73	feat: rename theme index file.	2023-07-19 02:51:19 +08:00
Zhang Dian	3273fb1e91	feat: extract non-theme resources to shared directory.	2023-07-19 02:40:17 +08:00
Zhang Dian	a8b141b402	Merge branch 'main' into wasm	2023-07-17 22:56:59 +08:00
Zhang Dian	2132a4322f	Merge pull request #232 from JIIIIL/main TreeView添加多重嵌套绑定示例	2023-07-17 21:29:53 +08:00
ImLuJian	c59e47409b	Treeview示例用Grid布局	2023-07-17 20:21:38 +08:00
ImLuJian	816af5a7b1	TreeView添加多重嵌套绑定示例	2023-07-15 11:20:42 +08:00
Dong Bin	e3bf028b7f	Merge pull request #231 from irihitech/label improve Label Demo	2023-07-12 14:02:17 +08:00
Zhang Dian	ad3aac5978	feat: add color block into ScrollViewerDemo.	2023-07-11 17:40:57 +08:00
Zhang Dian	b19a576dc9	fix: label color order.	2023-07-11 17:38:31 +08:00
Dong Bin	00130d6cf7	Merge pull request #229 from irihitech/header fix: delete default height and width, fix RowDefinitions.	2023-07-10 17:44:44 +08:00
Zhang Dian	86b437b3b0	fix: delete default height and width, fix RowDefinitions.	2023-07-10 17:37:19 +08:00
Zhang Dian	e640089aab	Merge pull request #228 from irihitech/226-typography feat: improve TextBlock demo.	2023-07-10 17:33:46 +08:00
Zhang Dian	7a483d6de3	fix: delete binding.	2023-07-10 17:33:17 +08:00
rabbitism	c713888062	fix: fix textblock alignment.	2023-07-10 17:03:29 +08:00
rabbitism	b9a16e89d6	feat: improve TextBlock demo.	2023-07-10 00:22:02 +08:00
Dong Bin	2dc6e31d5a	Merge pull request #227 from JIIIIL/main 添加DRM启动方式，在VM虚拟机上测试了一下Ubuntu18.04 Server，可以启动	2023-07-09 23:12:46 +08:00
rabbitism	db7f199003	fix: fix version reference.	2023-07-09 23:06:08 +08:00
rabbitism	201610b9ab	feat: update references.	2023-07-09 23:03:11 +08:00
ImLuJian	112d1e3dd4	还原desktop项目的文件	2023-07-09 09:52:28 +08:00
ImLuJian	5df492b20e	Merge branch 'main' of https://github.com/JIIIIL/Semi.Avalonia	2023-07-09 09:27:21 +08:00
ImLuJian	1b7c30c557	添加DRM启动demo和使用方法	2023-07-09 09:24:41 +08:00
ImLuJian	40d179d4b4	添加DRM启动方式，在VM虚拟机上测试了一下Ubuntu18.04 Server，可以启动	2023-07-08 17:57:44 +08:00
Zhang Dian	367aa0a386	Merge pull request #225 from irihitech/android feat: fix android demo start activity issue.	2023-07-08 02:44:29 +08:00
rabbitism	37daceca61	feat: fix android start activity issue.	2023-07-08 00:06:11 +08:00
Dong Bin	2f04a72c9f	Merge pull request #224 from irihitech/opacity fix: fix the wrong opacity values.	2023-07-07 18:29:44 +08:00
Zhang Dian	8f5b9f6c47	fix: fix the wrong opacity values.	2023-07-07 17:21:56 +08:00
rabbitism	ab8dacec4b	feat: update documentation.	2023-07-05 19:01:12 +08:00
Dong Bin	12b300d21e	Merge pull request #218 from irihitech/main 11.0 release	2023-07-05 18:27:00 +08:00
Zhang Dian	232e6e4b41	feat: upgrade to support wasm.	2023-06-04 23:44:23 +08:00
Zhang Dian	7de476fe52	Merge branch 'main' into release	2023-06-01 11:14:59 +08:00
Zhang Dian	6591f9a26d	Merge branch 'main' into release	2023-05-09 22:55:26 +08:00
Dong Bin	0f6aed9baa	Merge pull request #170 from irihitech/main Preview 7 release	2023-04-25 13:46:02 +08:00