feat: enhance MenuItem icon.

* feat: add tray demo, change icon.

* feat: include favicon.

.github/workflows/deploy.yml

@@ -4,10 +4,7 @@ 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
 on:
-  push:
-    branches: [ "action/deploy" ]
-  pull_request:
-    branches: [ "action/deploy" ]
+  workflow_dispatch:
 
 jobs:
   deploy-to-github-pages:
@@ -28,7 +25,7 @@ jobs:
         run: dotnet publish $PROJECT_PATH -c Release --nologo
 
       - name: Change base-tag in index.html
-        run: sed -i 's/<base href="\/" \/>/<base href="\/Semi.Avalonia\/" \/>/g' $OUTPUT_PATH/index.html
+        run: sed -i 's#<base href="/" />#<base href="/Semi.Avalonia/" />#g' $OUTPUT_PATH/index.html
 
       - name: copy index.html to 404.html
         run: cp $OUTPUT_PATH/index.html $OUTPUT_PATH/404.html
@@ -39,6 +36,7 @@ jobs:
       - name: Commit wwwroot to GitHub Pages
         uses: JamesIves/github-pages-deploy-action@v4.5.0
         with:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          BRANCH: gh-pages
-          FOLDER: ${{ env.OUTPUT_PATH }}
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          branch: gh-pages
+          folder: ${{ env.OUTPUT_PATH }}
+          single-commit: true

.github/workflows/pack-nightly.yml

@@ -0,0 +1,73 @@
+name: Pack Nightly
+
+on:
+  workflow_dispatch:
+    inputs:
+      Version_Prefix:
+        description: 'Version Prefix'
+        required: true
+        default: '11.2.999'
+        type: string
+      Semi_Avalonia:
+        description: 'Pack Semi.Avalonia'
+        required: true
+        default: 'true'
+        type: boolean
+      Semi_Avalonia_ColorPicker:
+        description: 'Pack Semi.Avalonia.ColorPicker'
+        required: true
+        default: 'true'
+        type: boolean
+      Semi_Avalonia_DataGrid:
+        description: 'Pack Semi.Avalonia.DataGrid'
+        required: true
+        default: 'true'
+        type: boolean
+      Semi_Avalonia_TreeDataGrid:
+        description: 'Pack Semi.Avalonia.TreeDataGrid'
+        required: true
+        default: 'false'
+        type: boolean
+
+jobs:
+  Pack_Nightly:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4.1.1
+
+      - name: Get Version
+        run: |
+          VERSION_TIMESTAMP=$(date +'%Y%m%d%H%M%S')
+          VERSION="${{ github.event.inputs.Version_Prefix }}-nightly-${VERSION_TIMESTAMP}"
+          echo "VERSION=$VERSION" >> $GITHUB_ENV
+
+      - name: Pack Semi.Avalonia
+        if: ${{ github.event.inputs.Semi_Avalonia == 'true' }}
+        run: dotnet pack ./src/Semi.Avalonia -o ./nugets /p:Version=${{ env.VERSION }}
+
+      - name: Pack Semi.Avalonia.ColorPicker
+        if: ${{ github.event.inputs.Semi_Avalonia_ColorPicker == 'true' }}
+        run: dotnet pack ./src/Semi.Avalonia.ColorPicker -o ./nugets /p:Version=${{ env.VERSION }}
+
+      - name: Pack Semi.Avalonia.DataGrid
+        if: ${{ github.event.inputs.Semi_Avalonia_DataGrid == 'true' }}
+        run: dotnet pack ./src/Semi.Avalonia.DataGrid -o ./nugets /p:Version=${{ env.VERSION }}
+
+      - name: Pack Semi.Avalonia.TreeDataGrid
+        if: ${{ github.event.inputs.Semi_Avalonia_TreeDataGrid == 'true' }}
+        run: dotnet pack ./src/Semi.Avalonia.TreeDataGrid -o ./nugets /p:Version=${{ env.VERSION }}
+
+      - name: Add NuGet Source
+        run: dotnet nuget add source ${{ secrets.IRIHI_NUGET_NIGHTLY_FEED }} -n irihi.tech -u ${{ secrets.IRIHI_NUGET_USERNAME }} -p ${{ secrets.IRIHI_NUGET_PASSWORD }} --store-password-in-clear-text
+
+      - name: Publish Nightly Package
+        run: dotnet nuget push "./nugets/*.nupkg" --api-key ${{ secrets.IRIHI_NUGET_API_KEY }} --source irihi.tech --skip-duplicate
+
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v4.3.1
+        with:
+          name: nugets
+          path: ./nugets
+        if: always()

.github/workflows/pack.yml

@@ -1,58 +1,59 @@
-name: Pack
+name: Pack to NuGet
 
 on:
-  push:
-    branches: [ "action/pack" ]
-  pull_request:
-    branches: [ "action/pack" ]
+  workflow_dispatch:
+    inputs:
+      Semi_Avalonia:
+        description: 'Pack Semi.Avalonia'
+        required: true
+        default: 'true'
+        type: boolean
+      Semi_Avalonia_ColorPicker:
+        description: 'Pack Semi.Avalonia.ColorPicker'
+        required: true
+        default: 'true'
+        type: boolean
+      Semi_Avalonia_DataGrid:
+        description: 'Pack Semi.Avalonia.DataGrid'
+        required: true
+        default: 'true'
+        type: boolean
+      Semi_Avalonia_TreeDataGrid:
+        description: 'Pack Semi.Avalonia.TreeDataGrid'
+        required: true
+        default: 'false'
+        type: boolean
 
 jobs:
-  nuget_desktop:
-    runs-on: windows-latest
+  Pack_to_NuGet:
+    runs-on: ubuntu-latest
+
     steps:
       - name: Checkout
         uses: actions/checkout@v4.1.1
 
-      - name: Nuget Semi.Avalonia
+      - name: Pack Semi.Avalonia
+        if: ${{ github.event.inputs.Semi_Avalonia == 'true' }}
         run: dotnet pack ./src/Semi.Avalonia -o ./nugets
 
-      - name: Nuget Semi.Avalonia.ColorPicker
-        run: dotnet pack ./src/Semi.Avalonia.ColorPicker  -o ./nugets
+      - name: Pack Semi.Avalonia.ColorPicker
+        if: ${{ github.event.inputs.Semi_Avalonia_ColorPicker == 'true' }}
+        run: dotnet pack ./src/Semi.Avalonia.ColorPicker -o ./nugets
 
-      - name: Nuget Semi.Avalonia.DataGrid
-        run: dotnet pack ./src/Semi.Avalonia.DataGrid  -o ./nugets
+      - name: Pack Semi.Avalonia.DataGrid
+        if: ${{ github.event.inputs.Semi_Avalonia_DataGrid == 'true' }}
+        run: dotnet pack ./src/Semi.Avalonia.DataGrid -o ./nugets
 
-      - name: Nuget Semi.Avalonia.TreeDataGrid
-        run: dotnet pack ./src/Semi.Avalonia.TreeDataGrid  -o ./nugets
+      - name: Pack Semi.Avalonia.TreeDataGrid
+        if: ${{ github.event.inputs.Semi_Avalonia_TreeDataGrid == 'true' }}
+        run: dotnet pack ./src/Semi.Avalonia.TreeDataGrid -o ./nugets
 
-      - name: Desktop
-        run: dotnet publish ./demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true --self-contained true
+      - name: Publish NuGet package
+        run: dotnet nuget push "./nugets/*.nupkg" --api-key ${{ secrets.NUGET_ORG_API_KEY }} --source https://api.nuget.org/v3/index.json --skip-duplicate
 
       - name: Upload a Build Artifact
         uses: actions/upload-artifact@v4.3.1
         with:
-          name: nuget_desktop
-          path: |
-            ./nugets
-            ./**/publish/*.exe
-
-  android:
-    runs-on: windows-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4.1.1
-
-      - name: CD Android
-        run: cd ./demo/Semi.Avalonia.Demo.Android
-
-      - name: Restore Dependencies
-        run: dotnet restore
-
-      - name: Build
-        run: dotnet publish ./demo/Semi.Avalonia.Demo.Android -c Release -f net8.0-android --no-restore
-
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.3.1
-        with:
-          name: android
-          path: ./**/publish/*Signed.apk
+          name: nugets
+          path: ./nugets
+        if: always()

.github/workflows/publish.yml

@@ -0,0 +1,118 @@
+name: Publish Demo
+
+on:
+  workflow_dispatch:
+    inputs:
+      platform:
+        description: 'Platform to publish'
+        required: true
+        default: 'all'
+        type: choice
+        options:
+          - 'windows'
+          - 'linux'
+          - 'android'
+          - 'all'
+      include_aot:
+        description: 'Include Windows AOT packaging'
+        required: true
+        default: true
+        type: boolean
+      include_drm:
+        description: 'Include Linux DRM packaging'
+        required: true
+        default: true
+        type: boolean
+
+jobs:
+  windows:
+    if: ${{ github.event.inputs.platform == 'windows' || github.event.inputs.platform == 'all' }}
+    runs-on: windows-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4.1.1
+
+      - name: Make upload directory
+        run: mkdir upload
+
+      - name: Publish win-x64
+        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true -o ./publish/win64
+
+      - name: Zip win-x64
+        run: |
+          $files = Get-ChildItem -Path ./publish/win64/* -Recurse -Exclude *.pdb
+          Compress-Archive -Path $files.FullName -DestinationPath ./upload/Semi.Avalonia.Demo.Desktop.win-x64.zip
+
+      - name: Enable Native AOT in .csproj
+        if: ${{ github.event.inputs.include_aot == 'true' }}
+        run: |
+          sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
+          sed -i 's#<!--<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>-->#<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
+
+      - name: Publish win-x64 AOT
+        if: ${{ github.event.inputs.include_aot == 'true' }}
+        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release -o ./publish/win64-aot
+
+      - name: Zip win-x64 AOT
+        if: ${{ github.event.inputs.include_aot == 'true' }}
+        run: |
+          $files = Get-ChildItem -Path ./publish/win64-aot/* -Recurse -Exclude *.pdb
+          Compress-Archive -Path $files.FullName -DestinationPath ./upload/Semi.Avalonia.Demo.Desktop.win-x64.NativeAOT.zip
+
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v4.3.1
+        with:
+          name: windows
+          path: ./upload
+
+  linux:
+    if: ${{ github.event.inputs.platform == 'linux' || github.event.inputs.platform == 'all' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4.1.1
+
+      - name: Make upload directory
+        run: mkdir upload
+
+      - name: Publish linux-x64
+        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r linux-x64 -c Release --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true -o ./publish/linux64
+
+      - name: Zip linux-x64
+        run: zip -j -r ./upload/Semi.Avalonia.Demo.Desktop.linux-x64.zip ./publish/linux64 -x "*.pdb"
+
+      - name: Publish linux-x64 DRM
+        if: ${{ github.event.inputs.include_drm == 'true' }}
+        run: dotnet publish demo/Semi.Avalonia.Demo.Drm -r linux-x64 -c Release --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true -o ./publish/drm
+
+      - name: Zip linux-x64 DRM
+        if: ${{ github.event.inputs.include_drm == 'true' }}
+        run: zip -j -r ./upload/Semi.Avalonia.Demo.Drm.linux-x64.zip ./publish/drm -x "*.pdb"
+
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v4.3.1
+        with:
+          name: linux
+          path: ./upload
+
+  android:
+    if: ${{ github.event.inputs.platform == 'android' || github.event.inputs.platform == 'all' }}
+    runs-on: windows-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4.1.1
+
+      - name: CD Android
+        run: cd ./demo/Semi.Avalonia.Demo.Android
+
+      - name: Restore Dependencies
+        run: dotnet restore
+
+      - 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
+
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v4.3.1
+        with:
+          name: android
+          path: ./publish/*Signed.apk

.github/workflows/release-tag.yml

@@ -0,0 +1,149 @@
+name: Release Tag
+
+on:
+  push:
+    tags:
+      - "v[0-9]+.[0-9]+.[0-9]+.[0-9]+"
+  workflow_dispatch:
+
+jobs:
+  pack:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Pack Semi.Avalonia
+        run: dotnet pack ./src/Semi.Avalonia -o ./nugets
+
+      - name: Pack Semi.Avalonia.ColorPicker
+        run: dotnet pack ./src/Semi.Avalonia.ColorPicker -o ./nugets
+
+      - name: Pack Semi.Avalonia.DataGrid
+        run: dotnet pack ./src/Semi.Avalonia.DataGrid -o ./nugets
+
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: nugets
+          path: ./nugets
+
+  publish-windows:
+    runs-on: windows-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Make upload directory
+        run: mkdir upload
+
+      - name: Publish win-x64
+        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true -o ./publish/win64
+
+      - name: Zip win-x64
+        run: |
+          $files = Get-ChildItem -Path ./publish/win64/* -Recurse -Exclude *.pdb
+          Compress-Archive -Path $files.FullName -DestinationPath ./upload/Semi.Avalonia.Demo.Desktop.win-x64.zip
+
+      - 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
+          sed -i 's#<!--<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>-->#<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
+
+      - name: Publish win-x64 AOT
+        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release -o ./publish/win64-aot
+
+      - name: Zip win-x64 AOT
+        run: |
+          $files = Get-ChildItem -Path ./publish/win64-aot/* -Recurse -Exclude *.pdb
+          Compress-Archive -Path $files.FullName -DestinationPath ./upload/Semi.Avalonia.Demo.Desktop.win-x64.NativeAOT.zip
+
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: windows
+          path: ./upload
+
+  publish-linux:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Make upload directory
+        run: mkdir upload
+
+      - name: Publish linux-x64
+        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r linux-x64 -c Release --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true -o ./publish/linux64
+
+      - name: Zip linux-x64
+        run: zip -j -r ./upload/Semi.Avalonia.Demo.Desktop.linux-x64.zip ./publish/linux64 -x "*.pdb"
+
+      - name: Publish linux-x64 DRM
+        run: dotnet publish demo/Semi.Avalonia.Demo.Drm -r linux-x64 -c Release --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true -o ./publish/drm
+
+      - name: Zip linux-x64 DRM
+        run: zip -j -r ./upload/Semi.Avalonia.Demo.Drm.linux-x64.zip ./publish/drm -x "*.pdb"
+
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: linux
+          path: ./upload
+
+  publish-android:
+    runs-on: windows-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: CD Android
+        run: cd ./demo/Semi.Avalonia.Demo.Android
+
+      - name: Restore Dependencies
+        run: dotnet restore
+
+      - 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
+
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: android
+          path: ./publish/*Signed.apk
+
+  draft-release:
+    needs: [ pack, publish-windows, publish-linux, publish-android ]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download nugets Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: nugets
+
+      - name: Download windows Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: windows
+
+      - name: Download linux Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: linux
+
+      - name: Download android Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: android
+
+      - name: Release
+        uses: softprops/action-gh-release@v2
+        if: startsWith(github.ref, 'refs/tags/') || github.event_name == 'workflow_dispatch'
+        with:
+          generate_release_notes: true
+          draft: true
+          files: |
+            *.nupkg
+            *.zip
+            *.apk

README.md

@@ -2,6 +2,7 @@
 
 [![Semi Avalonia](https://img.shields.io/nuget/v/Semi.Avalonia.svg?color=red&style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia/)
 [![Semi Avalonia](https://img.shields.io/nuget/dt/Semi.Avalonia.svg?style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia/)
+[![GitCode](https://gitcode.com/IRIHI_Technology/Semi.Avalonia/star/badge.svg)](https://gitcode.com/IRIHI_Technology/Semi.Avalonia)
 
 [中文](./README_CN.md)
 
@@ -26,11 +27,13 @@ dotnet add package Semi.Avalonia
 Include Semi Design Styles in application:
 
 ```xaml
-<Application.Styles>
-<!-- You can still reference in old way.  -->
-<!-- <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" /> -->
-    <semi:SemiTheme Locale="zh-cn" />
-</Application.Styles>
+<Application
+    ...
+    xmlns:semi="https://irihi.tech/semi">
+    <Application.Styles>
+        <semi:SemiTheme Locale="zh-CN" />
+    </Application.Styles>
+</Application>
 ```
 
 That's all.
@@ -66,6 +69,8 @@ We offer limited free community support for Semi Avalonia and Ursa. If you have
 
 | Semi Design Version | Avalonia Version |
 |:--------------------|:-----------------|
+| 11.2.1              | >=11.2.1         |
+| 11.2.0              | 11.2.0           |
 | 11.1.0              | >=11.1.0         |
 | 11.0.7              | >=11.0.7         |
 | 11.0.1              | <=11.0.6         |

README_CN.md

@@ -2,6 +2,7 @@
 
 [![Semi Avalonia](https://img.shields.io/nuget/v/Semi.Avalonia.svg?color=red&style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia/)
 [![Semi Avalonia](https://img.shields.io/nuget/dt/Semi.Avalonia.svg?style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia/)
+[![GitCode](https://gitcode.com/IRIHI_Technology/Semi.Avalonia/star/badge.svg)](https://gitcode.com/IRIHI_Technology/Semi.Avalonia)
 
 [English](./README.md)
 
@@ -26,11 +27,13 @@ dotnet add package Semi.Avalonia
 在样式中引用 Semi 主题：
 
 ```xaml
-<Application.Styles>
-<!-- 您仍然可以使用旧版方式引用  -->
-<!-- <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" /> -->
-    <semi:SemiTheme Locale="zh-cn" />
-</Application.Styles>
+<Application
+    ...
+    xmlns:semi="https://irihi.tech/semi">
+    <Application.Styles>
+        <semi:SemiTheme Locale="zh-CN" />
+    </Application.Styles>
+</Application>
 ```
 
 这样就可以了。
@@ -54,7 +57,6 @@ dotnet add package Semi.Avalonia.TreeDataGrid
 ## 示例
 
 您可以从 Semi Avalonia 的 release 页下载并试用 Semi Avalonia 的展示应用。
-
 <https://github.com/irihitech/Semi.Avalonia/releases>
 
 ## 社区支持
@@ -63,11 +65,12 @@ dotnet add package Semi.Avalonia.TreeDataGrid
 
 ![FeiShu](./docs/community-support.png)
 
-
 ## 版本兼容性
 
 | Semi Design Version | Avalonia Version |
 |:--------------------|:-----------------|
+| 11.2.1              | >=11.2.1         |
+| 11.2.0              | 11.2.0           |
 | 11.1.0              | >=11.1.0         |
 | 11.0.7              | >=11.0.7         |
 | 11.0.1              | <=11.0.6         |

Semi.Avalonia.sln

@@ -12,6 +12,15 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Files", "Solution
 		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}"

demo/Directory.Build.props

@@ -1,6 +1,6 @@
 <Project>
-  <PropertyGroup>
-    <Nullable>enable</Nullable>
-    <AvaloniaVersion>11.1.0</AvaloniaVersion>
-  </PropertyGroup>
+    <PropertyGroup>
+        <AvaloniaVersion>11.2.3</AvaloniaVersion>
+        <CommunityToolkitVersion>8.4.0</CommunityToolkitVersion>
+    </PropertyGroup>
 </Project>

demo/Semi.Avalonia.Demo.Desktop/Program.cs

@@ -1,13 +1,11 @@
-using Avalonia;
+using System;
+using Avalonia;
 using Avalonia.Dialogs;
 using Avalonia.Media;
-using System;
-using System.Linq;
-using System.Threading;
 
 namespace Semi.Avalonia.Demo.Desktop;
 
-class Program
+sealed class Program
 {
     // Initialization code. Don't use any Avalonia, third-party APIs or any
     // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
@@ -16,13 +14,13 @@ class Program
     public static void Main(string[] args) => BuildAvaloniaApp()
         .With(new FontManagerOptions
         {
-            FontFallbacks = new[]
-            {
+            FontFallbacks =
+            [
                 new FontFallback
                 {
                     FontFamily = new FontFamily("Microsoft YaHei")
                 }
-            }
+            ]
         })
         .StartWithClassicDesktopLifetime(args);
 
@@ -33,4 +31,4 @@ class Program
             .UsePlatformDetect()
             .With(new Win32PlatformOptions())
             .LogToTrace();
-}
+}

demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj

@@ -5,10 +5,8 @@
         <Nullable>enable</Nullable>
         <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
         <!-- Uncomment below to enable Native AOT compilation-->
-        <!--
-        <PublishAot>true</PublishAot>
-        <IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>
-        -->
+        <!--<PublishAot>true</PublishAot>-->
+        <!--<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>-->
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
@@ -21,16 +19,14 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <TrimmerRootDescriptor Include="Roots.xml" />
+        <TrimmerRootDescriptor Include="Roots.xml"/>
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
-        <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)"/>
     </ItemGroup>
 
     <ItemGroup>
-        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
+        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj"/>
     </ItemGroup>
 </Project>

demo/Semi.Avalonia.Demo.Drm/Program.cs

@@ -3,10 +3,11 @@ using System.Globalization;
 using System.Linq;
 using System.Threading;
 using Avalonia;
+using Avalonia.Dialogs;
 
 namespace Semi.Avalonia.Demo.Drm;
 
-class Program
+sealed class Program
 {
     // Initialization code. Don't use any Avalonia, third-party APIs or any
     // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
@@ -28,7 +29,7 @@ class Program
         if (args.Contains("--drm"))
         {
             SilenceConsole();
-            return builder.StartLinuxDrm(args: args, card: "/dev/dri/card1", scaling: GetScaling());
+            return builder.StartLinuxDrm(args, scaling: GetScaling());
         }
 
         return builder.StartWithClassicDesktopLifetime(args);
@@ -37,7 +38,9 @@ class Program
     // Avalonia configuration, don't remove; also used by visual designer.
     public static AppBuilder BuildAvaloniaApp()
         => AppBuilder.Configure<App>()
+            .UseManagedSystemDialogs()
             .UsePlatformDetect()
+            .With(new Win32PlatformOptions())
             .LogToTrace();
 
     private static void SilenceConsole()

demo/Semi.Avalonia.Demo.Drm/README.md

@@ -0,0 +1,162 @@
+# DRM Start Steps
+
+[中文](README_CN.md)
+
+(Ubuntu 20.04 live server linux-x64 Virtual Machine Test Success)  
+(Orange Pi Zero2 Ubuntu20.04-arm64 Test Success)
+
+[Avalonia Official Reference Document](https://docs.avaloniaui.net/docs/next/guides/platforms/rpi/running-on-raspbian-lite-via-drm)
+
+## Setup Running Environment
+
+1. Run the following commands on the Linux side
+```bash
+sudo apt update
+sudo apt upgrade
+sudo reboot
+sudo apt-get install libgbm1 libgl1-mesa-dri libegl1-mesa libinput10
+```
+
+2. Install the test tool (if a colored cube appears, the environment is installed)
+```bash
+sudo apt-get install kmscube
+sudo kmscube
+```
+
+3. [Install .NET Runtime](https://learn.microsoft.com/dotnet/core/install/linux?WT.mc_id=dotnet-35129-website)
+
+4. Add the Avalonia.LinuxFramebuffer package in NuGet
+
+```bash
+dotnet add package Avalonia.LinuxFramebuffer
+```
+
+5. Add StartLinuxDrm code
+
+```csharp
+public static int Main(string[] args)
+{
+    var builder = BuildAvaloniaApp();
+    if (args.Contains("--drm"))
+    {
+        SilenceConsole();
+        // By default, Avalonia will try to detect output card automatically.
+        // But you can specify one, for example "/dev/dri/card1".
+        return builder.StartLinuxDrm(args: args, card: null, scaling: 1.0);
+    }
+
+    return builder.StartWithClassicDesktopLifetime(args);
+}
+
+private static void SilenceConsole()
+{
+    new Thread(() =>
+        {
+            Console.CursorVisible = false;
+            while (true)
+                Console.ReadKey(true);
+        })
+        { IsBackground = true }.Start();
+}
+```
+
+6. Publish the app to Linux
+
+```bash
+dotnet publish demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj -c Release -r linux-x64 --sc -p:PublishSingleFile=true -p:IncludeNativeLibrariesForSelfExtract=true
+```
+
+Add the following code to the csproj file for AOT publishing
+
+```xml
+<PropertyGroup>
+    <PublishAot>true</PublishAot>
+    <IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>
+</PropertyGroup>
+```
+
+```bash
+dotnet publish demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj -c Release -r linu-x64
+```
+
+7. Run the program
+
+```bash
+sudo ./Semi.Avalonia.Demo.Drm --drm
+```
+
+## Troubleshooting
+
+1. Error message
+
+> Unhandled exception. Avalonia.Markup.Xaml.XamlLoadException: No precompiled XAML found for avares://Semi.Avalonia/Themes/Light/Light.axaml (baseUri: avares://Semi.Avalonia/Themes/Index.axaml), make sure to specify x:Class and include your XAML file as AvaloniaResource
+
+Solution:
+
+If you use the Semi release file, do not trim it, otherwise an error will occur.
+
+24.8.18 update: This issue has been fixed.
+
+2. Error message
+
+> Unhandled exception. System.TypeInitializationException: The type initializer for 'SkiaSharp.SKImageInfo' threw an exception.**
+    **--->System.DllNotFoundException: Unable to load shared library 'libSkiaSharp' or one of its dependencies.In order to help diagnose loading problems, consider setting the LD_DEBUG environment variable: liblibSkiaSharp: cannot open shared object file: No such file or directory
+    at SkiaSharp.SkiaApi.sk_colortype_get_default_8888()
+    at SkiaSharp.SKImageInfo..cctor()
+
+Solution:
+
+Linux CLI installation
+
+```bash
+sudo apt-get install -y libfontconfig1  
+```
+[Reference](https://github.com/mono/SkiaSharp/issues/509)
+
+3. Error message
+
+> Permission denied
+
+Solution:
+
+add permission
+
+```bash
+sudo chmod +x ./Semi.Avalonia.Demo.Drm
+```
+
+4. Error message
+
+> Unhandled exception. System.ComponentModel.Win32Exception (95): drmModeGetResources failed
+at Avalonia.LinuxFramebuffer.Output.DrmResources..ctor(Int32 fd, Boolean connectorsForceProbe) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 91
+at Avalonia.LinuxFramebuffer.Output.DrmCard.GetResources(Boolean connectorsForceProbe) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 171
+at Avalonia.LinuxFramebuffer.Output.DrmOutput..ctor(String path, Boolean connectorsForceProbe, DrmOutputOptions options) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmOutput.cs:line 60
+at LinuxFramebufferPlatformExtensions.StartLinuxDrm(AppBuilder builder, String[] args, String card, Double scaling, IInputBackend inputBackend) in /_/src/Linux/Avalonia.LinuxFramebuffer/LinuxFramebufferPlatform.cs:line 166
+at Semi.Avalonia.Demo.Drm.Program.Main(String[] args)
+
+Solution:
+
+The `program.cs` graphics card path is incorrect, it may not be `dev/dri/card1`, see if there are other graphics cards in the `dev/dri` directory such as `card0`.
+
+24.8.18 update: Avalonia will now automatically detect the graphics card path, so you don't need to specify the graphics card path.
+
+```csharp
+return builder.StartLinuxDrm(args: args, card: null, scaling: 1.0);
+```
+
+5. Error message
+>Unhandled exception. System.ComponentModel.Win32Exception (2): Couldn't open /dev/dri/card1
+at Avalonia.LinuxFramebuffer.Output.DrmCard..ctor(String ) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 167
+at Avalonia.LinuxFramebuffer.Output.DrmOutput..ctor(String , Boolean , DrmOutputOptions ) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmOutput.cs:line 58
+at LinuxFramebufferPlatformExtensions.StartLinuxDrm(AppBuilder, String[], String , Double , IInputBackend ) in /_/src/Linux/Avalonia.LinuxFramebuffer/LinuxFramebufferPlatform.cs:line 166
+at Semi.Avalonia.Demo.Drm.Program.Main(String[])
+
+Solution:
+
+Unable to open `/dev/dri/card1`, may be the graphics card is mounted to another folder.
+
+24.8.18 update: Avalonia will now automatically detect the graphics card path, so you don't need to specify the graphics card path.
+
+```csharp
+return builder.StartLinuxDrm(args: args, card: null, scaling: 1.0);
+```

demo/Semi.Avalonia.Demo.Drm/README_CN.md

@@ -0,0 +1,162 @@
+# DRM启动步骤
+
+[English](README.md)
+
+(Ubuntu 20.04 live server linux-x64 虚拟机测试成功)  
+(Orange Pi Zero2 Ubuntu20.04-arm64 测试成功)
+
+[Avalonia 官方参考文档](https://docs.avaloniaui.net/docs/next/guides/platforms/rpi/running-on-raspbian-lite-via-drm)
+
+## 搭建运行环境
+
+1. Linux端运行命令
+```bash
+sudo apt update
+sudo apt upgrade
+sudo reboot
+sudo apt-get install libgbm1 libgl1-mesa-dri libegl1-mesa libinput10
+```
+
+2. 安装测试工具(出现一个彩色立方体说明环境安装完成)  
+```bash
+sudo apt-get install kmscube
+sudo kmscube
+```
+
+3. [安装.net运行时](https://learn.microsoft.com/dotnet/core/install/linux?WT.mc_id=dotnet-35129-website)
+
+4. NuGet里面添加Avalonia.LinuxFramebuffer包
+
+```bash
+dotnet add package Avalonia.LinuxFramebuffer
+```
+
+5. 添加StartLinuxDrm代码
+
+```csharp
+public static int Main(string[] args)
+{
+    var builder = BuildAvaloniaApp();
+    if (args.Contains("--drm"))
+    {
+        SilenceConsole();
+        // By default, Avalonia will try to detect output card automatically.
+        // But you can specify one, for example "/dev/dri/card1".
+        return builder.StartLinuxDrm(args: args, card: null, scaling: 1.0);
+    }
+
+    return builder.StartWithClassicDesktopLifetime(args);
+}
+
+private static void SilenceConsole()
+{
+    new Thread(() =>
+        {
+            Console.CursorVisible = false;
+            while (true)
+                Console.ReadKey(true);
+        })
+        { IsBackground = true }.Start();
+}
+```
+
+6. 发布程序到Linux
+
+```bash
+dotnet publish demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj -c Release -r linux-x64 --sc -p:PublishSingleFile=true -p:IncludeNativeLibrariesForSelfExtract=true
+```
+
+AOT发布需要在csproj文件中添加以下代码
+
+```xml
+<PropertyGroup>
+    <PublishAot>true</PublishAot>
+    <IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>
+</PropertyGroup>
+```
+
+```bash
+dotnet publish demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj -c Release -r linu-x64
+```
+
+7. 运行程序
+
+```bash
+sudo ./Semi.Avalonia.Demo.Drm --drm
+```
+
+## 报错处理
+
+1. 报错内容
+
+> Unhandled exception. Avalonia.Markup.Xaml.XamlLoadException: No precompiled XAML found for avares://Semi.Avalonia/Themes/Light/Light.axaml (baseUri: avares://Semi.Avalonia/Themes/Index.axaml), make sure to specify x:Class and include your XAML file as AvaloniaResource
+
+解决方法：
+
+如果使用Semi发布文件不要裁剪，如果裁剪会报错。
+
+24.8.18更新：现在已经修复了这个问题。
+
+2. 报错内容
+
+> Unhandled exception. System.TypeInitializationException: The type initializer for 'SkiaSharp.SKImageInfo' threw an exception.**
+    **--->System.DllNotFoundException: Unable to load shared library 'libSkiaSharp' or one of its dependencies.In order to help diagnose loading problems, consider setting the LD_DEBUG environment variable: liblibSkiaSharp: cannot open shared object file: No such file or directory
+    at SkiaSharp.SkiaApi.sk_colortype_get_default_8888()
+    at SkiaSharp.SKImageInfo..cctor()
+
+解决方法：
+
+Linux 命令行安装
+
+```bash
+sudo apt-get install -y libfontconfig1  
+```
+
+[参考网址](https://github.com/mono/SkiaSharp/issues/509)
+
+3. 报错内容
+
+> Permission denied
+
+解决方法：
+
+添加执行权限
+```bash
+sudo chmod +x ./Semi.Avalonia.Demo.Drm
+```
+
+4. 报错内容
+
+> Unhandled exception. System.ComponentModel.Win32Exception (95): drmModeGetResources failed
+at Avalonia.LinuxFramebuffer.Output.DrmResources..ctor(Int32 fd, Boolean connectorsForceProbe) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 91
+at Avalonia.LinuxFramebuffer.Output.DrmCard.GetResources(Boolean connectorsForceProbe) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 171
+at Avalonia.LinuxFramebuffer.Output.DrmOutput..ctor(String path, Boolean connectorsForceProbe, DrmOutputOptions options) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmOutput.cs:line 60
+at LinuxFramebufferPlatformExtensions.StartLinuxDrm(AppBuilder builder, String[] args, String card, Double scaling, IInputBackend inputBackend) in /_/src/Linux/Avalonia.LinuxFramebuffer/LinuxFramebufferPlatform.cs:line 166
+at Semi.Avalonia.Demo.Drm.Program.Main(String[] args)
+
+解决方法：
+
+`program.cs`的显卡路径错误，可能不是`dev/dri/card1`，看在`dev/dri`目录下有无其他的显卡如`card0`。
+
+24.8.18更新：现在Avalonia会自动检测显卡路径，所以不需要指定显卡路径。
+
+```csharp
+return builder.StartLinuxDrm(args: args, card: null, scaling: 1.0);
+```
+
+5. 报错内容
+>Unhandled exception. System.ComponentModel.Win32Exception (2): Couldn't open /dev/dri/card1
+at Avalonia.LinuxFramebuffer.Output.DrmCard..ctor(String ) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 167
+at Avalonia.LinuxFramebuffer.Output.DrmOutput..ctor(String , Boolean , DrmOutputOptions ) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmOutput.cs:line 58
+at LinuxFramebufferPlatformExtensions.StartLinuxDrm(AppBuilder, String[], String , Double , IInputBackend ) in /_/src/Linux/Avalonia.LinuxFramebuffer/LinuxFramebufferPlatform.cs:line 166
+at Semi.Avalonia.Demo.Drm.Program.Main(String[])
+
+解决办法：
+
+找不到显卡路径`dev/dri/card1`，可能是显卡挂载到别的文件夹下了。
+
+24.8.18更新：现在Avalonia会自动检测显卡路径，所以不需要指定显卡路径。
+
+```csharp
+return builder.StartLinuxDrm(args: args, card: null, scaling: 1.0);
+```

demo/Semi.Avalonia.Demo.Drm/Roots.xml

@@ -0,0 +1,3 @@
+<linker>
+    <assembly fullname="Semi.Avalonia.Demo" preserve="All"/>
+</linker>

demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj

@@ -1,22 +1,33 @@
 <Project Sdk="Microsoft.NET.Sdk">
-  <PropertyGroup>
-    <OutputType>WinExe</OutputType>
-    <TargetFramework>net7.0</TargetFramework>
-    <Nullable>enable</Nullable>
-    <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
-    <ApplicationManifest>app.manifest</ApplicationManifest>
-  </PropertyGroup>
+    <PropertyGroup>
+        <OutputType>WinExe</OutputType>
+        <TargetFramework>net8.0</TargetFramework>
+        <Nullable>enable</Nullable>
+        <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
+        <!-- Uncomment below to enable Native AOT compilation-->
+        <!--<PublishAot>true</PublishAot>-->
+        <!--<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>-->
+    </PropertyGroup>
 
+    <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
+        <IsTrimmable>true</IsTrimmable>
+        <PublishTrimmed>true</PublishTrimmed>
+    </PropertyGroup>
 
-  <ItemGroup>
-    <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
-    <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-    <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
-    <PackageReference Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)" />
-  </ItemGroup>
+    <PropertyGroup>
+        <ApplicationManifest>app.manifest</ApplicationManifest>
+    </PropertyGroup>
 
+    <ItemGroup>
+        <TrimmerRootDescriptor Include="Roots.xml"/>
+    </ItemGroup>
 
-  <ItemGroup>
-    <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
-  </ItemGroup>
+    <ItemGroup>
+        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)"/>
+    </ItemGroup>
+
+    <ItemGroup>
+        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj"/>
+    </ItemGroup>
 </Project>

demo/Semi.Avalonia.Demo.Drm/使用方法.md

@@ -1,77 +0,0 @@
-# DRM启动步骤
-
-(Ubuntu18.04Server版本 虚拟机测试OK)  
-(Orange Pi Zero2 Ubuntu20.04-arm64 测试OK)
-
-Avalonia官方参考文档：https://docs.avaloniaui.net/docs/next/guides/platforms/rpi/running-on-raspbian-lite-via-drm
-
-1.Linux端运行命令  
-```
-sudo apt update  
-sudo apt upgrade  
-sudo reboot  
-sudo apt - get install libgbm1 libgl1 - mesa - dri libegl1 - mesa libinput10
-```
-
-2.安装测试工具测试(出现一个彩色立方体说明环境安装完成)  
-```
-sudo apt-get install kmscube
-sudo kmscube
-```
-
-3.安装.net运行时(参考网址：https://learn.microsoft.com/zh-cn/dotnet/core/install/linux?WT.mc_id=dotnet-35129-website)
-
-4.新建一个Avalonia项目，nuget里面添加Avalonia.LinuxFramebuffer包
-
-5.添加StartLinuxDrm代码(不知道怎么添加看Semi.Avalonia.Demo.Drm项目代码)
-
-6.发布程序到Linux(安装.net，怎么运行这些省略)
-            
-7.运行 ./Semi.Avalonia.Demo.Drm --drm
-
-## 报错处理：
-
-1. 报错内容
-
->Unhandled exception. Avalonia.Markup.Xaml.XamlLoadException: No precompiled XAML found for avares://Semi.Avalonia/Themes/Light/Light.axaml (baseUri: avares://Semi.Avalonia/Themes/Index.axaml), make sure to specify x:Class and include your XAML file as AvaloniaResource
-
- 解决方法：
->如果使用Semi发布文件不要裁剪，如果裁剪会报错
-         
-
-2. 报错内容
->Unhandled exception. System.TypeInitializationException: The type initializer for 'SkiaSharp.SKImageInfo' threw an exception.**
-    **--->System.DllNotFoundException: Unable to load shared library 'libSkiaSharp' or one of its dependencies.In order to help diagnose loading problems, consider setting the LD_DEBUG environment variable: liblibSkiaSharp: cannot open shared object file: No such file or directory
-    at SkiaSharp.SkiaApi.sk_colortype_get_default_8888()
-    at SkiaSharp.SKImageInfo..cctor()
-
-解决方法：
->Linux命令行安装一下 apt-get install -y libfontconfig1  
-参考网址：https://github.com/mono/SkiaSharp/issues/509
-
-3. 报错内容
->Permission denied
-
-解决方法：  
->sudo chmod +x ./Semi.Avalonia.Demo.Drm
-
-4. 报错内容
->Unhandled exception. System.ComponentModel.Win32Exception (95): drmModeGetResources failed
-at Avalonia.LinuxFramebuffer.Output.DrmResources..ctor(Int32 fd, Boolean connectorsForceProbe) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 91
-at Avalonia.LinuxFramebuffer.Output.DrmCard.GetResources(Boolean connectorsForceProbe) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 171
-at Avalonia.LinuxFramebuffer.Output.DrmOutput..ctor(String path, Boolean connectorsForceProbe, DrmOutputOptions options) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmOutput.cs:line 60
-at LinuxFramebufferPlatformExtensions.StartLinuxDrm(AppBuilder builder, String[] args, String card, Double scaling, IInputBackend inputBackend) in /_/src/Linux/Avalonia.LinuxFramebuffer/LinuxFramebufferPlatform.cs:line 166
-at Semi.Avalonia.Demo.Drm.Program.Main(String[] args)
-
-解决方法：
->`program.cs`的显卡路径错误，可能不是`dev/dri/card1`，看在`dev/dri`目录下有无其他的显卡如`card0`。
-
-5. 报错内容
->Unhandled exception. System.ComponentModel.Win32Exception (2): Couldn't open /dev/dri/card1
-at Avalonia.LinuxFramebuffer.Output.DrmCard..ctor(String ) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 167
-at Avalonia.LinuxFramebuffer.Output.DrmOutput..ctor(String , Boolean , DrmOutputOptions ) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmOutput.cs:line 58
-at LinuxFramebufferPlatformExtensions.StartLinuxDrm(AppBuilder, String[], String , Double , IInputBackend ) in /_/src/Linux/Avalonia.LinuxFramebuffer/LinuxFramebufferPlatform.cs:line 166
-at Semi.Avalonia.Demo.Drm.Program.Main(String[])
-
-解决办法：
->找不到显卡路径`dev/dri/card1`，可能是显卡挂载到别的文件夹下了，待解决。

demo/Semi.Avalonia.Demo.Web/AvaloniaAppBuilderExtensions.cs

@@ -11,6 +11,6 @@ public static class AvaloniaAppBuilderExtensions
         builder.With(new FontManagerOptions
         {
             DefaultFamilyName = DefaultFontFamily,
-            FontFallbacks = new[] { new FontFallback { FontFamily = new FontFamily(DefaultFontFamily) } }
+            FontFallbacks = [new FontFallback { FontFamily = new FontFamily(DefaultFontFamily) }]
         });
 }

demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj

@@ -3,6 +3,7 @@
         <TargetFramework>net8.0-browser</TargetFramework>
         <OutputType>Exe</OutputType>
         <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
+        <Nullable>enable</Nullable>
     </PropertyGroup>
 
     <ItemGroup>

demo/Semi.Avalonia.Demo.Web/wwwroot/index.html

@@ -6,6 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="./app.css" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
 </head>
 
 <body style="margin: 0; overflow: hidden">

demo/Semi.Avalonia.Demo/App.axaml

@@ -2,12 +2,35 @@
     x:Class="Semi.Avalonia.Demo.App"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:semi="https://irihi.tech/semi">
+    x:CompileBindings="True"
+    x:DataType="viewModels:ApplicationViewModel"
+    xmlns:semi="https://irihi.tech/semi"
+    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels">
     <Application.Styles>
         <!-- You can still reference in old way.  -->
-        <!-- <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" /> -->
-        <semi:SemiTheme Locale="zh-cn" />
+        <!-- <StyleInclude Source="avares://Semi.Avalonia/Index.axaml" /> -->
+        <semi:SemiTheme Locale="zh-CN" />
+        <semi:SemiPopupAnimations />
         <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
         <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
     </Application.Styles>
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceInclude
+                    Source="Themes/_index.axaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Application.Resources>
+    <TrayIcon.Icons>
+        <TrayIcons>
+            <TrayIcon Icon="/Assets/irihi.ico" MacOSProperties.IsTemplateIcon="true" ToolTipText="Semi Avalonia Demo">
+                <TrayIcon.Menu>
+                    <NativeMenu>
+                        <NativeMenuItem Header="Exit" Command="{Binding ExitCommand}" />
+                    </NativeMenu>
+                </TrayIcon.Menu>
+            </TrayIcon>
+        </TrayIcons>
+    </TrayIcon.Icons>
 </Application>

demo/Semi.Avalonia.Demo/App.axaml.cs

@@ -2,6 +2,7 @@ using Avalonia;
 using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Data.Core.Plugins;
 using Avalonia.Markup.Xaml;
+using Semi.Avalonia.Demo.ViewModels;
 using Semi.Avalonia.Demo.Views;
 
 namespace Semi.Avalonia.Demo;
@@ -11,6 +12,7 @@ public partial class App : Application
     public override void Initialize()
     {
         AvaloniaXamlLoader.Load(this);
+        this.DataContext = new ApplicationViewModel();
     }
 
     public override void OnFrameworkInitializationCompleted()
@@ -28,6 +30,7 @@ public partial class App : Application
                 break;
         }
 
+        this.RegisterFollowSystemTheme();
         base.OnFrameworkInitializationCompleted();
     }
 }

demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.cs

@@ -1,30 +1,32 @@
 using System.Globalization;
+using System.Threading.Tasks;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
-using Avalonia.Input.Platform;
 using Avalonia.Media;
-using Avalonia.Media.Immutable;
+using Semi.Avalonia.Demo.Converters;
 
 namespace Semi.Avalonia.Demo.Controls;
 
-public class ColorDetailControl: TemplatedControl
+public class ColorDetailControl : TemplatedControl
 {
     public const string KEY_ResourceKey = "ResourceKey";
     public const string KEY_Hex = "Hex";
+    public const string KEY_Hex2 = "Hex2";
     public const string KEY_Opacity = "Opacity";
     public const string KEY_ColorResourceKey = "ColorResourceKey";
-    
-    public static readonly StyledProperty<string?> ResourceKeyProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
-        nameof(ResourceKey));
+
+    public static readonly StyledProperty<string?> ResourceKeyProperty =
+        AvaloniaProperty.Register<ColorDetailControl, string?>(nameof(ResourceKey));
+
     public string? ResourceKey
     {
         get => GetValue(ResourceKeyProperty);
         set => SetValue(ResourceKeyProperty, value);
     }
 
-    public static readonly StyledProperty<string?> ResourceNameProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
-        nameof(ResourceName));
+    public static readonly StyledProperty<string?> ResourceNameProperty =
+        AvaloniaProperty.Register<ColorDetailControl, string?>(nameof(ResourceName));
 
     public string? ResourceName
     {
@@ -32,8 +34,8 @@ public class ColorDetailControl: TemplatedControl
         set => SetValue(ResourceNameProperty, value);
     }
 
-    public static readonly StyledProperty<string?> ColorResourceKeyProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
-        nameof(ColorResourceKey));
+    public static readonly StyledProperty<string?> ColorResourceKeyProperty =
+        AvaloniaProperty.Register<ColorDetailControl, string?>(nameof(ColorResourceKey));
 
     public string? ColorResourceKey
     {
@@ -41,27 +43,39 @@ public class ColorDetailControl: TemplatedControl
         set => SetValue(ColorResourceKeyProperty, value);
     }
 
-    public static readonly DirectProperty<ColorDetailControl, string?> HexProperty = AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(
-        nameof(Hex), o => o.Hex);
+    public static readonly DirectProperty<ColorDetailControl, string?> HexProperty =
+        AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(Hex), o => o.Hex);
+
     private string? _hex;
+
     public string? Hex
     {
         get => _hex;
         private set => SetAndRaise(HexProperty, ref _hex, value);
     }
-    
-    public static readonly DirectProperty<ColorDetailControl, string?> OpacityNumberProperty = AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(
-        nameof(OpacityNumber), o => o.OpacityNumber);
+
+    private string? _hex2;
+
+    public static readonly DirectProperty<ColorDetailControl, string?> Hex2Property =
+        AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(Hex2), o => o.Hex2);
+
+    public string? Hex2
+    {
+        get => _hex2;
+        set => SetAndRaise(Hex2Property, ref _hex2, value);
+    }
+
+    public static readonly DirectProperty<ColorDetailControl, string?> OpacityNumberProperty =
+        AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(OpacityNumber), o => o.OpacityNumber);
+
     private string? _opacityNumber;
+
     public string? OpacityNumber
     {
         get => _opacityNumber;
         private set => SetAndRaise(OpacityNumberProperty, ref _opacityNumber, value);
     }
-    
-    
-    
-    
+
     static ColorDetailControl()
     {
         BackgroundProperty.Changed.AddClassHandler<ColorDetailControl>((o, e) => o.OnBackgroundChanged(e));
@@ -70,38 +84,36 @@ public class ColorDetailControl: TemplatedControl
     private void OnBackgroundChanged(AvaloniaPropertyChangedEventArgs args)
     {
         var color = args.GetNewValue<IBrush>();
-        if (color is ISolidColorBrush b)
+        if (color is ISolidColorBrush brush)
         {
-            Hex = b.Color.ToString().ToUpperInvariant();
-            OpacityNumber = b.Opacity.ToString(CultureInfo.InvariantCulture);
+            var hex1 = ColorConverter.ToHex.Convert(brush.Color, typeof(string), false, CultureInfo.InvariantCulture);
+            var hex2 = ColorConverter.ToHex.Convert(brush.Color, typeof(string), true, CultureInfo.InvariantCulture);
+            Hex = hex1 as string;
+            Hex2 = hex2 as string;
+            OpacityNumber = brush.Opacity.ToString(CultureInfo.InvariantCulture);
         }
     }
 
-    public async void Copy(object o)
+    public async Task Copy(object o)
     {
         string? text = null;
         if (o is string s)
         {
-            switch (s)
+            text = s switch
             {
-                case KEY_ResourceKey: text = ResourceKey;
-                    break;
-                case KEY_Hex: text = Hex;
-                    break;
-                case KEY_Opacity: text = OpacityNumber;
-                    break;
-                case KEY_ColorResourceKey: text = ColorResourceKey;
-                    break;
-                default: text = string.Empty; break;
-            }
+                KEY_ResourceKey => ResourceKey,
+                KEY_Hex => Hex,
+                KEY_Hex2 => Hex2,
+                KEY_Opacity => OpacityNumber,
+                KEY_ColorResourceKey => ColorResourceKey,
+                _ => string.Empty
+            };
         }
 
         var toplevel = TopLevel.GetTopLevel(this);
         if (toplevel?.Clipboard is { } c)
         {
-            await c.SetTextAsync(text??string.Empty);
+            await c.SetTextAsync(text ?? string.Empty);
         }
-
     }
-    
 }

demo/Semi.Avalonia.Demo/Controls/ColorItemControl.cs

@@ -1,5 +1,4 @@
 using Avalonia;
-using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
 using Avalonia.Input;
 using CommunityToolkit.Mvvm.Messaging;
@@ -9,8 +8,8 @@ namespace Semi.Avalonia.Demo.Controls;
 
 public class ColorItemControl : TemplatedControl
 {
-    public static readonly StyledProperty<string?> ColorNameProperty = AvaloniaProperty.Register<ColorItemControl, string?>(
-        nameof(ColorName));
+    public static readonly StyledProperty<string?> ColorNameProperty =
+        AvaloniaProperty.Register<ColorItemControl, string?>(nameof(ColorName));
 
     public string? ColorName
     {
@@ -26,14 +25,18 @@ public class ColorItemControl : TemplatedControl
         get => GetValue(HexProperty);
         set => SetValue(HexProperty, value);
     }
-    
+
     protected override void OnPointerPressed(PointerPressedEventArgs e)
     {
         base.OnPointerPressed(e);
-        if (this.DataContext is ColorItemViewModel v)
+        switch (this.DataContext)
         {
-            WeakReferenceMessenger.Default.Send(v);
+            case ColorItemViewModel colorItemViewModel:
+                WeakReferenceMessenger.Default.Send(colorItemViewModel);
+                break;
+            case ColorResource colorResource:
+                WeakReferenceMessenger.Default.Send(colorResource);
+                break;
         }
-        
     }
 }

demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.cs

@@ -4,33 +4,38 @@ using Avalonia.Controls.Primitives;
 
 namespace Semi.Avalonia.Demo.Controls;
 
-public class FunctionalColorGroupControl: TemplatedControl
+public class FunctionalColorGroupControl : TemplatedControl
 {
-    public static readonly StyledProperty<string?> TitleProperty = AvaloniaProperty.Register<FunctionalColorGroupControl, string?>(
-        nameof(Title));
+    public static readonly StyledProperty<string?> TitleProperty =
+        AvaloniaProperty.Register<FunctionalColorGroupControl, string?>(nameof(Title));
+
     public string? Title
     {
         get => GetValue(TitleProperty);
         set => SetValue(TitleProperty, value);
     }
-    
-    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> LightColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(
-        nameof(LightColors), o => o.LightColors, (o, v) => o.LightColors = v);
+
+    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> LightColorsProperty =
+        AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(nameof(LightColors),
+            o => o.LightColors, (o, v) => o.LightColors = v);
+
     private IEnumerable? _lightColors;
+
     public IEnumerable? LightColors
     {
         get => _lightColors;
         set => SetAndRaise(LightColorsProperty, ref _lightColors, value);
     }
-    
-    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> DarkColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(
-        nameof(DarkColors), o => o.DarkColors, (o, v) => o.DarkColors = v);
+
+    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> DarkColorsProperty =
+        AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(nameof(DarkColors),
+            o => o.DarkColors, (o, v) => o.DarkColors = v);
+
     private IEnumerable? _darkColors;
+
     public IEnumerable? DarkColors
     {
         get => _darkColors;
         set => SetAndRaise(DarkColorsProperty, ref _darkColors, value);
     }
-    
-    
 }

demo/Semi.Avalonia.Demo/Controls/ShadowGroupControl.cs

@@ -0,0 +1,41 @@
+using System.Collections;
+using Avalonia;
+using Avalonia.Controls.Primitives;
+
+namespace Semi.Avalonia.Demo.Controls;
+
+public class ShadowGroupControl : TemplatedControl
+{
+    public static readonly StyledProperty<string?> TitleProperty =
+        AvaloniaProperty.Register<ShadowGroupControl, string?>(nameof(Title));
+
+    public string? Title
+    {
+        get => GetValue(TitleProperty);
+        set => SetValue(TitleProperty, value);
+    }
+
+    private IEnumerable? _lightShadows;
+
+    public static readonly DirectProperty<ShadowGroupControl, IEnumerable?> LightShadowsProperty =
+        AvaloniaProperty.RegisterDirect<ShadowGroupControl, IEnumerable?>(nameof(LightShadows),
+            o => o.LightShadows, (o, v) => o.LightShadows = v);
+
+    public IEnumerable? LightShadows
+    {
+        get => _lightShadows;
+        set => SetAndRaise(LightShadowsProperty, ref _lightShadows, value);
+    }
+
+    private IEnumerable? _darkShadows;
+
+    public static readonly DirectProperty<ShadowGroupControl, IEnumerable?> DarkShadowsProperty =
+        AvaloniaProperty.RegisterDirect<ShadowGroupControl, IEnumerable?>(nameof(DarkShadows),
+            o => o.DarkShadows, (o, v) => o.DarkShadows = v);
+
+    public IEnumerable? DarkShadows
+    {
+        get => _darkShadows;
+        set => SetAndRaise(DarkShadowsProperty, ref _darkShadows, value);
+    }
+}

demo/Semi.Avalonia.Demo/Converters/ColorConverter.cs

@@ -0,0 +1,22 @@
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+
+namespace Semi.Avalonia.Demo.Converters;
+
+public static class ColorConverter
+{
+    public static readonly IValueConverter ToHex =
+        new FuncValueConverter<object, bool, string>(
+            (obj, withAlpha) =>
+                obj switch
+                {
+                    Color color => withAlpha
+                        ? $"#{color.A:X2}{color.R:X2}{color.G:X2}{color.B:X2}"
+                        : $"#{color.R:X2}{color.G:X2}{color.B:X2}",
+                    ISolidColorBrush brush => withAlpha
+                        ? $"#{brush.Color.A:X2}{brush.Color.R:X2}{brush.Color.G:X2}{brush.Color.B:X2}"
+                        : $"#{brush.Color.R:X2}{brush.Color.G:X2}{brush.Color.B:X2}",
+                    _ => string.Empty
+                }
+        );
+}

demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml

@@ -8,20 +8,26 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <UserControl.Styles>
-        <Style Selector="Border">
+        <Style Selector="Carousel">
             <Setter Property="Height" Value="200" />
+            <Style Selector="^ TextBlock">
+                <Setter Property="HorizontalAlignment" Value="Center" />
+                <Setter Property="VerticalAlignment" Value="Center" />
+                <Setter Property="Foreground" Value="#1C1F23" />
+            </Style>
         </Style>
-        <Style Selector="TextBlock">
-            <Setter Property="HorizontalAlignment" Value="Center" />
-            <Setter Property="VerticalAlignment" Value="Center" />
-            <Setter Property="Foreground" Value="#1C1F23" />
+        <Style Selector="RadioButton">
+            <Setter Property="Theme" Value="{DynamicResource ButtonRadioButton}" />
         </Style>
     </UserControl.Styles>
     <StackPanel Spacing="20">
-        <Carousel Theme="{DynamicResource FullCarousel}">
-            <Carousel.PageTransition>
-                <PageSlide Orientation="Horizontal" Duration="0.25" />
-            </Carousel.PageTransition>
+        <Carousel Theme="{DynamicResource FullCarousel}"
+                  Classes.Dot="{Binding #DotButton.IsChecked}"
+                  Classes.Columnar="{Binding #ColumnarButton.IsChecked}"
+                  Classes.Line="{Binding #LineButton.IsChecked}"
+                  Classes.Left="{Binding #LeftButton.IsChecked}"
+                  Classes.Center="{Binding #CenterButton.IsChecked}"
+                  Classes.Right="{Binding #RightButton.IsChecked}">
             <Border Background="#EAF5FF">
                 <TextBlock Text="Text 1" />
             </Border>
@@ -35,39 +41,39 @@
                 <TextBlock Text="Text 4" />
             </Border>
         </Carousel>
-        <Carousel Classes="Line" Theme="{DynamicResource FullCarousel}">
-            <Carousel.PageTransition>
-                <PageSlide Orientation="Horizontal" Duration="0.25" />
-            </Carousel.PageTransition>
-            <Border Background="#EAF5FF">
-                <TextBlock Text="Text 1" />
+        <StackPanel Orientation="Horizontal" Spacing="8">
+            <TextBlock VerticalAlignment="Center" Text="Type" />
+            <Border Theme="{DynamicResource RadioButtonGroupBorder}">
+                <StackPanel Orientation="Horizontal">
+                    <RadioButton
+                        Name="DotButton"
+                        IsChecked="True"
+                        Content="Dot" />
+                    <RadioButton
+                        Name="ColumnarButton"
+                        Content="Columnar" />
+                    <RadioButton
+                        Name="LineButton"
+                        Content="Line" />
+                </StackPanel>
             </Border>
-            <Border Background="#F9F9F9">
-                <TextBlock Text="Text 2" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal" Spacing="8">
+            <TextBlock VerticalAlignment="Center" Text="Position" />
+            <Border Theme="{DynamicResource RadioButtonGroupBorder}">
+                <StackPanel Orientation="Horizontal">
+                    <RadioButton
+                        Name="LeftButton"
+                        IsChecked="True"
+                        Content="Left" />
+                    <RadioButton
+                        Name="CenterButton"
+                        Content="Center" />
+                    <RadioButton
+                        Name="RightButton"
+                        Content="Right" />
+                </StackPanel>
             </Border>
-            <Border Background="#FFF8EA">
-                <TextBlock Text="Text 3" />
-            </Border>
-            <Border Background="#FEF2ED">
-                <TextBlock Text="Text 4" />
-            </Border>
-        </Carousel>
-        <Carousel Classes="Columnar Left" Theme="{DynamicResource FullCarousel}">
-            <Carousel.PageTransition>
-                <PageSlide Orientation="Horizontal" Duration="0.25" />
-            </Carousel.PageTransition>
-            <Border Background="#EAF5FF">
-                <TextBlock Text="Text 1" />
-            </Border>
-            <Border Background="#F9F9F9">
-                <TextBlock Text="Text 2" />
-            </Border>
-            <Border Background="#FFF8EA">
-                <TextBlock Text="Text 3" />
-            </Border>
-            <Border Background="#FEF2ED">
-                <TextBlock Text="Text 4" />
-            </Border>
-        </Carousel>
+        </StackPanel>
     </StackPanel>
-</UserControl>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml

@@ -6,35 +6,88 @@
     xmlns:controls="using:Avalonia.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    d:DesignHeight="450"
+    d:DesignHeight="1450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Spacing="20">
-        <StackPanel
-            VerticalAlignment="Top"
-            Orientation="Horizontal"
-            Spacing="20">
-            <ColorView ColorSpectrumShape="Ring" />
-            <ColorView ColorSpectrumShape="Box" />
-            <ColorView Palette="{DynamicResource SemiColorPalette}" />
+    <ScrollViewer>
+        <StackPanel Spacing="20">
+            <StackPanel
+                VerticalAlignment="Top"
+                Orientation="Horizontal"
+                Spacing="20">
+                <ColorView Name="Test" ColorSpectrumShape="Ring" />
+                <ColorView ColorSpectrumShape="Box" />
+                <ColorView Palette="{DynamicResource SemiColorPalette}" />
+            </StackPanel>
+            <StackPanel VerticalAlignment="Top" Orientation="Horizontal">
+                <ColorView
+                    Name="SimpleColorViewTest"
+                    HsvColor="hsv(120,11%,10%)"
+                    IsAlphaVisible="True"
+                    Theme="{StaticResource SimpleColorView}" />
+                <StackPanel>
+                    <TextBlock Text="{Binding #SimpleColorViewTest.HsvColor}" />
+                    <TextBlock Text="{Binding #SimpleColorViewTest.Color}" />
+                </StackPanel>
+            </StackPanel>
+            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
+                <ColorPicker Margin="8" ColorSpectrumShape="Ring">
+                    <ColorPicker.Palette>
+                        <controls:FlatHalfColorPalette />
+                    </ColorPicker.Palette>
+                </ColorPicker>
+                <ColorPicker Margin="8" ColorSpectrumShape="Box">
+                    <ColorPicker.Palette>
+                        <colorPicker:SemiColorLightPalette />
+                    </ColorPicker.Palette>
+                </ColorPicker>
+
+                <ColorPicker
+                    Margin="8"
+                    ColorSpectrumShape="Box"
+                    Theme="{DynamicResource HexColorPicker}">
+                    <ColorPicker.Palette>
+                        <colorPicker:SemiColorLightPalette />
+                    </ColorPicker.Palette>
+                </ColorPicker>
+            </StackPanel>
+            <StackPanel HorizontalAlignment="Left" >
+                <TextBlock Text="Use Style to customize button"></TextBlock>
+                <ColorPicker
+                    Margin="8"
+                    Width="32"
+                    HsvColor="hsv(120,11%,10%)"
+                    >
+                    <ColorPicker.Content>
+                        <Border
+                            Margin="1"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Background="{Binding $parent[ColorPicker].HsvColor, 
+                                                     Converter={StaticResource ToBrushConverter}}"
+                            CornerRadius="1" />
+                    </ColorPicker.Content>
+                    <ColorPicker.Styles>
+                        <Style Selector="DropDownButton">
+                            <Setter Property="Padding" Value="0"/>
+                            <Style Selector="^ /template/ PathIcon">
+                                <Setter Property="IsVisible" Value="False"/>
+                            </Style>
+                        </Style>
+                    </ColorPicker.Styles>
+                </ColorPicker>
+
+            </StackPanel>
+            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
+                <ColorPicker
+                    Margin="8"
+                    HsvColor="hsv(120,11%,10%)"
+                    Theme="{StaticResource SimpleColorPicker}" />
+                <ColorPicker
+                    Margin="8"
+                    HsvColor="hsv(120,11%,10%)"
+                    Theme="{StaticResource HexSimpleColorPicker}" />
+            </StackPanel>
         </StackPanel>
-        <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
-            <ColorPicker ColorSpectrumShape="Ring">
-                <ColorPicker.Palette>
-                    <controls:FlatHalfColorPalette />
-                </ColorPicker.Palette>
-            </ColorPicker>
-            <ColorPicker ColorSpectrumShape="Box">
-                <ColorPicker.Palette>
-                    <colorPicker:SemiColorLightPalette />
-                </ColorPicker.Palette>
-            </ColorPicker>
-            
-            <ColorPicker ColorSpectrumShape="Box" Theme="{DynamicResource HexColorPicker}">
-                <ColorPicker.Palette>
-                    <colorPicker:SemiColorLightPalette />
-                </ColorPicker.Palette>
-            </ColorPicker>
-        </StackPanel>
-    </StackPanel>
-</UserControl>
+    </ScrollViewer>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml

@@ -27,6 +27,15 @@
         <ComboBox Classes="Small" />
         <ComboBox Classes="Bordered" />
         <ComboBox Classes="Bordered" IsEnabled="False" />
+        <ComboBox>
+          <ComboBox.SelectionBoxItemTemplate>
+            <DataTemplate DataType="x:String">
+              <ContentControl BorderThickness="1"
+                              BorderBrush="Gold"
+                              Content="{Binding}" />
+            </DataTemplate>
+          </ComboBox.SelectionBoxItemTemplate>
+        </ComboBox>
 
         <StackPanel Orientation="Horizontal">
             <ComboBox Width="100" Classes="Large" PlaceholderText="Large" />

demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml

@@ -14,7 +14,10 @@
     <TabControl>
         <TabItem Header="DataGrid">
            <Grid RowDefinitions="Auto, *">
-               <ToggleSwitch Grid.Row="0" Content="Disable" Name="DisableToggle"></ToggleSwitch>
+               <StackPanel Grid.Row="0" Orientation="Horizontal">
+                   <ToggleSwitch Content="Disable" Name="DisableToggle" />
+                   <ToggleSwitch Content="ScrollViewerHide" Name="ScrollViewerHide" />
+               </StackPanel>
                <DataGrid Grid.Row="1"
                          Margin="8"
                          CanUserReorderColumns="True"
@@ -22,6 +25,7 @@
                          CanUserSortColumns="True"
                          HeadersVisibility="All"
                          IsReadOnly="True"
+                         ScrollViewer.AllowAutoHide="{Binding #ScrollViewerHide.IsChecked}"
                          IsEnabled="{Binding #DisableToggle.IsChecked}"
                          ItemsSource="{Binding GridData1}">
                    <DataGrid.Columns>
@@ -97,7 +101,7 @@
                 </DataGrid.Columns>
             </DataGrid>
         </TabItem>
-        <TabItem x:Name="EditableTab" Header="Editable">
+        <TabItem Name="EditableTab" Header="Editable">
             <Grid Margin="8" RowDefinitions="Auto,*,Auto">
                 <StackPanel
                     Grid.Row="0"
@@ -105,14 +109,14 @@
                     Spacing="4">
                     <TextBlock VerticalAlignment="Center" Text="FontSize:" />
                     <Slider
-                        x:Name="FontSizeSlider"
+                        Name="FontSizeSlider"
                         Width="100"
                         VerticalAlignment="Center"
                         Maximum="30"
                         Minimum="5"
                         Value="14" />
                     <CheckBox
-                        x:Name="IsThreeStateCheckBox"
+                        Name="IsThreeStateCheckBox"
                         Content="IsThreeState"
                         IsChecked="False" />
                 </StackPanel>

demo/Semi.Avalonia.Demo/Pages/ExpanderDemo.axaml

@@ -36,4 +36,4 @@
             </Expander>
         </Grid>
     </StackPanel>
-</UserControl>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/GridSplitterDemo.axaml

@@ -1,5 +1,5 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.GridSplitter"
+    x:Class="Semi.Avalonia.Demo.Pages.GridSplitterDemo"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
@@ -14,13 +14,13 @@
             RowDefinitions="*, Auto, *">
             <Border
                 HorizontalAlignment="Stretch"
-                Background="#FEFBCB"
+                Background="{DynamicResource SemiGrey0Color}"
                 CornerRadius="10" />
             <GridSplitter Grid.Row="1" ShowsPreview="True" />
             <Border
                 Grid.Row="2"
                 HorizontalAlignment="Stretch"
-                Background="#FEFBCB"
+                Background="{DynamicResource SemiGrey0Color}"
                 CornerRadius="10" />
         </Grid>
         <Grid
@@ -29,13 +29,13 @@
             ColumnDefinitions="*, Auto, *">
             <Border
                 HorizontalAlignment="Stretch"
-                Background="#FEFBCB"
+                Background="{DynamicResource SemiGrey0Color}"
                 CornerRadius="10" />
             <GridSplitter Grid.Column="1" ShowsPreview="True" />
             <Border
                 Grid.Column="2"
                 HorizontalAlignment="Stretch"
-                Background="#FEFBCB"
+                Background="{DynamicResource SemiGrey0Color}"
                 CornerRadius="10" />
         </Grid>
     </StackPanel>

demo/Semi.Avalonia.Demo/Pages/GridSplitterDemo.axaml.cs

@@ -1,12 +1,11 @@
-using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 
-public partial class GridSplitter : UserControl
+public partial class GridSplitterDemo : UserControl
 {
-    public GridSplitter()
+    public GridSplitterDemo()
     {
         InitializeComponent();
     }

demo/Semi.Avalonia.Demo/Pages/HeaderedContentControlDemo.axaml

@@ -2,7 +2,7 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="1450"
              x:Class="Semi.Avalonia.Demo.Pages.HeaderedContentControlDemo">
     <ScrollViewer>
         <StackPanel HorizontalAlignment="Left" Spacing="20">
@@ -27,12 +27,18 @@
             </WrapPanel>
             <TextBlock>GroupBox Theme</TextBlock>
             <HeaderedContentControl
-                HorizontalAlignment="Left"
                 Theme="{DynamicResource GroupBox}"
-                Header="Semi Design"
-                Width="400"
-                Height="200">
-                <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</TextBlock>
+                HorizontalAlignment="Left"
+                MaxWidth="360">
+                <HeaderedContentControl.Header>
+                    <Panel>
+                        <SelectableTextBlock Text="Semi Design" />
+                        <HyperlinkButton HorizontalAlignment="Right" Content="更多" />
+                    </Panel>
+                </HeaderedContentControl.Header>
+                <HeaderedContentControl.Content>
+                    <SelectableTextBlock Text="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。" />
+                </HeaderedContentControl.Content>
             </HeaderedContentControl>
         </StackPanel>
     </ScrollViewer>

demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml

@@ -0,0 +1,315 @@
+<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"
+             mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="1450"
+             x:DataType="vm:HighContrastDemoViewModel"
+             x:CompileBindings="True"
+             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>
+                        </DataGrid.Columns>
+                    </DataGrid>
+                </StackPanel>
+            </ScrollViewer>
+        </SplitView.Content>
+    </SplitView>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml.cs

@@ -0,0 +1,13 @@
+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();
+    }
+}

demo/Semi.Avalonia.Demo/Pages/HyperlinkButtonDemo.axaml

@@ -8,36 +8,22 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <StackPanel HorizontalAlignment="Left" Spacing="20">
+        <HyperlinkButton
+            NavigateUri="https://www.irihi.tech/"
+            Content="IRIHI Homepage" />
+        <HyperlinkButton
+            Classes="Underline"
+            IsEnabled="False"
+            NavigateUri="https://www.irihi.tech/"
+            Content="Not Enabled" />
+        <HyperlinkButton
+            Classes="WithIcon Underline"
+            Height="20"
+            NavigateUri="https://www.irihi.tech/"
+            Content="带下划线的网页链接" />
         <StackPanel Orientation="Horizontal">
-            <HyperlinkButton Height="20" NavigateUri="http://www.irihi.tech/">
-                <TextBlock
-                    HorizontalAlignment="Center"
-                    Text="iRihi Homepage"
-                    TextDecorations="Underline"
-                    VerticalAlignment="Center" />
-            </HyperlinkButton>
-        </StackPanel>
-        <StackPanel Orientation="Horizontal">
-            <HyperlinkButton Height="20" IsEnabled="False">
-                <TextBlock
-                    HorizontalAlignment="Center"
-                    Text="Not Enabled"
-                    TextDecorations="Underline"
-                    VerticalAlignment="Center" />
-            </HyperlinkButton>
-        </StackPanel>
-        <StackPanel Orientation="Horizontal">
-            <HyperlinkButton
-                BorderThickness="1"
-                Classes="WithIcon"
-                Height="20"
-                NavigateUri="http://www.irihi.tech/">
-                <TextBlock
-                    HorizontalAlignment="Center"
-                    Text="Link with Icon"
-                    TextDecorations="Underline"
-                    VerticalAlignment="Center" />
-            </HyperlinkButton>
+            <HyperlinkButton Classes="OnlyIcon" NavigateUri="https://www.irihi.tech/" />
+            <HyperlinkButton Classes="OnlyIcon" NavigateUri="https://www.irihi.tech/" />
         </StackPanel>
     </StackPanel>
-</UserControl>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/IconDemo.axaml

@@ -0,0 +1,95 @@
+<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"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:DataType="vm:IconDemoViewModel"
+             x:Class="Semi.Avalonia.Demo.Pages.IconDemo">
+    <Design.DataContext>
+        <vm:IconDemoViewModel />
+    </Design.DataContext>
+    <Grid RowDefinitions="Auto, *">
+        <TextBox
+            Grid.Row="0"
+            Width="600"
+            Margin="8"
+            Classes="ClearButton"
+            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>
+
+            <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>
+    </Grid>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/IconDemo.axaml.cs

@@ -0,0 +1,47 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Notifications;
+using Avalonia.Controls.Primitives;
+using Avalonia.Input.Platform;
+using Avalonia.Interactivity;
+using Avalonia.Threading;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class IconDemo : UserControl
+{
+    private IClipboard? _clipboard;
+    private WindowNotificationManager? _windowNotificationManager;
+
+    public IconDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new IconDemoViewModel();
+    }
+
+    protected override async void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        base.OnApplyTemplate(e);
+        var vm = this.DataContext as IconDemoViewModel;
+        await Dispatcher.UIThread.InvokeAsync(() => { vm?.InitializeResources(); });
+    }
+
+    protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
+    {
+        base.OnAttachedToVisualTree(e);
+        var topLevel = TopLevel.GetTopLevel(this);
+        _windowNotificationManager = new WindowNotificationManager(topLevel) { MaxItems = 3 };
+        _clipboard = topLevel?.Clipboard;
+    }
+
+    private async void Button_Clicked(object sender, RoutedEventArgs e)
+    {
+        if (_clipboard is null) return;
+        if (sender is not Button { DataContext: IconItem s }) return;
+        await _clipboard.SetTextAsync(s.ResourceKey);
+        _windowNotificationManager?.Show(
+            new Notification("Copied", s.ResourceKey),
+            NotificationType.Success);
+    }
+}

demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml

@@ -4,7 +4,7 @@
     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:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
     <ScrollViewer>
@@ -13,15 +13,13 @@
                 <Style Selector="Label">
                     <Setter Property="Margin" Value="4" />
                 </Style>
+                <Style Selector="Grid > TextBlock">
+                    <Setter Property="VerticalAlignment" Value="Center" />
+                    <Setter Property="Margin" Value="4" />
+                </Style>
             </StackPanel.Styles>
             <ScrollViewer HorizontalScrollBarVisibility="Auto">
                 <StackPanel Orientation="Horizontal">
-                    <StackPanel.Styles>
-                        <Style Selector="Label, TextBlock">
-                            <Setter Property="VerticalAlignment" Value="Center" />
-                            <Setter Property="Margin" Value="4" />
-                        </Style>
-                    </StackPanel.Styles>
                     <HeaderedContentControl
                         Width="400"
                         Height="400"
@@ -32,62 +30,62 @@
                         <Grid
                             VerticalAlignment="Top"
                             ColumnDefinitions="Auto, *"
-                            RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
-                            <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
-                            <TextBlock Grid.Row="2" Grid.Column="0">-</TextBlock>
-                            <TextBlock Grid.Row="3" Grid.Column="0">Secondary</TextBlock>
-                            <TextBlock Grid.Row="4" Grid.Column="0">Tertiary</TextBlock>
-                            <TextBlock Grid.Row="5" Grid.Column="0">Quaternary</TextBlock>
-                            <TextBlock Grid.Row="6" Grid.Column="0">Success</TextBlock>
-                            <TextBlock Grid.Row="7" Grid.Column="0">Warning</TextBlock>
-                            <TextBlock Grid.Row="8" Grid.Column="0">Danger</TextBlock>
-                            <TextBlock Grid.Row="9" Grid.Column="0">Mark</TextBlock>
-                            <TextBlock Grid.Row="10" Grid.Column="0">Code</TextBlock>
-                            <Label Grid.Row="2" Grid.Column="1">Text</Label>
+                            RowDefinitions="*,*,*,*,*,*,*,*,*,*,*">
+                            <TextBlock Grid.Row="0"  Grid.Column="0">Classes</TextBlock>
+                            <TextBlock Grid.Row="1" Grid.Column="0">-</TextBlock>
+                            <TextBlock Grid.Row="2" Grid.Column="0">Secondary</TextBlock>
+                            <TextBlock Grid.Row="3" Grid.Column="0">Tertiary</TextBlock>
+                            <TextBlock Grid.Row="4" Grid.Column="0">Quaternary</TextBlock>
+                            <TextBlock Grid.Row="5" Grid.Column="0">Success</TextBlock>
+                            <TextBlock Grid.Row="6" Grid.Column="0">Warning</TextBlock>
+                            <TextBlock Grid.Row="7" Grid.Column="0">Danger</TextBlock>
+                            <TextBlock Grid.Row="8" Grid.Column="0">Mark</TextBlock>
+                            <TextBlock Grid.Row="9" Grid.Column="0">Code</TextBlock>
+                            <Label Grid.Row="1" Grid.Column="1">Text</Label>
                             <Label
-                                Grid.Row="3"
+                                Grid.Row="2"
                                 Grid.Column="1"
                                 Classes="Secondary">
                                 Secondary
                             </Label>
                             <Label
-                                Grid.Row="4"
+                                Grid.Row="3"
                                 Grid.Column="1"
                                 Classes="Tertiary">
                                 Tertiary
                             </Label>
                             <Label
-                                Grid.Row="5"
+                                Grid.Row="4"
                                 Grid.Column="1"
                                 Classes="Quaternary">
                                 Quaternary
                             </Label>
                             <Label
-                                Grid.Row="6"
+                                Grid.Row="5"
                                 Grid.Column="1"
                                 Classes="Success">
                                 Success
                             </Label>
                             <Label
-                                Grid.Row="7"
+                                Grid.Row="6"
                                 Grid.Column="1"
                                 Classes="Warning">
                                 Warning
                             </Label>
                             <Label
-                                Grid.Row="8"
+                                Grid.Row="7"
                                 Grid.Column="1"
                                 Classes="Danger">
                                 Danger
                             </Label>
                             <Label
-                                Grid.Row="9"
+                                Grid.Row="8"
                                 Grid.Column="1"
                                 Classes="Mark">
                                 Default Mark
                             </Label>
                             <Label
-                                Grid.Row="10"
+                                Grid.Row="9"
                                 Grid.Column="1"
                                 Classes="Code">
                                 Code
@@ -104,51 +102,51 @@
                         <Grid
                             VerticalAlignment="Top"
                             ColumnDefinitions="Auto, *"
-                            RowDefinitions="*,*,*,*,*,*,*,*">
-                            <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
-                            <TextBlock Grid.Row="2" Grid.Column="0">H1</TextBlock>
-                            <TextBlock Grid.Row="3" Grid.Column="0">H2</TextBlock>
-                            <TextBlock Grid.Row="4" Grid.Column="0">H3</TextBlock>
-                            <TextBlock Grid.Row="5" Grid.Column="0">H4</TextBlock>
-                            <TextBlock Grid.Row="6" Grid.Column="0">H5</TextBlock>
-                            <TextBlock Grid.Row="7" Grid.Column="0">H6</TextBlock>
+                            RowDefinitions="*,*,*,*,*,*,*">
+                            <TextBlock Grid.Row="0" Grid.Column="0">Classes</TextBlock>
+                            <TextBlock Grid.Row="1" Grid.Column="0">H1</TextBlock>
+                            <TextBlock Grid.Row="2" Grid.Column="0">H2</TextBlock>
+                            <TextBlock Grid.Row="3" Grid.Column="0">H3</TextBlock>
+                            <TextBlock Grid.Row="4" Grid.Column="0">H4</TextBlock>
+                            <TextBlock Grid.Row="5" Grid.Column="0">H5</TextBlock>
+                            <TextBlock Grid.Row="6" Grid.Column="0">H6</TextBlock>
                             <Label
-                                Grid.Row="2"
+                                Grid.Row="1"
                                 Grid.Column="1"
                                 Classes="H1"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 1
                             </Label>
                             <Label
-                                Grid.Row="3"
+                                Grid.Row="2"
                                 Grid.Column="1"
                                 Classes="H2"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 2
                             </Label>
                             <Label
-                                Grid.Row="4"
+                                Grid.Row="3"
                                 Grid.Column="1"
                                 Classes="H3"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 3
                             </Label>
                             <Label
-                                Grid.Row="5"
+                                Grid.Row="4"
                                 Grid.Column="1"
                                 Classes="H4"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 4
                             </Label>
                             <Label
-                                Grid.Row="6"
+                                Grid.Row="5"
                                 Grid.Column="1"
                                 Classes="H5"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 5
                             </Label>
                             <Label
-                                Grid.Row="7"
+                                Grid.Row="6"
                                 Grid.Column="1"
                                 Classes="H6"
                                 Theme="{StaticResource TitleLabel}">

demo/Semi.Avalonia.Demo/Pages/ManagedFileChooserDemo.axaml

@@ -13,8 +13,8 @@
                 <Setter Property="HorizontalAlignment" Value="Stretch" />
             </Style>
         </StackPanel.Styles>
-        <Button Name="openFileDialog">Open File</Button>
-        <Button Name="selectFolderDialog">Select Folder</Button>
-        <Button Name="saveFileDialog">Save File</Button>
+        <Button Name="OpenFileButton" Content="Open File" />
+        <Button Name="SelectFolderButton" Content="Select Folder" />
+        <Button Name="SaveFileButton" Content="Save File" />
     </StackPanel>
 </UserControl>

demo/Semi.Avalonia.Demo/Pages/ManagedFileChooserDemo.axaml.cs

@@ -1,10 +1,6 @@
-using System;
 using System.Collections.Generic;
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Dialogs;
 using Avalonia.Interactivity;
-using Avalonia.Markup.Xaml;
 using Avalonia.Platform.Storage;
 
 namespace Semi.Avalonia.Demo.Pages;
@@ -14,14 +10,14 @@ public partial class ManagedFileChooserDemo : UserControl
     public ManagedFileChooserDemo()
     {
         InitializeComponent();
-        openFileDialog.Click += OpenFileDialog;
-        selectFolderDialog.Click += SelectFolderDialog;
-        saveFileDialog.Click += SaveFileDialog;
+        OpenFileButton.Click += OpenFileDialog;
+        SelectFolderButton.Click += SelectFolderDialog;
+        SaveFileButton.Click += SaveFileDialog;
     }
 
-    private async void OpenFileDialog(object sender, RoutedEventArgs args)
+    private async void OpenFileDialog(object? sender, RoutedEventArgs args)
     {
-        IStorageProvider? sp = GetStorageProvider();
+        var sp = GetStorageProvider();
         if (sp is null) return;
         var result = await sp.OpenFilePickerAsync(new FilePickerOpenOptions()
         {
@@ -30,9 +26,10 @@ public partial class ManagedFileChooserDemo : UserControl
             AllowMultiple = true,
         });
     }
-    private async void SelectFolderDialog(object sender, RoutedEventArgs args)
+
+    private async void SelectFolderDialog(object? sender, RoutedEventArgs args)
     {
-        IStorageProvider? sp = GetStorageProvider();
+        var sp = GetStorageProvider();
         if (sp is null) return;
         var result = await sp.OpenFolderPickerAsync(new FolderPickerOpenOptions()
         {
@@ -40,16 +37,17 @@ public partial class ManagedFileChooserDemo : UserControl
             AllowMultiple = true,
         });
     }
-    private async void SaveFileDialog(object sender, RoutedEventArgs args)
+
+    private async void SaveFileDialog(object? sender, RoutedEventArgs args)
     {
-        IStorageProvider? sp = GetStorageProvider();
+        var sp = GetStorageProvider();
         if (sp is null) return;
         var result = await sp.SaveFilePickerAsync(new FilePickerSaveOptions()
         {
-            Title = "Open File",
+            Title = "Save File",
         });
     }
-    
+
     private IStorageProvider? GetStorageProvider()
     {
         var topLevel = TopLevel.GetTopLevel(this);
@@ -58,10 +56,10 @@ public partial class ManagedFileChooserDemo : UserControl
 
     List<FilePickerFileType>? GetFileTypes()
     {
-        return new List<FilePickerFileType>
-        {
+        return
+        [
             FilePickerFileTypes.All,
             FilePickerFileTypes.TextPlain
-        };
+        ];
     }
 }

demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml

@@ -50,6 +50,22 @@
                     <MenuItem Header="Radio 5" ToggleType="Radio" />
                 </MenuItem>
             </MenuItem>
+            <MenuItem Header="_Icon">
+                <MenuItem Header="Nothing" Icon="🐼" />
+                <MenuItem Header="TextBlock">
+                    <MenuItem.Icon>
+                        <TextBlock Text="🐼" />
+                    </MenuItem.Icon>
+                </MenuItem>
+                <MenuItem Header="Geometry" Icon="{StaticResource SemiIconSemiLogo}" />
+                <MenuItem Header="PathIcon">
+                    <MenuItem.Icon>
+                        <PathIcon
+                            Theme="{StaticResource InnerPathIcon}"
+                            Data="{DynamicResource SemiIconSemiLogo}" />
+                    </MenuItem.Icon>
+                </MenuItem>
+            </MenuItem>
             <MenuItem Header="Parent">
                 <MenuItem Header="Child 1" />
                 <MenuItem Header="Child 2" />

demo/Semi.Avalonia.Demo/Pages/NotificationDemo.axaml

@@ -7,18 +7,36 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel HorizontalAlignment="Left" Spacing="20">
-        <StackPanel.Styles>
-            <Style Selector="Button">
-                <Setter Property="Theme" Value="{DynamicResource SolidButton}" />
-                <Setter Property="HorizontalAlignment" Value="Stretch" />
-            </Style>
-        </StackPanel.Styles>
-
-        <Button Click="InfoButton_OnClick" Content="Default" />
-        <Button Click="InfoButton_OnClick" Content="Information" />
-        <Button Click="InfoButton_OnClick" Content="Success" Classes="Success" />
-        <Button Click="InfoButton_OnClick" Content="Warning" Classes="Warning" />
-        <Button Click="InfoButton_OnClick" Content="Error" Classes="Danger" />
+    <StackPanel Spacing="20">
+        <UniformGrid Rows="2" Columns="3" Width="500" HorizontalAlignment="Left">
+            <UniformGrid.Styles>
+                <Style Selector="RadioButton">
+                    <Setter Property="Theme" Value="{DynamicResource PureCardRadioButton}" />
+                </Style>
+            </UniformGrid.Styles>
+            <RadioButton Click="PositionButton_OnClick" Content="TopLeft" />
+            <RadioButton Click="PositionButton_OnClick" Content="TopCenter" />
+            <RadioButton Click="PositionButton_OnClick" Content="TopRight" IsChecked="True" />
+            <RadioButton Click="PositionButton_OnClick" Content="BottomLeft" />
+            <RadioButton Click="PositionButton_OnClick" Content="BottomCenter" />
+            <RadioButton Click="PositionButton_OnClick" Content="BottomRight" />
+        </UniformGrid>
+        <StackPanel Orientation="Horizontal" Spacing="20">
+            <Button Click="NormalButton_OnClick" Content="Information" />
+            <Button Click="NormalButton_OnClick" Content="Success" Classes="Success" />
+            <Button Click="NormalButton_OnClick" Content="Warning" Classes="Warning" />
+            <Button Click="NormalButton_OnClick" Content="Error" Classes="Danger" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal" Spacing="20">
+            <StackPanel.Styles>
+                <Style Selector="Button">
+                    <Setter Property="Theme" Value="{DynamicResource SolidButton}" />
+                </Style>
+            </StackPanel.Styles>
+            <Button Click="LightButton_OnClick" Content="Information" />
+            <Button Click="LightButton_OnClick" Content="Success" Classes="Success" />
+            <Button Click="LightButton_OnClick" Content="Warning" Classes="Warning" />
+            <Button Click="LightButton_OnClick" Content="Error" Classes="Danger" />
+        </StackPanel>
     </StackPanel>
 </UserControl>

demo/Semi.Avalonia.Demo/Pages/NotificationDemo.axaml.cs

@@ -22,13 +22,34 @@ public partial class NotificationDemo : UserControl
         _manager = new WindowNotificationManager(topLevel) { MaxItems = 3 };
     }
 
-    private void InfoButton_OnClick(object? sender, RoutedEventArgs e)
+    private void PositionButton_OnClick(object? sender, RoutedEventArgs e)
+    {
+        if (sender is RadioButton b && b.Content is string s)
+        {
+            Enum.TryParse<NotificationPosition>(s, out var t);
+            _manager.Position = t;
+        }
+    }
+
+    private void NormalButton_OnClick(object? sender, RoutedEventArgs e)
     {
         if (sender is Button b && b.Content is string s)
         {
-            _manager?.Show(Enum.TryParse<NotificationType>(s, out NotificationType t)
+            _manager?.Show(Enum.TryParse<NotificationType>(s, out var t)
                 ? new Notification(t.ToString(), "This is message", t)
                 : new Notification(s, "This is message"));
         }
     }
+
+    private void LightButton_OnClick(object? sender, RoutedEventArgs e)
+    {
+        if (sender is Button b && b.Content is string s)
+        {
+            Enum.TryParse<NotificationType>(s, out var notificationType);
+            _manager?.Show(
+                new Notification(notificationType.ToString(), "This is message"),
+                type: notificationType,
+                classes: ["Light"]);
+        }
+    }
 }

demo/Semi.Avalonia.Demo/Pages/Overview.axaml

@@ -31,12 +31,12 @@
                 <PathIcon
                     Width="32"
                     Height="32"
-                    Data="M10.6201 17.5C6.06377 17.5 2.37012 13.8063 2.37012 9.25C2.37012 4.69365 6.06377 1 10.6201 1V17.5ZM13.3701 6.5C17.9265 6.5 21.6201 10.1936 21.6201 14.75C21.6201 19.3063 17.9265 23 13.3701 23V6.5Z" />
+                    Data="{StaticResource SemiIconSemiLogo}" />
                 <PathIcon
                     Width="10"
                     Height="10"
                     Margin="20,0"
-                    Data="M20.5 13.5C21.3284 13.5 22 12.8284 22 12C22 11.1716 21.3284 10.5 20.5 10.5L13.5 10.5L13.5 3.5C13.5 2.67157 12.8284 2 12 2C11.1716 2 10.5 2.67157 10.5 3.5L10.5 10.5L3.5 10.5C2.67157 10.5 2 11.1716 2 12C2 12.8284 2.67157 13.5 3.5 13.5L10.5 13.5V20.5C10.5 21.3284 11.1716 22 12 22C12.8284 22 13.5 21.3284 13.5 20.5V13.5L20.5 13.5Z" />
+                    Data="{StaticResource SemiIconPlus}" />
                 <Image Width="32" Height="32">
                     <Image.Source>
                         <DrawingImage>

demo/Semi.Avalonia.Demo/Pages/Overview.axaml.cs

@@ -9,18 +9,18 @@ public partial class Overview : UserControl
         InitializeComponent();
     }
 
-    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.1.0";
+    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.2.1.3";
 
     public string MainStyle { get; set; } =
         """
         <Application.Styles>
         <!-- You can still reference in old way.  -->
-        <!-- <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" /> -->
-            <semi:SemiTheme Locale="zh-cn" />
+        <!-- <StyleInclude Source="avares://Semi.Avalonia/Index.axaml" /> -->
+            <semi:SemiTheme Locale="zh-CN" />
         </Application.Styles>
         """;
 
-    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.1.0";
+    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.2.1.3";
 
     public string ColorPickerStyle { get; set; } =
         """
@@ -29,7 +29,7 @@ public partial class Overview : UserControl
         </Application.Styles>
         """;
 
-    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.1.0";
+    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.2.1.3";
 
     public string DataGridStyle { get; set; } =
         """
@@ -38,7 +38,7 @@ public partial class Overview : UserControl
         </Application.Styles>
         """;
 
-    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.1.0";
+    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.10.1";
 
     public string TreeDataGridStyle { get; set; } =
         """

demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml

@@ -14,16 +14,6 @@
     <Design.DataContext>
         <viewModels:PaletteDemoViewModel />
     </Design.DataContext>
-    <UserControl.Resources>
-        <ResourceDictionary>
-            <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude Source="../Themes/ToggleButton.axaml" />
-                <ResourceInclude Source="../Controls/ColorItemControl.axaml" />
-                <ResourceInclude Source="../Controls/ColorDetailControl.axaml" />
-                <ResourceInclude Source="../Controls/FunctionalColorGroupControl.axaml" />
-            </ResourceDictionary.MergedDictionaries>
-        </ResourceDictionary>
-    </UserControl.Resources>
     <SplitView
         Name="splitView"
         CompactPaneLength="50"
@@ -33,11 +23,12 @@
         PanePlacement="Right">
         <SplitView.Pane>
             <StackPanel>
-                <ToggleButton
+                <ToggleSwitch
                     Name="toggle"
                     HorizontalAlignment="Right"
                     IsChecked="True"
-                    Theme="{DynamicResource SplitViewToggleButton}" />
+                    Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                    Content="{StaticResource SemiIconSidebar}" />
                 <Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
                     <Panel>
                         <TextBlock
@@ -115,7 +106,6 @@
                     <ItemsControl ItemsSource="{Binding FunctionalColors}">
                         <ItemsControl.ItemTemplate>
                             <DataTemplate>
-                                <!--    -->
                                 <controls:FunctionalColorGroupControl
                                     Title="{Binding Title}"
                                     DarkColors="{Binding DarkColors}"
@@ -123,8 +113,20 @@
                             </DataTemplate>
                         </ItemsControl.ItemTemplate>
                     </ItemsControl>
+
+                    <ItemsControl ItemsSource="{Binding Shadows}">
+                        <ItemsControl.ItemTemplate>
+                            <DataTemplate>
+                                <controls:ShadowGroupControl
+                                    Title="{Binding Title}"
+                                    DarkShadows="{Binding DarkShadows}"
+                                    LightShadows="{Binding LightShadows}" />
+                            </DataTemplate>
+                        </ItemsControl.ItemTemplate>
+                    </ItemsControl>
+
                 </StackPanel>
             </ScrollViewer>
         </SplitView.Content>
     </SplitView>
-</UserControl>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml.cs

@@ -13,17 +13,16 @@ public partial class PaletteDemo : UserControl
     public PaletteDemo()
     {
         InitializeComponent();
-        
+        this.DataContext = new PaletteDemoViewModel();
     }
 
     protected override async  void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
         base.OnApplyTemplate(e);
-        PaletteDemoViewModel? vm = new PaletteDemoViewModel();
+        PaletteDemoViewModel? vm = this.DataContext as PaletteDemoViewModel;
         await Dispatcher.UIThread.InvokeAsync(() =>
         {
-            vm.InitializeResources();
+            vm?.InitializeResources();
         });
-        DataContext = vm;
     }
 }

demo/Semi.Avalonia.Demo/Pages/PathIconDemo.axaml

@@ -7,16 +7,30 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel HorizontalAlignment="Left" >
-        <TextBlock Text="Size"></TextBlock>
-        <Slider Name="width" Minimum="0" Maximum="100" Value="20" Width="300"></Slider>
-        <ToggleSwitch Name="active" Content="Active"></ToggleSwitch>
+    <StackPanel HorizontalAlignment="Left">
+        <StackPanel Orientation="Horizontal">
+            <StackPanel.Styles>
+                <Style Selector="PathIcon">
+                    <Setter Property="Theme" Value="{DynamicResource InnerPathIcon}" />
+                    <Setter Property="Data" Value="{StaticResource SemiIconSearch}" />
+                </Style>
+            </StackPanel.Styles>
+            <PathIcon Classes="ExtraSmall" />
+            <PathIcon Classes="Small" />
+            <PathIcon />
+            <PathIcon Classes="Large" />
+            <PathIcon Classes="ExtraLarge" />
+        </StackPanel>
+
+        <TextBlock Text="Size" />
+        <Slider Name="width" Minimum="0" Maximum="100" Value="20" Width="300" />
+        <ToggleSwitch Name="active" Content="Active" />
         <PathIcon
-            Classes.Active="{Binding ElementName=active, Path=IsChecked}"
-            BorderBrush="{DynamicResource SemiRed6}"
+            Classes.Active="{Binding #active.IsChecked}"
             Width="{Binding #width.Value}"
             Height="{Binding #width.Value}"
-            Data="M12 3L2 12H5V20H19V12H22L12 3M13 18H11V16H13V18M13 14H11V8H13V14Z"
-            Foreground="{DynamicResource SemiBlue6}" />
+            Foreground="{DynamicResource SemiBlue6}"
+            BorderBrush="{DynamicResource SemiRed6}"
+            Data="{StaticResource SemiIconHome}" />
     </StackPanel>
-</UserControl>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/SelectableTextBlock.axaml

@@ -4,13 +4,13 @@
     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:DesignHeight="600"
     d:DesignWidth="800"
     mc:Ignorable="d">
     <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
         <StackPanel Orientation="Horizontal">
             <StackPanel.Styles>
-                <Style Selector="SelectableTextBlock">
+                <Style Selector="Grid > SelectableTextBlock">
                     <Setter Property="VerticalAlignment" Value="Center" />
                     <Setter Property="Margin" Value="4" />
                 </Style>
@@ -25,70 +25,76 @@
                 <Grid
                     VerticalAlignment="Top"
                     ColumnDefinitions="Auto, *"
-                    RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
-                    <SelectableTextBlock Grid.Row="1" Grid.Column="0">Classes</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="2" Grid.Column="0">-</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="3" Grid.Column="0">Secondary</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="4" Grid.Column="0">Tertiary</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="5" Grid.Column="0">Quaternary</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">Success</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">Warning</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="8" Grid.Column="0">Danger</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="9" Grid.Column="0">Mark</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="10" Grid.Column="0">Underline</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="11" Grid.Column="0">Delete</SelectableTextBlock>
+                    RowDefinitions="*,*,*,*,*,*,*,*,*,*,*">
+                    <Grid.Styles>
+                        <Style Selector="SelectableTextBlock">
+                            <Setter Property="VerticalAlignment" Value="Center" />
+                            <Setter Property="Margin" Value="4" />
+                        </Style>
+                    </Grid.Styles>
+                    <SelectableTextBlock Grid.Row="0" Grid.Column="0">Classes</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="1" Grid.Column="0">-</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="2" Grid.Column="0">Secondary</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="3" Grid.Column="0">Tertiary</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="4" Grid.Column="0">Quaternary</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="5" Grid.Column="0">Success</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">Warning</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">Danger</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="8" Grid.Column="0">Mark</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="9" Grid.Column="0">Underline</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="10" Grid.Column="0">Delete</SelectableTextBlock>
 
-                    <SelectableTextBlock Grid.Row="2" Grid.Column="1">Text</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="1" Grid.Column="1">Text</SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="3"
+                        Grid.Row="2"
                         Grid.Column="1"
                         Classes="Secondary">
                         Secondary
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="4"
+                        Grid.Row="3"
                         Grid.Column="1"
                         Classes="Tertiary">
                         Tertiary
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="5"
+                        Grid.Row="4"
                         Grid.Column="1"
                         Classes="Quaternary">
                         Quaternary
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="6"
+                        Grid.Row="5"
                         Grid.Column="1"
                         Classes="Success">
                         Success
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="7"
+                        Grid.Row="6"
                         Grid.Column="1"
                         Classes="Warning">
                         Warning
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="8"
+                        Grid.Row="7"
                         Grid.Column="1"
                         Classes="Danger">
                         Danger
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="9"
+                        Grid.Row="8"
                         Grid.Column="1"
                         Classes="Mark">
                         Default Mark
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="10"
+                        Grid.Row="9"
                         Grid.Column="1"
                         Classes="Underline">
                         Underline
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="11"
+                        Grid.Row="10"
                         Grid.Column="1"
                         Classes="Delete">
                         Delete
@@ -104,53 +110,52 @@
                 Theme="{DynamicResource GroupBox}">
                 <Grid
                     VerticalAlignment="Top"
-                    Background="{Binding}"
                     ColumnDefinitions="Auto, *"
-                    RowDefinitions="*,*,*,*,*,*,*,*">
-                    <SelectableTextBlock Grid.Row="1" Grid.Column="0">Classes</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="2" Grid.Column="0">H1</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="3" Grid.Column="0">H2</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="4" Grid.Column="0">H3</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="5" Grid.Column="0">H4</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">H5</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">H6</SelectableTextBlock>
+                    RowDefinitions="*,*,*,*,*,*,*">
+                    <SelectableTextBlock Grid.Row="0" Grid.Column="0">Classes</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="1" Grid.Column="0">H1</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="2" Grid.Column="0">H2</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="3" Grid.Column="0">H3</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="4" Grid.Column="0">H4</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="5" Grid.Column="0">H5</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">H6</SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="2"
+                        Grid.Row="1"
                         Grid.Column="1"
                         Classes="H1"
                         Theme="{StaticResource TitleSelectableTextBlock}">
                         Header 1
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="3"
+                        Grid.Row="2"
                         Grid.Column="1"
                         Classes="H2"
                         Theme="{StaticResource TitleSelectableTextBlock}">
                         Header 2
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="4"
+                        Grid.Row="3"
                         Grid.Column="1"
                         Classes="H3"
                         Theme="{StaticResource TitleSelectableTextBlock}">
                         Header 3
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="5"
+                        Grid.Row="4"
                         Grid.Column="1"
                         Classes="H4"
                         Theme="{StaticResource TitleSelectableTextBlock}">
                         Header 4
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="6"
+                        Grid.Row="5"
                         Grid.Column="1"
                         Classes="H5"
                         Theme="{StaticResource TitleSelectableTextBlock}">
                         Header 5
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="7"
+                        Grid.Row="6"
                         Grid.Column="1"
                         Classes="H6"
                         Theme="{StaticResource TitleSelectableTextBlock}">

demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml

@@ -11,11 +11,6 @@
     <Design.DataContext>
         <pages:SplitViewDemoViewModel />
     </Design.DataContext>
-    <UserControl.Resources>
-        <ResourceDictionary>
-            <StreamGeometry x:Key="NavigationMenuExpandIconGlyph">M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z</StreamGeometry>
-        </ResourceDictionary>
-    </UserControl.Resources>
     <Border>
         <Grid ColumnDefinitions="*,400">
             <Border Grid.Column="1" VerticalAlignment="Top" Margin="10 0 0 0">
@@ -114,20 +109,10 @@
                                 ItemsSource="{Binding Songs}" />
                             <ToggleSwitch
                                 Grid.Row="2"
-                                Theme="{DynamicResource ButtonToggleSwitch}"
+                                Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                                Content="{StaticResource SemiIconSidebar}"
+                                HorizontalAlignment="Left"
                                 IsChecked="{Binding #SplitView.IsPaneOpen}">
-                                <ToggleSwitch.OnContent>
-                                    <PathIcon
-                                        Width="16"
-                                        Height="16"
-                                        Data="{StaticResource NavigationMenuExpandIconGlyph}" />
-                                </ToggleSwitch.OnContent>
-                                <ToggleSwitch.OffContent>
-                                    <PathIcon
-                                        Width="16"
-                                        Height="16"
-                                        Data="{StaticResource NavigationMenuExpandIconGlyph}" />
-                                </ToggleSwitch.OffContent>
                             </ToggleSwitch>
                         </Grid>
                     </SplitView.Pane>

demo/Semi.Avalonia.Demo/Pages/TextBlockDemo.axaml

@@ -10,7 +10,7 @@
     <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
         <StackPanel Orientation="Horizontal">
             <StackPanel.Styles>
-                <Style Selector="TextBlock">
+                <Style Selector="Grid > TextBlock">
                     <Setter Property="VerticalAlignment" Value="Center" />
                     <Setter Property="Margin" Value="4" />
                 </Style>
@@ -25,70 +25,70 @@
                 <Grid
                     VerticalAlignment="Top"
                     ColumnDefinitions="Auto, *"
-                    RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
-                    <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
-                    <TextBlock Grid.Row="2" Grid.Column="0">-</TextBlock>
-                    <TextBlock Grid.Row="3" Grid.Column="0">Secondary</TextBlock>
-                    <TextBlock Grid.Row="4" Grid.Column="0">Tertiary</TextBlock>
-                    <TextBlock Grid.Row="5" Grid.Column="0">Quaternary</TextBlock>
-                    <TextBlock Grid.Row="6" Grid.Column="0">Success</TextBlock>
-                    <TextBlock Grid.Row="7" Grid.Column="0">Warning</TextBlock>
-                    <TextBlock Grid.Row="8" Grid.Column="0">Danger</TextBlock>
-                    <TextBlock Grid.Row="9" Grid.Column="0">Mark</TextBlock>
-                    <TextBlock Grid.Row="10" Grid.Column="0">Underline</TextBlock>
-                    <TextBlock Grid.Row="11" Grid.Column="0">Delete</TextBlock>
+                    RowDefinitions="*,*,*,*,*,*,*,*,*,*,*">
+                    <TextBlock Grid.Row="0" Grid.Column="0">Classes</TextBlock>
+                    <TextBlock Grid.Row="1" Grid.Column="0">-</TextBlock>
+                    <TextBlock Grid.Row="2" Grid.Column="0">Secondary</TextBlock>
+                    <TextBlock Grid.Row="3" Grid.Column="0">Tertiary</TextBlock>
+                    <TextBlock Grid.Row="4" Grid.Column="0">Quaternary</TextBlock>
+                    <TextBlock Grid.Row="5" Grid.Column="0">Success</TextBlock>
+                    <TextBlock Grid.Row="6" Grid.Column="0">Warning</TextBlock>
+                    <TextBlock Grid.Row="7" Grid.Column="0">Danger</TextBlock>
+                    <TextBlock Grid.Row="8" Grid.Column="0">Mark</TextBlock>
+                    <TextBlock Grid.Row="9" Grid.Column="0">Underline</TextBlock>
+                    <TextBlock Grid.Row="10" Grid.Column="0">Delete</TextBlock>
 
-                    <TextBlock Grid.Row="2" Grid.Column="1">Text</TextBlock>
+                    <TextBlock Grid.Row="1" Grid.Column="1">Text</TextBlock>
                     <TextBlock
-                        Grid.Row="3"
+                        Grid.Row="2"
                         Grid.Column="1"
                         Classes="Secondary">
                         Secondary
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="4"
+                        Grid.Row="3"
                         Grid.Column="1"
                         Classes="Tertiary">
                         Tertiary
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="5"
+                        Grid.Row="4"
                         Grid.Column="1"
                         Classes="Quaternary">
                         Quaternary
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="6"
+                        Grid.Row="5"
                         Grid.Column="1"
                         Classes="Success">
                         Success
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="7"
+                        Grid.Row="6"
                         Grid.Column="1"
                         Classes="Warning">
                         Warning
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="8"
+                        Grid.Row="7"
                         Grid.Column="1"
                         Classes="Danger">
                         Danger
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="9"
+                        Grid.Row="8"
                         Grid.Column="1"
                         Classes="Mark">
                         Default Mark
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="10"
+                        Grid.Row="9"
                         Grid.Column="1"
                         Classes="Underline">
                         Underline
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="11"
+                        Grid.Row="10"
                         Grid.Column="1"
                         Classes="Delete">
                         Delete
@@ -105,58 +105,57 @@
                 <Grid
                     VerticalAlignment="Top"
                     ColumnDefinitions="Auto, *"
-                    RowDefinitions="*,*,*,*,*,*,*,*">
-                    <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
-                    <TextBlock Grid.Row="2" Grid.Column="0">H1</TextBlock>
-                    <TextBlock Grid.Row="3" Grid.Column="0">H2</TextBlock>
-                    <TextBlock Grid.Row="4" Grid.Column="0">H3</TextBlock>
-                    <TextBlock Grid.Row="5" Grid.Column="0">H4</TextBlock>
-                    <TextBlock Grid.Row="6" Grid.Column="0">H5</TextBlock>
-                    <TextBlock Grid.Row="7" Grid.Column="0">H6</TextBlock>
+                    RowDefinitions="*,*,*,*,*,*,*">
+                    <TextBlock Grid.Row="0" Grid.Column="0">Classes</TextBlock>
+                    <TextBlock Grid.Row="1" Grid.Column="0">H1</TextBlock>
+                    <TextBlock Grid.Row="2" Grid.Column="0">H2</TextBlock>
+                    <TextBlock Grid.Row="3" Grid.Column="0">H3</TextBlock>
+                    <TextBlock Grid.Row="4" Grid.Column="0">H4</TextBlock>
+                    <TextBlock Grid.Row="5" Grid.Column="0">H5</TextBlock>
+                    <TextBlock Grid.Row="6" Grid.Column="0">H6</TextBlock>
                     <TextBlock
-                        Grid.Row="2"
+                        Grid.Row="1"
                         Grid.Column="1"
                         Classes="H1"
                         Theme="{StaticResource TitleTextBlock}">
                         Header 1
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="3"
+                        Grid.Row="2"
                         Grid.Column="1"
                         Classes="H2"
                         Theme="{StaticResource TitleTextBlock}">
                         Header 2
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="4"
+                        Grid.Row="3"
                         Grid.Column="1"
                         Classes="H3"
                         Theme="{StaticResource TitleTextBlock}">
                         Header 3
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="5"
+                        Grid.Row="4"
                         Grid.Column="1"
                         Classes="H4"
                         Theme="{StaticResource TitleTextBlock}">
                         Header 4
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="6"
+                        Grid.Row="5"
                         Grid.Column="1"
                         Classes="H5"
                         Theme="{StaticResource TitleTextBlock}">
                         Header 5
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="7"
+                        Grid.Row="6"
                         Grid.Column="1"
                         Classes="H6"
                         Theme="{StaticResource TitleTextBlock}">
                         Header 6
                     </TextBlock>
                 </Grid>
-
             </HeaderedContentControl>
         </StackPanel>
     </ScrollViewer>

demo/Semi.Avalonia.Demo/Pages/TextBoxDemo.axaml

@@ -4,79 +4,56 @@
     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:system="clr-namespace:System;assembly=netstandard"
     d:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
     <ScrollViewer>
         <StackPanel HorizontalAlignment="Left" Spacing="20">
             <TextBox Width="300" />
-            <TextBox Width="300" Classes="Large" />
-            <TextBox Width="300" Classes="Small" />
-            <TextBox Width="300" Watermark="Please use this" />
-            <TextBox Width="300" InnerLeftContent="http://" />
-            <TextBox Width="300" InnerRightContent=".com" />
-            <TextBox
-                Width="500"
-                InnerLeftContent="http://"
-                InnerRightContent=".com" />
-            <TextBox Width="300" Classes="clearButton" />
-            <TextBox Width="300" PasswordChar="*" />
+            <TextBox Width="300" InnerLeftContent="https://" InnerRightContent=".com" />
+            <TextBox Width="300" Classes="clearButton" Text="click to clear" />
+            <TextBox Width="300" Classes="revealPasswordButton" Text="123456" />
             <TextBox
                 Width="300"
-                Classes="revealPasswordButton"
-                PasswordChar="*" />
-            <TextBox
-                Width="500"
-                InnerLeftContent="http://"
+                Classes="ClearButton RevealPasswordButton"
+                InnerLeftContent="https://"
                 InnerRightContent=".com"
-                IsEnabled="False" />
-            <TextBox
-                Width="500"
-                Classes="Bordered"
-                InnerLeftContent="http://"
-                InnerRightContent=".com" />
-            <TextBox
-                Width="500"
-                Classes="Bordered"
-                InnerLeftContent="http://"
-                InnerRightContent=".com"
-                IsEnabled="False" />
+                Text="123456" />
             <StackPanel Orientation="Horizontal">
                 <TextBox
-                    Width="150"
+                    Width="100"
                     Classes="Large"
                     Watermark="Large" />
                 <TextBox
-                    Width="150"
+                    Width="100"
                     Watermark="Default" />
                 <TextBox
-                    Width="150"
+                    Width="100"
                     Classes="Small"
                     Watermark="Small" />
             </StackPanel>
 
             <StackPanel Orientation="Horizontal">
                 <TextBox
-                    Width="150"
+                    Width="100"
                     IsEnabled="False"
                     Watermark="Disabled" />
                 <TextBox
-                    Width="150"
+                    Width="100"
                     Classes="Bordered"
                     Watermark="Bordered" />
                 <TextBox
-                    Width="150"
+                    Width="100"
                     Classes="Bordered"
                     IsEnabled="False" />
             </StackPanel>
-            <TextBox Width="300" Classes="TextArea" />
+            <TextBox Width="300" Classes="TextArea" Watermark="TextArea TextBox" />
             <TextBox
                 Width="300"
                 Theme="{StaticResource LooklessTextBox}"
                 Watermark="Lookless TextBox"
-                InnerLeftContent="http://"
+                InnerLeftContent="https://"
                 InnerRightContent=".com" />
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/ThemeVariantDemo.axaml

@@ -4,18 +4,36 @@
     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.Pages"
+    x:DataType="vm:ThemeVariantDemoViewModel"
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <Grid>
-        <ThemeVariantScope Name="scope">
+    <Design.DataContext>
+        <vm:ThemeVariantDemoViewModel />
+    </Design.DataContext>
+    <StackPanel>
+        <Border Theme="{StaticResource CardBorder}">
+            <StackPanel>
+                <ListBox
+                    Theme="{StaticResource CardRadioGroupListBox}"
+                    ItemsSource="{Binding ThemeVariants}"
+                    SelectedItem="{Binding SelectedThemeVariant}" />
+                <DatePicker />
+                <CalendarDatePicker />
+            </StackPanel>
+        </Border>
+        <ThemeVariantScope RequestedThemeVariant="{Binding SelectedThemeVariant}">
             <Border Theme="{StaticResource CardBorder}">
                 <StackPanel>
+                    <ListBox
+                        Theme="{StaticResource CardRadioGroupListBox}"
+                        ItemsSource="{Binding ThemeVariants}"
+                        SelectedItem="{Binding SelectedThemeVariant}" />
                     <DatePicker />
                     <CalendarDatePicker />
-                    <ToggleSwitch Content="Switch Theme" IsCheckedChanged="Switch_OnIsCheckedChanged" />
                 </StackPanel>
             </Border>
         </ThemeVariantScope>
-    </Grid>
-</UserControl>
+    </StackPanel>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/ThemeVariantDemo.axaml.cs

@@ -1,8 +1,7 @@
-using Avalonia;
+using System.Collections.Generic;
 using Avalonia.Controls;
-using Avalonia.Interactivity;
-using Avalonia.Markup.Xaml;
 using Avalonia.Styling;
+using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -11,10 +10,22 @@ public partial class ThemeVariantDemo : UserControl
     public ThemeVariantDemo()
     {
         InitializeComponent();
+        this.DataContext = new ThemeVariantDemoViewModel();
     }
+}
 
-    private void Switch_OnIsCheckedChanged(object sender, RoutedEventArgs e)
-    {
-        scope.RequestedThemeVariant = scope.ActualThemeVariant == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
-    }
+public partial class ThemeVariantDemoViewModel : ObservableObject
+{
+    [ObservableProperty] private ThemeVariant? _selectedThemeVariant;
+
+    public IEnumerable<ThemeVariant> ThemeVariants =>
+    [
+        ThemeVariant.Default,
+        ThemeVariant.Light,
+        ThemeVariant.Dark,
+        SemiTheme.Aquatic,
+        SemiTheme.Desert,
+        SemiTheme.Dusk,
+        SemiTheme.NightSky,
+    ];
 }

demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml

@@ -9,6 +9,7 @@
     mc:Ignorable="d">
     <StackPanel Spacing="20">
         <TimePicker />
+        <TimePicker UseSeconds="True" />
         <TimePicker Classes="ClearButton" />
         <TimePicker MinuteIncrement="15" />
         <TimePicker ClockIdentifier="24HourClock" />

demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml

@@ -8,50 +8,88 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <StackPanel Spacing="8" Margin="20">
-        <ToggleSwitch
-            Content="Content"
-            OffContent="OffContent"
-            OnContent="OnContent" />
-        <ToggleSwitch
-            Content="Content"
-            IsChecked="True"
-            IsEnabled="False"
-            OffContent="OffContent"
-            OnContent="OnContent" />
-        <ToggleSwitch
-            Content="Content"
-            IsChecked="False"
-            IsEnabled="False"
-            OffContent="OffContent"
-            OnContent="OnContent" />
+        <StackPanel Orientation="Horizontal">
+            <StackPanel>
+                <ToggleSwitch />
+                <ToggleSwitch IsChecked="True" />
+            </StackPanel>
+            <StackPanel>
+                <ToggleSwitch IsEnabled="False" />
+                <ToggleSwitch IsChecked="True" IsEnabled="False" />
+            </StackPanel>
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" />
+            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsChecked="True"/>
+            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsEnabled="False" />
+            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsEnabled="False" IsChecked="True" />
+        </StackPanel>
+
         <StackPanel Orientation="Horizontal">
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" />
-            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" IsChecked="True"/>
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" IsChecked="True" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small Loading" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small Loading" IsChecked="True" />
         </StackPanel>
         <StackPanel Orientation="Horizontal">
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" />
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" IsChecked="True" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Loading" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Loading" IsChecked="True" />
         </StackPanel>
         <StackPanel Orientation="Horizontal">
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large" />
-            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large" IsChecked="True"/>
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large" IsChecked="True" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large Loading" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large Loading" IsChecked="True" />
+        </StackPanel>
+
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" IsChecked="True" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" IsChecked="True" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" Classes="Large" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" Classes="Large" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" Classes="Large" IsChecked="True" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" Classes="Large" IsChecked="True" />
+        </StackPanel>
+
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch
+                HorizontalAlignment="Left"
+                Padding="8"
+                Theme="{DynamicResource ButtonToggleSwitch}"
+                Foreground="{DynamicResource ButtonDefaultTertiaryForeground}">
+                <ToggleSwitch.Content>
+                    <PathIcon
+                        Theme="{DynamicResource InnerPathIcon}"
+                        Data="{StaticResource SemiIconSidebar}" />
+                </ToggleSwitch.Content>
+            </ToggleSwitch>
+            <ToggleSwitch
+                HorizontalAlignment="Left"
+                Padding="8"
+                Theme="{DynamicResource ButtonToggleSwitch}"
+                Foreground="{DynamicResource ButtonDefaultTertiaryForeground}">
+                <ToggleSwitch.OnContent>
+                    <PathIcon
+                        Theme="{DynamicResource InnerPathIcon}"
+                        Data="{StaticResource SemiIconSun}" />
+                </ToggleSwitch.OnContent>
+                <ToggleSwitch.OffContent>
+                    <PathIcon
+                        Theme="{DynamicResource InnerPathIcon}"
+                        Data="{StaticResource SemiIconMoon}" />
+                </ToggleSwitch.OffContent>
+            </ToggleSwitch>
         </StackPanel>
 
-        <ToggleSwitch Theme="{DynamicResource ButtonToggleSwitch}">
-            <ToggleSwitch.OnContent>
-                <PathIcon
-                    Width="16"
-                    Height="16"
-                    Data="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13"
-                    Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-            </ToggleSwitch.OnContent>
-            <ToggleSwitch.OffContent>
-                <PathIcon
-                    Width="16"
-                    Height="16"
-                    Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z"
-                    Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-            </ToggleSwitch.OffContent>
-        </ToggleSwitch>
     </StackPanel>
 </UserControl>

demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj

@@ -4,22 +4,26 @@
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
     </PropertyGroup>
-    
+
     <ItemGroup>
-        <AvaloniaResource Include="Assets\**" />
+        <AvaloniaResource Include="Assets\**"/>
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(AvaloniaVersion)"/>
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2" />
+        <PackageReference Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)">
+            <IncludeAssets Condition="'$(Configuration)' != 'Debug'">None</IncludeAssets>
+            <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>
+        </PackageReference>
+        <PackageReference Include="CommunityToolkit.Mvvm" Version="$(CommunityToolkitVersion)"/>
     </ItemGroup>
 
     <ItemGroup>
-      <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\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\Semi.Avalonia.csproj"/>
     </ItemGroup>
 </Project>

demo/Semi.Avalonia.Demo/Themes/ColorDetailControl.axaml

@@ -2,13 +2,9 @@
     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"
-    x:CompileBindings="True"
-    x:DataType="viewModels:ColorItemViewModel">
-    <StreamGeometry x:Key="CopyIcon">M5 7C3.89543 7 3 7.89543 3 9V19C3 20.1046 3.89543 21 5 21H15C16.1046 21 17 20.1046 17 19V9C17 7.89543 16.1046 7 15 7H5Z,M7 4C7 2.89543 7.89543 2 9 2H20C21.1046 2 22 2.89543 22 4V15C22 16.1046 21.1046 17 20 17H19V8C19 6 18 5 16 5H7V4Z</StreamGeometry>
+    x:CompileBindings="True">
     <ControlTheme x:Key="{x:Type controls:ColorDetailControl}" TargetType="controls:ColorDetailControl">
-        <!--  Add Resources Here  -->
-        <Setter Property="controls:ColorDetailControl.Template">
+        <Setter Property="Template">
             <ControlTemplate TargetType="controls:ColorDetailControl">
                 <StackPanel>
                     <TextBlock
@@ -21,7 +17,7 @@
                         HorizontalAlignment="Stretch"
                         Background="{TemplateBinding Background}"
                         CornerRadius="6" />
-                    <Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *, *, *, *, *, *">
+                    <Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *, *, *, *, *, *, *">
                         <!--  Row 0-1-2 ResourceKey  -->
                         <TextBlock
                             Grid.Column="0"
@@ -38,38 +34,26 @@
                         <Button
                             Grid.Row="1"
                             Grid.Column="1"
-                            Classes="Tertiary"
                             Command="{Binding $parent[controls:ColorDetailControl].Copy}"
                             CommandParameter="{x:Static controls:ColorDetailControl.KEY_ResourceKey}"
-                            Theme="{DynamicResource BorderlessButton}">
-                            <PathIcon
-                                Width="12"
-                                Height="12"
-                                Data="{StaticResource CopyIcon}"
-                                Foreground="{Binding $parent[Button].Foreground}" />
-                        </Button>
+                            Theme="{DynamicResource  IconBorderlessButton}"
+                            Content="{StaticResource SemiIconCopy}" />
                         <SelectableTextBlock
                             Grid.Row="2"
                             Grid.Column="0"
                             VerticalAlignment="Center"
-                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            IsVisible="{TemplateBinding ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
                             Text="{TemplateBinding ColorResourceKey}" />
                         <Button
                             Grid.Row="2"
                             Grid.Column="1"
-                            Classes="Tertiary"
                             Command="{Binding $parent[controls:ColorDetailControl].Copy}"
                             CommandParameter="{x:Static controls:ColorDetailControl.KEY_ColorResourceKey}"
-                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
-                            Theme="{DynamicResource BorderlessButton}">
-                            <PathIcon
-                                Width="12"
-                                Height="12"
-                                Data="{StaticResource CopyIcon}"
-                                Foreground="{Binding $parent[Button].Foreground}" />
-                        </Button>
+                            IsVisible="{TemplateBinding ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            Theme="{DynamicResource  IconBorderlessButton}"
+                            Content="{StaticResource SemiIconCopy}" />
 
-                        <!--  Row 3-4 HEX  -->
+                        <!--  Row 3-4-5 HEX  -->
                         <TextBlock
                             Grid.Row="3"
                             Grid.Column="0"
@@ -77,7 +61,7 @@
                             Margin="4,8,0,0"
                             VerticalAlignment="Center"
                             Classes="Tertiary"
-                            Text="ARGB" />
+                            Text="Hex" />
                         <SelectableTextBlock
                             Grid.Row="4"
                             Grid.Column="0"
@@ -86,47 +70,48 @@
                         <Button
                             Grid.Row="4"
                             Grid.Column="1"
-                            Classes="Tertiary"
                             Command="{Binding $parent[controls:ColorDetailControl].Copy}"
                             CommandParameter="{x:Static controls:ColorDetailControl.KEY_Hex}"
-                            Theme="{DynamicResource BorderlessButton}">
-                            <PathIcon
-                                Width="12"
-                                Height="12"
-                                Data="{StaticResource CopyIcon}"
-                                Foreground="{Binding $parent[Button].Foreground}" />
-                        </Button>
-
-                        <!--  Row 5-6 Opacity  -->
-                        <TextBlock
+                            Theme="{DynamicResource  IconBorderlessButton}"
+                            Content="{StaticResource SemiIconCopy}" />
+                        <SelectableTextBlock
                             Grid.Row="5"
                             Grid.Column="0"
+                            VerticalAlignment="Center"
+                            Text="{TemplateBinding Hex2}" />
+                        <Button
+                            Grid.Row="5"
+                            Grid.Column="1"
+                            Command="{Binding $parent[controls:ColorDetailControl].Copy}"
+                            CommandParameter="{x:Static controls:ColorDetailControl.KEY_Hex2}"
+                            Theme="{DynamicResource  IconBorderlessButton}"
+                            Content="{StaticResource SemiIconCopy}" />
+
+                        <!--  Row 6-7 Opacity  -->
+                        <TextBlock
+                            Grid.Row="6"
+                            Grid.Column="0"
                             Grid.ColumnSpan="2"
                             Margin="4,8,0,0"
                             VerticalAlignment="Center"
                             Classes="Tertiary"
                             Text="Opacity" />
                         <SelectableTextBlock
-                            Grid.Row="6"
+                            Grid.Row="7"
                             Grid.Column="0"
                             VerticalAlignment="Center"
                             Text="{TemplateBinding OpacityNumber}" />
                         <Button
-                            Grid.Row="6"
+                            Grid.Row="7"
                             Grid.Column="1"
-                            Classes="Tertiary"
                             Command="{Binding $parent[controls:ColorDetailControl].Copy}"
                             CommandParameter="{x:Static controls:ColorDetailControl.KEY_Opacity}"
-                            Theme="{DynamicResource BorderlessButton}">
-                            <PathIcon
-                                Width="12"
-                                Height="12"
-                                Data="{StaticResource CopyIcon}"
-                                Foreground="{Binding $parent[Button].Foreground}" />
-                        </Button>
+                            Theme="{DynamicResource  IconBorderlessButton}"
+                            Content="{StaticResource SemiIconCopy}" />
+
                     </Grid>
                 </StackPanel>
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

demo/Semi.Avalonia.Demo/Themes/ColorItemControl.axaml

@@ -2,24 +2,23 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:controls="using:Semi.Avalonia.Demo.Controls"
-    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
-    x:CompileBindings="True"
-    x:DataType="viewModels:ColorItemViewModel">
+    x:CompileBindings="True">
     <Design.PreviewWith>
         <controls:ColorItemControl />
     </Design.PreviewWith>
 
     <ControlTheme x:Key="{x:Type controls:ColorItemControl}" TargetType="controls:ColorItemControl">
-        <Setter Property="controls:ColorItemControl.Width" Value="120" />
-        <Setter Property="controls:ColorItemControl.Height" Value="60" />
-        <Setter Property="controls:ColorItemControl.Cursor" Value="Hand" />
-        <Setter Property="controls:ColorItemControl.Template">
+        <Setter Property="Width" Value="120" />
+        <Setter Property="Height" Value="60" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Template">
             <ControlTemplate TargetType="controls:ColorItemControl">
-                <!--    -->
                 <Border
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
                     Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <Panel>
                         <TextBlock
@@ -42,7 +41,7 @@
             </ControlTemplate>
         </Setter>
         <Style Selector="^:pointerover /template/ TextBlock#PART_HexTextBlock">
-            <Setter Property="TextBlock.IsVisible" Value="True" />
+            <Setter Property="IsVisible" Value="True" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

demo/Semi.Avalonia.Demo/Themes/FunctionalColorGroupControl.axaml

@@ -5,18 +5,16 @@
     xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     x:CompileBindings="True"
     x:DataType="viewModels:FunctionalColorGroupViewModel">
-    <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type controls:FunctionalColorGroupControl}" TargetType="controls:FunctionalColorGroupControl">
-        <!--  Add Resources Here  -->
-        <Setter Property="controls:FunctionalColorGroupControl.Template">
-            <ControlTemplate x:DataType="viewModels:FunctionalColorGroupViewModel" TargetType="controls:FunctionalColorGroupControl">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="controls:FunctionalColorGroupControl">
                 <Grid RowDefinitions="Auto, *">
-                    <TextBlock
+                    <SelectableTextBlock
                         Grid.Row="0"
                         Margin="0,16,0,0"
                         Classes="H3"
                         Text="{TemplateBinding Title}"
-                        Theme="{DynamicResource TitleTextBlock}" />
+                        Theme="{DynamicResource TitleSelectableTextBlock}" />
                     <TabControl Grid.Row="1">
                         <TabItem Header="Light">
                             <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightColors}">
@@ -131,4 +129,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

demo/Semi.Avalonia.Demo/Themes/ShadowGroupControl.axaml

@@ -0,0 +1,88 @@
+<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"
+    x:CompileBindings="True"
+    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="*" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ShadowItemViewModel"
+                                        Binding="{Binding ShadowDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Name" />
+                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding BoxShadowValue}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                        <TabItem Header="Dark">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkShadows}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ShadowItemViewModel"
+                                        Binding="{Binding ShadowDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Name" />
+                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding BoxShadowValue}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                    </TabControl>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

demo/Semi.Avalonia.Demo/Themes/TabMenu.axaml

@@ -1,8 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
     <ControlTheme x:Key="NavigationTab" TargetType="TabControl">
-        <Setter Property="TabControl.Template">
-            <!--    -->
+        <Setter Property="Template">
             <ControlTemplate TargetType="TabControl">
                 <Border
                     HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
@@ -12,7 +10,10 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <DockPanel>
-                        <ScrollViewer DockPanel.Dock="Left" VerticalScrollBarVisibility="Auto">
+                        <ScrollViewer
+                            DockPanel.Dock="Left"
+                            Name="PART_ScrollViewer"
+                            VerticalScrollBarVisibility="Auto">
                             <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
                                 <ItemsPresenter Name="PART_ItemsPresenter">
                                     <ItemsPresenter.ItemsPanel>
@@ -21,7 +22,8 @@
                                         </ItemsPanelTemplate>
                                     </ItemsPresenter.ItemsPanel>
                                 </ItemsPresenter>
-                                <Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+                                <Border Name="PART_BorderSeparator"
+                                        Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
                             </Panel>
                         </ScrollViewer>
                         <ContentPresenter
@@ -40,5 +42,8 @@
             <Setter Property="VerticalAlignment" Value="Stretch" />
             <Setter Property="HorizontalAlignment" Value="Left" />
         </Style>
+        <Style Selector="^.Dismiss /template/ ScrollViewer#PART_ScrollViewer">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

demo/Semi.Avalonia.Demo/Themes/ToggleButton.axaml

@@ -1,27 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
-    <ControlTheme x:Key="SplitViewToggleButton" TargetType="ToggleButton">
-        <Setter Property="ToggleButton.Template">
-            <ControlTemplate TargetType="ToggleButton">
-                <Border
-                    Name="Background"
-                    Padding="8"
-                    Background="{TemplateBinding Background}"
-                    CornerRadius="3">
-                    <PathIcon
-                        Name="Icon"
-                        Width="16"
-                        Height="16"
-                        Data="M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z"
-                        Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                </Border>
-            </ControlTemplate>
-        </Setter>
-        <Style Selector="^:pointerover">
-            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
-        </Style>
-        <Style Selector="^:pressed">
-            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
-        </Style>
-    </ControlTheme>
-</ResourceDictionary>

demo/Semi.Avalonia.Demo/Themes/ToggleSwitch.axaml

@@ -0,0 +1,42 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch
+                Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                Content="{StaticResource SemiIconStar}" />
+            <Button
+                Theme="{DynamicResource IconBorderlessButton}"
+                Content="{StaticResource SemiIconStar}" />
+        </StackPanel>
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="IconBorderlessToggleSwitch"
+                  BasedOn="{StaticResource ButtonToggleSwitch}"
+                  TargetType="ToggleSwitch">
+        <Setter Property="Padding" Value="{StaticResource SemiThicknessTight}" />
+        <Setter Property="Foreground" Value="{DynamicResource SemiColorText1}" />
+        <Setter Property="OnContentTemplate">
+            <StaticResource ResourceKey="GeometryDataTemplate" />
+        </Setter>
+        <Setter Property="OffContentTemplate">
+            <StaticResource ResourceKey="GeometryDataTemplate" />
+        </Setter>
+        <Setter Property="ContentTemplate">
+            <StaticResource ResourceKey="GeometryDataTemplate" />
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="IconBorderlessButton"
+                  BasedOn="{StaticResource BorderlessButton}"
+                  TargetType="Button">
+        <Setter Property="Padding" Value="{StaticResource SemiThicknessTight}" />
+        <Setter Property="Foreground" Value="{DynamicResource SemiColorText1}" />
+        <Setter Property="ContentTemplate">
+            <StaticResource ResourceKey="GeometryDataTemplate" />
+        </Setter>
+    </ControlTheme>
+
+    <DataTemplate x:Key="GeometryDataTemplate" DataType="Geometry">
+        <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
+    </DataTemplate>
+</ResourceDictionary>

demo/Semi.Avalonia.Demo/Themes/_index.axaml

@@ -0,0 +1,10 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceInclude Source="ColorDetailControl.axaml" />
+        <ResourceInclude Source="ColorItemControl.axaml" />
+        <ResourceInclude Source="FunctionalColorGroupControl.axaml" />
+        <ResourceInclude Source="ShadowGroupControl.axaml" />
+        <ResourceInclude Source="TabMenu.axaml" />
+        <ResourceInclude Source="ToggleSwitch.axaml" />
+    </ResourceDictionary.MergedDictionaries>
+</ResourceDictionary>

demo/Semi.Avalonia.Demo/ViewModels/ApplicationViewModel.cs

@@ -0,0 +1,19 @@
+using Avalonia;
+using Avalonia.Controls.ApplicationLifetimes;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Semi.Avalonia.Demo.Views;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public partial class ApplicationViewModel: ObservableObject
+{
+    [RelayCommand]
+    private void Exit()
+    {
+        if (Application.Current?.ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
+        {
+            desktop.Shutdown();
+        }
+    }
+}

demo/Semi.Avalonia.Demo/ViewModels/HighContrastDemoViewModel.cs

@@ -0,0 +1,127 @@
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.ApplicationLifetimes;
+using Avalonia.Media;
+using Avalonia.Styling;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Messaging;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public partial class HighContrastDemoViewModel : ObservableObject
+{
+    [ObservableProperty] private ThemeVariant? _selectedThemeVariant;
+    [ObservableProperty] private ColorResource _selectedColorResource = null!;
+
+    public IEnumerable<ThemeVariant> ThemeVariants { get; }
+    public ObservableCollection<ColorResource> ColorResources { get; set; }
+
+    public HighContrastDemoViewModel()
+    {
+        ThemeVariants =
+        [
+            SemiTheme.Aquatic,
+            SemiTheme.Desert,
+            SemiTheme.Dusk,
+            SemiTheme.NightSky,
+        ];
+        ColorResources =
+        [
+            new ColorResource
+            {
+                ResourceKey = "WindowColor",
+                Brush = new SolidColorBrush(Color.Parse("#202020")),
+                Description = "Background of pages, panes, popups, and windows.",
+                PairWith = "WindowTextColor"
+            },
+            new ColorResource
+            {
+                ResourceKey = "WindowTextColor",
+                Brush = new SolidColorBrush(Color.Parse("#FFFFFF")),
+                Description = "Headings, body copy, lists, placeholder text, app and window borders.",
+                PairWith = "WindowColor"
+            },
+            new ColorResource
+            {
+                ResourceKey = "HotlightColor",
+                Brush = new SolidColorBrush(Color.Parse("#75E9FC")),
+                Description = "Hyperlinks.",
+                PairWith = "WindowColor"
+            },
+            new ColorResource
+            {
+                ResourceKey = "GrayTextColor",
+                Brush = new SolidColorBrush(Color.Parse("#A6A6A6")),
+                Description = "Inactive (disabled) UI.",
+                PairWith = "WindowColor"
+            },
+            new ColorResource
+            {
+                ResourceKey = "HighlightTextColor",
+                Brush = new SolidColorBrush(Color.Parse("#263B50")),
+                Description =
+                    "Foreground color for text or UI that is in selected, interacted with (hover, pressed), or in progress.",
+                PairWith = "HighlightColor"
+            },
+            new ColorResource
+            {
+                ResourceKey = "HighlightColor",
+                Brush = new SolidColorBrush(Color.Parse("#8EE3F0")),
+                Description =
+                    "Background or accent color for UI that is in selected, interacted with (hover, pressed), or in progress.",
+                PairWith = "HighlightTextColor"
+            },
+            new ColorResource
+            {
+                ResourceKey = "ButtonTextColor",
+                Brush = new SolidColorBrush(Color.Parse("#FFFFFF")),
+                Description = "Foreground color for buttons and any UI that can be interacted with.",
+                PairWith = "ButtonFaceColor"
+            },
+            new ColorResource
+            {
+                ResourceKey = "ButtonFaceColor",
+                Brush = new SolidColorBrush(Color.Parse("#202020")),
+                Description = "Background color for buttons and any UI that can be interacted with.",
+                PairWith = "ButtonTextColor"
+            },
+        ];
+        WeakReferenceMessenger.Default.Register<HighContrastDemoViewModel, ColorResource>
+            (this, (_, item) => SelectedColorResource = item);
+        SelectedThemeVariant = SemiTheme.Aquatic;
+    }
+
+    partial void OnSelectedThemeVariantChanged(ThemeVariant? value)
+    {
+        var topLevel = ResolveDefaultTopLevel();
+        if (value is null) return;
+        foreach (var colorResource in ColorResources)
+        {
+            if (colorResource.ResourceKey is null) continue;
+            if (topLevel?.TryFindResource(colorResource.ResourceKey, value, out var o) == true && o is Color color)
+            {
+                colorResource.Brush = new SolidColorBrush(color);
+            }
+        }
+    }
+
+    private static TopLevel? ResolveDefaultTopLevel()
+    {
+        return Application.Current?.ApplicationLifetime switch
+        {
+            IClassicDesktopStyleApplicationLifetime desktopLifetime => desktopLifetime.MainWindow,
+            ISingleViewApplicationLifetime singleView => TopLevel.GetTopLevel(singleView.MainView),
+            _ => null
+        };
+    }
+}
+
+public partial class ColorResource : ObservableObject
+{
+    [ObservableProperty] private string? _resourceKey;
+    [ObservableProperty] private SolidColorBrush? _brush;
+    [ObservableProperty] private string? _description;
+    [ObservableProperty] private string? _pairWith;
+}

demo/Semi.Avalonia.Demo/ViewModels/IconDemoViewModel.cs

@@ -0,0 +1,71 @@
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using Avalonia.Controls;
+using Avalonia.Media;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public partial class IconDemoViewModel : ObservableObject
+{
+    private readonly IResourceDictionary? _resources = new Icons();
+
+    private readonly Dictionary<string, IconItem> _filledIcons = new();
+    private readonly Dictionary<string, IconItem> _strokedIcons = new();
+
+    [ObservableProperty] private string? _searchText;
+
+    public ObservableCollection<IconItem> FilteredFilledIcons { get; set; } = [];
+    public ObservableCollection<IconItem> FilteredStrokedIcons { get; set; } = [];
+
+    public void InitializeResources()
+    {
+        if (_resources is null) return;
+
+        foreach (var provider in _resources.MergedDictionaries)
+        {
+            if (provider is not ResourceDictionary dic) continue;
+
+            foreach (var key in dic.Keys)
+            {
+                if (dic[key] is not Geometry geometry) continue;
+                var icon = new IconItem
+                {
+                    ResourceKey = key.ToString(),
+                    Geometry = geometry
+                };
+
+                if (key.ToString().EndsWith("Stroked"))
+                    _strokedIcons[key.ToString().ToLowerInvariant()] = icon;
+                else
+                    _filledIcons[key.ToString().ToLowerInvariant()] = icon;
+            }
+        }
+
+        OnSearchTextChanged(string.Empty);
+    }
+
+    partial void OnSearchTextChanged(string? value)
+    {
+        var search = value?.ToLowerInvariant() ?? string.Empty;
+
+        FilteredFilledIcons.Clear();
+        foreach (var pair in _filledIcons.Where(i => i.Key.Contains(search)))
+        {
+            FilteredFilledIcons.Add(pair.Value);
+        }
+
+        FilteredStrokedIcons.Clear();
+        foreach (var pair in _strokedIcons.Where(i => i.Key.Contains(search)))
+        {
+            FilteredStrokedIcons.Add(pair.Value);
+        }
+    }
+}
+
+public class IconItem
+{
+    public string? ResourceKey { get; set; }
+    public Geometry? Geometry { get; set; }
+}

demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs

@@ -1,26 +1,29 @@
 using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
+using System.Globalization;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
 using Avalonia.Media;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Messaging;
+using Semi.Avalonia.Tokens.Palette;
+using Semi.Avalonia.Demo.Converters;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
-public class PaletteDemoViewModel: ObservableObject
+public class PaletteDemoViewModel : ObservableObject
 {
     private readonly string[] _predefinedColorNames =
-    {
+    [
         "Red", "Pink", "Purple", "Violet", "Indigo",
         "Blue", "LightBlue", "Cyan", "Teal", "Green",
         "LightGreen", "Lime", "Yellow", "Amber", "Orange",
         "Grey"
-    };
+    ];
+
     private readonly IResourceDictionary? _lightResourceDictionary;
     private readonly IResourceDictionary? _darkResourceDictionary;
-    
+
     private ColorItemViewModel _selectedColor = null!;
 
     public ColorItemViewModel SelectedColor
@@ -28,27 +31,31 @@ public class PaletteDemoViewModel: ObservableObject
         get => _selectedColor;
         set => SetProperty(ref _selectedColor, value);
     }
-    
-    
+
+
     private ObservableCollection<ColorListViewModel>? _lightLists;
+
     public ObservableCollection<ColorListViewModel>? LightLists
     {
         get => _lightLists;
         set => SetProperty(ref _lightLists, value);
     }
+
     private ObservableCollection<ColorListViewModel>? _darkLists;
+
     public ObservableCollection<ColorListViewModel>? DarkLists
     {
         get => _darkLists;
         set => SetProperty(ref _darkLists, value);
     }
 
-    public ObservableCollection<FunctionalColorGroupViewModel> FunctionalColors { get; set; } = new();
+    public ObservableCollection<FunctionalColorGroupViewModel> FunctionalColors { get; set; } = [];
+    public ObservableCollection<ShadowGroupViewModel> Shadows { get; set; } = [];
 
     public PaletteDemoViewModel()
     {
-        _lightResourceDictionary  = new Light.Palette();
-        _darkResourceDictionary = new Dark.Palette();
+        _lightResourceDictionary = new Light();
+        _darkResourceDictionary = new Dark();
         WeakReferenceMessenger.Default.Register<PaletteDemoViewModel, ColorItemViewModel>(this, OnClickColorItem);
     }
 
@@ -56,18 +63,20 @@ public class PaletteDemoViewModel: ObservableObject
     {
         InitializePalette();
         InitializeFunctionalColors();
+        InitializeShadows();
     }
 
     private void InitializePalette()
     {
-        LightLists = new ObservableCollection<ColorListViewModel>();
+        LightLists = [];
         foreach (var color in _predefinedColorNames)
         {
             ColorListViewModel s = new ColorListViewModel();
             s.Initialize(_lightResourceDictionary, color, true);
             LightLists.Add(s);
         }
-        DarkLists = new ObservableCollection<ColorListViewModel>();
+
+        DarkLists = [];
         foreach (var color in _predefinedColorNames)
         {
             ColorListViewModel s = new ColorListViewModel();
@@ -92,13 +101,19 @@ public class PaletteDemoViewModel: ObservableObject
         FunctionalColors.Add(new FunctionalColorGroupViewModel("Border", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BorderTokens));
         FunctionalColors.Add(new FunctionalColorGroupViewModel("Disabled", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DisabledTokens));
     }
+
+    private void InitializeShadows()
+    {
+        Shadows.Add(new ShadowGroupViewModel("Shadow", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.ShadowTokens));
+    }
+
     private void OnClickColorItem(PaletteDemoViewModel vm, ColorItemViewModel item)
     {
         SelectedColor = item;
     }
 }
 
-public class ColorListViewModel: ObservableObject
+public class ColorListViewModel : ObservableObject
 {
     private ObservableCollection<ColorItemViewModel>? _colors;
 
@@ -115,17 +130,18 @@ public class ColorListViewModel: ObservableObject
         get => _seriesName;
         set => SetProperty(ref _seriesName, value);
     }
-    
+
     internal void Initialize(IResourceDictionary? resourceDictionary, string color, bool light)
     {
         if (resourceDictionary is null)
         {
             return;
         }
+
         SeriesName = color;
-        Color = new ObservableCollection<ColorItemViewModel>();
-        
-        for (int i = 0; i < 10; i++)
+        Color = [];
+
+        for (var i = 0; i < 10; i++)
         {
             var key = "Semi" + color + i;
             if (resourceDictionary.TryGetValue(key, out var value))
@@ -136,7 +152,7 @@ public class ColorListViewModel: ObservableObject
                     var item = new ColorItemViewModel(name, brush, key, light, i);
                     item.ColorResourceKey = item.ResourceKey + "Color";
                     Color.Add(item);
-                } 
+                }
             }
         }
     }
@@ -144,15 +160,16 @@ public class ColorListViewModel: ObservableObject
 
 public class ColorItemViewModel : ObservableObject
 {
-
     private IBrush _brush = null!;
+
     public IBrush Brush
     {
         get => _brush;
         set => SetProperty(ref _brush, value);
     }
-    
+
     private IBrush _textBrush = null!;
+
     public IBrush TextBrush
     {
         get => _textBrush;
@@ -160,6 +177,7 @@ public class ColorItemViewModel : ObservableObject
     }
 
     private string _colorDisplayName = null!;
+
     public string ColorDisplayName
     {
         get => _colorDisplayName;
@@ -189,13 +207,15 @@ public class ColorItemViewModel : ObservableObject
         get => _hex;
         set => SetProperty(ref _hex, value);
     }
-    
-    public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light, int index)
+
+    public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light,
+        int index)
     {
         ColorDisplayName = colorDisplayName;
         Brush = brush;
         ResourceKey = resourceKey;
-        Hex = brush.ToString().ToUpperInvariant();
+        var hex = ColorConverter.ToHex.Convert(brush.Color, typeof(string), false, CultureInfo.InvariantCulture);
+        Hex = hex as string ?? string.Empty;
         if ((light && index < 5) || (!light && index >= 5))
         {
             TextBrush = Brushes.Black;
@@ -210,22 +230,22 @@ public class ColorItemViewModel : ObservableObject
 public class FunctionalColorGroupViewModel : ObservableObject
 {
     private string _title = null!;
+
     public string Title
     {
         get => _title;
         set => SetProperty(ref _title, value);
     }
 
-    public ObservableCollection<ColorItemViewModel> LightColors { get; set; } = new();
-    public ObservableCollection<ColorItemViewModel> DarkColors { get; set; } = new();
+    public ObservableCollection<ColorItemViewModel> LightColors { get; set; } = [];
+    public ObservableCollection<ColorItemViewModel> DarkColors { get; set; } = [];
 
-    public FunctionalColorGroupViewModel(string title, IResourceDictionary? lightDictionary, IResourceDictionary? darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
+    public FunctionalColorGroupViewModel(string title, IResourceDictionary? lightDictionary,
+        IResourceDictionary? darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
     {
         Title = title;
-        foreach (var token in tokens)
+        foreach (var (key, name) in tokens)
         {
-            string key = token.Item1;
-            string name = token.Item2;
             if (lightDictionary?.TryGetValue(key, out var lightValue) ?? false)
             {
                 if (lightValue is ISolidColorBrush lightBrush)
@@ -245,125 +265,203 @@ public class FunctionalColorGroupViewModel : ObservableObject
     }
 }
 
+public class ShadowItemViewModel : ObservableObject
+{
+    private string _shadowDisplayName = null!;
+
+    public string ShadowDisplayName
+    {
+        get => _shadowDisplayName;
+        set => SetProperty(ref _shadowDisplayName, value);
+    }
+
+    private string _resourceKey = null!;
+
+    public string ResourceKey
+    {
+        get => _resourceKey;
+        set => SetProperty(ref _resourceKey, value);
+    }
+
+    private string _boxShadowValue = null!;
+
+    public string BoxShadowValue
+    {
+        get => _boxShadowValue;
+        set => SetProperty(ref _boxShadowValue, value);
+    }
+
+    public ShadowItemViewModel(string shadowDisplayName, BoxShadows boxShadows, string resourceKey)
+    {
+        ShadowDisplayName = shadowDisplayName;
+        ResourceKey = resourceKey;
+        BoxShadowValue = boxShadows.ToString();
+    }
+}
+
+public class ShadowGroupViewModel : ObservableObject
+{
+    private string _title = null!;
+
+    public string Title
+    {
+        get => _title;
+        set => SetProperty(ref _title, value);
+    }
+
+    public ObservableCollection<ShadowItemViewModel> LightShadows { get; set; } = [];
+    public ObservableCollection<ShadowItemViewModel> DarkShadows { get; set; } = [];
+
+
+    public ShadowGroupViewModel(string title, IResourceDictionary? lightDictionary,
+        IResourceDictionary? darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
+    {
+        Title = title;
+        foreach (var (key, name) in tokens)
+        {
+            if (lightDictionary?.TryGetValue(key, out var lightValue) ?? false)
+            {
+                if (lightValue is BoxShadows lightShadow)
+                {
+                    LightShadows.Add(new ShadowItemViewModel(name, lightShadow, key));
+                }
+            }
+
+            if (darkDictionary?.TryGetValue(key, out var darkValue) ?? false)
+            {
+                if (darkValue is BoxShadows darkShadow)
+                {
+                    DarkShadows.Add(new ShadowItemViewModel(name, darkShadow, key));
+                }
+            }
+        }
+    }
+}
+
 public static class ColorTokens
 {
     public static IReadOnlyList<Tuple<string, string>> PrimaryTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorPrimary", "Primary"),
-        new ("SemiColorPrimaryPointerover", "Primary Pointerover"),
-        new ("SemiColorPrimaryActive", "Primary Active"),
-        new ("SemiColorPrimaryDisabled", "Primary Disabled"),
-        new ("SemiColorPrimaryLight", "Primary Light"),
-        new ("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
-        new ("SemiColorPrimaryLightActive", "Primary Light Active"),
+        new("SemiColorPrimary", "Primary"),
+        new("SemiColorPrimaryPointerover", "Primary Pointerover"),
+        new("SemiColorPrimaryActive", "Primary Active"),
+        new("SemiColorPrimaryDisabled", "Primary Disabled"),
+        new("SemiColorPrimaryLight", "Primary Light"),
+        new("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
+        new("SemiColorPrimaryLightActive", "Primary Light Active"),
     };
 
     public static IReadOnlyList<Tuple<string, string>> SecondaryTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorSecondary", "Secondary"),
-        new ("SemiColorSecondaryPointerover", "Secondary Pointerover"),
-        new ("SemiColorSecondaryActive", "Secondary Active"),
-        new ("SemiColorSecondaryDisabled", "Secondary Disabled"),
-        new ("SemiColorSecondaryLight", "Secondary Light"),
-        new ("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"),
-        new ("SemiColorSecondaryLightActive", "Secondary Light Active"),
+        new("SemiColorSecondary", "Secondary"),
+        new("SemiColorSecondaryPointerover", "Secondary Pointerover"),
+        new("SemiColorSecondaryActive", "Secondary Active"),
+        new("SemiColorSecondaryDisabled", "Secondary Disabled"),
+        new("SemiColorSecondaryLight", "Secondary Light"),
+        new("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"),
+        new("SemiColorSecondaryLightActive", "Secondary Light Active"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> TertiaryTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorTertiary", "Tertiary"),
-        new ("SemiColorTertiaryPointerover", "Tertiary Pointerover"),
-        new ("SemiColorTertiaryActive", "Tertiary Active"),
-        new ("SemiColorTertiaryLight", "Tertiary Light"),
-        new ("SemiColorTertiaryLightPointerover", "Tertiary Light Pointerover"),
-        new ("SemiColorTertiaryLightActive", "Tertiary Light Active"),
+        new("SemiColorTertiary", "Tertiary"),
+        new("SemiColorTertiaryPointerover", "Tertiary Pointerover"),
+        new("SemiColorTertiaryActive", "Tertiary Active"),
+        new("SemiColorTertiaryLight", "Tertiary Light"),
+        new("SemiColorTertiaryLightPointerover", "Tertiary Light Pointerover"),
+        new("SemiColorTertiaryLightActive", "Tertiary Light Active"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> InformationTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorInformation", "Information"),
-        new ("SemiColorInformationPointerover", "Information Pointerover"),
-        new ("SemiColorInformationActive", "Information Active"),
-        new ("SemiColorInformationDisabled", "Information Disabled"),
-        new ("SemiColorInformationLight", "Information Light"),
-        new ("SemiColorInformationLightPointerover", "Information Light Pointerover"),
-        new ("SemiColorInformationLightActive", "Information Light Active"),
+        new("SemiColorInformation", "Information"),
+        new("SemiColorInformationPointerover", "Information Pointerover"),
+        new("SemiColorInformationActive", "Information Active"),
+        new("SemiColorInformationDisabled", "Information Disabled"),
+        new("SemiColorInformationLight", "Information Light"),
+        new("SemiColorInformationLightPointerover", "Information Light Pointerover"),
+        new("SemiColorInformationLightActive", "Information Light Active"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> SuccessTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorSuccess", "Success"),
-        new ("SemiColorSuccessPointerover", "Success Pointerover"),
-        new ("SemiColorSuccessActive", "Success Active"),
-        new ("SemiColorSuccessDisabled", "Success Disabled"),
-        new ("SemiColorSuccessLight", "Success Light"),
-        new ("SemiColorSuccessLightPointerover", "Success Light Pointerover"),
-        new ("SemiColorSuccessLightActive", "Success Light Active"),
+        new("SemiColorSuccess", "Success"),
+        new("SemiColorSuccessPointerover", "Success Pointerover"),
+        new("SemiColorSuccessActive", "Success Active"),
+        new("SemiColorSuccessDisabled", "Success Disabled"),
+        new("SemiColorSuccessLight", "Success Light"),
+        new("SemiColorSuccessLightPointerover", "Success Light Pointerover"),
+        new("SemiColorSuccessLightActive", "Success Light Active"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> WarningTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorWarning", "Warning"),
-        new ("SemiColorWarningPointerover", "Warning Pointerover"),
-        new ("SemiColorWarningActive", "Warning Active"),
-        new ("SemiColorWarningLight", "Warning Light"),
-        new ("SemiColorWarningLightPointerover", "Warning Light Pointerover"),
-        new ("SemiColorWarningLightActive", "Warning Light Active"),
+        new("SemiColorWarning", "Warning"),
+        new("SemiColorWarningPointerover", "Warning Pointerover"),
+        new("SemiColorWarningActive", "Warning Active"),
+        new("SemiColorWarningLight", "Warning Light"),
+        new("SemiColorWarningLightPointerover", "Warning Light Pointerover"),
+        new("SemiColorWarningLightActive", "Warning Light Active"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> DangerTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorDanger", "Danger"),
-        new ("SemiColorDangerPointerover", "Danger Pointerover"),
-        new ("SemiColorDangerActive", "Danger Active"),
-        new ("SemiColorDangerLight", "Danger Light"),
-        new ("SemiColorDangerLightPointerover", "Danger Light Pointerover"),
-        new ("SemiColorDangerLightActive", "Danger Light Active"),
+        new("SemiColorDanger", "Danger"),
+        new("SemiColorDangerPointerover", "Danger Pointerover"),
+        new("SemiColorDangerActive", "Danger Active"),
+        new("SemiColorDangerLight", "Danger Light"),
+        new("SemiColorDangerLightPointerover", "Danger Light Pointerover"),
+        new("SemiColorDangerLightActive", "Danger Light Active"),
     };
 
     public static IReadOnlyList<Tuple<string, string>> TextTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorText0", "Text 0"),
-        new ("SemiColorText1", "Text 1"),
-        new ("SemiColorText2", "Text 2"),
-        new ("SemiColorText3", "Text 3"),
+        new("SemiColorText0", "Text 0"),
+        new("SemiColorText1", "Text 1"),
+        new("SemiColorText2", "Text 2"),
+        new("SemiColorText3", "Text 3"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> LinkTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorLink", "Link"),
-        new ("SemiColorLinkPointerover", "Link Pointerover"),
-        new ("SemiColorLinkActive", "Link Active"),
-        new ("SemiColorLinkVisited", "Link Visited"),
+        new("SemiColorLink", "Link"),
+        new("SemiColorLinkPointerover", "Link Pointerover"),
+        new("SemiColorLinkActive", "Link Active"),
+        new("SemiColorLinkVisited", "Link Visited"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> BackgroundTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorBackground0", "Background 0"),
-        new ("SemiColorBackground1", "Background 1"),
-        new ("SemiColorBackground2", "Background 2"),
-        new ("SemiColorBackground3", "Background 3"),
-        new ("SemiColorBackground4", "Background 4"),
+        new("SemiColorBackground0", "Background 0"),
+        new("SemiColorBackground1", "Background 1"),
+        new("SemiColorBackground2", "Background 2"),
+        new("SemiColorBackground3", "Background 3"),
+        new("SemiColorBackground4", "Background 4"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> FillTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorFill0", "Fill 0"),
-        new ("SemiColorFill1", "Fill 1"),
-        new ("SemiColorFill2", "Fill 2"),
+        new("SemiColorFill0", "Fill 0"),
+        new("SemiColorFill1", "Fill 1"),
+        new("SemiColorFill2", "Fill 2"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> BorderTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorBorder", "Border"),
+        new("SemiColorBorder", "Border"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> DisabledTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorDisabledText", "Disabled Text"),
-        new ("SemiColorDisabledBorder", "Disabled Border"),
-        new ("SemiColorDisabledBackground", "Disabled Background"),
-        new ("SemiColorDisabledFill", "Disabled Fill"),
+        new("SemiColorDisabledText", "Disabled Text"),
+        new("SemiColorDisabledBorder", "Disabled Border"),
+        new("SemiColorDisabledBackground", "Disabled Background"),
+        new("SemiColorDisabledFill", "Disabled Fill"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> ShadowTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorShadow", "Shadow"),
+        new("SemiShadowElevated", "Shadow Elevated"),
     };
-    
 }

demo/Semi.Avalonia.Demo/Views/MainView.axaml

@@ -5,77 +5,73 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:pages="using:Semi.Avalonia.Demo.Pages"
+    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>
-        <ResourceDictionary>
-            <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude Source="../Themes/TabMenu.axaml" />
-                <ResourceInclude Source="../Themes/ToggleButton.axaml" />
-            </ResourceDictionary.MergedDictionaries>
-        </ResourceDictionary>
-    </UserControl.Resources>
     <Grid RowDefinitions="Auto, *">
         <Border
+            Grid.Row="0"
             Margin="8"
             Padding="12,4"
             Theme="{DynamicResource CardBorder}">
-            <Grid VerticalAlignment="Center" ColumnDefinitions="*, Auto">
-                <StackPanel Grid.Column="0" Orientation="Horizontal">
-                    <TextBlock
+            <Panel>
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <ToggleSwitch
+                        Name="ExpandButton"
+                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                        Content="{StaticResource SemiIconSidebar}" />
+                    <SelectableTextBlock
                         VerticalAlignment="Center"
                         Classes="H6"
                         Text="Semi Avalonia"
-                        Theme="{DynamicResource TitleTextBlock}" />
-                    <TextBlock
-                        Margin="8,0"
+                        Theme="{DynamicResource TitleSelectableTextBlock}" />
+                    <SelectableTextBlock
                         VerticalAlignment="Center"
                         Text="/" />
-                    <TextBlock
-                        Margin="8,0"
+                    <SelectableTextBlock
                         VerticalAlignment="Center"
                         Classes="Secondary"
-                        Text="{Binding #tab.SelectedItem.Header}" />
+                        Text="{ReflectionBinding #tab.SelectedItem.Header}" />
                 </StackPanel>
-                <StackPanel Grid.Column="1" Orientation="Horizontal">
-                    <Button Theme="{DynamicResource BorderlessButton}" Click="OpenDocumentation">
-                        <PathIcon
-                            Width="16"
-                            Height="16"
-                            Data="M12 21.5C10.65 20.65 8.2 20 6.5 20C4.85 20 3.15 20.3 1.75 21.05C1.65 21.1 1.6 21.1 1.5 21.1C1.25 21.1 1 20.85 1 20.6V6C1.6 5.55 2.25 5.25 3 5C4.11 4.65 5.33 4.5 6.5 4.5C8.45 4.5 10.55 4.9 12 6C13.45 4.9 15.55 4.5 17.5 4.5C18.67 4.5 19.89 4.65 21 5C21.75 5.25 22.4 5.55 23 6V20.6C23 20.85 22.75 21.1 22.5 21.1C22.4 21.1 22.35 21.1 22.25 21.05C20.85 20.3 19.15 20 17.5 20C15.8 20 13.35 20.65 12 21.5M12 8V19.5C13.35 18.65 15.8 18 17.5 18C18.7 18 19.9 18.15 21 18.5V7C19.9 6.65 18.7 6.5 17.5 6.5C15.8 6.5 13.35 7.15 12 8M13 11.5C14.11 10.82 15.6 10.5 17.5 10.5C18.41 10.5 19.26 10.59 20 10.78V9.23C19.13 9.08 18.29 9 17.5 9C15.73 9 14.23 9.28 13 9.84V11.5M17.5 11.67C15.79 11.67 14.29 11.93 13 12.46V14.15C14.11 13.5 15.6 13.16 17.5 13.16C18.54 13.16 19.38 13.24 20 13.4V11.9C19.13 11.74 18.29 11.67 17.5 11.67M20 14.57C19.13 14.41 18.29 14.33 17.5 14.33C15.67 14.33 14.17 14.6 13 15.13V16.82C14.11 16.16 15.6 15.83 17.5 15.83C18.54 15.83 19.38 15.91 20 16.07V14.57Z"
-                            Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                    </Button>
-                    <Button Theme="{DynamicResource BorderlessButton}" Click="OpenRepository">
-                        <PathIcon
-                            Width="16"
-                            Height="16"
-                            Data="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
-                            Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                    </Button>
-                    <ToggleSwitch
-                        Grid.Column="1"
-                        Padding="4"
-                        IsCheckedChanged="ToggleButton_OnIsCheckedChanged"
-                        Theme="{DynamicResource ButtonToggleSwitch}">
-                        <ToggleSwitch.OnContent>
-                            <PathIcon
-                                Width="16"
-                                Height="16"
-                                Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z"
-                                Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                        </ToggleSwitch.OnContent>
-                        <ToggleSwitch.OffContent>
-                            <PathIcon
-                                Width="16"
-                                Height="16"
-                                Data="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13"
-                                Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                        </ToggleSwitch.OffContent>
-                    </ToggleSwitch>
-                </StackPanel>
-            </Grid>
+                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
+                    <Button
+                        Theme="{DynamicResource IconBorderlessButton}"
+                        Command="{Binding OpenUrlCommand}"
+                        CommandParameter="{Binding DocumentationUrl}"
+                        Content="{StaticResource SemiIconGlobe}" />
 
+                    <Button
+                        Theme="{DynamicResource IconBorderlessButton}"
+                        Command="{Binding OpenUrlCommand}"
+                        CommandParameter="{Binding RepoUrl}"
+                        Content="{StaticResource SemiIconGithubLogo}" />
+
+                    <ToggleSwitch
+                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                        Command="{Binding ToggleThemeCommand}"
+                        OnContent="{StaticResource SemiIconMoon}"
+                        OffContent="{StaticResource SemiIconSun}" />
+
+                    <Button
+                        Theme="{DynamicResource IconBorderlessButton}"
+                        Content="{StaticResource SemiIconMenu}">
+                        <Button.Flyout>
+                            <MenuFlyout Placement="Bottom" ItemsSource="{Binding MenuItems}" />
+                        </Button.Flyout>
+                        <Button.Styles>
+                            <Style Selector="MenuItem" x:DataType="views:MenuItemViewModel">
+                                <Setter Property="Header" Value="{Binding Header}" />
+                                <Setter Property="ItemsSource" Value="{Binding Items}" />
+                                <Setter Property="Command" Value="{Binding Command}" />
+                                <Setter Property="CommandParameter" Value="{Binding CommandParameter}" />
+                            </Style>
+                        </Button.Styles>
+                    </Button>
+                </StackPanel>
+            </Panel>
         </Border>
         <TabControl
             Name="tab"
@@ -84,6 +80,7 @@
             Padding="20,0,0,0"
             HorizontalAlignment="Stretch"
             TabStripPlacement="Left"
+            Classes.Dismiss="{Binding #ExpandButton.IsChecked}"
             Theme="{DynamicResource NavigationTab}">
             <TabItem Header="Overview">
                 <pages:Overview />
@@ -91,6 +88,12 @@
             <TabItem Header="Palette">
                 <pages:PaletteDemo />
             </TabItem>
+            <TabItem Header="HighContrastTheme">
+                <pages:HighContrastDemo />
+            </TabItem>
+            <TabItem Header="Icon">
+                <pages:IconDemo />
+            </TabItem>
             <TabItem Header="AutoCompleteBox">
                 <pages:AutoCompleteBoxDemo />
             </TabItem>
@@ -137,7 +140,7 @@
                 <pages:FlyoutDemo />
             </TabItem>
             <TabItem Header="GridSplitter">
-                <pages:GridSplitter />
+                <pages:GridSplitterDemo />
             </TabItem>
             <TabItem Header="HeaderedContentControl">
                 <pages:HeaderedContentControlDemo />
@@ -220,4 +223,4 @@
         </TabControl>
     </Grid>
 
-</UserControl>
+</UserControl>

demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs

@@ -1,8 +1,14 @@
 using System;
+using System.Collections.Generic;
+using System.Globalization;
+using System.Threading.Tasks;
+using System.Windows.Input;
 using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Interactivity;
+using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Styling;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
 
 namespace Semi.Avalonia.Demo.Views;
 
@@ -11,31 +17,166 @@ public partial class MainView : UserControl
     public MainView()
     {
         InitializeComponent();
+        this.DataContext = new MainViewModel();
+    }
+}
+
+public partial class MainViewModel : ObservableObject
+{
+    public string DocumentationUrl => "https://docs.irihi.tech/semi";
+    public string RepoUrl => "https://github.com/irihitech/Semi.Avalonia";
+    public IReadOnlyList<MenuItemViewModel> MenuItems { get; }
+
+    public MainViewModel()
+    {
+        MenuItems =
+        [
+            new MenuItemViewModel
+            {
+                Header = "Theme",
+                Items =
+                [
+                    new MenuItemViewModel
+                    {
+                        Header = "Auto",
+                        Command = FollowSystemThemeCommand
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "Aquatic",
+                        Command = SelectThemeCommand,
+                        CommandParameter = SemiTheme.Aquatic
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "Desert",
+                        Command = SelectThemeCommand,
+                        CommandParameter = SemiTheme.Desert
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "Dusk",
+                        Command = SelectThemeCommand,
+                        CommandParameter = SemiTheme.Dusk
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "NightSky",
+                        Command = SelectThemeCommand,
+                        CommandParameter = SemiTheme.NightSky
+                    },
+                ]
+            },
+            new MenuItemViewModel
+            {
+                Header = "Locale",
+                Items =
+                [
+                    new MenuItemViewModel
+                    {
+                        Header = "简体中文",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("zh-cn")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "English",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("en-us")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "日本語",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("ja-jp")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "Українська",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("uk-ua")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "Русский",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("ru-ru")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "繁體中文",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("zh-tw")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "Deutsch",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("de-de")
+                    },
+                ]
+            }
+        ];
     }
 
-    private void ToggleButton_OnIsCheckedChanged(object sender, RoutedEventArgs e)
+    [RelayCommand]
+    private void FollowSystemTheme()
+    {
+        Application.Current?.RegisterFollowSystemTheme();
+    }
+
+    [RelayCommand]
+    private void ToggleTheme()
     {
         var app = Application.Current;
-        if (app is not null)
+        if (app is null) return;
+        var theme = app.ActualThemeVariant;
+        app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
+        app.UnregisterFollowSystemTheme();
+    }
+
+    [RelayCommand]
+    private void SelectTheme(object? obj)
+    {
+        var app = Application.Current;
+        if (app is null) return;
+        app.RequestedThemeVariant = obj as ThemeVariant;
+        app.UnregisterFollowSystemTheme();
+    }
+
+    [RelayCommand]
+    private void SelectLocale(object? obj)
+    {
+        var app = Application.Current;
+        if (app is null) return;
+        SemiTheme.OverrideLocaleResources(app, obj as CultureInfo);
+    }
+
+    [RelayCommand]
+    private static async Task OpenUrl(string url)
+    {
+        var launcher = ResolveDefaultTopLevel()?.Launcher;
+        if (launcher is not null)
         {
-            var theme = app.ActualThemeVariant;
-            app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
+            await launcher.LaunchUriAsync(new Uri(url));
         }
     }
 
-    private async void OpenRepository(object sender, RoutedEventArgs e)
+    private static TopLevel? ResolveDefaultTopLevel()
     {
-        var top = TopLevel.GetTopLevel(this);
-        if (top is null) return;
-        var launcher = top.Launcher;
-        await launcher.LaunchUriAsync(new Uri("https://github.com/irihitech/Semi.Avalonia"));
+        return Application.Current?.ApplicationLifetime switch
+        {
+            IClassicDesktopStyleApplicationLifetime desktopLifetime => desktopLifetime.MainWindow,
+            ISingleViewApplicationLifetime singleView => TopLevel.GetTopLevel(singleView.MainView),
+            _ => null
+        };
     }
+}
 
-    private async void OpenDocumentation(object sender, RoutedEventArgs e)
-    {
-        var top = TopLevel.GetTopLevel(this);
-        if (top is null) return;
-        var launcher = top.Launcher;
-        await launcher.LaunchUriAsync(new Uri("https://docs.irihi.tech/semi"));
-    }
+public class MenuItemViewModel
+{
+    public string? Header { get; set; }
+    public ICommand? Command { get; set; }
+    public object? CommandParameter { get; set; }
+    public IList<MenuItemViewModel>? Items { get; set; }
 }

demo/Semi.Avalonia.Demo/Views/MainWindow.axaml

@@ -8,7 +8,7 @@
     Title="Semi.Avalonia.Demo"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    Icon="/Assets/avalonia-logo.ico"
+    Icon="/Assets/irihi.ico"
     mc:Ignorable="d">
     <views:MainView />
 </Window>

demo/Semi.Avalonia.TreeDataGrid.Demo/App.axaml

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

demo/Semi.Avalonia.TreeDataGrid.Demo/Program.cs

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

demo/Semi.Avalonia.TreeDataGrid.Demo/Semi.Avalonia.TreeDataGrid.Demo.csproj

@@ -1,28 +1,32 @@
 <Project Sdk="Microsoft.NET.Sdk">
     <PropertyGroup>
         <OutputType>WinExe</OutputType>
-        <TargetFramework>net6.0</TargetFramework>
+        <TargetFramework>net8.0</TargetFramework>
         <Nullable>enable</Nullable>
         <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
+        <LangVersion>latest</LangVersion>
         <ApplicationManifest>app.manifest</ApplicationManifest>
         <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
+        <!-- Uncomment below to enable Native AOT compilation-->
+        <!--<PublishAot>true</PublishAot>-->
+        <!--<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>-->
     </PropertyGroup>
 
-    <Import Project="../Directory.Build.props" />
-    
+    <Import Project="../Directory.Build.props"/>
+
     <ItemGroup>
-        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.Themes.Fluent" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.Fonts.Inter" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)"/>
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.1" />
+        <PackageReference Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)">
+            <IncludeAssets Condition="'$(Configuration)' != 'Debug'">None</IncludeAssets>
+            <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>
+        </PackageReference>
+        <PackageReference Include="CommunityToolkit.Mvvm" Version="$(CommunityToolkitVersion)"/>
     </ItemGroup>
 
-
     <ItemGroup>
-      <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj" />
-      <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj" />
+        <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj"/>
+        <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj"/>
     </ItemGroup>
 </Project>

src/Package.props

@@ -3,14 +3,14 @@
         <TargetFrameworks>net6.0;net8.0;netstandard2.0</TargetFrameworks>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <Version>11.1.0</Version>
+        <Version>11.2.1.3</Version>
         <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>
-        <AvaloniaVersion>11.1.0</AvaloniaVersion>
+        <AvaloniaVersion>11.2.1</AvaloniaVersion>
     </PropertyGroup>
 
     <ItemGroup>

src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml

@@ -5,7 +5,6 @@
     xmlns:converters="using:Avalonia.Controls.Converters"
     xmlns:primitives="using:Avalonia.Controls.Primitives"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
     <ResourceDictionary.MergedDictionaries>
         <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml" />
@@ -52,7 +51,6 @@
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    Padding="0,0,10,0"
                     HorizontalContentAlignment="Stretch"
                     VerticalContentAlignment="Stretch"
                     ClipToBounds="True"
@@ -78,11 +76,10 @@
                                 Width="300"
                                 Height="300"
                                 RowDefinitions="*,Auto">
-                                <Grid.Styles />
                                 <!--  Backgrounds  -->
                                 <!--  TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}"  -->
                                 <Border
-                                    x:Name="ContentBackgroundBorder"
+                                    Name="ContentBackgroundBorder"
                                     Grid.Row="0"
                                     Grid.RowSpan="2"
                                     Height="{TemplateBinding Height}"
@@ -94,7 +91,7 @@
                                     CornerRadius="{TemplateBinding CornerRadius}" />
 
                                 <TabControl
-                                    x:Name="PART_TabControl"
+                                    Name="PART_TabControl"
                                     Grid.Row="0"
                                     Padding="0"
                                     VerticalAlignment="Stretch"
@@ -131,7 +128,7 @@
                                                 <ColumnDefinition Width="Auto" MinWidth="32" />
                                             </Grid.ColumnDefinitions>
                                             <primitives:ColorSlider
-                                                x:Name="ColorSpectrumThirdComponentSlider"
+                                                Name="ColorSpectrumThirdComponentSlider"
                                                 Grid.Column="0"
                                                 Margin="0,0,12,0"
                                                 HorizontalAlignment="Center"
@@ -159,7 +156,7 @@
                                                 MinValue="{TemplateBinding MinValue}"
                                                 Shape="{TemplateBinding ColorSpectrumShape}" />
                                             <primitives:ColorSlider
-                                                x:Name="ColorSpectrumAlphaSlider"
+                                                Name="ColorSpectrumAlphaSlider"
                                                 Grid.Column="2"
                                                 Margin="12,0,0,0"
                                                 HorizontalAlignment="Center"
@@ -234,7 +231,7 @@
                                             RowDefinitions="Auto,24,1*,1*,1*,1*,12"
                                             Tag="{TemplateBinding ColorModel}">
                                             <Grid.Styles>
-                                                <Style Selector="NumericUpDown /template/ TextBox">
+                                                <Style Selector="NumericUpDown">
                                                     <Setter Property="InnerLeftContent">
                                                         <Template>
                                                             <TextBlock Width="12" Text="{Binding $parent[NumericUpDown].Tag}" />
@@ -283,7 +280,7 @@
                                                     CornerRadius="3">
                                                     <Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
                                                         <RadioButton
-                                                            x:Name="RgbRadioButton"
+                                                            Name="RgbRadioButton"
                                                             Grid.Column="0"
                                                             HorizontalContentAlignment="Center"
                                                             VerticalContentAlignment="Center"
@@ -295,7 +292,7 @@
                                                                                         Mode=TwoWay}"
                                                             Theme="{DynamicResource ColorViewRadioButton}" />
                                                         <RadioButton
-                                                            x:Name="HsvRadioButton"
+                                                            Name="HsvRadioButton"
                                                             Grid.Column="1"
                                                             HorizontalContentAlignment="Center"
                                                             VerticalContentAlignment="Center"
@@ -309,7 +306,7 @@
                                                     </Grid>
                                                 </Border>
                                                 <TextBox
-                                                    x:Name="PART_HexTextBox"
+                                                    Name="PART_HexTextBox"
                                                     Grid.Column="2"
                                                     Height="32"
                                                     HorizontalAlignment="Stretch"
@@ -321,7 +318,7 @@
                                             <!--  Color component editing controls  -->
                                             <!--  Component 1 RGB:Red HSV:Hue  -->
                                             <NumericUpDown
-                                                x:Name="Component1NumericUpDown"
+                                                Name="Component1NumericUpDown"
                                                 Grid.Row="2"
                                                 Grid.Column="0"
                                                 Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -352,7 +349,7 @@
                                                 TickFrequency="1" />
                                             <!--  Component 2 RGB:Green HSV:Saturation  -->
                                             <NumericUpDown
-                                                x:Name="Component2NumericUpDown"
+                                                Name="Component2NumericUpDown"
                                                 Grid.Row="3"
                                                 Grid.Column="0"
                                                 Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -383,7 +380,7 @@
                                                 TickFrequency="1" />
                                             <!--  Component 3 RGB:Blue HSV:Value  -->
                                             <NumericUpDown
-                                                x:Name="Component3NumericUpDown"
+                                                Name="Component3NumericUpDown"
                                                 Grid.Row="4"
                                                 Grid.Column="0"
                                                 Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -414,7 +411,7 @@
                                                 TickFrequency="1" />
                                             <!--  Alpha Component  -->
                                             <NumericUpDown
-                                                x:Name="AlphaComponentNumericUpDown"
+                                                Name="AlphaComponentNumericUpDown"
                                                 Grid.Row="5"
                                                 Grid.Column="0"
                                                 Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -474,6 +471,10 @@
                 </DropDownButton>
             </ControlTemplate>
         </Setter>
+        
+        <Style Selector="^ /template/ DropDownButton">
+            <Setter Property="Padding" Value="0 0 10 0"></Setter>
+        </Style>
     </ControlTheme>
 
     <ControlTheme
@@ -514,4 +515,198 @@
         </Setter>
     </ControlTheme>
 
+    <ControlTheme
+        x:Key="SimpleColorPicker"
+        BasedOn="{StaticResource {x:Type ColorPicker}}"
+        TargetType="ColorPicker">
+        <Setter Property="ColorSpectrumComponents" Value="SaturationValue" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="{x:Type ColorPicker}">
+                <DropDownButton
+                    Width="{TemplateBinding Width}"
+                    Height="{TemplateBinding Height}"
+                    HorizontalContentAlignment="Stretch"
+                    VerticalContentAlignment="Stretch"
+                    ClipToBounds="True"
+                    Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    UseLayoutRounding="False">
+                    <DropDownButton.Styles>
+                        <Style Selector="FlyoutPresenter.nopadding">
+                            <Setter Property="Padding" Value="0" />
+                        </Style>
+                    </DropDownButton.Styles>
+                    <DropDownButton.Flyout>
+                        <Flyout FlyoutPresenterClasses="nopadding" Placement="{DynamicResource SimpleColorPickerFlyoutPlacement}">
+
+                            <!--
+                                The following is copy-pasted from the ColorView's control template.
+                                It MUST always be kept in sync with the ColorView (which is master).
+                                Note the only changes are resources specific to the ColorPicker.
+                            -->
+                            <Grid Width="280">
+                                <Grid.RowDefinitions>
+                                    <RowDefinition Height="*" MinHeight="280" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                </Grid.RowDefinitions>
+                                <!--  Spectrum Tab  -->
+                                <Border
+                                    Grid.Row="0"
+                                    CornerRadius="8 8 0 0"
+                                    ClipToBounds="True">
+                                    <primitives:ColorSpectrum
+                                        x:Name="ColorSpectrum"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        Components="{TemplateBinding ColorSpectrumComponents}"
+                                        HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                                        MaxHue="{TemplateBinding MaxHue}"
+                                        MaxSaturation="{TemplateBinding MaxSaturation}"
+                                        MaxValue="{TemplateBinding MaxValue}"
+                                        MinHue="{TemplateBinding MinHue}"
+                                        MinSaturation="{TemplateBinding MinSaturation}"
+                                        MinValue="{TemplateBinding MinValue}"
+                                        Shape="{TemplateBinding ColorSpectrumShape}" />
+                                </Border>
+                                <primitives:ColorSlider
+                                    Name="ColorSpectrumThirdComponentSlider"
+                                    Grid.Row="1"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    AutomationProperties.Name="Third Component"
+                                    ColorComponent="{Binding #ColorSpectrum.ThirdComponent}"
+                                    ColorModel="Hsva"
+                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                                    IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
+                                    Orientation="Horizontal" />
+
+                                <primitives:ColorSlider
+                                    x:Name="ColorSpectrumAlphaSlider"
+                                    Grid.Row="2"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    AutomationProperties.Name="Alpha Component"
+                                    ColorComponent="Alpha"
+                                    ColorModel="Hsva"
+                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                                    IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                                    IsVisible="{TemplateBinding IsAlphaVisible}"
+                                    IsRoundingEnabled="True"
+                                    IsSnapToTickEnabled="True"
+                                    TickFrequency="1"
+                                    Orientation="Horizontal">
+                                </primitives:ColorSlider>
+                                <StackPanel
+                                    Grid.Row="3"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    Orientation="Horizontal"
+                                    Margin="0 8 0 0">
+                                    <Border
+                                        Background="{TemplateBinding Color, Converter={StaticResource ToBrushConverter}}"
+                                        Width="20"
+                                        Height="20"
+                                        CornerRadius="4" />
+                                    <Panel
+                                        Name="PART_TextBoxPanel"
+                                        Width="106"
+                                        Margin="4 0 0 0"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Center">
+                                        <TextBox
+                                            Name="PART_HexTextBox"
+                                            Classes="Small"
+                                            InnerLeftContent="#"
+                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
+                                            Text="{TemplateBinding Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
+                                            MaxLength="8" />
+                                        <TextBox
+                                            Name="PART_RgbaTextBox"
+                                            Classes="Small"
+                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Rgba}"
+                                            Text="{TemplateBinding Color, Converter={StaticResource ColorToTextConverter}, Mode=TwoWay}" />
+                                        <TextBox
+                                            Name="PART_HsvaTextBox"
+                                            Classes="Small"
+                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
+                                            Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
+                                    </Panel>
+
+                                    <NumericUpDown
+                                        Name="AlphaComponentNumericUpDown"
+                                        Width="70"
+                                        HorizontalAlignment="Right"
+                                        VerticalAlignment="Center"
+                                        AllowSpin="True"
+                                        Classes="Small"
+                                        IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                                        Maximum="{Binding #ColorSpectrumAlphaSlider.Maximum}"
+                                        Minimum="{Binding #ColorSpectrumAlphaSlider.Minimum}"
+                                        NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                        ShowButtonSpinner="False"
+                                        InnerRightContent="%"
+                                        IsVisible="{TemplateBinding IsAlphaVisible}"
+                                        Value="{Binding #ColorSpectrumAlphaSlider.Value}" />
+                                    <ComboBox
+                                        Name="ColorModelComboBox"
+                                        Width="80"
+                                        VerticalAlignment="Center"
+                                        Classes="Small"
+                                        SelectedValue="Hex">
+                                        Hex<ColorModel>Rgba</ColorModel>
+                                        <ColorModel>Hsva</ColorModel>
+                                    </ComboBox>
+                                </StackPanel>
+                            </Grid>
+                        </Flyout>
+                    </DropDownButton.Flyout>
+                </DropDownButton>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^[IsAlphaVisible=False] /template/ Panel#PART_TextBoxPanel">
+            <Setter Property="Width" Value="176" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="HexSimpleColorPicker"
+        BasedOn="{StaticResource SimpleColorPicker}"
+        TargetType="ColorPicker">
+        <Setter Property="Width" Value="200" />
+        <Setter Property="Content">
+            <Template>
+                <Grid ColumnDefinitions="Auto, *">
+                    <Border
+                        Grid.Column="0"
+                        Width="{Binding $self.Bounds.Height}"
+                        Margin="1,1,0,1"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                    <Border
+                        Grid.Column="0"
+                        Width="{Binding $self.Bounds.Height}"
+                        Margin="1,1,0,1"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{TemplateBinding HsvColor,
+                                                     Converter={StaticResource ToBrushConverter}}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                    <TextBlock
+                        Grid.Column="1"
+                        Margin="8,0,0,0"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Center"
+                        FontWeight="Regular"
+                        Foreground="{DynamicResource TextBlockDefaultForeground}"
+                        Text="{Binding $parent[ColorPicker].Color}" />
+                </Grid>
+            </Template>
+        </Setter>
+    </ControlTheme>
+
 </ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml

@@ -4,7 +4,6 @@
     xmlns:converters="using:Avalonia.Controls.Converters"
     xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
     <pc:AccentColorConverter x:Key="AccentColorConverter" />
     <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
     <converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight" />
@@ -31,7 +30,7 @@
                                 VerticalAlignment="Stretch"
                                 Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" />
                             <Border
-                                x:Name="PART_AccentDecrement2Border"
+                                Name="PART_AccentDecrement2Border"
                                 Grid.Column="0"
                                 Background="{TemplateBinding HsvColor,
                                                              Converter={StaticResource AccentColorConverter},
@@ -40,7 +39,7 @@
                                                                Converter={StaticResource LeftCornerRadiusFilterConverter}}"
                                 Tag="-2" />
                             <Border
-                                x:Name="PART_AccentDecrement1Border"
+                                Name="PART_AccentDecrement1Border"
                                 Grid.Column="1"
                                 Background="{TemplateBinding HsvColor,
                                                              Converter={StaticResource AccentColorConverter},
@@ -61,14 +60,14 @@
                                 VerticalAlignment="Stretch"
                                 Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" />
                             <Border
-                                x:Name="PART_AccentIncrement1Border"
+                                Name="PART_AccentIncrement1Border"
                                 Grid.Column="0"
                                 Background="{TemplateBinding HsvColor,
                                                              Converter={StaticResource AccentColorConverter},
                                                              ConverterParameter='1'}"
                                 Tag="1" />
                             <Border
-                                x:Name="PART_AccentIncrement2Border"
+                                Name="PART_AccentIncrement2Border"
                                 Grid.Column="1"
                                 Background="{TemplateBinding HsvColor,
                                                              Converter={StaticResource AccentColorConverter},

src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml

@@ -3,8 +3,6 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:converters="using:Avalonia.Controls.Converters"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
-
     <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
     <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
 

src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml

@@ -4,7 +4,6 @@
     xmlns:controls="using:Avalonia.Controls"
     xmlns:converters="using:Avalonia.Controls.Converters"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
     <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
     <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
     <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
@@ -16,16 +15,16 @@
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type ColorSpectrum}">
                     <Panel
-                        x:Name="PART_LayoutRoot"
+                        Name="PART_LayoutRoot"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch">
                         <Panel
-                            x:Name="PART_SizingPanel"
+                            Name="PART_SizingPanel"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center"
                             ClipToBounds="True">
                             <Rectangle
-                                x:Name="PART_SpectrumRectangle"
+                                Name="PART_SpectrumRectangle"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"
@@ -37,7 +36,7 @@
                                 RadiusY="{TemplateBinding CornerRadius,
                                                           Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Rectangle
-                                x:Name="PART_SpectrumOverlayRectangle"
+                                Name="PART_SpectrumOverlayRectangle"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"
@@ -49,7 +48,7 @@
                                 RadiusY="{TemplateBinding CornerRadius,
                                                           Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Ellipse
-                                x:Name="PART_SpectrumEllipse"
+                                Name="PART_SpectrumEllipse"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"
@@ -57,7 +56,7 @@
                                                             Converter={StaticResource EnumToBoolConverter},
                                                             ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
                             <Ellipse
-                                x:Name="PART_SpectrumOverlayEllipse"
+                                Name="PART_SpectrumOverlayEllipse"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"
@@ -65,24 +64,24 @@
                                                             Converter={StaticResource EnumToBoolConverter},
                                                             ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
                             <Canvas
-                                x:Name="PART_InputTarget"
+                                Name="PART_InputTarget"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Background="Transparent">
                                 <!--  Note: ToolTip.VerticalOffset is for touch devices to keep the tip above fingers  -->
                                 <Panel
-                                    x:Name="PART_SelectionEllipsePanel"
+                                    Name="PART_SelectionEllipsePanel"
                                     ToolTip.Placement="Top"
                                     ToolTip.VerticalOffset="-10">
                                     <Ellipse
-                                        x:Name="FocusEllipse"
+                                        Name="FocusEllipse"
                                         Margin="-2"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
                                         IsHitTestVisible="False"
                                         StrokeThickness="2" />
                                     <Ellipse
-                                        x:Name="SelectionEllipse"
+                                        Name="SelectionEllipse"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
                                         IsHitTestVisible="False"
@@ -93,7 +92,7 @@
                                 </Panel>
                             </Canvas>
                             <Rectangle
-                                x:Name="BorderRectangle"
+                                Name="BorderRectangle"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"
@@ -105,7 +104,7 @@
                                 RadiusY="{TemplateBinding CornerRadius,
                                                           Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Ellipse
-                                x:Name="BorderEllipse"
+                                Name="BorderEllipse"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"

src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml

@@ -6,13 +6,17 @@
     xmlns:globalization="using:System.Globalization"
     xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
     xmlns:primitives="using:Avalonia.Controls.Primitives"
+    xmlns:cvts="clr-namespace:Semi.Avalonia.ColorPicker.Converters"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
     <pc:ContrastBrushConverter x:Key="ContrastBrushConverter" />
     <converters:ColorToDisplayNameConverter x:Key="ColorToDisplayNameConverter" />
     <converters:ColorToHexConverter x:Key="ColorToHexConverter" />
     <converters:DoNothingForNullConverter x:Key="DoNothingForNullConverter" />
     <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
+    <converters:ToBrushConverter x:Key="ToBrushConverter" />
+    <cvts:HsvColorToTextConverter x:Key="HsvColorToTextConverter" />
+    <cvts:ColorToTextConverter x:Key="ColorToTextConverter" />
+    <cvts:ToColorModel x:Key="ToColorModel" />
     <globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
 
     <VisualBrush
@@ -86,7 +90,7 @@
                         ContentTemplate="{TemplateBinding ContentTemplate}"
                         CornerRadius="{TemplateBinding CornerRadius}" />
                     <Rectangle
-                        x:Name="BorderRectangle"
+                        Name="BorderRectangle"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         IsHitTestVisible="False"
@@ -120,7 +124,7 @@
         <Setter Property="RadioButton.Template">
             <ControlTemplate TargetType="RadioButton">
                 <ContentPresenter
-                    x:Name="PART_ContentPresenter"
+                    Name="PART_ContentPresenter"
                     Margin="{TemplateBinding Margin}"
                     Padding="{TemplateBinding Padding}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -170,7 +174,7 @@
                     <!--  Backgrounds  -->
                     <!--  TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}"  -->
                     <Border
-                        x:Name="ContentBackgroundBorder"
+                        Name="ContentBackgroundBorder"
                         Grid.Row="0"
                         Grid.RowSpan="2"
                         Height="{TemplateBinding Height}"
@@ -182,7 +186,7 @@
                         CornerRadius="{TemplateBinding CornerRadius}" />
 
                     <TabControl
-                        x:Name="PART_TabControl"
+                        Name="PART_TabControl"
                         Grid.Row="0"
                         Padding="0"
                         VerticalAlignment="Stretch"
@@ -219,7 +223,7 @@
                                     <ColumnDefinition Width="Auto" MinWidth="32" />
                                 </Grid.ColumnDefinitions>
                                 <primitives:ColorSlider
-                                    x:Name="ColorSpectrumThirdComponentSlider"
+                                    Name="ColorSpectrumThirdComponentSlider"
                                     Grid.Column="0"
                                     Margin="0,0,12,0"
                                     HorizontalAlignment="Center"
@@ -322,7 +326,7 @@
                                 RowDefinitions="Auto,24,1*,1*,1*,1*,12"
                                 UseLayoutRounding="False">
                                 <Grid.Styles>
-                                    <Style Selector="NumericUpDown /template/ TextBox">
+                                    <Style Selector="NumericUpDown">
                                         <Setter Property="InnerLeftContent">
                                             <Template>
                                                 <TextBlock Width="12" Text="{Binding $parent[NumericUpDown].Tag}" />
@@ -376,12 +380,12 @@
                                         AutomationProperties.Name="Hexadecimal Color"
                                         InnerLeftContent="#"
                                         IsVisible="{TemplateBinding IsHexInputVisible}"
-                                        MaxLength="9" />
+                                        MaxLength="8" />
                                 </Grid>
                                 <!--  Color component editing controls  -->
                                 <!--  Component 1 RGB:Red HSV:Hue  -->
                                 <NumericUpDown
-                                    x:Name="Component1NumericUpDown"
+                                    Name="Component1NumericUpDown"
                                     Grid.Row="2"
                                     Grid.Column="0"
                                     Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -412,7 +416,7 @@
                                     TickFrequency="1" />
                                 <!--  Component 2 RGB:Green HSV:Saturation  -->
                                 <NumericUpDown
-                                    x:Name="Component2NumericUpDown"
+                                    Name="Component2NumericUpDown"
                                     Grid.Row="3"
                                     Grid.Column="0"
                                     Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -443,7 +447,7 @@
                                     TickFrequency="1" />
                                 <!--  Component 3 RGB:Blue HSV:Value  -->
                                 <NumericUpDown
-                                    x:Name="Component3NumericUpDown"
+                                    Name="Component3NumericUpDown"
                                     Grid.Row="4"
                                     Grid.Column="0"
                                     Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -474,7 +478,7 @@
                                     TickFrequency="1" />
                                 <!--  Alpha Component  -->
                                 <NumericUpDown
-                                    x:Name="AlphaComponentNumericUpDown"
+                                    Name="AlphaComponentNumericUpDown"
                                     Grid.Row="5"
                                     Grid.Column="0"
                                     Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -560,4 +564,142 @@
             </Style>
         </Style>
     </ControlTheme>
+
+    <ControlTheme x:Key="SimpleColorView" TargetType="ColorView">
+        <Setter Property="Width" Value="280" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="ColorSpectrumComponents" Value="SaturationValue" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="{x:Type ColorView}">
+                <Grid>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="*" MinHeight="280" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                    </Grid.RowDefinitions>
+                    <!--  Spectrum Tab  -->
+                    <Border
+                        Grid.Row="0"
+                        CornerRadius="8 8 0 0"
+                        ClipToBounds="True">
+                        <primitives:ColorSpectrum
+                            x:Name="ColorSpectrum"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Components="{TemplateBinding ColorSpectrumComponents}"
+                            HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                            MaxHue="{TemplateBinding MaxHue}"
+                            MaxSaturation="{TemplateBinding MaxSaturation}"
+                            MaxValue="{TemplateBinding MaxValue}"
+                            MinHue="{TemplateBinding MinHue}"
+                            MinSaturation="{TemplateBinding MinSaturation}"
+                            MinValue="{TemplateBinding MinValue}"
+                            Shape="{TemplateBinding ColorSpectrumShape}" />
+                    </Border>
+                    <primitives:ColorSlider
+                        Name="ColorSpectrumThirdComponentSlider"
+                        Grid.Row="1"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Center"
+                        AutomationProperties.Name="Third Component"
+                        ColorComponent="{Binding #ColorSpectrum.ThirdComponent}"
+                        ColorModel="Hsva"
+                        HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                        IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
+                        Orientation="Horizontal" />
+
+                    <primitives:ColorSlider
+                        x:Name="ColorSpectrumAlphaSlider"
+                        Grid.Row="2"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Center"
+                        AutomationProperties.Name="Alpha Component"
+                        ColorComponent="Alpha"
+                        ColorModel="Hsva"
+                        HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                        IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                        IsVisible="{TemplateBinding IsAlphaVisible}"
+                        IsRoundingEnabled="True"
+                        IsSnapToTickEnabled="True"
+                        TickFrequency="1"
+                        Orientation="Horizontal">
+                    </primitives:ColorSlider>
+                    <StackPanel
+                        Grid.Row="3"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Center"
+                        Orientation="Horizontal"
+                        Margin="0 8 0 0">
+                        <Border
+                            Background="{TemplateBinding Color, Converter={StaticResource ToBrushConverter}}"
+                            Width="20"
+                            Height="20"
+                            CornerRadius="4" />
+                        <Panel
+                            Name="PART_TextBoxPanel"
+                            Width="106"
+                            Margin="4 0 0 0"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Center">
+                            <TextBox
+                                Name="PART_HexTextBox"
+                                Classes="Small"
+                                InnerLeftContent="#"
+                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
+                                Text="{TemplateBinding Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
+                                MaxLength="8" />
+                            <TextBox
+                                Name="PART_RgbaTextBox"
+                                Classes="Small"
+                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Rgba}"
+                                Text="{TemplateBinding Color, Converter={StaticResource ColorToTextConverter}, Mode=TwoWay}" />
+                            <TextBox
+                                Name="PART_HsvaTextBox"
+                                Classes="Small"
+                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
+                                Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
+                        </Panel>
+
+                        <NumericUpDown
+                            Name="AlphaComponentNumericUpDown"
+                            Width="70"
+                            HorizontalAlignment="Right"
+                            VerticalAlignment="Center"
+                            AllowSpin="True"
+                            Classes="Small"
+                            IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                            Maximum="{Binding #ColorSpectrumAlphaSlider.Maximum}"
+                            Minimum="{Binding #ColorSpectrumAlphaSlider.Minimum}"
+                            NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                            ShowButtonSpinner="False"
+                            InnerRightContent="%"
+                            IsVisible="{TemplateBinding IsAlphaVisible}"
+                            Value="{Binding #ColorSpectrumAlphaSlider.Value}" />
+                        <ComboBox
+                            Name="ColorModelComboBox"
+                            Width="80"
+                            VerticalAlignment="Center"
+                            Classes="Small"
+                            SelectedValue="Hex">
+                            Hex<ColorModel>Rgba</ColorModel>
+                            <ColorModel>Hsva</ColorModel>
+                        </ComboBox>
+                    </StackPanel>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^[IsAlphaVisible=False] /template/ Panel#PART_TextBoxPanel">
+            <Setter Property="Width" Value="176" />
+        </Style>
+    </ControlTheme>
+
+    <Design.PreviewWith>
+        <ColorView
+            Theme="{StaticResource SimpleColorView}"
+            IsAlphaVisible="True"
+            IsAlphaEnabled="True"
+            ColorModel="Hsva"
+            HsvColor="hsv(120,7%,90%)" />
+    </Design.PreviewWith>
 </ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Converters/ColorToTextConverter.cs

@@ -0,0 +1,34 @@
+using System;
+using System.Globalization;
+using System.Linq;
+using Avalonia;
+using Avalonia.Data;
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+
+namespace Semi.Avalonia.ColorPicker.Converters;
+
+public class ColorToTextConverter : IValueConverter
+{
+    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        return value is Color color ? $"{color.R},{color.G},{color.B},{color.A}" : AvaloniaProperty.UnsetValue;
+    }
+
+    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is not string str) return BindingOperations.DoNothing;
+        var parts = str.Split(',');
+        if (parts.Length != 4 || parts.Any(string.IsNullOrWhiteSpace)) return BindingOperations.DoNothing;
+
+        if (byte.TryParse(parts[0], NumberStyles.Integer, CultureInfo.InvariantCulture, out var r) &&
+            byte.TryParse(parts[1], NumberStyles.Integer, CultureInfo.InvariantCulture, out var g) &&
+            byte.TryParse(parts[2], NumberStyles.Integer, CultureInfo.InvariantCulture, out var b) &&
+            byte.TryParse(parts[3], NumberStyles.Integer, CultureInfo.InvariantCulture, out var a))
+        {
+            return new Color(a, r, g, b);
+        }
+
+        return BindingOperations.DoNothing;
+    }
+}

src/Semi.Avalonia.ColorPicker/Converters/HsvColorToTextConverter.cs

@@ -0,0 +1,36 @@
+using System;
+using System.Globalization;
+using System.Linq;
+using Avalonia;
+using Avalonia.Data;
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+
+namespace Semi.Avalonia.ColorPicker.Converters;
+
+public class HsvColorToTextConverter : IValueConverter
+{
+    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        return value is HsvColor hsvColor
+            ? $"{Math.Round(hsvColor.H)},{Math.Round(hsvColor.S * 100)},{Math.Round(hsvColor.V * 100)},{Math.Round(hsvColor.A * 100)}"
+            : AvaloniaProperty.UnsetValue;
+    }
+
+    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is not string str) return BindingOperations.DoNothing;
+        var parts = str.Split(',');
+        if (parts.Length != 4 || parts.Any(string.IsNullOrWhiteSpace)) return BindingOperations.DoNothing;
+
+        if (double.TryParse(parts[0], NumberStyles.Float, CultureInfo.InvariantCulture, out var h) &&
+            double.TryParse(parts[1], NumberStyles.Float, CultureInfo.InvariantCulture, out var s) &&
+            double.TryParse(parts[2], NumberStyles.Float, CultureInfo.InvariantCulture, out var v) &&
+            double.TryParse(parts[3], NumberStyles.Float, CultureInfo.InvariantCulture, out var a))
+        {
+            return new HsvColor(a / 100, h, s / 100, v / 100);
+        }
+
+        return BindingOperations.DoNothing;
+    }
+}

src/Semi.Avalonia.ColorPicker/Converters/ToColorModel.cs

@@ -1,22 +1,17 @@
-using System;
-using System.Collections.Generic;
+using System;
 using System.Globalization;
-using System.Linq;
-using Avalonia.Collections;
 using Avalonia.Controls;
 using Avalonia.Data.Converters;
 
-namespace Semi.Avalonia.Converters;
+namespace Semi.Avalonia.ColorPicker.Converters;
 
-public class ItemToObjectConverter: IValueConverter
+public class ToColorModel : IValueConverter
 {
     public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
-        if (value is int i)
-        {
-            return Enumerable.Repeat(new object(), i).ToList();
-        }
-        return new List<object>();
+        return parameter is "Hex" && value is "Hex" ||
+               parameter is "Rgba" && value is ColorModel.Rgba ||
+               parameter is "Hsva" && value is ColorModel.Hsva;
     }
 
     public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)

src/Semi.Avalonia.ColorPicker/Dark.axaml

@@ -17,5 +17,5 @@
 
     <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
 
-    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1AFFFFFF</BoxShadows>
+    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">inset 0 0 0 1 #1AFFFFFF, 0 4 14 #40000000</BoxShadows>
 </ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Light.axaml

@@ -17,5 +17,5 @@
 
     <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
 
-    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1A000000</BoxShadows>
+    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 1 #4A000000, 0 4 14 #1A000000</BoxShadows>
 </ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Semi.Avalonia.ColorPicker.csproj

@@ -4,7 +4,7 @@
 
     <PropertyGroup>
         <Title>Semi.Avalonia.ColorPicker</Title>
-        <PackageReleaseNotes>Update to Avalonia 11.1.0</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 11.2.1.3</PackageReleaseNotes>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">

src/Semi.Avalonia.ColorPicker/Shared.axaml

@@ -6,15 +6,12 @@
     <Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness>
     <x:Double x:Key="ColorViewNumericUpDownWidth">70</x:Double>
 
-    <StreamGeometry x:Key="ColorViewSpectrumIconGlyph">
-        M6.92,19L5,17.08L13.06,9L15,10.94M20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L13.84,6.41L11.91,4.5L10.5,5.91L11.92,7.33L3,16.25V21H7.75L16.67,12.08L18.09,13.5L19.5,12.09L17.58,10.17L20.7,7.05C21.1,6.65 21.1,6 20.71,5.63Z
-    </StreamGeometry>
-    <StreamGeometry x:Key="ColorViewPaletteIconGlyph">
-        M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z
-    </StreamGeometry>
-    <StreamGeometry x:Key="ColorViewComponentsIconGlyph">
-        M4 6.5C5.10457 6.5 6 5.60457 6 4.5C6 3.39543 5.10457 2.5 4 2.5C2.89543 2.5 2 3.39543 2 4.5C2 5.60457 2.89543 6.5 4 6.5ZM9.5 3C8.67157 3 8 3.67157 8 4.5C8 5.32843 8.67157 6 9.5 6H20.5C21.3284 6 22 5.32843 22 4.5C22 3.67157 21.3284 3 20.5 3H9.5ZM8 11.5C8 10.6716 8.67157 10 9.5 10H20.5C21.3284 10 22 10.6716 22 11.5C22 12.3284 21.3284 13 20.5 13H9.5C8.67157 13 8 12.3284 8 11.5ZM8 18.5C8 17.6716 8.67157 17 9.5 17H20.5C21.3284 17 22 17.6716 22 18.5C22 19.3284 21.3284 20 20.5 20H9.5C8.67157 20 8 19.3284 8 18.5ZM6 11.5C6 12.6046 5.10457 13.5 4 13.5C2.89543 13.5 2 12.6046 2 11.5C2 10.3954 2.89543 9.5 4 9.5C5.10457 9.5 6 10.3954 6 11.5ZM4 20.5C5.10457 20.5 6 19.6046 6 18.5C6 17.3954 5.10457 16.5 4 16.5C2.89543 16.5 2 17.3954 2 18.5C2 19.6046 2.89543 20.5 4 20.5Z
-    </StreamGeometry>
+    <StreamGeometry x:Key="ColorViewSpectrumIconGlyph">M1.22 20.77a4.24 4.24 0 0 1 .02-5.98l9.33-9.28-.94-.95a1.41 1.41 0 0 1 0-1.99 1.39 1.39 0 0 1 1.97 0l.95.97L14.9 1.2a4.16 4.16 0 0 1 5.89.02 4.24 4.24 0 0 1-.02 5.98l-2.3 2.28 1.02 1.02c.54.55.54 1.44 0 1.99-.55.55-1.43.55-1.97 0l-1.03-1.03-9.37 9.32a4.16 4.16 0 0 1-5.89-.02ZM12.54 7.49l1.97 1.99-9.35 9.3c-.55.55-1.42.55-1.97 0a1.41 1.41 0 0 1 .01-2l9.34-9.29Z</StreamGeometry>
+    <StreamGeometry x:Key="ColorViewPaletteIconGlyph">M2 4c0-1.1.9-2 2-2h5a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm6 13.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm11.59-8.91L16.4 5.4a2 2 0 0 0-2.82 0L13 6v12l6.59-6.59a2 2 0 0 0 0-2.82ZM22 16a2 2 0 0 0-2-2l-8 8h8a2 2 0 0 0 2-2v-4Z</StreamGeometry>
+    <StreamGeometry x:Key="ColorViewComponentsIconGlyph">M4 6.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM9.5 3a1.5 1.5 0 1 0 0 3h11a1.5 1.5 0 0 0 0-3h-11ZM8 11.5c0-.83.67-1.5 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11A1.5 1.5 0 0 1 8 11.5Zm0 7c0-.83.67-1.5 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11A1.5 1.5 0 0 1 8 18.5Zm-2-7a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm-2 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z</StreamGeometry>
+    <!-- <StaticResource x:Key="ColorViewSpectrumIconGlyph" ResourceKey="SemiIconEyedropper" /> -->
+    <!-- <StaticResource x:Key="ColorViewPaletteIconGlyph" ResourceKey="SemiIconColorPalette" /> -->
+    <!-- <StaticResource x:Key="ColorViewComponentsIconGlyph" ResourceKey="SemiIconList" /> -->
 
     <x:Double x:Key="ColorSliderWidth">16</x:Double>
     <CornerRadius x:Key="ColorSliderCornerRadius">6</CornerRadius>
@@ -27,6 +24,7 @@
     <CornerRadius x:Key="ColorPreviewerCornerRadius">3</CornerRadius>
 
     <colorPicker:SemiColorDarkPalette x:Key="SemiColorPalette" />
-    
+
     <PlacementMode x:Key="ColorPickerFlyoutPlacement">AnchorAndGravity</PlacementMode>
+    <PlacementMode x:Key="SimpleColorPickerFlyoutPlacement">BottomEdgeAlignedLeft</PlacementMode>
 </ResourceDictionary>

src/Semi.Avalonia.DataGrid/DataGrid.axaml

@@ -3,7 +3,6 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:collections="using:Avalonia.Collections"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
     <ControlTheme x:Key="DataGridCellTextBlockTheme" TargetType="TextBlock">
         <Setter Property="Margin" Value="{DynamicResource DataGridCellTextBlockDefaultMargin}" />
         <Setter Property="VerticalAlignment" Value="Center" />
@@ -35,14 +34,14 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
-                    x:Name="CellBorder"
+                    Name="CellBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid x:Name="PART_CellRoot" ColumnDefinitions="*,Auto">
+                    <Grid Name="PART_CellRoot" ColumnDefinitions="*,Auto">
                         <Rectangle
-                            x:Name="CurrencyVisual"
+                            Name="CurrencyVisual"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Fill="Transparent"
@@ -51,7 +50,7 @@
                             Stroke="{DynamicResource DataGridCellCurrentBorderBrush}"
                             StrokeThickness="{DynamicResource DataGridCellVisualStrokeThickness}" />
                         <Panel
-                            x:Name="FocusVisual"
+                            Name="FocusVisual"
                             Grid.Column="0"
                             IsHitTestVisible="False"
                             IsVisible="False">
@@ -75,7 +74,7 @@
                             Foreground="{TemplateBinding Foreground}" />
 
                         <Rectangle
-                            x:Name="InvalidVisualElement"
+                            Name="InvalidVisualElement"
                             Grid.Column="0"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
@@ -117,7 +116,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="DataGridColumnHeader">
                 <Border
-                    x:Name="HeaderBorder"
+                    Name="HeaderBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -153,7 +152,7 @@
                             Fill="{TemplateBinding SeparatorBrush}"
                             IsVisible="{TemplateBinding AreSeparatorsVisible}" />
                         <Panel
-                            x:Name="FocusVisual"
+                            Name="FocusVisual"
                             Grid.Column="0"
                             IsHitTestVisible="False"
                             IsVisible="False">
@@ -204,7 +203,7 @@
         TargetType="DataGridColumnHeader">
         <Setter Property="Template">
             <ControlTemplate>
-                <Grid x:Name="TopLeftHeaderRoot" RowDefinitions="*,*,Auto">
+                <Grid Name="TopLeftHeaderRoot" RowDefinitions="*,*,Auto">
                     <Border
                         Grid.RowSpan="2"
                         BorderBrush="{DynamicResource DataGridLineBrush}"
@@ -228,7 +227,7 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Grid
-                    x:Name="PART_Root"
+                    Name="PART_Root"
                     ColumnDefinitions="Auto,*"
                     RowDefinitions="*,*,Auto">
                     <Border
@@ -238,18 +237,18 @@
                         BorderThickness="0,0,1,0">
                         <Grid Background="{TemplateBinding Background}">
                             <Rectangle
-                                x:Name="RowInvalidVisualElement"
+                                Name="RowInvalidVisualElement"
                                 Fill="{DynamicResource DataGridCellErrorBrush}"
                                 Opacity="0"
                                 Stretch="Fill" />
                             <Rectangle
-                                x:Name="BackgroundRectangle"
+                                Name="BackgroundRectangle"
                                 Fill="{DynamicResource DataGridRowBackground}"
                                 Stretch="Fill" />
                         </Grid>
                     </Border>
                     <Rectangle
-                        x:Name="HorizontalSeparator"
+                        Name="HorizontalSeparator"
                         Grid.Row="2"
                         Grid.Column="0"
                         Grid.ColumnSpan="2"
@@ -278,7 +277,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="DataGridRow">
                 <Border
-                    x:Name="RowBorder"
+                    Name="RowBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -296,7 +295,7 @@
                             Background="{DynamicResource DataGridRowBackground}"
                             CornerRadius="3" />
                         <Rectangle
-                            x:Name="InvalidVisualElement"
+                            Name="InvalidVisualElement"
                             Grid.ColumnSpan="2"
                             Fill="{DynamicResource DataGridRowErrorBackground}"
                             Opacity="0" />
@@ -407,10 +406,11 @@
                             Margin="4,0,0,0"
                             Foreground="{TemplateBinding Foreground}"
                             IsVisible="{TemplateBinding IsPropertyNameVisible}" />
-                        <TextBlock
+                        <ContentControl
+                            Name="PART_GroupKeyContentControl"
                             Margin="4,0,0,0"
                             Foreground="{TemplateBinding Foreground}"
-                            Text="{Binding Key}" />
+                            Content="{Binding Key}" />
                         <TextBlock
                             Name="PART_ItemCountElement"
                             Margin="4,0,0,0"
@@ -419,7 +419,7 @@
                     </StackPanel>
 
                     <Rectangle
-                        x:Name="CurrencyVisual"
+                        Name="CurrencyVisual"
                         Grid.Row="0"
                         Grid.Column="0"
                         HorizontalAlignment="Stretch"
@@ -430,7 +430,7 @@
                         Stroke="{DynamicResource DataGridRowGroupHeaderCurrentBorderBrush}"
                         StrokeThickness="{DynamicResource DataGridRowGroupHeaderVisualStrokeThickness}" />
                     <Panel
-                        x:Name="FocusVisual"
+                        Name="FocusVisual"
                         Grid.Row="0"
                         Grid.Column="0"
                         IsHitTestVisible="False"
@@ -453,7 +453,7 @@
                         DataGridFrozenGrid.IsFrozen="True" />
 
                     <Rectangle
-                        x:Name="PART_BottomGridLine"
+                        Name="PART_BottomGridLine"
                         Grid.Row="1"
                         Grid.Column="0"
                         Grid.ColumnSpan="5"
@@ -471,6 +471,7 @@
         <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
         <Setter Property="SelectionMode" Value="Extended" />
         <Setter Property="GridLinesVisibility" Value="None" />
+        <Setter Property="ScrollViewer.AllowAutoHide" Value="True" />
         <Setter Property="HorizontalGridLinesBrush" Value="{DynamicResource DataGridLineBrush}" />
         <Setter Property="VerticalGridLinesBrush" Value="{DynamicResource DataGridLineBrush}" />
         <Setter Property="DropLocationIndicatorTemplate">
@@ -481,7 +482,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="DataGrid">
                 <Border
-                    x:Name="DataGridBorder"
+                    Name="DataGridBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -543,7 +544,7 @@
                                 Orientation="Horizontal" />
                         </Grid>
                         <Border
-                            x:Name="PART_DisabledVisualElement"
+                            Name="PART_DisabledVisualElement"
                             Grid.Row="0"
                             Grid.RowSpan="4"
                             Grid.Column="0"
@@ -570,5 +571,15 @@
                 <Setter Property="IsVisible" Value="False" />
             </Style>
         </Style>
+
+        <Style Selector="^[(ScrollViewer.AllowAutoHide)=False]">
+            <Style Selector="^ /template/ DataGridRowsPresenter#PART_RowsPresenter">
+                <Setter Property="Grid.RowSpan" Value="1" />
+                <Setter Property="Grid.ColumnSpan" Value="2" />
+            </Style>
+            <Style Selector="^ /template/ DataGridColumnHeadersPresenter#PART_ColumnHeadersPresenter">
+                <Setter Property="Grid.ColumnSpan" Value="1" />
+            </Style>
+        </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia.DataGrid/Light.axaml

@@ -18,8 +18,8 @@
     <SolidColorBrush x:Key="DataGridDetailsPresenterBackground" Color="Transparent" />
 
     <SolidColorBrush x:Key="DataGridRowPointeroverBackground" Opacity="0.09" Color="#2E3238" />
-    <SolidColorBrush x:Key="DataGridRowSelectedBackground" Opacity="0.2" Color="#EAF5FF" />
-    <SolidColorBrush x:Key="DataGridRowSelectedPointeroverBackground" Opacity="0.3" Color="#CBE7FE" />
+    <SolidColorBrush x:Key="DataGridRowSelectedBackground" Color="#EAF5FF" />
+    <SolidColorBrush x:Key="DataGridRowSelectedPointeroverBackground" Color="#CBE7FE" />
     <SolidColorBrush x:Key="DataGridRowGroupHeaderExpandIconForeground" Opacity="0.62" Color="#1C1F23" />
     <SolidColorBrush x:Key="DataGridRowGroupHeaderBackground" Opacity="0.05" Color="#2E3238" />
 

src/Semi.Avalonia.DataGrid/Semi.Avalonia.DataGrid.csproj

@@ -1,10 +1,10 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
     <Import Project="../Package.props"/>
-    
+
     <PropertyGroup>
         <Title>Semi.Avalonia.DataGrid</Title>
-        <PackageReleaseNotes>Update to Avalonia 11.1.0</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 11.2.1.3</PackageReleaseNotes>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">

src/Semi.Avalonia.DataGrid/Shared.axaml

@@ -8,13 +8,16 @@
     <Thickness x:Key="DataGridColumnHeaderPadding">12 0 0 0</Thickness>
     <x:Double x:Key="DataGridColumnHeaderMinHeight">32</x:Double>
 
-    <StreamGeometry x:Key="DataGridColumnHeaderAscendingGlyph">M6.45096 8.34102L11.247 2.86102C11.3408 2.75361 11.4566 2.66753 11.5865 2.60854C11.7163 2.54956 11.8573 2.51904 12 2.51904C12.1426 2.51904 12.2836 2.54956 12.4135 2.60854C12.5433 2.66753 12.6591 2.75361 12.753 2.86102L17.549 8.34102C18.115 8.98802 17.655 10 16.796 10H7.20396C6.34396 10 5.88496 8.98802 6.45096 8.34102Z</StreamGeometry>
-    <StreamGeometry x:Key="DataGridColumnHeaderDescendingGlyph">M17.549 15.659L12.753 21.139C12.6591 21.2464 12.5434 21.3325 12.4135 21.3915C12.2836 21.4505 12.1427 21.481 12 21.481C11.8574 21.481 11.7164 21.4505 11.5865 21.3915C11.4566 21.3325 11.3409 21.2464 11.247 21.139L6.45101 15.659C5.88501 15.011 6.34501 14 7.20401 14H16.796C17.656 14 18.115 15.012 17.549 15.659Z</StreamGeometry>
+    <StreamGeometry x:Key="DataGridColumnHeaderAscendingGlyph">m6.45 8.34 4.8-5.48a1 1 0 0 1 1.5 0l4.8 5.48A1 1 0 0 1 16.8 10H7.2a1 1 0 0 1-.75-1.66Z</StreamGeometry>
+    <StreamGeometry x:Key="DataGridColumnHeaderDescendingGlyph">m17.55 15.66-4.8 5.48a1 1 0 0 1-1.5 0l-4.8-5.48A1 1 0 0 1 7.2 14h9.6a1 1 0 0 1 .75 1.66Z</StreamGeometry>
+    <!-- <StaticResource x:Key="DataGridColumnHeaderAscendingGlyph" ResourceKey="SemiIconCaretUp" /> -->
+    <!-- <StaticResource x:Key="DataGridColumnHeaderDescendingGlyph" ResourceKey="SemiIconCaretDown" /> -->
 
     <Thickness x:Key="DataGridRowHeaderMargin">8 0</Thickness>
     <Thickness x:Key="DataGridRowMargin">2</Thickness>
 
-    <StreamGeometry x:Key="DataGridRowGroupHeaderExpandIconGlyph">M7.43934 19.7957C6.85355 19.2099 6.85355 18.2601 7.43934 17.6744L13.0962 12.0175L7.43934 6.36065C6.85355 5.77486 6.85355 4.82511 7.43934 4.23933C8.02513 3.65354 8.97487 3.65354 9.56066 4.23933L16.2782 10.9568C16.864 11.5426 16.864 12.4924 16.2782 13.0782L9.56066 19.7957C8.97487 20.3815 8.02513 20.3815 7.43934 19.7957Z</StreamGeometry>
+    <StreamGeometry x:Key="DataGridRowGroupHeaderExpandIconGlyph">M7.44 19.8a1.5 1.5 0 0 1 0-2.13l5.66-5.65-5.66-5.66a1.5 1.5 0 1 1 2.12-2.12l6.72 6.72a1.5 1.5 0 0 1 0 2.12L9.56 19.8a1.5 1.5 0 0 1-2.12 0Z</StreamGeometry>
+    <!-- <StaticResource x:Key="DataGridRowGroupHeaderExpandIconGlyph" ResourceKey="SemiIconChevronRight" /> -->
 
     <x:Double x:Key="DataGridRowGroupHeaderVisualStrokeThickness">1</x:Double>
 </ResourceDictionary>