ci: add adroid workload.

misc: bump version.
fix: ClearButton shouble not be focusable.
2026-03-03 00:00:55 +08:00 · 2025-12-30 16:04:07 +08:00 · 2025-12-30 15:26:35 +08:00 · 2025-12-29 16:02:00 +08:00 · 2025-12-22 19:32:57 +08:00 · 2025-12-16 17:08:07 +08:00
138 changed files with 5364 additions and 2017 deletions
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -2,7 +2,7 @@ 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/Release/net8.0-browser/publish/wwwroot
+  OUTPUT_PATH: demo/Semi.Avalonia.Demo.Web/bin/Release/net10.0-browser/publish/wwwroot
 on:
  workflow_dispatch:

@@ -11,12 +11,13 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v5

-      - name: Setup .NET 8
-        uses: actions/setup-dotnet@v4
+      - name: Setup dotnet
+        uses: actions/setup-dotnet@v5
        with:
-          dotnet-version: 8.0.x
+          dotnet-version: |
+            10.0.x

      - name: Install wasm-tools
        run: dotnet workload install wasm-tools
--- a/.github/workflows/pack-nightly.yml
+++ b/.github/workflows/pack-nightly.yml
@@ -31,7 +31,7 @@ jobs:

    steps:
      - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5

      - name: Get Version
        run: |
--- a/.github/workflows/pack.yml
+++ b/.github/workflows/pack.yml
@@ -47,7 +47,7 @@ jobs:

    steps:
      - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5

      - name: Pack Semi.Avalonia
        if: ${{ inputs.Semi_Avalonia }}
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -75,7 +75,7 @@ jobs:
    runs-on: windows-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5
      - name: Publish win-x64
        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
      - name: Upload a Build Artifact
@@ -91,7 +91,7 @@ jobs:
    runs-on: windows-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5
      - name: Enable Native AOT in .csproj
        run: sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
      - name: Publish win-x64 AOT
@@ -109,7 +109,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5
      - name: Publish linux-x64
        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r linux-x64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
      - name: Upload a Build Artifact
@@ -125,7 +125,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5
      - name: Enable Native AOT in .csproj
        run: sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
      - name: Publish linux-x64 AOT
@@ -143,7 +143,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5
      - name: Publish linux-x64 DRM
        run: dotnet publish demo/Semi.Avalonia.Demo.Drm -r linux-x64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
      - name: Upload a Build Artifact
@@ -159,7 +159,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5
      - name: Enable Native AOT in .csproj
        run: sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj
      - name: Publish linux-x64 AOT
@@ -177,7 +177,7 @@ jobs:
    runs-on: macos-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5
      - name: Publish osx-arm64
        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r osx-arm64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
      - name: Upload a Build Artifact
@@ -193,7 +193,7 @@ jobs:
    runs-on: macos-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5
      - name: Enable Native AOT in .csproj
        run: sed -i '' 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
      - name: Publish osx-arm64 AOT
@@ -211,13 +211,13 @@ jobs:
    runs-on: windows-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v4.2.2
-      - name: CD Android
-        run: cd demo/Semi.Avalonia.Demo.Android
+        uses: actions/checkout@v5
+      - name: Install Android workload
+        run: dotnet workload install android
      - name: Restore Dependencies
-        run: dotnet restore
+        run: dotnet restore demo/Semi.Avalonia.Demo.Android
      - name: Publish Android
-        run: dotnet publish demo/Semi.Avalonia.Demo.Android -c Release -f net8.0-android --no-restore -o publish /p:RuntimeIdentifier=android-arm64
+        run: dotnet publish demo/Semi.Avalonia.Demo.Android -c Release -f net10.0-android --no-restore -o publish /p:RuntimeIdentifier=android-arm64
      - name: Upload a Build Artifact
        uses: actions/upload-artifact@v4.6.2
        with:
--- a/README.md
+++ b/README.md
@@ -77,6 +77,7 @@ We offer limited free community support for Semi Avalonia and Ursa. If you have

 | Semi Design Version | Avalonia Version |
 |:--------------------|:-----------------|
+| 11.3.7              | 11.3.7           |
 | 11.2.1              | >=11.2.1         |
 | 11.2.0              | 11.2.0           |
 | 11.1.0              | >=11.1.0         |
--- a/README_CN.md
+++ b/README_CN.md
@@ -77,6 +77,7 @@ dotnet add package Semi.Avalonia.AvaloniaEdit

 | Semi Design Version | Avalonia Version |
 |:--------------------|:-----------------|
+| 11.3.7              | 11.3.7           |
 | 11.2.1              | >=11.2.1         |
 | 11.2.0              | 11.2.0           |
 | 11.1.0              | >=11.1.0         |
--- a/Semi.Avalonia.sln
+++ b/Semi.Avalonia.sln
@@ -1,99 +0,0 @@
-
-Microsoft Visual Studio Solution File, Format Version 12.00
-# Visual Studio Version 17
-VisualStudioVersion = 17.3.32929.385
-MinimumVisualStudioVersion = 10.0.40219.1
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia", "src\Semi.Avalonia\Semi.Avalonia.csproj", "{90D0B063-BC64-40AB-A56C-AC11909CF410}"
-EndProject
-Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Files", "Solution Files", "{B1E6A7D4-0AFB-4D32-9969-5FBDAC0CFF3E}"
-	ProjectSection(SolutionItems) = preProject
-		demo\Directory.Build.props = demo\Directory.Build.props
-		demo\global.json = demo\global.json
-		src\Package.props = src\Package.props
-	EndProjectSection
-EndProject
-Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "GitHub Action", "GitHub Action", "{318534A1-1CC3-40FB-B4AE-736F94465232}"
-	ProjectSection(SolutionItems) = preProject
-		.github\workflows\deploy.yml = .github\workflows\deploy.yml
-		.github\workflows\pack.yml = .github\workflows\pack.yml
-		.github\workflows\pack-nightly.yml = .github\workflows\pack-nightly.yml
-		.github\workflows\publish.yml = .github\workflows\publish.yml
-		.github\workflows\release-tag.yml = .github\workflows\release-tag.yml
-	EndProjectSection
-EndProject
-Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Demo", "Demo", "{43091528-9509-43CB-A003-9C5C11E96DD6}"
-EndProject
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.Demo.Desktop", "demo\Semi.Avalonia.Demo.Desktop\Semi.Avalonia.Demo.Desktop.csproj", "{2ADCA724-2B6D-46EC-87F7-604D7918B89A}"
-EndProject
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.Demo.Web", "demo\Semi.Avalonia.Demo.Web\Semi.Avalonia.Demo.Web.csproj", "{69A2C77D-6DB7-4AE4-B179-D1F5CF5E2DF0}"
-EndProject
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.Demo", "demo\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj", "{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0}"
-EndProject
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.DataGrid", "src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj", "{8A90C292-8761-4F70-8E1F-EFC097FEADB3}"
-EndProject
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.ColorPicker", "src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj", "{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}"
-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
-Global
-	GlobalSection(SolutionConfigurationPlatforms) = preSolution
-		Debug|Any CPU = Debug|Any CPU
-		Release|Any CPU = Release|Any CPU
-	EndGlobalSection
-	GlobalSection(ProjectConfigurationPlatforms) = postSolution
-		{90D0B063-BC64-40AB-A56C-AC11909CF410}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{90D0B063-BC64-40AB-A56C-AC11909CF410}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{90D0B063-BC64-40AB-A56C-AC11909CF410}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{90D0B063-BC64-40AB-A56C-AC11909CF410}.Release|Any CPU.Build.0 = Release|Any CPU
-		{2ADCA724-2B6D-46EC-87F7-604D7918B89A}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{2ADCA724-2B6D-46EC-87F7-604D7918B89A}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{2ADCA724-2B6D-46EC-87F7-604D7918B89A}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{2ADCA724-2B6D-46EC-87F7-604D7918B89A}.Release|Any CPU.Build.0 = Release|Any CPU
-		{69A2C77D-6DB7-4AE4-B179-D1F5CF5E2DF0}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{69A2C77D-6DB7-4AE4-B179-D1F5CF5E2DF0}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{69A2C77D-6DB7-4AE4-B179-D1F5CF5E2DF0}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{69A2C77D-6DB7-4AE4-B179-D1F5CF5E2DF0}.Release|Any CPU.Build.0 = Release|Any CPU
-		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0}.Release|Any CPU.Build.0 = Release|Any CPU
-		{8A90C292-8761-4F70-8E1F-EFC097FEADB3}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{8A90C292-8761-4F70-8E1F-EFC097FEADB3}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{8A90C292-8761-4F70-8E1F-EFC097FEADB3}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{8A90C292-8761-4F70-8E1F-EFC097FEADB3}.Release|Any CPU.Build.0 = Release|Any CPU
-		{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}.Release|Any CPU.Build.0 = Release|Any CPU
-		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{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
-	EndGlobalSection
-	GlobalSection(SolutionProperties) = preSolution
-		HideSolutionNode = FALSE
-	EndGlobalSection
-	GlobalSection(NestedProjects) = preSolution
-		{2ADCA724-2B6D-46EC-87F7-604D7918B89A} = {43091528-9509-43CB-A003-9C5C11E96DD6}
-		{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}
-	EndGlobalSection
-	GlobalSection(ExtensibilityGlobals) = postSolution
-		SolutionGuid = {7CA41ED3-2CED-40CC-AA21-28C3B42B1E86}
-	EndGlobalSection
-EndGlobal
--- a/Semi.Avalonia.slnx
+++ b/Semi.Avalonia.slnx
@@ -0,0 +1,28 @@
+<Solution>
+    <Folder Name="/Demo/">
+        <Project Path="demo/Semi.Avalonia.Demo.Android/Semi.Avalonia.Demo.Android.csproj"/>
+        <Project Path="demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj"/>
+        <Project Path="demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj"/>
+        <Project Path="demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj"/>
+        <Project Path="demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj"/>
+    </Folder>
+    <Folder Name="/GitHub Action/">
+        <File Path=".github/workflows/deploy.yml"/>
+        <File Path=".github/workflows/pack-nightly.yml"/>
+        <File Path=".github/workflows/pack.yml"/>
+        <File Path=".github/workflows/publish.yml"/>
+        <File Path=".github/workflows/release-tag.yml"/>
+    </Folder>
+    <Folder Name="/Solution Items/Demo/">
+        <File Path="demo/Directory.Packages.props"/>
+        <File Path="demo/global.json"/>
+    </Folder>
+    <Folder Name="/Solution Items/Package/">
+        <File Path="src/Directory.Packages.props"/>
+        <File Path="src/Directory.Build.props"/>
+    </Folder>
+    <Project Path="src/Semi.Avalonia.ColorPicker/Semi.Avalonia.ColorPicker.csproj"/>
+    <Project Path="src/Semi.Avalonia.DataGrid/Semi.Avalonia.DataGrid.csproj"/>
+    <Project Path="src/Semi.Avalonia.TreeDataGrid/Semi.Avalonia.TreeDataGrid.csproj"/>
+    <Project Path="src/Semi.Avalonia/Semi.Avalonia.csproj"/>
+</Solution>
--- a/demo/Directory.Build.props
+++ b/demo/Directory.Build.props
@@ -1,7 +0,0 @@
-<Project>
-    <PropertyGroup>
-        <AvaloniaVersion>12.0.999-cibuild0058575-alpha</AvaloniaVersion>
-        <DataGridVersion>11.3.0</DataGridVersion>
-        <CommunityToolkitVersion>8.4.0</CommunityToolkitVersion>
-    </PropertyGroup>
-</Project>
--- a/demo/Directory.Packages.props
+++ b/demo/Directory.Packages.props
@@ -0,0 +1,27 @@
+<Project>
+    <PropertyGroup>
+        <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
+        <AvaloniaVersion>11.3.10</AvaloniaVersion>
+        <DataGridVersion>11.3.10</DataGridVersion>
+        <SkiaSharpVersion>3.119.1</SkiaSharpVersion>
+    </PropertyGroup>
+    <ItemGroup>
+        <PackageVersion Include="Avalonia" Version="$(AvaloniaVersion)"/>
+        <PackageVersion Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
+        <PackageVersion Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
+        <PackageVersion Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)"/>
+        <PackageVersion Include="Avalonia.iOS" Version="$(AvaloniaVersion)" />
+        <PackageVersion Include="Avalonia.Browser" Version="$(AvaloniaVersion)" />
+        <PackageVersion Include="Avalonia.Android" Version="$(AvaloniaVersion)" />
+        <PackageVersion Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
+        <PackageVersion Include="Avalonia.Controls.DataGrid" Version="$(DataGridVersion)"/>
+
+        <PackageVersion Include="SkiaSharp" Version="$(SkiaSharpVersion)"/>
+        <PackageVersion Include="SkiaSharp.NativeAssets.WebAssembly" Version="$(SkiaSharpVersion)"/>
+
+        <PackageVersion Include="Xamarin.AndroidX.Core.SplashScreen" Version="1.2.0"/>
+
+        <PackageVersion Include="CommunityToolkit.Mvvm" Version="8.4.0"/>
+        <PackageVersion Include="Irihi.Avalonia.Shared" Version="0.3.1"/>
+    </ItemGroup>
+</Project>
--- a/demo/Semi.Avalonia.Demo.Web/Assets/Fonts/SourceHanSansCN-Bold.otf
+++ b/demo/Semi.Avalonia.Demo.Web/Assets/Fonts/SourceHanSansCN-Bold.otf
--- a/demo/Semi.Avalonia.Demo.Web/Assets/Fonts/SourceHanSansCN-Regular.otf
+++ b/demo/Semi.Avalonia.Demo.Web/Assets/Fonts/SourceHanSansCN-Regular.otf
--- a/demo/Semi.Avalonia.Demo.Android/AvaloniaAppBuilderExtensions.cs
+++ b/demo/Semi.Avalonia.Demo.Android/AvaloniaAppBuilderExtensions.cs
@@ -0,0 +1,16 @@
+using Avalonia;
+using Avalonia.Media;
+
+namespace Semi.Avalonia.Demo.Android;
+
+public static class AvaloniaAppBuilderExtensions
+{
+    private static string DefaultFontFamily => "avares://Semi.Avalonia.Demo.Android/Assets#Source Han Sans CN";
+
+    public static AppBuilder WithSourceHanSansCNFont(this AppBuilder builder) =>
+        builder.With(new FontManagerOptions
+        {
+            DefaultFamilyName = DefaultFontFamily,
+            FontFallbacks = [new FontFallback { FontFamily = new FontFamily(DefaultFontFamily) }]
+        });
+}
--- a/demo/Semi.Avalonia.Demo.Android/Icon.png
+++ b/demo/Semi.Avalonia.Demo.Android/Icon.png
--- a/demo/Semi.Avalonia.Demo.Android/MainActivity.cs
+++ b/demo/Semi.Avalonia.Demo.Android/MainActivity.cs
@@ -1,5 +1,6 @@
 using Android.App;
 using Android.Content.PM;
+using Avalonia;
 using Avalonia.Android;

 namespace Semi.Avalonia.Demo.Android;
@@ -13,4 +14,9 @@ namespace Semi.Avalonia.Demo.Android;
    ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.ScreenSize | ConfigChanges.UiMode)]
 public class MainActivity : AvaloniaMainActivity<App>
 {
+    protected override AppBuilder CustomizeAppBuilder(AppBuilder builder)
+    {
+        return base.CustomizeAppBuilder(builder)
+            .WithSourceHanSansCNFont();
+    }
 }
--- a/demo/Semi.Avalonia.Demo.Android/Semi.Avalonia.Demo.Android.csproj
+++ b/demo/Semi.Avalonia.Demo.Android/Semi.Avalonia.Demo.Android.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
    <PropertyGroup>
        <OutputType>Exe</OutputType>
-        <TargetFramework>net8.0-android</TargetFramework>
+        <TargetFramework>net10.0-android</TargetFramework>
        <SupportedOSPlatformVersion>21</SupportedOSPlatformVersion>
        <Nullable>enable</Nullable>
        <ApplicationId>com.irihitech.Semi.Avalonia</ApplicationId>
@@ -14,14 +14,13 @@
    </PropertyGroup>

    <ItemGroup>
-        <AndroidResource Include="Icon.png">
-            <Link>Resources\drawable\Icon.png</Link>
-        </AndroidResource>
+        <AndroidResource Include="Icon.png" Link="Resources\drawable\Icon.png"/>
+        <AvaloniaResource Include="..\Fonts\*" Link="Assets\Fonts\%(Filename)%(Extension)" />
    </ItemGroup>

    <ItemGroup>
-        <PackageReference Include="Avalonia.Android" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="Xamarin.AndroidX.Core.SplashScreen" Version="1.0.1.1"/>
+        <PackageReference Include="Avalonia.Android"/>
+        <PackageReference Include="Xamarin.AndroidX.Core.SplashScreen"/>
    </ItemGroup>

    <ItemGroup>
--- a/demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
+++ b/demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
@@ -4,6 +4,7 @@
        <TargetFramework>net8.0</TargetFramework>
        <Nullable>enable</Nullable>
        <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
+        <ApplicationIcon>..\Semi.Avalonia.Demo\Assets\irihi.ico</ApplicationIcon>
        <!-- Uncomment below to enable Native AOT compilation-->
        <!--<PublishAot>true</PublishAot>-->
    </PropertyGroup>
@@ -22,7 +23,7 @@
    </ItemGroup>

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

    <ItemGroup>
--- a/demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj
+++ b/demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj
@@ -4,6 +4,7 @@
        <TargetFramework>net8.0</TargetFramework>
        <Nullable>enable</Nullable>
        <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
+        <ApplicationIcon>..\Semi.Avalonia.Demo\Assets\irihi.ico</ApplicationIcon>
        <!-- Uncomment below to enable Native AOT compilation-->
        <!--<PublishAot>true</PublishAot>-->
    </PropertyGroup>
@@ -22,8 +23,8 @@
    </ItemGroup>

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

    <ItemGroup>
--- a/demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj
+++ b/demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj
@@ -1,17 +1,19 @@
 <Project Sdk="Microsoft.NET.Sdk.WebAssembly">
    <PropertyGroup>
-        <TargetFramework>net8.0-browser</TargetFramework>
+        <TargetFramework>net10.0-browser</TargetFramework>
        <OutputType>Exe</OutputType>
        <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
        <Nullable>enable</Nullable>
    </PropertyGroup>

    <ItemGroup>
-        <AvaloniaResource Include="Assets\**"/>
+        <AvaloniaResource Include="..\Fonts\*" Link="Assets\Fonts\%(Filename)%(Extension)" />
    </ItemGroup>

    <ItemGroup>
-        <PackageReference Include="Avalonia.Browser" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Browser"/>
+        <PackageReference Include="SkiaSharp"/>
+        <PackageReference Include="SkiaSharp.NativeAssets.WebAssembly"/>
    </ItemGroup>

    <ItemGroup>
--- a/demo/Semi.Avalonia.Demo/App.axaml
+++ b/demo/Semi.Avalonia.Demo/App.axaml
@@ -1,17 +1,17 @@
 <Application
+    Name="Semi Avalonia Demo"
    x:Class="Semi.Avalonia.Demo.App"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    x:CompileBindings="True"
-    x:DataType="viewModels:ApplicationViewModel"
    xmlns:semi="https://irihi.tech/semi"
-    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels">
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    x:DataType="vm:ApplicationViewModel">
    <Application.Styles>
        <semi:SemiTheme Locale="zh-CN" />
        <semi:SemiPopupAnimations />
        <semi:ColorPickerSemiTheme />
-        <!-- <semi:DataGridSemiTheme /> -->
-        <!-- <semi:TreeDataGridSemiTheme /> -->
+        <semi:DataGridSemiTheme />
+        <semi:TreeDataGridSemiTheme />
    </Application.Styles>
    <Application.Resources>
        <ResourceDictionary>
@@ -20,12 +20,30 @@
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
+    <NativeMenu.Menu>
+        <NativeMenu>
+            <NativeMenuItem
+                Header="About Us"
+                Command="{Binding JumpToCommand}"
+                CommandParameter="{Binding $self.Header}" />
+        </NativeMenu>
+    </NativeMenu.Menu>
    <TrayIcon.Icons>
        <TrayIcons>
-            <TrayIcon Icon="/Assets/irihi.ico" MacOSProperties.IsTemplateIcon="true" ToolTipText="Semi Avalonia Demo">
+            <TrayIcon
+                Icon="{OnPlatform Default=/Assets/irihi.ico, macOS=/Assets/irihi2.ico}"
+                MacOSProperties.IsTemplateIcon="true"
+                Command="{Binding ActivateCommand}"
+                ToolTipText="Semi Avalonia Demo">
                <TrayIcon.Menu>
                    <NativeMenu>
-                        <NativeMenuItem Header="Exit" Command="{Binding ExitCommand}" />
+                        <NativeMenuItem
+                            Header="About Us"
+                            Command="{Binding JumpToCommand}"
+                            CommandParameter="{Binding $self.Header}" />
+                        <NativeMenuItem
+                            Header="Exit"
+                            Command="{Binding ExitCommand}" />
                    </NativeMenu>
                </TrayIcon.Menu>
            </TrayIcon>
--- a/demo/Semi.Avalonia.Demo/Assets/irihi2.ico
+++ b/demo/Semi.Avalonia.Demo/Assets/irihi2.ico
--- a/demo/Semi.Avalonia.Demo/Constant/ColorTokens.cs
+++ b/demo/Semi.Avalonia.Demo/Constant/ColorTokens.cs
@@ -79,6 +79,32 @@ public static class ColorTokens
        new("SemiColorDangerLightActive", "Danger Light Active")
    ];

+    public static IReadOnlyList<Tuple<string, string>> AIGeneralTokens { get; } =
+    [
+        new("SemiColorAIGeneral", "AI General"),
+        new("SemiColorAIGeneralPointerover", "AI General Pointerover"),
+        new("SemiColorAIGeneralActive", "AI General Active"),
+        new("SemiColorAIGeneralDisabled", "AI General Disabled")
+    ];
+
+    public static IReadOnlyList<Tuple<string, string>> AIPurpleTokens { get; } =
+    [
+        new("SemiColorAIPurple", "AI Purple"),
+        new("SemiColorAIPurplePointerover", "AI Purple Pointerover"),
+        new("SemiColorAIPurpleActive", "AI Purple Active"),
+        new("SemiColorAIPurpleDisabled", "AI Purple Disabled")
+    ];
+
+    public static IReadOnlyList<Tuple<string, string>> AIBackgroundTokens { get; } =
+    [
+        new("SemiColorAIBackgroundBottom", "AI Bottom Background"),
+        new("SemiColorAIBackgroundBottomPointerover", "AI Bottom Background Pointerover"),
+        new("SemiColorAIBackgroundBottomActive", "AI Bottom Background Active"),
+        new("SemiColorAIBackgroundTop", "AI Top Background"),
+        new("SemiColorAIBackgroundTopPointerover", "AI Top Background Pointerover"),
+        new("SemiColorAIBackgroundTopActive", "AI Top Background Active"),
+    ];
+
    public static IReadOnlyList<Tuple<string, string>> TextTokens { get; } =
    [
        new("SemiColorText0", "Text 0"),
--- a/demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.cs
+++ b/demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.cs
@@ -92,6 +92,12 @@ public class ColorDetailControl : TemplatedControl
            Hex2 = hex2 as string;
            OpacityNumber = brush.Opacity.ToString(CultureInfo.InvariantCulture);
        }
+        else
+        {
+            Hex = null;
+            Hex2 = null;
+            OpacityNumber = null;
+        }
    }

    public async Task Copy(object o)
--- a/demo/Semi.Avalonia.Demo/Pages/AboutUs.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/AboutUs.axaml
@@ -8,7 +8,6 @@
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
    x:DataType="vm:AboutUsViewModel"
-    x:CompileBindings="True"
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
--- a/demo/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml
@@ -7,7 +7,6 @@
    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
    d:DesignHeight="450"
    d:DesignWidth="800"
-    x:CompileBindings="False"
    x:DataType="vm:AutoCompleteBoxDemoViewModel"
    mc:Ignorable="d">
    <Design.DataContext>
@@ -30,40 +29,40 @@

        <AutoCompleteBox
            Watermark="Please select a State"
-            ValueMemberBinding="{Binding Name}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
        <AutoCompleteBox
            Classes="Large"
-            ValueMemberBinding="{ReflectionBinding Name}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
        <AutoCompleteBox
            Classes="Small"
-            ValueMemberBinding="{ReflectionBinding Name}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
        <AutoCompleteBox
            Classes="Bordered"
-            ValueMemberBinding="{ReflectionBinding Name}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
        <AutoCompleteBox
            IsEnabled="False"
            Watermark="Disabled"
-            ValueMemberBinding="{ReflectionBinding Name}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
        <AutoCompleteBox
            InnerLeftContent="https://"
            InnerRightContent=".com"
-            ValueMemberBinding="{ReflectionBinding Name}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />

        <StackPanel Orientation="Horizontal">
            <AutoCompleteBox
                Width="100"
                Classes="Large"
                Watermark="Large"
-                ValueMemberBinding="{ReflectionBinding Name}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
            <AutoCompleteBox
                Width="100"
                Watermark="Default"
-                ValueMemberBinding="{ReflectionBinding Name}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
            <AutoCompleteBox
                Width="100"
                Classes="Small"
                Watermark="Small"
-                ValueMemberBinding="{ReflectionBinding Name}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
        </StackPanel>

        <StackPanel Orientation="Horizontal">
@@ -71,17 +70,17 @@
                Width="100"
                IsEnabled="False"
                Watermark="Disabled"
-                ValueMemberBinding="{ReflectionBinding Name}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
            <AutoCompleteBox
                Width="100"
                Classes="Bordered"
                Watermark="Bordered"
-                ValueMemberBinding="{ReflectionBinding Name}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
            <AutoCompleteBox
                Width="100"
                Classes="Bordered"
                IsEnabled="False"
-                ValueMemberBinding="{ReflectionBinding Name}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
        </StackPanel>

    </StackPanel>
--- a/demo/Semi.Avalonia.Demo/Pages/ButtonDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ButtonDemo.axaml
@@ -6,174 +6,369 @@
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <ScrollViewer>
-        <StackPanel HorizontalAlignment="Left" Spacing="20">
+        <StackPanel HorizontalAlignment="Left" Spacing="8">
            <StackPanel.Styles>
-                <Style Selector="SplitButton">
-                    <Setter Property="Flyout">
-                        <MenuFlyout Placement="BottomEdgeAlignedRight">
-                            <MenuItem Header="Submit All" />
-                            <MenuItem Header="Submit Updated" />
-                        </MenuFlyout>
-                    </Setter>
-                </Style>
-                <Style Selector="DropDownButton">
-                    <Setter Property="Flyout">
-                        <MenuFlyout Placement="BottomEdgeAlignedRight">
-                            <MenuItem Header="Submit All" />
-                            <MenuItem Header="Submit Updated" />
-                        </MenuFlyout>
-                    </Setter>
-                </Style>
-                <Style Selector="ToggleSplitButton">
-                    <Setter Property="Flyout">
-                        <MenuFlyout Placement="BottomEdgeAlignedRight">
+                <Style Selector="SplitButton,DropDownButton,ToggleSplitButton">
+                    <Setter Property="Button.Flyout">
+                        <MenuFlyout>
                            <MenuItem Header="Submit All" />
                            <MenuItem Header="Submit Updated" />
                        </MenuFlyout>
                    </Setter>
                </Style>
            </StackPanel.Styles>
+            <HeaderedContentControl
+                Theme="{StaticResource GroupBox}">
+                <HeaderedContentControl.Header>
+                    <StackPanel Spacing="8">
+                        <TextBlock Text="Button/RepeatButton Theme" />
+                        <WrapPanel ItemSpacing="4">
+                            <TextBlock Text="Theme:" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue Solid" Content="Light" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue Solid" Content="Solid" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue Solid" Content="Outline" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue Solid" Content="Borderless" />
+                        </WrapPanel>
+                        <WrapPanel ItemSpacing="4">
+                            <TextBlock Text="Classes:" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Primary" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Secondary" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Tertiary" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Success" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Warning" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Danger" />
+                        </WrapPanel>
+                    </StackPanel>
+                </HeaderedContentControl.Header>
+                <StackPanel HorizontalAlignment="Left" Spacing="16">
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <Button Content="Default" />
+                        <Button Content="Primary" Classes="Primary" />
+                        <Button Content="Secondary" Classes="Secondary" />
+                        <Button Content="Tertiary" Classes="Tertiary" />
+                        <Button Content="Success" Classes="Success" />
+                        <Button Content="Warning" Classes="Warning" />
+                        <Button Content="Danger" Classes="Danger" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <Button Content="Default" Theme="{StaticResource SolidButton}" />
+                        <Button Content="Primary" Classes="Primary" Theme="{StaticResource SolidButton}" />
+                        <Button Content="Secondary" Classes="Secondary" Theme="{StaticResource SolidButton}" />
+                        <Button Content="Tertiary" Classes="Tertiary" Theme="{StaticResource SolidButton}" />
+                        <Button Content="Success" Classes="Success" Theme="{StaticResource SolidButton}" />
+                        <Button Content="Warning" Classes="Warning" Theme="{StaticResource SolidButton}" />
+                        <Button Content="Danger" Classes="Danger" Theme="{StaticResource SolidButton}" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <Button Content="Default" Theme="{StaticResource OutlineButton}" />
+                        <Button Content="Primary" Classes="Primary" Theme="{StaticResource OutlineButton}" />
+                        <Button Content="Secondary" Classes="Secondary" Theme="{StaticResource OutlineButton}" />
+                        <Button Content="Tertiary" Classes="Tertiary" Theme="{StaticResource OutlineButton}" />
+                        <Button Content="Success" Classes="Success" Theme="{StaticResource OutlineButton}" />
+                        <Button Content="Warning" Classes="Warning" Theme="{StaticResource OutlineButton}" />
+                        <Button Content="Danger" Classes="Danger" Theme="{StaticResource OutlineButton}" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <Button Content="Default" Theme="{StaticResource BorderlessButton}" />
+                        <Button Content="Primary" Classes="Primary" Theme="{StaticResource BorderlessButton}" />
+                        <Button Content="Secondary" Classes="Secondary" Theme="{StaticResource BorderlessButton}" />
+                        <Button Content="Tertiary" Classes="Tertiary" Theme="{StaticResource BorderlessButton}" />
+                        <Button Content="Success" Classes="Success" Theme="{StaticResource BorderlessButton}" />
+                        <Button Content="Warning" Classes="Warning" Theme="{StaticResource BorderlessButton}" />
+                        <Button Content="Danger" Classes="Danger" Theme="{StaticResource BorderlessButton}" />
+                    </WrapPanel>
+                </StackPanel>
+            </HeaderedContentControl>

-            <TextBlock>Light (Default)</TextBlock>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <Button Classes="Primary">Primary</Button>
-                <Button Classes="Secondary">Secondary</Button>
-                <Button Classes="Tertiary">Tertiary</Button>
-                <Button Classes="Success">Success</Button>
-                <Button Classes="Warning">Warning</Button>
-                <Button Classes="Danger">Danger</Button>
-                <Button Classes="Danger" IsEnabled="False">Disabled</Button>
-            </StackPanel>
-            <TextBlock>Solid</TextBlock>
-            <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="Danger"
-                    IsEnabled="False"
-                    Theme="{DynamicResource SolidButton}">
-                    Disabled
-                </Button>
-            </StackPanel>
-            <TextBlock>Outline</TextBlock>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <Button Classes="Primary" Theme="{DynamicResource OutlineButton}">Primary</Button>
-                <Button Classes="Secondary" Theme="{DynamicResource OutlineButton}">Secondary</Button>
-                <Button Classes="Tertiary" Theme="{DynamicResource OutlineButton}">Tertiary</Button>
-                <Button Classes="Success" Theme="{DynamicResource OutlineButton}">Success</Button>
-                <Button Classes="Warning" Theme="{DynamicResource OutlineButton}">Warning</Button>
-                <Button Classes="Danger" Theme="{DynamicResource OutlineButton}">Danger</Button>
-                <Button Classes="Danger" Theme="{DynamicResource OutlineButton}" IsEnabled="False">Disabled</Button>
-            </StackPanel>
-            <TextBlock>Borderless</TextBlock>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <Button Classes="Primary" Theme="{DynamicResource BorderlessButton}">Primary</Button>
-                <Button Classes="Secondary" Theme="{DynamicResource BorderlessButton}">Secondary</Button>
-                <Button Classes="Tertiary" Theme="{DynamicResource BorderlessButton}">Tertiary</Button>
-                <Button Classes="Success" Theme="{DynamicResource BorderlessButton}">Success</Button>
-                <Button Classes="Warning" Theme="{DynamicResource BorderlessButton}">Warning</Button>
-                <Button Classes="Danger" Theme="{DynamicResource BorderlessButton}">Danger</Button>
-                <Button
-                    Classes="Danger"
-                    IsEnabled="False"
-                    Theme="{DynamicResource BorderlessButton}">
-                    Disabled
-                </Button>
-            </StackPanel>
-            <TextBlock>Disabled</TextBlock>
-            <StackPanel Background="{DynamicResource SemiColorBackground1}" Orientation="Horizontal" Spacing="20">
-                <Button IsEnabled="False">Light</Button>
-                <Button IsEnabled="False" Theme="{DynamicResource SolidButton}">Solid</Button>
-                <Button IsEnabled="False" Theme="{DynamicResource OutlineButton}">Outline</Button>
-                <Button IsEnabled="False" Theme="{DynamicResource BorderlessButton}">Borderless</Button>
-            </StackPanel>
-            <TextBlock>Size Classes</TextBlock>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <Button Classes="Primary Small">Small</Button>
-                <Button Classes="Primary">Default</Button>
-                <Button Classes="Primary Large">Large</Button>
-            </StackPanel>
+            <HeaderedContentControl
+                Theme="{StaticResource GroupBox}"
+                Header="Prohibited Status">
+                <WrapPanel ItemSpacing="16" LineSpacing="16">
+                    <Button Content="Light" IsEnabled="False" />
+                    <Button Content="Solid" IsEnabled="False" Theme="{StaticResource SolidButton}" />
+                    <Button Content="Outline" IsEnabled="False" Theme="{StaticResource OutlineButton}" />
+                    <Button Content="Borderless" IsEnabled="False" Theme="{StaticResource BorderlessButton}" />
+                </WrapPanel>
+            </HeaderedContentControl>

-            <TextBlock>DropDownButton</TextBlock>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <DropDownButton Content="Primary" />
-                <DropDownButton Classes="Secondary" Content="Secondary" />
-                <DropDownButton Classes="Tertiary" Content="Tertiary" />
-                <DropDownButton Classes="Success" Content="Success" />
-                <DropDownButton Classes="Warning" Content="Warning" />
-                <DropDownButton Classes="Danger" Content="Danger" />
-                <DropDownButton
-                    Classes="Danger"
-                    Content="Disabled"
-                    IsEnabled="False" />
-            </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <DropDownButton Content="Default" Classes="Success" />
-                <DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success" />
-                <DropDownButton Content="Outline" Theme="{DynamicResource OutlineDropDownButton}" Classes="Success" />
-                <DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success" />
-                <DropDownButton Content="Default" Classes="Success" IsEnabled="False" />
-                <DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success" IsEnabled="False" />
-                <DropDownButton Content="Outline" Theme="{DynamicResource OutlineDropDownButton}" Classes="Success" IsEnabled="False" />
-                <DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success" IsEnabled="False" />
-            </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <DropDownButton Classes="Small" Content="Small" />
-                <DropDownButton Content="Default" />
-                <DropDownButton Classes="Large" Content="Large" />
-            </StackPanel>
+            <HeaderedContentControl
+                Theme="{StaticResource GroupBox}">
+                <HeaderedContentControl.Header>
+                    <StackPanel Spacing="8">
+                        <WrapPanel ItemSpacing="4">
+                            <TextBlock Text="Size Classes:" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Large" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Small" />
+                        </WrapPanel>
+                    </StackPanel>
+                </HeaderedContentControl.Header>
+                <WrapPanel ItemSpacing="16" LineSpacing="16">
+                    <Button Content="Large" Classes="Large" />
+                    <Button Content="Default" />
+                    <Button Content="Small" Classes="Small" />
+                </WrapPanel>
+            </HeaderedContentControl>

-            <TextBlock>SplitButton</TextBlock>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <SplitButton Content="Primary" />
-                <SplitButton Classes="Secondary" Content="Secondary" />
-                <SplitButton Classes="Tertiary" Content="Tertiary" />
-                <SplitButton Classes="Success" Content="Success" />
-                <SplitButton Classes="Warning" Content="Warning" />
-                <SplitButton Classes="Danger" Content="Danger" />
-                <SplitButton Classes="Danger" Content="Disabled" IsEnabled="False" />
-            </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <SplitButton Content="Default" Classes="Success" />
-                <SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}" Classes="Success" />
-                <SplitButton Content="Outline" Theme="{DynamicResource OutlineSplitButton}" Classes="Success" />
-                <SplitButton Content="Borderless" Theme="{DynamicResource BorderlessSplitButton}" Classes="Success" />
-                <SplitButton Content="Default" Classes="Success" IsEnabled="False" />
-                <SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}" Classes="Success" IsEnabled="False" />
-                <SplitButton Content="Outline" Theme="{DynamicResource OutlineSplitButton}" Classes="Success" IsEnabled="False" />
-                <SplitButton Content="Borderless" Theme="{DynamicResource BorderlessSplitButton}" Classes="Success" IsEnabled="False" />
-            </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <SplitButton Classes="Small" Content="Small" />
-                <SplitButton Content="Default" />
-                <SplitButton Classes="Large" Content="Large" />
-            </StackPanel>
+            <HeaderedContentControl
+                Theme="{StaticResource GroupBox}">
+                <HeaderedContentControl.Header>
+                    <StackPanel Spacing="8">
+                        <TextBlock Text="AI style - Colorful Button" />
+                        <WrapPanel ItemSpacing="4">
+                            <TextBlock Text="Theme:" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient Solid" Content="Light" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient Solid" Content="Solid" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient Solid" Content="Outline" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient Solid" Content="Borderless" />
+                        </WrapPanel>
+                        <WrapPanel ItemSpacing="4">
+                            <TextBlock Text="Classes:" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient" Content="Colorful Primary" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient" Content="Colorful Tertiary" />
+                        </WrapPanel>
+                    </StackPanel>
+                </HeaderedContentControl.Header>
+                <StackPanel HorizontalAlignment="Left" Spacing="16">
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <Button Content="Primary" Classes="Colorful Primary" />
+                        <Button Content="Tertiary" Classes="Colorful Tertiary" />
+                        <Button Content="Disabled" Classes="Colorful Primary" IsEnabled="False" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <Button Content="Primary" Classes="Colorful Primary" Theme="{StaticResource SolidButton}" />
+                        <Button Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource SolidButton}" />
+                        <Button Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource SolidButton}" IsEnabled="False" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <Button Content="Primary" Classes="Colorful Primary" Theme="{StaticResource OutlineButton}" />
+                        <Button Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource OutlineButton}" />
+                        <Button Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource OutlineButton}" IsEnabled="False" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <Button Content="Primary" Classes="Colorful Primary" Theme="{StaticResource BorderlessButton}" />
+                        <Button Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource BorderlessButton}" />
+                        <Button Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource BorderlessButton}" IsEnabled="False" />
+                    </WrapPanel>
+                </StackPanel>
+            </HeaderedContentControl>

-            <TextBlock>ToggleSplitButton</TextBlock>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <ToggleSplitButton Content="Primary" />
-                <ToggleSplitButton Classes="Secondary" Content="Secondary" />
-                <ToggleSplitButton Classes="Tertiary" Content="Tertiary" />
-                <ToggleSplitButton Classes="Success" Content="Success" />
-                <ToggleSplitButton Classes="Warning" Content="Warning" />
-                <ToggleSplitButton Classes="Danger" Content="Danger" />
-                <ToggleSplitButton Classes="Danger" Content="Disabled" IsEnabled="False" />
-            </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <ToggleSplitButton Content="Default" Classes="Success" />
-                <ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True" />
-                <ToggleSplitButton Content="Default" Classes="Success" IsEnabled="False" />
-                <ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True" IsEnabled="False" />
-            </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <ToggleSplitButton Classes="Small" Content="Small" />
-                <ToggleSplitButton Content="Default" />
-                <ToggleSplitButton Classes="Large" Content="Large" />
-            </StackPanel>
+            <HeaderedContentControl
+                Theme="{StaticResource GroupBox}" Header="DropDownButton">
+                <StackPanel HorizontalAlignment="Left" Spacing="16">
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <DropDownButton Content="Default" />
+                        <DropDownButton Content="Primary" Classes="Primary" />
+                        <DropDownButton Content="Secondary" Classes="Secondary" />
+                        <DropDownButton Content="Tertiary" Classes="Tertiary" />
+                        <DropDownButton Content="Success" Classes="Success" />
+                        <DropDownButton Content="Warning" Classes="Warning" />
+                        <DropDownButton Content="Danger" Classes="Danger" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <DropDownButton Content="Default" Theme="{StaticResource SolidDropDownButton}" />
+                        <DropDownButton Content="Primary" Classes="Primary" Theme="{StaticResource SolidDropDownButton}" />
+                        <DropDownButton Content="Secondary" Classes="Secondary" Theme="{StaticResource SolidDropDownButton}" />
+                        <DropDownButton Content="Tertiary" Classes="Tertiary" Theme="{StaticResource SolidDropDownButton}" />
+                        <DropDownButton Content="Success" Classes="Success" Theme="{StaticResource SolidDropDownButton}" />
+                        <DropDownButton Content="Warning" Classes="Warning" Theme="{StaticResource SolidDropDownButton}" />
+                        <DropDownButton Content="Danger" Classes="Danger" Theme="{StaticResource SolidDropDownButton}" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <DropDownButton Content="Default" Theme="{StaticResource OutlineDropDownButton}" />
+                        <DropDownButton Content="Primary" Classes="Primary" Theme="{StaticResource OutlineDropDownButton}" />
+                        <DropDownButton Content="Secondary" Classes="Secondary" Theme="{StaticResource OutlineDropDownButton}" />
+                        <DropDownButton Content="Tertiary" Classes="Tertiary" Theme="{StaticResource OutlineDropDownButton}" />
+                        <DropDownButton Content="Success" Classes="Success" Theme="{StaticResource OutlineDropDownButton}" />
+                        <DropDownButton Content="Warning" Classes="Warning" Theme="{StaticResource OutlineDropDownButton}" />
+                        <DropDownButton Content="Danger" Classes="Danger" Theme="{StaticResource OutlineDropDownButton}" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <DropDownButton Content="Default" Theme="{StaticResource BorderlessDropDownButton}" />
+                        <DropDownButton Content="Primary" Classes="Primary" Theme="{StaticResource BorderlessDropDownButton}" />
+                        <DropDownButton Content="Secondary" Classes="Secondary" Theme="{StaticResource BorderlessDropDownButton}" />
+                        <DropDownButton Content="Tertiary" Classes="Tertiary" Theme="{StaticResource BorderlessDropDownButton}" />
+                        <DropDownButton Content="Success" Classes="Success" Theme="{StaticResource BorderlessDropDownButton}" />
+                        <DropDownButton Content="Warning" Classes="Warning" Theme="{StaticResource BorderlessDropDownButton}" />
+                        <DropDownButton Content="Danger" Classes="Danger" Theme="{StaticResource BorderlessDropDownButton}" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <DropDownButton Content="Light" IsEnabled="False" />
+                        <DropDownButton Content="Solid" IsEnabled="False" Theme="{StaticResource SolidDropDownButton}" />
+                        <DropDownButton Content="Outline" IsEnabled="False" Theme="{StaticResource OutlineDropDownButton}" />
+                        <DropDownButton Content="Borderless" IsEnabled="False" Theme="{StaticResource BorderlessDropDownButton}" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <DropDownButton Content="Large" Classes="Large" />
+                        <DropDownButton Content="Default" />
+                        <DropDownButton Content="Small" Classes="Small" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <DropDownButton Content="Primary" Classes="Colorful Primary" />
+                        <DropDownButton Content="Tertiary" Classes="Colorful Tertiary" />
+                        <DropDownButton Content="Disabled" Classes="Colorful Primary" IsEnabled="False" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <DropDownButton Content="Primary" Classes="Colorful Primary" Theme="{StaticResource SolidDropDownButton}" />
+                        <DropDownButton Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource SolidDropDownButton}" />
+                        <DropDownButton Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource SolidDropDownButton}" IsEnabled="False" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <DropDownButton Content="Primary" Classes="Colorful Primary" Theme="{StaticResource OutlineDropDownButton}" />
+                        <DropDownButton Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource OutlineDropDownButton}" />
+                        <DropDownButton Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource OutlineDropDownButton}" IsEnabled="False" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <DropDownButton Content="Primary" Classes="Colorful Primary" Theme="{StaticResource BorderlessDropDownButton}" />
+                        <DropDownButton Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource BorderlessDropDownButton}" />
+                        <DropDownButton Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource BorderlessDropDownButton}" IsEnabled="False" />
+                    </WrapPanel>
+                </StackPanel>
+            </HeaderedContentControl>
+
+            <HeaderedContentControl
+                Theme="{StaticResource GroupBox}" Header="SplitButton">
+                <StackPanel HorizontalAlignment="Left" Spacing="16">
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <SplitButton Content="Default" />
+                        <SplitButton Content="Primary" Classes="Primary" />
+                        <SplitButton Content="Secondary" Classes="Secondary" />
+                        <SplitButton Content="Tertiary" Classes="Tertiary" />
+                        <SplitButton Content="Success" Classes="Success" />
+                        <SplitButton Content="Warning" Classes="Warning" />
+                        <SplitButton Content="Danger" Classes="Danger" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <SplitButton Content="Default" Theme="{StaticResource SolidSplitButton}" />
+                        <SplitButton Content="Primary" Classes="Primary" Theme="{StaticResource SolidSplitButton}" />
+                        <SplitButton Content="Secondary" Classes="Secondary" Theme="{StaticResource SolidSplitButton}" />
+                        <SplitButton Content="Tertiary" Classes="Tertiary" Theme="{StaticResource SolidSplitButton}" />
+                        <SplitButton Content="Success" Classes="Success" Theme="{StaticResource SolidSplitButton}" />
+                        <SplitButton Content="Warning" Classes="Warning" Theme="{StaticResource SolidSplitButton}" />
+                        <SplitButton Content="Danger" Classes="Danger" Theme="{StaticResource SolidSplitButton}" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <SplitButton Content="Default" Theme="{StaticResource OutlineSplitButton}" />
+                        <SplitButton Content="Primary" Classes="Primary" Theme="{StaticResource OutlineSplitButton}" />
+                        <SplitButton Content="Secondary" Classes="Secondary" Theme="{StaticResource OutlineSplitButton}" />
+                        <SplitButton Content="Tertiary" Classes="Tertiary" Theme="{StaticResource OutlineSplitButton}" />
+                        <SplitButton Content="Success" Classes="Success" Theme="{StaticResource OutlineSplitButton}" />
+                        <SplitButton Content="Warning" Classes="Warning" Theme="{StaticResource OutlineSplitButton}" />
+                        <SplitButton Content="Danger" Classes="Danger" Theme="{StaticResource OutlineSplitButton}" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <SplitButton Content="Default" Theme="{StaticResource BorderlessSplitButton}" />
+                        <SplitButton Content="Primary" Classes="Primary" Theme="{StaticResource BorderlessSplitButton}" />
+                        <SplitButton Content="Secondary" Classes="Secondary" Theme="{StaticResource BorderlessSplitButton}" />
+                        <SplitButton Content="Tertiary" Classes="Tertiary" Theme="{StaticResource BorderlessSplitButton}" />
+                        <SplitButton Content="Success" Classes="Success" Theme="{StaticResource BorderlessSplitButton}" />
+                        <SplitButton Content="Warning" Classes="Warning" Theme="{StaticResource BorderlessSplitButton}" />
+                        <SplitButton Content="Danger" Classes="Danger" Theme="{StaticResource BorderlessSplitButton}" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <SplitButton Content="Light" IsEnabled="False" />
+                        <SplitButton Content="Solid" IsEnabled="False" Theme="{StaticResource SolidSplitButton}" />
+                        <SplitButton Content="Outline" IsEnabled="False" Theme="{StaticResource OutlineSplitButton}" />
+                        <SplitButton Content="Borderless" IsEnabled="False" Theme="{StaticResource BorderlessSplitButton}" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <SplitButton Content="Large" Classes="Large" />
+                        <SplitButton Content="Default" />
+                        <SplitButton Content="Small" Classes="Small" />
+                    </WrapPanel>
+                </StackPanel>
+            </HeaderedContentControl>
+
+            <HeaderedContentControl
+                Theme="{StaticResource GroupBox}"
+                Header="ToggleSplitButton">
+                <StackPanel HorizontalAlignment="Left" Spacing="24">
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleSplitButton Content="Default" />
+                        <ToggleSplitButton Classes="Primary" Content="Primary" />
+                        <ToggleSplitButton Classes="Secondary" Content="Secondary" />
+                        <ToggleSplitButton Classes="Tertiary" Content="Tertiary" />
+                        <ToggleSplitButton Classes="Success" Content="Success" />
+                        <ToggleSplitButton Classes="Warning" Content="Warning" />
+                        <ToggleSplitButton Classes="Danger" Content="Danger" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleSplitButton Content="Default" IsChecked="True" />
+                        <ToggleSplitButton Classes="Primary" Content="Primary" IsChecked="True" />
+                        <ToggleSplitButton Classes="Secondary" Content="Secondary" IsChecked="True" />
+                        <ToggleSplitButton Classes="Tertiary" Content="Tertiary" IsChecked="True" />
+                        <ToggleSplitButton Classes="Success" Content="Success" IsChecked="True" />
+                        <ToggleSplitButton Classes="Warning" Content="Warning" IsChecked="True" />
+                        <ToggleSplitButton Classes="Danger" Content="Danger" IsChecked="True" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleSplitButton Content="Unchecked" Classes="Success" IsEnabled="False" />
+                        <ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True" IsEnabled="False" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleSplitButton Content="Large" Classes="Large" />
+                        <ToggleSplitButton Content="Default" />
+                        <ToggleSplitButton Content="Small" Classes="Small" />
+                    </WrapPanel>
+                </StackPanel>
+            </HeaderedContentControl>
+
+            <HeaderedContentControl
+                Theme="{StaticResource GroupBox}" Header="ToggleButton">
+                <StackPanel HorizontalAlignment="Left" Spacing="16">
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleButton Content="Default" />
+                        <ToggleButton Content="Primary" Classes="Primary" />
+                        <ToggleButton Content="Secondary" Classes="Secondary" />
+                        <ToggleButton Content="Tertiary" Classes="Tertiary" />
+                        <ToggleButton Content="Success" Classes="Success" />
+                        <ToggleButton Content="Warning" Classes="Warning" />
+                        <ToggleButton Content="Danger" Classes="Danger" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleButton Content="Default" IsChecked="True" />
+                        <ToggleButton Content="Primary" Classes="Primary" IsChecked="True" />
+                        <ToggleButton Content="Secondary" Classes="Secondary" IsChecked="True" />
+                        <ToggleButton Content="Tertiary" Classes="Tertiary" IsChecked="True" />
+                        <ToggleButton Content="Success" Classes="Success" IsChecked="True" />
+                        <ToggleButton Content="Warning" Classes="Warning" IsChecked="True" />
+                        <ToggleButton Content="Danger" Classes="Danger" IsChecked="True" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleButton Content="Default" IsChecked="{x:Null}" IsThreeState="True" />
+                        <ToggleButton Content="Primary" Classes="Primary" IsChecked="{x:Null}" IsThreeState="True" />
+                        <ToggleButton Content="Secondary" Classes="Secondary" IsChecked="{x:Null}" IsThreeState="True" />
+                        <ToggleButton Content="Tertiary" Classes="Tertiary" IsChecked="{x:Null}" IsThreeState="True" />
+                        <ToggleButton Content="Success" Classes="Success" IsChecked="{x:Null}" IsThreeState="True" />
+                        <ToggleButton Content="Warning" Classes="Warning" IsChecked="{x:Null}" IsThreeState="True" />
+                        <ToggleButton Content="Danger" Classes="Danger" IsChecked="{x:Null}" IsThreeState="True" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleButton Content="Unchecked" IsEnabled="False" />
+                        <ToggleButton Content="Checked" IsEnabled="False" IsChecked="True" />
+                        <ToggleButton Content="Indeterminate" IsEnabled="False" IsChecked="{x:Null}" IsThreeState="True" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleButton Content="Large" Classes="Large" />
+                        <ToggleButton Content="Default" />
+                        <ToggleButton Content="Small" Classes="Small" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleButton Content="Primary" Classes="Colorful Primary" />
+                        <ToggleButton Content="Tertiary" Classes="Colorful Tertiary" />
+                        <ToggleButton Content="Disabled" Classes="Colorful Primary" IsEnabled="False" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleButton Content="Primary" Classes="Colorful Primary" IsChecked="True" />
+                        <ToggleButton Content="Tertiary" Classes="Colorful Tertiary" IsChecked="True" />
+                        <ToggleButton Content="Disabled" Classes="Colorful Primary" IsChecked="True" IsEnabled="False" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleButton Content="Primary" Classes="Colorful Primary" IsChecked="{x:Null}" IsThreeState="True" />
+                        <ToggleButton Content="Tertiary" Classes="Colorful Tertiary" IsChecked="{x:Null}" IsThreeState="True" />
+                        <ToggleButton Content="Disabled" Classes="Colorful Primary" IsChecked="{x:Null}" IsThreeState="True" IsEnabled="False" />
+                    </WrapPanel>
+                </StackPanel>
+            </HeaderedContentControl>
        </StackPanel>
    </ScrollViewer>
 </UserControl>
--- a/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml
@@ -8,6 +8,10 @@
    d:DesignWidth="800"
    mc:Ignorable="d">
    <StackPanel HorizontalAlignment="Left" Spacing="20">
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Name="showSpinCheck" IsChecked="True" Content="Show Button Spinner" />
+            <ToggleSwitch Name="allowSpinCheck" IsChecked="True" Content="Allow Spin" />
+        </StackPanel>
        <ButtonSpinner
            Height="30"
            AllowSpin="{Binding #allowSpinCheck.IsChecked}"
--- a/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
@@ -7,7 +7,8 @@
    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
    d:DesignHeight="800"
    d:DesignWidth="800"
-    mc:Ignorable="d">
+    mc:Ignorable="d"
+    x:DataType="vm:ComboBoxDemoViewModel">
    <Design.DataContext>
        <vm:ComboBoxDemoViewModel />
    </Design.DataContext>
--- a/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml
@@ -0,0 +1,179 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.DataGridDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels;assembly=Semi.Avalonia.Demo"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:DataType="vm:DataGridDemoViewModel"
+    mc:Ignorable="d">
+    <TabControl>
+        <TabItem Header="DataGrid">
+            <Grid RowDefinitions="Auto, *">
+                <StackPanel Grid.Row="0" Orientation="Horizontal">
+                    <ToggleSwitch Content="Enable" Name="enable" IsChecked="True" />
+                    <ToggleSwitch Content="Inset Content" Name="inset" />
+                    <ToggleSwitch Content="ScrollBar Auto Hide" Name="autohide" />
+                </StackPanel>
+                <DataGrid Grid.Row="1"
+                          Margin="8"
+                          CanUserReorderColumns="True"
+                          CanUserResizeColumns="True"
+                          CanUserSortColumns="True"
+                          HeadersVisibility="All"
+                          IsReadOnly="True"
+                          Classes.InsetContent="{Binding #inset.IsChecked}"
+                          ScrollViewer.AllowAutoHide="{Binding #autohide.IsChecked}"
+                          IsEnabled="{Binding #enable.IsChecked}"
+                          ItemsSource="{Binding GridData1}">
+                    <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 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>
+
+            </Grid>
+        </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>
+        </TabItem>
+        <TabItem Name="EditableTab" Header="Editable">
+            <Grid Margin="8" RowDefinitions="Auto,*,Auto">
+                <StackPanel
+                    Grid.Row="0"
+                    Orientation="Horizontal"
+                    Spacing="4">
+                    <TextBlock VerticalAlignment="Center" Text="FontSize:" />
+                    <Slider
+                        Name="FontSizeSlider"
+                        Width="100"
+                        VerticalAlignment="Center"
+                        Maximum="30"
+                        Minimum="5"
+                        Value="14" />
+                    <CheckBox
+                        Name="IsThreeStateCheckBox"
+                        Content="IsThreeState"
+                        IsChecked="False" />
+                </StackPanel>
+                <DataGrid
+                    Grid.Row="1"
+                    Margin="8"
+                    ItemsSource="{Binding GridData3}">
+                    <DataGrid.Columns>
+                        <DataGridCheckBoxColumn
+                            Width="2*"
+                            Binding="{Binding IsSelected}"
+                            Header="Select"
+                            IsThreeState="{Binding #IsThreeStateCheckBox.IsChecked, Mode=OneWay}" />
+                        <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 CountOfComment}" />
+                                </DataTemplate>
+                            </DataGridTemplateColumn.CellTemplate>
+                            <DataGridTemplateColumn.CellEditingTemplate>
+                                <DataTemplate>
+                                    <NumericUpDown
+                                        HorizontalAlignment="Stretch"
+                                        FormatString="N0"
+                                        Minimum="0"
+                                        Value="{Binding CountOfComment}" />
+                                </DataTemplate>
+                            </DataGridTemplateColumn.CellEditingTemplate>
+                        </DataGridTemplateColumn>
+                    </DataGrid.Columns>
+                </DataGrid>
+                <Button
+                    Grid.Row="2"
+                    Margin="12,0,12,12"
+                    HorizontalAlignment="Right"
+                    Command="{Binding AddCommand}"
+                    Content="Add" />
+            </Grid>
+        </TabItem>
+    </TabControl>
+</UserControl>
--- a/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml.cs
@@ -0,0 +1,13 @@
+using Avalonia.Controls;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class DataGridDemo : UserControl
+{
+    public DataGridDemo()
+    {
+        InitializeComponent();
+        DataContext = new DataGridDemoViewModel();
+    }
+}
--- a/demo/Semi.Avalonia.Demo/Pages/GroupBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/GroupBoxDemo.axaml
@@ -1,22 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="1450"
-             x:Class="Semi.Avalonia.Demo.Pages.GroupBoxDemo">
-    <ScrollViewer>
-        <StackPanel HorizontalAlignment="Left" Spacing="20">
-            <GroupBox
-                HorizontalAlignment="Left"
-                MaxWidth="360">
-                <HeaderedContentControl.Header>
-                    <Panel>
-                        <SelectableTextBlock Text="Semi Design" />
-                        <HyperlinkButton HorizontalAlignment="Right" Content="更多" />
-                    </Panel>
-                </HeaderedContentControl.Header>
-                <SelectableTextBlock Text="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。" />
-            </GroupBox>
-        </StackPanel>
-    </ScrollViewer>
-</UserControl>
--- a/demo/Semi.Avalonia.Demo/Pages/GroupBoxDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/GroupBoxDemo.axaml.cs
@@ -1,11 +0,0 @@
-using Avalonia.Controls;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class GroupBoxDemo : UserControl
-{
-    public GroupBoxDemo()
-    {
-        InitializeComponent();
-    }
-}
--- a/demo/Semi.Avalonia.Demo/Pages/HeaderedContentControlDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/HeaderedContentControlDemo.axaml
@@ -36,7 +36,9 @@
                        <HyperlinkButton HorizontalAlignment="Right" Content="更多" />
                    </Panel>
                </HeaderedContentControl.Header>
-                <SelectableTextBlock Text="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。" />
+                <HeaderedContentControl.Content>
+                    <SelectableTextBlock Text="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。" />
+                </HeaderedContentControl.Content>
            </HeaderedContentControl>
        </StackPanel>
    </ScrollViewer>
--- a/demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml
@@ -0,0 +1,327 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+             xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+             xmlns:cvt="clr-namespace:Semi.Avalonia.Demo.Converters"
+             xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+             mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="1450"
+             x:DataType="vm:HighContrastDemoViewModel"
+             x:Class="Semi.Avalonia.Demo.Pages.HighContrastDemo">
+    <Design.DataContext>
+        <vm:HighContrastDemoViewModel />
+    </Design.DataContext>
+    <SplitView
+        Name="splitView"
+        CompactPaneLength="50"
+        DisplayMode="CompactInline"
+        IsPaneOpen="{Binding #toggle.IsChecked, Mode=TwoWay}"
+        OpenPaneLength="300"
+        PanePlacement="Right">
+        <SplitView.Pane>
+            <StackPanel>
+                <ToggleSwitch
+                    Name="toggle"
+                    HorizontalAlignment="Right"
+                    IsChecked="True"
+                    Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                    Content="{StaticResource SemiIconSidebar}" />
+                <Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
+                    <Panel>
+                        <TextBlock
+                            IsVisible="{Binding SelectedColorResource, Converter={x:Static ObjectConverters.IsNull}}"
+                            Text="Click on Color to Check Details"
+                            TextWrapping="Wrap" />
+                        <controls:ColorDetailControl
+                            Background="{Binding SelectedColorResource.Brush}"
+                            IsVisible="{Binding SelectedColorResource, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            ResourceKey="{Binding SelectedColorResource.ResourceKey}"
+                            ResourceName="{Binding SelectedColorResource.ResourceKey}" />
+                    </Panel>
+                </Border>
+            </StackPanel>
+        </SplitView.Pane>
+        <SplitView.Content>
+            <ScrollViewer>
+                <StackPanel Spacing="10">
+                    <TextBlock Text="Theme Preview" FontWeight="SemiBold" />
+                    <ListBox
+                        Theme="{StaticResource PureCardRadioGroupListBox}"
+                        ItemsSource="{Binding ThemeVariants}"
+                        SelectedItem="{Binding SelectedThemeVariant}">
+                        <ListBox.ItemsPanel>
+                            <ItemsPanelTemplate>
+                                <WrapPanel Orientation="Horizontal" />
+                            </ItemsPanelTemplate>
+                        </ListBox.ItemsPanel>
+                        <ListBox.ItemTemplate>
+                            <DataTemplate>
+                                <StackPanel HorizontalAlignment="Left" Spacing="5" MinWidth="200">
+                                    <ThemeVariantScope RequestedThemeVariant="{Binding}">
+                                        <Border
+                                            Padding="5 25 5 5"
+                                            HorizontalAlignment="Left"
+                                            Background="{DynamicResource WindowColor}"
+                                            BorderBrush="{DynamicResource WindowTextColor}"
+                                            BorderThickness="1"
+                                            CornerRadius="3">
+                                            <StackPanel Spacing="10">
+                                                <StackPanel Orientation="Horizontal" Spacing="50">
+                                                    <StackPanel Spacing="5">
+                                                        <TextBlock
+                                                            FontSize="50"
+                                                            Text="Aa" />
+                                                        <StackPanel Orientation="Horizontal" Spacing="3">
+                                                            <StackPanel.Styles>
+                                                                <Style Selector="Border">
+                                                                    <Setter Property="BorderThickness" Value="1" />
+                                                                    <Setter Property="BorderBrush" Value="{DynamicResource WindowTextColor}" />
+                                                                    <Setter Property="CornerRadius" Value="5" />
+                                                                    <Setter Property="Width" Value="10" />
+                                                                    <Setter Property="Height" Value="{Binding $self.Width}" />
+                                                                </Style>
+                                                            </StackPanel.Styles>
+                                                            <Border Background="{DynamicResource WindowColor}" />
+                                                            <Border Background="{DynamicResource HotlightColor}" />
+                                                            <Border Background="{DynamicResource GrayTextColor}" />
+                                                            <Border Background="{DynamicResource HighlightTextColor}" />
+                                                            <Border Background="{DynamicResource HighlightColor}" />
+                                                        </StackPanel>
+                                                    </StackPanel>
+                                                    <Border
+                                                        BorderThickness="1"
+                                                        BorderBrush="{DynamicResource WindowTextColor}"
+                                                        CornerRadius="3"
+                                                        Padding="8">
+                                                        <Panel>
+                                                            <StackPanel Spacing="5">
+                                                                <Border
+                                                                    Width="50"
+                                                                    Height="1"
+                                                                    Background="{DynamicResource WindowTextColor}" />
+                                                                <Border
+                                                                    Height="1"
+                                                                    Background="{DynamicResource WindowTextColor}" />
+                                                                <Border
+                                                                    Height="1"
+                                                                    Background="{DynamicResource WindowTextColor}" />
+                                                            </StackPanel>
+                                                            <StackPanel
+                                                                HorizontalAlignment="Right"
+                                                                VerticalAlignment="Bottom"
+                                                                Orientation="Horizontal"
+                                                                Spacing="2">
+                                                                <Border
+                                                                    Width="20"
+                                                                    Height="5"
+                                                                    Background="{DynamicResource HighlightColor}"
+                                                                    CornerRadius="1" />
+                                                                <Border
+                                                                    Width="20"
+                                                                    Height="5"
+                                                                    BorderThickness="1"
+                                                                    BorderBrush="{DynamicResource ButtonTextColor}"
+                                                                    CornerRadius="1" />
+                                                            </StackPanel>
+                                                        </Panel>
+                                                    </Border>
+                                                </StackPanel>
+                                                <Border
+                                                    Height="1"
+                                                    Background="{DynamicResource WindowTextColor}" />
+                                            </StackPanel>
+                                        </Border>
+                                    </ThemeVariantScope>
+                                    <TextBlock Text="{Binding}" FontWeight="SemiBold" />
+                                </StackPanel>
+                            </DataTemplate>
+                        </ListBox.ItemTemplate>
+                    </ListBox>
+
+                    <ThemeVariantScope
+                        MinWidth="400"
+                        RequestedThemeVariant="{Binding SelectedThemeVariant}">
+                        <Border Padding="10" Background="{DynamicResource WindowColor}">
+                            <StackPanel Spacing="16">
+                                <StackPanel.Styles>
+                                    <Style Selector="TextBlock">
+                                        <Setter Property="HorizontalAlignment" Value="Left" />
+                                        <Setter Property="VerticalAlignment" Value="Center" />
+                                        <Setter Property="FontWeight" Value="SemiBold" />
+                                    </Style>
+                                    <Style Selector="controls|ColorItemControl.ColorBlock">
+                                        <Setter Property="Width" Value="44" />
+                                        <Setter Property="Height" Value="{Binding $self.Width}" />
+                                        <Setter Property="HorizontalAlignment" Value="Right" />
+                                        <Setter Property="BorderThickness" Value="1" />
+                                        <Setter Property="BorderBrush" Value="{DynamicResource WindowTextColor}" />
+                                        <Setter Property="CornerRadius" Value="3" />
+                                    </Style>
+                                </StackPanel.Styles>
+                                <Panel>
+                                    <TextBlock
+                                        Foreground="{DynamicResource WindowTextColor}"
+                                        Text="Background" />
+                                    <controls:ColorItemControl
+                                        Classes="ColorBlock"
+                                        DataContext="{Binding ColorResources[0]}"
+                                        Background="{DynamicResource  WindowColor}" />
+                                </Panel>
+                                <Panel>
+                                    <TextBlock
+                                        Foreground="{DynamicResource WindowTextColor}"
+                                        Text="Text" />
+                                    <controls:ColorItemControl
+                                        Classes="ColorBlock"
+                                        DataContext="{Binding ColorResources[1]}"
+                                        Background="{DynamicResource  WindowTextColor}" />
+                                </Panel>
+                                <Panel>
+                                    <TextBlock
+                                        Foreground="{DynamicResource HotlightColor}"
+                                        TextDecorations="Underline"
+                                        Text="Hyperlink" />
+                                    <controls:ColorItemControl
+                                        Classes="ColorBlock"
+                                        DataContext="{Binding ColorResources[2]}"
+                                        Background="{DynamicResource  HotlightColor}" />
+                                </Panel>
+                                <Panel>
+                                    <TextBlock
+                                        Foreground="{DynamicResource GrayTextColor}"
+                                        Text="Inactive Text" />
+                                    <controls:ColorItemControl
+                                        Classes="ColorBlock"
+                                        DataContext="{Binding ColorResources[3]}"
+                                        Background="{DynamicResource  GrayTextColor}" />
+                                </Panel>
+                                <Panel>
+                                    <TextBlock
+                                        Foreground="{DynamicResource HighlightTextColor}"
+                                        Background="{DynamicResource HighlightColor}"
+                                        Text="Selected text" />
+                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="4">
+                                        <controls:ColorItemControl
+                                            Classes="ColorBlock"
+                                            DataContext="{Binding ColorResources[4]}"
+                                            Background="{DynamicResource  HighlightTextColor}" />
+                                        <controls:ColorItemControl
+                                            Classes="ColorBlock"
+                                            DataContext="{Binding ColorResources[5]}"
+                                            Background="{DynamicResource  HighlightColor}" />
+                                    </StackPanel>
+                                </Panel>
+                                <Panel>
+                                    <Border
+                                        HorizontalAlignment="Left"
+                                        VerticalAlignment="Center"
+                                        BorderBrush="{DynamicResource ButtonTextColor}"
+                                        Background="{DynamicResource ButtonFaceColor}"
+                                        BorderThickness="2"
+                                        CornerRadius="3">
+                                        <TextBlock
+                                            Foreground="{DynamicResource ButtonTextColor}"
+                                            Padding="16 6"
+                                            Text="Button text" />
+                                    </Border>
+                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="4">
+                                        <controls:ColorItemControl
+                                            Classes="ColorBlock"
+                                            DataContext="{Binding ColorResources[6]}"
+                                            Background="{DynamicResource  ButtonTextColor}" />
+                                        <controls:ColorItemControl
+                                            Classes="ColorBlock"
+                                            DataContext="{Binding ColorResources[7]}"
+                                            Background="{DynamicResource  ButtonFaceColor}" />
+                                    </StackPanel>
+                                </Panel>
+                            </StackPanel>
+                        </Border>
+                    </ThemeVariantScope>
+
+                    <DataGrid
+                        HorizontalAlignment="Left"
+                        CanUserSortColumns="False"
+                        AutoGenerateColumns="False"
+                        ItemsSource="{Binding ColorResources}"
+                        GridLinesVisibility="All"
+                        BorderBrush="{DynamicResource SemiColorBorder}"
+                        BorderThickness="1"
+                        Padding="5">
+                        <DataGrid.Columns>
+                            <DataGridTemplateColumn Header="Color">
+                                <DataGridTemplateColumn.CellTemplate>
+                                    <DataTemplate>
+                                        <controls:ColorItemControl
+                                            Width="40"
+                                            Height="20"
+                                            CornerRadius="3"
+                                            Background="{Binding Brush}" />
+                                    </DataTemplate>
+                                </DataGridTemplateColumn.CellTemplate>
+                            </DataGridTemplateColumn>
+
+                            <DataGridTemplateColumn Header="ResourceKey">
+                                <DataGridTemplateColumn.CellTemplate>
+                                    <DataTemplate>
+                                        <SelectableTextBlock
+                                            Margin="12 0"
+                                            VerticalAlignment="Center"
+                                            Text="{Binding ResourceKey}" />
+                                    </DataTemplate>
+                                </DataGridTemplateColumn.CellTemplate>
+                            </DataGridTemplateColumn>
+
+                            <DataGridTemplateColumn Header="Hex">
+                                <DataGridTemplateColumn.CellTemplate>
+                                    <DataTemplate>
+                                        <SelectableTextBlock
+                                            Margin="12 0"
+                                            VerticalAlignment="Center"
+                                            Text="{Binding Brush,
+                                                Converter={x:Static cvt:ColorConverter.ToHex},ConverterParameter={x:False}}" />
+                                    </DataTemplate>
+                                </DataGridTemplateColumn.CellTemplate>
+                            </DataGridTemplateColumn>
+
+                            <DataGridTemplateColumn Header="Description">
+                                <DataGridTemplateColumn.CellTemplate>
+                                    <DataTemplate>
+                                        <SelectableTextBlock
+                                            Margin="12 0"
+                                            VerticalAlignment="Center"
+                                            Text="{Binding Description}" />
+                                    </DataTemplate>
+                                </DataGridTemplateColumn.CellTemplate>
+                            </DataGridTemplateColumn>
+
+                            <DataGridTemplateColumn Header="Pair With">
+                                <DataGridTemplateColumn.CellTemplate>
+                                    <DataTemplate>
+                                        <SelectableTextBlock
+                                            Margin="12 0"
+                                            VerticalAlignment="Center"
+                                            Text="{Binding PairWith}" />
+                                    </DataTemplate>
+                                </DataGridTemplateColumn.CellTemplate>
+                            </DataGridTemplateColumn>
+
+                            <DataGridTemplateColumn Width="100" Header="CopyText">
+                                <DataGridTemplateColumn.CellTemplate>
+                                    <DataTemplate DataType="vm:ColorResource">
+                                        <Button
+                                            Command="{Binding $parent[pages:HighContrastDemo].Copy}"
+                                            CommandParameter="{Binding CopyText}"
+                                            Theme="{DynamicResource  IconBorderlessButton}"
+                                            Content="{StaticResource SemiIconCopy}" />
+                                    </DataTemplate>
+                                </DataGridTemplateColumn.CellTemplate>
+                            </DataGridTemplateColumn>
+                        </DataGrid.Columns>
+                    </DataGrid>
+                </StackPanel>
+            </ScrollViewer>
+        </SplitView.Content>
+    </SplitView>
+</UserControl>
--- a/demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml.cs
@@ -0,0 +1,24 @@
+using System.Threading.Tasks;
+using Avalonia.Controls;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class HighContrastDemo : UserControl
+{
+    public HighContrastDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new HighContrastDemoViewModel();
+    }
+
+    public async Task Copy(object? o)
+    {
+        if (o is null) return;
+        var toplevel = TopLevel.GetTopLevel(this);
+        if (toplevel?.Clipboard is { } c)
+        {
+            await c.SetTextAsync(o.ToString());
+        }
+    }
+}
--- a/demo/Semi.Avalonia.Demo/Pages/IconDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/IconDemo.axaml
@@ -18,78 +18,67 @@
            Text="{Binding SearchText}"
            Watermark="Input Icon Name" />

-        <TabControl Grid.Row="1">
-            <TabItem Header="Filled Icons">
-                <ScrollViewer>
-                    <ItemsControl ItemsSource="{Binding FilteredFilledIcons}">
-                        <ItemsControl.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <WrapPanel />
-                            </ItemsPanelTemplate>
-                        </ItemsControl.ItemsPanel>
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate>
-                                <Button Theme="{DynamicResource OutlineButton}"
-                                        Classes="Tertiary"
-                                        Padding="0"
-                                        Margin="10"
-                                        Width="200"
-                                        Height="120"
-                                        Click="Button_Clicked">
-                                    <StackPanel Spacing="8">
-                                        <PathIcon
-                                            Theme="{DynamicResource InnerPathIcon}"
-                                            HorizontalAlignment="Center"
-                                            Classes="ExtraLarge"
-                                            Data="{Binding Geometry}" />
-                                        <TextBlock
-                                            HorizontalAlignment="Center"
-                                            FontSize="12"
-                                            FontWeight="Normal"
-                                            Text="{Binding ResourceKey}" />
-                                    </StackPanel>
-                                </Button>
-                            </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                    </ItemsControl>
-                </ScrollViewer>
-            </TabItem>
+        <TabControl
+            Grid.Row="1"
+            Theme="{StaticResource LineTabControl}"
+            ItemsSource="{Binding IconTabs}">
+            <TabControl.ItemTemplate>
+                <DataTemplate>
+                    <WrapPanel ItemSpacing="5">
+                        <TextBlock Text="{Binding Header}" />
+                        <Label 
+                            Theme="{StaticResource TagLabel}"
+                            Classes="Purple"
+                            IsVisible="{Binding Header, 
+                                Converter={x:Static ObjectConverters.Equal},
+                                ConverterParameter='AI Icons'}"
+                            Content="New" />
+                    </WrapPanel>
+                </DataTemplate>
+            </TabControl.ItemTemplate>

-            <TabItem Header="Stroked Icons">
-                <ScrollViewer>
-                    <ItemsControl ItemsSource="{Binding FilteredStrokedIcons}">
-                        <ItemsControl.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <WrapPanel />
-                            </ItemsPanelTemplate>
-                        </ItemsControl.ItemsPanel>
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate>
-                                <Button Theme="{DynamicResource OutlineButton}"
-                                        Classes="Tertiary"
-                                        Padding="0"
-                                        Margin="10"
-                                        Width="200"
-                                        Height="120"
-                                        Click="Button_Clicked">
-                                    <StackPanel Spacing="8">
-                                        <PathIcon
-                                            Theme="{DynamicResource InnerPathIcon}"
-                                            HorizontalAlignment="Center"
-                                            Classes="ExtraLarge"
-                                            Data="{Binding Geometry}" />
-                                        <TextBlock
-                                            HorizontalAlignment="Center"
-                                            FontSize="12"
-                                            FontWeight="Normal"
-                                            Text="{Binding ResourceKey}" />
-                                    </StackPanel>
-                                </Button>
-                            </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                    </ItemsControl>
-                </ScrollViewer>
-            </TabItem>
+            <TabControl.ContentTemplate>
+                <DataTemplate DataType="vm:IconTab">
+                    <ScrollViewer>
+                        <ItemsControl
+                            Margin="0 10"
+                            ItemsSource="{Binding IconItems}">
+                            <ItemsControl.ItemsPanel>
+                                <ItemsPanelTemplate>
+                                    <WrapPanel
+                                        ItemWidth="200"
+                                        ItemHeight="120"
+                                        ItemSpacing="10"
+                                        LineSpacing="10" />
+                                </ItemsPanelTemplate>
+                            </ItemsControl.ItemsPanel>
+                            <ItemsControl.ItemTemplate>
+                                <DataTemplate>
+                                    <Button Theme="{DynamicResource OutlineButton}"
+                                            Classes="Tertiary"
+                                            Padding="0"
+                                            HorizontalAlignment="Stretch"
+                                            VerticalAlignment="Stretch"
+                                            Click="Button_Clicked">
+                                        <StackPanel Spacing="8">
+                                            <PathIcon
+                                                Theme="{DynamicResource InnerPathIcon}"
+                                                HorizontalAlignment="Center"
+                                                Classes="ExtraLarge"
+                                                Data="{Binding Geometry}" />
+                                            <TextBlock
+                                                HorizontalAlignment="Center"
+                                                FontSize="12"
+                                                FontWeight="Normal"
+                                                Text="{Binding ResourceKey}" />
+                                        </StackPanel>
+                                    </Button>
+                                </DataTemplate>
+                            </ItemsControl.ItemTemplate>
+                        </ItemsControl>
+                    </ScrollViewer>
+                </DataTemplate>
+            </TabControl.ContentTemplate>
        </TabControl>
    </Grid>
 </UserControl>
--- a/demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml
@@ -8,14 +8,11 @@
    d:DesignWidth="800"
    mc:Ignorable="d">
    <ScrollViewer>
-        <StackPanel HorizontalAlignment="Left" Spacing="20">
+        <StackPanel>
            <StackPanel.Styles>
-                <Style Selector="Label">
-                    <Setter Property="Margin" Value="4" />
-                </Style>
-                <Style Selector="Grid > TextBlock">
-                    <Setter Property="VerticalAlignment" Value="Center" />
-                    <Setter Property="Margin" Value="4" />
+                <Style Selector="Grid > TextBlock,Grid > Label">
+                    <Setter Property="Layoutable.VerticalAlignment" Value="Center" />
+                    <Setter Property="Layoutable.Margin" Value="4" />
                </Style>
            </StackPanel.Styles>
            <ScrollViewer HorizontalScrollBarVisibility="Auto">
@@ -156,69 +153,89 @@
                    </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>
+
+            <HeaderedContentControl
+                Margin="16"
+                Header="Theme: TagLabel"
+                Theme="{DynamicResource GroupBox}">
+                <ScrollViewer HorizontalScrollBarVisibility="Auto">
+                    <StackPanel Orientation="Horizontal" Spacing="8">
+                        <StackPanel Spacing="4">
+                            <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>
+                        </StackPanel>
+                        <StackPanel Spacing="4">
+                            <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>
+                        </StackPanel>
+                        <StackPanel Spacing="4">
+                            <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>
+                        </StackPanel>
+                        <StackPanel Spacing="4">
+                            <Label Classes="Colorful Gradient" Theme="{DynamicResource TagLabel}">Light</Label>
+                            <Label Classes="Colorful Gradient Ghost" Theme="{DynamicResource TagLabel}">Ghost</Label>
+                            <Label Classes="Colorful Gradient Solid" Theme="{DynamicResource TagLabel}">Solid</Label>
+                        </StackPanel>
+                        <StackPanel Spacing="4">
+                            <Label Classes="Colorful" Theme="{DynamicResource TagLabel}">Light</Label>
+                            <Label Classes="Colorful Ghost" Theme="{DynamicResource TagLabel}">Ghost</Label>
+                            <Label Classes="Colorful Solid" Theme="{DynamicResource TagLabel}">Solid</Label>
+                        </StackPanel>
+                        <StackPanel Spacing="4">
+                            <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>
+                        </StackPanel>
+                    </StackPanel>
+                </ScrollViewer>
+            </HeaderedContentControl>
        </StackPanel>
    </ScrollViewer>
 </UserControl>
--- a/demo/Semi.Avalonia.Demo/Pages/NotificationDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/NotificationDemo.axaml.cs
@@ -27,7 +27,8 @@ public partial class NotificationDemo : UserControl
        if (sender is RadioButton b && b.Content is string s)
        {
            Enum.TryParse<NotificationPosition>(s, out var t);
-            _manager.Position = t;
+            if (_manager is not null)
+                _manager.Position = t;
        }
    }

--- a/demo/Semi.Avalonia.Demo/Pages/Overview.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/Overview.axaml
@@ -353,12 +353,12 @@
                        <StackPanel>
                            <TextBlock Text="Install via nuget: " />
                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].MainInstall}" />
+                                <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>
@@ -368,12 +368,12 @@
                        <StackPanel>
                            <TextBlock Text="Install via nuget: " />
                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].ColorPickerInstall}" />
+                                <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>
@@ -383,12 +383,12 @@
                        <StackPanel>
                            <TextBlock Text="Install via nuget: " />
                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].DataGridInstall}" />
+                                <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>
@@ -398,12 +398,12 @@
                        <StackPanel>
                            <TextBlock Text="Install via nuget: " />
                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].TreeDataGridInstall}" />
+                                <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>
@@ -413,12 +413,12 @@
                        <StackPanel>
                            <TextBlock Text="Install via nuget: " />
                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].DockInstall}" />
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].DockInstall}" />
                            </Border>
                            <TextBlock Text="Reference styles: " />
                            <Border Margin="0,16" Classes="CodeBlock">
                                <SelectableTextBlock
-                                    
+                                    FontFamily="Consolas"
                                    Text="{Binding $parent[local:Overview].DockStyle}"
                                    TextWrapping="Wrap" />
                            </Border>
@@ -428,12 +428,12 @@
                        <StackPanel>
                            <TextBlock Text="Install via nuget: " />
                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].TabaloniaInstall}" />
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].TabaloniaInstall}" />
                            </Border>
                            <TextBlock Text="Reference styles: " />
                            <Border Margin="0,16" Classes="CodeBlock">
                                <SelectableTextBlock
-                                    
+                                    FontFamily="Consolas"
                                    Text="{Binding $parent[local:Overview].TabaloniaStyle}"
                                    TextWrapping="Wrap" />
                            </Border>
@@ -443,12 +443,12 @@
                        <StackPanel>
                            <TextBlock Text="Install via nuget: " />
                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].AvaloniaEditInstall}" />
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].AvaloniaEditInstall}" />
                            </Border>
                            <TextBlock Text="Reference styles: " />
                            <Border Margin="0,16" Classes="CodeBlock">
                                <SelectableTextBlock
-                                    
+                                    FontFamily="Consolas"
                                    Text="{Binding $parent[local:Overview].AvaloniaEditStyle}"
                                    TextWrapping="Wrap" />
                            </Border>
--- a/demo/Semi.Avalonia.Demo/Pages/Overview.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/Overview.axaml.cs
@@ -9,7 +9,7 @@ public partial class Overview : UserControl
        InitializeComponent();
    }

-    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.2.1.9";
+    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia";

    public string MainStyle { get; set; } =
        """
@@ -18,7 +18,7 @@ public partial class Overview : UserControl
        </Application.Styles>
        """;

-    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.2.1.9";
+    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker";

    public string ColorPickerStyle { get; set; } =
        """
@@ -27,7 +27,7 @@ public partial class Overview : UserControl
        </Application.Styles>
        """;

-    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.2.1.9";
+    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid";

    public string DataGridStyle { get; set; } =
        """
@@ -36,7 +36,7 @@ public partial class Overview : UserControl
        </Application.Styles>
        """;

-    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.10.4";
+    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid";

    public string TreeDataGridStyle { get; set; } =
        """
@@ -45,7 +45,7 @@ public partial class Overview : UserControl
        </Application.Styles>
        """;

-    public string DockInstall { get; set; } = "dotnet add package Semi.Avalonia.Dock --version 11.3.0";
+    public string DockInstall { get; set; } = "dotnet add package Semi.Avalonia.Dock";

    public string DockStyle { get; set; } =
        """
@@ -54,7 +54,7 @@ public partial class Overview : UserControl
        </Application.Styles>
        """;

-    public string TabaloniaInstall { get; set; } = "dotnet add package Semi.Avalonia.Tabalonia --version 11.0.0-beta1";
+    public string TabaloniaInstall { get; set; } = "dotnet add package Semi.Avalonia.Tabalonia";

    public string TabaloniaStyle { get; set; } =
        """
@@ -63,7 +63,7 @@ public partial class Overview : UserControl
        </Application.Styles>
        """;

-    public string AvaloniaEditInstall { get; set; } = "dotnet add package Semi.Avalonia.AvaloniaEdit --version 11.2.0";
+    public string AvaloniaEditInstall { get; set; } = "dotnet add package Semi.Avalonia.AvaloniaEdit";

    public string AvaloniaEditStyle { get; set; } =
        """
--- a/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml
@@ -8,7 +8,6 @@
    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
    d:DesignHeight="450"
    d:DesignWidth="800"
-    x:CompileBindings="True"
    x:DataType="viewModels:PaletteDemoViewModel"
    mc:Ignorable="d">
    <Design.DataContext>
--- a/demo/Semi.Avalonia.Demo/Pages/RefreshContainerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/RefreshContainerDemo.axaml
@@ -8,7 +8,6 @@
    d:DesignHeight="450"
    d:DesignWidth="800"
    x:DataType="vm:RefreshContainerDemoViewModel"
-    x:CompileBindings="True"
    mc:Ignorable="d">
    <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Top">
        <Label DockPanel.Dock="Top">A control that supports pull to refresh</Label>
--- a/demo/Semi.Avalonia.Demo/Pages/RepeatButtonDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/RepeatButtonDemo.axaml
@@ -1,80 +0,0 @@
-<UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.RepeatButtonDemo"
-    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">
-    <StackPanel HorizontalAlignment="Left" Spacing="20">
-        <TextBlock>Light (Default)</TextBlock>
-        <StackPanel Orientation="Horizontal" Spacing="20">
-            <RepeatButton Classes="Primary">Primary</RepeatButton>
-            <RepeatButton Classes="Secondary">Secondary</RepeatButton>
-            <RepeatButton Classes="Tertiary">Tertiary</RepeatButton>
-            <RepeatButton Classes="Success">Success</RepeatButton>
-            <RepeatButton Classes="Warning">Warning</RepeatButton>
-            <RepeatButton Classes="Danger">Danger</RepeatButton>
-            <RepeatButton Classes="Danger" IsEnabled="False">Disabled</RepeatButton>
-        </StackPanel>
-        <TextBlock>Solid</TextBlock>
-        <StackPanel Orientation="Horizontal" Spacing="20">
-            <RepeatButton Classes="Primary" Theme="{DynamicResource SolidRepeatButton}">Primary</RepeatButton>
-            <RepeatButton Classes="Secondary" Theme="{DynamicResource SolidRepeatButton}">Secondary</RepeatButton>
-            <RepeatButton Classes="Tertiary" Theme="{DynamicResource SolidRepeatButton}">Tertiary</RepeatButton>
-            <RepeatButton Classes="Success" Theme="{DynamicResource SolidRepeatButton}">Success</RepeatButton>
-            <RepeatButton Classes="Warning" Theme="{DynamicResource SolidRepeatButton}">Warning</RepeatButton>
-            <RepeatButton Classes="Danger" Theme="{DynamicResource SolidRepeatButton}">Danger</RepeatButton>
-            <RepeatButton
-                Classes="Danger"
-                IsEnabled="False"
-                Theme="{DynamicResource SolidRepeatButton}">
-                Disabled
-            </RepeatButton>
-        </StackPanel>
-        <TextBlock>Outline</TextBlock>
-        <StackPanel Orientation="Horizontal" Spacing="20">
-            <RepeatButton Classes="Primary" Theme="{DynamicResource OutlineRepeatButton}">Primary</RepeatButton>
-            <RepeatButton Classes="Secondary" Theme="{DynamicResource OutlineRepeatButton}">Secondary</RepeatButton>
-            <RepeatButton Classes="Tertiary" Theme="{DynamicResource OutlineRepeatButton}">Tertiary</RepeatButton>
-            <RepeatButton Classes="Success" Theme="{DynamicResource OutlineRepeatButton}">Success</RepeatButton>
-            <RepeatButton Classes="Warning" Theme="{DynamicResource OutlineRepeatButton}">Warning</RepeatButton>
-            <RepeatButton Classes="Danger" Theme="{DynamicResource OutlineRepeatButton}">Danger</RepeatButton>
-            <RepeatButton
-                Classes="Danger"
-                IsEnabled="False"
-                Theme="{DynamicResource OutlineRepeatButton}">
-                Disabled
-            </RepeatButton>
-        </StackPanel>
-        <TextBlock>Borderless</TextBlock>
-        <StackPanel Orientation="Horizontal" Spacing="20">
-            <RepeatButton Classes="Primary" Theme="{DynamicResource BorderlessRepeatButton}">Primary</RepeatButton>
-            <RepeatButton Classes="Secondary" Theme="{DynamicResource BorderlessRepeatButton}">Secondary</RepeatButton>
-            <RepeatButton Classes="Tertiary" Theme="{DynamicResource BorderlessRepeatButton}">Tertiary</RepeatButton>
-            <RepeatButton Classes="Success" Theme="{DynamicResource BorderlessRepeatButton}">Success</RepeatButton>
-            <RepeatButton Classes="Warning" Theme="{DynamicResource BorderlessRepeatButton}">Warning</RepeatButton>
-            <RepeatButton Classes="Danger" Theme="{DynamicResource BorderlessRepeatButton}">Danger</RepeatButton>
-            <RepeatButton
-                Classes="Danger"
-                IsEnabled="False"
-                Theme="{DynamicResource BorderlessRepeatButton}">
-                Disabled
-            </RepeatButton>
-        </StackPanel>
-        <TextBlock>Disabled</TextBlock>
-        <StackPanel Background="{DynamicResource SemiColorBackground1}" Orientation="Horizontal" Spacing="20">
-            <Button IsEnabled="False">Light</Button>
-            <Button IsEnabled="False" Theme="{DynamicResource SolidButton}">Solid</Button>
-            <Button IsEnabled="False" Theme="{DynamicResource OutlineButton}">Outline</Button>
-            <Button IsEnabled="False" Theme="{DynamicResource BorderlessButton}">Borderless</Button>
-        </StackPanel>
-        <TextBlock>Size Classes</TextBlock>
-        <StackPanel Orientation="Horizontal" Spacing="20">
-            <RepeatButton Classes="Small">Small</RepeatButton>
-            <RepeatButton>Default</RepeatButton>
-            <RepeatButton Classes="Large">Large</RepeatButton>
-        </StackPanel>
-    </StackPanel>
-</UserControl>
--- a/demo/Semi.Avalonia.Demo/Pages/RepeatButtonDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/RepeatButtonDemo.axaml.cs
@@ -1,11 +0,0 @@
-using Avalonia.Controls;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class RepeatButtonDemo : UserControl
-{
-    public RepeatButtonDemo()
-    {
-        InitializeComponent();
-    }
-}
--- a/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
@@ -7,276 +7,187 @@
    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
    d:DesignHeight="1000"
    d:DesignWidth="800"
+    x:DataType="vm:SplitViewDemoViewModel"
    mc:Ignorable="d">
    <Design.DataContext>
        <vm:SplitViewDemoViewModel />
    </Design.DataContext>
    <Border>
        <Grid ColumnDefinitions="*,400">
-            <Border Grid.Column="1" VerticalAlignment="Top" Margin="10 0 0 0">
-                <Grid RowDefinitions="*, *, *, *, *, *" ColumnDefinitions="Auto, *">
+            <Border
+                Grid.Column="1"
+                Margin="10,0,0,0"
+                VerticalAlignment="Top">
+                <Grid ColumnDefinitions="Auto, *" RowDefinitions="*, *, *, *, *, *">
                    <Label
-                        Grid.Row="0" Grid.Column="0"
+                        Grid.Row="0"
+                        Grid.Column="0"
                        VerticalAlignment="Center"
                        Content="IsPaneOpen" />
                    <ToggleSwitch
-                        Grid.Row="0" Grid.Column="1"
-                        Name="PaneOpenButton" />
+                        Name="PaneOpenButton"
+                        Grid.Row="0"
+                        Grid.Column="1" />

                    <Label
-                        Grid.Row="1" Grid.Column="0"
+                        Grid.Row="1"
+                        Grid.Column="0"
                        VerticalAlignment="Center"
                        Content="UseLightDismissOverlayMode" />
                    <ToggleSwitch
-                        Grid.Row="1" Grid.Column="1"
-                        Name="UseLightDismissOverlayModeButton" />
+                        Name="UseLightDismissOverlayModeButton"
+                        Grid.Row="1"
+                        Grid.Column="1" />

                    <Label
-                        Grid.Row="2" Grid.Column="0"
+                        Grid.Row="2"
+                        Grid.Column="0"
                        VerticalAlignment="Center"
                        Content="Placement" />
-                    <ToggleSwitch
-                        Grid.Row="2" Grid.Column="1"
-                        Name="PanePlacementButton"
-                        OffContent="Left"
-                        OnContent="Right" />
-
+                    <ComboBox 
+                        Grid.Row="2" 
+                        Grid.Column="1" 
+                        Name="PanelPlacementSelector"
+                        HorizontalAlignment="Stretch"
+                        ItemsSource="{x:Static vm:SplitViewDemoViewModel.Placements}"
+                        SelectedItem="{x:Static SplitViewPanePlacement.Left}"
+                        />
                    <Label
-                        Grid.Row="3" Grid.Column="0"
+                        Grid.Row="3"
+                        Grid.Column="0"
                        VerticalAlignment="Center"
                        Content="DisplayMode" />
                    <ComboBox
-                        Grid.Row="3" Grid.Column="1"
                        Name="DisplayModeSelector"
+                        Grid.Row="3"
+                        Grid.Column="1"
                        HorizontalAlignment="Stretch"
                        ItemsSource="{x:Static vm:SplitViewDemoViewModel.DisplayModes}"
                        SelectedItem="{x:Static SplitViewDisplayMode.CompactInline}" />

                    <Label
-                        Grid.Row="4" Grid.Column="0"
+                        Grid.Row="4"
+                        Grid.Column="0"
                        VerticalAlignment="Center"
                        Content="{Binding #CompactPaneLengthSlider.Value, StringFormat='{}CompactPaneLength: {0}'}" />
                    <Slider
-                        Grid.Row="4" Grid.Column="1"
                        Name="CompactPaneLengthSlider"
+                        Grid.Row="4"
+                        Grid.Column="1"
+                        IsSnapToTickEnabled="True"
                        Maximum="128"
                        Minimum="0"
                        TickFrequency="1"
-                        IsSnapToTickEnabled="True"
                        Value="48" />

                    <Label
-                        Grid.Row="5" Grid.Column="0"
+                        Grid.Row="5"
+                        Grid.Column="0"
                        VerticalAlignment="Center"
-                        Content="{Binding #OpenPaneLengthSlider.Value,StringFormat='{}OpenPaneLength: {0}'}" />
+                        Content="{Binding #OpenPaneLengthSlider.Value, StringFormat='{}OpenPaneLength: {0}'}" />
                    <Slider
-                        Grid.Row="5" Grid.Column="1"
                        Name="OpenPaneLengthSlider"
+                        Grid.Row="5"
+                        Grid.Column="1"
+                        IsSnapToTickEnabled="True"
                        Maximum="500"
                        Minimum="128"
                        TickFrequency="1"
-                        IsSnapToTickEnabled="True"
                        Value="256" />
                </Grid>
            </Border>
-            <TabControl Grid.Column="0">
-                <TabItem Header="Default">
-                    <Border
-                        BorderBrush="{DynamicResource SemiGrey1}"
-                        BorderThickness="1">
-                        <SplitView
-                            Name="SplitView"
-                            IsPaneOpen="{Binding #PaneOpenButton.IsChecked,Mode=TwoWay}"
-                            UseLightDismissOverlayMode="{Binding #UseLightDismissOverlayModeButton.IsChecked}"
-                            PanePlacement="{Binding #PanePlacementButton.IsChecked}"
-                            DisplayMode="{Binding #DisplayModeSelector.SelectedItem}"
-                            CompactPaneLength="{Binding #CompactPaneLengthSlider.Value}"
-                            OpenPaneLength="{Binding #OpenPaneLengthSlider.Value}">
-                            <SplitView.Background>
-                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
-                                    <GradientStop Color="#6b4c1b" Offset="0" />
-                                    <GradientStop Color="#291e10" Offset="1" />
-                                </LinearGradientBrush>
-                            </SplitView.Background>
-                            <SplitView.Pane>
-                                <Grid RowDefinitions="Auto,*,Auto">
-                                    <TextBlock
-                                        Grid.Row="0"
-                                        Name="PaneHeader"
-                                        Margin="8,12"
-                                        FontWeight="Bold"
-                                        Text="Playlist" />
-                                    <ListBox
-                                        Grid.Row="1"
-                                        ItemsSource="{Binding Songs}" />
-                                    <ToggleSwitch
-                                        Grid.Row="2"
-                                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
-                                        Content="{StaticResource SemiIconSidebar}"
-                                        HorizontalAlignment="Left"
-                                        IsChecked="{Binding #SplitView.IsPaneOpen}" />
-                                </Grid>
-                            </SplitView.Pane>
+            <SplitView
+                Grid.Column="0"
+                Name="SplitView"
+                CompactPaneLength="{Binding #CompactPaneLengthSlider.Value}"
+                DisplayMode="{Binding #DisplayModeSelector.SelectedItem}"
+                IsPaneOpen="{Binding #PaneOpenButton.IsChecked, Mode=TwoWay}"
+                OpenPaneLength="{Binding #OpenPaneLengthSlider.Value}"
+                PanePlacement="{Binding #PanelPlacementSelector.SelectedItem}"
+                UseLightDismissOverlayMode="{Binding #UseLightDismissOverlayModeButton.IsChecked}">
+                <SplitView.Background>
+                    <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                        <GradientStop Offset="0" Color="#6b4c1b" />
+                        <GradientStop Offset="1" Color="#291e10" />
+                    </LinearGradientBrush>
+                </SplitView.Background>
+                <SplitView.Pane>
+                    <Grid RowDefinitions="Auto,*,Auto">
+                        <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="8 12">
+                            <ToggleSwitch
+                                Content="{StaticResource SemiIconSidebar}"
+                                IsChecked="{Binding #SplitView.IsPaneOpen}"
+                                Theme="{DynamicResource IconBorderlessToggleSwitch}" />
+                            <TextBlock
+                                Name="PaneHeader"
+                                VerticalAlignment="Center"
+                                Margin="8 0"
+                                FontWeight="Bold"
+                                Text="Playlist" />
+                        </StackPanel>
+                        
+                        <ListBox Grid.Row="1" ItemsSource="{Binding Songs}" />
+                        
+                    </Grid>
+                </SplitView.Pane>

-                            <Panel>
-                                <Panel.Styles>
-                                    <Style Selector="Image#AlbumCover">
-                                        <Style.Animations>
-                                            <Animation IterationCount="Infinite" Duration="0:0:40">
-                                                <KeyFrame Cue="0%">
-                                                    <Setter Property="RotateTransform.Angle" Value="0" />
-                                                </KeyFrame>
-                                                <KeyFrame Cue="100%">
-                                                    <Setter Property="RotateTransform.Angle" Value="360" />
-                                                </KeyFrame>
-                                            </Animation>
-                                        </Style.Animations>
-                                    </Style>
-                                </Panel.Styles>
-                                <Image
-                                    Source="/Assets/WORLD.png"
-                                    Name="AlbumCover"
-                                    Width="200"
-                                    Height="200" />
-                                <Arc
-                                    Width="290"
-                                    Height="290"
-                                    StartAngle="0"
-                                    SweepAngle="360"
-                                    StrokeJoin="Round"
-                                    StrokeLineCap="Round"
-                                    StrokeThickness="45">
-                                    <Arc.Stroke>
-                                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
-                                            <GradientStop Color="#010101" Offset="0" />
-                                            <GradientStop Color="#363636" Offset="0.5" />
-                                            <GradientStop Color="#010101" Offset="1" />
-                                        </LinearGradientBrush>
-                                    </Arc.Stroke>
-                                </Arc>
-                                <Arc
-                                    Width="294"
-                                    Height="294"
-                                    StartAngle="0"
-                                    SweepAngle="360"
-                                    StrokeJoin="Round"
-                                    StrokeLineCap="Round"
-                                    StrokeThickness="4"
-                                    Stroke="Black" />
-                                <Arc
-                                    Width="310"
-                                    Height="310"
-                                    StartAngle="0"
-                                    SweepAngle="360"
-                                    StrokeJoin="Round"
-                                    StrokeLineCap="Round"
-                                    StrokeThickness="10"
-                                    Stroke="#C6CACD"
-                                    Opacity="0.1" />
-                            </Panel>
-
-                        </SplitView>
-                    </Border>
-                </TabItem>
-                <TabItem Header="VerticalSplitView">
-                    <Border
-                        BorderBrush="{DynamicResource SemiGrey1}"
-                        BorderThickness="1">
-                        <SplitView
-                            Name="SplitView2"
-                            Theme="{DynamicResource VerticalSplitView}"
-                            IsPaneOpen="{Binding #PaneOpenButton.IsChecked,Mode=TwoWay}"
-                            UseLightDismissOverlayMode="{Binding #UseLightDismissOverlayModeButton.IsChecked}"
-                            PanePlacement="{Binding #PanePlacementButton.IsChecked}"
-                            DisplayMode="{Binding #DisplayModeSelector.SelectedItem}"
-                            CompactPaneLength="{Binding #CompactPaneLengthSlider.Value}"
-                            OpenPaneLength="{Binding #OpenPaneLengthSlider.Value}">
-                            <SplitView.Background>
-                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
-                                    <GradientStop Color="#6b4c1b" Offset="0" />
-                                    <GradientStop Color="#291e10" Offset="1" />
-                                </LinearGradientBrush>
-                            </SplitView.Background>
-                            <SplitView.Pane>
-                                <Grid RowDefinitions="Auto,Auto,*">
-                                    <ToggleSwitch
-                                        Grid.Row="0"
-                                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
-                                        Content="{StaticResource SemiIconSidebar}"
-                                        HorizontalAlignment="Left"
-                                        IsChecked="{Binding #SplitView2.IsPaneOpen}" />
-                                    <TextBlock
-                                        Grid.Row="1"
-                                        Margin="8,12"
-                                        FontWeight="Bold"
-                                        Text="Playlist" />
-                                    <ListBox
-                                        Grid.Row="2"
-                                        ItemsSource="{Binding Songs}" />
-                                </Grid>
-                            </SplitView.Pane>
-
-                            <Panel>
-                                <Panel.Styles>
-                                    <Style Selector="Image#AlbumCover2">
-                                        <Style.Animations>
-                                            <Animation IterationCount="Infinite" Duration="0:0:40">
-                                                <KeyFrame Cue="0%">
-                                                    <Setter Property="RotateTransform.Angle" Value="0" />
-                                                </KeyFrame>
-                                                <KeyFrame Cue="100%">
-                                                    <Setter Property="RotateTransform.Angle" Value="360" />
-                                                </KeyFrame>
-                                            </Animation>
-                                        </Style.Animations>
-                                    </Style>
-                                </Panel.Styles>
-                                <Image
-                                    Source="/Assets/WORLD.png"
-                                    Name="AlbumCover2"
-                                    Width="200"
-                                    Height="200" />
-                                <Arc
-                                    Width="290"
-                                    Height="290"
-                                    StartAngle="0"
-                                    SweepAngle="360"
-                                    StrokeJoin="Round"
-                                    StrokeLineCap="Round"
-                                    StrokeThickness="45">
-                                    <Arc.Stroke>
-                                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
-                                            <GradientStop Color="#010101" Offset="0" />
-                                            <GradientStop Color="#363636" Offset="0.5" />
-                                            <GradientStop Color="#010101" Offset="1" />
-                                        </LinearGradientBrush>
-                                    </Arc.Stroke>
-                                </Arc>
-                                <Arc
-                                    Width="294"
-                                    Height="294"
-                                    StartAngle="0"
-                                    SweepAngle="360"
-                                    StrokeJoin="Round"
-                                    StrokeLineCap="Round"
-                                    StrokeThickness="4"
-                                    Stroke="Black" />
-                                <Arc
-                                    Width="310"
-                                    Height="310"
-                                    StartAngle="0"
-                                    SweepAngle="360"
-                                    StrokeJoin="Round"
-                                    StrokeLineCap="Round"
-                                    StrokeThickness="10"
-                                    Stroke="#C6CACD"
-                                    Opacity="0.1" />
-                            </Panel>
-
-                        </SplitView>
-                    </Border>
-                </TabItem>
-            </TabControl>
+                <Panel>
+                    <Panel.Styles>
+                        <Style Selector="Image#AlbumCover">
+                            <Style.Animations>
+                                <Animation IterationCount="Infinite" Duration="0:0:40">
+                                    <KeyFrame Cue="0%">
+                                        <Setter Property="RotateTransform.Angle" Value="0" />
+                                    </KeyFrame>
+                                    <KeyFrame Cue="100%">
+                                        <Setter Property="RotateTransform.Angle" Value="360" />
+                                    </KeyFrame>
+                                </Animation>
+                            </Style.Animations>
+                        </Style>
+                    </Panel.Styles>
+                    <Image
+                        Name="AlbumCover"
+                        Width="200"
+                        Height="200"
+                        Source="/Assets/WORLD.png" />
+                    <Arc
+                        Width="290"
+                        Height="290"
+                        StartAngle="0"
+                        StrokeJoin="Round"
+                        StrokeLineCap="Round"
+                        StrokeThickness="45"
+                        SweepAngle="360">
+                        <Arc.Stroke>
+                            <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
+                                <GradientStop Offset="0" Color="#010101" />
+                                <GradientStop Offset="0.5" Color="#363636" />
+                                <GradientStop Offset="1" Color="#010101" />
+                            </LinearGradientBrush>
+                        </Arc.Stroke>
+                    </Arc>
+                    <Arc
+                        Width="294"
+                        Height="294"
+                        StartAngle="0"
+                        Stroke="Black"
+                        StrokeJoin="Round"
+                        StrokeLineCap="Round"
+                        StrokeThickness="4"
+                        SweepAngle="360" />
+                    <Arc
+                        Width="310"
+                        Height="310"
+                        Opacity="0.1"
+                        StartAngle="0"
+                        Stroke="#C6CACD"
+                        StrokeJoin="Round"
+                        StrokeLineCap="Round"
+                        StrokeThickness="10"
+                        SweepAngle="360" />
+                </Panel>
+            </SplitView>
        </Grid>
    </Border>
 </UserControl>
--- a/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
@@ -7,7 +7,6 @@
    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels;assembly=Semi.Avalonia.Demo"
    d:DesignHeight="450"
    d:DesignWidth="800"
-    x:CompileBindings="True"
    x:DataType="vm:TabControlDemoViewModel"
    mc:Ignorable="d">
    <ScrollViewer>
--- a/demo/Semi.Avalonia.Demo/Pages/TabStripDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TabStripDemo.axaml
@@ -5,7 +5,6 @@
             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="Semi.Avalonia.Demo.Pages.TabStripDemo"
-             x:CompileBindings="True"
             x:DataType="vm:TabStripDemoViewModel">
    <Design.DataContext>
        <vm:TabStripDemoViewModel />
--- a/demo/Semi.Avalonia.Demo/Pages/ToggleButtonDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ToggleButtonDemo.axaml
@@ -1,98 +0,0 @@
-<UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.ToggleButtonDemo"
-    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">
-    <StackPanel Spacing="20">
-        <TextBlock Text="Toggle Button (Default)" />
-        <StackPanel Orientation="Horizontal" Spacing="20">
-            <ToggleButton>Default</ToggleButton>
-            <ToggleButton Classes="Primary">Primary</ToggleButton>
-            <ToggleButton Classes="Secondary">Secondary</ToggleButton>
-            <ToggleButton Classes="Tertiary">Tertiary</ToggleButton>
-            <ToggleButton Classes="Success">Success</ToggleButton>
-            <ToggleButton Classes="Warning">Warning</ToggleButton>
-            <ToggleButton Classes="Danger">Danger</ToggleButton>
-            <ToggleButton Classes="Danger" IsEnabled="False">Disabled</ToggleButton>
-        </StackPanel>
-        <TextBlock Text="Toggle Button Checked State" />
-        <StackPanel Orientation="Horizontal" Spacing="20">
-            <ToggleButton IsChecked="True">Default</ToggleButton>
-            <ToggleButton Classes="Primary" IsChecked="True">Primary</ToggleButton>
-            <ToggleButton Classes="Secondary" IsChecked="True">Secondary</ToggleButton>
-            <ToggleButton Classes="Tertiary" IsChecked="True">Tertiary</ToggleButton>
-            <ToggleButton Classes="Success" IsChecked="True">Success</ToggleButton>
-            <ToggleButton Classes="Warning" IsChecked="True">Warning</ToggleButton>
-            <ToggleButton Classes="Danger" IsChecked="True">Danger</ToggleButton>
-            <ToggleButton
-                Classes="Danger"
-                IsChecked="True"
-                IsEnabled="False">
-                Disabled
-            </ToggleButton>
-        </StackPanel>
-        <TextBlock Text="Toggle Button Three State" />
-        <StackPanel Orientation="Horizontal" Spacing="20">
-            <ToggleButton IsChecked="{x:Null}" IsThreeState="True">Default</ToggleButton>
-            <ToggleButton
-                Classes="Primary"
-                IsChecked="{x:Null}"
-                IsThreeState="True">
-                Primary
-            </ToggleButton>
-            <ToggleButton
-                Classes="Secondary"
-                IsChecked="{x:Null}"
-                IsThreeState="True">
-                Secondary
-            </ToggleButton>
-            <ToggleButton
-                Classes="Tertiary"
-                IsChecked="{x:Null}"
-                IsThreeState="True">
-                Tertiary
-            </ToggleButton>
-            <ToggleButton
-                Classes="Success"
-                IsChecked="{x:Null}"
-                IsThreeState="True">
-                Success
-            </ToggleButton>
-            <ToggleButton
-                Classes="Warning"
-                IsChecked="{x:Null}"
-                IsThreeState="True">
-                Warning
-            </ToggleButton>
-            <ToggleButton
-                Classes="Danger"
-                IsChecked="{x:Null}"
-                IsThreeState="True">
-                Danger
-            </ToggleButton>
-            <ToggleButton
-                Classes="Danger"
-                IsChecked="{x:Null}"
-                IsEnabled="False"
-                IsThreeState="True">
-                Disabled
-            </ToggleButton>
-        </StackPanel>
-        <TextBlock Text="Toggle Button Disabled State" />
-        <StackPanel Background="{DynamicResource SemiColorBackground1}" Orientation="Horizontal" Spacing="20">
-            <ToggleButton IsThreeState="True" IsEnabled="False">Default</ToggleButton>
-            <ToggleButton IsThreeState="True" IsEnabled="False" IsChecked="True">Checked</ToggleButton>
-            <ToggleButton IsThreeState="True" IsEnabled="False" IsChecked="{x:Null}">Indeterminate</ToggleButton>
-        </StackPanel>
-        <TextBlock Text="Toggle Button Size" />
-        <StackPanel Orientation="Horizontal" Spacing="20">
-            <ToggleButton Classes="Small" IsThreeState="True">Small</ToggleButton>
-            <ToggleButton IsThreeState="True">Default</ToggleButton>
-            <ToggleButton Classes="Large" IsThreeState="True">Large</ToggleButton>
-        </StackPanel>
-    </StackPanel>
-</UserControl>
--- a/demo/Semi.Avalonia.Demo/Pages/ToggleButtonDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/ToggleButtonDemo.axaml.cs
@@ -1,11 +0,0 @@
-using Avalonia.Controls;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class ToggleButtonDemo : UserControl
-{
-    public ToggleButtonDemo()
-    {
-        InitializeComponent();
-    }
-}
--- a/demo/Semi.Avalonia.Demo/Pages/TreeDataGridDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TreeDataGridDemo.axaml
@@ -0,0 +1,126 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+             xmlns:converters="clr-namespace:Semi.Avalonia.Demo.Converters"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Semi.Avalonia.Demo.Pages.TreeDataGridDemo"
+             x:DataType="vm:TreeDataGridDemoViewModel">
+    <UserControl.Resources>
+        <converters:FileIconConverter x:Key="FileIconConverter">
+            <StaticResource x:Key="file" ResourceKey="SemiIconFile" />
+            <StaticResource x:Key="folderOpen" ResourceKey="SemiIconFolderOpen" />
+            <StaticResource x:Key="folderClosed" ResourceKey="SemiIconFolder" />
+        </converters:FileIconConverter>
+    </UserControl.Resources>
+    <TabControl>
+        <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="{DynamicResource SemiColorFill0}" />
+                    </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
+                                    Theme="{StaticResource InnerPathIcon}"
+                                    Margin="8,0">
+                                    <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="{DynamicResource SemiColorFill0}" />
+                        </Style>
+                    </TreeDataGrid.Styles>
+                </TreeDataGrid>
+            </Grid>
+        </TabItem>
+    </TabControl>
+</UserControl>
--- a/demo/Semi.Avalonia.Demo/Pages/TreeDataGridDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/TreeDataGridDemo.axaml.cs
@@ -0,0 +1,22 @@
+using Avalonia.Controls;
+using Avalonia.Input;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class TreeDataGridDemo : UserControl
+{
+    public TreeDataGridDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new TreeDataGridDemoViewModel();
+    }
+
+    private void SelectedPath_KeyDown(object? sender, KeyEventArgs e)
+    {
+        if (e.Key == Key.Enter && DataContext is TreeDataGridDemoViewModel vm)
+        {
+            vm.FilesContext.SelectedPath = (sender as TextBox)?.Text;
+        }
+    }
+}
--- a/demo/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml
@@ -8,7 +8,6 @@
    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.Pages"
    d:DesignHeight="450"
    d:DesignWidth="800"
-    x:CompileBindings="True"
    x:DataType="vm:TreeViewVm"
    mc:Ignorable="d">

--- a/demo/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml.cs
@@ -21,33 +21,40 @@ public class TreeViewVm : ObservableObject

    public TreeViewVm()
    {
-        Items = new ObservableCollection<TreeViewItemVm>()
-        {
-            new TreeViewItemVm() { Name = "Item 1", Id = "1" },
-            new TreeViewItemVm() { Name = "Item 2", Id = "2" },
-            new TreeViewItemVm()
+        Items =
+        [
+            new TreeViewItemVm { Name = "Item 1", Id = "1" },
+            new TreeViewItemVm { Name = "Item 2", Id = "2" },
+            new TreeViewItemVm
            {
-                Name = "Item 3", Id = "3", Items = new ObservableCollection<TreeViewItemVm>()
-                {
-                    new TreeViewItemVm() { Name = "Item 3.1", Id = "3.1" },
-                    new TreeViewItemVm() { Name = "Item 3.2", Id = "3.2" },
-                    new TreeViewItemVm() { Name = "Item 3.3", Id = "3.3" },
-                },
-            },
-        };
+                Name = "Item 3", Id = "3", Items =
+                [
+                    new TreeViewItemVm { Name = "Item 3.1", Id = "3.1" },
+                    new TreeViewItemVm { Name = "Item 3.2", Id = "3.2" },
+                    new TreeViewItemVm { Name = "Item 3.3", Id = "3.3" }
+                ],
+            }

-        MultipleLevelItems = new();
-        for (int i = 1; i < 6; i++)
+        ];
+
+        MultipleLevelItems = [];
+        for (var i = 1; i < 6; i++)
        {
-            FirstItem firstItem = new FirstItem { Id = i, Name = $"FirstItem {i}" };
-            firstItem.SecondItems = new();
-            for (int j = 1; j < 6; j++)
+            var firstItem = new FirstItem
            {
-                SecondItem secondItem = new SecondItem { Id = j, Name = $"SecondItem {j}" };
-                secondItem.ThirdItemItems = new();
-                for (int k = 1; k < 6; k++)
+                Id = i, Name = $"FirstItem {i}",
+                SecondItems = []
+            };
+            for (var j = 1; j < 6; j++)
+            {
+                var secondItem = new SecondItem
                {
-                    ThirdItem thirdItem = new ThirdItem { Id = k, Name = $"ThirdItem {k}" };
+                    Id = j, Name = $"SecondItem {j}",
+                    ThirdItemItems = []
+                };
+                for (var k = 1; k < 6; k++)
+                {
+                    var thirdItem = new ThirdItem { Id = k, Name = $"ThirdItem {k}" };
                    secondItem.ThirdItemItems.Add(thirdItem);
                }

@@ -61,9 +68,9 @@ public class TreeViewVm : ObservableObject

 public partial class TreeViewItemVm : ObservableObject
 {
-    public ObservableCollection<TreeViewItemVm> Items { get; set; }
-    public string Name { get; set; }
-    public string Id { get; set; }
+    public ObservableCollection<TreeViewItemVm> Items { get; set; } = [];
+    public string? Name { get; set; }
+    public string? Id { get; set; }
 }

 public class ItemBase
--- a/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml
@@ -0,0 +1,104 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+             xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Semi.Avalonia.Demo.Pages.VariablesDemo"
+             x:DataType="vm:VariablesDemoViewModel">
+    <Design.DataContext>
+        <vm:VariablesDemoViewModel />
+    </Design.DataContext>
+    <Grid RowDefinitions="Auto, *">
+        <TextBox
+            Grid.Row="0"
+            Width="600"
+            Margin="8"
+            Classes="ClearButton"
+            Text="{Binding SearchText}"
+            Watermark="Input Variable Category/ResourceKey/Type/Value/Description" />
+
+        <DataGrid
+            Grid.Row="1"
+            Margin="8"
+            CanUserReorderColumns="True"
+            CanUserResizeColumns="True"
+            CanUserSortColumns="True"
+            HeadersVisibility="All"
+            IsReadOnly="True"
+            ItemsSource="{Binding GridData}">
+            <DataGrid.Columns>
+                <DataGridTemplateColumn
+                    Width="300"
+                    x:DataType="vm:VariableItem"
+                    Header="ResourceKey">
+                    <DataGridTemplateColumn.CellTemplate>
+                        <DataTemplate DataType="vm:VariableItem">
+                            <SelectableTextBlock
+                                Margin="12,0"
+                                VerticalAlignment="Center"
+                                Text="{Binding ResourceKey}" />
+                        </DataTemplate>
+                    </DataGridTemplateColumn.CellTemplate>
+                </DataGridTemplateColumn>
+                <DataGridTemplateColumn
+                    Width="200"
+                    x:DataType="vm:VariableItem"
+                    Header="Type">
+                    <DataGridTemplateColumn.CellTemplate>
+                        <DataTemplate DataType="vm:VariableItem">
+                            <SelectableTextBlock
+                                Margin="12,0"
+                                VerticalAlignment="Center"
+                                Text="{Binding Type.Name}" />
+                        </DataTemplate>
+                    </DataGridTemplateColumn.CellTemplate>
+                </DataGridTemplateColumn>
+                <DataGridTemplateColumn
+                    Width="200"
+                    x:DataType="vm:VariableItem"
+                    Header="Value">
+                    <DataGridTemplateColumn.CellTemplate>
+                        <DataTemplate DataType="vm:VariableItem">
+                            <SelectableTextBlock
+                                Margin="12,0"
+                                VerticalAlignment="Center"
+                                Text="{Binding Value}"
+                                TextWrapping="Wrap" />
+                        </DataTemplate>
+                    </DataGridTemplateColumn.CellTemplate>
+                </DataGridTemplateColumn>
+                <DataGridTemplateColumn
+                    Width="*"
+                    x:DataType="vm:VariableItem"
+                    Header="Description">
+                    <DataGridTemplateColumn.CellTemplate>
+                        <DataTemplate DataType="vm:VariableItem">
+                            <SelectableTextBlock
+                                Margin="12,0"
+                                VerticalAlignment="Center"
+                                Text="{Binding Description}"
+                                TextWrapping="Wrap" />
+                        </DataTemplate>
+                    </DataGridTemplateColumn.CellTemplate>
+                </DataGridTemplateColumn>
+                <DataGridTemplateColumn
+                    Width="100"
+                    x:DataType="vm:VariableItem"
+                    Header="CopyText"
+                    SortMemberPath="Duration">
+                    <DataGridTemplateColumn.CellTemplate>
+                        <DataTemplate DataType="vm:VariableItem">
+                            <Button
+                                Command="{Binding $parent[pages:VariablesDemo].Copy}"
+                                CommandParameter="{Binding CopyText}"
+                                Theme="{DynamicResource  IconBorderlessButton}"
+                                Content="{StaticResource SemiIconCopy}" />
+                        </DataTemplate>
+                    </DataGridTemplateColumn.CellTemplate>
+                </DataGridTemplateColumn>
+            </DataGrid.Columns>
+        </DataGrid>
+    </Grid>
+</UserControl>
--- a/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml.cs
@@ -0,0 +1,24 @@
+using System.Threading.Tasks;
+using Avalonia.Controls;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class VariablesDemo : UserControl
+{
+    public VariablesDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new VariablesDemoViewModel();
+    }
+
+    public async Task Copy(object? o)
+    {
+        if (o is null) return;
+        var toplevel = TopLevel.GetTopLevel(this);
+        if (toplevel?.Clipboard is { } c)
+        {
+            await c.SetTextAsync(o.ToString());
+        }
+    }
+}
--- a/demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj
+++ b/demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj
@@ -3,6 +3,7 @@
        <TargetFramework>net8.0</TargetFramework>
        <Nullable>enable</Nullable>
        <LangVersion>latest</LangVersion>
+        <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
    </PropertyGroup>

    <ItemGroup>
@@ -10,21 +11,22 @@
    </ItemGroup>

    <ItemGroup>
-        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
-<!--        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(DataGridVersion)"/>-->
+        <PackageReference Include="Avalonia"/>
+        <PackageReference Include="Avalonia.Controls.ColorPicker"/>
+        <PackageReference Include="Avalonia.Controls.DataGrid"/>
        <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)">
+        <PackageReference Include="Avalonia.Diagnostics">
            <IncludeAssets Condition="'$(Configuration)' != 'Debug'">None</IncludeAssets>
            <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>
        </PackageReference>
-        <PackageReference Include="CommunityToolkit.Mvvm" Version="$(CommunityToolkitVersion)"/>
+        <PackageReference Include="CommunityToolkit.Mvvm"/>
+        <PackageReference Include="Irihi.Avalonia.Shared"/>
    </ItemGroup>

    <ItemGroup>
        <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj"/>
        <ProjectReference Include="..\..\src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj"/>
-<!--        <ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj"/>-->
-<!--        <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj"/>-->
+        <ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj"/>
+        <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj"/>
    </ItemGroup>
 </Project>
--- a/demo/Semi.Avalonia.Demo/Themes/ColorDetailControl.axaml
+++ b/demo/Semi.Avalonia.Demo/Themes/ColorDetailControl.axaml
@@ -1,8 +1,7 @@
 <ResourceDictionary
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
-    x:CompileBindings="True">
+    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls">
    <ControlTheme x:Key="{x:Type controls:ColorDetailControl}" TargetType="controls:ColorDetailControl">
        <Setter Property="Template">
            <ControlTemplate TargetType="controls:ColorDetailControl">
--- a/demo/Semi.Avalonia.Demo/Themes/ColorItemControl.axaml
+++ b/demo/Semi.Avalonia.Demo/Themes/ColorItemControl.axaml
@@ -1,8 +1,7 @@
 <ResourceDictionary
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:Semi.Avalonia.Demo.Controls"
-    x:CompileBindings="True">
+    xmlns:controls="using:Semi.Avalonia.Demo.Controls">
    <Design.PreviewWith>
        <controls:ColorItemControl />
    </Design.PreviewWith>
--- a/demo/Semi.Avalonia.Demo/Themes/FunctionalColorGroupControl.axaml
+++ b/demo/Semi.Avalonia.Demo/Themes/FunctionalColorGroupControl.axaml
@@ -0,0 +1,152 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+    x:DataType="viewModels:FunctionalColorGroupViewModel">
+    <ControlTheme x:Key="{x:Type controls:FunctionalColorGroupControl}" TargetType="controls:FunctionalColorGroupControl">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="controls:FunctionalColorGroupControl">
+                <Grid RowDefinitions="Auto, *">
+                    <SelectableTextBlock
+                        Grid.Row="0"
+                        Margin="0,16,0,0"
+                        Classes="H3"
+                        Text="{TemplateBinding Title}"
+                        Theme="{DynamicResource TitleSelectableTextBlock}" />
+                    <TabControl Grid.Row="1">
+                        <TabItem Header="Light">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightColors}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="70" Header="Color">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <controls:ColorItemControl
+                                                    Width="40"
+                                                    Height="20"
+                                                    Background="{Binding Brush}"
+                                                    CornerRadius="3" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="100" Header="Hex">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Hex}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="80" Header="Opacity">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Brush.Opacity}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ColorItemViewModel"
+                                        Binding="{Binding ColorDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Description" />
+                                    <DataGridTemplateColumn Width="100" Header="CopyText">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <Button
+                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
+                                                    CommandParameter="{Binding CopyText}"
+                                                    Theme="{DynamicResource  IconBorderlessButton}"
+                                                    Content="{StaticResource SemiIconCopy}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                        <TabItem Header="Dark">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkColors}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="70" Header="Color">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <controls:ColorItemControl
+                                                    Width="40"
+                                                    Height="20"
+                                                    Background="{Binding Brush}"
+                                                    CornerRadius="3" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="100" Header="Hex">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Hex}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="80" Header="Opacity">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Brush.Opacity}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ColorItemViewModel"
+                                        Binding="{Binding ColorDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Description" />
+                                    <DataGridTemplateColumn Width="100" Header="CopyText">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <Button
+                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
+                                                    CommandParameter="{Binding CopyText}"
+                                                    Theme="{DynamicResource  IconBorderlessButton}"
+                                                    Content="{StaticResource SemiIconCopy}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                    </TabControl>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>
--- a/demo/Semi.Avalonia.Demo/Themes/ShadowGroupControl.axaml
+++ b/demo/Semi.Avalonia.Demo/Themes/ShadowGroupControl.axaml
@@ -0,0 +1,110 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+    x:DataType="viewModels:ShadowGroupViewModel">
+    <ControlTheme x:Key="{x:Type controls:ShadowGroupControl}" TargetType="controls:ShadowGroupControl">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="controls:ShadowGroupControl">
+                <Grid RowDefinitions="Auto, *">
+                    <SelectableTextBlock
+                        Grid.Row="0"
+                        Margin="0,16,0,0"
+                        Classes="H3"
+                        Text="{TemplateBinding Title}"
+                        Theme="{DynamicResource TitleSelectableTextBlock}" />
+                    <TabControl Grid.Row="1">
+                        <TabItem Header="Light">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightShadows}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding BoxShadowValue}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ShadowItemViewModel"
+                                        Binding="{Binding ShadowDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Description" />
+                                    <DataGridTemplateColumn Width="100" Header="CopyText">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <Button
+                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
+                                                    CommandParameter="{Binding CopyText}"
+                                                    Theme="{DynamicResource  IconBorderlessButton}"
+                                                    Content="{StaticResource SemiIconCopy}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                        <TabItem Header="Dark">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkShadows}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding BoxShadowValue}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ShadowItemViewModel"
+                                        Binding="{Binding ShadowDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Description" />
+                                    <DataGridTemplateColumn Width="100" Header="CopyText">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <Button
+                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
+                                                    CommandParameter="{Binding CopyText}"
+                                                    Theme="{DynamicResource  IconBorderlessButton}"
+                                                    Content="{StaticResource SemiIconCopy}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                    </TabControl>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>
--- a/demo/Semi.Avalonia.Demo/Themes/_index.axaml
+++ b/demo/Semi.Avalonia.Demo/Themes/_index.axaml
@@ -2,6 +2,8 @@
    <ResourceDictionary.MergedDictionaries>
        <ResourceInclude Source="ColorDetailControl.axaml" />
        <ResourceInclude Source="ColorItemControl.axaml" />
+        <ResourceInclude Source="FunctionalColorGroupControl.axaml" />
+        <ResourceInclude Source="ShadowGroupControl.axaml" />
        <ResourceInclude Source="ToggleSwitch.axaml" />
    </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>
--- a/demo/Semi.Avalonia.Demo/ViewModels/ApplicationViewModel.cs
+++ b/demo/Semi.Avalonia.Demo/ViewModels/ApplicationViewModel.cs
@@ -1,12 +1,37 @@
 using Avalonia;
+using Avalonia.Controls;
 using Avalonia.Controls.ApplicationLifetimes;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Input;
+using CommunityToolkit.Mvvm.Messaging;

 namespace Semi.Avalonia.Demo.ViewModels;

 public partial class ApplicationViewModel : ObservableObject
 {
+    [RelayCommand]
+    private void Activate()
+    {
+        if (Application.Current?.ApplicationLifetime is not IClassicDesktopStyleApplicationLifetime desktop) return;
+        var mainWindow = desktop.MainWindow;
+        if (mainWindow is not null && !mainWindow.IsActive)
+        {
+            if (mainWindow.WindowState is WindowState.Minimized)
+            {
+                mainWindow.WindowState = WindowState.Normal;
+            }
+
+            mainWindow.Activate();
+        }
+    }
+
+    [RelayCommand]
+    private void JumpTo(string header)
+    {
+        Activate();
+        WeakReferenceMessenger.Default.Send(header, "JumpTo");
+    }
+
    [RelayCommand]
    private void Exit()
    {
--- a/demo/Semi.Avalonia.Demo/ViewModels/DataGridDemoViewModel.cs
+++ b/demo/Semi.Avalonia.Demo/ViewModels/DataGridDemoViewModel.cs
@@ -0,0 +1,154 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using Avalonia.Collections;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+
+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 RelayCommand AddCommand { 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
+        }));
+        AddCommand = new RelayCommand(Add);
+    }
+
+    private void Add()
+    {
+        GridData3.Add(new SongViewModel());
+    }
+}
+
+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 =>
+    [
+        "A.S.I.A",
+        "饕餮人间",
+        "七步咙咚呛",
+        "大惊小怪",
+        "The ONE",
+        "以梦为马 (壮志骄阳版)",
+        "emo了",
+        "一眼万年",
+        "冲刺吧",
+        "爱的赏味期限",
+        "COSMIC ANTHEM / 手紙",
+        "世界晚安",
+        "明年也要好好长大",
+        "320万年前",
+        "W.O.R.L.D."
+    ];
+
+    public static List<Song> Songs =>
+    [
+        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 partial class SongViewModel : ObservableObject
+{
+    [ObservableProperty] private string? _title;
+    [ObservableProperty] private string? _artist;
+    [ObservableProperty] private string? _album;
+    [ObservableProperty] private int _countOfComment;
+    [ObservableProperty] private bool? _isSelected;
+}
--- a/demo/Semi.Avalonia.Demo/ViewModels/IconDemoViewModel.cs
+++ b/demo/Semi.Avalonia.Demo/ViewModels/IconDemoViewModel.cs
@@ -1,4 +1,5 @@
-using System.Collections.Generic;
+using System;
+using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Linq;
 using Avalonia.Controls;
@@ -9,20 +10,21 @@ namespace Semi.Avalonia.Demo.ViewModels;

 public partial class IconDemoViewModel : ObservableObject
 {
-    private readonly IResourceDictionary? _resources = new Icons();
+    private readonly Icons _resources = new();

-    private readonly Dictionary<string, IconItem> _filledIcons = new();
+    private readonly Dictionary<string, IconItem> _fillIcons = new();
    private readonly Dictionary<string, IconItem> _strokedIcons = new();
+    private readonly Dictionary<string, IconItem> _aiIcons = new();

    [ObservableProperty] private string? _searchText;

-    public ObservableCollection<IconItem> FilteredFilledIcons { get; set; } = [];
+    public ObservableCollection<IconTab> IconTabs { get; } = [];
+    public ObservableCollection<IconItem> FilteredFillIcons { get; set; } = [];
    public ObservableCollection<IconItem> FilteredStrokedIcons { get; set; } = [];
+    public ObservableCollection<IconItem> FilteredAIIcons { get; set; } = [];

    public void InitializeResources()
    {
-        if (_resources is null) return;
-
        foreach (var provider in _resources.MergedDictionaries)
        {
            if (provider is not ResourceDictionary dic) continue;
@@ -30,40 +32,60 @@ public partial class IconDemoViewModel : ObservableObject
            foreach (var key in dic.Keys)
            {
                if (dic[key] is not Geometry geometry) continue;
+                var resourceKey = key.ToString() ?? string.Empty;
                var icon = new IconItem
                {
-                    ResourceKey = key.ToString(),
+                    ResourceKey = resourceKey,
                    Geometry = geometry
                };

-                if (key.ToString().EndsWith("Stroked"))
-                    _strokedIcons[key.ToString().ToLowerInvariant()] = icon;
+                if (resourceKey.StartsWith("SemiIconAI"))
+                    _aiIcons[resourceKey] = icon;
+                else if (resourceKey.EndsWith("Stroked", StringComparison.InvariantCultureIgnoreCase))
+                    _strokedIcons[resourceKey] = icon;
                else
-                    _filledIcons[key.ToString().ToLowerInvariant()] = icon;
+                    _fillIcons[resourceKey] = icon;
            }
        }

        OnSearchTextChanged(string.Empty);
+
+        IconTabs.Clear();
+        IconTabs.Add(new IconTab("Fill Icons", FilteredFillIcons));
+        IconTabs.Add(new IconTab("Stroked Icons", FilteredStrokedIcons));
+        IconTabs.Add(new IconTab("AI Icons", FilteredAIIcons));
    }

    partial void OnSearchTextChanged(string? value)
    {
-        var search = value?.ToLowerInvariant() ?? string.Empty;
+        var search = string.IsNullOrWhiteSpace(value) ? string.Empty : value.Trim();

-        FilteredFilledIcons.Clear();
-        foreach (var pair in _filledIcons.Where(i => i.Key.Contains(search)))
+        FilteredFillIcons.Clear();
+        foreach (var pair in _fillIcons.Where(kv => kv.Key.Contains(search, StringComparison.InvariantCultureIgnoreCase)))
        {
-            FilteredFilledIcons.Add(pair.Value);
+            FilteredFillIcons.Add(pair.Value);
        }

        FilteredStrokedIcons.Clear();
-        foreach (var pair in _strokedIcons.Where(i => i.Key.Contains(search)))
+        foreach (var pair in _strokedIcons.Where(kv => kv.Key.Contains(search, StringComparison.InvariantCultureIgnoreCase)))
        {
            FilteredStrokedIcons.Add(pair.Value);
        }
+
+        FilteredAIIcons.Clear();
+        foreach (var pair in _aiIcons.Where(kv => kv.Key.Contains(search, StringComparison.InvariantCultureIgnoreCase)))
+        {
+            FilteredAIIcons.Add(pair.Value);
+        }
    }
 }

+public class IconTab(string header, ObservableCollection<IconItem> iconItems)
+{
+    public string Header { get; set; } = header;
+    public ObservableCollection<IconItem> IconItems { get; set; } = iconItems;
+}
+
 public class IconItem
 {
    public string? ResourceKey { get; set; }
--- a/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs
+++ b/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs
@@ -19,7 +19,7 @@ public partial class PaletteDemoViewModel : ObservableObject
        "Red", "Pink", "Purple", "Violet", "Indigo",
        "Blue", "LightBlue", "Cyan", "Teal", "Green",
        "LightGreen", "Lime", "Yellow", "Amber", "Orange",
-        "Grey"
+        "Grey", "AIPurple"
    ];

    private readonly IResourceDictionary? _lightResourceDictionary;
@@ -61,6 +61,38 @@ public partial class PaletteDemoViewModel : ObservableObject
            s.Initialize(_darkResourceDictionary, color, false);
            DarkLists.Add(s);
        }
+        
+        InitializeAIGeneralGradients();
+    }
+
+    private void InitializeAIGeneralGradients()
+    {
+        if (_lightResourceDictionary is null || _darkResourceDictionary is null) return;
+
+        ColorListViewModel lightGradients = new ColorListViewModel { SeriesName = "AI General" };
+        ColorListViewModel darkGradients = new ColorListViewModel { SeriesName = "AI General" };
+
+        for (var i = 0; i < 10; i++)
+        {
+            var key = $"SemiAIGeneral{i}";
+            
+            if (_lightResourceDictionary.TryGetValue(key, out var lightValue) && lightValue is IBrush lightBrush)
+            {
+                var name = $"AI General {i}";
+                var item = new ColorItemViewModel(name, lightBrush, key, true, i);
+                lightGradients.Color.Add(item);
+            }
+
+            if (_darkResourceDictionary.TryGetValue(key, out var darkValue) && darkValue is IBrush darkBrush)
+            {
+                var name = $"AI General {i}";
+                var item = new ColorItemViewModel(name, darkBrush, key, false, i);
+                darkGradients.Color.Add(item);
+            }
+        }
+        
+        LightLists.Add(lightGradients);
+        DarkLists.Add(darkGradients);
    }

    private void InitializeFunctionalColors()
@@ -79,6 +111,12 @@ public partial class PaletteDemoViewModel : ObservableObject
            "Warning", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.WarningTokens));
        FunctionalColors.Add(new FunctionalColorGroupViewModel(
            "Danger", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DangerTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel(
+            "AI General", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.AIGeneralTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel(
+            "AI Purple", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.AIPurpleTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel(
+            "AI Background", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.AIBackgroundTokens));
        FunctionalColors.Add(new FunctionalColorGroupViewModel(
            "Text", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TextTokens));
        FunctionalColors.Add(new FunctionalColorGroupViewModel(
@@ -142,14 +180,24 @@ public partial class ColorItemViewModel : ObservableObject
         <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
         """;

-    public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light,
+    public ColorItemViewModel(string colorDisplayName, IBrush brush, string resourceKey, bool light,
        int index)
    {
        ColorDisplayName = colorDisplayName;
        Brush = brush;
        ResourceKey = resourceKey;
-        var hex = ColorConverter.ToHex.Convert(brush.Color, typeof(string), false, CultureInfo.InvariantCulture);
-        Hex = hex as string ?? string.Empty;
+        
+        // Only calculate hex for solid color brushes
+        if (brush is ISolidColorBrush solidBrush)
+        {
+            var hex = ColorConverter.ToHex.Convert(solidBrush.Color, typeof(string), false, CultureInfo.InvariantCulture);
+            Hex = hex as string ?? string.Empty;
+        }
+        else
+        {
+            Hex = string.Empty;
+        }
+        
        if ((light && index < 5) || (!light && index >= 5))
        {
            TextBrush = Brushes.Black;
@@ -175,7 +223,7 @@ public partial class FunctionalColorGroupViewModel : ObservableObject
        {
            if (lightDictionary?.TryGetValue(key, out var lightValue) ?? false)
            {
-                if (lightValue is ISolidColorBrush lightBrush)
+                if (lightValue is IBrush lightBrush)
                {
                    LightColors.Add(new ColorItemViewModel(name, lightBrush, key, true, 0));
                }
@@ -183,7 +231,7 @@ public partial class FunctionalColorGroupViewModel : ObservableObject

            if (darkDictionary?.TryGetValue(key, out var darkValue) ?? false)
            {
-                if (darkValue is ISolidColorBrush darkBrush)
+                if (darkValue is IBrush darkBrush)
                {
                    DarkColors.Add(new ColorItemViewModel(name, darkBrush, key, true, 0));
                }
--- a/demo/Semi.Avalonia.Demo/ViewModels/SplitViewDemoViewModel.cs
+++ b/demo/Semi.Avalonia.Demo/ViewModels/SplitViewDemoViewModel.cs
@@ -26,4 +26,12 @@ public class SplitViewDemoViewModel : ObservableObject
        SplitViewDisplayMode.Overlay,
        SplitViewDisplayMode.CompactOverlay,
    ];
+
+    public static ObservableCollection<SplitViewPanePlacement> Placements { get; set; } =
+    [
+        SplitViewPanePlacement.Left,
+        SplitViewPanePlacement.Right,
+        SplitViewPanePlacement.Top,
+        SplitViewPanePlacement.Bottom
+    ];
 }
--- a/demo/Semi.Avalonia.Demo/ViewModels/TreeDataGridDemo/FilesPageViewModel.cs
+++ b/demo/Semi.Avalonia.Demo/ViewModels/TreeDataGridDemo/FilesPageViewModel.cs
@@ -0,0 +1,363 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using System.Diagnostics;
+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.Demo.ViewModels;
+
+public partial class FilesPageViewModel : ObservableObject
+{
+    public IList<string> Drives { get; }
+    public HierarchicalTreeDataGridSource<FileNodeViewModel> Source { get; }
+    [ObservableProperty] private string _selectedDrive;
+    private string? _selectedPath;
+    [ObservableProperty] private FileNodeViewModel? _root;
+
+    public string? SelectedPath
+    {
+        get => _selectedPath;
+        set => SetSelectedPath(value);
+    }
+
+    partial void OnSelectedDriveChanged(string value)
+    {
+        Root = new FileNodeViewModel(value, true, true);
+        if (Source is not null)
+        {
+            Source.Items = [Root];
+        }
+    }
+
+    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>([])
+        {
+            Columns =
+            {
+                new CheckBoxColumn<FileNodeViewModel>(
+                    null,
+                    x => x.IsChecked,
+                    (o, v) => o.IsChecked = v,
+                    options: new CheckBoxColumnOptions<FileNodeViewModel>
+                    {
+                        CanUserResizeColumn = false,
+                    }),
+                new HierarchicalExpanderColumn<FileNodeViewModel>(
+                    new TemplateColumn<FileNodeViewModel>(
+                        "Name",
+                        "FileNameCell",
+                        "FileNameEditCell",
+                        new GridLength(1, GridUnitType.Star),
+                        new TemplateColumnOptions<FileNodeViewModel>
+                        {
+                            CompareAscending = FileNodeViewModel.SortAscending(vm => vm.Name),
+                            CompareDescending = FileNodeViewModel.SortDescending(vm => vm.Name),
+                            IsTextSearchEnabled = true,
+                            TextSearchValueSelector = vm => vm.Name
+                        }),
+                    vm => vm.Children,
+                    vm => vm.HasChildren,
+                    vm => vm.IsExpanded),
+                new TextColumn<FileNodeViewModel, long?>(
+                    "Size",
+                    vm => vm.Size,
+                    options: new TextColumnOptions<FileNodeViewModel>
+                    {
+                        CompareAscending = FileNodeViewModel.SortAscending(x => x.Size),
+                        CompareDescending = FileNodeViewModel.SortDescending(x => x.Size),
+                    }),
+                new TextColumn<FileNodeViewModel, DateTimeOffset?>(
+                    "Modified",
+                    x => x.Modified,
+                    options: new TextColumnOptions<FileNodeViewModel>
+                    {
+                        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)
+            Trace.WriteLine($"Deselected '{i?.Path}'");
+        foreach (var i in e.SelectedItems)
+            Trace.WriteLine($"Selected '{i?.Path}'");
+    }
+    private void SetSelectedPath(string? path)
+    {
+        if (string.IsNullOrEmpty(path))
+        {
+            Source.RowSelection!.Clear();
+            return;
+        }
+
+        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];
+
+            var 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.Items = [Root!];
+        Source.RowSelection!.SelectedIndex = index;
+    }
+}
+
+public partial class FileNodeViewModel : ObservableObject, IEditableObject
+{
+    [ObservableProperty] private string _path;
+    [ObservableProperty] private string _name;
+    private string? _undoName;
+    [ObservableProperty] private long? _size;
+    [ObservableProperty] private DateTimeOffset? _modified;
+    private FileSystemWatcher? _watcher;
+    private ObservableCollection<FileNodeViewModel>? _children;
+    [ObservableProperty] private bool _hasChildren = true;
+    [ObservableProperty] 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 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 ?? string.Empty;
+    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);
+                    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.Demo/ViewModels/TreeDataGridDemo/SongsPageViewModel.cs
+++ b/demo/Semi.Avalonia.Demo/ViewModels/TreeDataGridDemo/SongsPageViewModel.cs
@@ -0,0 +1,54 @@
+using System.Collections.ObjectModel;
+using System.Linq;
+using Avalonia.Controls;
+using Avalonia.Controls.Models.TreeDataGrid;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class SongsPageViewModel : ObservableObject
+{
+    public FlatTreeDataGridSource<SongViewModel> Songs { get; }
+
+    public SongsPageViewModel()
+    {
+        var 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)),
+            }
+        };
+    }
+}
--- a/demo/Semi.Avalonia.Demo/ViewModels/TreeDataGridDemo/TreeDataGridDemoViewModel.cs
+++ b/demo/Semi.Avalonia.Demo/ViewModels/TreeDataGridDemo/TreeDataGridDemoViewModel.cs
@@ -0,0 +1,9 @@
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class TreeDataGridDemoViewModel : ObservableObject
+{
+    public SongsPageViewModel SongsContext { get; } = new();
+    public FilesPageViewModel FilesContext { get; } = new();
+}
--- a/demo/Semi.Avalonia.Demo/ViewModels/VariablesDemoViewModel.cs
+++ b/demo/Semi.Avalonia.Demo/ViewModels/VariablesDemoViewModel.cs
@@ -0,0 +1,151 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using Avalonia;
+using Avalonia.Collections;
+using Avalonia.Controls;
+using Avalonia.Media;
+using CommunityToolkit.Mvvm.ComponentModel;
+using Semi.Avalonia.Tokens;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public partial class VariablesDemoViewModel : ObservableObject
+{
+    public DataGridCollectionView GridData { get; set; }
+    [ObservableProperty] private string _searchText = string.Empty;
+
+    public VariablesDemoViewModel()
+    {
+        IResourceDictionary dictionary = new Variables();
+        foreach (var token in Tokens)
+        {
+            if (token.ResourceKey is not null && dictionary.TryGetValue(token.ResourceKey, out var value))
+            {
+                token.Type = value?.GetType();
+                token.Value = GetValueString(value);
+            }
+        }
+
+        GridData = new DataGridCollectionView(Tokens);
+        GridData.GroupDescriptions.Add(new DataGridPathGroupDescription(nameof(VariableItem.Category)));
+    }
+
+    private static string? GetValueString(object? value)
+    {
+        if (value is null) return string.Empty;
+
+        return value switch
+        {
+            double d => d.ToString(CultureInfo.InvariantCulture),
+            CornerRadius c => c.IsUniform ? $"{c.TopLeft}" : c.ToString(),
+            Thickness t => t.IsUniform ? $"{t.Left}" : t.ToString(),
+            FontWeight fontWeight => Convert.ToInt32(fontWeight).ToString(),
+            FontFamily fontFamily => fontFamily.FamilyNames.ToString(),
+            _ => value.ToString()
+        };
+    }
+
+    partial void OnSearchTextChanged(string value)
+    {
+        if (string.IsNullOrWhiteSpace(value))
+        {
+            GridData.Filter = _ => true;
+            GridData.Refresh();
+            return;
+        }
+
+        var search = value.Trim();
+        GridData.Filter = item =>
+        {
+            if (item is not VariableItem variableItem) return false;
+            return (variableItem.Category?.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false) ||
+                   (variableItem.ResourceKey?.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false) ||
+                   (variableItem.Value?.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false) ||
+                   (variableItem.Type?.Name.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false) ||
+                   (variableItem.Description?.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false);
+        };
+        GridData.Refresh();
+    }
+
+    private static List<VariableItem> Tokens { get; set; } =
+    [
+        new("Height", "SemiHeightControlSmall"),
+        new("Height", "SemiHeightControlDefault"),
+        new("Height", "SemiHeightControlLarge"),
+        new("Icon Size", "SemiWidthIconExtraSmall"),
+        new("Icon Size", "SemiWidthIconSmall"),
+        new("Icon Size", "SemiWidthIconMedium"),
+        new("Icon Size", "SemiWidthIconLarge"),
+        new("Icon Size", "SemiWidthIconExtraLarge"),
+        new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingExtraSmall"),
+        new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingSmall"),
+        new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingMedium"),
+        new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingLarge"),
+        new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingFull"),
+        new("Border CornerRadius", "SemiBorderRadiusExtraSmall"),
+        new("Border CornerRadius", "SemiBorderRadiusSmall"),
+        new("Border CornerRadius", "SemiBorderRadiusMedium"),
+        new("Border CornerRadius", "SemiBorderRadiusLarge"),
+        new("Border CornerRadius", "SemiBorderRadiusFull"),
+        new("Border Spacing", "SemiBorderSpacing"),
+        new("Border Spacing", "SemiBorderSpacingControl"),
+        new("Border Spacing", "SemiBorderSpacingControlFocus"),
+        new("Border Thickness", "SemiBorderThickness"),
+        new("Border Thickness", "SemiBorderThicknessControl"),
+        new("Border Thickness", "SemiBorderThicknessControlFocus"),
+        new("Spacing", "SemiSpacingNone"),
+        new("Spacing", "SemiSpacingSuperTight"),
+        new("Spacing", "SemiSpacingExtraTight"),
+        new("Spacing", "SemiSpacingTight"),
+        new("Spacing", "SemiSpacingBaseTight"),
+        new("Spacing", "SemiSpacingBase"),
+        new("Spacing", "SemiSpacingBaseLoose"),
+        new("Spacing", "SemiSpacingLoose"),
+        new("Spacing", "SemiSpacingExtraLoose"),
+        new("Spacing", "SemiSpacingSuperLoose"),
+        new("Thickness", "SemiThicknessNone"),
+        new("Thickness", "SemiThicknessSuperTight"),
+        new("Thickness", "SemiThicknessExtraTight"),
+        new("Thickness", "SemiThicknessTight"),
+        new("Thickness", "SemiThicknessBaseTight"),
+        new("Thickness", "SemiThicknessBase"),
+        new("Thickness", "SemiThicknessBaseLoose"),
+        new("Thickness", "SemiThicknessLoose"),
+        new("Thickness", "SemiThicknessExtraLoose"),
+        new("Thickness", "SemiThicknessSuperLoose"),
+        new("FontSize", "SemiFontSizeSmall"),
+        new("FontSize", "SemiFontSizeRegular"),
+        new("FontSize", "SemiFontSizeHeader6"),
+        new("FontSize", "SemiFontSizeHeader5"),
+        new("FontSize", "SemiFontSizeHeader4"),
+        new("FontSize", "SemiFontSizeHeader3"),
+        new("FontSize", "SemiFontSizeHeader2"),
+        new("FontSize", "SemiFontSizeHeader1"),
+        new("FontWeight", "SemiFontWeightLight"),
+        new("FontWeight", "SemiFontWeightRegular"),
+        new("FontWeight", "SemiFontWeightBold"),
+        new("FontFamily", "SemiFontFamilyRegular"),
+    ];
+}
+
+public class VariableItem()
+{
+    public string? Category { get; set; }
+    public string? ResourceKey { get; set; }
+    public Type? Type { get; set; }
+    public string? Value { get; set; }
+    public string? Description { get; set; }
+
+    public VariableItem(string category, string resourceKey, string description = "") : this()
+    {
+        Category = category;
+        ResourceKey = resourceKey;
+        Description = description;
+    }
+
+    public string CopyText =>
+        $"""
+         <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
+         """;
+}
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -8,7 +8,6 @@
    xmlns:views="clr-namespace:Semi.Avalonia.Demo.Views"
    d:DesignHeight="450"
    d:DesignWidth="800"
-    x:CompileBindings="True"
    x:DataType="views:MainViewModel"
    mc:Ignorable="d">
    <UserControl.Resources>
@@ -117,15 +116,15 @@
            <TabItem
                Theme="{DynamicResource CategoryTabItem}"
                Header="Resource Browser" />
-            <!-- <TabItem Header="Palette"> -->
-            <!--     <pages:PaletteDemo /> -->
-            <!-- </TabItem> -->
-            <!-- <TabItem Header="HighContrastTheme"> -->
-            <!--     <pages:HighContrastDemo /> -->
-            <!-- </TabItem> -->
-            <!-- <TabItem Header="Variables"> -->
-            <!--     <pages:VariablesDemo /> -->
-            <!-- </TabItem> -->
+            <TabItem Header="Palette">
+                <pages:PaletteDemo />
+            </TabItem>
+            <TabItem Header="HighContrastTheme">
+                <pages:HighContrastDemo />
+            </TabItem>
+            <TabItem Header="Variables">
+                <pages:VariablesDemo />
+            </TabItem>
            <TabItem Header="Icon">
                <pages:IconDemo />
            </TabItem>
@@ -135,12 +134,12 @@
            <TabItem Header="ColorPicker">
                <pages:ColorPickerDemo />
            </TabItem>
-            <!-- <TabItem Header="DataGrid"> -->
-            <!--     <pages:DataGridDemo /> -->
-            <!-- </TabItem> -->
-            <!-- <TabItem Header="TreeDataGrid"> -->
-            <!--     <pages:TreeDataGridDemo /> -->
-            <!-- </TabItem> -->
+            <TabItem Header="DataGrid">
+                <pages:DataGridDemo />
+            </TabItem>
+            <TabItem Header="TreeDataGrid">
+                <pages:TreeDataGridDemo />
+            </TabItem>
            <TabItem
                Theme="{DynamicResource CategoryTabItem}"
                Header="Basic" />
@@ -162,15 +161,9 @@
            <TabItem Header="Button">
                <pages:ButtonDemo />
            </TabItem>
-            <TabItem Header="RepeatButton">
-                <pages:RepeatButtonDemo />
-            </TabItem>
            <TabItem Header="HyperlinkButton">
                <pages:HyperlinkButtonDemo />
            </TabItem>
-            <TabItem Header="ToggleButton">
-                <pages:ToggleButtonDemo />
-            </TabItem>
            <TabItem Header="CheckBox">
                <pages:CheckBoxDemo />
            </TabItem>
@@ -243,9 +236,6 @@
            <TabItem Header="Flyout">
                <pages:FlyoutDemo />
            </TabItem>
-            <TabItem Header="GroupBox">
-                <pages:GroupBoxDemo />
-            </TabItem>
            <TabItem Header="HeaderedContentControl">
                <pages:HeaderedContentControlDemo />
            </TabItem>
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs
@@ -9,6 +9,7 @@ using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Styling;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Input;
+using CommunityToolkit.Mvvm.Messaging;

 namespace Semi.Avalonia.Demo.Views;

@@ -18,6 +19,19 @@ public partial class MainView : UserControl
    {
        InitializeComponent();
        this.DataContext = new MainViewModel();
+        WeakReferenceMessenger.Default.Register<string, string>(this, "JumpTo", MessageHandler);
+    }
+
+    private void MessageHandler(object _, string message)
+    {
+        foreach (var item in tab.ItemsView)
+        {
+            if (item is TabItem tabItem && tabItem.Header is not null && tabItem.Header.Equals(message))
+            {
+                tab.SelectedItem = tabItem;
+                break;
+            }
+        }
    }
 }

@@ -76,61 +90,97 @@ public partial class MainViewModel : ObservableObject
                    {
                        Header = "简体中文",
                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("zh-cn")
+                        CommandParameter = new CultureInfo("zh-CN")
                    },
                    new MenuItemViewModel
                    {
                        Header = "English",
                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("en-us")
+                        CommandParameter = new CultureInfo("en-US")
                    },
                    new MenuItemViewModel
                    {
                        Header = "日本語",
                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("ja-jp")
+                        CommandParameter = new CultureInfo("ja-JP")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "한국어",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("ko-KR")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "English (UK)",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("en-GB")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "Italiano",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("it-IT")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "Italiano (Switzerland)",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("it-CH")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "Nederlands",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("nl-NL")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "Nederlands (Belgium)",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("nl-BE")
                    },
                    new MenuItemViewModel
                    {
                        Header = "Українська",
                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("uk-ua")
+                        CommandParameter = new CultureInfo("uk-UA")
                    },
                    new MenuItemViewModel
                    {
                        Header = "Русский",
                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("ru-ru")
+                        CommandParameter = new CultureInfo("ru-RU")
                    },
                    new MenuItemViewModel
                    {
                        Header = "繁體中文",
                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("zh-tw")
+                        CommandParameter = new CultureInfo("zh-TW")
                    },
                    new MenuItemViewModel
                    {
                        Header = "Deutsch",
                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("de-de")
+                        CommandParameter = new CultureInfo("de-DE")
                    },
                    new MenuItemViewModel
                    {
                        Header = "Español",
                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("es-es")
+                        CommandParameter = new CultureInfo("es-ES")
                    },
                    new MenuItemViewModel
                    {
                        Header = "Polski",
                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("pl-pl")
+                        CommandParameter = new CultureInfo("pl-PL")
                    },
                    new MenuItemViewModel
                    {
                        Header = "Français",
                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("fr-fr")
+                        CommandParameter = new CultureInfo("fr-FR")
                    },
                ]
            }
@@ -197,4 +247,4 @@ public class MenuItemViewModel
    public ICommand? Command { get; set; }
    public object? CommandParameter { get; set; }
    public IList<MenuItemViewModel>? Items { get; set; }
-}
+}
--- a/src/Directory.Build.props
+++ b/src/Directory.Build.props
@@ -1,17 +1,22 @@
 <Project>
    <PropertyGroup>
-        <TargetFrameworks>netstandard2.0;net6.0;net8.0</TargetFrameworks>
        <Nullable>enable</Nullable>
        <LangVersion>latest</LangVersion>
-        <Version>11.2.1.9</Version>
+        <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
+    </PropertyGroup>
+
+    <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
+        <IsAotCompatible>true</IsAotCompatible>
+    </PropertyGroup>
+
+    <PropertyGroup>
        <Authors>IRIHI Technology Co., Ltd.</Authors>
        <Description>Avalonia Theme inspired by Semi Design.</Description>
        <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>
+        <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
        <PackageLicenseExpression>MIT</PackageLicenseExpression>
        <PackageIcon>irihi.png</PackageIcon>
-        <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
-        <AvaloniaVersion>12.0.999-cibuild0058575-alpha</AvaloniaVersion>
-        <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
+        <PackageReadmeFile>README.md</PackageReadmeFile>
    </PropertyGroup>

    <ItemGroup>
--- a/src/Directory.Packages.props
+++ b/src/Directory.Packages.props
@@ -0,0 +1,13 @@
+<Project>
+    <PropertyGroup>
+        <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
+        <AvaloniaVersion>11.3.7</AvaloniaVersion>
+        <DataGridVersion>11.3.7</DataGridVersion>
+    </PropertyGroup>
+    <ItemGroup>
+        <PackageVersion Include="Avalonia" Version="$(AvaloniaVersion)"/>
+        <PackageVersion Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
+        <PackageVersion Include="Avalonia.Controls.DataGrid" Version="$(DataGridVersion)"/>
+        <PackageVersion Include="Avalonia.Controls.TreeDataGrid" Version="11.0.10"/>
+    </ItemGroup>
+</Project>
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
@@ -1,8 +1,8 @@
 <ResourceDictionary
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:iri="https://irihi.tech/shared"
    xmlns:converters="using:Avalonia.Controls.Converters">
+    <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
    <converters:ToBrushConverter x:Key="ToBrushConverter" />

    <ControlTheme x:Key="{x:Type ColorPicker}" TargetType="ColorPicker">
@@ -16,11 +16,11 @@
                    <Border
                        Margin="1,1,0,1"
                        Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                        CornerRadius="{TemplateBinding CornerRadius, Converter={iri:CornerRadiusMixerConverter Left}}" />
+                        CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
                    <Border
                        Margin="1,1,0,1"
                        Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
-                        CornerRadius="{TemplateBinding CornerRadius, Converter={iri:CornerRadiusMixerConverter Left}}" />
+                        CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
                </Panel>
            </Template>
        </Setter>
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml
@@ -1,9 +1,11 @@
 <ResourceDictionary
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:iri="https://irihi.tech/shared"
+    xmlns:converters="using:Avalonia.Controls.Converters"
    xmlns:pc="using:Avalonia.Controls.Primitives.Converters">
    <pc:AccentColorConverter x:Key="AccentColorConverter" />
+    <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
+    <converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight" />

    <ControlTheme x:Key="{x:Type ColorPreviewer}" TargetType="ColorPreviewer">
        <Setter Property="Height" Value="{DynamicResource ColorPreviewerHeight}" />
@@ -32,7 +34,7 @@
                                Background="{TemplateBinding HsvColor,
                                Converter={StaticResource AccentColorConverter},
                                ConverterParameter='-2'}"
-                                CornerRadius="{TemplateBinding CornerRadius,Converter={iri:CornerRadiusMixerConverter Left}}"
+                                CornerRadius="{TemplateBinding CornerRadius,Converter={StaticResource LeftCornerRadiusFilterConverter}}"
                                Tag="-2" />
                            <Border
                                Name="PART_AccentDecrement1Border"
@@ -68,7 +70,7 @@
                                Background="{TemplateBinding HsvColor,
                                Converter={StaticResource AccentColorConverter},
                                ConverterParameter='2'}"
-                                CornerRadius="{TemplateBinding CornerRadius,Converter={iri:CornerRadiusMixerConverter Right}}"
+                                CornerRadius="{TemplateBinding CornerRadius,Converter={StaticResource RightCornerRadiusFilterConverter}}"
                                Tag="2" />
                        </Grid>
                        <!--  Preview color: Must be last for drop shadow Z-index  -->
--- a/src/Semi.Avalonia.ColorPicker/README.md
+++ b/src/Semi.Avalonia.ColorPicker/README.md
@@ -0,0 +1,50 @@
+# Semi.Avalonia.ColorPicker
+
+[![Semi Avalonia ColorPicker](https://img.shields.io/nuget/v/Semi.Avalonia.ColorPicker.svg?color=red&style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia.ColorPicker/)
+[![Semi Avalonia ColorPicker](https://img.shields.io/nuget/dt/Semi.Avalonia.ColorPicker.svg?style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia.ColorPicker/)
+
+Avalonia ColorPicker Theme inspired by Semi Design
+
+This package provides Semi Design theming for the Avalonia ColorPicker control.
+
+## Installation
+
+```bash
+dotnet add package Semi.Avalonia.ColorPicker
+```
+
+## Prerequisites
+
+This package requires the main Semi.Avalonia theme to be installed:
+
+```bash
+dotnet add package Semi.Avalonia
+```
+
+## Usage
+
+Include the ColorPicker theme in your application:
+
+```xaml
+<Application
+    ...
+    xmlns:semi="https://irihi.tech/semi">
+    <Application.Styles>
+        <semi:SemiTheme Locale="zh-CN" />
+        <semi:ColorPickerSemiTheme />
+    </Application.Styles>
+</Application>
+```
+
+## Resources
+
+- [Documentation](https://docs.irihi.tech/semi/)
+- [Repository](https://github.com/irihitech/Semi.Avalonia)
+- [Online Demo](https://irihitech.github.io/Semi.Avalonia/)
+- [Download Demo](https://github.com/irihitech/Semi.Avalonia/releases)
+
+## Credits
+
+[Semi Design](https://semi.design/)
+
+[Avalonia](https://github.com/AvaloniaUI/Avalonia)
--- a/src/Semi.Avalonia.ColorPicker/Semi.Avalonia.ColorPicker.csproj
+++ b/src/Semi.Avalonia.ColorPicker/Semi.Avalonia.ColorPicker.csproj
@@ -1,19 +1,15 @@
 <Project Sdk="Microsoft.NET.Sdk">

-    <Import Project="../Package.props"/>
-
    <PropertyGroup>
+        <TargetFrameworks>netstandard2.0;net6.0;net8.0</TargetFrameworks>
+        <Version>11.3.7.2</Version>
+        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 11.3.7.2</PackageReleaseNotes>
        <Title>Semi.Avalonia.ColorPicker</Title>
-        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 11.2.1.9</PackageReleaseNotes>
-    </PropertyGroup>
-
-    <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
-        <IsAotCompatible>true</IsAotCompatible>
    </PropertyGroup>

    <ItemGroup>
-        <PackageReference Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="Irihi.Avalonia.Shared" Version="0.3.0" />
+        <PackageReference Include="Avalonia.Controls.ColorPicker"/>
+        <None Include="README.md" Pack="true" PackagePath="\"/>
    </ItemGroup>

 </Project>
--- a/src/Semi.Avalonia.ColorPicker/irihi.png
+++ b/src/Semi.Avalonia.ColorPicker/irihi.png
--- a/src/Semi.Avalonia.DataGrid/DataGrid.axaml
+++ b/src/Semi.Avalonia.DataGrid/DataGrid.axaml
@@ -86,7 +86,7 @@
                        <Rectangle
                            Name="PART_RightGridLine"
                            Grid.Column="1"
-                            Width="1"
+                            Width="{DynamicResource DataGridGridLineThickness}"
                            VerticalAlignment="Stretch"
                            Fill="{DynamicResource DataGridLineBrush}" />
                    </Grid>
@@ -145,7 +145,7 @@
                        <Rectangle
                            Name="VerticalSeparator"
                            Grid.Column="1"
-                            Width="1"
+                            Width="{DynamicResource DataGridGridLineThickness}"
                            VerticalAlignment="Stretch"
                            Fill="{TemplateBinding SeparatorBrush}"
                            IsVisible="{TemplateBinding AreSeparatorsVisible}" />
@@ -209,7 +209,7 @@
                    <Rectangle
                        Grid.Row="0"
                        Grid.RowSpan="2"
-                        Height="1"
+                        Height="{DynamicResource DataGridGridLineThickness}"
                        VerticalAlignment="Bottom"
                        Fill="{DynamicResource DataGridLineBrush}"
                        StrokeThickness="1" />
@@ -250,7 +250,7 @@
                        Grid.Row="2"
                        Grid.Column="0"
                        Grid.ColumnSpan="2"
-                        Height="1"
+                        Height="{DynamicResource DataGridGridLineThickness}"
                        Margin="1,0,1,0"
                        HorizontalAlignment="Stretch"
                        Fill="{TemplateBinding SeparatorBrush}"
@@ -315,7 +315,7 @@
                            Name="PART_BottomGridLine"
                            Grid.Row="2"
                            Grid.Column="1"
-                            Height="1"
+                            Height="{DynamicResource DataGridGridLineThickness}"
                            HorizontalAlignment="Stretch" />
                    </DataGridFrozenGrid>
                </Border>
@@ -452,7 +452,7 @@
                        Grid.Row="1"
                        Grid.Column="0"
                        Grid.ColumnSpan="5"
-                        Height="1"
+                        Height="{DynamicResource DataGridGridLineThickness}"
                        Fill="{DynamicResource DataGridLineBrush}" />
                </DataGridFrozenGrid>
            </ControlTemplate>
@@ -498,7 +498,7 @@
                            Grid.Row="0"
                            Grid.Column="0"
                            Grid.ColumnSpan="3"
-                            Height="1"
+                            Height="{DynamicResource DataGridGridLineThickness}"
                            VerticalAlignment="Bottom"
                            Fill="{DynamicResource DataGridLineBrush}" />

--- a/src/Semi.Avalonia.DataGrid/README.md
+++ b/src/Semi.Avalonia.DataGrid/README.md
@@ -0,0 +1,50 @@
+# Semi.Avalonia.DataGrid
+
+[![Semi Avalonia DataGrid](https://img.shields.io/nuget/v/Semi.Avalonia.DataGrid.svg?color=red&style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia.DataGrid/)
+[![Semi Avalonia DataGrid](https://img.shields.io/nuget/dt/Semi.Avalonia.DataGrid.svg?style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia.DataGrid/)
+
+Avalonia DataGrid Theme inspired by Semi Design
+
+This package provides Semi Design theming for the Avalonia DataGrid control.
+
+## Installation
+
+```bash
+dotnet add package Semi.Avalonia.DataGrid
+```
+
+## Prerequisites
+
+This package requires the main Semi.Avalonia theme to be installed:
+
+```bash
+dotnet add package Semi.Avalonia
+```
+
+## Usage
+
+Include the DataGrid theme in your application:
+
+```xaml
+<Application
+    ...
+    xmlns:semi="https://irihi.tech/semi">
+    <Application.Styles>
+        <semi:SemiTheme Locale="zh-CN" />
+        <semi:DataGridSemiTheme />
+    </Application.Styles>
+</Application>
+```
+
+## Resources
+
+- [Documentation](https://docs.irihi.tech/semi/)
+- [Repository](https://github.com/irihitech/Semi.Avalonia)
+- [Online Demo](https://irihitech.github.io/Semi.Avalonia/)
+- [Download Demo](https://github.com/irihitech/Semi.Avalonia/releases)
+
+## Credits
+
+[Semi Design](https://semi.design/)
+
+[Avalonia](https://github.com/AvaloniaUI/Avalonia)
--- a/src/Semi.Avalonia.DataGrid/Semi.Avalonia.DataGrid.csproj
+++ b/src/Semi.Avalonia.DataGrid/Semi.Avalonia.DataGrid.csproj
@@ -2,27 +2,14 @@

    <PropertyGroup>
        <TargetFrameworks>netstandard2.0;net6.0;net8.0</TargetFrameworks>
-        <Nullable>enable</Nullable>
-        <LangVersion>latest</LangVersion>
-        <Version>11.2.1.9</Version>
-        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 11.2.1.9</PackageReleaseNotes>
-        <Authors>IRIHI Technology Co., Ltd.</Authors>
-        <Description>Avalonia Theme inspired by Semi Design.</Description>
-        <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>
-        <PackageLicenseExpression>MIT</PackageLicenseExpression>
-        <PackageIcon>irihi.png</PackageIcon>
-        <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
+        <Version>11.3.7.2</Version>
+        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 11.3.7.2</PackageReleaseNotes>
        <Title>Semi.Avalonia.DataGrid</Title>
    </PropertyGroup>

-    <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
-        <IsAotCompatible>true</IsAotCompatible>
-    </PropertyGroup>
-
    <ItemGroup>
-        <PackageReference Include="Avalonia.Controls.DataGrid" Version="11.2.1"/>
-        <None Include="..\..\irihi.png" Pack="true" PackagePath="\" Link="Properties\irihi.png"/>
-        <None Include="..\..\LICENSE" Pack="true" PackagePath="\" Link="Properties\LICENSE"/>
+        <PackageReference Include="Avalonia.Controls.DataGrid"/>
+        <None Include="README.md" Pack="true" PackagePath="\"/>
    </ItemGroup>

 </Project>
--- a/src/Semi.Avalonia.DataGrid/Shared.axaml
+++ b/src/Semi.Avalonia.DataGrid/Shared.axaml
@@ -19,4 +19,7 @@
    <StaticResource x:Key="DataGridRowGroupHeaderVisualStrokeThickness" ResourceKey="SemiBorderSpacingControl" />

    <StaticResource x:Key="DataGridDisabledCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+
+    <!-- Grid line thickness -->
+    <x:Double x:Key="DataGridGridLineThickness">1</x:Double>
 </ResourceDictionary>
--- a/src/Semi.Avalonia.TreeDataGrid/Dark.axaml
+++ b/src/Semi.Avalonia.TreeDataGrid/Dark.axaml
@@ -1,10 +1,10 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StaticResource x:Key="TreeDataGridGridLinesBrush" ResourceKey="SemiColorBorder" />
-    <StaticResource x:Key="TreeDataGridHeaderPointerOverBackground" ResourceKey="SemiColorFill1" />
+    <StaticResource x:Key="TreeDataGridHeaderPointeroverBackground" ResourceKey="SemiColorFill1" />
    <StaticResource x:Key="TreeDataGridHeaderPressedBackground" ResourceKey="SemiColorFill2" />
-    <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBorderBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPointeroverBorderBrush" Color="Transparent" />
    <SolidColorBrush x:Key="TreeDataGridHeaderPressedBorderBrush" Color="Transparent" />
-    <StaticResource x:Key="TreeDataGridHeaderPointerOverForeground" ResourceKey="SemiColorText1" />
+    <StaticResource x:Key="TreeDataGridHeaderPointeroverForeground" ResourceKey="SemiColorText1" />
    <StaticResource x:Key="TreeDataGridHeaderPressedForeground" ResourceKey="SemiColorText0" />
    <StaticResource x:Key="TreeDataGridCellSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
    <StaticResource x:Key="TreeDataGridColumnHeaderForeground" ResourceKey="SemiColorText2" />
--- a/src/Semi.Avalonia.TreeDataGrid/Light.axaml
+++ b/src/Semi.Avalonia.TreeDataGrid/Light.axaml
@@ -1,10 +1,10 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StaticResource x:Key="TreeDataGridGridLinesBrush" ResourceKey="SemiColorBorder" />
-    <StaticResource x:Key="TreeDataGridHeaderPointerOverBackground" ResourceKey="SemiColorFill1" />
+    <StaticResource x:Key="TreeDataGridHeaderPointeroverBackground" ResourceKey="SemiColorFill1" />
    <StaticResource x:Key="TreeDataGridHeaderPressedBackground" ResourceKey="SemiColorFill2" />
-    <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBorderBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPointeroverBorderBrush" Color="Transparent" />
    <SolidColorBrush x:Key="TreeDataGridHeaderPressedBorderBrush" Color="Transparent" />
-    <StaticResource x:Key="TreeDataGridHeaderPointerOverForeground" ResourceKey="SemiColorText1" />
+    <StaticResource x:Key="TreeDataGridHeaderPointeroverForeground" ResourceKey="SemiColorText1" />
    <StaticResource x:Key="TreeDataGridHeaderPressedForeground" ResourceKey="SemiColorText0" />
    <StaticResource x:Key="TreeDataGridCellSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
    <StaticResource x:Key="TreeDataGridColumnHeaderForeground" ResourceKey="SemiColorText2" />
--- a/src/Semi.Avalonia.TreeDataGrid/README.md
+++ b/src/Semi.Avalonia.TreeDataGrid/README.md
@@ -0,0 +1,50 @@
+# Semi.Avalonia.TreeDataGrid
+
+[![Semi Avalonia TreeDataGrid](https://img.shields.io/nuget/v/Semi.Avalonia.TreeDataGrid.svg?color=red&style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia.TreeDataGrid/)
+[![Semi Avalonia TreeDataGrid](https://img.shields.io/nuget/dt/Semi.Avalonia.TreeDataGrid.svg?style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia.TreeDataGrid/)
+
+Avalonia TreeDataGrid Theme inspired by Semi Design
+
+This package provides Semi Design theming for the Avalonia TreeDataGrid control.
+
+## Installation
+
+```bash
+dotnet add package Semi.Avalonia.TreeDataGrid
+```
+
+## Prerequisites
+
+This package requires the main Semi.Avalonia theme to be installed:
+
+```bash
+dotnet add package Semi.Avalonia
+```
+
+## Usage
+
+Include the TreeDataGrid theme in your application:
+
+```xaml
+<Application
+    ...
+    xmlns:semi="https://irihi.tech/semi">
+    <Application.Styles>
+        <semi:SemiTheme Locale="zh-CN" />
+        <semi:TreeDataGridSemiTheme />
+    </Application.Styles>
+</Application>
+```
+
+## Resources
+
+- [Documentation](https://docs.irihi.tech/semi/)
+- [Repository](https://github.com/irihitech/Semi.Avalonia)
+- [Online Demo](https://irihitech.github.io/Semi.Avalonia/)
+- [Download Demo](https://github.com/irihitech/Semi.Avalonia/releases)
+
+## Credits
+
+[Semi Design](https://semi.design/)
+
+[Avalonia](https://github.com/AvaloniaUI/Avalonia)
--- a/src/Semi.Avalonia.TreeDataGrid/Semi.Avalonia.TreeDataGrid.csproj
+++ b/src/Semi.Avalonia.TreeDataGrid/Semi.Avalonia.TreeDataGrid.csproj
@@ -2,26 +2,14 @@

    <PropertyGroup>
        <TargetFramework>net6.0</TargetFramework>
-        <Nullable>enable</Nullable>
-        <LangVersion>latest</LangVersion>
-        <Version>11.0.10.4</Version>
-        <PackageReleaseNotes>Update to 11.0.10.4</PackageReleaseNotes>
-        <Authors>IRIHI Technology Co., Ltd.</Authors>
-        <Description>Avalonia Theme inspired by Semi Design.</Description>
-        <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>
-        <PackageLicenseExpression>MIT</PackageLicenseExpression>
-        <PackageIcon>irihi.png</PackageIcon>
-        <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
-    </PropertyGroup>
-
-    <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
-        <IsAotCompatible>true</IsAotCompatible>
+        <Version>11.1.1</Version>
+        <PackageReleaseNotes>Update to Semi.Avalonia.TreeDataGrid 11.1.1</PackageReleaseNotes>
+        <Title>Semi.Avalonia.TreeDataGrid</Title>
    </PropertyGroup>

    <ItemGroup>
-        <PackageReference Include="Avalonia.Controls.TreeDataGrid" Version="11.0.10"/>
-        <None Include="..\..\irihi.png" Pack="true" PackagePath="\" Link="Properties\irihi.png"/>
-        <None Include="..\..\LICENSE" Pack="true" PackagePath="\" Link="Properties\LICENSE"/>
+        <PackageReference Include="Avalonia.Controls.TreeDataGrid"/>
+        <None Include="README.md" Pack="true" PackagePath="\"/>
    </ItemGroup>

 </Project>
--- a/src/Semi.Avalonia.TreeDataGrid/TreeDataGrid.axaml
+++ b/src/Semi.Avalonia.TreeDataGrid/TreeDataGrid.axaml
@@ -1,7 +1,8 @@
 <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">
+    xmlns:conv="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls.TreeDataGrid"
+    x:CompileBindings="True">
    <Design.PreviewWith>
        <StackPanel Margin="20">
            <TreeDataGridColumnHeader Header="123" />
@@ -112,9 +113,9 @@
        </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}" />
+            <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">
--- a/src/Semi.Avalonia/Controls/Button.axaml
+++ b/src/Semi.Avalonia/Controls/Button.axaml
@@ -1,11 +1,97 @@
 <ResourceDictionary
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Button Theme Key: Light, Solid, Outline, Borderless; Default is Light  -->
-    <!--  Button Default Classes: Primary, Secondary, Tertiary, Success, Warning, Danger; Default is Primary  -->
-    <!--  State: default, pointerover, pressed, disabled  -->
+    <!--  Theme: Light, Solid, Outline, Borderless; Default is Light  -->
+    <!--  Color Classes: Primary, Secondary, Tertiary, Success, Warning, Danger; Default is Primary  -->
+    <!--  Size Classes: Large, Small  -->
+    <!--  AI style Classes: Colorful  -->
+    <!--  PseudoClasses: :pointerover, :pressed, :disabled  -->
+
+    <Design.PreviewWith>
+        <StackPanel Margin="16" Spacing="16">
+            <WrapPanel ItemSpacing="16">
+                <Button Content="Default" />
+                <Button Content="Primary" Classes="Primary" />
+                <Button Content="Secondary" Classes="Secondary" />
+                <Button Content="Tertiary" Classes="Tertiary" />
+                <Button Content="Success" Classes="Success" />
+                <Button Content="Warning" Classes="Warning" />
+                <Button Content="Danger" Classes="Danger" />
+                <Button Content="Disabled" Classes="Danger" IsEnabled="False" />
+            </WrapPanel>
+            <WrapPanel ItemSpacing="16">
+                <Button Content="Default" Theme="{DynamicResource SolidButton}" />
+                <Button Content="Primary" Classes="Primary" Theme="{DynamicResource SolidButton}" />
+                <Button Content="Secondary" Classes="Secondary" Theme="{DynamicResource SolidButton}" />
+                <Button Content="Tertiary" Classes="Tertiary" Theme="{DynamicResource SolidButton}" />
+                <Button Content="Success" Classes="Success" Theme="{DynamicResource SolidButton}" />
+                <Button Content="Warning" Classes="Warning" Theme="{DynamicResource SolidButton}" />
+                <Button Content="Danger" Classes="Danger" Theme="{DynamicResource SolidButton}" />
+                <Button Content="Disabled" Classes="Danger" Theme="{DynamicResource SolidButton}" IsEnabled="False" />
+            </WrapPanel>
+            <WrapPanel ItemSpacing="16">
+                <Button Content="Default" Theme="{DynamicResource OutlineButton}" />
+                <Button Content="Primary" Classes="Primary" Theme="{DynamicResource OutlineButton}" />
+                <Button Content="Secondary" Classes="Secondary" Theme="{DynamicResource OutlineButton}" />
+                <Button Content="Tertiary" Classes="Tertiary" Theme="{DynamicResource OutlineButton}" />
+                <Button Content="Success" Classes="Success" Theme="{DynamicResource OutlineButton}" />
+                <Button Content="Warning" Classes="Warning" Theme="{DynamicResource OutlineButton}" />
+                <Button Content="Danger" Classes="Danger" Theme="{DynamicResource OutlineButton}" />
+                <Button Content="Disabled" Classes="Danger" Theme="{DynamicResource OutlineButton}" IsEnabled="False" />
+            </WrapPanel>
+            <WrapPanel ItemSpacing="16">
+                <Button Content="Default" Theme="{DynamicResource BorderlessButton}" />
+                <Button Content="Primary" Classes="Primary" Theme="{DynamicResource BorderlessButton}" />
+                <Button Content="Secondary" Classes="Secondary" Theme="{DynamicResource BorderlessButton}" />
+                <Button Content="Tertiary" Classes="Tertiary" Theme="{DynamicResource BorderlessButton}" />
+                <Button Content="Success" Classes="Success" Theme="{DynamicResource BorderlessButton}" />
+                <Button Content="Warning" Classes="Warning" Theme="{DynamicResource BorderlessButton}" />
+                <Button Content="Danger" Classes="Danger" Theme="{DynamicResource BorderlessButton}" />
+                <Button Content="Disabled" Classes="Danger" Theme="{DynamicResource BorderlessButton}" IsEnabled="False" />
+            </WrapPanel>
+            <WrapPanel ItemSpacing="16">
+                <Button Content="Default" Classes="Colorful" />
+                <Button Content="Primary" Classes="Colorful Primary" />
+                <Button Content="Secondary" Classes="Colorful Secondary" />
+                <Button Content="Tertiary" Classes="Colorful Tertiary" />
+                <Button Content="Success" Classes="Colorful Success" />
+                <Button Content="Warning" Classes="Colorful Warning" />
+                <Button Content="Danger" Classes="Colorful Danger" />
+                <Button Content="Disabled" Classes="Colorful Primary" IsEnabled="False" />
+            </WrapPanel>
+            <WrapPanel ItemSpacing="16">
+                <Button Content="Default" Classes="Colorful" Theme="{DynamicResource SolidButton}" />
+                <Button Content="Primary" Classes="Colorful Primary" Theme="{DynamicResource SolidButton}" />
+                <Button Content="Secondary" Classes="Colorful Secondary" Theme="{DynamicResource SolidButton}" />
+                <Button Content="Tertiary" Classes="Colorful Tertiary" Theme="{DynamicResource SolidButton}" />
+                <Button Content="Success" Classes="Colorful Success" Theme="{DynamicResource SolidButton}" />
+                <Button Content="Warning" Classes="Colorful Warning" Theme="{DynamicResource SolidButton}" />
+                <Button Content="Danger" Classes="Colorful Danger" Theme="{DynamicResource SolidButton}" />
+                <Button Content="Disabled" Classes="Colorful Primary" Theme="{DynamicResource SolidButton}" IsEnabled="False" />
+            </WrapPanel>
+            <WrapPanel ItemSpacing="16">
+                <Button Content="Default" Classes="Colorful" Theme="{DynamicResource OutlineButton}" />
+                <Button Content="Primary" Classes="Colorful Primary" Theme="{DynamicResource OutlineButton}" />
+                <Button Content="Secondary" Classes="Colorful Secondary" Theme="{DynamicResource OutlineButton}" />
+                <Button Content="Tertiary" Classes="Colorful Tertiary" Theme="{DynamicResource OutlineButton}" />
+                <Button Content="Success" Classes="Colorful Success" Theme="{DynamicResource OutlineButton}" />
+                <Button Content="Warning" Classes="Colorful Warning" Theme="{DynamicResource OutlineButton}" />
+                <Button Content="Danger" Classes="Colorful Danger" Theme="{DynamicResource OutlineButton}" />
+                <Button Content="Disabled" Classes="Colorful Primary" Theme="{DynamicResource OutlineButton}" IsEnabled="False" />
+            </WrapPanel>
+            <WrapPanel ItemSpacing="16">
+                <Button Content="Default" Classes="Colorful" Theme="{DynamicResource BorderlessButton}" />
+                <Button Content="Primary" Classes="Colorful Primary" Theme="{DynamicResource BorderlessButton}" />
+                <Button Content="Secondary" Classes="Colorful Secondary" Theme="{DynamicResource BorderlessButton}" />
+                <Button Content="Tertiary" Classes="Colorful Tertiary" Theme="{DynamicResource BorderlessButton}" />
+                <Button Content="Success" Classes="Colorful Success" Theme="{DynamicResource BorderlessButton}" />
+                <Button Content="Warning" Classes="Colorful Warning" Theme="{DynamicResource BorderlessButton}" />
+                <Button Content="Danger" Classes="Colorful Danger" Theme="{DynamicResource BorderlessButton}" />
+                <Button Content="Disabled" Classes="Colorful Primary" Theme="{DynamicResource BorderlessButton}" IsEnabled="False" />
+            </WrapPanel>
+        </StackPanel>
+    </Design.PreviewWith>

-    <!--  Button Light  -->
    <ControlTheme x:Key="{x:Type Button}" TargetType="Button">
        <Setter Property="Padding" Value="{DynamicResource ButtonDefaultPadding}" />
        <Setter Property="MinHeight" Value="{DynamicResource ButtonDefaultHeight}" />
@@ -37,7 +123,6 @@
                    CornerRadius="{TemplateBinding CornerRadius}"
                    Content="{TemplateBinding Content}"
                    ContentTemplate="{TemplateBinding ContentTemplate}"
-                    RecognizesAccessKey="True"
                    TextElement.FontSize="{TemplateBinding FontSize}"
                    TextElement.FontWeight="{TemplateBinding FontWeight}"
                    UseLayoutRounding="False" />
@@ -47,6 +132,7 @@
        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="Background" Value="{TemplateBinding Background}" />
            <Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
+            <Setter Property="RecognizesAccessKey" Value="True" />
        </Style>

        <Style Selector="^.Primary /template/ ContentPresenter#PART_ContentPresenter">
@@ -68,6 +154,12 @@
            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDangerForeground}" />
        </Style>

+        <Style Selector="^.Colorful">
+            <Style Selector="^.Primary /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultColorfulPrimaryForeground}" />
+            </Style>
+        </Style>
+
        <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPointeroverBorderBrush}" />
@@ -209,6 +301,39 @@
            </Style>
        </Style>

+        <Style Selector="^.Colorful">
+            <Style Selector="^.Primary">
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+                    <Setter Property="Background" Value="{DynamicResource ButtonSolidColorfulPrimaryBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidColorfulPrimaryBackground}" />
+                </Style>
+                <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Background" Value="{DynamicResource ButtonSolidColorfulPrimaryPointeroverBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidColorfulPrimaryPointeroverBackground}" />
+                </Style>
+                <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Background" Value="{DynamicResource ButtonSolidColorfulPrimaryPressedBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidColorfulPrimaryPressedBackground}" />
+                </Style>
+            </Style>
+            <Style Selector="^.Tertiary">
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource ButtonSolidColorfulTertiaryForeground}" />
+                    <Setter Property="Background" Value="{DynamicResource ButtonSolidColorfulTertiaryBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidColorfulTertiaryBackground}" />
+                </Style>
+                <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Background" Value="{DynamicResource ButtonSolidColorfulTertiaryPointeroverBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidColorfulTertiaryPointeroverBackground}" />
+                </Style>
+                <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Background" Value="{DynamicResource ButtonSolidColorfulTertiaryPressedBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidColorfulTertiaryPressedBackground}" />
+                </Style>
+            </Style>
+        </Style>
+
        <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidDisabledForeground}" />
            <Setter Property="Background" Value="{DynamicResource ButtonSolidDisabledBackground}" />
@@ -241,6 +366,14 @@
        <Style Selector="^.Danger /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" />
        </Style>
+
+        <Style Selector="^.Colorful">
+            <Style Selector="^.Primary /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource ButtonOutlineColorfulPrimaryForeground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineColorfulPrimaryBorderBrush}" />
+            </Style>
+        </Style>
+
        <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
            <Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
@@ -261,7 +394,6 @@
            <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
            <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
        </Style>
-
    </ControlTheme>

    <ControlTheme x:Key="InnerIconButton" TargetType="Button">
--- a/src/Semi.Avalonia/Controls/CalendarDatePicker.axaml
+++ b/src/Semi.Avalonia/Controls/CalendarDatePicker.axaml
@@ -171,7 +171,7 @@
                <Setter Property="BorderBrush" Value="Transparent" />
            </Style>
            <Style Selector="^:pointerover /template/ Border#Background">
-                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointeroverBackground}" />
                <Setter Property="BorderBrush" Value="Transparent" />
            </Style>
            <Style Selector="^:pressed /template/ Border#Background">
@@ -213,8 +213,8 @@
                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsBorderBrush}" />
                </Style>
                <Style Selector="^:pointerover /template/ Border#Background">
-                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
-                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsPointerOverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointeroverBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsPointeroverBorderBrush}" />
                </Style>
                <Style Selector="^:pressed /template/ Border#Background">
                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
--- a/src/Semi.Avalonia/Controls/CheckBox.axaml
+++ b/src/Semi.Avalonia/Controls/CheckBox.axaml
@@ -62,13 +62,16 @@
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            IsVisible="{TemplateBinding Content,Converter={x:Static ObjectConverters.IsNotNull}}"
                            FontSize="{TemplateBinding FontSize}"
-                            RecognizesAccessKey="True"
                            TextWrapping="Wrap" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter>

+        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="RecognizesAccessKey" Value="True" />
+        </Style>
+
        <Style Selector="^:unchecked">
            <Style Selector="^:pointerover /template/ Border#NormalRectangle">
                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointeroverBorderBrush}" />
@@ -219,13 +222,16 @@
                            Foreground="{TemplateBinding Foreground}"
                            IsVisible="{TemplateBinding Content,Converter={x:Static ObjectConverters.IsNotNull}}"
                            FontSize="{TemplateBinding FontSize}"
-                            RecognizesAccessKey="True"
                            TextWrapping="Wrap" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter>

+        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="RecognizesAccessKey" Value="True" />
+        </Style>
+
        <Style Selector="^:unchecked">
            <Style Selector="^:pointerover">
                <Style Selector="^ /template/ Border#NormalRectangle">
@@ -337,12 +343,15 @@
                    Content="{TemplateBinding Content}"
                    ContentTemplate="{TemplateBinding ContentTemplate}"
                    CornerRadius="{TemplateBinding CornerRadius}"
-                    RecognizesAccessKey="True"
                    UseLayoutRounding="False"
                    TextWrapping="Wrap" />
            </ControlTemplate>
        </Setter>

+        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="RecognizesAccessKey" Value="True" />
+        </Style>
+
        <Style Selector="^:unchecked">
            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
                <Setter Property="Background" Value="{DynamicResource CheckBoxCardPointeroverBackground}" />
--- a/src/Semi.Avalonia/Controls/ComboBox.axaml
+++ b/src/Semi.Avalonia/Controls/ComboBox.axaml
@@ -217,7 +217,7 @@
                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
            </Style>
            <Style Selector="^:pointerover /template/ Border#Background">
-                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointeroverBackground}" />
                <Setter Property="BorderBrush" Value="Transparent" />
            </Style>
            <Style Selector="^:pressed /template/ Border#Background">
@@ -273,8 +273,8 @@
                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsBorderBrush}" />
                </Style>
                <Style Selector="^:pointerover /template/ Border#Background">
-                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
-                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsPointerOverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointeroverBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsPointeroverBorderBrush}" />
                </Style>
                <Style Selector="^:pressed /template/ Border#Background">
                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
--- a/src/Semi.Avalonia/Controls/DatePicker.axaml
+++ b/src/Semi.Avalonia/Controls/DatePicker.axaml
@@ -239,7 +239,8 @@
                            Margin="0,0,9,0"
                            Command="{Binding $parent[DatePicker].Clear}"
                            Content="{DynamicResource IconButtonClearData}"
-                            IsVisible="False" />
+                            IsVisible="False"
+                            Focusable="False" />
                    </Grid>
                </DataValidationErrors>
            </ControlTemplate>
--- a/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml
+++ b/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml
@@ -37,7 +37,7 @@
                <Setter Property="BorderBrush" Value="Transparent" />
            </Style>
            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointeroverBackground}" />
                <Setter Property="BorderBrush" Value="Transparent" />
            </Style>
            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
--- a/src/Semi.Avalonia/Controls/DropDownButton.axaml
+++ b/src/Semi.Avalonia/Controls/DropDownButton.axaml
@@ -2,16 +2,90 @@
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Design.PreviewWith>
-        <StackPanel Margin="20">
-            <DropDownButton Content="Button" />
-            <DropDownButton Classes="Primary" Content="Button" />
-            <DropDownButton Classes="Secondary" Content="Button" />
-            <DropDownButton IsEnabled="False" Classes="Tertiary" Content="Button" />
-            <DropDownButton Theme="{DynamicResource SolidDropDownButton}" Classes="Success" Content="Button" />
-            <DropDownButton Theme="{DynamicResource OutlineDropDownButton}" Classes="Warning" Content="Button" />
-            <DropDownButton Theme="{DynamicResource BorderlessDropDownButton}" Classes="Danger" Content="Button" />
+        <StackPanel Margin="16" Spacing="16">
+            <WrapPanel ItemSpacing="16">
+                <DropDownButton Content="Default" />
+                <DropDownButton Content="Primary" Classes="Primary" />
+                <DropDownButton Content="Secondary" Classes="Secondary" />
+                <DropDownButton Content="Tertiary" Classes="Tertiary" />
+                <DropDownButton Content="Success" Classes="Success" />
+                <DropDownButton Content="Warning" Classes="Warning" />
+                <DropDownButton Content="Danger" Classes="Danger" />
+                <DropDownButton Content="Disabled" Classes="Danger" IsEnabled="False" />
+            </WrapPanel>
+            <WrapPanel ItemSpacing="16">
+                <DropDownButton Content="Default" Theme="{DynamicResource SolidDropDownButton}" />
+                <DropDownButton Content="Primary" Classes="Primary" Theme="{DynamicResource SolidDropDownButton}" />
+                <DropDownButton Content="Secondary" Classes="Secondary" Theme="{DynamicResource SolidDropDownButton}" />
+                <DropDownButton Content="Tertiary" Classes="Tertiary" Theme="{DynamicResource SolidDropDownButton}" />
+                <DropDownButton Content="Success" Classes="Success" Theme="{DynamicResource SolidDropDownButton}" />
+                <DropDownButton Content="Warning" Classes="Warning" Theme="{DynamicResource SolidDropDownButton}" />
+                <DropDownButton Content="Danger" Classes="Danger" Theme="{DynamicResource SolidDropDownButton}" />
+                <DropDownButton Content="Disabled" Classes="Danger" Theme="{DynamicResource SolidDropDownButton}" IsEnabled="False" />
+            </WrapPanel>
+            <WrapPanel ItemSpacing="16">
+                <DropDownButton Content="Default" Theme="{DynamicResource OutlineDropDownButton}" />
+                <DropDownButton Content="Primary" Classes="Primary" Theme="{DynamicResource OutlineDropDownButton}" />
+                <DropDownButton Content="Secondary" Classes="Secondary" Theme="{DynamicResource OutlineDropDownButton}" />
+                <DropDownButton Content="Tertiary" Classes="Tertiary" Theme="{DynamicResource OutlineDropDownButton}" />
+                <DropDownButton Content="Success" Classes="Success" Theme="{DynamicResource OutlineDropDownButton}" />
+                <DropDownButton Content="Warning" Classes="Warning" Theme="{DynamicResource OutlineDropDownButton}" />
+                <DropDownButton Content="Danger" Classes="Danger" Theme="{DynamicResource OutlineDropDownButton}" />
+                <DropDownButton Content="Disabled" Classes="Danger" Theme="{DynamicResource OutlineDropDownButton}" IsEnabled="False" />
+            </WrapPanel>
+            <WrapPanel ItemSpacing="16">
+                <DropDownButton Content="Default" Theme="{DynamicResource BorderlessDropDownButton}" />
+                <DropDownButton Content="Primary" Classes="Primary" Theme="{DynamicResource BorderlessDropDownButton}" />
+                <DropDownButton Content="Secondary" Classes="Secondary" Theme="{DynamicResource BorderlessDropDownButton}" />
+                <DropDownButton Content="Tertiary" Classes="Tertiary" Theme="{DynamicResource BorderlessDropDownButton}" />
+                <DropDownButton Content="Success" Classes="Success" Theme="{DynamicResource BorderlessDropDownButton}" />
+                <DropDownButton Content="Warning" Classes="Warning" Theme="{DynamicResource BorderlessDropDownButton}" />
+                <DropDownButton Content="Danger" Classes="Danger" Theme="{DynamicResource BorderlessDropDownButton}" />
+                <DropDownButton Content="Disabled" Classes="Danger" Theme="{DynamicResource BorderlessDropDownButton}" IsEnabled="False" />
+            </WrapPanel>
+            <WrapPanel ItemSpacing="16">
+                <DropDownButton Content="Default" Classes="Colorful" />
+                <DropDownButton Content="Primary" Classes="Colorful Primary" />
+                <DropDownButton Content="Secondary" Classes="Colorful Secondary" />
+                <DropDownButton Content="Tertiary" Classes="Colorful Tertiary" />
+                <DropDownButton Content="Success" Classes="Colorful Success" />
+                <DropDownButton Content="Warning" Classes="Colorful Warning" />
+                <DropDownButton Content="Danger" Classes="Colorful Danger" />
+                <DropDownButton Content="Disabled" Classes="Colorful Primary" IsEnabled="False" />
+            </WrapPanel>
+            <WrapPanel ItemSpacing="16">
+                <DropDownButton Content="Default" Classes="Colorful" Theme="{DynamicResource SolidDropDownButton}" />
+                <DropDownButton Content="Primary" Classes="Colorful Primary" Theme="{DynamicResource SolidDropDownButton}" />
+                <DropDownButton Content="Secondary" Classes="Colorful Secondary" Theme="{DynamicResource SolidDropDownButton}" />
+                <DropDownButton Content="Tertiary" Classes="Colorful Tertiary" Theme="{DynamicResource SolidDropDownButton}" />
+                <DropDownButton Content="Success" Classes="Colorful Success" Theme="{DynamicResource SolidDropDownButton}" />
+                <DropDownButton Content="Warning" Classes="Colorful Warning" Theme="{DynamicResource SolidDropDownButton}" />
+                <DropDownButton Content="Danger" Classes="Colorful Danger" Theme="{DynamicResource SolidDropDownButton}" />
+                <DropDownButton Content="Disabled" Classes="Colorful Primary" Theme="{DynamicResource SolidDropDownButton}" IsEnabled="False" />
+            </WrapPanel>
+            <WrapPanel ItemSpacing="16">
+                <DropDownButton Content="Default" Classes="Colorful" Theme="{DynamicResource OutlineDropDownButton}" />
+                <DropDownButton Content="Primary" Classes="Colorful Primary" Theme="{DynamicResource OutlineDropDownButton}" />
+                <DropDownButton Content="Secondary" Classes="Colorful Secondary" Theme="{DynamicResource OutlineDropDownButton}" />
+                <DropDownButton Content="Tertiary" Classes="Colorful Tertiary" Theme="{DynamicResource OutlineDropDownButton}" />
+                <DropDownButton Content="Success" Classes="Colorful Success" Theme="{DynamicResource OutlineDropDownButton}" />
+                <DropDownButton Content="Warning" Classes="Colorful Warning" Theme="{DynamicResource OutlineDropDownButton}" />
+                <DropDownButton Content="Danger" Classes="Colorful Danger" Theme="{DynamicResource OutlineDropDownButton}" />
+                <DropDownButton Content="Disabled" Classes="Colorful Primary" Theme="{DynamicResource OutlineDropDownButton}" IsEnabled="False" />
+            </WrapPanel>
+            <WrapPanel ItemSpacing="16">
+                <DropDownButton Content="Default" Classes="Colorful" Theme="{DynamicResource BorderlessDropDownButton}" />
+                <DropDownButton Content="Primary" Classes="Colorful Primary" Theme="{DynamicResource BorderlessDropDownButton}" />
+                <DropDownButton Content="Secondary" Classes="Colorful Secondary" Theme="{DynamicResource BorderlessDropDownButton}" />
+                <DropDownButton Content="Tertiary" Classes="Colorful Tertiary" Theme="{DynamicResource BorderlessDropDownButton}" />
+                <DropDownButton Content="Success" Classes="Colorful Success" Theme="{DynamicResource BorderlessDropDownButton}" />
+                <DropDownButton Content="Warning" Classes="Colorful Warning" Theme="{DynamicResource BorderlessDropDownButton}" />
+                <DropDownButton Content="Danger" Classes="Colorful Danger" Theme="{DynamicResource BorderlessDropDownButton}" />
+                <DropDownButton Content="Disabled" Classes="Colorful Primary" Theme="{DynamicResource BorderlessDropDownButton}" IsEnabled="False" />
+            </WrapPanel>
        </StackPanel>
    </Design.PreviewWith>
+
    <ControlTheme x:Key="{x:Type DropDownButton}" TargetType="DropDownButton">
        <Setter Property="Padding" Value="{DynamicResource ButtonDefaultPadding}" />
        <Setter Property="MinHeight" Value="{DynamicResource ButtonDefaultHeight}" />
@@ -36,13 +110,12 @@
                    Padding="{TemplateBinding Padding}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    CornerRadius="{TemplateBinding CornerRadius}">
-                    <DockPanel>
+                    <DockPanel HorizontalSpacing="8">
                        <PathIcon
                            Name="DropDownGlyph"
                            DockPanel.Dock="Right"
                            Theme="{DynamicResource InnerPathIcon}"
                            HorizontalAlignment="Right"
-                            Margin="8,0,0,0"
                            Data="{DynamicResource DropDownButtonIconGlyph}"
                            Foreground="{Binding #PART_ContentPresenter.Foreground}"
                            IsHitTestVisible="False"
@@ -53,8 +126,7 @@
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
-                            Foreground="{TemplateBinding Foreground}"
-                            RecognizesAccessKey="True" />
+                            Foreground="{TemplateBinding Foreground}" />
                    </DockPanel>
                </Border>
            </ControlTemplate>
@@ -65,6 +137,10 @@
            <Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
        </Style>

+        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="RecognizesAccessKey" Value="True" />
+        </Style>
+
        <Style Selector="^.Primary /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultPrimaryForeground}" />
        </Style>
@@ -84,6 +160,12 @@
            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDangerForeground}" />
        </Style>

+        <Style Selector="^.Colorful">
+            <Style Selector="^.Primary /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultColorfulPrimaryForeground}" />
+            </Style>
+        </Style>
+
        <Style Selector="^:pointerover /template/ Border#PART_Background">
            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPointeroverBorderBrush}" />
@@ -243,6 +325,40 @@
            </Style>
        </Style>

+        <Style Selector="^.Colorful">
+            <Style Selector="^.Primary">
+                <Style Selector="^ /template/ Border#PART_Background">
+                    <Setter Property="Background" Value="{DynamicResource ButtonSolidColorfulPrimaryBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidColorfulPrimaryBackground}" />
+                </Style>
+                <Style Selector="^:pointerover /template/ Border#PART_Background">
+                    <Setter Property="Background" Value="{DynamicResource ButtonSolidColorfulPrimaryPointeroverBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidColorfulPrimaryPointeroverBackground}" />
+                </Style>
+                <Style Selector="^:pressed /template/ Border#PART_Background">
+                    <Setter Property="Background" Value="{DynamicResource ButtonSolidColorfulPrimaryPressedBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidColorfulPrimaryPressedBackground}" />
+                </Style>
+            </Style>
+            <Style Selector="^.Tertiary">
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource ButtonSolidColorfulTertiaryForeground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#PART_Background">
+                    <Setter Property="Background" Value="{DynamicResource ButtonSolidColorfulTertiaryBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidColorfulTertiaryBackground}" />
+                </Style>
+                <Style Selector="^:pointerover /template/ Border#PART_Background">
+                    <Setter Property="Background" Value="{DynamicResource ButtonSolidColorfulTertiaryPointeroverBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidColorfulTertiaryPointeroverBackground}" />
+                </Style>
+                <Style Selector="^:pressed /template/ Border#PART_Background">
+                    <Setter Property="Background" Value="{DynamicResource ButtonSolidColorfulTertiaryPressedBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidColorfulTertiaryPressedBackground}" />
+                </Style>
+            </Style>
+        </Style>
+
        <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidDisabledForeground}" />
        </Style>
@@ -277,6 +393,16 @@
        <Style Selector="^.Danger /template/ Border#PART_Background">
            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" />
        </Style>
+        <Style Selector="^.Colorful">
+            <Style Selector="^.Primary">
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource ButtonOutlineColorfulPrimaryForeground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#PART_Background">
+                    <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineColorfulPrimaryBorderBrush}" />
+                </Style>
+            </Style>
+        </Style>
        <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
        </Style>
--- a/src/Semi.Avalonia/Controls/GroupBox.axaml
+++ b/src/Semi.Avalonia/Controls/GroupBox.axaml
@@ -1,5 +0,0 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="{x:Type GroupBox}" ResourceKey="GroupBox"/>
-</ResourceDictionary>
--- a/src/Semi.Avalonia/Controls/HeaderedContentControl.axaml
+++ b/src/Semi.Avalonia/Controls/HeaderedContentControl.axaml
@@ -1,7 +1,7 @@
 <ResourceDictionary
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:iri="https://irihi.tech/shared">
+    xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls">
    <Design.PreviewWith>
        <StackPanel Spacing="20">
            <HeaderedContentControl
@@ -23,6 +23,7 @@
            </HeaderedContentControl>
        </StackPanel>
    </Design.PreviewWith>
+    <converters:MarginMultiplierConverter x:Key="SeparatorBorderMultiplier" Top="True" Indent="1" />

    <ControlTheme x:Key="{x:Type HeaderedContentControl}" TargetType="HeaderedContentControl">
        <Setter Property="Padding" Value="3" />
@@ -40,7 +41,6 @@
                            Grid.Row="0"
                            Content="{TemplateBinding Header}"
                            ContentTemplate="{TemplateBinding HeaderTemplate}"
-                            RecognizesAccessKey="True"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            FontSize="{TemplateBinding FontSize}"
@@ -52,7 +52,6 @@
                            Grid.Row="1"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            Content="{TemplateBinding Content}"
-                            RecognizesAccessKey="True"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            FontSize="{TemplateBinding FontSize}"
@@ -63,6 +62,14 @@
                </Border>
            </ControlTemplate>
        </Setter>
+
+        <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+            <Setter Property="RecognizesAccessKey" Value="True" />
+        </Style>
+
+        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="RecognizesAccessKey" Value="True" />
+        </Style>
    </ControlTheme>

    <ControlTheme x:Key="GroupBox" TargetType="HeaderedContentControl">
@@ -90,7 +97,7 @@
                            Name="SeparatorBorder"
                            Grid.Row="1"
                            BorderBrush="{TemplateBinding BorderBrush}"
-                            BorderThickness="{TemplateBinding BorderThickness, Converter={iri:ThicknessMixerConverter Top}}">
+                            BorderThickness="{TemplateBinding BorderThickness, Converter={StaticResource SeparatorBorderMultiplier}}">
                            <Border.IsVisible>
                                <MultiBinding Converter="{x:Static BoolConverters.And}">
                                    <TemplateBinding Property="Header" Converter="{x:Static ObjectConverters.IsNotNull}" />
--- a/src/Semi.Avalonia/Controls/HyperlinkButton.axaml
+++ b/src/Semi.Avalonia/Controls/HyperlinkButton.axaml
@@ -39,12 +39,15 @@
                        Name="PART_ContentPresenter"
                        Content="{TemplateBinding Content}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
-                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        RecognizesAccessKey="True" />
+                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
                </DockPanel>
            </ControlTemplate>
        </Setter>

+        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="RecognizesAccessKey" Value="True" />
+        </Style>
+
        <Style Selector="^:pointerover">
            <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonPointeroverForeground}" />
        </Style>
--- a/src/Semi.Avalonia/Controls/Label.axaml
+++ b/src/Semi.Avalonia/Controls/Label.axaml
@@ -75,7 +75,16 @@
                <Label Classes="Solid Grey" Theme="{StaticResource TagLabel}">Grey</Label>
                <Label Classes="Solid White" Theme="{StaticResource TagLabel}">White</Label>
            </WrapPanel>
-
+            <WrapPanel>
+                <Label Classes="Colorful Gradient" Theme="{DynamicResource TagLabel}">AI</Label>
+                <Label Classes="Colorful Gradient Ghost" Theme="{DynamicResource TagLabel}">AI</Label>
+                <Label Classes="Colorful Gradient Solid" Theme="{DynamicResource TagLabel}">AI</Label>
+            </WrapPanel>
+            <WrapPanel>
+                <Label Classes="Colorful" Theme="{DynamicResource TagLabel}">AI</Label>
+                <Label Classes="Colorful Ghost" Theme="{DynamicResource TagLabel}">AI</Label>
+                <Label Classes="Colorful Solid" Theme="{DynamicResource TagLabel}">AI</Label>
+            </WrapPanel>
        </StackPanel>
    </Design.PreviewWith>
    <ControlTheme x:Key="{x:Type Label}" TargetType="Label">
@@ -94,10 +103,12 @@
                    Content="{TemplateBinding Content}"
                    ContentTemplate="{TemplateBinding ContentTemplate}"
                    CornerRadius="{TemplateBinding CornerRadius}"
-                    FontSize="{TemplateBinding FontSize}"
-                    RecognizesAccessKey="True" />
+                    FontSize="{TemplateBinding FontSize}" />
            </ControlTemplate>
        </Setter>
+        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="RecognizesAccessKey" Value="True" />
+        </Style>
        <Style Selector="^.Secondary">
            <Setter Property="Foreground" Value="{DynamicResource TextBlockSecondaryForeground}" />
        </Style>
@@ -162,6 +173,7 @@
    <!--  Shape: Square,Circle. Default is Square  -->
    <!--  Size: Small, Large. Default is Small  -->
    <!--  Color: Red, Pink, Purple, Violet, Indigo, Blue, LightBlue, Cyan, Teal, Green, LightGreen, Lime, Yellow, Amber, Orange, Grey, White. Default is Grey  -->
+    <!--  AI style: Colorful, Gradient  -->
    <ControlTheme x:Key="TagLabel" TargetType="Label">
        <Setter Property="BorderThickness" Value="{DynamicResource LabelTagBorderThickness}" />
        <Setter Property="MinHeight" Value="{DynamicResource LabelTagSmallHeight}" />
@@ -187,10 +199,12 @@
                    ContentTemplate="{TemplateBinding ContentTemplate}"
                    CornerRadius="{TemplateBinding CornerRadius}"
                    FontSize="{TemplateBinding FontSize}"
-                    RecognizesAccessKey="True"
                    UseLayoutRounding="True" />
            </ControlTemplate>
        </Setter>
+        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="RecognizesAccessKey" Value="True" />
+        </Style>
        <Style Selector="^.Large">
            <Setter Property="Padding" Value="{DynamicResource LabelTagLargePadding}" />
            <Setter Property="MinHeight" Value="{DynamicResource LabelTagLargeHeight}" />
@@ -395,5 +409,34 @@
            <Setter Property="BorderBrush" Value="{DynamicResource LabelTagSolidWhiteBorderBrush}" />
            <Setter Property="Background" Value="{DynamicResource LabelTagSolidWhiteBackground}" />
        </Style>
+
+        <Style Selector="^.Colorful">
+            <Setter Property="FontWeight" Value="{StaticResource LabelTagColorfulFontWeight}" />
+
+            <Setter Property="Foreground" Value="{DynamicResource LabelTagColorfulLightForeground}" />
+            <Setter Property="Background" Value="{DynamicResource LabelTagColorfulLightBackground}" />
+            <Style Selector="^.Ghost">
+                <Setter Property="Foreground" Value="{DynamicResource LabelTagColorfulGhostForeground}" />
+                <Setter Property="Background" Value="{DynamicResource LabelTagColorfulGhostBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource LabelTagColorfulGhostBorderBrush}" />
+            </Style>
+            <Style Selector="^.Solid">
+                <Setter Property="Foreground" Value="{DynamicResource LabelTagColorfulSolidForeground}" />
+                <Setter Property="Background" Value="{DynamicResource LabelTagColorfulSolidBackground}" />
+            </Style>
+            <Style Selector="^.Gradient">
+                <Setter Property="Foreground" Value="{DynamicResource LabelTagColorfulGradientLightForeground}" />
+                <Setter Property="Background" Value="{DynamicResource LabelTagColorfulGradientLightBackground}" />
+                <Style Selector="^.Ghost">
+                    <Setter Property="Foreground" Value="{DynamicResource LabelTagColorfulGradientGhostForeground}" />
+                    <Setter Property="Background" Value="{DynamicResource LabelTagColorfulGradientGhostBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource LabelTagColorfulGradientGhostBorderBrush}" />
+                </Style>
+                <Style Selector="^.Solid">
+                    <Setter Property="Foreground" Value="{DynamicResource LabelTagColorfulGradientSolidForeground}" />
+                    <Setter Property="Background" Value="{DynamicResource LabelTagColorfulGradientSolidBackground}" />
+                </Style>
+            </Style>
+        </Style>
    </ControlTheme>
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Controls/Menu.axaml
+++ b/src/Semi.Avalonia/Controls/Menu.axaml
@@ -166,8 +166,7 @@
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Center"
                                Content="{TemplateBinding Header}"
-                                ContentTemplate="{TemplateBinding HeaderTemplate}"
-                                RecognizesAccessKey="True" />
+                                ContentTemplate="{TemplateBinding HeaderTemplate}" />
                            <TextBlock
                                Name="PART_InputGestureText"
                                Grid.Column="3"
@@ -222,6 +221,10 @@
            </ControlTemplate>
        </Setter>

+        <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+            <Setter Property="RecognizesAccessKey" Value="True" />
+        </Style>
+
        <Style Selector="^:icon /template/ Viewbox#PART_IconPresenter">
            <Setter Property="IsVisible" Value="True" />
        </Style>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Zhang Dian	622c8c23b7	ci: add adroid workload.	2025-12-30 16:04:07 +08:00
Zhang Dian	104ba2f1f4	misc: bump version.	2025-12-30 15:26:35 +08:00
Zhang Dian	4895d2f51b	fix: ClearButton shouble not be focusable.	2025-12-29 16:02:00 +08:00
Shatyuka	414736443d	fix: controls under TextBox inheriting Ibeam cursor (#710 )	2025-12-22 19:32:57 +08:00
Copilot	65d2f88cab	Make DataGrid cell grid lines use dynamic resources for thickness (#666 ) * Initial plan * Implement dynamic resources for DataGrid grid line thickness and color Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> * Revert DynamicResource to StaticResource for DataGridLineBrush in theme files Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com>	2025-12-16 17:08:07 +08:00
Zhang Dian	0a622772f4	ci: specify project path for dotnet restore in publish.yml.	2025-12-10 15:11:49 +08:00
Dong Bin	5ef8f7ddaf	fix: replace icon resource include with semi:Icons in Index.axaml (#707 )	2025-12-09 16:06:04 +08:00
Zhang Dian	ba9dd0a574	chore: turn on CPM & slnx.	2025-12-09 13:58:01 +08:00
Dong Bin	f784a2c927	fix: try to fix wasm deployment issue. (#698 )	2025-11-17 11:23:45 +08:00
Zhang Dian	69cc9b9ca3	misc: bump version.	2025-11-15 15:18:45 +08:00
Zhang Dian	9226858cda	misc: bump version.	2025-11-15 14:58:50 +08:00
Copilot	7f81aa3bde	Sync upstream: Move ContentPresenter.RecognizesAccessKey to style setters (#696 ) * Initial plan * Move ContentPresenter.RecognizeAccessKey from local value to style Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com>	2025-11-12 20:08:34 +08:00
Dong Bin	bc37be16ac	Merge pull request #695 from irihitech/AITag Add AI style - Colorful & Gradient to TagLabel	2025-11-11 21:34:04 +08:00
Zhang Dian	7a831d35f7	feat: add AI style - Colorful & Gradient to TagLabel.	2025-11-11 19:06:17 +08:00
Dong Bin	5f8357ecbc	Merge pull request #694 from irihitech/AIButton add AI style - Colorful Button	2025-11-11 16:07:11 +08:00
Zhang Dian	4c7caa6dbf	misc: revert SplitButton.	2025-11-11 15:50:32 +08:00
Zhang Dian	445b31893e	feat: enhance button styles with AI Colorful classes and update ButtonDemo layout.	2025-11-11 15:20:36 +08:00
Zhang Dian	301a4e954c	fix: NEW -> New.	2025-11-05 13:27:23 +08:00
Zhang Dian	dc80578c53	feat: add "NEW" label for AI Icons in IconDemo.	2025-11-05 13:24:21 +08:00
Zhang Dian	6c8825b3df	Add AI icons & Excel, PDF, Word icons (#691 ) * feat: add AI-related icons. * feat: add AI icons to IconDemo and update view model. * feat: rename icon files and update resource includes for consistency. * feat: refactor IconDemo to use dynamic tab control for icons. * fix: Filled Icons -> Fill Icons. * misc: remove commas in icon Path. * feat: add Excel, PDF, and Word icons.	2025-11-05 12:55:01 +08:00
Zhang Dian	aa105337fa	Merge pull request #690 from irihitech/typo PointerOver -> Pointerover	2025-11-04 14:53:17 +08:00
Copilot	f92b5f4373	Add AI-related color resources to theme palette and demo (#689 ) * Initial plan * Add AI-related color resources for Light and Dark themes Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> * Fix gradient angle to correctly represent 278 degrees Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> * Fix gradient angle and add AI resources to palette demo Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> * Add AI General gradients section to palette demo UI Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> * feat: unify gradient initialization. * feat: add AI-related color resources for Light and Dark themes. * feat: add AI-related color tokens to ColorTokens and PaletteDemo * Rename AI token names from Ai to AI (capital) Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> * fix: fix AI-related color tokens names. --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> Co-authored-by: Dong Bin <popmessiah@hotmail.com> Co-authored-by: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>	2025-11-03 15:18:49 +08:00
Dong Bin	bbff875d9c	Merge pull request #684 from irihitech/copilot/update-readme-compatibility Update README to indicate 11.3.7 is only compatible with Avalonia 11.3.7	2025-10-19 19:58:04 +08:00
copilot-swe-agent[bot]	df75863ac5	Add version 11.3.7 to README compatibility tables Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com>	2025-10-19 11:53:54 +00:00
copilot-swe-agent[bot]	c04e5e8579	Initial plan	2025-10-19 11:51:45 +00:00
Dong Bin	9fca51b30d	Merge pull request #681 from irihitech/fix-679 Using ResourceDictionary.SetItems to improve Locale switching	2025-10-17 07:25:19 +08:00
Zhang Dian	0ea632437d	fix: fix copilot comment.	2025-10-16 16:12:40 +08:00
Zhang Dian	c0277a7004	feat: using ResourceDictionary.SetItems to improve Locale switching.	2025-10-16 15:28:45 +08:00
Zhang Dian	2c527dc598	fix: fix README badges for ColorPicker, DataGrid, and TreeDataGrid.	2025-10-09 19:54:35 +08:00
Copilot	ab2cef9dc4	Add README files to NuGet packages (#677 ) * Initial plan * Add README files to NuGet packages for Semi.Avalonia, Semi.Avalonia.DataGrid, and Semi.Avalonia.ColorPicker Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> * Restore Package.props import to reduce code duplication Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> * Add README file to Semi.Avalonia.TreeDataGrid package Co-authored-by: zdpcdt <54255897+zdpcdt@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> Co-authored-by: zdpcdt <54255897+zdpcdt@users.noreply.github.com>	2025-10-09 19:47:10 +08:00
Dong Bin	86daf6b428	Merge pull request #675 from zdpcdt/android Upgrade to .NET 9.0 for Android and fix Fonts issue.	2025-10-07 17:21:20 +08:00
Zhang Dian	8f7cdf52b4	feat: upgrade to .NET 9.0 for Android and fix Fonts issue.	2025-10-07 15:35:12 +08:00
Zhang Dian	176430f95f	fix: fix web demo issue#674. upgrade web demo to .NET 9.0 and update GitHub Actions to use checkout@v5.	2025-10-07 13:20:31 +08:00
Zhang Dian	1062175204	misc: bump version.	2025-10-04 11:33:54 +08:00
Zhang Dian	0dda40d322	Merge pull request #672 from irihitech/split ready for Avalonia 11.3.7	2025-10-04 11:30:33 +08:00
Zhang Dian	37feb8a9a7	feat: set HorizontalAlignment to Stretch for PanelPlacementSelector in SplitViewDemo.	2025-10-04 11:21:42 +08:00
Zhang Dian	c632c6c1f5	feat: upgrade Avalonia.Controls.DataGrid to 11.3.7.	2025-10-04 11:19:25 +08:00
Zhang Dian	be2b25a94b	feat: implement IsEditable for ComboBox.	2025-10-04 11:11:07 +08:00
rabbitism	47c6899b94	fix: fix copilot comments.	2025-10-04 10:58:32 +08:00
rabbitism	975d14a36f	feat: upgrade to 11.3.7, implement splitview changes.	2025-10-04 10:48:38 +08:00
Dong Bin	7a13de00a6	Merge pull request #669 from irihitech/trayicon Designed a new TrayIcon and NativeMenu for macOS	2025-09-29 15:29:50 +08:00
Zhang Dian	f7ce4aef30	feat: update application icons for Android and Desktop projects.	2025-09-29 01:33:53 +08:00
Zhang Dian	f9a85734d1	feat: add Activate command to ApplicationViewModel and bind to TrayIcon.	2025-09-29 01:33:18 +08:00
Zhang Dian	9dd846f6be	feat: add JumpTo functionality in ApplicationViewModel and integrate with menu.	2025-09-28 18:11:55 +08:00
Zhang Dian	5384de7b23	feat: update TrayIcon in macOS.	2025-09-28 16:29:02 +08:00
Dong Bin	7ccb6fd41a	Merge pull request #668 from irihitech/clean Reduce compile warning count	2025-09-27 14:27:15 +08:00
Zhang Dian	521ed1bd0f	misc: reduce publish warning.	2025-09-26 02:10:19 +08:00
Zhang Dian	55d472300e	misc: remove x:CompileBindings attribute from multiple XAML files.	2025-09-26 02:10:16 +08:00
Dong Bin	a45f50005c	Merge pull request #667 from irihitech/variable Add search functionality to VariablesDemo	2025-09-26 00:14:29 +08:00
Zhang Dian	cd9daf11da	feat: add search functionality to VariablesDemo and update layout.	2025-09-25 18:46:24 +08:00
Zhang Dian	1c69f53c3c	misc: bump version.	2025-09-20 18:13:23 +08:00
Dong Bin	8da2e44d4c	Merge pull request #664 from irihitech/11.2.1.10 ready for 11.2.1.10	2025-09-20 18:08:36 +08:00
Zhang Dian	6f2129639a	misc: using AvaloniaUseCompiledBindingsByDefault.	2025-09-20 18:00:04 +08:00
Zhang Dian	865b453b65	misc: add SemiBorderRadiusSpacingExtraSmall for tokens.	2025-09-20 17:49:54 +08:00
Zhang Dian	5622069446	misc: remove useless theme.	2025-09-20 17:49:20 +08:00
Zhang Dian	76a3d4207f	misc: replace Path with PathIcon in DataValidationErrors.	2025-09-20 17:47:14 +08:00
Aytharn	513bbba154	Merge pull request #660 from Aytharn/aytharn/localization-help This pull request adds additional localisation resources	2025-09-20 17:35:38 +08:00
Dong Bin	727fedaedf	Merge pull request #653 from shatyuka/main fix: fix controls under TextBox inheriting Ibeam cursor	2025-09-04 14:57:26 +08:00
shatyuka	3082ef9ad0	fix: fix controls under TextBox inheriting Ibeam cursor	2025-08-29 18:54:41 +08:00