feat: update to 11.3.0

feat: add VerticalSplitView control theme with responsive styles

.github/FUNDING.yml

@@ -0,0 +1,15 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: semiavalonia
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+thanks_dev: # Replace with a single thanks.dev username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/workflows/Pack.yml

@@ -1,58 +0,0 @@
-name: Pack
-
-on:
-  push:
-    branches: [ "action/pack" ]
-  pull_request:
-    branches: [ "action/pack" ]
-
-jobs:
-  nuget_desktop:
-    runs-on: windows-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4.1.1
-
-      - name: Nuget Semi.Avalonia
-        run: dotnet pack ./src/Semi.Avalonia -o ./nugets
-
-      - name: Nuget Semi.Avalonia.ColorPicker
-        run: dotnet pack ./src/Semi.Avalonia.ColorPicker  -o ./nugets
-
-      - name: Nuget Semi.Avalonia.DataGrid
-        run: dotnet pack ./src/Semi.Avalonia.DataGrid  -o ./nugets
-
-      - name: Nuget Semi.Avalonia.TreeDataGrid
-        run: dotnet pack ./src/Semi.Avalonia.TreeDataGrid  -o ./nugets
-
-      - name: Desktop
-        run: dotnet publish ./demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true --self-contained true
-
-      - 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 net7.0-android --no-restore
-
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.3.1
-        with:
-          name: android
-          path: ./**/publish/*Signed.apk

.github/workflows/deploy.yml

@@ -2,12 +2,9 @@ name: Deploy to GitHub Pages
 
 env:
   PROJECT_PATH: demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj
-  OUTPUT_PATH: demo/Semi.Avalonia.Demo.Web/bin/Release/net7.0/browser-wasm/AppBundle
+  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:
@@ -16,38 +13,30 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4.1.1
 
-      - name: Setup .NET 7
+      - name: Setup .NET 8
         uses: actions/setup-dotnet@v4
         with:
-          dotnet-version: 7.0.405
+          dotnet-version: 8.0.x
 
       - name: Install wasm-tools
-        run: dotnet workload install wasm-tools wasm-tools-net7
-
-      - name: Install DotNetCompress
-        run: dotnet tool install --global DotNetCompress --version 3.0.0 --no-cache
+        run: dotnet workload install wasm-tools
 
       - name: Publish .NET Project
-        run: dotnet publish $PROJECT_PATH -c Release -o release --nologo
+        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
 
-      - name: Compress Output using Brotli
-        run: DotNetCompress -d $OUTPUT_PATH -p "*.dll" "*.js" "*.wasm" --format br --threads 4
-
-      - name: Compress Output using GZip
-        run: DotNetCompress -d $OUTPUT_PATH -p "*.dll" "*.js" "*.wasm" --format gz --threads 4
-
       - name: Add .nojekyll file
         run: touch $OUTPUT_PATH/.nojekyll
 
       - name: Commit wwwroot to GitHub Pages
         uses: JamesIves/github-pages-deploy-action@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: 'false'
+        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

@@ -0,0 +1,59 @@
+name: Pack to NuGet
+
+on:
+  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: 'false'
+        type: boolean
+      Semi_Avalonia_TreeDataGrid:
+        description: 'Pack Semi.Avalonia.TreeDataGrid'
+        required: true
+        default: 'false'
+        type: boolean
+
+jobs:
+  Pack_to_NuGet:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4.1.1
+
+      - name: Pack Semi.Avalonia
+        if: ${{ github.event.inputs.Semi_Avalonia == 'true' }}
+        run: dotnet pack ./src/Semi.Avalonia -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: Pack Semi.Avalonia.DataGrid
+        if: ${{ github.event.inputs.Semi_Avalonia_DataGrid == 'true' }}
+        run: dotnet pack ./src/Semi.Avalonia.DataGrid -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: 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: 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,146 @@
+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: 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

.run/SC-Single.run.xml

@@ -1,6 +1,6 @@
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="SC-Single" type="DotNetFolderPublish" factoryName="Publish to folder">
-    <riderPublish configuration="Release" include_native_libs_for_self_extract="true" platform="Any CPU" produce_single_file="true" runtime="win-x64" self_contained="true" target_folder="$PROJECT_DIR$/demo/Semi.Avalonia.Demo.Desktop/bin/Release/net7.0/win-x64/publish" target_framework="net7.0" uuid_high="3088527218258560748" uuid_low="-8649338673481336678" />
+    <riderPublish configuration="Release" include_native_libs_for_self_extract="true" platform="Any CPU" produce_single_file="true" runtime="win-x64" self_contained="true" target_folder="$PROJECT_DIR$/demo/Semi.Avalonia.Demo.Desktop/bin/Release/net8.0/win-x64/publish" target_framework="net8.0" uuid_high="3088527218258560748" uuid_low="-8649338673481336678" />
     <method v="2" />
   </configuration>
 </component>

README.md

@@ -2,11 +2,16 @@
 
 [![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)
 
 Avalonia Theme inspired by Semi Design
 
+Semi.Avalonia can be previewed in the browser [here](https://irihitech.github.io/Semi.Avalonia/)
+
+If you are looking for more detailed documentation, Please visit [Semi Documentation](https://docs.irihi.tech/semi/)
+
 If you are looking for more customized controls, Please try [Ursa](https://github.com/irihitech/Ursa.Avalonia)
 
 ![Light](./docs/demo.jpg)
@@ -16,15 +21,19 @@ If you are looking for more customized controls, Please try [Ursa](https://githu
 ### Installation
 
 ```bash
-dotnet add package Semi.Avalonia --version 11.0.7
+dotnet add package Semi.Avalonia
 ```
 
 Include Semi Design Styles in application:
 
 ```xaml
-<Application.Styles>
-    <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
-</Application.Styles>
+<Application
+    ...
+    xmlns:semi="https://irihi.tech/semi">
+    <Application.Styles>
+        <semi:SemiTheme Locale="zh-CN" />
+    </Application.Styles>
+</Application>
 ```
 
 That's all.
@@ -32,49 +41,19 @@ That's all.
 ColorPicker, DataGrid and TreeDataGrid are distributed in separated packages. Please install if you need.
 
 ```bash
-dotnet add package Semi.Avalonia.ColorPicker --version 11.0.7
-dotnet add package Semi.Avalonia.DataGrid --version 11.0.7
-dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.7
+dotnet add package Semi.Avalonia.ColorPicker
+dotnet add package Semi.Avalonia.DataGrid
+dotnet add package Semi.Avalonia.TreeDataGrid
 ```
 
 ```xaml
 <Application.Styles>
-    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
-    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
-    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
+    <semi:ColorPickerSemiTheme />
+    <semi:DataGridSemiTheme />
+    <semi:TreeDataGridSemiTheme />
 </Application.Styles>
 ```
 
-If AOT publishing is required, you need to include the rd.xml file in your project:
-
-```xml
-<ItemGroup>
-    <RdXmlFile Include="rd.xml"/>
-</ItemGroup>
-```
-
-The contents of the rd.xml file should be as follows:
-
-```xml
-<?xml version="1.0" encoding="utf-8"?>
-<Directives>
-    <!--
-        This file is part of RdXmlLibrary project.
-        Visit https://github.com/kant2002/rdxmllibrary for latest version.
-        If you have modifications specific to this Nuget package,
-        please contribute back.
-    -->
-    <Application>
-        <Assembly Name="Avalonia.Markup.Xaml" Dynamic="Required All"/>
-        <Assembly Name="Semi.Avalonia" Dynamic="Required All"/>
-        <!-- If you don't use these, please don't include them.
-            <Assembly Name="Semi.Avalonia.DataGrid" Dynamic="Required All"/>
-            <Assembly Name="Semi.Avalonia.ColorPicker" Dynamic="Required All"/>
-        -->
-    </Application>
-</Directives>
-```
-
 ## Demo
 
 You can always download demo executable to play around with Semi Avalonia Themes.
@@ -90,13 +69,12 @@ 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         |
 
-## TODO
-
-* FocusAdorner
-
 ## Credits
 
 [Semi Design](https://semi.design/)

README_CN.md

@@ -2,11 +2,16 @@
 
 [![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)
 
 Avalonia UI 控件主题，灵感来自 Semi Design
 
+Semi.Avalonia 现在可以在浏览器上 [查看效果](https://irihitech.github.io/Semi.Avalonia/)
+
+如果您希望查看更详细的文档，请浏览 [Semi 文档](https://docs.irihi.tech/semi/)
+
 如果您希望使用更多的拓展控件，欢迎尝试 [Ursa](https://github.com/irihitech/Ursa.Avalonia)
 
 ![Light](./docs/demo.jpg)
@@ -16,69 +21,42 @@ Avalonia UI 控件主题，灵感来自 Semi Design
 ### 安装
 
 ```bash
-dotnet add package Semi.Avalonia --version 11.0.7
+dotnet add package Semi.Avalonia
 ```
 
 在样式中引用 Semi 主题：
 
 ```xaml
-<Application.Styles>
-    <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
-</Application.Styles>
+<Application
+    ...
+    xmlns:semi="https://irihi.tech/semi">
+    <Application.Styles>
+        <semi:SemiTheme Locale="zh-CN" />
+    </Application.Styles>
+</Application>
 ```
 
 这样就可以了。
 
-ColorPicker， DataGrid 和 TreeDataGrid 的样式单独分发，如果需要请安装并引用。
+ColorPicker、DataGrid 和 TreeDataGrid 的样式单独分发，如果需要请安装并引用。
 
 ```bash
-dotnet add package Semi.Avalonia.ColorPicker --version 11.0.7
-dotnet add package Semi.Avalonia.DataGrid --version 11.0.7
-dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.7
+dotnet add package Semi.Avalonia.ColorPicker
+dotnet add package Semi.Avalonia.DataGrid
+dotnet add package Semi.Avalonia.TreeDataGrid
 ```
 
 ```xaml
 <Application.Styles>
-    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
-    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
-    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
+    <semi:ColorPickerSemiTheme />
+    <semi:DataGridSemiTheme />
+    <semi:TreeDataGridSemiTheme />
 </Application.Styles>
 ```
 
-如果需要进行 AOT 发布，则需要在项目中包含 rd.xml 文件：
-
-```xml
-<ItemGroup>
-    <RdXmlFile Include="rd.xml"/>
-</ItemGroup>
-```
-
-rd.xml 文件的内容如下：
-
-```xml
-<?xml version="1.0" encoding="utf-8"?>
-<Directives>
-    <!--
-        This file is part of RdXmlLibrary project.
-        Visit https://github.com/kant2002/rdxmllibrary for latest version.
-        If you have modifications specific to this Nuget package,
-        please contribute back.
-    -->
-    <Application>
-        <Assembly Name="Avalonia.Markup.Xaml" Dynamic="Required All"/>
-        <Assembly Name="Semi.Avalonia" Dynamic="Required All"/>
-        <!-- If you don't use these, please don't include them.
-            <Assembly Name="Semi.Avalonia.DataGrid" Dynamic="Required All"/>
-            <Assembly Name="Semi.Avalonia.ColorPicker" Dynamic="Required All"/>
-        -->
-    </Application>
-</Directives>
-```
-
 ## 示例
 
 您可以从 Semi Avalonia 的 release 页下载并试用 Semi Avalonia 的展示应用。
-
 <https://github.com/irihitech/Semi.Avalonia/releases>
 
 ## 社区支持
@@ -87,18 +65,16 @@ rd.xml 文件的内容如下：
 
 ![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         |
 
-## 代办事项
-
-* FocusAdorner
-
 ## 致谢
 
 [Semi Design](https://semi.design/)

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}"
@@ -30,8 +39,6 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.Demo.Drm", "d
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.TreeDataGrid", "src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj", "{398D2998-0835-41F5-99A3-608CAB8051E2}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.TreeDataGrid.Demo", "demo\Semi.Avalonia.TreeDataGrid.Demo\Semi.Avalonia.TreeDataGrid.Demo.csproj", "{6178B545-4BB6-458C-A27C-EE11F3885D38}"
-EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -75,10 +82,6 @@ Global
 		{398D2998-0835-41F5-99A3-608CAB8051E2}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{398D2998-0835-41F5-99A3-608CAB8051E2}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{398D2998-0835-41F5-99A3-608CAB8051E2}.Release|Any CPU.Build.0 = Release|Any CPU
-		{6178B545-4BB6-458C-A27C-EE11F3885D38}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{6178B545-4BB6-458C-A27C-EE11F3885D38}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{6178B545-4BB6-458C-A27C-EE11F3885D38}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{6178B545-4BB6-458C-A27C-EE11F3885D38}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -89,7 +92,6 @@ Global
 		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0} = {43091528-9509-43CB-A003-9C5C11E96DD6}
 		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F} = {43091528-9509-43CB-A003-9C5C11E96DD6}
 		{86D93406-412A-4429-93B2-92AAD0407784} = {43091528-9509-43CB-A003-9C5C11E96DD6}
-		{6178B545-4BB6-458C-A27C-EE11F3885D38} = {43091528-9509-43CB-A003-9C5C11E96DD6}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {7CA41ED3-2CED-40CC-AA21-28C3B42B1E86}

demo/Directory.Build.props

@@ -1,6 +1,7 @@
 <Project>
-  <PropertyGroup>
-    <Nullable>enable</Nullable>
-    <AvaloniaVersion>11.1.0-rc1</AvaloniaVersion>
-  </PropertyGroup>
+    <PropertyGroup>
+        <AvaloniaVersion>11.3.0</AvaloniaVersion>
+        <DataGridVersion>11.2.5</DataGridVersion>
+        <CommunityToolkitVersion>8.4.0</CommunityToolkitVersion>
+    </PropertyGroup>
 </Project>

demo/Semi.Avalonia.Demo.Android/Resources/AboutResources.txt

@@ -0,0 +1,44 @@
+Images, layout descriptions, binary blobs and string dictionaries can be included 
+in your application as resource files.  Various Android APIs are designed to 
+operate on the resource IDs instead of dealing with images, strings or binary blobs 
+directly.
+
+For example, a sample Android app that contains a user interface layout (main.axml),
+an internationalization string table (strings.xml) and some icons (drawable-XXX/icon.png) 
+would keep its resources in the "Resources" directory of the application:
+
+Resources/
+    drawable/
+        icon.png
+
+    layout/
+        main.axml
+
+    values/
+        strings.xml
+
+In order to get the build system to recognize Android resources, set the build action to
+"AndroidResource".  The native Android APIs do not operate directly with filenames, but 
+instead operate on resource IDs.  When you compile an Android application that uses resources, 
+the build system will package the resources for distribution and generate a class called "R" 
+(this is an Android convention) that contains the tokens for each one of the resources 
+included. For example, for the above Resources layout, this is what the R class would expose:
+
+public class R {
+    public class drawable {
+        public const int icon = 0x123;
+    }
+
+    public class layout {
+        public const int main = 0x456;
+    }
+
+    public class strings {
+        public const int first_string = 0xabc;
+        public const int second_string = 0xbcd;
+    }
+}
+
+You would then use R.drawable.icon to reference the drawable/icon.png file, or R.layout.main 
+to reference the layout/main.axml file, or R.strings.first_string to reference the first 
+string in the dictionary file values/strings.xml.

demo/Semi.Avalonia.Demo.Android/Resources/drawable-night-v31/avalonia_anim.xml

@@ -0,0 +1,66 @@
+<animated-vector
+  xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:aapt="http://schemas.android.com/aapt">
+  <aapt:attr name="android:drawable">
+    <vector
+      android:name="vector"
+      android:width="128dp"
+      android:height="128dp"
+      android:viewportWidth="128"
+      android:viewportHeight="128">
+      <group
+        android:name="wrapper"
+        android:translateX="21"
+        android:translateY="21">
+        <group android:name="group">
+          <path
+            android:name="path"
+            android:pathData="M 74.853 85.823 L 75.368 85.823 C 80.735 85.823 85.144 81.803 85.761 76.602 L 85.836 41.76 C 85.225 18.593 66.254 0 42.939 0 C 19.24 0 0.028 19.212 0.028 42.912 C 0.028 66.357 18.831 85.418 42.18 85.823 L 74.853 85.823 Z"
+            android:strokeWidth="1"/>
+          <path
+            android:name="path_1"
+            android:pathData="M 43.059 14.614 C 29.551 14.614 18.256 24.082 15.445 36.743 C 18.136 37.498 20.109 39.968 20.109 42.899 C 20.109 45.831 18.136 48.301 15.445 49.055 C 18.256 61.716 29.551 71.184 43.059 71.184 C 47.975 71.184 52.599 69.93 56.628 67.723 L 56.628 70.993 L 71.344 70.993 L 71.344 44.072 C 71.357 43.714 71.344 43.26 71.344 42.899 C 71.344 27.278 58.68 14.614 43.059 14.614 Z M 29.51 42.899 C 29.51 35.416 35.576 29.35 43.059 29.35 C 50.541 29.35 56.607 35.416 56.607 42.899 C 56.607 50.382 50.541 56.448 43.059 56.448 C 35.576 56.448 29.51 50.382 29.51 42.899 Z"
+            android:strokeWidth="1"
+            android:fillType="evenOdd"/>
+          <path
+            android:name="path_2"
+            android:pathData="M 18.105 42.88 C 18.105 45.38 16.078 47.407 13.579 47.407 C 11.079 47.407 9.052 45.38 9.052 42.88 C 9.052 40.381 11.079 38.354 13.579 38.354 C 16.078 38.354 18.105 40.381 18.105 42.88 Z"
+            android:strokeWidth="1"/>
+        </group>
+      </group>
+    </vector>
+  </aapt:attr>
+  <target android:name="path">
+    <aapt:attr name="android:animation">
+      <objectAnimator
+        android:propertyName="fillColor"
+        android:duration="1000"
+        android:valueFrom="#00ffffff"
+        android:valueTo="#161c2d"
+        android:valueType="colorType"
+        android:interpolator="@android:interpolator/fast_out_slow_in"/>
+    </aapt:attr>
+  </target>
+  <target android:name="path_1">
+    <aapt:attr name="android:animation">
+      <objectAnimator
+        android:propertyName="fillColor"
+        android:duration="1000"
+        android:valueFrom="#00ffffff"
+        android:valueTo="#f9f9fb"
+        android:valueType="colorType"
+        android:interpolator="@android:interpolator/fast_out_slow_in"/>
+    </aapt:attr>
+  </target>
+  <target android:name="path_2">
+    <aapt:attr name="android:animation">
+      <objectAnimator
+        android:propertyName="fillColor"
+        android:duration="1000"
+        android:valueFrom="#00ffffff"
+        android:valueTo="#f9f9fb"
+        android:valueType="colorType"
+        android:interpolator="@android:interpolator/fast_out_slow_in"/>
+    </aapt:attr>
+  </target>
+</animated-vector>

demo/Semi.Avalonia.Demo.Android/Resources/drawable-v31/avalonia_anim.xml

@@ -0,0 +1,71 @@
+<animated-vector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt">
+    <aapt:attr name="android:drawable">
+        <vector
+            android:name="vector"
+            android:width="128dp"
+            android:height="128dp"
+            android:viewportWidth="128"
+            android:viewportHeight="128">
+            <group
+                android:name="wrapper"
+                android:translateX="21"
+                android:translateY="21">
+                <group android:name="group">
+                    <path
+                        android:name="path"
+                        android:pathData="M 74.853 85.823 L 75.368 85.823 C 80.735 85.823 85.144 81.803 85.761 76.602 L 85.836 41.76 C 85.225 18.593 66.254 0 42.939 0 C 19.24 0 0.028 19.212 0.028 42.912 C 0.028 66.357 18.831 85.418 42.18 85.823 L 74.853 85.823 Z"
+                        android:fillColor="#00ffffff"
+                        android:strokeWidth="1"/>
+                    <path
+                        android:name="path_1"
+                        android:pathData="M 43.059 14.614 C 29.551 14.614 18.256 24.082 15.445 36.743 C 18.136 37.498 20.109 39.968 20.109 42.899 C 20.109 45.831 18.136 48.301 15.445 49.055 C 18.256 61.716 29.551 71.184 43.059 71.184 C 47.975 71.184 52.599 69.93 56.628 67.723 L 56.628 70.993 L 71.344 70.993 L 71.344 44.072 C 71.357 43.714 71.344 43.26 71.344 42.899 C 71.344 27.278 58.68 14.614 43.059 14.614 Z M 29.51 42.899 C 29.51 35.416 35.576 29.35 43.059 29.35 C 50.541 29.35 56.607 35.416 56.607 42.899 C 56.607 50.382 50.541 56.448 43.059 56.448 C 35.576 56.448 29.51 50.382 29.51 42.899 Z"
+                        android:fillColor="#00ffffff"
+                        android:strokeWidth="1"
+                        android:fillType="evenOdd"/>
+                    <path
+                        android:name="path_2"
+                        android:pathData="M 18.105 42.88 C 18.105 45.38 16.078 47.407 13.579 47.407 C 11.079 47.407 9.052 45.38 9.052 42.88 C 9.052 40.381 11.079 38.354 13.579 38.354 C 16.078 38.354 18.105 40.381 18.105 42.88 Z"
+                        android:fillColor="#00ffffff"
+                        android:strokeWidth="1"/>
+                </group>
+            </group>
+        </vector>
+    </aapt:attr>
+    <target android:name="path_2">
+        <aapt:attr name="android:animation">
+            <objectAnimator
+                android:propertyName="fillColor"
+                android:startOffset="100"
+                android:duration="900"
+                android:valueFrom="#00ffffff"
+                android:valueTo="#161c2d"
+                android:valueType="colorType"
+                android:interpolator="@android:interpolator/fast_out_slow_in"/>
+        </aapt:attr>
+    </target>
+    <target android:name="path">
+        <aapt:attr name="android:animation">
+            <objectAnimator
+                android:propertyName="fillColor"
+                android:duration="500"
+                android:valueFrom="#00ffffff"
+                android:valueTo="#f9f9fb"
+                android:valueType="colorType"
+                android:interpolator="@android:interpolator/fast_out_slow_in"/>
+        </aapt:attr>
+    </target>
+    <target android:name="path_1">
+        <aapt:attr name="android:animation">
+            <objectAnimator
+                android:propertyName="fillColor"
+                android:startOffset="100"
+                android:duration="900"
+                android:valueFrom="#00ffffff"
+                android:valueTo="#161c2d"
+                android:valueType="colorType"
+                android:interpolator="@android:interpolator/fast_out_slow_in"/>
+        </aapt:attr>
+    </target>
+</animated-vector>

demo/Semi.Avalonia.Demo.Android/Resources/values-night/colors.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <color name="splash_background">#212121</color>
+</resources>

demo/Semi.Avalonia.Demo.Android/Resources/values-v31/styles.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<resources>
+
+  <style name="MyTheme">
+  </style>
+
+  <style name="MyTheme.NoActionBar" parent="@style/Theme.AppCompat.NoActionBar">
+    <item name="android:windowActionBar">false</item>
+    <item name="android:windowBackground">@null</item>
+    <item name="android:windowNoTitle">true</item>
+    <item name="android:windowSplashScreenBackground">@color/splash_background</item>
+    <item name="android:windowSplashScreenAnimatedIcon">@drawable/avalonia_anim</item>
+    <item name="android:windowSplashScreenAnimationDuration">1000</item>
+    <item name="postSplashScreenTheme">@style/MyTheme.Main</item>
+
+  </style>
+  <style name="MyTheme.Main"
+         parent ="MyTheme.NoActionBar">
+    <item name="android:windowIsTranslucent">true</item>
+  </style>
+</resources>

demo/Semi.Avalonia.Demo.Android/Resources/values/styles.xml

@@ -1,17 +1,12 @@
-<?xml version="1.0" encoding="utf-8" ?>
+<?xml version="1.0" encoding="utf-8" ?>
 <resources>
 
   <style name="MyTheme">
   </style>
 
-  <style name="MyTheme.NoActionBar" parent="@style/Theme.AppCompat.NoActionBar">
+  <style name="MyTheme.NoActionBar" parent="@style/Theme.AppCompat.DayNight.NoActionBar">
     <item name="android:windowActionBar">false</item>
+    <item name="android:windowBackground">@drawable/splash_screen</item>
     <item name="android:windowNoTitle">true</item>
   </style>
-
-  <style name="MyTheme.Splash" parent ="MyTheme.NoActionBar">
-    <item name="android:windowBackground">@drawable/splash_screen</item>
-    <item name="android:windowContentOverlay">@null</item>
-  </style>
-
 </resources>

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

@@ -1,25 +1,30 @@
 <Project Sdk="Microsoft.NET.Sdk">
     <PropertyGroup>
         <OutputType>Exe</OutputType>
-        <TargetFramework>net7.0-android</TargetFramework>
+        <TargetFramework>net8.0-android</TargetFramework>
         <SupportedOSPlatformVersion>21</SupportedOSPlatformVersion>
+        <Nullable>enable</Nullable>
         <ApplicationId>com.irihitech.Semi.Avalonia</ApplicationId>
         <ApplicationVersion>1</ApplicationVersion>
         <ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
         <AndroidPackageFormat>apk</AndroidPackageFormat>
-        <AndroidEnableProfiledAot>False</AndroidEnableProfiledAot>
+        <AndroidEnableProfiledAot>false</AndroidEnableProfiledAot>
         <EmbedAssembliesIntoApk>true</EmbedAssembliesIntoApk>
         <RootNamespace>Semi.Avalonia.Demo.Android</RootNamespace>
     </PropertyGroup>
 
-    <Import Project="../Directory.Build.props" />
-
     <ItemGroup>
-      <PackageReference Include="Avalonia.Android" Version="$(AvaloniaVersion)" />
+        <AndroidResource Include="Icon.png">
+            <Link>Resources\drawable\Icon.png</Link>
+        </AndroidResource>
     </ItemGroup>
 
     <ItemGroup>
-      <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
+        <PackageReference Include="Avalonia.Android" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Xamarin.AndroidX.Core.SplashScreen" Version="1.0.1.1"/>
+    </ItemGroup>
+
+    <ItemGroup>
+        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj"/>
     </ItemGroup>
-    
 </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/Roots.xml

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

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

@@ -1,31 +1,32 @@
 <Project Sdk="Microsoft.NET.Sdk">
     <PropertyGroup>
         <OutputType>WinExe</OutputType>
-        <TargetFramework>net7.0</TargetFramework>
+        <TargetFramework>net8.0</TargetFramework>
         <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'))">
+        <IsTrimmable>true</IsTrimmable>
+        <PublishTrimmed>true</PublishTrimmed>
     </PropertyGroup>
 
     <PropertyGroup>
         <ApplicationManifest>app.manifest</ApplicationManifest>
     </PropertyGroup>
-    
+
     <ItemGroup>
-        <RdXmlFile Include="rd.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.Desktop/app.manifest

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1">
   <!-- This manifest is used on Windows only.
-       Don't remove it as it might cause problems with window transparency and embeded controls.
+       Don't remove it as it might cause problems with window transparency and embedded controls.
        For more details visit https://learn.microsoft.com/en-us/windows/win32/sbscs/application-manifests -->
   <assemblyIdentity version="1.0.0.0" name="Semi.Avalonia.Demo.Desktop"/>
 

demo/Semi.Avalonia.Demo.Desktop/rd.xml

@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<Directives>
-    <!--
-        This file is part of RdXmlLibrary project.
-        Visit https://github.com/kant2002/rdxmllibrary for latest version.
-        If you have modifications specific to this Nuget package,
-        please contribute back.
-    -->
-    <Application>
-        <Assembly Name="Avalonia.Markup.Xaml" Dynamic="Required All"/>
-        <Assembly Name="Semi.Avalonia" Dynamic="Required All"/>
-        <Assembly Name="Semi.Avalonia.DataGrid" Dynamic="Required All"/>
-        <Assembly Name="Semi.Avalonia.ColorPicker" Dynamic="Required All"/>
-        <Assembly Name="Semi.Avalonia.Demo" Dynamic="Required All"/>
-    </Application>
-</Directives>

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

@@ -0,0 +1,16 @@
+using Avalonia;
+using Avalonia.Media;
+
+namespace Semi.Avalonia.Demo.Web;
+
+public static class AvaloniaAppBuilderExtensions
+{
+    private static string DefaultFontFamily => "avares://Semi.Avalonia.Demo.Web/Assets#Source Han Sans CN";
+
+    public static AppBuilder WithSourceHanSansCNFont(this AppBuilder builder) =>
+        builder.With(new FontManagerOptions
+        {
+            DefaultFamilyName = DefaultFontFamily,
+            FontFallbacks = [new FontFallback { FontFamily = new FontFamily(DefaultFontFamily) }]
+        });
+}

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

@@ -10,6 +10,7 @@ namespace Semi.Avalonia.Demo.Web;
 internal sealed partial class Program
 {
     private static Task Main(string[] args) => BuildAvaloniaApp()
+        .WithSourceHanSansCNFont()
         .StartBrowserAppAsync("out");
 
     public static AppBuilder BuildAvaloniaApp()

demo/Semi.Avalonia.Demo.Web/Properties/AssemblyInfo.cs

@@ -0,0 +1 @@
+[assembly: System.Runtime.Versioning.SupportedOSPlatform("browser")]

demo/Semi.Avalonia.Demo.Web/Properties/launchSettings.json

@@ -6,8 +6,8 @@
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       },
-      "applicationUrl": "https://localhost:5001;http://localhost:5000",
-      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/debug?browser={browserInspectUri}"
+      "applicationUrl": "https://localhost:7169;http://localhost:5235",
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
     }
   }
-}
+}

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

@@ -1,21 +1,20 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk.WebAssembly">
     <PropertyGroup>
-        <OutputType>Exe</OutputType>
         <TargetFramework>net8.0-browser</TargetFramework>
-        <RuntimeIdentifier>browser-wasm</RuntimeIdentifier>
-        <WasmMainJSPath>wwwroot\main.js</WasmMainJSPath>
-        <WasmRuntimeAssetsLocation>./_framework</WasmRuntimeAssetsLocation>
+        <OutputType>Exe</OutputType>
+        <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
+        <Nullable>enable</Nullable>
     </PropertyGroup>
 
     <ItemGroup>
-        <WasmExtraFilesToDeploy Include="wwwroot\**"/>
+        <AvaloniaResource Include="Assets\**"/>
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Browser" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia.Browser" 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.Web/runtimeconfig.template.json

@@ -1,11 +1,10 @@
 {
-  "wasmHostProperties": {
-    "perHostConfig": [
-      {
-        "name": "browser",
-        "html-path": "index.html",
-        "Host": "browser"
-      }
-    ]
-  }
+    "wasmHostProperties": {
+        "perHostConfig": [
+            {
+                "name": "browser",
+                "host": "browser"
+            }
+        ]
+    }
 }

demo/Semi.Avalonia.Demo.Web/wwwroot/Logo.svg

@@ -1,5 +0,0 @@
-<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M30.4661 34.928C30.5364 34.928 30.6052 34.928 30.6754 34.928C32.8596 34.928 34.654 33.2918 34.9053 31.1752L34.9356 16.9955C34.6872 7.56697 26.9662 0 17.4777 0C7.83263 0 0.0137329 7.8189 0.0137329 17.464C0.0137329 27.0059 7.66618 34.7631 17.1687 34.928H30.4661Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5239 5.948C12.0268 5.948 7.42967 9.80117 6.286 14.954C7.38092 15.2609 8.18385 16.2664 8.18385 17.4593C8.18385 18.6523 7.38092 19.6577 6.286 19.9647C7.42966 25.1175 12.0268 28.9706 17.5239 28.9706C19.525 28.9706 21.4068 28.4601 23.0462 27.562V28.8927H29.0352V17.9365C29.0407 17.7908 29.0352 17.6063 29.0352 17.4593C29.0352 11.1018 23.8814 5.948 17.5239 5.948ZM12.0098 17.4593C12.0098 14.414 14.4786 11.9452 17.5239 11.9452C20.5693 11.9452 23.038 14.414 23.038 17.4593C23.038 20.5047 20.5693 22.9734 17.5239 22.9734C14.4786 22.9734 12.0098 20.5047 12.0098 17.4593Z" fill="#8B44AC"/>
-<path d="M7.36841 17.4517C7.36841 18.4691 6.54368 19.2938 5.52631 19.2938C4.50894 19.2938 3.6842 18.4691 3.6842 17.4517C3.6842 16.4343 4.50894 15.6096 5.52631 15.6096C6.54368 15.6096 7.36841 16.4343 7.36841 17.4517Z" fill="#8B44AC"/>
-</svg>

demo/Semi.Avalonia.Demo.Web/wwwroot/app.css

@@ -1,74 +1,58 @@
-:root {
-    --sat: env(safe-area-inset-top);
-    --sar: env(safe-area-inset-right);
-    --sab: env(safe-area-inset-bottom);
-    --sal: env(safe-area-inset-left);
-}
-
-/* HTML styles for the splash screen */
-
-.highlight {
-    color: white;
-    font-size: 2.5rem;
-    display: block;
-}
-
-.purple {
-    color: #8b44ac;
-}
-
-.icon {
-    opacity: 0.05;
-    height: 35%;
-    width: 35%;
+/* HTML styles for the splash screen */
+.avalonia-splash {
     position: absolute;
-    background-repeat: no-repeat;
-    right: 0px;
-    bottom: 0px;
-    margin-right: 3%;
-    margin-bottom: 5%;
-    z-index: 5000;
-    background-position: right bottom;
+    height: 100%;
+    width: 100%;
+    background: white;
+    font-family: 'Outfit', sans-serif;
+    justify-content: center;
+    align-items: center;
+    display: flex;
     pointer-events: none;
 }
 
-#avalonia-splash a {
-    color: whitesmoke;
+/* Light theme styles */
+@media (prefers-color-scheme: light) {
+    .avalonia-splash {
+        background: white;
+    }
+
+    .avalonia-splash h2 {
+        color: #1b2a4e;
+    }
+
+    .avalonia-splash a {
+        color: #0D6EFD;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .avalonia-splash {
+        background: #1b2a4e;
+    }
+
+    .avalonia-splash h2 {
+        color: white;
+    }
+
+    .avalonia-splash a {
+        color: white;
+    }
+}
+
+.avalonia-splash h2 {
+    font-weight: 400;
+    font-size: 1.5rem;
+}
+
+.avalonia-splash a {
     text-decoration: none;
+    font-size: 2.5rem;
+    display: block;   
 }
 
-.center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-}
-
-#avalonia-splash {
-    position: relative;
-    height: 100%;
-    width: 100%;
-    color: whitesmoke;
-    background: #1b2a4e;
-    font-family: 'Nunito', sans-serif;
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    justify-content: center;
-    align-items: center;
-}
-
-.splash-close {
-    animation: fadeout 0.25s linear forwards;
-}
-
-@keyframes fadeout {
-    0% {
-        opacity: 100%;
-    }
-
-    100% {
-        opacity: 0;
-        visibility: collapse;
-    }
+.avalonia-splash.splash-close {
+    transition: opacity 200ms, display 200ms;
+    display: none;
+    opacity: 0;
 }

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

@@ -5,26 +5,33 @@
     <title>Semi.Avalonia.Demo.Web</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <base href="/" />
-    <link rel="modulepreload" href="./main.js" />
-    <link rel="modulepreload" href="./_framework/dotnet.js" />
-    <link rel="modulepreload" href="./_framework/avalonia.js" />
     <link rel="stylesheet" href="./app.css" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
 </head>
 
-<body style="margin: 0px; overflow: hidden">
-    <div id="out">
-        <div id="avalonia-splash">
-            <div class="center">
-                <h2 class="purple">
-                    Powered by
-                    <a class="highlight" href="https://www.avaloniaui.net/" target="_blank">Avalonia UI</a>
-                </h2>
-            </div>
-            <img class="icon" src="Logo.svg" alt="Avalonia Logo" />
-        </div>
+<body style="margin: 0; overflow: hidden">
+<div id="out">
+    <div class="avalonia-splash">
+        <h2>
+            Powered by
+            <a href="https://www.avaloniaui.net/" target="_blank">
+                <svg width="266" height="52" viewBox="0 0 266 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M55.8592 47.3941C54.9035 47.3941 54.1184 47.1723 53.504 46.7285C52.9237 46.2848 52.5483 45.6875 52.3776 44.9365C52.2411 44.1856 52.3947 43.3493 52.8384 42.4277L65.9456 13.7045C66.4917 12.544 67.1403 11.7077 67.8912 11.1957C68.6421 10.6496 69.5125 10.3765 70.5024 10.3765C71.4923 10.3765 72.3627 10.6496 73.1136 11.1957C73.8645 11.7077 74.496 12.544 75.008 13.7045L88.2176 42.4277C88.6613 43.3493 88.8149 44.2027 88.6784 44.9877C88.576 45.7387 88.2347 46.336 87.6544 46.7797C87.0741 47.1893 86.3232 47.3941 85.4016 47.3941C84.2411 47.3941 83.3365 47.1211 82.688 46.5749C82.0736 46.0288 81.5275 45.1755 81.0496 44.0149L78.9279 39.0997H62.0415L59.9552 44.0149C59.4432 45.2096 58.8971 46.08 58.3168 46.6261C57.7707 47.1381 56.9515 47.3941 55.8592 47.3941ZM70.4 19.2853L64.6844 32.9045H76.2627L70.5024 19.2853H70.4Z" fill="currentColor"/>
+                    <path d="M101.869 47.3941C100.879 47.3941 100.009 47.1381 99.258 46.6261C98.5071 46.08 97.9096 45.2779 97.4659 44.2197L89.7348 26.4021C89.3593 25.5147 89.2228 24.6955 89.3252 23.9445C89.4276 23.1595 89.786 22.5451 90.4004 22.1013C91.0489 21.6235 91.9364 21.3845 93.0628 21.3845C93.9844 21.3845 94.7353 21.6064 95.3156 22.0501C95.8959 22.4597 96.4079 23.2619 96.8516 24.4565L102.018 37.95L107.552 24.4053C108.03 23.2448 108.559 22.4597 109.14 22.0501C109.72 21.6064 110.522 21.3845 111.546 21.3845C112.433 21.3845 113.133 21.6235 113.645 22.1013C114.191 22.5451 114.516 23.1424 114.618 23.8933C114.755 24.6443 114.618 25.4635 114.208 26.3509L106.324 44.2197C105.88 45.312 105.283 46.1141 104.532 46.6261C103.815 47.1381 102.927 47.3941 101.869 47.3941Z" fill="currentColor"/>
+                    <path d="M126.569 47.4965C124.726 47.4965 123.07 47.1381 121.602 46.4213C120.135 45.7045 118.991 44.7317 118.172 43.5029C117.353 42.2741 116.943 40.8917 116.943 39.3557C116.943 37.5125 117.421 36.0619 118.377 35.0037C119.333 33.9115 120.886 33.1435 123.036 32.6997C125.186 32.2219 128.037 31.9829 131.586 31.9829H133.43V35.9765H131.638C129.897 35.9765 128.48 36.0789 127.388 36.2837C126.33 36.4544 125.562 36.7616 125.084 37.2053C124.64 37.6491 124.418 38.2635 124.418 39.0485C124.418 40.0043 124.743 40.7893 125.391 41.4037C126.074 42.0181 127.047 42.3253 128.31 42.3253C129.299 42.3253 130.17 42.1035 130.921 41.6597C131.706 41.1819 132.32 40.5504 132.764 39.7653C133.208 38.9461 133.43 38.0245 133.43 37.0005V31.1125C133.43 29.6107 133.088 28.5525 132.406 27.9381C131.723 27.2896 130.562 26.9653 128.924 26.9653C128.002 26.9653 126.995 27.0848 125.903 27.3237C124.845 27.5285 123.667 27.8869 122.37 28.3989C121.619 28.7403 120.954 28.8256 120.374 28.6549C119.793 28.4501 119.35 28.1088 119.042 27.6309C118.735 27.1189 118.582 26.5728 118.582 25.9925C118.582 25.3781 118.752 24.7979 119.094 24.2517C119.435 23.6715 119.998 23.2448 120.783 22.9717C122.387 22.3232 123.889 21.8795 125.289 21.6405C126.722 21.4016 128.037 21.2821 129.231 21.2821C131.859 21.2821 134.01 21.6747 135.682 22.4597C137.389 23.2107 138.669 24.3883 139.522 25.9925C140.376 27.5627 140.802 29.5936 140.802 32.0853V43.4517C140.802 44.7147 140.495 45.6875 139.881 46.3701C139.266 47.0528 138.379 47.3941 137.218 47.3941C136.058 47.3941 135.153 47.0528 134.505 46.3701C133.89 45.6875 133.583 44.7147 133.583 43.4517L133.594 43.15C133.594 43.15 133.293 44.032 132.61 44.8853C131.962 45.7045 131.126 46.3531 130.102 46.8309C129.078 47.2747 127.9 47.4965 126.569 47.4965Z" fill="currentColor"/>
+                    <path d="M155.632 47.4965C152.594 47.4965 150.324 46.6603 148.822 44.9877C147.321 43.2811 146.57 40.7552 146.57 37.4101V14.3189C146.57 13.0219 146.894 12.0491 147.542 11.4005C148.225 10.7179 149.198 10.3765 150.461 10.3765C151.69 10.3765 152.628 10.7179 153.277 11.4005C153.959 12.0491 154.301 13.0219 154.301 14.3189V37.1029C154.301 38.5024 154.591 39.5435 155.171 40.2261C155.786 40.8747 156.588 41.1989 157.578 41.1989C157.851 41.1989 158.107 41.1819 158.346 41.1477C158.585 41.1136 158.841 41.0965 159.114 41.0965C159.66 41.0283 160.035 41.1989 160.24 41.6085C160.479 41.984 160.598 42.752 160.598 43.9125C160.598 44.9365 160.394 45.7216 159.984 46.2677C159.574 46.7797 158.943 47.1211 158.09 47.2917C157.748 47.3259 157.356 47.36 156.912 47.3941C156.468 47.4624 156.042 47.4965 155.632 47.4965Z" fill="currentColor"/>
+                    <path d="M175.453 47.4965C172.756 47.4965 170.401 46.9675 168.387 45.9093C166.407 44.8512 164.871 43.3323 163.779 41.3525C162.687 39.3728 162.141 37.0347 162.141 34.3381C162.141 32.3243 162.448 30.5152 163.062 28.9109C163.677 27.3067 164.564 25.9413 165.725 24.8149C166.919 23.6544 168.336 22.784 169.974 22.2037C171.613 21.5893 173.439 21.2821 175.453 21.2821C178.149 21.2821 180.487 21.8112 182.467 22.8693C184.481 23.9275 186.034 25.4293 187.126 27.3749C188.253 29.3205 188.816 31.6416 188.816 34.3381C188.816 36.3861 188.492 38.2123 187.843 39.8165C187.229 41.4208 186.341 42.8032 185.181 43.9637C184.02 45.1243 182.604 46.0117 180.931 46.6261C179.293 47.2064 177.467 47.4965 175.453 47.4965ZM175.453 41.7109C176.579 41.7109 177.552 41.4379 178.371 40.8917C179.19 40.3456 179.839 39.5435 180.317 38.4853C180.795 37.3931 181.034 36.0107 181.034 34.3381C181.034 31.8464 180.522 30.0203 179.498 28.8597C178.474 27.6651 177.125 27.0677 175.453 27.0677C174.361 27.0677 173.388 27.3237 172.534 27.8357C171.715 28.3477 171.067 29.1499 170.589 30.2421C170.145 31.3003 169.923 32.6656 169.923 34.3381C169.923 36.8299 170.435 38.6901 171.459 39.9189C172.483 41.1136 173.814 41.7109 175.453 41.7109Z" fill="currentColor"/>
+                    <path d="M197.411 47.3941C196.148 47.3941 195.175 47.0528 194.492 46.3701C193.844 45.6875 193.52 44.7147 193.52 43.4517V25.2757C193.52 24.0128 193.844 23.0571 194.492 22.4085C195.175 21.7259 196.114 21.3845 197.308 21.3845C198.537 21.3845 199.476 21.7259 200.124 22.4085C200.773 23.0571 201.112 24.1871 201.112 25.45C201.141 25.3955 202.48 23.552 204.016 22.6645C205.586 21.7429 207.361 21.2821 209.34 21.2821C211.354 21.2821 213.01 21.6747 214.307 22.4597C215.604 23.2107 216.577 24.3712 217.225 25.9413C217.874 27.4773 218.198 29.44 218.198 31.8293V43.4517C218.198 44.7147 217.857 45.6875 217.174 46.3701C216.525 47.0528 215.57 47.3941 214.307 47.3941C213.078 47.3941 212.122 47.0528 211.44 46.3701C210.791 45.6875 210.467 44.7147 210.467 43.4517V32.1877C210.467 30.4469 210.143 29.2011 209.494 28.4501C208.88 27.6651 207.924 27.2725 206.627 27.2725C204.988 27.2725 203.674 27.7845 202.684 28.8085C201.729 29.8325 201.251 31.1979 201.251 32.9045V43.4517C201.251 46.08 199.971 47.3941 197.411 47.3941Z" fill="currentColor"/>
+                    <path d="M227.861 47.3429C226.598 47.3429 225.625 46.9845 224.942 46.2677C224.294 45.5168 223.97 44.4757 223.97 43.1445V25.6341C223.97 24.2688 224.294 23.2277 224.942 22.5109C225.625 21.76 226.598 21.3845 227.861 21.3845C229.09 21.3845 230.028 21.76 230.677 22.5109C231.359 23.2277 231.701 24.2688 231.701 25.6341V43.1445C231.701 44.4757 231.377 45.5168 230.728 46.2677C230.079 46.9845 229.124 47.3429 227.861 47.3429ZM227.861 17.1861C226.427 17.1861 225.318 16.8619 224.533 16.2133C223.782 15.5307 223.406 14.5749 223.406 13.3461C223.406 12.0832 223.782 11.1275 224.533 10.4789C225.318 9.79629 226.427 9.45496 227.861 9.45496C229.294 9.45496 230.387 9.79629 231.138 10.4789C231.889 11.1275 232.264 12.0832 232.264 13.3461C232.264 14.5749 231.889 15.5307 231.138 16.2133C230.387 16.8619 229.294 17.1861 227.861 17.1861Z" fill="currentColor"/>
+                    <path d="M246.169 47.4965C244.326 47.4965 242.67 47.1381 241.202 46.4213C239.735 45.7045 238.591 44.7317 237.772 43.5029C236.953 42.2741 236.543 40.8917 236.543 39.3557C236.543 37.5125 237.021 36.0619 237.977 35.0037C238.933 33.9115 240.486 33.1435 242.636 32.6997C244.786 32.2219 247.637 31.9829 251.186 31.9829H253.03V35.9765H251.238C249.497 35.9765 248.08 36.0789 246.988 36.2837C245.93 36.4544 245.162 36.7616 244.684 37.2053C244.24 37.6491 244.018 38.2635 244.018 39.0485C244.018 40.0043 244.343 40.7893 244.991 41.4037C245.674 42.0181 246.647 42.3253 247.91 42.3253C248.899 42.3253 249.77 42.1035 250.521 41.6597C251.306 41.1819 251.92 40.5504 252.364 39.7653C252.808 38.9461 253.03 38.0245 253.03 37.0005V31.1125C253.03 29.6107 252.688 28.5525 252.006 27.9381C251.323 27.2896 250.162 26.9653 248.524 26.9653C247.602 26.9653 246.595 27.0848 245.503 27.3237C244.445 27.5285 243.267 27.8869 241.97 28.3989C241.219 28.7403 240.554 28.8256 239.974 28.6549C239.393 28.4501 238.95 28.1088 238.642 27.6309C238.335 27.1189 238.182 26.5728 238.182 25.9925C238.182 25.3781 238.352 24.7979 238.694 24.2517C239.035 23.6715 239.598 23.2448 240.383 22.9717C241.987 22.3232 243.489 21.8795 244.889 21.6405C246.322 21.4016 247.637 21.2821 248.831 21.2821C251.459 21.2821 253.61 21.6747 255.282 22.4597C256.989 23.2107 258.269 24.3883 259.122 25.9925C259.976 27.5627 260.402 29.5936 260.402 32.0853V43.4517C260.402 44.7147 260.095 45.6875 259.481 46.3701C258.866 47.0528 257.979 47.3941 256.818 47.3941C255.658 47.3941 254.753 47.0528 254.105 46.3701C253.49 45.6875 253.183 44.7147 253.183 43.4517V43.1789C253.183 43.3144 252.893 44.032 252.21 44.8853C251.562 45.7045 250.726 46.3531 249.702 46.8309C248.678 47.2747 247.5 47.4965 246.169 47.4965Z" fill="currentColor"/>
+                    <path d="M22.3444 20.9916C18.7895 20.9916 15.9077 24.0073 15.9077 27.7274C15.9077 31.4475 18.7895 34.4632 22.3444 34.4632C25.8993 34.4632 28.7811 31.4475 28.7811 27.7274C28.7811 24.0073 25.8993 20.9916 22.3444 20.9916Z" fill="currentColor"/>
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M37.6937 49.0667H21.9271C10.8346 48.8653 1.90173 39.3893 1.90173 27.7333C1.90173 15.9513 11.0289 6.40002 22.2878 6.40002C33.3638 6.40002 42.3768 15.6435 42.6667 27.161L42.6314 44.4824C42.338 47.0679 40.2434 49.0667 37.6937 49.0667ZM9.22617 24.667C10.5612 18.3725 15.9275 13.6656 22.3444 13.6656C29.7657 13.6656 35.7818 19.9613 35.7818 27.7274C35.7818 27.7857 35.7825 27.8488 35.7831 27.9136C35.7846 28.0483 35.7861 28.1901 35.7818 28.3103V41.6939H28.7907V40.0685C26.877 41.1655 24.6803 41.7892 22.3444 41.7892C15.9275 41.7892 10.5612 37.0823 9.22617 30.7878C10.5043 30.4129 11.4416 29.1847 11.4416 27.7274C11.4416 26.2701 10.5043 25.0419 9.22617 24.667ZM8.33937 29.9683C9.52696 29.9683 10.4897 28.9609 10.4897 27.7181C10.4897 26.4753 9.52696 25.4678 8.33937 25.4678C7.15178 25.4678 6.18904 26.4753 6.18904 27.7181C6.18904 28.9609 7.15178 29.9683 8.33937 29.9683Z" fill="currentColor"/>
+                </svg>
+            </a>
+        </h2>
     </div>
-    <script type='module' src="./main.js"></script>
+</div>
+<script type='module' src="./main.js"></script>
 </body>
 
-</html>
+</html>

demo/Semi.Avalonia.Demo.Web/wwwroot/main.js

@@ -10,4 +10,4 @@ const dotnetRuntime = await dotnet
 
 const config = dotnetRuntime.getConfig();
 
-await dotnetRuntime.runMain(config.mainAssemblyName, [window.location.search]);
+await dotnetRuntime.runMain(config.mainAssemblyName, [globalThis.location.href]);

demo/Semi.Avalonia.Demo/App.axaml

@@ -2,13 +2,33 @@
     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.DataGrid/Index.axaml" />
-        <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+        <semi:SemiTheme Locale="zh-CN" />
+        <semi:SemiPopupAnimations />
+        <semi:ColorPickerSemiTheme />
+        <semi:DataGridSemiTheme />
+        <semi:TreeDataGridSemiTheme />
     </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

@@ -1,6 +1,8 @@
 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;
@@ -10,6 +12,7 @@ public partial class App : Application
     public override void Initialize()
     {
         AvaloniaXamlLoader.Load(this);
+        this.DataContext = new ApplicationViewModel();
     }
 
     public override void OnFrameworkInitializationCompleted()
@@ -17,6 +20,9 @@ public partial class App : Application
         switch (ApplicationLifetime)
         {
             case IClassicDesktopStyleApplicationLifetime desktop:
+                // Line below is needed to remove Avalonia data validation.
+                // Without this line you will get duplicate validations from both Avalonia and CT
+                BindingPlugins.DataValidators.RemoveAt(0);
                 desktop.MainWindow = new MainWindow();
                 break;
             case ISingleViewApplicationLifetime singleView:
@@ -24,6 +30,7 @@ public partial class App : Application
                 break;
         }
 
+        this.RegisterFollowSystemTheme();
         base.OnFrameworkInitializationCompleted();
     }
 }

demo/Semi.Avalonia.Demo/Constant/ColorTokens.cs

@@ -0,0 +1,143 @@
+using System;
+using System.Collections.Generic;
+
+namespace Semi.Avalonia.Demo.Constant;
+
+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"),
+    };
+
+    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"),
+    };
+
+    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"),
+    };
+
+    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"),
+    };
+
+    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"),
+    };
+
+    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"),
+    };
+
+    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"),
+    };
+
+    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"),
+    };
+
+    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"),
+    };
+
+    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"),
+    };
+
+    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"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> BorderTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorBorder", "Border"),
+        new("SemiColorFocusBorder", "Focus 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"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> OtherTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorWhite", "White"),
+        new("SemiColorBlack", "Black"),
+        new("SemiColorNavBackground", "Navigation Background"),
+        new("SemiColorOverlayBackground", "Overlay Background"),
+        new("SemiColorHighlightBackground", "Highlight Background"),
+        new("SemiColorHighlight", "Highlight Text"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> ShadowTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorShadow", "Shadow"),
+        new("SemiShadowElevated", "Shadow Elevated"),
+    };
+}

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/Converters/FileIconConverter.cs

@@ -3,15 +3,13 @@ using System.Collections.Generic;
 using System.Globalization;
 using Avalonia;
 using Avalonia.Data.Converters;
-using Avalonia.Media;
 using Avalonia.Metadata;
 
-namespace Semi.Avalonia.TreeDataGrid.Demo.Converters;
+namespace Semi.Avalonia.Demo.Converters;
 
-public class FileIconConverter: IMultiValueConverter
+public class FileIconConverter : IMultiValueConverter
 {
-    [Content] 
-    public Dictionary<string, PathGeometry> Items { get; set; } = new Dictionary<string, PathGeometry>();
+    [Content] public IDictionary<string, object?> Items { get; } = new Dictionary<string, object?>();
 
     public object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
     {
@@ -21,8 +19,10 @@ public class FileIconConverter: IMultiValueConverter
             {
                 return Items["file"];
             }
+
             return isOpen ? Items["folderOpen"] : Items["folderClosed"];
         }
+
         return AvaloniaProperty.UnsetValue;
     }
 }

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

@@ -44,11 +44,6 @@
                 <Button Classes="Danger">Danger</Button>
                 <Button Classes="Danger" IsEnabled="False">Disabled</Button>
             </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <Button Classes="Primary Small">Small</Button>
-                <Button Classes="Primary">Default</Button>
-                <Button Classes="Primary Large">Large</Button>
-            </StackPanel>
             <TextBlock>Solid</TextBlock>
             <StackPanel Orientation="Horizontal" Spacing="20">
                 <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
@@ -64,6 +59,16 @@
                     Disabled
                 </Button>
             </StackPanel>
+            <TextBlock>Outline</TextBlock>
+            <StackPanel Orientation="Horizontal" Spacing="20">
+                <Button Classes="Primary" Theme="{DynamicResource OutlineButton}">Primary</Button>
+                <Button Classes="Secondary" Theme="{DynamicResource OutlineButton}">Secondary</Button>
+                <Button Classes="Tertiary" Theme="{DynamicResource OutlineButton}">Tertiary</Button>
+                <Button Classes="Success" Theme="{DynamicResource OutlineButton}">Success</Button>
+                <Button Classes="Warning" Theme="{DynamicResource OutlineButton}">Warning</Button>
+                <Button Classes="Danger" Theme="{DynamicResource OutlineButton}">Danger</Button>
+                <Button Classes="Danger" Theme="{DynamicResource OutlineButton}" IsEnabled="False">Disabled</Button>
+            </StackPanel>
             <TextBlock>Borderless</TextBlock>
             <StackPanel Orientation="Horizontal" Spacing="20">
                 <Button Classes="Primary" Theme="{DynamicResource BorderlessButton}">Primary</Button>
@@ -79,6 +84,19 @@
                     Disabled
                 </Button>
             </StackPanel>
+            <TextBlock>Disabled</TextBlock>
+            <StackPanel Background="{DynamicResource SemiColorBackground1}" Orientation="Horizontal" Spacing="20">
+                <Button IsEnabled="False">Light</Button>
+                <Button IsEnabled="False" Theme="{DynamicResource SolidButton}">Solid</Button>
+                <Button IsEnabled="False" Theme="{DynamicResource OutlineButton}">Outline</Button>
+                <Button IsEnabled="False" Theme="{DynamicResource BorderlessButton}">Borderless</Button>
+            </StackPanel>
+            <TextBlock>Size Classes</TextBlock>
+            <StackPanel Orientation="Horizontal" Spacing="20">
+                <Button Classes="Primary Small">Small</Button>
+                <Button Classes="Primary">Default</Button>
+                <Button Classes="Primary Large">Large</Button>
+            </StackPanel>
 
             <TextBlock>DropDownButton</TextBlock>
             <StackPanel Orientation="Horizontal" Spacing="8">
@@ -96,9 +114,11 @@
             <StackPanel Orientation="Horizontal" Spacing="8">
                 <DropDownButton Content="Default" Classes="Success"/>
                 <DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success"/>
+                <DropDownButton Content="Outline" Theme="{DynamicResource OutlineDropDownButton}" Classes="Success"/>
                 <DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success"/>
                 <DropDownButton Content="Default" Classes="Success" IsEnabled="False"/>
                 <DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success" IsEnabled="False"/>
+                <DropDownButton Content="Outline" Theme="{DynamicResource OutlineDropDownButton}" Classes="Success" IsEnabled="False"/>
                 <DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success" IsEnabled="False"/>
             </StackPanel>
             <StackPanel Orientation="Horizontal" Spacing="8">
@@ -119,11 +139,13 @@
             </StackPanel>
             <StackPanel Orientation="Horizontal" Spacing="8">
                 <SplitButton Content="Default" Classes="Success" />
-                <SplitButton Theme="{DynamicResource SolidSplitButton}" Content="Solid" Classes="Success" />
-                <SplitButton Theme="{DynamicResource BorderlessSplitButton}" Content="Borderless" Classes="Success" />
+                <SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}"  Classes="Success" />
+                <SplitButton Content="Outline" Theme="{DynamicResource OutlineSplitButton}" Classes="Success" />
+                <SplitButton Content="Borderless" Theme="{DynamicResource BorderlessSplitButton}" Classes="Success" />
                 <SplitButton Content="Default" Classes="Success" IsEnabled="False" />
-                <SplitButton Theme="{DynamicResource SolidSplitButton}" Content="Solid" Classes="Success" IsEnabled="False" />
-                <SplitButton Theme="{DynamicResource BorderlessSplitButton}" Content="Borderless" Classes="Success" IsEnabled="False" />
+                <SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}" Classes="Success" IsEnabled="False" />
+                <SplitButton Content="Outline" Theme="{DynamicResource OutlineSplitButton}" Classes="Success" IsEnabled="False" />
+                <SplitButton Content="Borderless" Theme="{DynamicResource BorderlessSplitButton}" Classes="Success" IsEnabled="False" />
             </StackPanel>
             <StackPanel Orientation="Horizontal" Spacing="8">
                 <SplitButton Classes="Small" Content="Small" />
@@ -141,6 +163,12 @@
                 <ToggleSplitButton Classes="Danger" Content="Danger" />
                 <ToggleSplitButton Classes="Danger" Content="Disabled" IsEnabled="False" />
             </StackPanel>
+            <StackPanel Orientation="Horizontal" Spacing="8">
+                <ToggleSplitButton Content="Default" Classes="Success" />
+                <ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True"  />
+                <ToggleSplitButton Content="Default" Classes="Success" IsEnabled="False" />
+                <ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True" IsEnabled="False" />
+            </StackPanel>
             <StackPanel Orientation="Horizontal" Spacing="8">
                 <ToggleSplitButton Classes="Small" Content="Small" />
                 <ToggleSplitButton Content="Default" />

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

@@ -2,39 +2,80 @@
     x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker;assembly=Semi.Avalonia.ColorPicker"
-    xmlns:controls="using:Avalonia.Controls"
+    xmlns:semi="https://irihi.tech/semi"
     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 Orientation="Horizontal" Spacing="20">
+                <ColorView Name="Test" ColorSpectrumShape="Ring" />
+                <ColorView ColorSpectrumShape="Box" />
+                <ColorView Palette="{DynamicResource SemiColorPalette}" />
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <ColorView
+                    Name="SimpleColorViewTest"
+                    HsvColor="hsv(180,80%,70%)"
+                    IsAlphaVisible="True"
+                    Theme="{StaticResource SimpleColorView}" />
+                <StackPanel>
+                    <TextBlock Text="{Binding #SimpleColorViewTest.HsvColor}" />
+                    <TextBlock Text="{Binding #SimpleColorViewTest.Color}" />
+                </StackPanel>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal" Spacing="8">
+                <ColorPicker ColorSpectrumShape="Ring">
+                    <ColorPicker.Palette>
+                        <FlatHalfColorPalette />
+                    </ColorPicker.Palette>
+                </ColorPicker>
+                <ColorPicker ColorSpectrumShape="Box">
+                    <ColorPicker.Palette>
+                        <semi:SemiColorLightPalette />
+                    </ColorPicker.Palette>
+                </ColorPicker>
+                <ColorPicker
+                    Theme="{DynamicResource HexColorPicker}"
+                    ColorSpectrumShape="Box">
+                    <ColorPicker.Palette>
+                        <semi:SemiColorLightPalette />
+                    </ColorPicker.Palette>
+                </ColorPicker>
+            </StackPanel>
+            <StackPanel HorizontalAlignment="Left">
+                <TextBlock Text="Use Style to customize button" />
+                <ColorPicker
+                    Margin="8"
+                    MinWidth="32"
+                    HsvColor="hsv(180,80%,70%)">
+                    <ColorPicker.Content>
+                        <Border
+                            Margin="1"
+                            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 Orientation="Horizontal" Spacing="8">
+                <ColorPicker
+                    Theme="{StaticResource SimpleColorPicker}"
+                    HsvColor="hsv(180,80%,70%)" />
+                <ColorPicker
+                    Theme="{StaticResource HexSimpleColorPicker}"
+                    HsvColor="hsv(180,80%,70%)" />
+            </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

@@ -3,7 +3,6 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:local="using:Semi.Avalonia.Demo.Pages"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels;assembly=Semi.Avalonia.Demo"
     d:DesignHeight="450"
@@ -14,7 +13,11 @@
     <TabControl>
         <TabItem Header="DataGrid">
            <Grid RowDefinitions="Auto, *">
-               <ToggleSwitch Grid.Row="0" Content="Disable" Name="DisableToggle"></ToggleSwitch>
+               <StackPanel Grid.Row="0" Orientation="Horizontal">
+                   <ToggleSwitch Content="Enable" Name="enable" IsChecked="True" />
+                   <ToggleSwitch Content="Inset Content" Name="inset" />
+                   <ToggleSwitch Content="ScrollBar Auto Hide" Name="autohide" />
+               </StackPanel>
                <DataGrid Grid.Row="1"
                          Margin="8"
                          CanUserReorderColumns="True"
@@ -22,7 +25,9 @@
                          CanUserSortColumns="True"
                          HeadersVisibility="All"
                          IsReadOnly="True"
-                         IsEnabled="{Binding #DisableToggle.IsChecked}"
+                         Classes.InsetContent="{Binding #inset.IsChecked}"
+                         ScrollViewer.AllowAutoHide="{Binding #autohide.IsChecked}"
+                         IsEnabled="{Binding #enable.IsChecked}"
                          ItemsSource="{Binding GridData1}">
                    <DataGrid.Columns>
                        <DataGridTextColumn
@@ -97,7 +102,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 +110,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,328 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+             xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+             xmlns:cvt="clr-namespace:Semi.Avalonia.Demo.Converters"
+             xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+             mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="1450"
+             x:DataType="vm:HighContrastDemoViewModel"
+             x: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>
+
+                            <DataGridTemplateColumn Width="100" Header="CopyText">
+                                <DataGridTemplateColumn.CellTemplate>
+                                    <DataTemplate DataType="vm:ColorResource">
+                                        <Button
+                                            Command="{Binding $parent[pages:HighContrastDemo].Copy}"
+                                            CommandParameter="{Binding CopyText}"
+                                            Theme="{DynamicResource  IconBorderlessButton}"
+                                            Content="{StaticResource SemiIconCopy}" />
+                                    </DataTemplate>
+                                </DataGridTemplateColumn.CellTemplate>
+                            </DataGridTemplateColumn>
+                        </DataGrid.Columns>
+                    </DataGrid>
+                </StackPanel>
+            </ScrollViewer>
+        </SplitView.Content>
+    </SplitView>
+</UserControl>

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

@@ -0,0 +1,24 @@
+using System.Threading.Tasks;
+using Avalonia.Controls;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class HighContrastDemo : UserControl
+{
+    public HighContrastDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new HighContrastDemoViewModel();
+    }
+
+    public async Task Copy(object? o)
+    {
+        if (o is null) return;
+        var toplevel = TopLevel.GetTopLevel(this);
+        if (toplevel?.Clipboard is { } c)
+        {
+            await c.SetTextAsync(o.ToString());
+        }
+    }
+}

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/ListBoxDemo.axaml

@@ -78,8 +78,8 @@
                     <StackPanel Orientation="Horizontal">
                         <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
                             <ListBox Theme="{DynamicResource ButtonRadioGroupListBox}">
-                                <ListBoxItem Classes="Large" IsSelected="True">Small 1</ListBoxItem>
-                                <ListBoxItem Classes="Large">Small 2</ListBoxItem>
+                                <ListBoxItem Classes="Large" IsSelected="True">Large 1</ListBoxItem>
+                                <ListBoxItem Classes="Large">Large 2</ListBoxItem>
                             </ListBox>
                         </Border>
                         <Border
@@ -87,8 +87,8 @@
                             HorizontalAlignment="Left"
                             Theme="{StaticResource RadioButtonGroupBorder}">
                             <ListBox Theme="{DynamicResource ButtonRadioGroupListBox}" IsEnabled="False">
-                                <ListBoxItem Classes="Large" IsSelected="True">Small 1</ListBoxItem>
-                                <ListBoxItem Classes="Large">Small 2</ListBoxItem>
+                                <ListBoxItem Classes="Large" IsSelected="True">Large 1</ListBoxItem>
+                                <ListBoxItem Classes="Large">Large 2</ListBoxItem>
                             </ListBox>
                         </Border>
                     </StackPanel>
@@ -119,11 +119,11 @@
                     <StackPanel Spacing="20">
                         <TextBlock Text="Theme: CheckGroupListBox"/>
                         <ListBox
-                            SelectionMode="Multiple"
+                            SelectionMode="Multiple,Toggle"
                             Theme="{DynamicResource CheckGroupListBox}"
                             ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
                         <ListBox Theme="{DynamicResource CheckGroupListBox}"
-                                 SelectionMode="Multiple"
+                                 SelectionMode="Multiple,Toggle"
                                  IsEnabled="False">
                             <ListBoxItem IsSelected="True">Avalonia</ListBoxItem>
                             <ListBoxItem>WPF</ListBoxItem>
@@ -131,11 +131,11 @@
 
                         <TextBlock Text="Theme: CardCheckGroupListBox"/>
                         <ListBox
-                            SelectionMode="Multiple"
+                            SelectionMode="Multiple,Toggle"
                             Theme="{DynamicResource CardCheckGroupListBox}"
                             ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
                         <ListBox Theme="{DynamicResource CardCheckGroupListBox}"
-                                 SelectionMode="Multiple"
+                                 SelectionMode="Multiple,Toggle"
                                  IsEnabled="False">
                             <ListBoxItem>Avalonia</ListBoxItem>
                             <ListBoxItem IsSelected="True">WPF</ListBoxItem>

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/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,19 +31,19 @@
                 <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>
                             <DrawingGroup>
-                                <GeometryDrawing Brush="#8B44AC" Geometry="M74.8535 85.8231C75.0263 85.8231 75.1954 85.8231 75.3679 85.8231C80.7347 85.8231 85.1439 81.8027 85.7614 76.6019L85.8357 41.7604C85.2255 18.5931 66.2537 0 42.9393 0C19.2399 0 0.02771 19.2122 0.02771 42.9116C0.02771 66.3573 18.8309 85.418 42.18 85.8231H74.8535Z" />
-                                <GeometryDrawing Brush="#F9F9FB" Geometry="M43.0585 14.6143C29.5513 14.6143 18.2555 24.082 15.4454 36.7432C18.1357 37.4975 20.1087 39.9679 20.1087 42.8992C20.1087 45.8305 18.1357 48.301 15.4454 49.0552C18.2555 61.7164 29.5513 71.1842 43.0585 71.1842C47.9754 71.1842 52.5993 69.9296 56.6276 67.723V70.9926H71.3435V44.0716C71.3569 43.7138 71.3435 43.2603 71.3435 42.8992C71.3435 27.2779 58.6799 14.6143 43.0585 14.6143ZM29.5096 42.8992C29.5096 35.4164 35.5757 29.3503 43.0585 29.3503C50.5414 29.3503 56.6074 35.4164 56.6074 42.8992C56.6074 50.3821 50.5414 56.4481 43.0585 56.4481C35.5757 56.4481 29.5096 50.3821 29.5096 42.8992Z" />
-                                <GeometryDrawing Brush="#F9F9FB" Geometry="M18.105 42.8805C18.105 45.3803 16.0785 47.4068 13.5787 47.4068C11.0789 47.4068 9.05237 45.3803 9.05237 42.8805C9.05237 40.3807 11.0789 38.3542 13.5787 38.3542C16.0785 38.3542 18.105 40.3807 18.105 42.8805Z" />
+                                <GeometryDrawing Brush="#0D6EFD" Geometry="M74.8535 85.8231C75.0263 85.8231 75.1954 85.8231 75.3679 85.8231C80.7347 85.8231 85.1439 81.8027 85.7614 76.6019L85.8357 41.7604C85.2255 18.5931 66.2537 0 42.9393 0C19.2399 0 0.02771 19.2122 0.02771 42.9116C0.02771 66.3573 18.8309 85.418 42.18 85.8231H74.8535Z" />
+                                <GeometryDrawing Brush="White" Geometry="M43.0585 14.6143C29.5513 14.6143 18.2555 24.082 15.4454 36.7432C18.1357 37.4975 20.1087 39.9679 20.1087 42.8992C20.1087 45.8305 18.1357 48.301 15.4454 49.0552C18.2555 61.7164 29.5513 71.1842 43.0585 71.1842C47.9754 71.1842 52.5993 69.9296 56.6276 67.723V70.9926H71.3435V44.0716C71.3569 43.7138 71.3435 43.2603 71.3435 42.8992C71.3435 27.2779 58.6799 14.6143 43.0585 14.6143ZM29.5096 42.8992C29.5096 35.4164 35.5757 29.3503 43.0585 29.3503C50.5414 29.3503 56.6074 35.4164 56.6074 42.8992C56.6074 50.3821 50.5414 56.4481 43.0585 56.4481C35.5757 56.4481 29.5096 50.3821 29.5096 42.8992Z" />
+                                <GeometryDrawing Brush="White" Geometry="M18.105 42.8805C18.105 45.3803 16.0785 47.4068 13.5787 47.4068C11.0789 47.4068 9.05237 45.3803 9.05237 42.8805C9.05237 40.3807 11.0789 38.3542 13.5787 38.3542C16.0785 38.3542 18.105 40.3807 18.105 42.8805Z" />
                             </DrawingGroup>
                         </DrawingImage>
                     </Image.Source>
@@ -234,7 +234,7 @@
                             VerticalAlignment="Top"
                             Palette="{DynamicResource SemiColorPalette}"
                             SelectedIndex="2"
-                            Color="#8B44AC" />
+                            Color="#0D6EFD" />
                         <StackPanel Width="300" Margin="8">
                             <StackPanel Orientation="Horizontal">
                                 <Slider

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

@@ -1,8 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Interactivity;
-using Avalonia.Markup.Xaml;
-using Avalonia.Styling;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -13,35 +9,39 @@ public partial class Overview : UserControl
         InitializeComponent();
     }
 
-    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.0.7";
+    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.2.1.7";
 
-    public string MainStyle { get; set; } = """
-<Application.Styles>
-    <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
-</Application.Styles>
-""";
+    public string MainStyle { get; set; } =
+        """
+        <Application.Styles>
+            <semi:SemiTheme Locale="zh-CN" />
+        </Application.Styles>
+        """;
 
-    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.0.7";
+    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.2.1.7";
 
-    public string ColorPickerStyle { get; set; } = """
-<Application.Styles>
-    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
-</Application.Styles>
-""";
+    public string ColorPickerStyle { get; set; } =
+        """
+        <Application.Styles>
+            <semi:ColorPickerSemiTheme />
+        </Application.Styles>
+        """;
 
-    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.0.7";
+    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.2.1.7";
 
-    public string DataGridStyle { get; set; } = """
-<Application.Styles>
-    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
-</Application.Styles>
-""";
+    public string DataGridStyle { get; set; } =
+        """
+        <Application.Styles>
+            <semi:DataGridSemiTheme />
+        </Application.Styles>
+        """;
 
-    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.7";
+    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.10.3";
 
-    public string TreeDataGridStyle { get; set; } = """
-<Application.Styles>
-    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
-</Application.Styles>
-""";
+    public string TreeDataGridStyle { get; set; } =
+        """
+        <Application.Styles>
+            <semi:TreeDataGridSemiTheme />
+        </Application.Styles>
+        """;
 }

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

@@ -1,8 +1,6 @@
 using System.Threading.Tasks;
-using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
-using Avalonia.Markup.Xaml;
 using Avalonia.Threading;
 using Semi.Avalonia.Demo.ViewModels;
 
@@ -13,17 +11,23 @@ public partial class PaletteDemo : UserControl
     public PaletteDemo()
     {
         InitializeComponent();
-        
+        this.DataContext = new PaletteDemoViewModel();
     }
 
-    protected override async  void OnApplyTemplate(TemplateAppliedEventArgs e)
+    protected override async void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
         base.OnApplyTemplate(e);
-        PaletteDemoViewModel? vm = new PaletteDemoViewModel();
-        await Dispatcher.UIThread.InvokeAsync(() =>
+        PaletteDemoViewModel? vm = this.DataContext as PaletteDemoViewModel;
+        await Dispatcher.UIThread.InvokeAsync(() => { vm?.InitializeResources(); });
+    }
+
+    public async Task Copy(object? o)
+    {
+        if (o is null) return;
+        var toplevel = TopLevel.GetTopLevel(this);
+        if (toplevel?.Clipboard is { } c)
         {
-            vm.InitializeResources();
-        });
-        DataContext = vm;
+            await c.SetTextAsync(o.ToString());
+        }
     }
 }

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/ProgressBarDemo.axaml

@@ -155,7 +155,7 @@
                 Value="60" />
             <ProgressBar
                 Width="200"
-                Classes="Error"
+                Classes="Danger"
                 Maximum="100"
                 Minimum="0"
                 ShowProgressText="True"

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

@@ -33,6 +33,21 @@
                 Disabled
             </RepeatButton>
         </StackPanel>
+        <TextBlock>Outline</TextBlock>
+        <StackPanel Orientation="Horizontal" Spacing="20">
+            <RepeatButton Classes="Primary" Theme="{DynamicResource OutlineRepeatButton}">Primary</RepeatButton>
+            <RepeatButton Classes="Secondary" Theme="{DynamicResource OutlineRepeatButton}">Secondary</RepeatButton>
+            <RepeatButton Classes="Tertiary" Theme="{DynamicResource OutlineRepeatButton}">Tertiary</RepeatButton>
+            <RepeatButton Classes="Success" Theme="{DynamicResource OutlineRepeatButton}">Success</RepeatButton>
+            <RepeatButton Classes="Warning" Theme="{DynamicResource OutlineRepeatButton}">Warning</RepeatButton>
+            <RepeatButton Classes="Danger" Theme="{DynamicResource OutlineRepeatButton}">Danger</RepeatButton>
+            <RepeatButton
+                Classes="Danger"
+                IsEnabled="False"
+                Theme="{DynamicResource OutlineRepeatButton}">
+                Disabled
+            </RepeatButton>
+        </StackPanel>
         <TextBlock>Borderless</TextBlock>
         <StackPanel Orientation="Horizontal" Spacing="20">
             <RepeatButton Classes="Primary" Theme="{DynamicResource BorderlessRepeatButton}">Primary</RepeatButton>
@@ -48,10 +63,18 @@
                 Disabled
             </RepeatButton>
         </StackPanel>
-        <StackPanel Orientation="Horizontal" Spacing="8">
+        <TextBlock>Disabled</TextBlock>
+        <StackPanel Background="{DynamicResource SemiColorBackground1}" Orientation="Horizontal" Spacing="20">
+            <Button IsEnabled="False">Light</Button>
+            <Button IsEnabled="False" Theme="{DynamicResource SolidButton}">Solid</Button>
+            <Button IsEnabled="False" Theme="{DynamicResource OutlineButton}">Outline</Button>
+            <Button IsEnabled="False" Theme="{DynamicResource BorderlessButton}">Borderless</Button>
+        </StackPanel>
+        <TextBlock>Size Classes</TextBlock>
+        <StackPanel Orientation="Horizontal" Spacing="20">
             <RepeatButton Classes="Small">Small</RepeatButton>
             <RepeatButton>Default</RepeatButton>
             <RepeatButton Classes="Large">Large</RepeatButton>
         </StackPanel>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -9,66 +9,22 @@
     mc:Ignorable="d">
     <ScrollViewer>
         <StackPanel HorizontalAlignment="Left" Spacing="20">
+            <ToggleSwitch Name="inset" Content="Inset Content" />
+            <ToggleSwitch Name="autohide" Content="Allow AutoHide" />
             <ScrollViewer
-                Width="200"
-                Height="200"
                 Margin="10"
+                Width="200" Height="200"
+                AllowAutoHide="{Binding #autohide.IsChecked}"
+                Classes.InsetContent="{Binding #inset.IsChecked}"
                 HorizontalScrollBarVisibility="Auto">
-                <Grid RowDefinitions="Auto,Auto"
-                      ColumnDefinitions="Auto,Auto"
-                      Width="300" Height="300">
-                    <Rectangle
-                        Grid.Row="0" Grid.Column="0"
-                        Width="150"
-                        Height="150"
-                        Fill="{DynamicResource SemiYellow2}" />
-                    <Rectangle
-                        Grid.Row="0" Grid.Column="1"
-                        Width="150"
-                        Height="150"
-                        Fill="{DynamicResource SemiBlue2}" />
-                    <Rectangle
-                        Grid.Row="1" Grid.Column="0"
-                        Width="150"
-                        Height="150"
-                        Fill="{DynamicResource SemiPink2}" />
-                    <Rectangle
-                        Grid.Row="1" Grid.Column="1"
-                        Width="150"
-                        Height="150"
-                        Fill="{DynamicResource SemiGreen2}" />
-                </Grid>
-            </ScrollViewer>
-            <ScrollViewer
-                Width="200"
-                Height="200"
-                Margin="10"
-                HorizontalScrollBarVisibility="Auto"
-                Theme="{DynamicResource StaticScrollViewer}">
-                <Grid RowDefinitions="Auto,Auto"
-                      ColumnDefinitions="Auto,Auto"
-                      Width="300" Height="300">
-                    <Rectangle
-                        Grid.Row="0" Grid.Column="0"
-                        Width="150"
-                        Height="150"
-                        Fill="{DynamicResource SemiYellow2}" />
-                    <Rectangle
-                        Grid.Row="0" Grid.Column="1"
-                        Width="150"
-                        Height="150"
-                        Fill="{DynamicResource SemiBlue2}" />
-                    <Rectangle
-                        Grid.Row="1" Grid.Column="0"
-                        Width="150"
-                        Height="150"
-                        Fill="{DynamicResource SemiPink2}" />
-                    <Rectangle
-                        Grid.Row="1" Grid.Column="1"
-                        Width="150"
-                        Height="150"
-                        Fill="{DynamicResource SemiGreen2}" />
-                </Grid>
+                <UniformGrid
+                    Rows="2" Columns="2"
+                    Width="300" Height="300">
+                    <Rectangle Fill="{DynamicResource SemiYellow2}" />
+                    <Rectangle Fill="{DynamicResource SemiBlue2}" />
+                    <Rectangle Fill="{DynamicResource SemiPink2}" />
+                    <Rectangle Fill="{DynamicResource SemiGreen2}" />
+                </UniformGrid>
             </ScrollViewer>
         </StackPanel>
     </ScrollViewer>

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">
@@ -26,8 +21,7 @@
                         Content="IsPaneOpen" />
                     <ToggleSwitch
                         Grid.Row="0" Grid.Column="1"
-                        Name="PaneOpenButton"
-                        IsChecked="{Binding #SplitView.IsPaneOpen}" />
+                        Name="PaneOpenButton" />
 
                     <Label
                         Grid.Row="1" Grid.Column="0"
@@ -35,8 +29,7 @@
                         Content="UseLightDismissOverlayMode" />
                     <ToggleSwitch
                         Grid.Row="1" Grid.Column="1"
-                        Name="UseLightDismissOverlayModeButton"
-                        IsChecked="{Binding #SplitView.UseLightDismissOverlayMode}" />
+                        Name="UseLightDismissOverlayModeButton" />
 
                     <Label
                         Grid.Row="2" Grid.Column="0"
@@ -44,9 +37,9 @@
                         Content="Placement" />
                     <ToggleSwitch
                         Grid.Row="2" Grid.Column="1"
+                        Name="PanePlacementButton"
                         OffContent="Left"
-                        OnContent="Right"
-                        IsChecked="{Binding #SplitView.PanePlacement}" />
+                        OnContent="Right" />
 
                     <Label
                         Grid.Row="3" Grid.Column="0"
@@ -56,8 +49,8 @@
                         Grid.Row="3" Grid.Column="1"
                         Name="DisplayModeSelector"
                         HorizontalAlignment="Stretch"
-                        ItemsSource="{Binding DisplayModes}"
-                        SelectedIndex="{Binding #SplitView.DisplayMode}" />
+                        ItemsSource="{x:Static pages:SplitViewDemoViewModel.DisplayModes}"
+                        SelectedItem="{x:Static SplitViewDisplayMode.CompactInline}" />
 
                     <Label
                         Grid.Row="4" Grid.Column="0"
@@ -70,7 +63,7 @@
                         Minimum="0"
                         TickFrequency="1"
                         IsSnapToTickEnabled="True"
-                        Value="{Binding #SplitView.CompactPaneLength}" />
+                        Value="48" />
 
                     <Label
                         Grid.Row="5" Grid.Column="0"
@@ -83,115 +76,209 @@
                         Minimum="128"
                         TickFrequency="1"
                         IsSnapToTickEnabled="True"
-                        Value="{Binding #SplitView.OpenPaneLength}" />
+                        Value="256" />
                 </Grid>
             </Border>
-            <Border
-                Grid.Column="0"
-                BorderBrush="{DynamicResource SemiGrey1}"
-                BorderThickness="1">
-                <SplitView
-                    Name="SplitView"
-                    DisplayMode="CompactOverlay"
-                    CompactPaneLength="48"
-                    OpenPaneLength="256">
-                    <SplitView.Background>
-                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
-                            <GradientStop Color="#6b4c1b" Offset="0" />
-                            <GradientStop Color="#291e10" Offset="1" />
-                        </LinearGradientBrush>
-                    </SplitView.Background>
-                    <SplitView.Pane>
-                        <Grid RowDefinitions="Auto,*,Auto">
-                            <TextBlock
-                                Grid.Row="0"
-                                Name="PaneHeader"
-                                Margin="8,12"
-                                FontWeight="Bold"
-                                Text="Playlist" />
-                            <ListBox
-                                Grid.Row="1"
-                                ItemsSource="{Binding Songs}" />
-                            <ToggleSwitch
-                                Grid.Row="2"
-                                Theme="{DynamicResource ButtonToggleSwitch}"
-                                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>
-
-                    <Panel>
-                        <Panel.Styles>
-                            <Style Selector="Image#AlbumCover">
-                                <Style.Animations>
-                                    <Animation IterationCount="Infinite" Duration="0:0:40">
-                                        <KeyFrame Cue="0%">
-                                            <Setter Property="RotateTransform.Angle" Value="0" />
-                                        </KeyFrame>
-                                        <KeyFrame Cue="100%">
-                                            <Setter Property="RotateTransform.Angle" Value="360" />
-                                        </KeyFrame>
-                                    </Animation>
-                                </Style.Animations>
-                            </Style>
-                        </Panel.Styles>
-                        <Image
-                            Source="/Assets/WORLD.png"
-                            Name="AlbumCover"
-                            Width="200"
-                            Height="200" />
-                        <Arc
-                            Width="290"
-                            Height="290"
-                            StartAngle="0"
-                            SweepAngle="360"
-                            StrokeJoin="Round"
-                            StrokeLineCap="Round"
-                            StrokeThickness="45">
-                            <Arc.Stroke>
-                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
-                                    <GradientStop Color="#010101" Offset="0" />
-                                    <GradientStop Color="#363636" Offset="0.5" />
-                                    <GradientStop Color="#010101" Offset="1" />
+            <TabControl Grid.Column="0">
+                <TabItem Header="Default">
+                    <Border
+                        BorderBrush="{DynamicResource SemiGrey1}"
+                        BorderThickness="1">
+                        <SplitView
+                            Name="SplitView"
+                            IsPaneOpen="{Binding #PaneOpenButton.IsChecked,Mode=TwoWay}"
+                            UseLightDismissOverlayMode="{Binding #UseLightDismissOverlayModeButton.IsChecked}"
+                            PanePlacement="{Binding #PanePlacementButton.IsChecked}"
+                            DisplayMode="{Binding #DisplayModeSelector.SelectedItem}"
+                            CompactPaneLength="{Binding #CompactPaneLengthSlider.Value}"
+                            OpenPaneLength="{Binding #OpenPaneLengthSlider.Value}">
+                            <SplitView.Background>
+                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                                    <GradientStop Color="#6b4c1b" Offset="0" />
+                                    <GradientStop Color="#291e10" Offset="1" />
                                 </LinearGradientBrush>
-                            </Arc.Stroke>
-                        </Arc>
-                        <Arc
-                            Width="294"
-                            Height="294"
-                            StartAngle="0"
-                            SweepAngle="360"
-                            StrokeJoin="Round"
-                            StrokeLineCap="Round"
-                            StrokeThickness="4"
-                            Stroke="Black" />
-                        <Arc
-                            Width="310"
-                            Height="310"
-                            StartAngle="0"
-                            SweepAngle="360"
-                            StrokeJoin="Round"
-                            StrokeLineCap="Round"
-                            StrokeThickness="10"
-                            Stroke="#C6CACD"
-                            Opacity="0.1" />
-                    </Panel>
+                            </SplitView.Background>
+                            <SplitView.Pane>
+                                <Grid RowDefinitions="Auto,*,Auto">
+                                    <TextBlock
+                                        Grid.Row="0"
+                                        Name="PaneHeader"
+                                        Margin="8,12"
+                                        FontWeight="Bold"
+                                        Text="Playlist" />
+                                    <ListBox
+                                        Grid.Row="1"
+                                        ItemsSource="{Binding Songs}" />
+                                    <ToggleSwitch
+                                        Grid.Row="2"
+                                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                                        Content="{StaticResource SemiIconSidebar}"
+                                        HorizontalAlignment="Left"
+                                        IsChecked="{Binding #SplitView.IsPaneOpen}">
+                                    </ToggleSwitch>
+                                </Grid>
+                            </SplitView.Pane>
 
-                </SplitView>
-            </Border>
+                            <Panel>
+                                <Panel.Styles>
+                                    <Style Selector="Image#AlbumCover">
+                                        <Style.Animations>
+                                            <Animation IterationCount="Infinite" Duration="0:0:40">
+                                                <KeyFrame Cue="0%">
+                                                    <Setter Property="RotateTransform.Angle" Value="0" />
+                                                </KeyFrame>
+                                                <KeyFrame Cue="100%">
+                                                    <Setter Property="RotateTransform.Angle" Value="360" />
+                                                </KeyFrame>
+                                            </Animation>
+                                        </Style.Animations>
+                                    </Style>
+                                </Panel.Styles>
+                                <Image
+                                    Source="/Assets/WORLD.png"
+                                    Name="AlbumCover"
+                                    Width="200"
+                                    Height="200" />
+                                <Arc
+                                    Width="290"
+                                    Height="290"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="45">
+                                    <Arc.Stroke>
+                                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
+                                            <GradientStop Color="#010101" Offset="0" />
+                                            <GradientStop Color="#363636" Offset="0.5" />
+                                            <GradientStop Color="#010101" Offset="1" />
+                                        </LinearGradientBrush>
+                                    </Arc.Stroke>
+                                </Arc>
+                                <Arc
+                                    Width="294"
+                                    Height="294"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="4"
+                                    Stroke="Black" />
+                                <Arc
+                                    Width="310"
+                                    Height="310"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="10"
+                                    Stroke="#C6CACD"
+                                    Opacity="0.1" />
+                            </Panel>
 
+                        </SplitView>
+                    </Border>
+                </TabItem>
+                <TabItem Header="VerticalSplitView">
+                    <Border
+                        BorderBrush="{DynamicResource SemiGrey1}"
+                        BorderThickness="1">
+                        <SplitView
+                            Name="SplitView2"
+                            Theme="{DynamicResource VerticalSplitView}"
+                            IsPaneOpen="{Binding #PaneOpenButton.IsChecked,Mode=TwoWay}"
+                            UseLightDismissOverlayMode="{Binding #UseLightDismissOverlayModeButton.IsChecked}"
+                            PanePlacement="{Binding #PanePlacementButton.IsChecked}"
+                            DisplayMode="{Binding #DisplayModeSelector.SelectedItem}"
+                            CompactPaneLength="{Binding #CompactPaneLengthSlider.Value}"
+                            OpenPaneLength="{Binding #OpenPaneLengthSlider.Value}">
+                            <SplitView.Background>
+                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                                    <GradientStop Color="#6b4c1b" Offset="0" />
+                                    <GradientStop Color="#291e10" Offset="1" />
+                                </LinearGradientBrush>
+                            </SplitView.Background>
+                            <SplitView.Pane>
+                                <Grid RowDefinitions="Auto,Auto,*">
+                                    <ToggleSwitch
+                                        Grid.Row="0"
+                                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                                        Content="{StaticResource SemiIconSidebar}"
+                                        HorizontalAlignment="Left"
+                                        IsChecked="{Binding #SplitView2.IsPaneOpen}">
+                                    </ToggleSwitch>
+                                    <TextBlock
+                                        Grid.Row="1"
+                                        Margin="8,12"
+                                        FontWeight="Bold"
+                                        Text="Playlist" />
+                                    <ListBox
+                                        Grid.Row="2"
+                                        ItemsSource="{Binding Songs}" />
+                                </Grid>
+                            </SplitView.Pane>
+
+                            <Panel>
+                                <Panel.Styles>
+                                    <Style Selector="Image#AlbumCover2">
+                                        <Style.Animations>
+                                            <Animation IterationCount="Infinite" Duration="0:0:40">
+                                                <KeyFrame Cue="0%">
+                                                    <Setter Property="RotateTransform.Angle" Value="0" />
+                                                </KeyFrame>
+                                                <KeyFrame Cue="100%">
+                                                    <Setter Property="RotateTransform.Angle" Value="360" />
+                                                </KeyFrame>
+                                            </Animation>
+                                        </Style.Animations>
+                                    </Style>
+                                </Panel.Styles>
+                                <Image
+                                    Source="/Assets/WORLD.png"
+                                    Name="AlbumCover2"
+                                    Width="200"
+                                    Height="200" />
+                                <Arc
+                                    Width="290"
+                                    Height="290"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="45">
+                                    <Arc.Stroke>
+                                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
+                                            <GradientStop Color="#010101" Offset="0" />
+                                            <GradientStop Color="#363636" Offset="0.5" />
+                                            <GradientStop Color="#010101" Offset="1" />
+                                        </LinearGradientBrush>
+                                    </Arc.Stroke>
+                                </Arc>
+                                <Arc
+                                    Width="294"
+                                    Height="294"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="4"
+                                    Stroke="Black" />
+                                <Arc
+                                    Width="310"
+                                    Height="310"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="10"
+                                    Stroke="#C6CACD"
+                                    Opacity="0.1" />
+                            </Panel>
+
+                        </SplitView>
+                    </Border>
+                </TabItem>
+            </TabControl>
         </Grid>
     </Border>
 </UserControl>

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

@@ -34,7 +34,7 @@ public class SplitViewDemoViewModel : ObservableObject
         "世界所有的烂漫",
     ];
 
-    public ObservableCollection<SplitViewDisplayMode> DisplayModes { get; set; } =
+    public static ObservableCollection<SplitViewDisplayMode> DisplayModes { get; set; } =
     [
         SplitViewDisplayMode.Inline,
         SplitViewDisplayMode.CompactInline,

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

@@ -11,85 +11,122 @@
     x:DataType="vm:TabControlDemoViewModel"
     mc:Ignorable="d">
     <ScrollViewer>
-        <StackPanel Spacing="20">
-            <Border Theme="{StaticResource CardBorder}">
-                <TabControl TabStripPlacement="Top">
-                    <TabItem Content="Hello 1" Header="Tab 1" />
-                    <TabItem Content="Hello 2" Header="Tab 2" />
-                    <TabItem Content="Hello 3" Header="Tab 3" />
-                    <TabItem Content="中文内容" Header="中文中文" />
-                    <TabItem
-                        Content="Hello 4"
-                        Header="Tab 4"
-                        IsEnabled="False" />
-                </TabControl>
-            </Border>
-            <Border Theme="{StaticResource CardBorder}">
-                <TabControl TabStripPlacement="Left">
-                    <TabItem Content="Hello 1" Header="Tab 1" />
-                    <TabItem Content="Hello 2" Header="Tab 2" />
-                    <TabItem Content="Hello 3" Header="Tab 3" />
-                    <TabItem Content="中文内容" Header="中文中文" />
-                    <TabItem
-                        Content="Hello 4"
-                        Header="Tab 4"
-                        IsEnabled="False" />
-                </TabControl>
-            </Border>
-            <Border Theme="{StaticResource CardBorder}">
-                <TabControl TabStripPlacement="Right">
-                    <TabItem Content="Hello 1" Header="Tab 1" />
-                    <TabItem Content="Hello 2" Header="Tab 2" />
-                    <TabItem Content="Hello 3" Header="Tab 3" />
-                    <TabItem Content="中文内容" Header="中文中文" />
-                    <TabItem
-                        Content="Hello 4"
-                        Header="Tab 4"
-                        IsEnabled="False" />
-                </TabControl>
-            </Border>
-            <Border Theme="{StaticResource CardBorder}">
-                <TabControl TabStripPlacement="Bottom">
-                    <TabItem Content="Hello 1" Header="Tab 1" />
-                    <TabItem Content="Hello 2" Header="Tab 2" />
-                    <TabItem Content="Hello 3" Header="Tab 3" />
-                    <TabItem Content="中文内容" Header="中文中文" />
-                    <TabItem
-                        Content="Hello 4"
-                        Header="Tab 4"
-                        IsEnabled="False" />
-                </TabControl>
-            </Border>
-            <Border Theme="{StaticResource CardBorder}">
-                <TabStrip>
-                    <TabStripItem>Tab 1</TabStripItem>
-                    <TabStripItem>Tab 2</TabStripItem>
-                </TabStrip>
-            </Border>
-            <Border Height="300" Theme="{DynamicResource CardBorder}">
-                <TabControl
-                    ItemsSource="{Binding Items}"
-                    TabStripPlacement="Top"
-                    Theme="{DynamicResource ScrollTabControl}" />
-            </Border>
-            <Border Height="300" Theme="{DynamicResource CardBorder}">
-                <TabControl
-                    ItemsSource="{Binding Items}"
-                    TabStripPlacement="Left"
-                    Theme="{DynamicResource ScrollTabControl}" />
-            </Border>
-            <Border Height="300" Theme="{DynamicResource CardBorder}">
-                <TabControl
-                    ItemsSource="{Binding Items}"
-                    TabStripPlacement="Bottom"
-                    Theme="{DynamicResource ScrollTabControl}" />
-            </Border>
-            <Border Height="300" Theme="{DynamicResource CardBorder}">
-                <TabControl
-                    ItemsSource="{Binding Items}"
-                    TabStripPlacement="Right"
-                    Theme="{DynamicResource ScrollTabControl}" />
+        <StackPanel>
+            <Border
+                Margin="8"
+                HorizontalAlignment="Left"
+                Theme="{StaticResource RadioButtonGroupBorder}">
+                <ListBox Name="place" Theme="{StaticResource ButtonRadioGroupListBox}">
+                    <Dock>Left</Dock>
+                    <Dock>Bottom</Dock>
+                    <Dock>Right</Dock>
+                    <Dock>Top</Dock>
+                </ListBox>
             </Border>
+            <TabControl Theme="{StaticResource LineTabControl}">
+                <TabItem Header="Default">
+                    <StackPanel>
+                        <StackPanel
+                            Margin="8"
+                            Orientation="Horizontal"
+                            Spacing="8">
+                            <TextBlock VerticalAlignment="Center" Text="ReverseSeparator" />
+                            <ToggleSwitch Name="reverse" Theme="{StaticResource SimpleToggleSwitch}" />
+                        </StackPanel>
+                        <Border MinHeight="150" Theme="{StaticResource CardBorder}">
+                            <TabControl Classes.ReverseSeparator="{Binding #reverse.IsChecked}" TabStripPlacement="{Binding #place.SelectedValue}">
+                                <TabItem Content="Hello 1" Header="Tab 1" />
+                                <TabItem Content="Hello 2" Header="Tab 2" />
+                                <TabItem Content="Hello 3" Header="Tab 3" />
+                                <TabItem Content="中文内容" Header="中文中文" />
+                                <TabItem
+                                    Content="Hello 4"
+                                    Header="Tab 4"
+                                    IsEnabled="False" />
+                            </TabControl>
+                        </Border>
+                        <Border Height="300" Theme="{StaticResource CardBorder}">
+                            <TabControl
+                                Classes.ReverseSeparator="{Binding #reverse.IsChecked}"
+                                ItemsSource="{Binding Items}"
+                                TabStripPlacement="{Binding #place.SelectedValue}"
+                                Theme="{StaticResource ScrollTabControl}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Line">
+                    <StackPanel>
+                        <Border MinHeight="150" Theme="{StaticResource CardBorder}">
+                            <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource LineTabControl}">
+                                <TabItem Content="Hello 1" Header="Tab 1" />
+                                <TabItem Content="Hello 2" Header="Tab 2" />
+                                <TabItem Content="Hello 3" Header="Tab 3" />
+                                <TabItem Content="中文内容" Header="中文中文" />
+                                <TabItem
+                                    Content="Hello 4"
+                                    Header="Tab 4"
+                                    IsEnabled="False" />
+                            </TabControl>
+                        </Border>
+                        <Border Height="300" Theme="{StaticResource CardBorder}">
+                            <TabControl
+                                ItemsSource="{Binding Items}"
+                                TabStripPlacement="{Binding #place.SelectedValue}"
+                                Theme="{StaticResource ScrollLineTabControl}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Card">
+                    <StackPanel>
+                        <Border
+                            MinHeight="150"
+                            Background="Transparent"
+                            Theme="{StaticResource CardBorder}">
+                            <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource CardTabControl}">
+                                <TabItem Content="Hello 1" Header="Tab 1" />
+                                <TabItem Content="Hello 2" Header="Tab 2" />
+                                <TabItem Content="Hello 3" Header="Tab 3" />
+                                <TabItem Content="中文内容" Header="中文中文" />
+                                <TabItem
+                                    Content="Hello 4"
+                                    Header="Tab 4"
+                                    IsEnabled="False" />
+                            </TabControl>
+                        </Border>
+                        <Border
+                            Height="300"
+                            Background="Transparent"
+                            Theme="{StaticResource CardBorder}">
+                            <TabControl
+                                ItemsSource="{Binding Items}"
+                                TabStripPlacement="{Binding #place.SelectedValue}"
+                                Theme="{StaticResource ScrollCardTabControl}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Button">
+                    <StackPanel>
+                        <Border MinHeight="150" Theme="{StaticResource CardBorder}">
+                            <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource ButtonTabControl}">
+                                <TabItem Content="Hello 1" Header="Tab 1" />
+                                <TabItem Content="Hello 2" Header="Tab 2" />
+                                <TabItem Content="Hello 3" Header="Tab 3" />
+                                <TabItem Content="中文内容" Header="中文中文" />
+                                <TabItem
+                                    Content="Hello 4"
+                                    Header="Tab 4"
+                                    IsEnabled="False" />
+                            </TabControl>
+                        </Border>
+                        <Border Height="300" Theme="{StaticResource CardBorder}">
+                            <TabControl
+                                ItemsSource="{Binding Items}"
+                                TabStripPlacement="{Binding #place.SelectedValue}"
+                                Theme="{StaticResource ScrollButtonTabControl}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+            </TabControl>
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>

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

@@ -0,0 +1,94 @@
+<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:Class="Semi.Avalonia.Demo.Pages.TabStripDemo"
+             x:CompileBindings="True"
+             x:DataType="vm:TabStripDemoViewModel">
+    <Design.DataContext>
+        <vm:TabStripDemoViewModel />
+    </Design.DataContext>
+    <ScrollViewer>
+        <StackPanel>
+            <TabControl Theme="{StaticResource LineTabControl}">
+                <TabItem Header="Default">
+                    <StackPanel>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip>
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                                <TabStripItem Content="中文中文" />
+                                <TabStripItem Content="Tab 4" IsEnabled="False" />
+                            </TabStrip>
+                        </Border>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip
+                                ItemsSource="{Binding Items}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Line">
+                    <StackPanel>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip Theme="{StaticResource LineTabStrip}">
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                                <TabStripItem Content="中文中文" />
+                                <TabStripItem Content="Tab 4" IsEnabled="False" />
+                            </TabStrip>
+                        </Border>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip
+                                ItemsSource="{Binding Items}"
+                                Theme="{StaticResource LineTabStrip}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Card">
+                    <StackPanel>
+                        <Border
+                            Background="Transparent"
+                            Theme="{StaticResource CardBorder}">
+                            <TabStrip Theme="{StaticResource CardTabStrip}">
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                                <TabStripItem Content="中文中文" />
+                                <TabStripItem Content="Tab 4" IsEnabled="False" />
+                            </TabStrip>
+                        </Border>
+                        <Border
+                            Background="Transparent"
+                            Theme="{StaticResource CardBorder}">
+                            <TabStrip
+                                ItemsSource="{Binding Items}"
+                                Theme="{StaticResource CardTabStrip}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Button">
+                    <StackPanel>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip Theme="{StaticResource ButtonTabStrip}">
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                                <TabStripItem Content="中文中文" />
+                                <TabStripItem Content="Tab 4" IsEnabled="False" />
+                            </TabStrip>
+                        </Border>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip
+                                ItemsSource="{Binding Items}"
+                                Theme="{StaticResource ButtonTabStrip}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+            </TabControl>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>

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

@@ -0,0 +1,13 @@
+using Avalonia.Controls;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class TabStripDemo : UserControl
+{
+    public TabStripDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new TabStripDemoViewModel();
+    }
+}

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/ToggleButtonDemo.axaml

@@ -82,7 +82,14 @@
                 Disabled
             </ToggleButton>
         </StackPanel>
-        <StackPanel Orientation="Horizontal">
+        <TextBlock Text="Toggle Button Disabled State" />
+        <StackPanel Background="{DynamicResource SemiColorBackground1}" Orientation="Horizontal" Spacing="20">
+            <ToggleButton IsThreeState="True" IsEnabled="False">Default</ToggleButton>
+            <ToggleButton IsThreeState="True" IsEnabled="False" IsChecked="True">Checked</ToggleButton>
+            <ToggleButton IsThreeState="True" IsEnabled="False" IsChecked="{x:Null}">Indeterminate</ToggleButton>
+        </StackPanel>
+        <TextBlock Text="Toggle Button Size" />
+        <StackPanel Orientation="Horizontal" Spacing="20">
             <ToggleButton Classes="Small" IsThreeState="True">Small</ToggleButton>
             <ToggleButton IsThreeState="True">Default</ToggleButton>
             <ToggleButton Classes="Large" IsThreeState="True">Large</ToggleButton>

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

@@ -7,43 +7,93 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Spacing="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" />
-        <ToggleSwitch
-            Theme="{DynamicResource SimpleToggleSwitch}"
-            Content="Content"
-            OffContent="OffContent"
-            OnContent="OnContent" />
-        <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 Spacing="8" Margin="20">
+        <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 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 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="{StaticResource SemiThicknessTight}"
+                Width="{StaticResource SemiSpacingExtraLoose}"
+                Height="{StaticResource SemiSpacingExtraLoose}"
+                Theme="{DynamicResource ButtonToggleSwitch}"
+                Foreground="{DynamicResource ButtonDefaultTertiaryForeground}">
+                <ToggleSwitch.Content>
+                    <PathIcon
+                        Theme="{DynamicResource InnerPathIcon}"
+                        Data="{StaticResource SemiIconSidebar}" />
+                </ToggleSwitch.Content>
+            </ToggleSwitch>
+            <ToggleSwitch
+                HorizontalAlignment="Left"
+                Padding="{StaticResource SemiThicknessTight}"
+                Width="{StaticResource SemiSpacingExtraLoose}"
+                Height="{StaticResource SemiSpacingExtraLoose}"
+                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>
+
     </StackPanel>
 </UserControl>

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

@@ -0,0 +1,127 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+             xmlns:converters="clr-namespace:Semi.Avalonia.Demo.Converters"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Semi.Avalonia.Demo.Pages.TreeDataGridDemo"
+             x:CompileBindings="True"
+             x:DataType="vm:TreeDataGridDemoViewModel">
+    <UserControl.Resources>
+        <converters:FileIconConverter x:Key="FileIconConverter">
+            <StaticResource x:Key="file" ResourceKey="SemiIconFile" />
+            <StaticResource x:Key="folderOpen" ResourceKey="SemiIconFolderOpen" />
+            <StaticResource x:Key="folderClosed" ResourceKey="SemiIconFolder" />
+        </converters:FileIconConverter>
+    </UserControl.Resources>
+    <TabControl>
+        <TabItem Header="Songs">
+            <TreeDataGrid
+                AutoDragDropRows="True"
+                DataContext="{Binding SongsContext}"
+                Source="{Binding Songs}">
+                <TreeDataGrid.Resources>
+                    <DataTemplate x:Key="AlbumCell" DataType="vm:SongViewModel">
+                        <TextBlock
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Center"
+                            Background="Transparent"
+                            Text="{Binding Album}" />
+                    </DataTemplate>
+                    <DataTemplate x:Key="AlbumEditCell" DataType="vm:SongViewModel">
+                        <ComboBox
+                            VerticalAlignment="Center"
+                            Classes="Small"
+                            ItemsSource="{x:Static vm:Song.Albums}"
+                            SelectedItem="{Binding Album}" />
+                    </DataTemplate>
+                    <DataTemplate x:Key="CommentsCell" DataType="vm:SongViewModel">
+                        <TextBlock VerticalAlignment="Center" Text="{Binding CountOfComment}" />
+                    </DataTemplate>
+                    <DataTemplate x:Key="CommentsEditCell" DataType="vm:SongViewModel">
+                        <NumericUpDown
+                            Width="100"
+                            HorizontalAlignment="Left"
+                            VerticalAlignment="Center"
+                            Classes="Small"
+                            Value="{Binding CountOfComment}" />
+                    </DataTemplate>
+                </TreeDataGrid.Resources>
+                <TreeDataGrid.Styles>
+                    <Style Selector="TreeDataGrid TreeDataGridRow:nth-last-child(2n)">
+                        <Setter Property="Background" Value="{DynamicResource SemiColorFill0}" />
+                    </Style>
+                </TreeDataGrid.Styles>
+            </TreeDataGrid>
+        </TabItem>
+        <TabItem Header="Files">
+            <Grid DataContext="{Binding FilesContext}" RowDefinitions="Auto, *">
+                <DockPanel Margin="0,4" DockPanel.Dock="Top">
+                    <ComboBox
+                        DockPanel.Dock="Left"
+                        ItemsSource="{Binding Drives}"
+                        SelectedItem="{Binding SelectedDrive}" />
+                    <TextBox
+                        Margin="4,0,0,0"
+                        VerticalContentAlignment="Center"
+                        KeyDown="SelectedPath_KeyDown"
+                        Text="{Binding SelectedPath, Mode=OneWay}" />
+                </DockPanel>
+                <TreeDataGrid
+                    Name="fileViewer"
+                    Grid.Row="1"
+                    Source="{Binding Source}">
+                    <TreeDataGrid.Resources>
+
+                        <!--  Template for Name column cells  -->
+                        <DataTemplate x:Key="FileNameCell" DataType="vm:FileNodeViewModel">
+                            <StackPanel Orientation="Horizontal">
+                                <PathIcon
+                                    Theme="{StaticResource InnerPathIcon}"
+                                    Margin="8,0">
+                                    <PathIcon.Data>
+                                        <MultiBinding Converter="{StaticResource FileIconConverter}">
+                                            <Binding Path="IsDirectory" />
+                                            <Binding Path="IsExpanded" />
+                                        </MultiBinding>
+                                    </PathIcon.Data>
+                                </PathIcon>
+                                <TextBlock VerticalAlignment="Center" Text="{Binding Name}" />
+                            </StackPanel>
+                        </DataTemplate>
+
+                        <!--  Edit template for Name column cells  -->
+                        <DataTemplate x:Key="FileNameEditCell" DataType="vm:FileNodeViewModel">
+                            <StackPanel Orientation="Horizontal">
+                                <Image Margin="0,0,4,0" VerticalAlignment="Center">
+                                    <Image.Source>
+                                        <MultiBinding Converter="{StaticResource FileIconConverter}">
+                                            <Binding Path="IsDirectory" />
+                                            <Binding Path="IsExpanded" />
+                                        </MultiBinding>
+                                    </Image.Source>
+                                </Image>
+                                <TextBox
+                                    VerticalAlignment="Center"
+                                    Classes="Small"
+                                    Text="{Binding Name}">
+                                    <TextBox.Styles>
+                                        <Style Selector="DataValidationErrors">
+                                            <Setter Property="Theme" Value="{DynamicResource TooltipDataValidationErrors}" />
+                                        </Style>
+                                    </TextBox.Styles>
+                                </TextBox>
+                            </StackPanel>
+                        </DataTemplate>
+                    </TreeDataGrid.Resources>
+                    <TreeDataGrid.Styles>
+                        <Style Selector="TreeDataGrid TreeDataGridRow:nth-child(2n)">
+                            <Setter Property="Background" Value="{DynamicResource SemiColorFill0}" />
+                        </Style>
+                    </TreeDataGrid.Styles>
+                </TreeDataGrid>
+            </Grid>
+        </TabItem>
+    </TabControl>
+</UserControl>

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

@@ -0,0 +1,23 @@
+using Avalonia.Controls;
+using Avalonia.Input;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class TreeDataGridDemo : UserControl
+{
+    public TreeDataGridDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new TreeDataGridDemoViewModel();
+    }
+
+    private void SelectedPath_KeyDown(object? sender, KeyEventArgs e)
+    {
+        if (e.Key == Key.Enter)
+        {
+            var vm = DataContext as TreeDataGridDemoViewModel;
+            vm.FilesContext.SelectedPath = (sender as TextBox)!.Text;
+        }
+    }
+}

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

@@ -0,0 +1,94 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+             xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Semi.Avalonia.Demo.Pages.VariablesDemo"
+             x:DataType="vm:VariablesDemoViewModel"
+             x:CompileBindings="True">
+    <Design.DataContext>
+        <vm:VariablesDemoViewModel />
+    </Design.DataContext>
+    <DataGrid
+        Margin="8"
+        CanUserReorderColumns="True"
+        CanUserResizeColumns="True"
+        CanUserSortColumns="True"
+        HeadersVisibility="All"
+        IsReadOnly="True"
+        ItemsSource="{Binding GridData}">
+        <DataGrid.Columns>
+            <DataGridTemplateColumn
+                Width="300"
+                x:DataType="vm:VariableItem"
+                Header="ResourceKey">
+                <DataGridTemplateColumn.CellTemplate>
+                    <DataTemplate DataType="vm:VariableItem">
+                        <SelectableTextBlock
+                            Margin="12,0"
+                            VerticalAlignment="Center"
+                            Text="{Binding ResourceKey}" />
+                    </DataTemplate>
+                </DataGridTemplateColumn.CellTemplate>
+            </DataGridTemplateColumn>
+            <DataGridTemplateColumn
+                Width="200"
+                x:DataType="vm:VariableItem"
+                Header="Type">
+                <DataGridTemplateColumn.CellTemplate>
+                    <DataTemplate DataType="vm:VariableItem">
+                        <SelectableTextBlock
+                            Margin="12,0"
+                            VerticalAlignment="Center"
+                            Text="{Binding Type.Name}" />
+                    </DataTemplate>
+                </DataGridTemplateColumn.CellTemplate>
+            </DataGridTemplateColumn>
+            <DataGridTemplateColumn
+                Width="200"
+                x:DataType="vm:VariableItem"
+                Header="Value">
+                <DataGridTemplateColumn.CellTemplate>
+                    <DataTemplate DataType="vm:VariableItem">
+                        <SelectableTextBlock
+                            Margin="12,0"
+                            VerticalAlignment="Center"
+                            Text="{Binding Value}"
+                            TextWrapping="Wrap" />
+                    </DataTemplate>
+                </DataGridTemplateColumn.CellTemplate>
+            </DataGridTemplateColumn>
+            <DataGridTemplateColumn
+                Width="*"
+                x:DataType="vm:VariableItem"
+                Header="Description">
+                <DataGridTemplateColumn.CellTemplate>
+                    <DataTemplate DataType="vm:VariableItem">
+                        <SelectableTextBlock
+                            Margin="12,0"
+                            VerticalAlignment="Center"
+                            Text="{Binding Description}"
+                            TextWrapping="Wrap" />
+                    </DataTemplate>
+                </DataGridTemplateColumn.CellTemplate>
+            </DataGridTemplateColumn>
+            <DataGridTemplateColumn
+                Width="100"
+                x:DataType="vm:VariableItem"
+                Header="CopyText"
+                SortMemberPath="Duration">
+                <DataGridTemplateColumn.CellTemplate>
+                    <DataTemplate DataType="vm:VariableItem">
+                        <Button
+                            Command="{Binding $parent[pages:VariablesDemo].Copy}"
+                            CommandParameter="{Binding CopyText}"
+                            Theme="{DynamicResource  IconBorderlessButton}"
+                            Content="{StaticResource SemiIconCopy}" />
+                    </DataTemplate>
+                </DataGridTemplateColumn.CellTemplate>
+            </DataGridTemplateColumn>
+        </DataGrid.Columns>
+    </DataGrid>
+</UserControl>

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

@@ -0,0 +1,24 @@
+using System.Threading.Tasks;
+using Avalonia.Controls;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class VariablesDemo : UserControl
+{
+    public VariablesDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new VariablesDemoViewModel();
+    }
+
+    public async Task Copy(object? o)
+    {
+        if (o is null) return;
+        var toplevel = TopLevel.GetTopLevel(this);
+        if (toplevel?.Clipboard is { } c)
+        {
+            await c.SetTextAsync(o.ToString());
+        }
+    }
+}