feat: change render mode in browser 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:
@@ -24,6 +27,9 @@ jobs:
       - name: Publish .NET Project
         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
+
       - name: copy index.html to 404.html
         run: cp $OUTPUT_PATH/index.html $OUTPUT_PATH/404.html
 
@@ -33,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 }}
-          branch: gh-pages
-          folder: ${{ env.OUTPUT_PATH }}
-          single-commit: true
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages
+          FOLDER: ${{ env.OUTPUT_PATH }}

.github/workflows/pack-nightly.yml

@@ -1,69 +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'
-        default: true
-        type: boolean
-      Semi_Avalonia_ColorPicker:
-        description: 'Pack Semi.Avalonia.ColorPicker'
-        default: true
-        type: boolean
-      Semi_Avalonia_DataGrid:
-        description: 'Pack Semi.Avalonia.DataGrid'
-        default: false
-        type: boolean
-      Semi_Avalonia_TreeDataGrid:
-        description: 'Pack Semi.Avalonia.TreeDataGrid'
-        default: false
-        type: boolean
-
-jobs:
-  Pack_Nightly:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4.2.2
-
-      - name: Get Version
-        run: |
-          VERSION_TIMESTAMP=$(date +'%Y%m%d%H%M%S')
-          VERSION="${{ inputs.Version_Prefix }}-nightly-${VERSION_TIMESTAMP}"
-          echo "VERSION=$VERSION" >> $GITHUB_ENV
-
-      - name: Pack Semi.Avalonia
-        if: ${{ inputs.Semi_Avalonia }}
-        run: dotnet pack src/Semi.Avalonia -o nugets /p:Version=${{ env.VERSION }}
-
-      - name: Pack Semi.Avalonia.ColorPicker
-        if: ${{ inputs.Semi_Avalonia_ColorPicker }}
-        run: dotnet pack src/Semi.Avalonia.ColorPicker -o nugets /p:Version=${{ env.VERSION }}
-
-      - name: Pack Semi.Avalonia.DataGrid
-        if: ${{ inputs.Semi_Avalonia_DataGrid }}
-        run: dotnet pack src/Semi.Avalonia.DataGrid -o nugets /p:Version=${{ env.VERSION }}
-
-      - name: Pack Semi.Avalonia.TreeDataGrid
-        if: ${{ inputs.Semi_Avalonia_TreeDataGrid }}
-        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.6.2
-        with:
-          name: nugets
-          path: nugets
-        if: always()

.github/workflows/pack.yml

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

.github/workflows/publish.yml

@@ -1,225 +0,0 @@
-name: Publish Demo
-
-on:
-  workflow_dispatch:
-    inputs:
-      win-x64:
-        description: 'Windows x64'
-        default: false
-        type: boolean
-      win-x64-aot:
-        description: 'Windows x64 AOT'
-        default: false
-        type: boolean
-      linux-x64:
-        description: 'Linux x64'
-        default: false
-        type: boolean
-      linux-x64-aot:
-        description: 'Linux x64 AOT'
-        default: false
-        type: boolean
-      drm-linux-x64:
-        description: 'DRM Linux x64'
-        default: false
-        type: boolean
-      drm-linux-x64-aot:
-        description: 'DRM Linux x64 AOT'
-        default: false
-        type: boolean
-      osx-arm64:
-        description: 'macOS arm64'
-        default: false
-        type: boolean
-      osx-arm64-aot:
-        description: 'macOS arm64 AOT'
-        default: false
-        type: boolean
-      android-arm64:
-        description: 'Android arm64'
-        default: false
-        type: boolean
-  workflow_call:
-    inputs:
-      win-x64:
-        type: boolean
-        default: true
-      win-x64-aot:
-        type: boolean
-        default: true
-      linux-x64:
-        type: boolean
-        default: true
-      linux-x64-aot:
-        type: boolean
-        default: true
-      drm-linux-x64:
-        type: boolean
-        default: true
-      drm-linux-x64-aot:
-        type: boolean
-        default: true
-      osx-arm64:
-        type: boolean
-        default: true
-      osx-arm64-aot:
-        type: boolean
-        default: true
-      android-arm64:
-        type: boolean
-        default: true
-
-jobs:
-  win-x64:
-    if: ${{inputs.win-x64}}
-    runs-on: windows-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4.2.2
-      - name: Publish win-x64
-        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
-        with:
-          name: Semi.Avalonia.Demo.Desktop.win-x64
-          path: |
-            publish
-            !publish/*.pdb
-
-  win-x64-aot:
-    if: ${{inputs.win-x64-aot}}
-    runs-on: windows-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4.2.2
-      - name: Enable Native AOT in .csproj
-        run: sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
-      - name: Publish win-x64 AOT
-        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release -o publish
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
-        with:
-          name: Semi.Avalonia.Demo.Desktop.win-x64.NativeAOT
-          path: |
-            publish
-            !publish/*.pdb
-
-  linux-x64:
-    if: ${{inputs.linux-x64}}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4.2.2
-      - name: Publish linux-x64
-        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r linux-x64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
-        with:
-          name: Semi.Avalonia.Demo.Desktop.linux-x64
-          path: |
-            publish
-            !publish/*.pdb
-
-  linux-x64-aot:
-    if: ${{inputs.linux-x64-aot}}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4.2.2
-      - name: Enable Native AOT in .csproj
-        run: sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
-      - name: Publish linux-x64 AOT
-        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r linux-x64 -c Release -o publish
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
-        with:
-          name: Semi.Avalonia.Demo.Desktop.linux-x64.NativeAOT
-          path: |
-            publish
-            !publish/*.pdb
-
-  drm-linux-x64:
-    if: ${{inputs.drm-linux-x64}}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4.2.2
-      - name: Publish linux-x64 DRM
-        run: dotnet publish demo/Semi.Avalonia.Demo.Drm -r linux-x64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
-        with:
-          name: Semi.Avalonia.Demo.Drm.linux-x64
-          path: |
-            publish
-            !publish/*.pdb
-
-  drm-linux-x64-aot:
-    if: ${{inputs.drm-linux-x64-aot}}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4.2.2
-      - name: Enable Native AOT in .csproj
-        run: sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj
-      - name: Publish linux-x64 AOT
-        run: dotnet publish demo/Semi.Avalonia.Demo.Drm -r linux-x64 -c Release -o publish
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
-        with:
-          name: Semi.Avalonia.Demo.Drm.linux-x64.NativeAOT
-          path: |
-            publish
-            !publish/*.pdb
-
-  osx-arm64:
-    if: ${{inputs.osx-arm64}}
-    runs-on: macos-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4.2.2
-      - name: Publish osx-arm64
-        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r osx-arm64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
-        with:
-          name: Semi.Avalonia.Demo.Desktop.osx-arm64
-          path: |
-            publish
-            !publish/*.pdb
-
-  osx-arm64-aot:
-    if: ${{inputs.osx-arm64-aot}}
-    runs-on: macos-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4.2.2
-      - name: Enable Native AOT in .csproj
-        run: sed -i '' 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
-      - name: Publish osx-arm64 AOT
-        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r osx-arm64 -c Release -o publish
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
-        with:
-          name: Semi.Avalonia.Demo.Desktop.osx-arm64.NativeAOT
-          path: |
-            publish
-            !publish/*.pdb
-
-  android-arm64:
-    if: ${{inputs.android-arm64 }}
-    runs-on: windows-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4.2.2
-      - 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.6.2
-        with:
-          name: android-arm64
-          path: publish/*Signed.apk

.github/workflows/release-tag.yml

@@ -1,73 +0,0 @@
-name: Release Tag
-
-on:
-  workflow_dispatch:
-    inputs:
-      Upload_to_NuGet:
-        description: 'Upload to NuGet'
-        default: false
-        type: boolean
-      Semi_Avalonia:
-        description: 'Pack Semi.Avalonia'
-        default: true
-        type: boolean
-      Semi_Avalonia_ColorPicker:
-        description: 'Pack Semi.Avalonia.ColorPicker'
-        default: true
-        type: boolean
-      Semi_Avalonia_DataGrid:
-        description: 'Pack Semi.Avalonia.DataGrid'
-        default: false
-        type: boolean
-      Semi_Avalonia_TreeDataGrid:
-        description: 'Pack Semi.Avalonia.TreeDataGrid'
-        default: false
-        type: boolean
-
-jobs:
-  nuget:
-    uses: ./.github/workflows/pack.yml
-    with:
-      Upload_to_NuGet: ${{ inputs.Upload_to_NuGet }}
-      Semi_Avalonia: ${{ inputs.Semi_Avalonia }}
-      Semi_Avalonia_ColorPicker: ${{ inputs.Semi_Avalonia_ColorPicker }}
-      Semi_Avalonia_DataGrid: ${{ inputs.Semi_Avalonia_DataGrid }}
-      Semi_Avalonia_TreeDataGrid: ${{ inputs.Semi_Avalonia_TreeDataGrid }}
-
-  publish:
-    uses: ./.github/workflows/publish.yml
-
-  draft-release:
-    needs: [ nuget,publish ]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/download-artifact@v4.3.0
-
-      - name: Display structure of downloaded files
-        run: ls -R
-
-      - name: Zip artifacts
-        run: |
-          zip -rj Semi.Avalonia.Demo.Desktop.win-x64.zip Semi.Avalonia.Demo.Desktop.win-x64
-          zip -rj Semi.Avalonia.Demo.Desktop.win-x64.NativeAOT.zip Semi.Avalonia.Demo.Desktop.win-x64.NativeAOT
-          zip -rj Semi.Avalonia.Demo.Desktop.linux-x64.zip Semi.Avalonia.Demo.Desktop.linux-x64
-          zip -rj Semi.Avalonia.Demo.Desktop.linux-x64.NativeAOT.zip Semi.Avalonia.Demo.Desktop.linux-x64.NativeAOT
-          zip -rj Semi.Avalonia.Demo.Drm.linux-x64.zip Semi.Avalonia.Demo.Drm.linux-x64
-          zip -rj Semi.Avalonia.Demo.Drm.linux-x64.NativeAOT.zip Semi.Avalonia.Demo.Drm.linux-x64.NativeAOT
-          zip -rj Semi.Avalonia.Demo.Desktop.osx-arm64.zip Semi.Avalonia.Demo.Desktop.osx-arm64
-          cd Semi.Avalonia.Demo.Desktop.osx-arm64.NativeAOT
-          zip -r ../Semi.Avalonia.Demo.Desktop.osx-arm64.NativeAOT.zip .
-
-      - name: Display structure of zipped files
-        run: ls -R
-
-      - name: Release
-        uses: softprops/action-gh-release@v2.3.2
-        if: startsWith(github.ref, 'refs/tags/') || github.event_name == 'workflow_dispatch'
-        with:
-          generate_release_notes: true
-          draft: true
-          files: |
-            nugets/*.nupkg
-            android-arm64/*.apk
-            *.zip

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 IRIHI Technology
+Copyright (c) 2022 iriHi Technology
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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,41 +26,31 @@ dotnet add package Semi.Avalonia
 Include Semi Design Styles in application:
 
 ```xaml
-<Application
-    ...
-    xmlns:semi="https://irihi.tech/semi">
-    <Application.Styles>
-        <semi:SemiTheme Locale="zh-CN" />
-    </Application.Styles>
-</Application>
+<Application.Styles>
+<!-- You can still reference in old way.  -->
+<!-- <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" /> -->
+    <semi:SemiTheme Locale="zh-cn" />
+</Application.Styles>
 ```
 
 That's all.
 
-ColorPicker, DataGrid, TreeDataGrid, Dock, Tabalonia and AvaloniaEdit are distributed in separated packages. Please install if you need.
+ColorPicker, DataGrid and TreeDataGrid are distributed in separated packages. Please install if you need.
 
 ```bash
 dotnet add package Semi.Avalonia.ColorPicker
 dotnet add package Semi.Avalonia.DataGrid
 dotnet add package Semi.Avalonia.TreeDataGrid
-dotnet add package Semi.Avalonia.Dock
-dotnet add package Semi.Avalonia.Tabalonia
-dotnet add package Semi.Avalonia.AvaloniaEdit
 ```
 
 ```xaml
 <Application.Styles>
-    <semi:ColorPickerSemiTheme />
-    <semi:DataGridSemiTheme />
-    <semi:TreeDataGridSemiTheme />
-    <semi:DockSemiTheme />
-    <semi:TabaloniaSemiTheme />
-    <semi:AvaloniaEditSemiTheme />
+    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
 </Application.Styles>
 ```
 
-Notice: Dock, Tabalonia and AvaloniaEdit are delivered via nuget for free, but not open source. Please read the license and agree to continue use these packages. If you need source code, please contact us via email: [contact@irihi.tech](contact@irihi.tech)
-
 ## Demo
 
 You can always download demo executable to play around with Semi Avalonia Themes.
@@ -71,14 +60,12 @@ You can always download demo executable to play around with Semi Avalonia Themes
 
 We offer limited free community support for Semi Avalonia and Ursa. If you have any question or suggestion, feel free to raise issues and discussions via GitHub, and you are welcomed to join our group via FeiShu(Lark)
 
-![FeiShu](./docs/community-support.png)
+![FeiShu](./docs/community-support.png) 
 
 ## Version compatibility
 
 | 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,44 +26,35 @@ dotnet add package Semi.Avalonia
 在样式中引用 Semi 主题：
 
 ```xaml
-<Application
-    ...
-    xmlns:semi="https://irihi.tech/semi">
-    <Application.Styles>
-        <semi:SemiTheme Locale="zh-CN" />
-    </Application.Styles>
-</Application>
+<Application.Styles>
+<!-- 您仍然可以使用旧版方式引用  -->
+<!-- <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" /> -->
+    <semi:SemiTheme Locale="zh-cn" />
+</Application.Styles>
 ```
 
 这样就可以了。
 
-ColorPicker、DataGrid、TreeDataGrid、Dock、Tabalonia 和 AvaloniaEdit 的样式单独分发，如果需要请安装并引用。
+ColorPicker、DataGrid 和 TreeDataGrid 的样式单独分发，如果需要请安装并引用。
 
 ```bash
 dotnet add package Semi.Avalonia.ColorPicker
 dotnet add package Semi.Avalonia.DataGrid
 dotnet add package Semi.Avalonia.TreeDataGrid
-dotnet add package Semi.Avalonia.Dock
-dotnet add package Semi.Avalonia.Tabalonia
-dotnet add package Semi.Avalonia.AvaloniaEdit
 ```
 
 ```xaml
 <Application.Styles>
-    <semi:ColorPickerSemiTheme />
-    <semi:DataGridSemiTheme />
-    <semi:TreeDataGridSemiTheme />
-    <semi:DockSemiTheme />
-    <semi:TabaloniaSemiTheme />
-    <semi:AvaloniaEditSemiTheme />
+    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
 </Application.Styles>
 ```
 
-注意：Dock、Tabalonia 和 AvaloniaEdit 是通过 NuGet 免费分发的，但不是开源的。请阅读许可协议并同意后继续使用这些包。如果您需要源代码，请通过电子邮件联系我们：[contact@irihi.tech](contact@irihi.tech)
-
 ## 示例
 
 您可以从 Semi Avalonia 的 release 页下载并试用 Semi Avalonia 的展示应用。
+
 <https://github.com/irihitech/Semi.Avalonia/releases>
 
 ## 社区支持
@@ -73,12 +63,11 @@ dotnet add package Semi.Avalonia.AvaloniaEdit
 
 ![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>
-        <AvaloniaVersion>12.0.999-cibuild0058575-alpha</AvaloniaVersion>
-        <DataGridVersion>11.3.0</DataGridVersion>
-        <CommunityToolkitVersion>8.4.0</CommunityToolkitVersion>
-    </PropertyGroup>
+  <PropertyGroup>
+    <Nullable>enable</Nullable>
+    <AvaloniaVersion>11.1.3</AvaloniaVersion>
+  </PropertyGroup>
 </Project>

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,7 +5,10 @@
         <Nullable>enable</Nullable>
         <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
         <!-- Uncomment below to enable Native AOT compilation-->
-        <!--<PublishAot>true</PublishAot>-->
+        <!--
+        <PublishAot>true</PublishAot>
+        <IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>
+        -->
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
@@ -18,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/README.md

@@ -63,7 +63,7 @@ private static void SilenceConsole()
 6. Publish the app to Linux
 
 ```bash
-dotnet publish demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj -c Release -r linux-x64 --sc /p:PublishSingleFile=true -p:IncludeNativeLibrariesForSelfExtract=true
+dotnet publish demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj -c Release -r linux-x64 --sc -p:PublishSingleFile=true -p:IncludeNativeLibrariesForSelfExtract=true
 ```
 
 Add the following code to the csproj file for AOT publishing

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

@@ -63,7 +63,7 @@ private static void SilenceConsole()
 6. 发布程序到Linux
 
 ```bash
-dotnet publish demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj -c Release -r linux-x64 --sc /p:PublishSingleFile=true -p:IncludeNativeLibrariesForSelfExtract=true
+dotnet publish demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj -c Release -r linux-x64 --sc -p:PublishSingleFile=true -p:IncludeNativeLibrariesForSelfExtract=true
 ```
 
 AOT发布需要在csproj文件中添加以下代码

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

@@ -5,7 +5,10 @@
         <Nullable>enable</Nullable>
         <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
         <!-- Uncomment below to enable Native AOT compilation-->
-        <!--<PublishAot>true</PublishAot>-->
+        <!--
+        <PublishAot>true</PublishAot>
+        <IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>
+        -->
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
@@ -18,15 +21,17 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <TrimmerRootDescriptor Include="Roots.xml"/>
+        <TrimmerRootDescriptor Include="Roots.xml" />
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
+        <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="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/Program.cs

@@ -11,7 +11,10 @@ internal sealed partial class Program
 {
     private static Task Main(string[] args) => BuildAvaloniaApp()
         .WithSourceHanSansCNFont()
-        .StartBrowserAppAsync("out");
+        .StartBrowserAppAsync("out", new BrowserPlatformOptions
+        {
+            RenderingMode = [ BrowserRenderingMode.WebGL2, BrowserRenderingMode.WebGL1, BrowserRenderingMode.Software2D],
+        });
 
     public static AppBuilder BuildAvaloniaApp()
         => AppBuilder.Configure<App>();

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"
-    x:DataType="viewModels:ApplicationViewModel"
-    xmlns:semi="https://irihi.tech/semi"
-    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels">
+    xmlns:semi="https://irihi.tech/semi">
     <Application.Styles>
-        <semi:SemiTheme Locale="zh-CN" />
-        <semi:SemiPopupAnimations />
-        <semi:ColorPickerSemiTheme />
-        <!-- <semi:DataGridSemiTheme /> -->
-        <!-- <semi:TreeDataGridSemiTheme /> -->
+        <!-- You can still reference in old way.  -->
+        <!-- <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" /> -->
+        <semi:SemiTheme Locale="zh-cn" />
+        <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+        <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
     </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("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("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("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("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("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("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("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("SemiColorText0", "Text 0"),
-        new("SemiColorText1", "Text 1"),
-        new("SemiColorText2", "Text 2"),
-        new("SemiColorText3", "Text 3")
-    ];
-
-    public static IReadOnlyList<Tuple<string, string>> LinkTokens { get; } =
-    [
-        new("SemiColorLink", "Link"),
-        new("SemiColorLinkPointerover", "Link Pointerover"),
-        new("SemiColorLinkActive", "Link Active"),
-        new("SemiColorLinkVisited", "Link Visited")
-    ];
-
-    public static IReadOnlyList<Tuple<string, string>> BackgroundTokens { get; } =
-    [
-        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("SemiColorFill0", "Fill 0"),
-        new("SemiColorFill1", "Fill 1"),
-        new("SemiColorFill2", "Fill 2")
-    ];
-
-    public static IReadOnlyList<Tuple<string, string>> BorderTokens { get; } =
-    [
-        new("SemiColorBorder", "Border"),
-        new("SemiColorFocusBorder", "Focus Border")
-    ];
-
-    public static IReadOnlyList<Tuple<string, string>> DisabledTokens { get; } =
-    [
-        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("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("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}"
-                            Content="{StaticResource SemiIconCopy}" />
+                            Theme="{DynamicResource BorderlessButton}">
+                            <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}}"
-                            Theme="{DynamicResource  IconBorderlessButton}"
-                            Content="{StaticResource SemiIconCopy}" />
+                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            Theme="{DynamicResource BorderlessButton}">
+                            <PathIcon
+                                Width="12"
+                                Height="12"
+                                Data="{StaticResource CopyIcon}"
+                                Foreground="{Binding $parent[Button].Foreground}" />
+                        </Button>
 
-                        <!--  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}"
-                            Content="{StaticResource SemiIconCopy}" />
-                        <SelectableTextBlock
-                            Grid.Row="5"
-                            Grid.Column="0"
-                            VerticalAlignment="Center"
-                            Text="{TemplateBinding Hex2}" />
-                        <Button
-                            Grid.Row="5"
-                            Grid.Column="1"
-                            Command="{Binding $parent[controls:ColorDetailControl].Copy}"
-                            CommandParameter="{x:Static controls:ColorDetailControl.KEY_Hex2}"
-                            Theme="{DynamicResource  IconBorderlessButton}"
-                            Content="{StaticResource SemiIconCopy}" />
+                            Theme="{DynamicResource BorderlessButton}">
+                            <PathIcon
+                                Width="12"
+                                Height="12"
+                                Data="{StaticResource CopyIcon}"
+                                Foreground="{Binding $parent[Button].Foreground}" />
+                        </Button>
 
-                        <!--  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}"
-                            Content="{StaticResource SemiIconCopy}" />
-
+                            Theme="{DynamicResource BorderlessButton}">
+                            <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 =
-        AvaloniaProperty.Register<ColorDetailControl, string?>(nameof(ResourceKey));
-
+    
+    public static readonly StyledProperty<string?> ResourceKeyProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
+        nameof(ResourceKey));
     public string? ResourceKey
     {
         get => GetValue(ResourceKeyProperty);
         set => SetValue(ResourceKeyProperty, value);
     }
 
-    public static readonly StyledProperty<string?> ResourceNameProperty =
-        AvaloniaProperty.Register<ColorDetailControl, string?>(nameof(ResourceName));
+    public static readonly StyledProperty<string?> ResourceNameProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
+        nameof(ResourceName));
 
     public string? ResourceName
     {
@@ -34,8 +32,8 @@ public class ColorDetailControl : TemplatedControl
         set => SetValue(ResourceNameProperty, value);
     }
 
-    public static readonly StyledProperty<string?> ColorResourceKeyProperty =
-        AvaloniaProperty.Register<ColorDetailControl, string?>(nameof(ColorResourceKey));
+    public static readonly StyledProperty<string?> ColorResourceKeyProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
+        nameof(ColorResourceKey));
 
     public string? ColorResourceKey
     {
@@ -43,39 +41,27 @@ public class ColorDetailControl : TemplatedControl
         set => SetValue(ColorResourceKeyProperty, value);
     }
 
-    public static readonly DirectProperty<ColorDetailControl, string?> HexProperty =
-        AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(Hex), o => o.Hex);
-
+    public static readonly DirectProperty<ColorDetailControl, string?> HexProperty = AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(
+        nameof(Hex), o => o.Hex);
     private string? _hex;
-
     public string? Hex
     {
         get => _hex;
         private set => SetAndRaise(HexProperty, ref _hex, value);
     }
-
-    private string? _hex2;
-
-    public static readonly DirectProperty<ColorDetailControl, string?> Hex2Property =
-        AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(Hex2), o => o.Hex2);
-
-    public string? Hex2
-    {
-        get => _hex2;
-        set => SetAndRaise(Hex2Property, ref _hex2, value);
-    }
-
-    public static readonly DirectProperty<ColorDetailControl, string?> OpacityNumberProperty =
-        AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(OpacityNumber), o => o.OpacityNumber);
-
+    
+    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);
-            var hex2 = ColorConverter.ToHex.Convert(brush.Color, typeof(string), true, CultureInfo.InvariantCulture);
-            Hex = hex1 as string;
-            Hex2 = hex2 as string;
-            OpacityNumber = brush.Opacity.ToString(CultureInfo.InvariantCulture);
+            Hex = b.Color.ToString().ToUpperInvariant();
+            OpacityNumber = b.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,
-                KEY_Hex => Hex,
-                KEY_Hex2 => Hex2,
-                KEY_Opacity => OpacityNumber,
-                KEY_ColorResourceKey => ColorResourceKey,
-                _ => string.Empty
-            };
+                case KEY_ResourceKey: text = ResourceKey;
+                    break;
+                case KEY_Hex: text = Hex;
+                    break;
+                case KEY_Opacity: text = OpacityNumber;
+                    break;
+                case KEY_ColorResourceKey: text = ColorResourceKey;
+                    break;
+                default: text = string.Empty; break;
+            }
         }
 
         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="Height" Value="60" />
-        <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="Template">
+        <Setter Property="controls:ColorItemControl.Width" Value="120" />
+        <Setter Property="controls:ColorItemControl.Height" Value="60" />
+        <Setter Property="controls:ColorItemControl.Cursor" Value="Hand" />
+        <Setter Property="controls:ColorItemControl.Template">
             <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 =
-        AvaloniaProperty.Register<ColorItemControl, string?>(nameof(ColorName));
+    public static readonly StyledProperty<string?> ColorNameProperty = AvaloniaProperty.Register<ColorItemControl, string?>(
+        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(colorItemViewModel);
-                break;
-            case ColorResource colorResource:
-                WeakReferenceMessenger.Default.Send(colorResource);
-                break;
+            WeakReferenceMessenger.Default.Send(v);
         }
+        
     }
 }

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

@@ -0,0 +1,134 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    x:CompileBindings="True"
+    x:DataType="viewModels:FunctionalColorGroupViewModel">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="{x:Type controls:FunctionalColorGroupControl}" TargetType="controls:FunctionalColorGroupControl">
+        <!--  Add Resources Here  -->
+        <Setter Property="controls:FunctionalColorGroupControl.Template">
+            <ControlTemplate x:DataType="viewModels:FunctionalColorGroupViewModel" TargetType="controls:FunctionalColorGroupControl">
+                <Grid RowDefinitions="Auto, *">
+                    <TextBlock
+                        Grid.Row="0"
+                        Margin="0,16,0,0"
+                        Classes="H3"
+                        Text="{TemplateBinding Title}"
+                        Theme="{DynamicResource TitleTextBlock}" />
+                    <TabControl Grid.Row="1">
+                        <TabItem Header="Light">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightColors}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="70" Header="Color">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <controls:ColorItemControl
+                                                    Width="40"
+                                                    Height="20"
+                                                    Background="{Binding Brush}"
+                                                    CornerRadius="3" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    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,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Hex}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="80" Header="Opacity">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    HorizontalAlignment="Right"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Brush.Opacity}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                        <TabItem Header="Dark">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkColors}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="70" Header="Color">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <controls:ColorItemControl
+                                                    Width="40"
+                                                    Height="20"
+                                                    Background="{Binding Brush}"
+                                                    CornerRadius="3" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    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,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Hex}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="80" Header="Opacity">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    HorizontalAlignment="Right"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Brush.Opacity}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                    </TabControl>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</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 =
-        AvaloniaProperty.Register<FunctionalColorGroupControl, string?>(nameof(Title));
-
+    public static readonly StyledProperty<string?> TitleProperty = AvaloniaProperty.Register<FunctionalColorGroupControl, string?>(
+        nameof(Title));
     public string? Title
     {
         get => GetValue(TitleProperty);
         set => SetValue(TitleProperty, value);
     }
-
-    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> LightColorsProperty =
-        AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(nameof(LightColors),
-            o => o.LightColors, (o, v) => o.LightColors = v);
-
+    
+    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> LightColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(
+        nameof(LightColors), o => o.LightColors, (o, v) => o.LightColors = v);
     private IEnumerable? _lightColors;
-
     public IEnumerable? LightColors
     {
         get => _lightColors;
         set => SetAndRaise(LightColorsProperty, ref _lightColors, value);
     }
-
-    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> DarkColorsProperty =
-        AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(nameof(DarkColors),
-            o => o.DarkColors, (o, v) => o.DarkColors = v);
-
+    
+    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> DarkColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(
+        nameof(DarkColors), o => o.DarkColors, (o, v) => o.DarkColors = v);
     private IEnumerable? _darkColors;
-
     public IEnumerable? DarkColors
     {
         get => _darkColors;
         set => SetAndRaise(DarkColorsProperty, ref _darkColors, value);
     }
+    
+    
 }

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

@@ -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/AboutUs.axaml

@@ -1,237 +0,0 @@
-<UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.AboutUs"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:collections="clr-namespace:Avalonia.Collections;assembly=Avalonia.Base"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:iri="https://irihi.tech/shared"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
-    x:DataType="vm:AboutUsViewModel"
-    x:CompileBindings="True"
-    d:DesignHeight="450"
-    d:DesignWidth="800"
-    mc:Ignorable="d">
-    <UserControl.Resources>
-        <ResourceDictionary>
-            <ResourceDictionary.ThemeDictionaries>
-                <ResourceDictionary x:Key="Light">
-                    <collections:AvaloniaList x:Key="CanvasPalette" x:TypeArguments="Color">
-                        <Color>#FFFDB7A5</Color>
-                        <Color>#FFF6A0B5</Color>
-                        <Color>#FFDD9BE0</Color>
-                        <Color>#FFC4A7E9</Color>
-                        <Color>#FFA7B3E1</Color>
-                        <Color>#FF98CDFD</Color>
-                        <Color>#FF95D8F8</Color>
-                    </collections:AvaloniaList>
-                    <LinearGradientBrush x:Key="TileTitleForeground" StartPoint="">
-                        <GradientStop Offset="0.0" Color="#FFA20B48" />
-                        <GradientStop Offset="0.3" Color="#FF71168A" />
-                        <GradientStop Offset="0.6" Color="#FF46259E" />
-                        <GradientStop Offset="1.0" Color="#FF28348C" />
-                    </LinearGradientBrush>
-                </ResourceDictionary>
-                <ResourceDictionary x:Key="Dark">
-                    <collections:AvaloniaList x:Key="CanvasPalette" x:TypeArguments="Color">
-                        <Color>#FFB42019</Color>
-                        <Color>#FFA41751</Color>
-                        <Color>#FF731F8A</Color>
-                        <Color>#FF582EA0</Color>
-                        <Color>#FF29368E</Color>
-                        <Color>#FF135CB8</Color>
-                        <Color>#FF0366A9</Color>
-                    </collections:AvaloniaList>
-                    <LinearGradientBrush x:Key="TileTitleForeground">
-                        <GradientStop Offset="0.0" Color="#FFF7A8BC" />
-                        <GradientStop Offset="0.3" Color="#FFDDA0E1" />
-                        <GradientStop Offset="0.6" Color="#FFBEADE9" />
-                        <GradientStop Offset="1.0" Color="#FFA7B4E2" />
-                    </LinearGradientBrush>
-                </ResourceDictionary>
-            </ResourceDictionary.ThemeDictionaries>
-            <ControlTheme x:Key="TileButton" TargetType="Button">
-                <Setter Property="HorizontalContentAlignment" Value="Left" />
-                <Setter Property="Padding" Value="24" />
-                <Setter Property="VerticalContentAlignment" Value="Center" />
-                <Setter Property="Template">
-                    <ControlTemplate>
-                        <Border
-                            Padding="0"
-                            Classes="Hover"
-                            Cursor="Hand"
-                            Theme="{DynamicResource CardBorder}">
-                            <Border.Transitions>
-                                <Transitions>
-                                    <BrushTransition Property="BorderBrush" Duration="0.5" />
-                                </Transitions>
-                            </Border.Transitions>
-                            <ContentPresenter
-                                Padding="{TemplateBinding Padding}"
-                                HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                Content="{TemplateBinding Content}"
-                                ContentTemplate="{TemplateBinding ContentTemplate}" />
-                        </Border>
-                    </ControlTemplate>
-                </Setter>
-                <Style Selector="^:pointerover /template/ Border">
-                    <Setter Property="BorderBrush" Value="{DynamicResource TileTitleForeground}" />
-                </Style>
-            </ControlTheme>
-        </ResourceDictionary>
-    </UserControl.Resources>
-    <UserControl.Styles>
-        <Style Selector="TextBlock.TileTitle">
-            <Setter Property="FontWeight" Value="700" />
-            <Setter Property="FontSize" Value="24" />
-            <Setter Property="Margin" Value="0 0 0 8" />
-            <Setter Property="Foreground" Value="{DynamicResource TileTitleForeground}" />
-        </Style>
-    </UserControl.Styles>
-    <Grid RowDefinitions="*, Auto">
-        <ScrollViewer>
-            <StackPanel>
-                <Grid
-                    Margin="0,96,0,48"
-                    HorizontalAlignment="Center"
-                    ColumnDefinitions="*, *"
-                    RowDefinitions="*, *">
-                    <iri:IrihiLogo
-                        Grid.Row="0"
-                        Grid.RowSpan="2"
-                        Grid.Column="0"
-                        Fill="{DynamicResource TextBlockSecondaryForeground}"
-                        Width="96"
-                        Margin="0,0,24,0"
-                        VerticalAlignment="Center" />
-                    <TextBlock
-                        Grid.Row="0"
-                        Grid.Column="1"
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Bottom"
-                        Classes="Secondary"
-                        FontSize="48"
-                        FontWeight="700"
-                        Text="铱泓科技" />
-                    <TextBlock
-                        Grid.Row="1"
-                        Grid.Column="1"
-                        Margin="12,0,0,0"
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Top"
-                        Classes="Secondary"
-                        FontSize="16"
-                        Text="IRIHI Technology" />
-                </Grid>
-                <TextBlock
-                    HorizontalAlignment="Center"
-                    Classes="Tertiary"
-                    FontSize="20"
-                    FontWeight="700"
-                    Text="聚焦生产力的美学进化" />
-                <TextBlock
-                    HorizontalAlignment="Center"
-                    Classes="Tertiary"
-                    FontSize="20"
-                    Text="Aesthetic Evolution of Productivity" />
-                <UniformGrid
-                    MaxWidth="810"
-                    Margin="24"
-                    HorizontalAlignment="Center"
-                    Columns="2">
-                    <Button
-                        Margin="8"
-                        Command="{Binding NavigateCommand}"
-                        CommandParameter="semi"
-                        Theme="{DynamicResource TileButton}">
-                        <StackPanel HorizontalAlignment="Left">
-                            <TextBlock Classes="TileTitle" Text="Semi" />
-                            <StackPanel Orientation="Horizontal" Margin="0 0 0 8">
-                                <Label Theme="{DynamicResource TagLabel}" Classes="Blue Ghost">Open Source</Label>
-                            </StackPanel>
-                            <TextBlock Text="开箱即用的独立主题库" />
-                            <TextBlock Text="A ready-to-use standalone theme library" />
-                        </StackPanel>
-                    </Button>
-                    <Button
-                        Margin="8"
-                        Command="{Binding NavigateCommand}"
-                        CommandParameter="ursa"
-                        Theme="{DynamicResource TileButton}">
-                        <StackPanel HorizontalAlignment="Left">
-                            <TextBlock Classes="TileTitle" Text="Ursa" />
-                            <StackPanel Orientation="Horizontal" Margin="0 0 0 8">
-                                <Label Theme="{DynamicResource TagLabel}" Classes="Blue Ghost">Open Source</Label>
-                            </StackPanel>
-                            <TextBlock Text="高性能企业级桌面客户端控件库" />
-                            <TextBlock Text="High-performance enterprise level control library for desktop apps" />
-                        </StackPanel>
-                    </Button>
-                    <Button
-                        Margin="8"
-                        Command="{Binding NavigateCommand}"
-                        CommandParameter="mantra"
-                        Theme="{DynamicResource TileButton}">
-                        <StackPanel HorizontalAlignment="Left">
-                            <TextBlock Classes="TileTitle" Text="Mantra" />
-                            <StackPanel Orientation="Horizontal" Margin="0 0 0 8">
-                                <Label Theme="{DynamicResource TagLabel}" Classes="Purple Ghost">Commercial</Label>
-                            </StackPanel>
-                            <TextBlock Text="高性能文字排版渲染控件库" />
-                            <TextBlock Text="High-performance typography control library" />
-                        </StackPanel>
-                    </Button>
-                    <Button
-                        Margin="8"
-                        Command="{Binding NavigateCommand}"
-                        CommandParameter="huska"
-                        Theme="{DynamicResource TileButton}">
-                        <StackPanel HorizontalAlignment="Left">
-                            <TextBlock Classes="TileTitle" Text="Huska" />
-                            <StackPanel Orientation="Horizontal" Margin="0 0 0 8">
-                                <Label Theme="{DynamicResource TagLabel}" Classes="Purple Ghost">Commercial</Label>
-                            </StackPanel>
-                            <TextBlock Text="手绘风格主题库" />
-                            <TextBlock Text="Hand-drawing theme library" />
-                        </StackPanel>
-                    </Button>
-                </UniformGrid>
-            </StackPanel>
-        </ScrollViewer>
-        <StackPanel
-            Grid.Row="1"
-            Margin="0,16"
-            Spacing="32"
-            HorizontalAlignment="Center"
-            Orientation="Horizontal">
-            <StackPanel Orientation="Horizontal">
-                <HyperlinkButton
-                    Classes="WithIcon"
-                    VerticalAlignment="Center"
-                    Content="Homepage"
-                    NavigateUri="https://irihi.tech">
-                    <HyperlinkButton.Styles>
-                        <Style Selector=".WithIcon /template/ PathIcon">
-                            <Setter Property="Data" Value="{StaticResource SemiIconHome}" />
-                        </Style>
-                    </HyperlinkButton.Styles>
-                </HyperlinkButton>
-            </StackPanel>
-            <StackPanel Orientation="Horizontal">
-                <HyperlinkButton
-                    Classes="WithIcon"
-                    Content="GitHub"
-                    NavigateUri="https://github.com/irihitech">
-                    <HyperlinkButton.Styles>
-                        <Style Selector=".WithIcon /template/ PathIcon">
-                            <Setter Property="Data" Value="{StaticResource SemiIconGithubLogo}" />
-                        </Style>
-                    </HyperlinkButton.Styles>
-                </HyperlinkButton>
-            </StackPanel>
-        </StackPanel>
-    </Grid>
-</UserControl>

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

@@ -1,24 +0,0 @@
-using Avalonia.Controls;
-using Avalonia.Interactivity;
-using Semi.Avalonia.Demo.ViewModels;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class AboutUs : UserControl
-{
-    public AboutUs()
-    {
-        InitializeComponent();
-        this.DataContext = new AboutUsViewModel();
-    }
-
-    protected override void OnLoaded(RoutedEventArgs e)
-    {
-        base.OnLoaded(e);
-        if (this.DataContext is AboutUsViewModel vm)
-        {
-            var launcher = TopLevel.GetTopLevel(this)?.Launcher;
-            vm.Launcher = launcher;
-        }
-    }
-}

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

@@ -3,15 +3,15 @@
     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="clr-namespace:Semi.Avalonia.Demo.Pages"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     d:DesignHeight="450"
     d:DesignWidth="800"
     x:CompileBindings="False"
-    x:DataType="vm:AutoCompleteBoxDemoViewModel"
+    x:DataType="local:AutoCompleteBoxDemoViewModel"
     mc:Ignorable="d">
     <Design.DataContext>
-        <vm:AutoCompleteBoxDemoViewModel />
+        <local:AutoCompleteBoxDemoViewModel />
     </Design.DataContext>
     <StackPanel HorizontalAlignment="Left" Spacing="20">
         <StackPanel.Styles>
@@ -21,7 +21,7 @@
                     <Binding Path="States" />
                 </Setter>
                 <Setter Property="ItemTemplate">
-                    <DataTemplate DataType="vm:StateData">
+                    <DataTemplate DataType="local:StateData">
                         <TextBlock Text="{Binding Name}" />
                     </DataTemplate>
                 </Setter>

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

@@ -1,5 +1,9 @@
+using System.Collections.ObjectModel;
+using Avalonia;
 using Avalonia.Controls;
-using Semi.Avalonia.Demo.ViewModels;
+using Avalonia.Markup.Xaml;
+using System.Collections.Generic;
+using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -10,4 +14,86 @@ public partial class AutoCompleteBoxDemo : UserControl
         InitializeComponent();
         this.DataContext = new AutoCompleteBoxDemoViewModel();
     }
+}
+
+public class AutoCompleteBoxDemoViewModel: ObservableObject
+{
+    public ObservableCollection<StateData> States { get; set; }
+
+    public AutoCompleteBoxDemoViewModel()
+    {
+        States = new ObservableCollection<StateData>(GetStates());
+        
+    }
+
+    private static List<StateData> GetStates()
+    {
+        return new List<StateData>
+        {
+            new StateData("Alabama", "AL", "Montgomery"),
+            new StateData("Alaska", "AK", "Juneau"),
+            new StateData("Arizona", "AZ", "Phoenix"),
+            new StateData("Arkansas", "AR", "Little Rock"),
+            new StateData("California", "CA", "Sacramento"),
+            new StateData("Colorado", "CO", "Denver"),
+            new StateData("Connecticut", "CT", "Hartford"),
+            new StateData("Delaware", "DE", "Dover"),
+            new StateData("Florida", "FL", "Tallahassee"),
+            new StateData("Georgia", "GA", "Atlanta"),
+            new StateData("Hawaii", "HI", "Honolulu"),
+            new StateData("Idaho", "ID", "Boise"),
+            new StateData("Illinois", "IL", "Springfield"),
+            new StateData("Indiana", "IN", "Indianapolis"),
+            new StateData("Iowa", "IA", "Des Moines"),
+            new StateData("Kansas", "KS", "Topeka"),
+            new StateData("Kentucky", "KY", "Frankfort"),
+            new StateData("Louisiana", "LA", "Baton Rouge"),
+            new StateData("Maine", "ME", "Augusta"),
+            new StateData("Maryland", "MD", "Annapolis"),
+            new StateData("Massachusetts", "MA", "Boston"),
+            new StateData("Michigan", "MI", "Lansing"),
+            new StateData("Minnesota", "MN", "St. Paul"),
+            new StateData("Mississippi", "MS", "Jackson"),
+            new StateData("Missouri", "MO", "Jefferson City"),
+            new StateData("Montana", "MT", "Helena"),
+            new StateData("Nebraska", "NE", "Lincoln"),
+            new StateData("Nevada", "NV", "Carson City"),
+            new StateData("New Hampshire", "NH", "Concord"),
+            new StateData("New Jersey", "NJ", "Trenton"),
+            new StateData("New Mexico", "NM", "Santa Fe"),
+            new StateData("New York", "NY", "Albany"),
+            new StateData("North Carolina", "NC", "Raleigh"),
+            new StateData("North Dakota", "ND", "Bismarck"),
+            new StateData("Ohio", "OH", "Columbus"),
+            new StateData("Oklahoma", "OK", "Oklahoma City"),
+            new StateData("Oregon", "OR", "Salem"),
+            new StateData("Pennsylvania", "PA", "Harrisburg"),
+            new StateData("Rhode Island", "RI", "Providence"),
+            new StateData("South Carolina", "SC", "Columbia"),
+            new StateData("South Dakota", "SD", "Pierre"),
+            new StateData("Tennessee", "TN", "Nashville"),
+            new StateData("Texas", "TX", "Austin"),
+            new StateData("Utah", "UT", "Salt Lake City"),
+            new StateData("Vermont", "VT", "Montpelier"),
+            new StateData("Virginia", "VA", "Richmond"),
+            new StateData("Washington", "WA", "Olympia"),
+            new StateData("West Virginia", "WV", "Charleston"),
+            new StateData("Wisconsin", "WI", "Madison"),
+            new StateData("Wyoming", "WY", "Cheyenne"),
+        };
+    }
+}
+
+public class StateData
+{
+    public string Name { get; private set; }
+    public string Abbreviation { get; private set; }
+    public string Capital { get; private set; }
+
+    public StateData(string name, string abbreviation, string capital)
+    {
+        Name = name;
+        Abbreviation = abbreviation;
+        Capital = capital;
+    }
 }

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

@@ -18,4 +18,4 @@
             <TextBlock>Shadow on Pointerover</TextBlock>
         </Border>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -1,4 +1,6 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 

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

@@ -112,14 +112,14 @@
                     IsEnabled="False" />
             </StackPanel>
             <StackPanel Orientation="Horizontal" Spacing="8">
-                <DropDownButton Content="Default" Classes="Success" />
-                <DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success" />
-                <DropDownButton Content="Outline" Theme="{DynamicResource OutlineDropDownButton}" Classes="Success" />
-                <DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success" />
-                <DropDownButton Content="Default" Classes="Success" IsEnabled="False" />
-                <DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success" IsEnabled="False" />
-                <DropDownButton Content="Outline" Theme="{DynamicResource OutlineDropDownButton}" Classes="Success" IsEnabled="False" />
-                <DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success" IsEnabled="False" />
+                <DropDownButton Content="Default" Classes="Success"/>
+                <DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success"/>
+                <DropDownButton Content="Outline" Theme="{DynamicResource OutlineDropDownButton}" Classes="Success"/>
+                <DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success"/>
+                <DropDownButton Content="Default" Classes="Success" IsEnabled="False"/>
+                <DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success" IsEnabled="False"/>
+                <DropDownButton Content="Outline" Theme="{DynamicResource OutlineDropDownButton}" Classes="Success" IsEnabled="False"/>
+                <DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success" IsEnabled="False"/>
             </StackPanel>
             <StackPanel Orientation="Horizontal" Spacing="8">
                 <DropDownButton Classes="Small" Content="Small" />
@@ -139,7 +139,7 @@
             </StackPanel>
             <StackPanel Orientation="Horizontal" Spacing="8">
                 <SplitButton Content="Default" Classes="Success" />
-                <SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}" Classes="Success" />
+                <SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}"  Classes="Success" />
                 <SplitButton Content="Outline" Theme="{DynamicResource OutlineSplitButton}" Classes="Success" />
                 <SplitButton Content="Borderless" Theme="{DynamicResource BorderlessSplitButton}" Classes="Success" />
                 <SplitButton Content="Default" Classes="Success" IsEnabled="False" />
@@ -165,7 +165,7 @@
             </StackPanel>
             <StackPanel Orientation="Horizontal" Spacing="8">
                 <ToggleSplitButton Content="Default" Classes="Success" />
-                <ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True" />
+                <ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True"  />
                 <ToggleSplitButton Content="Default" Classes="Success" IsEnabled="False" />
                 <ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True" IsEnabled="False" />
             </StackPanel>

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

@@ -1,4 +1,6 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 

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

@@ -32,4 +32,4 @@
                 Text="A.S.I.A" />
         </ButtonSpinner>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -1,5 +1,7 @@
 using System;
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -29,6 +31,7 @@ public partial class ButtonSpinnerDemo : UserControl
 
             txtBox.Text = _mountains[value];
         }
+
     }
 
     private readonly string[] _mountains = new[]

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

@@ -1,4 +1,6 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 

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

@@ -11,4 +11,4 @@
         <Calendar />
         <Calendar SelectionMode="SingleRange" />
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -1,4 +1,6 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -8,4 +10,9 @@ public partial class CalendarDemo : UserControl
     {
         InitializeComponent();
     }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
 }

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

@@ -1,4 +1,7 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 

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

@@ -1,4 +1,6 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 

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
-                    Theme="{StaticResource SimpleColorPicker}"
-                    HsvColor="hsv(180,80%,70%)" />
-                <ColorPicker
-                    Theme="{StaticResource HexSimpleColorPicker}"
-                    HsvColor="hsv(180,80%,70%)" />
+                <ColorPicker ColorSpectrumShape="Box" Theme="{DynamicResource HexColorPicker}">
+                    <ColorPicker.Palette>
+                        <colorPicker:SemiColorLightPalette />
+                    </ColorPicker.Palette>
+                </ColorPicker>
+            </StackPanel>
+            <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/ColorPickerDemo.axaml.cs

@@ -1,4 +1,6 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 

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

@@ -4,53 +4,40 @@
     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"
     d:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
     <Design.DataContext>
-        <vm:ComboBoxDemoViewModel />
+        <pages:ComboBoxDemoViewModel />
     </Design.DataContext>
-    <ScrollViewer>
-        <StackPanel Spacing="20">
-            <StackPanel.Styles>
-                <Style Selector="ComboBox">
-                    <Setter Property="Width" Value="300" />
-                    <Setter Property="ItemsSource" Value="{Binding Items}" />
-                </Style>
-            </StackPanel.Styles>
+    <StackPanel Spacing="20">
+        <StackPanel.Styles>
+            <Style Selector="ComboBox">
+                <Setter Property="Width" Value="300" />
+                <Setter Property="ItemsSource" Value="{Binding Items}" />
+            </Style>
+        </StackPanel.Styles>
 
-            <ComboBox />
-            <ComboBox Classes="ClearButton" />
-            <ComboBox PlaceholderText="Please Select" />
-            <ComboBox IsEnabled="False" />
-            <ComboBox Classes="Large" IsEnabled="False" />
-            <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>
+        <ComboBox />
+        <ComboBox Classes="ClearButton" />
+        <ComboBox PlaceholderText="Please Select" />
+        <ComboBox IsEnabled="False" />
+        <ComboBox Classes="Large" IsEnabled="False" />
+        <ComboBox Classes="Small" />
+        <ComboBox Classes="Bordered" />
+        <ComboBox Classes="Bordered" IsEnabled="False" />
 
-            <StackPanel Orientation="Horizontal">
-                <ComboBox Width="100" Classes="Large" PlaceholderText="Large" />
-                <ComboBox Width="100" PlaceholderText="Default" />
-                <ComboBox Width="100" Classes="Small" PlaceholderText="Small" />
-            </StackPanel>
-
-            <StackPanel Orientation="Horizontal">
-                <ComboBox Width="100" IsEnabled="False" PlaceholderText="Disabled" />
-                <ComboBox Width="100" Classes="Bordered" PlaceholderText="Bordered" />
-                <ComboBox Width="100" Classes="Bordered" IsEnabled="False" />
-            </StackPanel>
-            <ToggleSwitch Name="toggle" IsChecked="True" Content="IsEditable" />
-            <ComboBox IsEditable="{Binding #toggle.IsChecked}" />
+        <StackPanel Orientation="Horizontal">
+            <ComboBox Width="100" Classes="Large" PlaceholderText="Large" />
+            <ComboBox Width="100" PlaceholderText="Default" />
+            <ComboBox Width="100" Classes="Small" PlaceholderText="Small" />
         </StackPanel>
-    </ScrollViewer>
-</UserControl>
+
+        <StackPanel Orientation="Horizontal">
+            <ComboBox Width="100" IsEnabled="False" PlaceholderText="Disabled" />
+            <ComboBox Width="100" Classes="Bordered" PlaceholderText="Bordered" />
+            <ComboBox Width="100" Classes="Bordered" IsEnabled="False" />
+        </StackPanel>
+    </StackPanel>
+</UserControl>

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

@@ -1,5 +1,6 @@
+using System.Collections.ObjectModel;
 using Avalonia.Controls;
-using Semi.Avalonia.Demo.ViewModels;
+using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -10,4 +11,9 @@ public partial class ComboBoxDemo : UserControl
         InitializeComponent();
         this.DataContext = new ComboBoxDemoViewModel();
     }
+}
+
+public class ComboBoxDemoViewModel : ObservableObject
+{
+    public ObservableCollection<string> Items { get; set; } = ["Ding", "Otter", "Husky", "Mr.17", "Cass"];
 }

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

@@ -0,0 +1,179 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.DataGridDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:Semi.Avalonia.Demo.Pages"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels;assembly=Semi.Avalonia.Demo"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:DataGridDemoViewModel"
+    mc:Ignorable="d">
+    <TabControl>
+        <TabItem Header="DataGrid">
+           <Grid RowDefinitions="Auto, *">
+               <StackPanel Grid.Row="0" Orientation="Horizontal">
+                   <ToggleSwitch Content="Disable" Name="DisableToggle" />
+                   <ToggleSwitch Content="ScrollViewerHide" Name="ScrollViewerHide" />
+               </StackPanel>
+               <DataGrid Grid.Row="1"
+                         Margin="8"
+                         CanUserReorderColumns="True"
+                         CanUserResizeColumns="True"
+                         CanUserSortColumns="True"
+                         HeadersVisibility="All"
+                         IsReadOnly="True"
+                         ScrollViewer.AllowAutoHide="{Binding #ScrollViewerHide.IsChecked}"
+                         IsEnabled="{Binding #DisableToggle.IsChecked}"
+                         ItemsSource="{Binding GridData1}">
+                   <DataGrid.Columns>
+                       <DataGridTextColumn
+                           Width="6*"
+                           x:DataType="vm:Song"
+                           Binding="{Binding Title}"
+                           Header="Title" />
+                       <DataGridTextColumn
+                           Width="6*"
+                           x:DataType="vm:Song"
+                           Binding="{Binding Artist}"
+                           Header="Artist" />
+                       <DataGridTextColumn
+                           Width="6*"
+                           x:DataType="vm:Song"
+                           Binding="{Binding Album}"
+                           Header="Album" />
+                       <DataGridTemplateColumn Header="Duration" SortMemberPath="Duration">
+                           <DataGridTemplateColumn.CellTemplate>
+                               <DataTemplate>
+                                   <TextBlock
+                                       Margin="8,0,0,0"
+                                       VerticalAlignment="Center"
+                                       Text="{Binding Duration}" />
+                               </DataTemplate>
+                           </DataGridTemplateColumn.CellTemplate>
+                       </DataGridTemplateColumn>
+                   </DataGrid.Columns>
+
+               </DataGrid>
+               
+           </Grid>
+        </TabItem>
+        <TabItem Header="Grouping">
+            <DataGrid
+                Margin="8"
+                CanUserReorderColumns="True"
+                CanUserResizeColumns="True"
+                CanUserSortColumns="True"
+                HeadersVisibility="All"
+                IsReadOnly="True"
+                ItemsSource="{Binding GridData2}">
+                <DataGrid.Columns>
+                    <DataGridTextColumn
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Title}"
+                        Header="Title" />
+                    <DataGridTextColumn
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Artist}"
+                        Header="Artist" />
+                    <DataGridTextColumn
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Album}"
+                        Header="Album" />
+                    <DataGridTemplateColumn
+                        x:DataType="vm:Song"
+                        Header="Duration"
+                        SortMemberPath="Duration">
+                        <DataGridTemplateColumn.CellTemplate>
+                            <DataTemplate x:DataType="vm:Song">
+                                <TextBlock
+                                    Margin="8,0,0,0"
+                                    VerticalAlignment="Center"
+                                    Text="{Binding Duration}" />
+                            </DataTemplate>
+                        </DataGridTemplateColumn.CellTemplate>
+                    </DataGridTemplateColumn>
+                </DataGrid.Columns>
+            </DataGrid>
+        </TabItem>
+        <TabItem x:Name="EditableTab" Header="Editable">
+            <Grid Margin="8" RowDefinitions="Auto,*,Auto">
+                <StackPanel
+                    Grid.Row="0"
+                    Orientation="Horizontal"
+                    Spacing="4">
+                    <TextBlock VerticalAlignment="Center" Text="FontSize:" />
+                    <Slider
+                        x:Name="FontSizeSlider"
+                        Width="100"
+                        VerticalAlignment="Center"
+                        Maximum="30"
+                        Minimum="5"
+                        Value="14" />
+                    <CheckBox
+                        x:Name="IsThreeStateCheckBox"
+                        Content="IsThreeState"
+                        IsChecked="False" />
+                </StackPanel>
+                <DataGrid
+                    Grid.Row="1"
+                    Margin="8"
+                    ItemsSource="{Binding GridData3}">
+                    <DataGrid.Columns>
+                        <DataGridCheckBoxColumn
+                            Width="2*"
+                            Binding="{Binding IsSelected}"
+                            Header="Select"
+                            IsThreeState="{Binding #IsThreeStateCheckBox.IsChecked, Mode=OneWay}" />
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:SongViewModel"
+                            Binding="{Binding Title}"
+                            FontSize="{Binding #FontSizeSlider.Value, Mode=OneWay}"
+                            Header="Title" />
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:SongViewModel"
+                            Binding="{Binding Artist}"
+                            Header="Artist" />
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:SongViewModel"
+                            Binding="{Binding Album}"
+                            Header="Album" />
+                        <DataGridTemplateColumn Width="2*" Header="Comments">
+                            <DataGridTemplateColumn.CellTemplate>
+                                <DataTemplate>
+                                    <TextBlock
+                                        HorizontalAlignment="Center"
+                                        VerticalAlignment="Center"
+                                        Text="{Binding CountOfComment}" />
+                                </DataTemplate>
+                            </DataGridTemplateColumn.CellTemplate>
+                            <DataGridTemplateColumn.CellEditingTemplate>
+                                <DataTemplate>
+                                    <NumericUpDown
+                                        HorizontalAlignment="Stretch"
+                                        FormatString="N0"
+                                        Minimum="0"
+                                        Value="{Binding CountOfComment}" />
+                                </DataTemplate>
+                            </DataGridTemplateColumn.CellEditingTemplate>
+                        </DataGridTemplateColumn>
+                    </DataGrid.Columns>
+                </DataGrid>
+                <Button
+                    Grid.Row="2"
+                    Margin="12,0,12,12"
+                    HorizontalAlignment="Right"
+                    Command="{Binding AddCommand}"
+                    Content="Add" />
+            </Grid>
+        </TabItem>
+    </TabControl>
+</UserControl>

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

@@ -0,0 +1,27 @@
+using System;
+using System.Collections;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using System.Linq;
+using Avalonia;
+using Avalonia.Collections;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Data;
+using Avalonia.Input;
+using Avalonia.Input.Raw;
+using Avalonia.Markup.Xaml;
+using Avalonia.Threading;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class DataGridDemo : UserControl
+{
+    public DataGridDemo()
+    {
+        InitializeComponent();
+        DataContext = new DataGridDemoViewModel();
+    }
+}

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

@@ -80,4 +80,4 @@
             </TextBox>
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>

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

@@ -1,4 +1,6 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -8,4 +10,9 @@ public partial class DataValidationErrorsDemo : UserControl
     {
         InitializeComponent();
     }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
 }

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

@@ -26,4 +26,4 @@
         </StackPanel>
 
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -1,4 +1,7 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using Avalonia.Media;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -8,4 +11,14 @@ public partial class DatePickerDemo : UserControl
     {
         InitializeComponent();
     }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+
+    public override void Render(DrawingContext context)
+    {
+        base.Render(context);
+    }
 }

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

@@ -1,4 +1,6 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 

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

@@ -1,4 +1,7 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.LogicalTree;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 

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,14 +29,14 @@
             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>
-</UserControl>
+</UserControl>

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

@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class GridSplitter : UserControl
+{
+    public GridSplitter()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}

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

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

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

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

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

@@ -1,11 +0,0 @@
-using Avalonia.Controls;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class GroupBoxDemo : UserControl
-{
-    public GroupBoxDemo()
-    {
-        InitializeComponent();
-    }
-}

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,16 +27,12 @@
             </WrapPanel>
             <TextBlock>GroupBox Theme</TextBlock>
             <HeaderedContentControl
-                Theme="{DynamicResource GroupBox}"
                 HorizontalAlignment="Left"
-                MaxWidth="360">
-                <HeaderedContentControl.Header>
-                    <Panel>
-                        <SelectableTextBlock Text="Semi Design" />
-                        <HyperlinkButton HorizontalAlignment="Right" Content="更多" />
-                    </Panel>
-                </HeaderedContentControl.Header>
-                <SelectableTextBlock Text="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。" />
+                Theme="{DynamicResource GroupBox}"
+                Header="Semi Design"
+                Width="400"
+                Height="200">
+                <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</TextBlock>
             </HeaderedContentControl>
         </StackPanel>
     </ScrollViewer>

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 Classes="OnlyIcon" NavigateUri="https://www.irihi.tech/" />
+            <HyperlinkButton Height="20" NavigateUri="http://www.irihi.tech/">
+                <TextBlock
+                    HorizontalAlignment="Center"
+                    Text="iRihi Homepage"
+                    TextDecorations="Underline"
+                    VerticalAlignment="Center" />
+            </HyperlinkButton>
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <HyperlinkButton Height="20" IsEnabled="False">
+                <TextBlock
+                    HorizontalAlignment="Center"
+                    Text="Not Enabled"
+                    TextDecorations="Underline"
+                    VerticalAlignment="Center" />
+            </HyperlinkButton>
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <HyperlinkButton
+                BorderThickness="1"
+                Classes="WithIcon"
+                Height="20"
+                NavigateUri="http://www.irihi.tech/">
+                <TextBlock
+                    HorizontalAlignment="Center"
+                    Text="Link with Icon"
+                    TextDecorations="Underline"
+                    VerticalAlignment="Center" />
+            </HyperlinkButton>
         </StackPanel>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -1,4 +1,7 @@
+using System;
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 

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="*,*,*,*,*,*,*,*,*,*,*">
-                            <TextBlock Grid.Row="0" Grid.Column="0">Classes</TextBlock>
-                            <TextBlock Grid.Row="1" Grid.Column="0">-</TextBlock>
-                            <TextBlock Grid.Row="2" Grid.Column="0">Secondary</TextBlock>
-                            <TextBlock Grid.Row="3" Grid.Column="0">Tertiary</TextBlock>
-                            <TextBlock Grid.Row="4" Grid.Column="0">Quaternary</TextBlock>
-                            <TextBlock Grid.Row="5" Grid.Column="0">Success</TextBlock>
-                            <TextBlock Grid.Row="6" Grid.Column="0">Warning</TextBlock>
-                            <TextBlock Grid.Row="7" Grid.Column="0">Danger</TextBlock>
-                            <TextBlock Grid.Row="8" Grid.Column="0">Mark</TextBlock>
-                            <TextBlock Grid.Row="9" Grid.Column="0">Code</TextBlock>
-                            <Label Grid.Row="1" Grid.Column="1">Text</Label>
+                            RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
+                            <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
+                            <TextBlock Grid.Row="2" Grid.Column="0">-</TextBlock>
+                            <TextBlock Grid.Row="3" Grid.Column="0">Secondary</TextBlock>
+                            <TextBlock Grid.Row="4" Grid.Column="0">Tertiary</TextBlock>
+                            <TextBlock Grid.Row="5" Grid.Column="0">Quaternary</TextBlock>
+                            <TextBlock Grid.Row="6" Grid.Column="0">Success</TextBlock>
+                            <TextBlock Grid.Row="7" Grid.Column="0">Warning</TextBlock>
+                            <TextBlock Grid.Row="8" Grid.Column="0">Danger</TextBlock>
+                            <TextBlock Grid.Row="9" Grid.Column="0">Mark</TextBlock>
+                            <TextBlock Grid.Row="10" Grid.Column="0">Code</TextBlock>
+                            <Label Grid.Row="2" Grid.Column="1">Text</Label>
                             <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="*,*,*,*,*,*,*">
-                            <TextBlock Grid.Row="0" Grid.Column="0">Classes</TextBlock>
-                            <TextBlock Grid.Row="1" Grid.Column="0">H1</TextBlock>
-                            <TextBlock Grid.Row="2" Grid.Column="0">H2</TextBlock>
-                            <TextBlock Grid.Row="3" Grid.Column="0">H3</TextBlock>
-                            <TextBlock Grid.Row="4" Grid.Column="0">H4</TextBlock>
-                            <TextBlock Grid.Row="5" Grid.Column="0">H5</TextBlock>
-                            <TextBlock Grid.Row="6" Grid.Column="0">H6</TextBlock>
+                            RowDefinitions="*,*,*,*,*,*,*,*">
+                            <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
+                            <TextBlock Grid.Row="2" Grid.Column="0">H1</TextBlock>
+                            <TextBlock Grid.Row="3" Grid.Column="0">H2</TextBlock>
+                            <TextBlock Grid.Row="4" Grid.Column="0">H3</TextBlock>
+                            <TextBlock Grid.Row="5" Grid.Column="0">H4</TextBlock>
+                            <TextBlock Grid.Row="6" Grid.Column="0">H5</TextBlock>
+                            <TextBlock Grid.Row="7" Grid.Column="0">H6</TextBlock>
                             <Label
-                                Grid.Row="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}">
@@ -221,4 +223,4 @@
             </WrapPanel>
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>

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

@@ -1,4 +1,6 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 

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

@@ -16,7 +16,7 @@
                 Header="Default">
                 <ScrollViewer>
                     <StackPanel Spacing="20">
-                        <TextBlock Text="Theme: Default" />
+                        <TextBlock Text="Theme: Default"/>
                         <ListBox ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
                         <ListBox IsEnabled="False">
                             <ListBoxItem IsSelected="True">Avalonia</ListBoxItem>
@@ -31,7 +31,7 @@
                 Theme="{DynamicResource GroupBox}"
                 Header="RadioGroupListBox">
                 <StackPanel Spacing="20">
-                    <TextBlock Text="Theme: RadioGroupListBox" />
+                    <TextBlock Text="Theme: RadioGroupListBox"/>
                     <ListBox
                         Theme="{DynamicResource RadioGroupListBox}"
                         ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
@@ -40,7 +40,7 @@
                         <ListBoxItem IsSelected="True">WPF</ListBoxItem>
                     </ListBox>
 
-                    <TextBlock Text="Theme: ButtonRadioGroupListBox" />
+                    <TextBlock Text="Theme: ButtonRadioGroupListBox"/>
                     <StackPanel Orientation="Horizontal">
                         <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
                             <ListBox Theme="{DynamicResource ButtonRadioGroupListBox}">
@@ -93,7 +93,7 @@
                         </Border>
                     </StackPanel>
 
-                    <TextBlock Text="Theme: CardRadioGroupListBox" />
+                    <TextBlock Text="Theme: CardRadioGroupListBox"/>
                     <ListBox Theme="{DynamicResource CardRadioGroupListBox}"
                              ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
                     <ListBox Theme="{DynamicResource CardRadioGroupListBox}" IsEnabled="False">
@@ -101,7 +101,7 @@
                         <ListBoxItem>WPF</ListBoxItem>
                     </ListBox>
 
-                    <TextBlock Text="Theme: PureCardRadioGroupListBox" />
+                    <TextBlock Text="Theme: PureCardRadioGroupListBox"/>
                     <ListBox Theme="{DynamicResource PureCardRadioGroupListBox}"
                              ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
                     <ListBox Theme="{DynamicResource PureCardRadioGroupListBox}" IsEnabled="False">
@@ -117,25 +117,25 @@
                 Header="CheckGroupListBox">
                 <ScrollViewer>
                     <StackPanel Spacing="20">
-                        <TextBlock Text="Theme: CheckGroupListBox" />
+                        <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>
                         </ListBox>
 
-                        <TextBlock Text="Theme: CardCheckGroupListBox" />
+                        <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

@@ -17,4 +17,4 @@
         <Button Name="SelectFolderButton" Content="Select Folder" />
         <Button Name="SaveFileButton" Content="Save File" />
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -145,4 +145,4 @@
             <TextBlock Text="Right Click to show Context Flyout" />
         </Border>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -1,4 +1,6 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -9,4 +11,8 @@ public partial class MenuDemo : UserControl
         InitializeComponent();
     }
 
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
 }

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/NumericUpDownDemo.axaml.cs

@@ -1,4 +1,6 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -9,4 +11,8 @@ public partial class NumericUpDownDemo : UserControl
         InitializeComponent();
     }
 
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
 }

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="White" Geometry="M43.0585 14.6143C29.5513 14.6143 18.2555 24.082 15.4454 36.7432C18.1357 37.4975 20.1087 39.9679 20.1087 42.8992C20.1087 45.8305 18.1357 48.301 15.4454 49.0552C18.2555 61.7164 29.5513 71.1842 43.0585 71.1842C47.9754 71.1842 52.5993 69.9296 56.6276 67.723V70.9926H71.3435V44.0716C71.3569 43.7138 71.3435 43.2603 71.3435 42.8992C71.3435 27.2779 58.6799 14.6143 43.0585 14.6143ZM29.5096 42.8992C29.5096 35.4164 35.5757 29.3503 43.0585 29.3503C50.5414 29.3503 56.6074 35.4164 56.6074 42.8992C56.6074 50.3821 50.5414 56.4481 43.0585 56.4481C35.5757 56.4481 29.5096 50.3821 29.5096 42.8992Z" />
-                                <GeometryDrawing Brush="White" Geometry="M18.105 42.8805C18.105 45.3803 16.0785 47.4068 13.5787 47.4068C11.0789 47.4068 9.05237 45.3803 9.05237 42.8805C9.05237 40.3807 11.0789 38.3542 13.5787 38.3542C16.0785 38.3542 18.105 40.3807 18.105 42.8805Z" />
+                                <GeometryDrawing Brush="#8B44AC" Geometry="M74.8535 85.8231C75.0263 85.8231 75.1954 85.8231 75.3679 85.8231C80.7347 85.8231 85.1439 81.8027 85.7614 76.6019L85.8357 41.7604C85.2255 18.5931 66.2537 0 42.9393 0C19.2399 0 0.02771 19.2122 0.02771 42.9116C0.02771 66.3573 18.8309 85.418 42.18 85.8231H74.8535Z" />
+                                <GeometryDrawing Brush="#F9F9FB" Geometry="M43.0585 14.6143C29.5513 14.6143 18.2555 24.082 15.4454 36.7432C18.1357 37.4975 20.1087 39.9679 20.1087 42.8992C20.1087 45.8305 18.1357 48.301 15.4454 49.0552C18.2555 61.7164 29.5513 71.1842 43.0585 71.1842C47.9754 71.1842 52.5993 69.9296 56.6276 67.723V70.9926H71.3435V44.0716C71.3569 43.7138 71.3435 43.2603 71.3435 42.8992C71.3435 27.2779 58.6799 14.6143 43.0585 14.6143ZM29.5096 42.8992C29.5096 35.4164 35.5757 29.3503 43.0585 29.3503C50.5414 29.3503 56.6074 35.4164 56.6074 42.8992C56.6074 50.3821 50.5414 56.4481 43.0585 56.4481C35.5757 56.4481 29.5096 50.3821 29.5096 42.8992Z" />
+                                <GeometryDrawing Brush="#F9F9FB" Geometry="M18.105 42.8805C18.105 45.3803 16.0785 47.4068 13.5787 47.4068C11.0789 47.4068 9.05237 45.3803 9.05237 42.8805C9.05237 40.3807 11.0789 38.3542 13.5787 38.3542C16.0785 38.3542 18.105 40.3807 18.105 42.8805Z" />
                             </DrawingGroup>
                         </DrawingImage>
                     </Image.Source>
@@ -234,7 +234,7 @@
                             VerticalAlignment="Top"
                             Palette="{DynamicResource SemiColorPalette}"
                             SelectedIndex="2"
-                            Color="#0D6EFD" />
+                            Color="#8B44AC" />
                         <StackPanel Width="300" Margin="8">
                             <StackPanel Orientation="Horizontal">
                                 <Slider
@@ -348,17 +348,17 @@
                     Classes="H5"
                     Text="Start to install"
                     Theme="{DynamicResource TitleTextBlock}" />
-                <TabControl Theme="{StaticResource LineTabControl}">
+                <TabControl Padding="8">
                     <TabItem Header="Main">
                         <StackPanel>
                             <TextBlock Text="Install via nuget: " />
                             <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].MainInstall}" />
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].MainInstall}" />
                             </Border>
                             <TextBlock Text="Reference styles: " />
                             <Border Margin="0,16" Classes="CodeBlock">
                                 <SelectableTextBlock
-                                    
+                                    FontFamily="Consolas"
                                     Text="{Binding $parent[local:Overview].MainStyle}"
                                     TextWrapping="Wrap" />
                             </Border>
@@ -368,12 +368,12 @@
                         <StackPanel>
                             <TextBlock Text="Install via nuget: " />
                             <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].ColorPickerInstall}" />
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].ColorPickerInstall}" />
                             </Border>
                             <TextBlock Text="Reference styles: " />
                             <Border Margin="0,16" Classes="CodeBlock">
                                 <SelectableTextBlock
-                                    
+                                    FontFamily="Consolas"
                                     Text="{Binding $parent[local:Overview].ColorPickerStyle}"
                                     TextWrapping="Wrap" />
                             </Border>
@@ -383,12 +383,12 @@
                         <StackPanel>
                             <TextBlock Text="Install via nuget: " />
                             <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].DataGridInstall}" />
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].DataGridInstall}" />
                             </Border>
                             <TextBlock Text="Reference styles: " />
                             <Border Margin="0,16" Classes="CodeBlock">
                                 <SelectableTextBlock
-                                    
+                                    FontFamily="Consolas"
                                     Text="{Binding $parent[local:Overview].DataGridStyle}"
                                     TextWrapping="Wrap" />
                             </Border>
@@ -398,62 +398,17 @@
                         <StackPanel>
                             <TextBlock Text="Install via nuget: " />
                             <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].TreeDataGridInstall}" />
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].TreeDataGridInstall}" />
                             </Border>
                             <TextBlock Text="Reference styles: " />
                             <Border Margin="0,16" Classes="CodeBlock">
                                 <SelectableTextBlock
-                                    
+                                    FontFamily="Consolas"
                                     Text="{Binding $parent[local:Overview].TreeDataGridStyle}"
                                     TextWrapping="Wrap" />
                             </Border>
                         </StackPanel>
                     </TabItem>
-                    <TabItem Header="Dock">
-                        <StackPanel>
-                            <TextBlock Text="Install via nuget: " />
-                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].DockInstall}" />
-                            </Border>
-                            <TextBlock Text="Reference styles: " />
-                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock
-                                    
-                                    Text="{Binding $parent[local:Overview].DockStyle}"
-                                    TextWrapping="Wrap" />
-                            </Border>
-                        </StackPanel>
-                    </TabItem>
-                    <TabItem Header="Tabalonia">
-                        <StackPanel>
-                            <TextBlock Text="Install via nuget: " />
-                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].TabaloniaInstall}" />
-                            </Border>
-                            <TextBlock Text="Reference styles: " />
-                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock
-                                    
-                                    Text="{Binding $parent[local:Overview].TabaloniaStyle}"
-                                    TextWrapping="Wrap" />
-                            </Border>
-                        </StackPanel>
-                    </TabItem>
-                    <TabItem Header="AvaloniaEdit">
-                        <StackPanel>
-                            <TextBlock Text="Install via nuget: " />
-                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].AvaloniaEditInstall}" />
-                            </Border>
-                            <TextBlock Text="Reference styles: " />
-                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock
-                                    
-                                    Text="{Binding $parent[local:Overview].AvaloniaEditStyle}"
-                                    TextWrapping="Wrap" />
-                            </Border>
-                        </StackPanel>
-                    </TabItem>
                 </TabControl>
             </StackPanel>
         </StackPanel>

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

@@ -9,66 +9,41 @@ public partial class Overview : UserControl
         InitializeComponent();
     }
 
-    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.2.1.9";
+    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --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.9";
+    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.9";
+    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.4";
+    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.1.0";
 
     public string TreeDataGridStyle { get; set; } =
         """
         <Application.Styles>
-            <semi:TreeDataGridSemiTheme />
-        </Application.Styles>
-        """;
-
-    public string DockInstall { get; set; } = "dotnet add package Semi.Avalonia.Dock --version 11.3.0";
-
-    public string DockStyle { get; set; } =
-        """
-        <Application.Styles>
-            <semi:DockSemiTheme />
-        </Application.Styles>
-        """;
-
-    public string TabaloniaInstall { get; set; } = "dotnet add package Semi.Avalonia.Tabalonia --version 11.0.0-beta1";
-
-    public string TabaloniaStyle { get; set; } =
-        """
-        <Application.Styles>
-            <semi:TabaloniaSemiTheme />
-        </Application.Styles>
-        """;
-
-    public string AvaloniaEditInstall { get; set; } = "dotnet add package Semi.Avalonia.AvaloniaEdit --version 11.2.0";
-
-    public string AvaloniaEditStyle { get; set; } =
-        """
-        <Application.Styles>
-            <semi:AvaloniaEditSemiTheme />
+            <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}"
-                    Content="{StaticResource SemiIconSidebar}" />
+                    Theme="{DynamicResource SplitViewToggleButton}" />
                 <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;
-        await Dispatcher.UIThread.InvokeAsync(() => { vm?.InitializeResources(); });
-    }
-
-    public async Task Copy(object? o)
-    {
-        if (o is null) return;
-        var toplevel = TopLevel.GetTopLevel(this);
-        if (toplevel?.Clipboard is { } c)
+        PaletteDemoViewModel? vm = new PaletteDemoViewModel();
+        await Dispatcher.UIThread.InvokeAsync(() =>
         {
-            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 Orientation="Horizontal">
-            <StackPanel.Styles>
-                <Style Selector="PathIcon">
-                    <Setter Property="Theme" Value="{DynamicResource InnerPathIcon}" />
-                    <Setter Property="Data" Value="{StaticResource SemiIconSearch}" />
-                </Style>
-            </StackPanel.Styles>
-            <PathIcon Classes="ExtraSmall" />
-            <PathIcon Classes="Small" />
-            <PathIcon />
-            <PathIcon Classes="Large" />
-            <PathIcon Classes="ExtraLarge" />
-        </StackPanel>
-
-        <TextBlock Text="Size" />
-        <Slider Name="width" Minimum="0" Maximum="100" Value="20" Width="300" />
-        <ToggleSwitch Name="active" Content="Active" />
+    <StackPanel HorizontalAlignment="Left" >
+        <TextBlock Text="Size"></TextBlock>
+        <Slider Name="width" Minimum="0" Maximum="100" Value="20" Width="300"></Slider>
+        <ToggleSwitch Name="active" Content="Active"></ToggleSwitch>
         <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}"
-            BorderBrush="{DynamicResource SemiRed6}"
-            Data="{StaticResource SemiIconHome}" />
+            Data="M12 3L2 12H5V20H19V12H22L12 3M13 18H11V16H13V18M13 14H11V8H13V14Z"
+            Foreground="{DynamicResource SemiBlue6}" />
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -1,4 +1,6 @@
-using Avalonia.Controls;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 

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

@@ -20,16 +20,15 @@
                     Minimum="{Binding #slider.Minimum}"
                     Theme="{DynamicResource ProgressRing}"
                     Value="{Binding #slider.Value}"
-                    ShowProgressText="True" />
+                    ShowProgressText="True"/>
                 <ProgressBar
                     Width="100"
                     Height="100"
                     IsIndeterminate="True"
-                    BorderThickness="16"
                     Maximum="{Binding #slider.Maximum}"
                     Minimum="{Binding #slider.Minimum}"
                     Theme="{DynamicResource ProgressRing}"
-                    ShowProgressText="True" />
+                    ShowProgressText="True"/>
             </StackPanel>
             <Slider
                 Name="slider"

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

@@ -1,4 +1,6 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -8,4 +10,9 @@ public partial class ProgressBarDemo : UserControl
     {
         InitializeComponent();
     }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
 }

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

@@ -1,4 +1,6 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 

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

@@ -4,10 +4,10 @@
     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"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    x:DataType="vm:RefreshContainerDemoViewModel"
+    x:DataType="pages:RefreshContainerDemoViewModel"
     x:CompileBindings="True"
     mc:Ignorable="d">
     <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Top">
@@ -24,4 +24,4 @@
                      ItemsSource="{Binding Items}" />
         </RefreshContainer>
     </DockPanel>
-</UserControl>
+</UserControl>

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

@@ -1,5 +1,8 @@
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Threading.Tasks;
 using Avalonia.Controls;
-using Semi.Avalonia.Demo.ViewModels;
+using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -10,14 +13,34 @@ public partial class RefreshContainerDemo : UserControl
     public RefreshContainerDemo()
     {
         InitializeComponent();
+
         _viewModel = new RefreshContainerDemoViewModel();
+
         DataContext = _viewModel;
     }
 
     private async void RefreshContainerPage_RefreshRequested(object? sender, RefreshRequestedEventArgs e)
     {
         var deferral = e.GetDeferral();
+
         await _viewModel.AddToTop();
+
         deferral.Complete();
     }
+}
+
+public class RefreshContainerDemoViewModel : ObservableObject
+{
+    public ObservableCollection<string> Items { get; }
+
+    public RefreshContainerDemoViewModel()
+    {
+        Items = new ObservableCollection<string>(Enumerable.Range(1, 200).Select(i => $"Item {i}"));
+    }
+
+    public async Task AddToTop()
+    {
+        await Task.Delay(1000);
+        Items.Insert(0, $"Item {200 - Items.Count}");
+    }
 }

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

@@ -1,4 +1,6 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 

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

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

@@ -1,4 +1,6 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -8,4 +10,9 @@ public partial class ScrollViewerDemo : UserControl
     {
         InitializeComponent();
     }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
 }

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="*,*,*,*,*,*,*,*,*,*,*">
-                    <Grid.Styles>
-                        <Style Selector="SelectableTextBlock">
-                            <Setter Property="VerticalAlignment" Value="Center" />
-                            <Setter Property="Margin" Value="4" />
-                        </Style>
-                    </Grid.Styles>
-                    <SelectableTextBlock Grid.Row="0" Grid.Column="0">Classes</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="1" Grid.Column="0">-</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="2" Grid.Column="0">Secondary</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="3" Grid.Column="0">Tertiary</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="4" Grid.Column="0">Quaternary</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="5" Grid.Column="0">Success</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">Warning</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">Danger</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="8" Grid.Column="0">Mark</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="9" Grid.Column="0">Underline</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="10" Grid.Column="0">Delete</SelectableTextBlock>
+                    RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
+                    <SelectableTextBlock Grid.Row="1" Grid.Column="0">Classes</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="2" Grid.Column="0">-</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="3" Grid.Column="0">Secondary</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="4" Grid.Column="0">Tertiary</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="5" Grid.Column="0">Quaternary</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">Success</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">Warning</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="8" Grid.Column="0">Danger</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="9" Grid.Column="0">Mark</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="10" Grid.Column="0">Underline</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="11" Grid.Column="0">Delete</SelectableTextBlock>
 
-                    <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="*,*,*,*,*,*,*">
-                    <SelectableTextBlock Grid.Row="0" Grid.Column="0">Classes</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="1" Grid.Column="0">H1</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="2" Grid.Column="0">H2</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="3" Grid.Column="0">H3</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="4" Grid.Column="0">H4</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="5" Grid.Column="0">H5</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">H6</SelectableTextBlock>
+                    RowDefinitions="*,*,*,*,*,*,*,*">
+                    <SelectableTextBlock Grid.Row="1" Grid.Column="0">Classes</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="2" Grid.Column="0">H1</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="3" Grid.Column="0">H2</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="4" Grid.Column="0">H3</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="5" Grid.Column="0">H4</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">H5</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">H6</SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="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}">
@@ -165,4 +160,4 @@
             </HeaderedContentControl>
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>

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

@@ -1,4 +1,6 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -9,4 +11,8 @@ public partial class SelectableTextBlockDemo : UserControl
         InitializeComponent();
     }
 
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
 }

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

@@ -98,4 +98,4 @@
                 Value="30" />
         </StackPanel>
     </StackPanel>
-</UserControl>
+</UserControl>