feat: enable vulkan in android demo.

.github/FUNDING.yml

@@ -1,15 +0,0 @@
-# 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/deploy.yml

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

.github/workflows/pack-nightly.yml

@@ -1,73 +0,0 @@
-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

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

.github/workflows/publish.yml

@@ -1,118 +0,0 @@
-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

@@ -1,146 +0,0 @@
-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

README.md

@@ -2,7 +2,6 @@
 
 [![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)
 
@@ -27,13 +26,11 @@ dotnet add package Semi.Avalonia
 Include Semi Design Styles in application:
 
 ```xaml
-<Application
+<Application.Styles>
-    ...
+<!-- You can still reference in old way.  -->
-    xmlns:semi="https://irihi.tech/semi">
+<!-- <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" /> -->
-    <Application.Styles>
+    <semi:SemiTheme Locale="zh-cn" />
-        <semi:SemiTheme Locale="zh-CN" />
+</Application.Styles>
-    </Application.Styles>
-</Application>
 ```
 
 That's all.
@@ -48,9 +45,9 @@ dotnet add package Semi.Avalonia.TreeDataGrid
 
 ```xaml
 <Application.Styles>
-    <semi:ColorPickerSemiTheme />
+    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
-    <semi:DataGridSemiTheme />
+    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
-    <semi:TreeDataGridSemiTheme />
+    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
 </Application.Styles>
 ```
 
@@ -69,8 +66,6 @@ We offer limited free community support for Semi Avalonia and Ursa. If you have
 
 | Semi Design Version | Avalonia Version |
 |:--------------------|:-----------------|
-| 11.2.1              | >=11.2.1         |
-| 11.2.0              | 11.2.0           |
 | 11.1.0              | >=11.1.0         |
 | 11.0.7              | >=11.0.7         |
 | 11.0.1              | <=11.0.6         |

README_CN.md

@@ -2,7 +2,6 @@
 
 [![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)
 
@@ -27,13 +26,11 @@ dotnet add package Semi.Avalonia
 在样式中引用 Semi 主题：
 
 ```xaml
-<Application
+<Application.Styles>
-    ...
+<!-- 您仍然可以使用旧版方式引用  -->
-    xmlns:semi="https://irihi.tech/semi">
+<!-- <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" /> -->
-    <Application.Styles>
+    <semi:SemiTheme Locale="zh-cn" />
-        <semi:SemiTheme Locale="zh-CN" />
+</Application.Styles>
-    </Application.Styles>
-</Application>
 ```
 
 这样就可以了。
@@ -48,15 +45,16 @@ dotnet add package Semi.Avalonia.TreeDataGrid
 
 ```xaml
 <Application.Styles>
-    <semi:ColorPickerSemiTheme />
+    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
-    <semi:DataGridSemiTheme />
+    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
-    <semi:TreeDataGridSemiTheme />
+    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
 </Application.Styles>
 ```
 
 ## 示例
 
 您可以从 Semi Avalonia 的 release 页下载并试用 Semi Avalonia 的展示应用。
+
 <https://github.com/irihitech/Semi.Avalonia/releases>
 
 ## 社区支持
@@ -65,12 +63,11 @@ dotnet add package Semi.Avalonia.TreeDataGrid
 
 ![FeiShu](./docs/community-support.png)
 
+
 ## 版本兼容性
 
 | Semi Design Version | Avalonia Version |
 |:--------------------|:-----------------|
-| 11.2.1              | >=11.2.1         |
-| 11.2.0              | 11.2.0           |
 | 11.1.0              | >=11.1.0         |
 | 11.0.7              | >=11.0.7         |
 | 11.0.1              | <=11.0.6         |

Semi.Avalonia.sln

@@ -12,15 +12,6 @@ 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}"
@@ -39,6 +30,8 @@ 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
@@ -82,6 +75,10 @@ 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
@@ -92,6 +89,7 @@ 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,7 +1,6 @@
 <Project>
-    <PropertyGroup>
+  <PropertyGroup>
-        <AvaloniaVersion>11.2.5</AvaloniaVersion>
+    <Nullable>enable</Nullable>
-        <DataGridVersion>11.2.5</DataGridVersion>
+    <AvaloniaVersion>11.1.3</AvaloniaVersion>
-        <CommunityToolkitVersion>8.4.0</CommunityToolkitVersion>
+  </PropertyGroup>
-    </PropertyGroup>
 </Project>

demo/Semi.Avalonia.Demo.Android/MainActivity.cs

@@ -1,5 +1,6 @@
 using Android.App;
 using Android.Content.PM;
+using Avalonia;
 using Avalonia.Android;
 
 namespace Semi.Avalonia.Demo.Android;
@@ -13,4 +14,12 @@ namespace Semi.Avalonia.Demo.Android;
     ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.ScreenSize | ConfigChanges.UiMode)]
 public class MainActivity : AvaloniaMainActivity<App>
 {
+    protected override AppBuilder CustomizeAppBuilder(AppBuilder builder)
+    {
+        return base.CustomizeAppBuilder(builder)
+            .With(new AndroidPlatformOptions()
+            {
+                RenderingMode = [AndroidRenderingMode.Vulkan, AndroidRenderingMode.Egl, AndroidRenderingMode.Software]
+            });
+    }
 }

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

@@ -1,11 +1,13 @@
-using System;
+using Avalonia;
-using Avalonia;
 using Avalonia.Dialogs;
 using Avalonia.Media;
+using System;
+using System.Linq;
+using System.Threading;
 
 namespace Semi.Avalonia.Demo.Desktop;
 
-sealed class Program
+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
@@ -14,13 +16,13 @@ sealed class Program
     public static void Main(string[] args) => BuildAvaloniaApp()
         .With(new FontManagerOptions
         {
-            FontFallbacks =
+            FontFallbacks = new[]
-            [
+            {
                 new FontFallback
                 {
                     FontFamily = new FontFamily("Microsoft YaHei")
                 }
-            ]
+            }
         })
         .StartWithClassicDesktopLifetime(args);
 
@@ -31,4 +33,4 @@ sealed class Program
             .UsePlatformDetect()
             .With(new Win32PlatformOptions())
             .LogToTrace();
-}
+}

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

@@ -5,8 +5,10 @@
         <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'))">
@@ -19,14 +21,16 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <TrimmerRootDescriptor Include="Roots.xml"/>
+        <TrimmerRootDescriptor Include="Roots.xml" />
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
+        <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
     </ItemGroup>
 
     <ItemGroup>
-        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj"/>
+        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
     </ItemGroup>
 </Project>

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

@@ -7,7 +7,7 @@ using Avalonia.Dialogs;
 
 namespace Semi.Avalonia.Demo.Drm;
 
-sealed class Program
+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

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

@@ -5,8 +5,10 @@
         <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'))">
@@ -19,15 +21,17 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <TrimmerRootDescriptor Include="Roots.xml"/>
+        <TrimmerRootDescriptor Include="Roots.xml" />
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)"/>
+        <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)" />
     </ItemGroup>
 
     <ItemGroup>
-        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj"/>
+        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
     </ItemGroup>
 </Project>

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

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

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

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

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

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

demo/Semi.Avalonia.Demo/App.axaml

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

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

@@ -2,7 +2,6 @@ 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;
@@ -12,7 +11,6 @@ public partial class App : Application
     public override void Initialize()
     {
         AvaloniaXamlLoader.Load(this);
-        this.DataContext = new ApplicationViewModel();
     }
 
     public override void OnFrameworkInitializationCompleted()
@@ -30,7 +28,6 @@ public partial class App : Application
                 break;
         }
 
-        this.RegisterFollowSystemTheme();
         base.OnFrameworkInitializationCompleted();
     }
 }

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

@@ -1,143 +0,0 @@
-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.axaml

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

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

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

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

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

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

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

@@ -3,19 +3,20 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
     xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
-    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
     x:CompileBindings="True"
     x:DataType="viewModels:FunctionalColorGroupViewModel">
+    <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type controls:FunctionalColorGroupControl}" TargetType="controls:FunctionalColorGroupControl">
-        <Setter Property="Template">
+        <!--  Add Resources Here  -->
-            <ControlTemplate TargetType="controls:FunctionalColorGroupControl">
+        <Setter Property="controls:FunctionalColorGroupControl.Template">
+            <ControlTemplate x:DataType="viewModels:FunctionalColorGroupViewModel" TargetType="controls:FunctionalColorGroupControl">
                 <Grid RowDefinitions="Auto, *">
-                    <SelectableTextBlock
+                    <TextBlock
                         Grid.Row="0"
                         Margin="0,16,0,0"
                         Classes="H3"
                         Text="{TemplateBinding Title}"
-                        Theme="{DynamicResource TitleSelectableTextBlock}" />
+                        Theme="{DynamicResource TitleTextBlock}" />
                     <TabControl Grid.Row="1">
                         <TabItem Header="Light">
                             <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightColors}">
@@ -31,21 +32,27 @@
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
-                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding ResourceKey}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ColorItemViewModel"
+                                        Binding="{Binding ColorDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Name" />
                                     <DataGridTemplateColumn Width="100" Header="Hex">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding Hex}" />
                                             </DataTemplate>
@@ -55,29 +62,13 @@
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
+                                                    HorizontalAlignment="Right"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding Brush.Opacity}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
-                                    <DataGridTextColumn
-                                        Width="*"
-                                        x:DataType="viewModels:ColorItemViewModel"
-                                        Binding="{Binding ColorDisplayName}"
-                                        CanUserSort="False"
-                                        Header="Description" />
-                                    <DataGridTemplateColumn Width="100" Header="CopyText">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
-                                                <Button
-                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
-                                                    CommandParameter="{Binding CopyText}"
-                                                    Theme="{DynamicResource  IconBorderlessButton}"
-                                                    Content="{StaticResource SemiIconCopy}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
                                 </DataGrid.Columns>
                             </DataGrid>
                         </TabItem>
@@ -95,21 +86,27 @@
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
-                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding ResourceKey}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ColorItemViewModel"
+                                        Binding="{Binding ColorDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Name" />
                                     <DataGridTemplateColumn Width="100" Header="Hex">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding Hex}" />
                                             </DataTemplate>
@@ -119,29 +116,13 @@
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
+                                                    HorizontalAlignment="Right"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding Brush.Opacity}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
-                                    <DataGridTextColumn
-                                        Width="*"
-                                        x:DataType="viewModels:ColorItemViewModel"
-                                        Binding="{Binding ColorDisplayName}"
-                                        CanUserSort="False"
-                                        Header="Description" />
-                                    <DataGridTemplateColumn Width="100" Header="CopyText">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
-                                                <Button
-                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
-                                                    CommandParameter="{Binding CopyText}"
-                                                    Theme="{DynamicResource  IconBorderlessButton}"
-                                                    Content="{StaticResource SemiIconCopy}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
                                 </DataGrid.Columns>
                             </DataGrid>
                         </TabItem>
@@ -150,4 +131,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

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

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

@@ -1,41 +0,0 @@
-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

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

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

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

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

@@ -2,7 +2,8 @@
     x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:semi="https://irihi.tech/semi"
+    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker;assembly=Semi.Avalonia.ColorPicker"
+    xmlns:controls="using:Avalonia.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     d:DesignHeight="1450"
@@ -10,71 +11,50 @@
     mc:Ignorable="d">
     <ScrollViewer>
         <StackPanel Spacing="20">
-            <StackPanel Orientation="Horizontal" Spacing="20">
+            <StackPanel
+                VerticalAlignment="Top"
+                Orientation="Horizontal"
+                Spacing="20">
                 <ColorView Name="Test" ColorSpectrumShape="Ring" />
                 <ColorView ColorSpectrumShape="Box" />
                 <ColorView Palette="{DynamicResource SemiColorPalette}" />
             </StackPanel>
-            <StackPanel Orientation="Horizontal">
+            <StackPanel
+                VerticalAlignment="Top"
+                Orientation="Horizontal">
                 <ColorView
                     Name="SimpleColorViewTest"
-                    HsvColor="hsv(180,80%,70%)"
+                    Theme="{StaticResource SimpleColorView}"
                     IsAlphaVisible="True"
-                    Theme="{StaticResource SimpleColorView}" />
+                    HsvColor="hsv(120,11%,10%)" />
                 <StackPanel>
                     <TextBlock Text="{Binding #SimpleColorViewTest.HsvColor}" />
                     <TextBlock Text="{Binding #SimpleColorViewTest.Color}" />
                 </StackPanel>
             </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="8">
+            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                 <ColorPicker ColorSpectrumShape="Ring">
                     <ColorPicker.Palette>
-                        <FlatHalfColorPalette />
+                        <controls:FlatHalfColorPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
                 <ColorPicker ColorSpectrumShape="Box">
                     <ColorPicker.Palette>
-                        <semi:SemiColorLightPalette />
+                        <colorPicker: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 ColorSpectrumShape="Box" Theme="{DynamicResource HexColorPicker}">
-                <ColorPicker
+                    <ColorPicker.Palette>
-                    Theme="{StaticResource SimpleColorPicker}"
+                        <colorPicker:SemiColorLightPalette />
-                    HsvColor="hsv(180,80%,70%)" />
+                    </ColorPicker.Palette>
-                <ColorPicker
+                </ColorPicker>
-                    Theme="{StaticResource HexSimpleColorPicker}"
+            </StackPanel>
-                    HsvColor="hsv(180,80%,70%)" />
+            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
+                <ColorPicker Theme="{StaticResource SimpleColorPicker}"
+                             HsvColor="hsv(120,11%,10%)" />
+                <ColorPicker Theme="{StaticResource HexSimpleColorPicker}"
+                             HsvColor="hsv(120,11%,10%)" />
             </StackPanel>
         </StackPanel>
     </ScrollViewer>

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

@@ -27,15 +27,6 @@
         <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,6 +3,7 @@
     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,9 +15,8 @@
         <TabItem Header="DataGrid">
            <Grid RowDefinitions="Auto, *">
                <StackPanel Grid.Row="0" Orientation="Horizontal">
-                   <ToggleSwitch Content="Enable" Name="enable" IsChecked="True" />
+                   <ToggleSwitch Content="Disable" Name="DisableToggle" />
-                   <ToggleSwitch Content="Inset Content" Name="inset" />
+                   <ToggleSwitch Content="ScrollViewerHide" Name="ScrollViewerHide" />
-                   <ToggleSwitch Content="ScrollBar Auto Hide" Name="autohide" />
                </StackPanel>
                <DataGrid Grid.Row="1"
                          Margin="8"
@@ -25,9 +25,8 @@
                          CanUserSortColumns="True"
                          HeadersVisibility="All"
                          IsReadOnly="True"
-                         Classes.InsetContent="{Binding #inset.IsChecked}"
+                         ScrollViewer.AllowAutoHide="{Binding #ScrollViewerHide.IsChecked}"
-                         ScrollViewer.AllowAutoHide="{Binding #autohide.IsChecked}"
+                         IsEnabled="{Binding #DisableToggle.IsChecked}"
-                         IsEnabled="{Binding #enable.IsChecked}"
                          ItemsSource="{Binding GridData1}">
                    <DataGrid.Columns>
                        <DataGridTextColumn
@@ -102,7 +101,7 @@
                 </DataGrid.Columns>
             </DataGrid>
         </TabItem>
-        <TabItem Name="EditableTab" Header="Editable">
+        <TabItem x:Name="EditableTab" Header="Editable">
             <Grid Margin="8" RowDefinitions="Auto,*,Auto">
                 <StackPanel
                     Grid.Row="0"
@@ -110,14 +109,14 @@
                     Spacing="4">
                     <TextBlock VerticalAlignment="Center" Text="FontSize:" />
                     <Slider
-                        Name="FontSizeSlider"
+                        x:Name="FontSizeSlider"
                         Width="100"
                         VerticalAlignment="Center"
                         Maximum="30"
                         Minimum="5"
                         Value="14" />
                     <CheckBox
-                        Name="IsThreeStateCheckBox"
+                        x:Name="IsThreeStateCheckBox"
                         Content="IsThreeState"
                         IsChecked="False" />
                 </StackPanel>

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

@@ -1,5 +1,5 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.GridSplitterDemo"
+    x:Class="Semi.Avalonia.Demo.Pages.GridSplitter"
     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="{DynamicResource SemiGrey0Color}"
+                Background="#FEFBCB"
                 CornerRadius="10" />
             <GridSplitter Grid.Row="1" ShowsPreview="True" />
             <Border
                 Grid.Row="2"
                 HorizontalAlignment="Stretch"
-                Background="{DynamicResource SemiGrey0Color}"
+                Background="#FEFBCB"
                 CornerRadius="10" />
         </Grid>
         <Grid
@@ -29,13 +29,13 @@
             ColumnDefinitions="*, Auto, *">
             <Border
                 HorizontalAlignment="Stretch"
-                Background="{DynamicResource SemiGrey0Color}"
+                Background="#FEFBCB"
                 CornerRadius="10" />
             <GridSplitter Grid.Column="1" ShowsPreview="True" />
             <Border
                 Grid.Column="2"
                 HorizontalAlignment="Stretch"
-                Background="{DynamicResource SemiGrey0Color}"
+                Background="#FEFBCB"
                 CornerRadius="10" />
         </Grid>
     </StackPanel>

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

@@ -1,11 +1,12 @@
+using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 
-public partial class GridSplitterDemo : UserControl
+public partial class GridSplitter : UserControl
 {
-    public GridSplitterDemo()
+    public GridSplitter()
     {
         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="1450"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Semi.Avalonia.Demo.Pages.HeaderedContentControlDemo">
     <ScrollViewer>
         <StackPanel HorizontalAlignment="Left" Spacing="20">
@@ -27,18 +27,12 @@
             </WrapPanel>
             <TextBlock>GroupBox Theme</TextBlock>
             <HeaderedContentControl
-                Theme="{DynamicResource GroupBox}"
                 HorizontalAlignment="Left"
-                MaxWidth="360">
+                Theme="{DynamicResource GroupBox}"
-                <HeaderedContentControl.Header>
+                Header="Semi Design"
-                    <Panel>
+                Width="400"
-                        <SelectableTextBlock Text="Semi Design" />
+                Height="200">
-                        <HyperlinkButton HorizontalAlignment="Right" Content="更多" />
+                <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</TextBlock>
-                    </Panel>
-                </HeaderedContentControl.Header>
-                <HeaderedContentControl.Content>
-                    <SelectableTextBlock Text="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。" />
-                </HeaderedContentControl.Content>
             </HeaderedContentControl>
         </StackPanel>
     </ScrollViewer>

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

@@ -1,328 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             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

@@ -1,24 +0,0 @@
-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,22 +8,36 @@
     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 Classes="OnlyIcon" NavigateUri="https://www.irihi.tech/" />
+            <HyperlinkButton Height="20" NavigateUri="http://www.irihi.tech/">
-            <HyperlinkButton Classes="OnlyIcon" NavigateUri="https://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>
         </StackPanel>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -1,95 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             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

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

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

@@ -119,11 +119,11 @@
                     <StackPanel Spacing="20">
                         <TextBlock Text="Theme: CheckGroupListBox"/>
                         <ListBox
-                            SelectionMode="Multiple,Toggle"
+                            SelectionMode="Multiple"
                             Theme="{DynamicResource CheckGroupListBox}"
                             ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
                         <ListBox Theme="{DynamicResource CheckGroupListBox}"
-                                 SelectionMode="Multiple,Toggle"
+                                 SelectionMode="Multiple"
                                  IsEnabled="False">
                             <ListBoxItem IsSelected="True">Avalonia</ListBoxItem>
                             <ListBoxItem>WPF</ListBoxItem>
@@ -131,11 +131,11 @@
 
                         <TextBlock Text="Theme: CardCheckGroupListBox"/>
                         <ListBox
-                            SelectionMode="Multiple,Toggle"
+                            SelectionMode="Multiple"
                             Theme="{DynamicResource CardCheckGroupListBox}"
                             ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
                         <ListBox Theme="{DynamicResource CardCheckGroupListBox}"
-                                 SelectionMode="Multiple,Toggle"
+                                 SelectionMode="Multiple"
                                  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="OpenFileButton" Content="Open File" />
+        <Button Name="openFileDialog">Open File</Button>
-        <Button Name="SelectFolderButton" Content="Select Folder" />
+        <Button Name="selectFolderDialog">Select Folder</Button>
-        <Button Name="SaveFileButton" Content="Save File" />
+        <Button Name="saveFileDialog">Save File</Button>
     </StackPanel>
 </UserControl>

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

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

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

@@ -8,7 +8,7 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <StackPanel Spacing="20">
-        <UniformGrid Rows="2" Columns="3" Width="500" HorizontalAlignment="Left">
+        <UniformGrid Rows="3" Columns="3" Width="500" HorizontalAlignment="Left">
             <UniformGrid.Styles>
                 <Style Selector="RadioButton">
                     <Setter Property="Theme" Value="{DynamicResource PureCardRadioButton}" />

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

@@ -31,19 +31,19 @@
                 <PathIcon
                     Width="32"
                     Height="32"
-                    Data="{StaticResource SemiIconSemiLogo}" />
+                    Data="M10.6201 17.5C6.06377 17.5 2.37012 13.8063 2.37012 9.25C2.37012 4.69365 6.06377 1 10.6201 1V17.5ZM13.3701 6.5C17.9265 6.5 21.6201 10.1936 21.6201 14.75C21.6201 19.3063 17.9265 23 13.3701 23V6.5Z" />
                 <PathIcon
                     Width="10"
                     Height="10"
                     Margin="20,0"
-                    Data="{StaticResource SemiIconPlus}" />
+                    Data="M20.5 13.5C21.3284 13.5 22 12.8284 22 12C22 11.1716 21.3284 10.5 20.5 10.5L13.5 10.5L13.5 3.5C13.5 2.67157 12.8284 2 12 2C11.1716 2 10.5 2.67157 10.5 3.5L10.5 10.5L3.5 10.5C2.67157 10.5 2 11.1716 2 12C2 12.8284 2.67157 13.5 3.5 13.5L10.5 13.5V20.5C10.5 21.3284 11.1716 22 12 22C12.8284 22 13.5 21.3284 13.5 20.5V13.5L20.5 13.5Z" />
                 <Image Width="32" Height="32">
                     <Image.Source>
                         <DrawingImage>
                             <DrawingGroup>
-                                <GeometryDrawing Brush="#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="#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="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="#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="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" />
+                                <GeometryDrawing Brush="#F9F9FB" Geometry="M18.105 42.8805C18.105 45.3803 16.0785 47.4068 13.5787 47.4068C11.0789 47.4068 9.05237 45.3803 9.05237 42.8805C9.05237 40.3807 11.0789 38.3542 13.5787 38.3542C16.0785 38.3542 18.105 40.3807 18.105 42.8805Z" />
                             </DrawingGroup>
                         </DrawingImage>
                     </Image.Source>
@@ -234,7 +234,7 @@
                             VerticalAlignment="Top"
                             Palette="{DynamicResource SemiColorPalette}"
                             SelectedIndex="2"
-                            Color="#0D6EFD" />
+                            Color="#8B44AC" />
                         <StackPanel Width="300" Margin="8">
                             <StackPanel Orientation="Horizontal">
                                 <Slider

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

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

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

@@ -14,6 +14,16 @@
     <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"
@@ -23,12 +33,11 @@
         PanePlacement="Right">
         <SplitView.Pane>
             <StackPanel>
-                <ToggleSwitch
+                <ToggleButton
                     Name="toggle"
                     HorizontalAlignment="Right"
                     IsChecked="True"
-                    Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                    Theme="{DynamicResource SplitViewToggleButton}" />
-                    Content="{StaticResource SemiIconSidebar}" />
                 <Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
                     <Panel>
                         <TextBlock
@@ -106,6 +115,7 @@
                     <ItemsControl ItemsSource="{Binding FunctionalColors}">
                         <ItemsControl.ItemTemplate>
                             <DataTemplate>
+                                <!--    -->
                                 <controls:FunctionalColorGroupControl
                                     Title="{Binding Title}"
                                     DarkColors="{Binding DarkColors}"
@@ -113,20 +123,8 @@
                             </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,6 +1,8 @@
 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;
 
@@ -11,23 +13,17 @@ 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 = this.DataContext as PaletteDemoViewModel;
+        PaletteDemoViewModel? vm = new PaletteDemoViewModel();
-        await Dispatcher.UIThread.InvokeAsync(() => { vm?.InitializeResources(); });
+        await Dispatcher.UIThread.InvokeAsync(() =>
-    }
-
-    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());
+            vm.InitializeResources();
-        }
+        });
+        DataContext = vm;
     }
 }

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

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

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

@@ -9,22 +9,66 @@
     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">
-                <UniformGrid
+                <Grid RowDefinitions="Auto,Auto"
-                    Rows="2" Columns="2"
+                      ColumnDefinitions="Auto,Auto"
-                    Width="300" Height="300">
+                      Width="300" Height="300">
-                    <Rectangle Fill="{DynamicResource SemiYellow2}" />
+                    <Rectangle
-                    <Rectangle Fill="{DynamicResource SemiBlue2}" />
+                        Grid.Row="0" Grid.Column="0"
-                    <Rectangle Fill="{DynamicResource SemiPink2}" />
+                        Width="150"
-                    <Rectangle Fill="{DynamicResource SemiGreen2}" />
+                        Height="150"
-                </UniformGrid>
+                        Fill="{DynamicResource SemiYellow2}" />
+                    <Rectangle
+                        Grid.Row="0" Grid.Column="1"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiBlue2}" />
+                    <Rectangle
+                        Grid.Row="1" Grid.Column="0"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiPink2}" />
+                    <Rectangle
+                        Grid.Row="1" Grid.Column="1"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiGreen2}" />
+                </Grid>
+            </ScrollViewer>
+            <ScrollViewer
+                Width="200"
+                Height="200"
+                Margin="10"
+                HorizontalScrollBarVisibility="Auto"
+                Theme="{DynamicResource StaticScrollViewer}">
+                <Grid RowDefinitions="Auto,Auto"
+                      ColumnDefinitions="Auto,Auto"
+                      Width="300" Height="300">
+                    <Rectangle
+                        Grid.Row="0" Grid.Column="0"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiYellow2}" />
+                    <Rectangle
+                        Grid.Row="0" Grid.Column="1"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiBlue2}" />
+                    <Rectangle
+                        Grid.Row="1" Grid.Column="0"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiPink2}" />
+                    <Rectangle
+                        Grid.Row="1" Grid.Column="1"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiGreen2}" />
+                </Grid>
             </ScrollViewer>
         </StackPanel>
     </ScrollViewer>

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

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

@@ -11,6 +11,11 @@
     <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">
@@ -21,7 +26,8 @@
                         Content="IsPaneOpen" />
                     <ToggleSwitch
                         Grid.Row="0" Grid.Column="1"
-                        Name="PaneOpenButton" />
+                        Name="PaneOpenButton"
+                        IsChecked="{Binding #SplitView.IsPaneOpen}" />
 
                     <Label
                         Grid.Row="1" Grid.Column="0"
@@ -29,7 +35,8 @@
                         Content="UseLightDismissOverlayMode" />
                     <ToggleSwitch
                         Grid.Row="1" Grid.Column="1"
-                        Name="UseLightDismissOverlayModeButton" />
+                        Name="UseLightDismissOverlayModeButton"
+                        IsChecked="{Binding #SplitView.UseLightDismissOverlayMode}" />
 
                     <Label
                         Grid.Row="2" Grid.Column="0"
@@ -37,9 +44,9 @@
                         Content="Placement" />
                     <ToggleSwitch
                         Grid.Row="2" Grid.Column="1"
-                        Name="PanePlacementButton"
                         OffContent="Left"
-                        OnContent="Right" />
+                        OnContent="Right"
+                        IsChecked="{Binding #SplitView.PanePlacement}" />
 
                     <Label
                         Grid.Row="3" Grid.Column="0"
@@ -49,8 +56,8 @@
                         Grid.Row="3" Grid.Column="1"
                         Name="DisplayModeSelector"
                         HorizontalAlignment="Stretch"
-                        ItemsSource="{x:Static pages:SplitViewDemoViewModel.DisplayModes}"
+                        ItemsSource="{Binding DisplayModes}"
-                        SelectedItem="{x:Static SplitViewDisplayMode.CompactInline}" />
+                        SelectedIndex="{Binding #SplitView.DisplayMode}" />
 
                     <Label
                         Grid.Row="4" Grid.Column="0"
@@ -63,7 +70,7 @@
                         Minimum="0"
                         TickFrequency="1"
                         IsSnapToTickEnabled="True"
-                        Value="48" />
+                        Value="{Binding #SplitView.CompactPaneLength}" />
 
                     <Label
                         Grid.Row="5" Grid.Column="0"
@@ -76,209 +83,115 @@
                         Minimum="128"
                         TickFrequency="1"
                         IsSnapToTickEnabled="True"
-                        Value="256" />
+                        Value="{Binding #SplitView.OpenPaneLength}" />
                 </Grid>
             </Border>
-            <TabControl Grid.Column="0">
+            <Border
-                <TabItem Header="Default">
+                Grid.Column="0"
-                    <Border
+                BorderBrush="{DynamicResource SemiGrey1}"
-                        BorderBrush="{DynamicResource SemiGrey1}"
+                BorderThickness="1">
-                        BorderThickness="1">
+                <SplitView
-                        <SplitView
+                    Name="SplitView"
-                            Name="SplitView"
+                    DisplayMode="CompactOverlay"
-                            IsPaneOpen="{Binding #PaneOpenButton.IsChecked,Mode=TwoWay}"
+                    CompactPaneLength="48"
-                            UseLightDismissOverlayMode="{Binding #UseLightDismissOverlayModeButton.IsChecked}"
+                    OpenPaneLength="256">
-                            PanePlacement="{Binding #PanePlacementButton.IsChecked}"
+                    <SplitView.Background>
-                            DisplayMode="{Binding #DisplayModeSelector.SelectedItem}"
+                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
-                            CompactPaneLength="{Binding #CompactPaneLengthSlider.Value}"
+                            <GradientStop Color="#6b4c1b" Offset="0" />
-                            OpenPaneLength="{Binding #OpenPaneLengthSlider.Value}">
+                            <GradientStop Color="#291e10" Offset="1" />
-                            <SplitView.Background>
+                        </LinearGradientBrush>
-                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                    </SplitView.Background>
-                                    <GradientStop Color="#6b4c1b" Offset="0" />
+                    <SplitView.Pane>
-                                    <GradientStop Color="#291e10" Offset="1" />
+                        <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" />
                                 </LinearGradientBrush>
-                            </SplitView.Background>
+                            </Arc.Stroke>
-                            <SplitView.Pane>
+                        </Arc>
-                                <Grid RowDefinitions="Auto,*,Auto">
+                        <Arc
-                                    <TextBlock
+                            Width="294"
-                                        Grid.Row="0"
+                            Height="294"
-                                        Name="PaneHeader"
+                            StartAngle="0"
-                                        Margin="8,12"
+                            SweepAngle="360"
-                                        FontWeight="Bold"
+                            StrokeJoin="Round"
-                                        Text="Playlist" />
+                            StrokeLineCap="Round"
-                                    <ListBox
+                            StrokeThickness="4"
-                                        Grid.Row="1"
+                            Stroke="Black" />
-                                        ItemsSource="{Binding Songs}" />
+                        <Arc
-                                    <ToggleSwitch
+                            Width="310"
-                                        Grid.Row="2"
+                            Height="310"
-                                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                            StartAngle="0"
-                                        Content="{StaticResource SemiIconSidebar}"
+                            SweepAngle="360"
-                                        HorizontalAlignment="Left"
+                            StrokeJoin="Round"
-                                        IsChecked="{Binding #SplitView.IsPaneOpen}">
+                            StrokeLineCap="Round"
-                                    </ToggleSwitch>
+                            StrokeThickness="10"
-                                </Grid>
+                            Stroke="#C6CACD"
-                            </SplitView.Pane>
+                            Opacity="0.1" />
+                    </Panel>
 
-                            <Panel>
+                </SplitView>
-                                <Panel.Styles>
+            </Border>
-                                    <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 static ObservableCollection<SplitViewDisplayMode> DisplayModes { get; set; } =
+    public ObservableCollection<SplitViewDisplayMode> DisplayModes { get; set; } =
     [
         SplitViewDisplayMode.Inline,
         SplitViewDisplayMode.CompactInline,

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

@@ -11,122 +11,85 @@
     x:DataType="vm:TabControlDemoViewModel"
     mc:Ignorable="d">
     <ScrollViewer>
-        <StackPanel>
+        <StackPanel Spacing="20">
-            <Border
+            <Border Theme="{StaticResource CardBorder}">
-                Margin="8"
+                <TabControl TabStripPlacement="Top">
-                HorizontalAlignment="Left"
+                    <TabItem Content="Hello 1" Header="Tab 1" />
-                Theme="{StaticResource RadioButtonGroupBorder}">
+                    <TabItem Content="Hello 2" Header="Tab 2" />
-                <ListBox Name="place" Theme="{StaticResource ButtonRadioGroupListBox}">
+                    <TabItem Content="Hello 3" Header="Tab 3" />
-                    <Dock>Left</Dock>
+                    <TabItem Content="中文内容" Header="中文中文" />
-                    <Dock>Bottom</Dock>
+                    <TabItem
-                    <Dock>Right</Dock>
+                        Content="Hello 4"
-                    <Dock>Top</Dock>
+                        Header="Tab 4"
-                </ListBox>
+                        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}" />
             </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

@@ -1,94 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             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

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

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

@@ -4,56 +4,80 @@
     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" InnerLeftContent="https://" InnerRightContent=".com" />
+            <TextBox Width="300" Classes="Large" />
-            <TextBox Width="300" Classes="clearButton" Text="click to clear" />
+            <TextBox Width="300" Classes="Small" />
-            <TextBox Width="300" Classes="revealPasswordButton" Text="123456" />
+            <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"
                 Classes="ClearButton RevealPasswordButton"
-                InnerLeftContent="https://"
+                PasswordChar="*"
-                InnerRightContent=".com"
                 Text="123456" />
+            <TextBox
+                Width="500"
+                InnerLeftContent="http://"
+                InnerRightContent=".com"
+                IsEnabled="False" />
+            <TextBox
+                Width="500"
+                Classes="Bordered"
+                InnerLeftContent="http://"
+                InnerRightContent=".com" />
+            <TextBox
+                Width="500"
+                Classes="Bordered"
+                InnerLeftContent="http://"
+                InnerRightContent=".com"
+                IsEnabled="False" />
             <StackPanel Orientation="Horizontal">
                 <TextBox
-                    Width="100"
+                    Width="150"
                     Classes="Large"
                     Watermark="Large" />
                 <TextBox
-                    Width="100"
+                    Width="150"
                     Watermark="Default" />
                 <TextBox
-                    Width="100"
+                    Width="150"
                     Classes="Small"
                     Watermark="Small" />
             </StackPanel>
 
             <StackPanel Orientation="Horizontal">
                 <TextBox
-                    Width="100"
+                    Width="150"
                     IsEnabled="False"
                     Watermark="Disabled" />
                 <TextBox
-                    Width="100"
+                    Width="150"
                     Classes="Bordered"
                     Watermark="Bordered" />
                 <TextBox
-                    Width="100"
+                    Width="150"
                     Classes="Bordered"
                     IsEnabled="False" />
             </StackPanel>
-            <TextBox Width="300" Classes="TextArea" Watermark="TextArea TextBox" />
+            <TextBox Width="300" Classes="TextArea" />
             <TextBox
                 Width="300"
                 Theme="{StaticResource LooklessTextBox}"
                 Watermark="Lookless TextBox"
-                InnerLeftContent="https://"
+                InnerLeftContent="http://"
                 InnerRightContent=".com" />
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>

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

@@ -4,36 +4,18 @@
     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">
-    <Design.DataContext>
+    <Grid>
-        <vm:ThemeVariantDemoViewModel />
+        <ThemeVariantScope Name="scope">
-    </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>
-    </StackPanel>
+    </Grid>
-</UserControl>
+</UserControl>

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

@@ -1,7 +1,8 @@
-using System.Collections.Generic;
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Avalonia.Markup.Xaml;
 using Avalonia.Styling;
-using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -10,22 +11,10 @@ public partial class ThemeVariantDemo : UserControl
     public ThemeVariantDemo()
     {
         InitializeComponent();
-        this.DataContext = new ThemeVariantDemoViewModel();
     }
-}
 
-public partial class ThemeVariantDemoViewModel : ObservableObject
+    private void Switch_OnIsCheckedChanged(object sender, RoutedEventArgs e)
-{
+    {
-    [ObservableProperty] private ThemeVariant? _selectedThemeVariant;
+        scope.RequestedThemeVariant = scope.ActualThemeVariant == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
-
+    }
-    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,7 +9,6 @@
     mc:Ignorable="d">
     <StackPanel Spacing="20">
         <TimePicker />
-        <TimePicker UseSeconds="True" />
         <TimePicker Classes="ClearButton" />
         <TimePicker MinuteIncrement="15" />
         <TimePicker ClockIdentifier="24HourClock" />

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

@@ -8,23 +8,22 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <StackPanel Spacing="8" Margin="20">
-        <StackPanel Orientation="Horizontal">
+        <ToggleSwitch
-            <StackPanel>
+            Content="Content"
-                <ToggleSwitch />
+            OffContent="OffContent"
-                <ToggleSwitch IsChecked="True" />
+            OnContent="OnContent" />
-            </StackPanel>
+        <ToggleSwitch
-            <StackPanel>
+            Content="Content"
-                <ToggleSwitch IsEnabled="False" />
+            IsChecked="True"
-                <ToggleSwitch IsChecked="True" IsEnabled="False" />
+            IsEnabled="False"
-            </StackPanel>
+            OffContent="OffContent"
-        </StackPanel>
+            OnContent="OnContent" />
-        <StackPanel Orientation="Horizontal">
+        <ToggleSwitch
-            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" />
+            Content="Content"
-            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsChecked="True" />
+            IsChecked="False"
-            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsEnabled="False" />
+            IsEnabled="False"
-            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsEnabled="False" IsChecked="True" />
+            OffContent="OffContent"
-        </StackPanel>
+            OnContent="OnContent" />
-
         <StackPanel Orientation="Horizontal">
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" />
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" IsChecked="True" />
@@ -45,8 +44,8 @@
         </StackPanel>
 
         <StackPanel Orientation="Horizontal">
-            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开"/>
-            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜"/>
         </StackPanel>
         <StackPanel Orientation="Horizontal">
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" IsChecked="True" />
@@ -61,39 +60,21 @@
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" Classes="Large" IsChecked="True" />
         </StackPanel>
 
-        <StackPanel Orientation="Horizontal">
+        <ToggleSwitch Theme="{DynamicResource ButtonToggleSwitch}">
-            <ToggleSwitch
+            <ToggleSwitch.OnContent>
-                HorizontalAlignment="Left"
+                <PathIcon
-                Padding="{StaticResource SemiThicknessTight}"
+                    Width="16"
-                Width="{StaticResource SemiSpacingExtraLoose}"
+                    Height="16"
-                Height="{StaticResource SemiSpacingExtraLoose}"
+                    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"
-                Theme="{DynamicResource ButtonToggleSwitch}"
+                    Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                Foreground="{DynamicResource ButtonDefaultTertiaryForeground}">
+            </ToggleSwitch.OnContent>
-                <ToggleSwitch.Content>
+            <ToggleSwitch.OffContent>
-                    <PathIcon
+                <PathIcon
-                        Theme="{DynamicResource InnerPathIcon}"
+                    Width="16"
-                        Data="{StaticResource SemiIconSidebar}" />
+                    Height="16"
-                </ToggleSwitch.Content>
+                    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"
-            </ToggleSwitch>
+                    Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-            <ToggleSwitch
+            </ToggleSwitch.OffContent>
-                HorizontalAlignment="Left"
+        </ToggleSwitch>
-                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

@@ -1,127 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             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

@@ -1,23 +0,0 @@
-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

@@ -1,94 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             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

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

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

@@ -1,30 +1,25 @@
 <Project Sdk="Microsoft.NET.Sdk">
     <PropertyGroup>
-        <TargetFramework>net8.0</TargetFramework>
+        <TargetFramework>netstandard2.0</TargetFramework>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
     </PropertyGroup>
-
+    
     <ItemGroup>
-        <AvaloniaResource Include="Assets\**"/>
+        <AvaloniaResource Include="Assets\**" />
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(DataGridVersion)"/>
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)">
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
-            <IncludeAssets Condition="'$(Configuration)' != 'Debug'">None</IncludeAssets>
+        <PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2" />
-            <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>
-        </PackageReference>
-        <PackageReference Include="CommunityToolkit.Mvvm" Version="$(CommunityToolkitVersion)"/>
     </ItemGroup>
 
     <ItemGroup>
-        <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj"/>
+      <ProjectReference Include="..\..\src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj" />
-        <ProjectReference Include="..\..\src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj"/>
+      <ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj" />
-        <ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj"/>
+      <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj" />
-        <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj"/>
     </ItemGroup>
 </Project>

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

@@ -1,111 +0,0 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
-    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
-    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
-    x:CompileBindings="True"
-    x:DataType="viewModels:ShadowGroupViewModel">
-    <ControlTheme x:Key="{x:Type controls:ShadowGroupControl}" TargetType="controls:ShadowGroupControl">
-        <Setter Property="Template">
-            <ControlTemplate TargetType="controls:ShadowGroupControl">
-                <Grid RowDefinitions="Auto, *">
-                    <SelectableTextBlock
-                        Grid.Row="0"
-                        Margin="0,16,0,0"
-                        Classes="H3"
-                        Text="{TemplateBinding Title}"
-                        Theme="{DynamicResource TitleSelectableTextBlock}" />
-                    <TabControl Grid.Row="1">
-                        <TabItem Header="Light">
-                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightShadows}">
-                                <DataGrid.Columns>
-                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <SelectableTextBlock
-                                                    Margin="12,0"
-                                                    VerticalAlignment="Center"
-                                                    Text="{Binding ResourceKey}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
-                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <SelectableTextBlock
-                                                    Margin="12,0"
-                                                    VerticalAlignment="Center"
-                                                    Text="{Binding BoxShadowValue}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
-                                    <DataGridTextColumn
-                                        Width="*"
-                                        x:DataType="viewModels:ShadowItemViewModel"
-                                        Binding="{Binding ShadowDisplayName}"
-                                        CanUserSort="False"
-                                        Header="Description" />
-                                    <DataGridTemplateColumn Width="100" Header="CopyText">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <Button
-                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
-                                                    CommandParameter="{Binding CopyText}"
-                                                    Theme="{DynamicResource  IconBorderlessButton}"
-                                                    Content="{StaticResource SemiIconCopy}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
-                                </DataGrid.Columns>
-                            </DataGrid>
-                        </TabItem>
-                        <TabItem Header="Dark">
-                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkShadows}">
-                                <DataGrid.Columns>
-                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <SelectableTextBlock
-                                                    Margin="12,0"
-                                                    VerticalAlignment="Center"
-                                                    Text="{Binding ResourceKey}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
-                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <SelectableTextBlock
-                                                    Margin="12,0"
-                                                    VerticalAlignment="Center"
-                                                    Text="{Binding BoxShadowValue}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
-                                    <DataGridTextColumn
-                                        Width="*"
-                                        x:DataType="viewModels:ShadowItemViewModel"
-                                        Binding="{Binding ShadowDisplayName}"
-                                        CanUserSort="False"
-                                        Header="Description" />
-                                    <DataGridTemplateColumn Width="100" Header="CopyText">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <Button
-                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
-                                                    CommandParameter="{Binding CopyText}"
-                                                    Theme="{DynamicResource  IconBorderlessButton}"
-                                                    Content="{StaticResource SemiIconCopy}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
-                                </DataGrid.Columns>
-                            </DataGrid>
-                        </TabItem>
-                    </TabControl>
-                </Grid>
-            </ControlTemplate>
-        </Setter>
-    </ControlTheme>
-</ResourceDictionary>

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

@@ -0,0 +1,44 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="NavigationTab" TargetType="TabControl">
+        <Setter Property="TabControl.Template">
+            <!--    -->
+            <ControlTemplate TargetType="TabControl">
+                <Border
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <DockPanel>
+                        <ScrollViewer DockPanel.Dock="Left" VerticalScrollBarVisibility="Auto">
+                            <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
+                                <ItemsPresenter Name="PART_ItemsPresenter">
+                                    <ItemsPresenter.ItemsPanel>
+                                        <ItemsPanelTemplate>
+                                            <StackPanel />
+                                        </ItemsPanelTemplate>
+                                    </ItemsPresenter.ItemsPanel>
+                                </ItemsPresenter>
+                                <Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+                            </Panel>
+                        </ScrollViewer>
+                        <ContentPresenter
+                            Name="PART_SelectedContentHost"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding SelectedContent}"
+                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
+                    </DockPanel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Width" Value="1" />
+            <Setter Property="VerticalAlignment" Value="Stretch" />
+            <Setter Property="HorizontalAlignment" Value="Left" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

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

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

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

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

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

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

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

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

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

@@ -8,14 +8,14 @@ using CommunityToolkit.Mvvm.Input;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
-public class DataGridDemoViewModel : ObservableObject
+public class DataGridDemoViewModel: ObservableObject
 {
     public ObservableCollection<Song> GridData1 { get; set; }
-
+    
     public DataGridCollectionView GridData2 { get; set; }
-
+    
     public ObservableCollection<SongViewModel> GridData3 { get; set; }
-
+    
     public RelayCommand AddCommand { get; set; }
 
     public DataGridDemoViewModel()
@@ -23,7 +23,7 @@ public class DataGridDemoViewModel : ObservableObject
         GridData1 = new ObservableCollection<Song>(Song.Songs);
         GridData2 = new DataGridCollectionView(Song.Songs);
         GridData2.GroupDescriptions.Add(new DataGridPathGroupDescription("Album"));
-        GridData3 = new ObservableCollection<SongViewModel>(Song.Songs.Take(10).Select(a => new SongViewModel()
+        GridData3 = new ObservableCollection<SongViewModel>(Song.Songs.Take(10).Select(a=>new SongViewModel()
         {
             Title = a.Title,
             Artist = a.Artist,
@@ -57,29 +57,11 @@ public class Song
         Album = album;
         CountOfComment = countOfComment;
         Url = $"https://music.163.com/song?id={netEaseId}";
+        
     }
 
-    public static List<string> Albums =>
+    public static List<Song> Songs { get; set; } = new List<Song>()
-    [
+    {
-        "A.S.I.A",
-        "饕餮人间",
-        "七步咙咚呛",
-        "大惊小怪",
-        "The ONE",
-        "以梦为马 (壮志骄阳版)",
-        "emo了",
-        "一眼万年",
-        "冲刺吧",
-        "爱的赏味期限",
-        "COSMIC ANTHEM / 手紙",
-        "世界晚安",
-        "明年也要好好长大",
-        "320万年前",
-        "W.O.R.L.D."
-    ];
-
-    public static List<Song> Songs =>
-    [
         new("好肚有肚(feat.李玲玉)", "熊猫堂ProducePandas", 2, 50, "A.S.I.A", 730, 1487039339),
         new("荒诞秀", "熊猫堂ProducePandas", 3, 15, "A.S.I.A", 639, 1487037601),
         new("长大", "熊猫堂ProducePandas", 4, 6, "A.S.I.A", 1114, 1487037690),
@@ -140,15 +122,41 @@ public class Song
         new("热带季风Remix", "熊猫堂ProducePandas", 3, 22, "W.O.R.L.D.", 23, 2063173319),
         new("加州梦境", "熊猫堂ProducePandas", 2, 56, "W.O.R.L.D.", 1662, 2063173324),
         new("渐近自由", "熊猫堂ProducePandas", 4, 19, "W.O.R.L.D.", 124, 2063173321),
-        new("世界所有的烂漫", "熊猫堂ProducePandas", 3, 30, "W.O.R.L.D.", 335, 2053388775)
+        new("世界所有的烂漫", "熊猫堂ProducePandas", 3, 30, "W.O.R.L.D.", 335, 2053388775),
-    ];
+    };
 }
 
-public partial class SongViewModel : ObservableObject
+public class SongViewModel: ObservableObject
 {
-    [ObservableProperty] private string? _title;
+    private string? _title;
-    [ObservableProperty] private string? _artist;
+    private string? _artist;
-    [ObservableProperty] private string? _album;
+    private string? _album;
-    [ObservableProperty] private int _countOfComment;
+    private int _countOfComment;
-    [ObservableProperty] private bool? _isSelected;
+    private bool? _isSelected;
+    public string? Title
+    {
+        get => _title;
+        set => SetProperty(ref _title, value);
+    }
+    public string? Artist
+    {
+        get => _artist;
+        set => SetProperty(ref _artist, value);
+    }
+    public string? Album
+    {
+        get => _album;
+        set => SetProperty(ref _album, value);
+    }
+    public int CountOfComment
+    {
+        get => _countOfComment;
+        set => SetProperty(ref _countOfComment, value);
+    }
+    public bool? IsSelected
+    {
+        get => _isSelected;
+        set => SetProperty(ref _isSelected, value);
+    }
+    
 }

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

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

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

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

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

@@ -1,60 +1,73 @@
 using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
-using System.Globalization;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 using Avalonia.Media;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Messaging;
-using Semi.Avalonia.Demo.Constant;
-using Semi.Avalonia.Demo.Converters;
-using Semi.Avalonia.Tokens.Palette;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
-public partial class PaletteDemoViewModel : ObservableObject
+public class PaletteDemoViewModel: ObservableObject
 {
     private readonly string[] _predefinedColorNames =
-    [
+    {
         "Red", "Pink", "Purple", "Violet", "Indigo",
         "Blue", "LightBlue", "Cyan", "Teal", "Green",
         "LightGreen", "Lime", "Yellow", "Amber", "Orange",
         "Grey"
-    ];
+    };
-
     private readonly IResourceDictionary? _lightResourceDictionary;
     private readonly IResourceDictionary? _darkResourceDictionary;
+    
+    private ColorItemViewModel _selectedColor = null!;
 
-    [ObservableProperty] private ColorItemViewModel? _selectedColor;
+    public ColorItemViewModel SelectedColor
+    {
+        get => _selectedColor;
+        set => SetProperty(ref _selectedColor, value);
+    }
+    
+    
+    private ObservableCollection<ColorListViewModel>? _lightLists;
+    public ObservableCollection<ColorListViewModel>? LightLists
+    {
+        get => _lightLists;
+        set => SetProperty(ref _lightLists, value);
+    }
+    private ObservableCollection<ColorListViewModel>? _darkLists;
+    public ObservableCollection<ColorListViewModel>? DarkLists
+    {
+        get => _darkLists;
+        set => SetProperty(ref _darkLists, value);
+    }
 
-    public ObservableCollection<ColorListViewModel> LightLists { get; set; } = [];
+    public ObservableCollection<FunctionalColorGroupViewModel> FunctionalColors { get; set; } = new();
-    public ObservableCollection<ColorListViewModel> DarkLists { get; set; } = [];
-    public ObservableCollection<FunctionalColorGroupViewModel> FunctionalColors { get; set; } = [];
-    public ObservableCollection<ShadowGroupViewModel> Shadows { get; set; } = [];
 
     public PaletteDemoViewModel()
     {
-        _lightResourceDictionary = new Light();
+        _lightResourceDictionary  = new Light.Palette();
-        _darkResourceDictionary = new Dark();
+        _darkResourceDictionary = new Dark.Palette();
-        WeakReferenceMessenger.Default.Register<ColorItemViewModel>(this, (_, item) => SelectedColor = item);
+        WeakReferenceMessenger.Default.Register<PaletteDemoViewModel, ColorItemViewModel>(this, OnClickColorItem);
     }
 
     public void InitializeResources()
     {
         InitializePalette();
         InitializeFunctionalColors();
-        InitializeShadows();
     }
 
     private void InitializePalette()
     {
+        LightLists = new ObservableCollection<ColorListViewModel>();
         foreach (var color in _predefinedColorNames)
         {
             ColorListViewModel s = new ColorListViewModel();
             s.Initialize(_lightResourceDictionary, color, true);
             LightLists.Add(s);
         }
-
+        DarkLists = new ObservableCollection<ColorListViewModel>();
         foreach (var color in _predefinedColorNames)
         {
             ColorListViewModel s = new ColorListViewModel();
@@ -65,91 +78,124 @@ public partial class PaletteDemoViewModel : ObservableObject
 
     private void InitializeFunctionalColors()
     {
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Primary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.PrimaryTokens));
-            "Primary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.PrimaryTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Secondary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SecondaryTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Tertiary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TertiaryTokens));
-            "Secondary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SecondaryTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Information", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.InformationTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Success", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SuccessTokens));
-            "Tertiary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TertiaryTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Warning", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.WarningTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Danger", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DangerTokens));
-            "Information", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.InformationTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Text", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TextTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Link", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.LinkTokens));
-            "Success", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SuccessTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Background", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BackgroundTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Fill", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.FillTokens));
-            "Warning", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.WarningTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Border", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BorderTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Disabled", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DisabledTokens));
-            "Danger", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DangerTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Text", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TextTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Link", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.LinkTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Background", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BackgroundTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Fill", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.FillTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Border", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BorderTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Disabled", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DisabledTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Others", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.OtherTokens));
     }
-
+    private void OnClickColorItem(PaletteDemoViewModel vm, ColorItemViewModel item)
-    private void InitializeShadows()
     {
-        Shadows.Add(new ShadowGroupViewModel(
+        SelectedColor = item;
-            "Shadow", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.ShadowTokens));
     }
 }
 
-public partial class ColorListViewModel : ObservableObject
+public class ColorListViewModel: ObservableObject
 {
-    public ObservableCollection<ColorItemViewModel> Color { get; set; } = [];
+    private ObservableCollection<ColorItemViewModel>? _colors;
 
-    [ObservableProperty] private string? _seriesName;
+    public ObservableCollection<ColorItemViewModel>? Color
+    {
+        get => _colors;
+        set => SetProperty(ref _colors, value);
+    }
 
+    private string? _seriesName;
+
+    public string? SeriesName
+    {
+        get => _seriesName;
+        set => SetProperty(ref _seriesName, value);
+    }
+    
     internal void Initialize(IResourceDictionary? resourceDictionary, string color, bool light)
     {
-        if (resourceDictionary is null) return;
+        if (resourceDictionary is null)
-
-        SeriesName = color;
-
-        for (var i = 0; i < 10; i++)
         {
-            var key = $"Semi{color}{i}";
+            return;
-            if (resourceDictionary.TryGetValue(key, out var value) && value is ISolidColorBrush brush)
+        }
+        SeriesName = color;
+        Color = new ObservableCollection<ColorItemViewModel>();
+        
+        for (int i = 0; i < 10; i++)
+        {
+            var key = "Semi" + color + i;
+            if (resourceDictionary.TryGetValue(key, out var value))
             {
-                var name = $"{color} {i}";
+                if (value is ISolidColorBrush brush)
-                var item = new ColorItemViewModel(name, brush, key, light, i);
+                {
-                item.ColorResourceKey = $"{item.ResourceKey}Color";
+                    string name = color + " " + i;
-                Color.Add(item);
+                    var item = new ColorItemViewModel(name, brush, key, light, i);
+                    item.ColorResourceKey = item.ResourceKey + "Color";
+                    Color.Add(item);
+                } 
             }
         }
     }
 }
 
-public partial class ColorItemViewModel : ObservableObject
+public class ColorItemViewModel : ObservableObject
 {
-    [ObservableProperty] private IBrush? _brush;
-    [ObservableProperty] private IBrush? _textBrush;
-    [ObservableProperty] private string? _colorDisplayName;
-    [ObservableProperty] private string? _resourceKey;
-    [ObservableProperty] private string? _colorResourceKey;
-    [ObservableProperty] private string? _hex;
 
-    public string CopyText =>
+    private IBrush _brush = null!;
-        $"""
+    public IBrush Brush
-         <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
+    {
-         """;
+        get => _brush;
+        set => SetProperty(ref _brush, value);
+    }
+    
+    private IBrush _textBrush = null!;
+    public IBrush TextBrush
+    {
+        get => _textBrush;
+        set => SetProperty(ref _textBrush, value);
+    }
 
-    public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light,
+    private string _colorDisplayName = null!;
-        int index)
+    public string ColorDisplayName
+    {
+        get => _colorDisplayName;
+        set => SetProperty(ref _colorDisplayName, value);
+    }
+
+    private string _resourceKey = null!;
+
+    public string ResourceKey
+    {
+        get => _resourceKey;
+        set => SetProperty(ref _resourceKey, value);
+    }
+
+    private string _colorResourceKey = null!;
+
+    public string ColorResourceKey
+    {
+        get => _colorResourceKey;
+        set => SetProperty(ref _colorResourceKey, value);
+    }
+
+    private string _hex = null!;
+
+    public string Hex
+    {
+        get => _hex;
+        set => SetProperty(ref _hex, value);
+    }
+    
+    public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light, int index)
     {
         ColorDisplayName = colorDisplayName;
         Brush = brush;
         ResourceKey = resourceKey;
-        var hex = ColorConverter.ToHex.Convert(brush.Color, typeof(string), false, CultureInfo.InvariantCulture);
+        Hex = brush.ToString().ToUpperInvariant();
-        Hex = hex as string ?? string.Empty;
         if ((light && index < 5) || (!light && index >= 5))
         {
             TextBrush = Brushes.Black;
@@ -161,18 +207,25 @@ public partial class ColorItemViewModel : ObservableObject
     }
 }
 
-public partial class FunctionalColorGroupViewModel : ObservableObject
+public class FunctionalColorGroupViewModel : ObservableObject
 {
-    [ObservableProperty] private string? _title;
+    private string _title = null!;
-    public ObservableCollection<ColorItemViewModel> LightColors { get; set; } = [];
+    public string Title
-    public ObservableCollection<ColorItemViewModel> DarkColors { get; set; } = [];
+    {
+        get => _title;
+        set => SetProperty(ref _title, value);
+    }
 
-    public FunctionalColorGroupViewModel(string title, IResourceDictionary? lightDictionary,
+    public ObservableCollection<ColorItemViewModel> LightColors { get; set; } = new();
-        IResourceDictionary? darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
+    public ObservableCollection<ColorItemViewModel> DarkColors { get; set; } = new();
+
+    public FunctionalColorGroupViewModel(string title, IResourceDictionary? lightDictionary, IResourceDictionary? darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
     {
         Title = title;
-        foreach (var (key, name) in tokens)
+        foreach (var token in tokens)
         {
+            string key = token.Item1;
+            string name = token.Item2;
             if (lightDictionary?.TryGetValue(key, out var lightValue) ?? false)
             {
                 if (lightValue is ISolidColorBrush lightBrush)
@@ -192,53 +245,125 @@ public partial class FunctionalColorGroupViewModel : ObservableObject
     }
 }
 
-public partial class ShadowItemViewModel : ObservableObject
+public static class ColorTokens
 {
-    [ObservableProperty] private string? _shadowDisplayName;
+    public static IReadOnlyList<Tuple<string, string>> PrimaryTokens { get; } = new List<Tuple<string, string>>
-    [ObservableProperty] private string? _resourceKey;
-    [ObservableProperty] private string? _boxShadowValue;
-
-    public string CopyText =>
-        $"""
-         <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
-         """;
-
-    public ShadowItemViewModel(string shadowDisplayName, BoxShadows boxShadows, string resourceKey)
     {
-        ShadowDisplayName = shadowDisplayName;
+        new ("SemiColorPrimary", "Primary"),
-        ResourceKey = resourceKey;
+        new ("SemiColorPrimaryPointerover", "Primary Pointerover"),
-        BoxShadowValue = boxShadows.ToString();
+        new ("SemiColorPrimaryActive", "Primary Active"),
-    }
+        new ("SemiColorPrimaryDisabled", "Primary Disabled"),
-}
+        new ("SemiColorPrimaryLight", "Primary Light"),
+        new ("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
+        new ("SemiColorPrimaryLightActive", "Primary Light Active"),
+    };
 
-public partial class ShadowGroupViewModel : ObservableObject
+    public static IReadOnlyList<Tuple<string, string>> SecondaryTokens { get; } = new List<Tuple<string, string>>
-{
-    [ObservableProperty] private string? _title;
-    public ObservableCollection<ShadowItemViewModel> LightShadows { get; set; } = [];
-    public ObservableCollection<ShadowItemViewModel> DarkShadows { get; set; } = [];
-
-
-    public ShadowGroupViewModel(string title, IResourceDictionary? lightDictionary,
-        IResourceDictionary? darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
     {
-        Title = title;
+        new ("SemiColorSecondary", "Secondary"),
-        foreach (var (key, name) in tokens)
+        new ("SemiColorSecondaryPointerover", "Secondary Pointerover"),
-        {
+        new ("SemiColorSecondaryActive", "Secondary Active"),
-            if (lightDictionary?.TryGetValue(key, out var lightValue) ?? false)
+        new ("SemiColorSecondaryDisabled", "Secondary Disabled"),
-            {
+        new ("SemiColorSecondaryLight", "Secondary Light"),
-                if (lightValue is BoxShadows lightShadow)
+        new ("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"),
-                {
+        new ("SemiColorSecondaryLightActive", "Secondary Light Active"),
-                    LightShadows.Add(new ShadowItemViewModel(name, lightShadow, key));
+    };
-                }
+    
-            }
+    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"),
+    };
 
-            if (darkDictionary?.TryGetValue(key, out var darkValue) ?? false)
+    public static IReadOnlyList<Tuple<string, string>> TextTokens { get; } = new List<Tuple<string, string>>
-            {
+    {
-                if (darkValue is BoxShadows darkShadow)
+        new ("SemiColorText0", "Text 0"),
-                {
+        new ("SemiColorText1", "Text 1"),
-                    DarkShadows.Add(new ShadowItemViewModel(name, darkShadow, key));
+        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"),
+    };
+    
+    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"),
+    };
+    
 }

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

@@ -4,7 +4,12 @@ using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
-public class TabControlDemoViewModel : ObservableObject
+public class TabControlDemoViewModel: ObservableObject
 {
-    public ObservableCollection<string> Items => new(Enumerable.Range(1, 200).Select(a => "Tab " + a));
+    public ObservableCollection<string> Items { get; set; }
+
+    public TabControlDemoViewModel()
+    {
+        Items = new ObservableCollection<string>(Enumerable.Range(1, 200).Select(a => "Tab " + a));
+    }
 }

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

@@ -1,10 +0,0 @@
-using System.Collections.ObjectModel;
-using System.Linq;
-using CommunityToolkit.Mvvm.ComponentModel;
-
-namespace Semi.Avalonia.Demo.ViewModels;
-
-public class TabStripDemoViewModel : ObservableObject
-{
-    public ObservableCollection<string> Items => new(Enumerable.Range(1, 10).Select(a => "Tab " + a));
-}

demo/Semi.Avalonia.Demo/ViewModels/TreeDataGridDemo/SongsPageViewModel.cs

@@ -1,54 +0,0 @@
-using System.Collections.ObjectModel;
-using System.Linq;
-using Avalonia.Controls;
-using Avalonia.Controls.Models.TreeDataGrid;
-using CommunityToolkit.Mvvm.ComponentModel;
-
-namespace Semi.Avalonia.Demo.ViewModels;
-
-public class SongsPageViewModel : ObservableObject
-{
-    public FlatTreeDataGridSource<SongViewModel> Songs { get; }
-
-    public SongsPageViewModel()
-    {
-        var songs = new ObservableCollection<SongViewModel>(Song.Songs.Select(a => new SongViewModel()
-        {
-            Title = a.Title,
-            Artist = a.Artist,
-            Album = a.Album,
-            CountOfComment = a.CountOfComment,
-            IsSelected = false
-        }));
-
-        Songs = new FlatTreeDataGridSource<SongViewModel>(songs)
-        {
-            Columns =
-            {
-                new CheckBoxColumn<SongViewModel>(
-                    "IsSelected",
-                    a => a.IsSelected, 
-                    (model, b) => { model.IsSelected = b; },
-                    new GridLength(108, GridUnitType.Pixel)),
-                new TextColumn<SongViewModel, string>(
-                    "Title", 
-                    a => a.Title, 
-                    (o, a) => o.Title = a,
-                    new GridLength(6, GridUnitType.Star)),
-                new TextColumn<SongViewModel, string>("Artist", 
-                    a => a.Artist, 
-                    (o, a) => o.Artist = a,
-                    new GridLength(6, GridUnitType.Star)),
-                new TemplateColumn<SongViewModel>("Album", 
-                    "AlbumCell", 
-                    "AlbumEditCell",
-                    new GridLength(6, GridUnitType.Star)),
-                new TemplateColumn<SongViewModel>(
-                    "Comments", 
-                    "CommentsCell", 
-                    "CommentsEditCell",
-                    new GridLength(6, GridUnitType.Star)),
-            }
-        };
-    }
-}

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

@@ -1,123 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Globalization;
-using Avalonia;
-using Avalonia.Collections;
-using Avalonia.Controls;
-using Avalonia.Media;
-using CommunityToolkit.Mvvm.ComponentModel;
-using Semi.Avalonia.Tokens;
-
-namespace Semi.Avalonia.Demo.ViewModels;
-
-public class VariablesDemoViewModel : ObservableObject
-{
-    public DataGridCollectionView GridData { get; set; }
-
-    public VariablesDemoViewModel()
-    {
-        IResourceDictionary dictionary = new Variables();
-        foreach (var token in Tokens)
-        {
-            if (token.ResourceKey is not null && dictionary.TryGetValue(token.ResourceKey, out var value))
-            {
-                token.Type = value?.GetType();
-                token.Value = GetValueString(value);
-            }
-        }
-
-        GridData = new DataGridCollectionView(Tokens);
-        GridData.GroupDescriptions.Add(new DataGridPathGroupDescription(nameof(VariableItem.Category)));
-    }
-
-    private static string GetValueString(object? value)
-    {
-        if (value is null) return string.Empty;
-
-        return value switch
-        {
-            double d => d.ToString(CultureInfo.InvariantCulture),
-            CornerRadius c => c.IsUniform ? $"{c.TopLeft}" : c.ToString(),
-            Thickness t => t.IsUniform ? $"{t.Left}" : t.ToString(),
-            FontWeight fontWeight => Convert.ToInt32(fontWeight).ToString(),
-            FontFamily fontFamily => fontFamily.FamilyNames.ToString(),
-            _ => value.ToString()
-        };
-    }
-
-    private static List<VariableItem> Tokens { get; set; } =
-    [
-        new("Height", "SemiHeightControlSmall"),
-        new("Height", "SemiHeightControlDefault"),
-        new("Height", "SemiHeightControlLarge"),
-        new("Icon Size", "SemiWidthIconExtraSmall"),
-        new("Icon Size", "SemiWidthIconSmall"),
-        new("Icon Size", "SemiWidthIconMedium"),
-        new("Icon Size", "SemiWidthIconLarge"),
-        new("Icon Size", "SemiWidthIconExtraLarge"),
-        new("Border CornerRadius", "SemiBorderRadiusExtraSmall"),
-        new("Border CornerRadius", "SemiBorderRadiusSmall"),
-        new("Border CornerRadius", "SemiBorderRadiusMedium"),
-        new("Border CornerRadius", "SemiBorderRadiusLarge"),
-        new("Border CornerRadius", "SemiBorderRadiusFull"),
-        new("Border Spacing", "SemiBorderSpacing"),
-        new("Border Spacing", "SemiBorderSpacingControl"),
-        new("Border Spacing", "SemiBorderSpacingControlFocus"),
-        new("Border Thickness", "SemiBorderThickness"),
-        new("Border Thickness", "SemiBorderThicknessControl"),
-        new("Border Thickness", "SemiBorderThicknessControlFocus"),
-        new("Spacing", "SemiSpacingNone"),
-        new("Spacing", "SemiSpacingSuperTight"),
-        new("Spacing", "SemiSpacingExtraTight"),
-        new("Spacing", "SemiSpacingTight"),
-        new("Spacing", "SemiSpacingBaseTight"),
-        new("Spacing", "SemiSpacingBase"),
-        new("Spacing", "SemiSpacingBaseLoose"),
-        new("Spacing", "SemiSpacingLoose"),
-        new("Spacing", "SemiSpacingExtraLoose"),
-        new("Spacing", "SemiSpacingSuperLoose"),
-        new("Thickness", "SemiThicknessNone"),
-        new("Thickness", "SemiThicknessSuperTight"),
-        new("Thickness", "SemiThicknessExtraTight"),
-        new("Thickness", "SemiThicknessTight"),
-        new("Thickness", "SemiThicknessBaseTight"),
-        new("Thickness", "SemiThicknessBase"),
-        new("Thickness", "SemiThicknessBaseLoose"),
-        new("Thickness", "SemiThicknessLoose"),
-        new("Thickness", "SemiThicknessExtraLoose"),
-        new("Thickness", "SemiThicknessSuperLoose"),
-        new("FontSize", "SemiFontSizeSmall"),
-        new("FontSize", "SemiFontSizeRegular"),
-        new("FontSize", "SemiFontSizeHeader6"),
-        new("FontSize", "SemiFontSizeHeader5"),
-        new("FontSize", "SemiFontSizeHeader4"),
-        new("FontSize", "SemiFontSizeHeader3"),
-        new("FontSize", "SemiFontSizeHeader2"),
-        new("FontSize", "SemiFontSizeHeader1"),
-        new("FontWeight", "SemiFontWeightLight"),
-        new("FontWeight", "SemiFontWeightRegular"),
-        new("FontWeight", "SemiFontWeightBold"),
-        new("FontFamily", "SemiFontFamilyRegular"),
-    ];
-}
-
-public class VariableItem()
-{
-    public string? Category { get; set; }
-    public string? ResourceKey { get; set; }
-    public Type? Type { get; set; }
-    public string? Value { get; set; }
-    public string? Description { get; set; }
-
-    public VariableItem(string category, string resourceKey, string description = "") : this()
-    {
-        Category = category;
-        ResourceKey = resourceKey;
-        Description = description;
-    }
-
-    public string CopyText =>
-        $"""
-         <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
-         """;
-}

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

@@ -5,286 +5,219 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:pages="using:Semi.Avalonia.Demo.Pages"
-    xmlns:views="clr-namespace:Semi.Avalonia.Demo.Views"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    x:CompileBindings="True"
-    x:DataType="views:MainViewModel"
     mc:Ignorable="d">
     <UserControl.Resources>
-        <ControlTheme x:Key="CategoryTabItem" TargetType="TabItem">
+        <ResourceDictionary>
-            <Setter Property="IsEnabled" Value="False" />
+            <ResourceDictionary.MergedDictionaries>
-            <Setter Property="Template">
+                <ResourceInclude Source="../Themes/TabMenu.axaml" />
-                <ControlTemplate TargetType="TabItem">
+                <ResourceInclude Source="../Themes/ToggleButton.axaml" />
-                    <TextBlock
+            </ResourceDictionary.MergedDictionaries>
-                        FontWeight="Bold"
+        </ResourceDictionary>
-                        FontSize="12"
-                        Margin="4"
-                        Text="{TemplateBinding Header}" />
-                </ControlTemplate>
-            </Setter>
-            <Style Selector="^:disabled /template/ TextBlock">
-                <Setter Property="Foreground" Value="{DynamicResource SemiColorText1}" />
-            </Style>
-        </ControlTheme>
     </UserControl.Resources>
     <Grid RowDefinitions="Auto, *">
         <Border
-            Grid.Row="0"
             Margin="8"
             Padding="12,4"
             Theme="{DynamicResource CardBorder}">
-            <Panel>
+            <Grid VerticalAlignment="Center" ColumnDefinitions="*, Auto">
-                <StackPanel Orientation="Horizontal" Spacing="8">
+                <StackPanel Grid.Column="0" Orientation="Horizontal">
-                    <ToggleSwitch
+                    <TextBlock
-                        Name="ExpandButton"
-                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
-                        Content="{StaticResource SemiIconSidebar}" />
-                    <SelectableTextBlock
                         VerticalAlignment="Center"
                         Classes="H6"
                         Text="Semi Avalonia"
-                        Theme="{DynamicResource TitleSelectableTextBlock}" />
+                        Theme="{DynamicResource TitleTextBlock}" />
-                    <SelectableTextBlock
+                    <TextBlock
+                        Margin="8,0"
                         VerticalAlignment="Center"
                         Text="/" />
-                    <SelectableTextBlock
+                    <TextBlock
+                        Margin="8,0"
                         VerticalAlignment="Center"
                         Classes="Secondary"
-                        Text="{ReflectionBinding #tab.SelectedItem.Header}" />
+                        Text="{Binding #tab.SelectedItem.Header}" />
                 </StackPanel>
-                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
+                <StackPanel Grid.Column="1" Orientation="Horizontal">
-                    <Button
+                    <Button Theme="{DynamicResource BorderlessButton}" Click="OpenDocumentation">
-                        Theme="{DynamicResource IconBorderlessButton}"
+                        <PathIcon
-                        Command="{Binding OpenUrlCommand}"
+                            Width="16"
-                        CommandParameter="{Binding DocumentationUrl}"
+                            Height="16"
-                        Content="{StaticResource SemiIconGlobe}" />
+                            Data="M12 21.5C10.65 20.65 8.2 20 6.5 20C4.85 20 3.15 20.3 1.75 21.05C1.65 21.1 1.6 21.1 1.5 21.1C1.25 21.1 1 20.85 1 20.6V6C1.6 5.55 2.25 5.25 3 5C4.11 4.65 5.33 4.5 6.5 4.5C8.45 4.5 10.55 4.9 12 6C13.45 4.9 15.55 4.5 17.5 4.5C18.67 4.5 19.89 4.65 21 5C21.75 5.25 22.4 5.55 23 6V20.6C23 20.85 22.75 21.1 22.5 21.1C22.4 21.1 22.35 21.1 22.25 21.05C20.85 20.3 19.15 20 17.5 20C15.8 20 13.35 20.65 12 21.5M12 8V19.5C13.35 18.65 15.8 18 17.5 18C18.7 18 19.9 18.15 21 18.5V7C19.9 6.65 18.7 6.5 17.5 6.5C15.8 6.5 13.35 7.15 12 8M13 11.5C14.11 10.82 15.6 10.5 17.5 10.5C18.41 10.5 19.26 10.59 20 10.78V9.23C19.13 9.08 18.29 9 17.5 9C15.73 9 14.23 9.28 13 9.84V11.5M17.5 11.67C15.79 11.67 14.29 11.93 13 12.46V14.15C14.11 13.5 15.6 13.16 17.5 13.16C18.54 13.16 19.38 13.24 20 13.4V11.9C19.13 11.74 18.29 11.67 17.5 11.67M20 14.57C19.13 14.41 18.29 14.33 17.5 14.33C15.67 14.33 14.17 14.6 13 15.13V16.82C14.11 16.16 15.6 15.83 17.5 15.83C18.54 15.83 19.38 15.91 20 16.07V14.57Z"
-
+                            Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                    <Button
-                        Theme="{DynamicResource IconBorderlessButton}"
-                        Command="{Binding OpenUrlCommand}"
-                        CommandParameter="{Binding RepoUrl}"
-                        Content="{StaticResource SemiIconGithubLogo}" />
-
-                    <ToggleSwitch
-                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
-                        Command="{Binding ToggleThemeCommand}"
-                        OnContent="{StaticResource SemiIconMoon}"
-                        OffContent="{StaticResource SemiIconSun}" />
-
-                    <Button
-                        Theme="{DynamicResource IconBorderlessButton}"
-                        Content="{StaticResource SemiIconMenu}">
-                        <Button.Flyout>
-                            <MenuFlyout Placement="Bottom" ItemsSource="{Binding MenuItems}" />
-                        </Button.Flyout>
-                        <Button.Styles>
-                            <Style Selector="MenuItem" x:DataType="views:MenuItemViewModel">
-                                <Setter Property="Header" Value="{Binding Header}" />
-                                <Setter Property="ItemsSource" Value="{Binding Items}" />
-                                <Setter Property="Command" Value="{Binding Command}" />
-                                <Setter Property="CommandParameter" Value="{Binding CommandParameter}" />
-                            </Style>
-                        </Button.Styles>
                     </Button>
+                    <Button Theme="{DynamicResource BorderlessButton}" Click="OpenRepository">
+                        <PathIcon
+                            Width="16"
+                            Height="16"
+                            Data="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
+                            Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
+                    </Button>
+                    <ToggleSwitch
+                        Grid.Column="1"
+                        Padding="4"
+                        IsCheckedChanged="ToggleButton_OnIsCheckedChanged"
+                        Theme="{DynamicResource ButtonToggleSwitch}">
+                        <ToggleSwitch.OnContent>
+                            <PathIcon
+                                Width="16"
+                                Height="16"
+                                Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z"
+                                Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
+                        </ToggleSwitch.OnContent>
+                        <ToggleSwitch.OffContent>
+                            <PathIcon
+                                Width="16"
+                                Height="16"
+                                Data="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13"
+                                Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
+                        </ToggleSwitch.OffContent>
+                    </ToggleSwitch>
                 </StackPanel>
-            </Panel>
+            </Grid>
+
         </Border>
         <TabControl
             Name="tab"
             Grid.Row="1"
             Margin="8"
             Padding="20,0,0,0"
+            HorizontalAlignment="Stretch"
             TabStripPlacement="Left"
-            Classes.Dismiss="{Binding #ExpandButton.IsChecked}"
+            Theme="{DynamicResource NavigationTab}">
-            Theme="{DynamicResource ScrollLineTabControl}">
-            <TabControl.Styles>
-                <Style Selector=".Dismiss /template/ ScrollViewer#PART_ScrollViewer">
-                    <Setter Property="IsVisible" Value="False" />
-                </Style>
-            </TabControl.Styles>
-            <TabControl.ItemsPanel>
-                <ItemsPanelTemplate>
-                    <StackPanel />
-                </ItemsPanelTemplate>
-            </TabControl.ItemsPanel>
             <TabItem Header="Overview">
                 <pages:Overview />
             </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Resource Browser" />
             <TabItem Header="Palette">
                 <pages:PaletteDemo />
             </TabItem>
-            <TabItem Header="HighContrastTheme">
-                <pages:HighContrastDemo />
-            </TabItem>
-            <TabItem Header="Variables">
-                <pages:VariablesDemo />
-            </TabItem>
-            <TabItem Header="Icon">
-                <pages:IconDemo />
-            </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Separate Pack" />
-            <TabItem Header="ColorPicker">
-                <pages:ColorPickerDemo />
-            </TabItem>
-            <TabItem Header="DataGrid">
-                <pages:DataGridDemo />
-            </TabItem>
-            <TabItem Header="TreeDataGrid">
-                <pages:TreeDataGridDemo />
-            </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Basic" />
-            <TabItem Header="TextBlock">
-                <pages:TextBlockDemo />
-            </TabItem>
-            <TabItem Header="SelectableTextBlock">
-                <pages:SelectableTextBlockDemo />
-            </TabItem>
-            <TabItem Header="Border">
-                <pages:BorderDemo />
-            </TabItem>
-            <TabItem Header="PathIcon">
-                <pages:PathIconDemo />
-            </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Button" />
-            <TabItem Header="Button">
-                <pages:ButtonDemo />
-            </TabItem>
-            <TabItem Header="RepeatButton">
-                <pages:RepeatButtonDemo />
-            </TabItem>
-            <TabItem Header="HyperlinkButton">
-                <pages:HyperlinkButtonDemo />
-            </TabItem>
-            <TabItem Header="ToggleButton">
-                <pages:ToggleButtonDemo />
-            </TabItem>
-            <TabItem Header="CheckBox">
-                <pages:CheckBoxDemo />
-            </TabItem>
-            <TabItem Header="RadioButton">
-                <pages:RadioButtonDemo />
-            </TabItem>
-            <TabItem Header="ToggleSwitch">
-                <pages:ToggleSwitchDemo />
-            </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Input" />
-            <TabItem Header="TextBox">
-                <pages:TextBoxDemo />
-            </TabItem>
             <TabItem Header="AutoCompleteBox">
                 <pages:AutoCompleteBoxDemo />
             </TabItem>
-            <TabItem Header="ComboBox">
+            <TabItem Header="Border">
-                <pages:ComboBoxDemo />
+                <pages:BorderDemo />
+            </TabItem>
+            <TabItem Header="Button">
+                <pages:ButtonDemo />
             </TabItem>
             <TabItem Header="ButtonSpinner">
                 <pages:ButtonSpinnerDemo />
             </TabItem>
-            <TabItem Header="NumericUpDown">
-                <pages:NumericUpDownDemo />
-            </TabItem>
-            <TabItem Header="Slider">
-                <pages:SliderDemo />
-            </TabItem>
-            <TabItem Header="ManagedFileChooser">
-                <pages:ManagedFileChooserDemo />
-            </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Date/Time" />
             <TabItem Header="Calendar">
                 <pages:CalendarDemo />
             </TabItem>
             <TabItem Header="CalendarDatePicker">
                 <pages:CalendarDatePickerDemo />
             </TabItem>
-            <TabItem Header="DatePicker">
-                <pages:DatePickerDemo />
-            </TabItem>
-            <TabItem Header="TimePicker">
-                <pages:TimePickerDemo />
-            </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Navigation" />
-            <TabItem Header="TabControl">
-                <pages:TabControlDemo />
-            </TabItem>
-            <TabItem Header="TabStrip">
-                <pages:TabStripDemo />
-            </TabItem>
-            <TabItem Header="TreeView">
-                <pages:TreeViewDemo />
-            </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Show" />
             <TabItem Header="Carousel">
                 <pages:CarouselDemo />
             </TabItem>
+            <TabItem Header="CheckBox">
+                <pages:CheckBoxDemo />
+            </TabItem>
+            <TabItem Header="ColorPicker">
+                <pages:ColorPickerDemo />
+            </TabItem>
+            <TabItem Header="ComboBox">
+                <pages:ComboBoxDemo />
+            </TabItem>
+            <TabItem Header="DataValidationErrors">
+                <pages:DataValidationErrorsDemo />
+            </TabItem>
+            <TabItem Header="DataGrid">
+                <pages:DataGridDemo />
+            </TabItem>
+            <TabItem Header="DatePicker">
+                <pages:DatePickerDemo />
+            </TabItem>
             <TabItem Header="Expander">
                 <pages:ExpanderDemo />
             </TabItem>
             <TabItem Header="Flyout">
                 <pages:FlyoutDemo />
             </TabItem>
+            <TabItem Header="GridSplitter">
+                <pages:GridSplitter />
+            </TabItem>
             <TabItem Header="HeaderedContentControl">
                 <pages:HeaderedContentControlDemo />
             </TabItem>
+            <TabItem Header="HyperlinkButton">
+                <pages:HyperlinkButtonDemo />
+            </TabItem>
             <TabItem Header="Label">
                 <pages:LabelDemo />
             </TabItem>
             <TabItem Header="ListBox">
                 <pages:ListBoxDemo />
             </TabItem>
-            <TabItem Header="SplitView">
+            <TabItem Header="ManagedFileChooser">
-                <pages:SplitViewDemo />
+                <pages:ManagedFileChooserDemo />
-            </TabItem>
-            <TabItem Header="ToolTip">
-                <pages:ToolTipDemo />
-            </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Feedback" />
-            <TabItem Header="DataValidationErrors">
-                <pages:DataValidationErrorsDemo />
-            </TabItem>
-            <TabItem Header="Notification">
-                <pages:NotificationDemo />
-            </TabItem>
-            <TabItem Header="ProgressBar">
-                <pages:ProgressBarDemo />
-            </TabItem>
-            <TabItem Header="RefreshContainer">
-                <pages:RefreshContainerDemo />
-            </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Other" />
-            <TabItem Header="GridSplitter">
-                <pages:GridSplitterDemo />
             </TabItem>
             <TabItem Header="Menu">
                 <pages:MenuDemo />
             </TabItem>
+            <TabItem Header="Notification">
+                <pages:NotificationDemo />
+            </TabItem>
+            <TabItem Header="NumericUpDown">
+                <pages:NumericUpDownDemo />
+            </TabItem>
+            <TabItem Header="PathIcon">
+                <pages:PathIconDemo />
+            </TabItem>
+            <TabItem Header="ProgressBar">
+                <pages:ProgressBarDemo />
+            </TabItem>
+            <TabItem Header="RadioButton">
+                <pages:RadioButtonDemo />
+            </TabItem>
+            <TabItem Header="RefreshContainer">
+                <pages:RefreshContainerDemo />
+            </TabItem>
+            <TabItem Header="RepeatButton">
+                <pages:RepeatButtonDemo />
+            </TabItem>
             <TabItem Header="ScrollViewer">
                 <pages:ScrollViewerDemo />
             </TabItem>
+            <TabItem Header="SelectableTextBlock">
+                <pages:SelectableTextBlockDemo />
+            </TabItem>
+            <TabItem Header="Slider">
+                <pages:SliderDemo />
+            </TabItem>
+            <TabItem Header="SplitView">
+                <pages:SplitViewDemo />
+            </TabItem>
+            <TabItem Header="TabControl">
+                <pages:TabControlDemo />
+            </TabItem>
+            <TabItem Header="TextBlock">
+                <pages:TextBlockDemo />
+            </TabItem>
+            <TabItem Header="TextBox">
+                <pages:TextBoxDemo />
+            </TabItem>
             <TabItem Header="ThemeVariantScope">
                 <pages:ThemeVariantDemo />
             </TabItem>
+            <TabItem Header="TimePicker">
+                <pages:TimePickerDemo />
+            </TabItem>
+            <TabItem Header="ToggleButton">
+                <pages:ToggleButtonDemo />
+            </TabItem>
+            <TabItem Header="ToggleSwitch">
+                <pages:ToggleSwitchDemo />
+            </TabItem>
+            <TabItem Header="ToolTip">
+                <pages:ToolTipDemo />
+            </TabItem>
+            <TabItem Header="TreeView">
+                <pages:TreeViewDemo />
+            </TabItem>
         </TabControl>
     </Grid>
-</UserControl>
+
+</UserControl>

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

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+using Avalonia;
+using Avalonia.Controls.ApplicationLifetimes;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.TreeDataGrid.Demo;
+
+public partial class App : Application
+{
+    public override void Initialize()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+
+    public override void OnFrameworkInitializationCompleted()
+    {
+        if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
+        {
+            desktop.MainWindow = new MainWindow();
+        }
+
+        base.OnFrameworkInitializationCompleted();
+    }
+}

demo/Semi.Avalonia.TreeDataGrid.Demo/Converters/FileIconConverter.cs

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

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

@@ -0,0 +1,138 @@
+<Window
+    x:Class="Semi.Avalonia.TreeDataGrid.Demo.MainWindow"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="clr-namespace:Semi.Avalonia.TreeDataGrid.Demo.Converters"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:vm="clr-namespace:Semi.Avalonia.TreeDataGrid.Demo.ViewModels;assembly=Semi.Avalonia.TreeDataGrid.Demo"
+    Title="Semi.Avalonia.TreeDataGrid.Demo"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:DataType="vm:MainViewModel"
+    mc:Ignorable="d">
+    <Window.Resources>
+        <converters:FileIconConverter x:Key="FileIconConverter">
+            <PathGeometry x:Key="file">M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z</PathGeometry>
+            <PathGeometry x:Key="folderOpen">M6.1,10L4,18V8H21A2,2 0 0,0 19,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H19C19.9,20 20.7,19.4 20.9,18.5L23.2,10H6.1M19,18H6L7.6,12H20.6L19,18Z</PathGeometry>
+            <PathGeometry x:Key="folderClosed">M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z</PathGeometry>
+        </converters:FileIconConverter>
+    </Window.Resources>
+    <Grid RowDefinitions="Auto, *">
+        <Button
+            HorizontalAlignment="Right"
+            Click="Button_OnClick"
+            Content="Theme" />
+        <TabControl Grid.Row="1">
+            <TabItem Header="Songs">
+                <TreeDataGrid
+                    AutoDragDropRows="True"
+                    DataContext="{Binding SongsContext}"
+                    Source="{Binding Songs}">
+                    <TreeDataGrid.Resources>
+                        <DataTemplate x:Key="AlbumCell" DataType="vm:SongViewModel">
+                            <TextBlock
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Center"
+                                Background="Transparent"
+                                Text="{Binding Album}" />
+                        </DataTemplate>
+                        <DataTemplate x:Key="AlbumEditCell" DataType="vm:SongViewModel">
+                            <ComboBox
+                                VerticalAlignment="Center"
+                                Classes="Small"
+                                ItemsSource="{x:Static vm:Song.Albums}"
+                                SelectedItem="{Binding Album}" />
+                        </DataTemplate>
+                        <DataTemplate x:Key="CommentsCell" DataType="vm:SongViewModel">
+                            <TextBlock VerticalAlignment="Center" Text="{Binding CountOfComment}" />
+                        </DataTemplate>
+                        <DataTemplate x:Key="CommentsEditCell" DataType="vm:SongViewModel">
+                            <NumericUpDown
+                                Width="100"
+                                HorizontalAlignment="Left"
+                                VerticalAlignment="Center"
+                                Classes="Small"
+                                Value="{Binding CountOfComment}" />
+                        </DataTemplate>
+                    </TreeDataGrid.Resources>
+                    <TreeDataGrid.Styles>
+                        <Style Selector="TreeDataGrid TreeDataGridRow:nth-last-child(2n)">
+                            <Setter Property="Background" Value="#20808080" />
+                        </Style>
+                    </TreeDataGrid.Styles>
+                </TreeDataGrid>
+            </TabItem>
+            <TabItem Header="Files">
+                <Grid DataContext="{Binding FilesContext}" RowDefinitions="Auto, *">
+                    <DockPanel Margin="0,4" DockPanel.Dock="Top">
+                        <ComboBox
+                            DockPanel.Dock="Left"
+                            ItemsSource="{Binding Drives}"
+                            SelectedItem="{Binding SelectedDrive}" />
+                        <TextBox
+                            Margin="4,0,0,0"
+                            VerticalContentAlignment="Center"
+                            KeyDown="SelectedPath_KeyDown"
+                            Text="{Binding SelectedPath, Mode=OneWay}" />
+                    </DockPanel>
+                    <TreeDataGrid
+                        Name="fileViewer"
+                        Grid.Row="1"
+                        Source="{Binding Source}">
+                        <TreeDataGrid.Resources>
+
+                            <!--  Template for Name column cells  -->
+                            <DataTemplate x:Key="FileNameCell" DataType="vm:FileNodeViewModel">
+                                <StackPanel Orientation="Horizontal">
+                                    <PathIcon
+                                        Width="16"
+                                        Height="16"
+                                        Margin="8,0"
+                                        VerticalAlignment="Center">
+                                        <PathIcon.Data>
+                                            <MultiBinding Converter="{StaticResource FileIconConverter}">
+                                                <Binding Path="IsDirectory" />
+                                                <Binding Path="IsExpanded" />
+                                            </MultiBinding>
+                                        </PathIcon.Data>
+                                    </PathIcon>
+                                    <TextBlock VerticalAlignment="Center" Text="{Binding Name}" />
+                                </StackPanel>
+                            </DataTemplate>
+
+                            <!--  Edit template for Name column cells  -->
+                            <DataTemplate x:Key="FileNameEditCell" DataType="vm:FileNodeViewModel">
+                                <StackPanel Orientation="Horizontal">
+                                    <Image Margin="0,0,4,0" VerticalAlignment="Center">
+                                        <Image.Source>
+                                            <MultiBinding Converter="{StaticResource FileIconConverter}">
+                                                <Binding Path="IsDirectory" />
+                                                <Binding Path="IsExpanded" />
+                                            </MultiBinding>
+                                        </Image.Source>
+                                    </Image>
+                                    <TextBox
+                                        VerticalAlignment="Center"
+                                        Classes="Small"
+                                        Text="{Binding Name}">
+                                        <TextBox.Styles>
+                                            <Style Selector="DataValidationErrors">
+                                                <Setter Property="Theme" Value="{DynamicResource TooltipDataValidationErrors}" />
+                                            </Style>
+                                        </TextBox.Styles>
+                                    </TextBox>
+                                </StackPanel>
+                            </DataTemplate>
+                        </TreeDataGrid.Resources>
+                        <TreeDataGrid.Styles>
+                            <Style Selector="TreeDataGrid TreeDataGridRow:nth-child(2n)">
+                                <Setter Property="Background" Value="#20808080" />
+                            </Style>
+                        </TreeDataGrid.Styles>
+                    </TreeDataGrid>
+                </Grid>
+            </TabItem>
+        </TabControl>
+    </Grid>
+</Window>

demo/Semi.Avalonia.TreeDataGrid.Demo/MainWindow.axaml.cs

@@ -0,0 +1,36 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Input;
+using Avalonia.Interactivity;
+using Avalonia.Styling;
+using Semi.Avalonia.TreeDataGrid.Demo.ViewModels;
+
+namespace Semi.Avalonia.TreeDataGrid.Demo;
+
+public partial class MainWindow : Window
+{
+    public MainWindow()
+    {
+        InitializeComponent();
+        this.DataContext = new MainViewModel();
+    }
+
+    private void Button_OnClick(object? sender, RoutedEventArgs e)
+    {
+        var app = Application.Current;
+        if (app is not null)
+        {
+            var theme = app.ActualThemeVariant;
+            app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
+        }
+    }
+    
+    private void SelectedPath_KeyDown(object? sender, KeyEventArgs e)
+    {
+        if (e.Key == Key.Enter)
+        {
+            var vm = (MainViewModel)DataContext!;
+            vm.FilesContext.SelectedPath = ((TextBox)sender!).Text;
+        }
+    }
+}

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

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

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

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

demo/Semi.Avalonia.TreeDataGrid.Demo/ViewModels/FilesPageViewModel.cs

@@ -2,7 +2,6 @@ using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.ComponentModel;
-using System.Diagnostics;
 using System.IO;
 using System.Linq;
 using System.Runtime.InteropServices;
@@ -12,40 +11,43 @@ using Avalonia.Controls.Selection;
 using Avalonia.Threading;
 using CommunityToolkit.Mvvm.ComponentModel;
 
-namespace Semi.Avalonia.Demo.ViewModels;
+namespace Semi.Avalonia.TreeDataGrid.Demo.ViewModels;
 
-public partial class FilesPageViewModel : ObservableObject
+public class FilesPageViewModel: ObservableObject
 {
     public IList<string> Drives { get; }
-    public HierarchicalTreeDataGridSource<FileNodeViewModel> Source { get; }
+    private string _selectedDrive;
-    [ObservableProperty] private string _selectedDrive;
+    private string? _selectedPath;
-    [ObservableProperty] private string? _selectedPath;
+    private FileNodeViewModel? _root;
-    [ObservableProperty] private FileNodeViewModel? _root;
+    public string SelectedDrive
-
-    partial void OnSelectedDriveChanged(string value)
     {
-        Root = new FileNodeViewModel(value, true, true);
+        get => _selectedDrive;
-        if (Source is not null)
+        set
         {
-            Source.Items = [Root];
+            SetProperty(ref _selectedDrive, value);
+            _root = new FileNodeViewModel(_selectedDrive, isDirectory: true, isRoot: true);
+            Source.Items = new[] { _root };
         }
     }
     
-    partial void OnSelectedPathChanged(string? value)
+    public string? SelectedPath
     {
-        SetSelectedPath(value);
+        get => _selectedPath;
+        set => SetSelectedPath(value);
     }
+    
+    public HierarchicalTreeDataGridSource<FileNodeViewModel> Source { get; }
 
     public FilesPageViewModel()
     {
-        Drives = DriveInfo.GetDrives().Select(x => x.Name).ToList();
+        Drives= DriveInfo.GetDrives().Select(x => x.Name).ToList();
         if (RuntimeInformation.IsOSPlatform(OSPlatform.Windows))
         {
-            SelectedDrive = @"C:\";
+            _selectedDrive = "C:\\";
         }
         else
         {
-            SelectedDrive = Drives.FirstOrDefault() ?? "/";
+            _selectedDrive = Drives.FirstOrDefault() ?? "/";
         }
 
         Source = new HierarchicalTreeDataGridSource<FileNodeViewModel>(Array.Empty<FileNodeViewModel>())
@@ -56,7 +58,7 @@ public partial class FilesPageViewModel : ObservableObject
                     null,
                     x => x.IsChecked,
                     (o, v) => o.IsChecked = v,
-                    options: new CheckBoxColumnOptions<FileNodeViewModel>
+                    options: new()
                     {
                         CanUserResizeColumn = false,
                     }),
@@ -66,20 +68,20 @@ public partial class FilesPageViewModel : ObservableObject
                         "FileNameCell",
                         "FileNameEditCell",
                         new GridLength(1, GridUnitType.Star),
-                        new TemplateColumnOptions<FileNodeViewModel>
+                        new()
                         {
-                            CompareAscending = FileNodeViewModel.SortAscending(vm => vm.Name),
+                            CompareAscending = FileNodeViewModel.SortAscending(x => x.Name),
-                            CompareDescending = FileNodeViewModel.SortDescending(vm => vm.Name),
+                            CompareDescending = FileNodeViewModel.SortDescending(x => x.Name),
                             IsTextSearchEnabled = true,
-                            TextSearchValueSelector = vm => vm.Name
+                            TextSearchValueSelector = x => x.Name
                         }),
-                    vm => vm.Children,
+                    x => x.Children,
-                    vm => vm.HasChildren,
+                    x => x.HasChildren,
-                    vm => vm.IsExpanded),
+                    x => x.IsExpanded),
                 new TextColumn<FileNodeViewModel, long?>(
                     "Size",
-                    vm => vm.Size,
+                    x => x.Size,
-                    options: new TextColumnOptions<FileNodeViewModel>
+                    options: new()
                     {
                         CompareAscending = FileNodeViewModel.SortAscending(x => x.Size),
                         CompareDescending = FileNodeViewModel.SortDescending(x => x.Size),
@@ -87,7 +89,7 @@ public partial class FilesPageViewModel : ObservableObject
                 new TextColumn<FileNodeViewModel, DateTimeOffset?>(
                     "Modified",
                     x => x.Modified,
-                    options: new TextColumnOptions<FileNodeViewModel>
+                    options: new()
                     {
                         CompareAscending = FileNodeViewModel.SortAscending(x => x.Modified),
                         CompareDescending = FileNodeViewModel.SortDescending(x => x.Modified),
@@ -97,18 +99,18 @@ public partial class FilesPageViewModel : ObservableObject
         Source.RowSelection!.SingleSelect = false;
         Source.RowSelection.SelectionChanged += SelectionChanged;
     }
-
+    
     private void SelectionChanged(object? sender, TreeSelectionModelSelectionChangedEventArgs<FileNodeViewModel> e)
     {
         var selectedPath = Source.RowSelection?.SelectedItem?.Path;
         this.SetProperty(ref _selectedPath, selectedPath, nameof(SelectedPath));
 
         foreach (var i in e.DeselectedItems)
-            Trace.WriteLine($"Deselected '{i?.Path}'");
+            System.Diagnostics.Trace.WriteLine($"Deselected '{i?.Path}'");
         foreach (var i in e.SelectedItems)
-            Trace.WriteLine($"Selected '{i?.Path}'");
+            System.Diagnostics.Trace.WriteLine($"Selected '{i?.Path}'");
     }
-
+    
     private void SetSelectedPath(string? value)
     {
         if (string.IsNullOrEmpty(value))
@@ -162,28 +164,27 @@ public partial class FilesPageViewModel : ObservableObject
             }
         }
 
-        Source.Items = [Root];
         Source.RowSelection!.SelectedIndex = index;
     }
 }
 
-public partial class FileNodeViewModel : ObservableObject, IEditableObject
+public class FileNodeViewModel: ObservableObject, IEditableObject
 {
-    [ObservableProperty] private string _path;
+    private string _path;
-    [ObservableProperty] private string _name;
+    private string _name;
     private string? _undoName;
-    [ObservableProperty] private long? _size;
+    private long? _size;
-    [ObservableProperty] private DateTimeOffset? _modified;
+    private DateTimeOffset? _modified;
     private FileSystemWatcher? _watcher;
     private ObservableCollection<FileNodeViewModel>? _children;
-    [ObservableProperty] private bool _hasChildren = true;
+    private bool _hasChildren = true;
-    [ObservableProperty] private bool _isExpanded;
+    private bool _isExpanded;
 
-    public FileNodeViewModel(string path, bool isDirectory, bool isRoot = false)
+    public FileNodeViewModel( string path, bool isDirectory, bool isRoot = false)
     {
-        Path = path;
+        _path = path;
-        Name = isRoot ? path : System.IO.Path.GetFileName(Path);
+        _name = isRoot ? path : System.IO.Path.GetFileName(Path);
-        IsExpanded = isRoot;
+        _isExpanded = isRoot;
         IsDirectory = isDirectory;
         HasChildren = isDirectory;
 
@@ -195,6 +196,42 @@ public partial class FileNodeViewModel : ObservableObject, IEditableObject
         }
     }
 
+    public string Path 
+    {
+        get => _path;
+        private set => SetProperty(ref _path, value);
+    }
+
+    public string Name 
+    {
+        get => _name;
+        private set => SetProperty(ref _name, value);
+    }
+
+    public long? Size 
+    {
+        get => _size;
+        private set => SetProperty(ref _size, value);
+    }
+
+    public DateTimeOffset? Modified 
+    {
+        get => _modified;
+        private set => SetProperty(ref _modified, value);
+    }
+
+    public bool HasChildren
+    {
+        get => _hasChildren;
+        private set => SetProperty(ref _hasChildren, value);
+    }
+
+    public bool IsExpanded
+    {
+        get => _isExpanded;
+        set => SetProperty(ref _isExpanded, value);
+    }
+
     public bool IsChecked { get; set; }
     public bool IsDirectory { get; }
     public IReadOnlyList<FileNodeViewModel> Children => _children ??= LoadChildren();
@@ -295,7 +332,6 @@ public partial class FileNodeViewModel : ObservableObject, IEditableObject
                             child.Size = info.Length;
                             child.Modified = info.LastWriteTimeUtc;
                         }
-
                         break;
                     }
                 }
@@ -323,7 +359,7 @@ public partial class FileNodeViewModel : ObservableObject, IEditableObject
                 if (_children[i].Path == e.FullPath)
                 {
                     _children.RemoveAt(i);
-                    Debug.WriteLine($"Removed {e.FullPath}");
+                    System.Diagnostics.Debug.WriteLine($"Removed {e.FullPath}");
                     break;
                 }
             }
@@ -358,7 +394,6 @@ internal static class ListExtensions
                 return i;
             i++;
         }
-
         return -1;
     }
 }

demo/Semi.Avalonia.TreeDataGrid.Demo/ViewModels/MainViewModel.cs

@@ -1,8 +1,8 @@
 using CommunityToolkit.Mvvm.ComponentModel;
 
-namespace Semi.Avalonia.Demo.ViewModels;
+namespace Semi.Avalonia.TreeDataGrid.Demo.ViewModels;
 
-public class TreeDataGridDemoViewModel: ObservableObject
+public class MainViewModel: ObservableObject
 {
     public SongsPageViewModel SongsContext { get; } = new();
     public FilesPageViewModel FilesContext { get; } = new();