misc:try

.github/workflows/deploy.yml

@@ -2,7 +2,7 @@ name: Deploy to GitHub Pages
 
 env:
   PROJECT_PATH: demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj
-  OUTPUT_PATH: demo/Semi.Avalonia.Demo.Web/bin/Release/net10.0-browser/publish/wwwroot
+  OUTPUT_PATH: demo/Semi.Avalonia.Demo.Web/bin/Release/net8.0-browser/publish/wwwroot
 on:
   workflow_dispatch:
 
@@ -11,13 +11,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4.1.1
 
-      - name: Setup dotnet
+      - name: Setup .NET 8
-        uses: actions/setup-dotnet@v5
+        uses: actions/setup-dotnet@v4
         with:
-          dotnet-version: |
+          dotnet-version: 8.0.x
-            10.0.x
 
       - name: Install wasm-tools
         run: dotnet workload install wasm-tools
@@ -25,6 +24,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
 

.github/workflows/pack-nightly.yml

@@ -10,19 +10,23 @@ on:
         type: string
       Semi_Avalonia:
         description: 'Pack Semi.Avalonia'
-        default: true
+        required: true
+        default: 'true'
         type: boolean
       Semi_Avalonia_ColorPicker:
         description: 'Pack Semi.Avalonia.ColorPicker'
-        default: true
+        required: true
+        default: 'true'
         type: boolean
       Semi_Avalonia_DataGrid:
         description: 'Pack Semi.Avalonia.DataGrid'
-        default: false
+        required: true
+        default: 'false'
         type: boolean
       Semi_Avalonia_TreeDataGrid:
         description: 'Pack Semi.Avalonia.TreeDataGrid'
-        default: false
+        required: true
+        default: 'false'
         type: boolean
 
 jobs:
@@ -31,39 +35,39 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4.1.1
 
       - name: Get Version
         run: |
           VERSION_TIMESTAMP=$(date +'%Y%m%d%H%M%S')
-          VERSION="${{ inputs.Version_Prefix }}-nightly-${VERSION_TIMESTAMP}"
+          VERSION="${{ github.event.inputs.Version_Prefix }}-nightly-${VERSION_TIMESTAMP}"
           echo "VERSION=$VERSION" >> $GITHUB_ENV
 
       - name: Pack Semi.Avalonia
-        if: ${{ inputs.Semi_Avalonia }}
+        if: ${{ github.event.inputs.Semi_Avalonia == 'true' }}
-        run: dotnet pack src/Semi.Avalonia -o nugets /p:Version=${{ env.VERSION }}
+        run: dotnet pack ./src/Semi.Avalonia -o ./nugets /p:Version=${{ env.VERSION }}
 
       - name: Pack Semi.Avalonia.ColorPicker
-        if: ${{ inputs.Semi_Avalonia_ColorPicker }}
+        if: ${{ github.event.inputs.Semi_Avalonia_ColorPicker == 'true' }}
-        run: dotnet pack src/Semi.Avalonia.ColorPicker -o nugets /p:Version=${{ env.VERSION }}
+        run: dotnet pack ./src/Semi.Avalonia.ColorPicker -o ./nugets /p:Version=${{ env.VERSION }}
 
       - name: Pack Semi.Avalonia.DataGrid
-        if: ${{ inputs.Semi_Avalonia_DataGrid }}
+        if: ${{ github.event.inputs.Semi_Avalonia_DataGrid == 'true' }}
-        run: dotnet pack src/Semi.Avalonia.DataGrid -o nugets /p:Version=${{ env.VERSION }}
+        run: dotnet pack ./src/Semi.Avalonia.DataGrid -o ./nugets /p:Version=${{ env.VERSION }}
 
       - name: Pack Semi.Avalonia.TreeDataGrid
-        if: ${{ inputs.Semi_Avalonia_TreeDataGrid }}
+        if: ${{ github.event.inputs.Semi_Avalonia_TreeDataGrid == 'true' }}
-        run: dotnet pack src/Semi.Avalonia.TreeDataGrid -o nugets /p:Version=${{ env.VERSION }}
+        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
+        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
+        uses: actions/upload-artifact@v4.3.1
         with:
           name: nugets
-          path: nugets
+          path: ./nugets
         if: always()

.github/workflows/pack.yml

@@ -3,43 +3,26 @@ name: Pack to NuGet
 on:
   workflow_dispatch:
     inputs:
-      Upload_to_NuGet:
-        description: 'Upload to NuGet'
-        default: true
-        type: boolean
       Semi_Avalonia:
         description: 'Pack Semi.Avalonia'
-        default: true
+        required: true
+        default: 'true'
         type: boolean
       Semi_Avalonia_ColorPicker:
         description: 'Pack Semi.Avalonia.ColorPicker'
-        default: true
+        required: true
+        default: 'true'
         type: boolean
       Semi_Avalonia_DataGrid:
         description: 'Pack Semi.Avalonia.DataGrid'
-        default: false
+        required: true
+        default: 'false'
         type: boolean
       Semi_Avalonia_TreeDataGrid:
         description: 'Pack Semi.Avalonia.TreeDataGrid'
-        default: false
+        required: true
+        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
 
 jobs:
   Pack_to_NuGet:
@@ -47,31 +30,30 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4.1.1
 
       - name: Pack Semi.Avalonia
-        if: ${{ inputs.Semi_Avalonia }}
+        if: ${{ github.event.inputs.Semi_Avalonia == 'true' }}
-        run: dotnet pack src/Semi.Avalonia -o nugets
+        run: dotnet pack ./src/Semi.Avalonia -o ./nugets
 
       - name: Pack Semi.Avalonia.ColorPicker
-        if: ${{ inputs.Semi_Avalonia_ColorPicker }}
+        if: ${{ github.event.inputs.Semi_Avalonia_ColorPicker == 'true' }}
-        run: dotnet pack src/Semi.Avalonia.ColorPicker -o nugets
+        run: dotnet pack ./src/Semi.Avalonia.ColorPicker -o ./nugets
 
       - name: Pack Semi.Avalonia.DataGrid
-        if: ${{ inputs.Semi_Avalonia_DataGrid }}
+        if: ${{ github.event.inputs.Semi_Avalonia_DataGrid == 'true' }}
-        run: dotnet pack src/Semi.Avalonia.DataGrid -o nugets
+        run: dotnet pack ./src/Semi.Avalonia.DataGrid -o ./nugets
 
       - name: Pack Semi.Avalonia.TreeDataGrid
-        if: ${{ inputs.Semi_Avalonia_TreeDataGrid }}
+        if: ${{ github.event.inputs.Semi_Avalonia_TreeDataGrid == 'true' }}
-        run: dotnet pack src/Semi.Avalonia.TreeDataGrid -o nugets
+        run: dotnet pack ./src/Semi.Avalonia.TreeDataGrid -o ./nugets
 
-      - name: Upload to NuGet
+      - name: Publish NuGet package
-        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
-        run: dotnet nuget push "nugets/*.nupkg" --api-key ${{ secrets.NUGET_ORG_API_KEY }} --source https://api.nuget.org/v3/index.json --skip-duplicate
 
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v4.3.1
         with:
           name: nugets
-          path: nugets
+          path: ./nugets
         if: always()

.github/workflows/publish.yml

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

.github/workflows/release-tag.yml

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

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

@@ -38,15 +38,12 @@ Include Semi Design Styles in application:
 
 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
@@ -54,14 +51,9 @@ dotnet add package Semi.Avalonia.AvaloniaEdit
     <semi:ColorPickerSemiTheme />
     <semi:DataGridSemiTheme />
     <semi:TreeDataGridSemiTheme />
-    <semi:DockSemiTheme />
-    <semi:TabaloniaSemiTheme />
-    <semi:AvaloniaEditSemiTheme />
 </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,13 +63,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.3.7              | 11.3.7           |
 | 11.2.1              | >=11.2.1         |
 | 11.2.0              | 11.2.0           |
 | 11.1.0              | >=11.1.0         |

README_CN.md

@@ -38,15 +38,12 @@ dotnet add package Semi.Avalonia
 
 这样就可以了。
 
-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
@@ -54,14 +51,9 @@ dotnet add package Semi.Avalonia.AvaloniaEdit
     <semi:ColorPickerSemiTheme />
     <semi:DataGridSemiTheme />
     <semi:TreeDataGridSemiTheme />
-    <semi:DockSemiTheme />
-    <semi:TabaloniaSemiTheme />
-    <semi:AvaloniaEditSemiTheme />
 </Application.Styles>
 ```
 
-注意：Dock、Tabalonia 和 AvaloniaEdit 是通过 NuGet 免费分发的，但不是开源的。请阅读许可协议并同意后继续使用这些包。如果您需要源代码，请通过电子邮件联系我们：[contact@irihi.tech](contact@irihi.tech)
-
 ## 示例
 
 您可以从 Semi Avalonia 的 release 页下载并试用 Semi Avalonia 的展示应用。
@@ -77,7 +69,6 @@ dotnet add package Semi.Avalonia.AvaloniaEdit
 
 | Semi Design Version | Avalonia Version |
 |:--------------------|:-----------------|
-| 11.3.7              | 11.3.7           |
 | 11.2.1              | >=11.2.1         |
 | 11.2.0              | 11.2.0           |
 | 11.1.0              | >=11.1.0         |

Semi.Avalonia.sln

@@ -0,0 +1,99 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.3.32929.385
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia", "src\Semi.Avalonia\Semi.Avalonia.csproj", "{90D0B063-BC64-40AB-A56C-AC11909CF410}"
+EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Files", "Solution Files", "{B1E6A7D4-0AFB-4D32-9969-5FBDAC0CFF3E}"
+	ProjectSection(SolutionItems) = preProject
+		demo\Directory.Build.props = demo\Directory.Build.props
+		demo\global.json = demo\global.json
+		src\Package.props = src\Package.props
+	EndProjectSection
+EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "GitHub Action", "GitHub Action", "{318534A1-1CC3-40FB-B4AE-736F94465232}"
+	ProjectSection(SolutionItems) = preProject
+		.github\workflows\deploy.yml = .github\workflows\deploy.yml
+		.github\workflows\pack.yml = .github\workflows\pack.yml
+		.github\workflows\pack-nightly.yml = .github\workflows\pack-nightly.yml
+		.github\workflows\publish.yml = .github\workflows\publish.yml
+		.github\workflows\release-tag.yml = .github\workflows\release-tag.yml
+	EndProjectSection
+EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Demo", "Demo", "{43091528-9509-43CB-A003-9C5C11E96DD6}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.Demo.Desktop", "demo\Semi.Avalonia.Demo.Desktop\Semi.Avalonia.Demo.Desktop.csproj", "{2ADCA724-2B6D-46EC-87F7-604D7918B89A}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.Demo.Web", "demo\Semi.Avalonia.Demo.Web\Semi.Avalonia.Demo.Web.csproj", "{69A2C77D-6DB7-4AE4-B179-D1F5CF5E2DF0}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.Demo", "demo\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj", "{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.DataGrid", "src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj", "{8A90C292-8761-4F70-8E1F-EFC097FEADB3}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.ColorPicker", "src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj", "{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.Demo.Android", "demo\Semi.Avalonia.Demo.Android\Semi.Avalonia.Demo.Android.csproj", "{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.Demo.Drm", "demo\Semi.Avalonia.Demo.Drm\Semi.Avalonia.Demo.Drm.csproj", "{86D93406-412A-4429-93B2-92AAD0407784}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.TreeDataGrid", "src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj", "{398D2998-0835-41F5-99A3-608CAB8051E2}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{90D0B063-BC64-40AB-A56C-AC11909CF410}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{90D0B063-BC64-40AB-A56C-AC11909CF410}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{90D0B063-BC64-40AB-A56C-AC11909CF410}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{90D0B063-BC64-40AB-A56C-AC11909CF410}.Release|Any CPU.Build.0 = Release|Any CPU
+		{2ADCA724-2B6D-46EC-87F7-604D7918B89A}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{2ADCA724-2B6D-46EC-87F7-604D7918B89A}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{2ADCA724-2B6D-46EC-87F7-604D7918B89A}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{2ADCA724-2B6D-46EC-87F7-604D7918B89A}.Release|Any CPU.Build.0 = Release|Any CPU
+		{69A2C77D-6DB7-4AE4-B179-D1F5CF5E2DF0}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{69A2C77D-6DB7-4AE4-B179-D1F5CF5E2DF0}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{69A2C77D-6DB7-4AE4-B179-D1F5CF5E2DF0}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{69A2C77D-6DB7-4AE4-B179-D1F5CF5E2DF0}.Release|Any CPU.Build.0 = Release|Any CPU
+		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0}.Release|Any CPU.Build.0 = Release|Any CPU
+		{8A90C292-8761-4F70-8E1F-EFC097FEADB3}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{8A90C292-8761-4F70-8E1F-EFC097FEADB3}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{8A90C292-8761-4F70-8E1F-EFC097FEADB3}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{8A90C292-8761-4F70-8E1F-EFC097FEADB3}.Release|Any CPU.Build.0 = Release|Any CPU
+		{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}.Release|Any CPU.Build.0 = Release|Any CPU
+		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}.Release|Any CPU.Build.0 = Release|Any CPU
+		{86D93406-412A-4429-93B2-92AAD0407784}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{86D93406-412A-4429-93B2-92AAD0407784}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{86D93406-412A-4429-93B2-92AAD0407784}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{86D93406-412A-4429-93B2-92AAD0407784}.Release|Any CPU.Build.0 = Release|Any CPU
+		{398D2998-0835-41F5-99A3-608CAB8051E2}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{398D2998-0835-41F5-99A3-608CAB8051E2}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{398D2998-0835-41F5-99A3-608CAB8051E2}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{398D2998-0835-41F5-99A3-608CAB8051E2}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(NestedProjects) = preSolution
+		{2ADCA724-2B6D-46EC-87F7-604D7918B89A} = {43091528-9509-43CB-A003-9C5C11E96DD6}
+		{69A2C77D-6DB7-4AE4-B179-D1F5CF5E2DF0} = {43091528-9509-43CB-A003-9C5C11E96DD6}
+		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0} = {43091528-9509-43CB-A003-9C5C11E96DD6}
+		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F} = {43091528-9509-43CB-A003-9C5C11E96DD6}
+		{86D93406-412A-4429-93B2-92AAD0407784} = {43091528-9509-43CB-A003-9C5C11E96DD6}
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {7CA41ED3-2CED-40CC-AA21-28C3B42B1E86}
+	EndGlobalSection
+EndGlobal

Semi.Avalonia.slnx

@@ -1,28 +0,0 @@
-<Solution>
-    <Folder Name="/Demo/">
-        <Project Path="demo/Semi.Avalonia.Demo.Android/Semi.Avalonia.Demo.Android.csproj"/>
-        <Project Path="demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj"/>
-        <Project Path="demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj"/>
-        <Project Path="demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj"/>
-        <Project Path="demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj"/>
-    </Folder>
-    <Folder Name="/GitHub Action/">
-        <File Path=".github/workflows/deploy.yml"/>
-        <File Path=".github/workflows/pack-nightly.yml"/>
-        <File Path=".github/workflows/pack.yml"/>
-        <File Path=".github/workflows/publish.yml"/>
-        <File Path=".github/workflows/release-tag.yml"/>
-    </Folder>
-    <Folder Name="/Solution Items/Demo/">
-        <File Path="demo/Directory.Packages.props"/>
-        <File Path="demo/global.json"/>
-    </Folder>
-    <Folder Name="/Solution Items/Package/">
-        <File Path="src/Directory.Packages.props"/>
-        <File Path="src/Directory.Build.props"/>
-    </Folder>
-    <Project Path="src/Semi.Avalonia.ColorPicker/Semi.Avalonia.ColorPicker.csproj"/>
-    <Project Path="src/Semi.Avalonia.DataGrid/Semi.Avalonia.DataGrid.csproj"/>
-    <Project Path="src/Semi.Avalonia.TreeDataGrid/Semi.Avalonia.TreeDataGrid.csproj"/>
-    <Project Path="src/Semi.Avalonia/Semi.Avalonia.csproj"/>
-</Solution>

demo/Directory.Build.props

@@ -0,0 +1,7 @@
+<Project>
+    <PropertyGroup>
+        <AvaloniaVersion>11.2.5</AvaloniaVersion>
+        <DataGridVersion>11.2.5</DataGridVersion>
+        <CommunityToolkitVersion>8.4.0</CommunityToolkitVersion>
+    </PropertyGroup>
+</Project>

demo/Directory.Packages.props

@@ -1,27 +0,0 @@
-<Project>
-    <PropertyGroup>
-        <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
-        <AvaloniaVersion>11.3.10</AvaloniaVersion>
-        <DataGridVersion>11.3.10</DataGridVersion>
-        <SkiaSharpVersion>3.119.1</SkiaSharpVersion>
-    </PropertyGroup>
-    <ItemGroup>
-        <PackageVersion Include="Avalonia" Version="$(AvaloniaVersion)"/>
-        <PackageVersion Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
-        <PackageVersion Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
-        <PackageVersion Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)"/>
-        <PackageVersion Include="Avalonia.iOS" Version="$(AvaloniaVersion)" />
-        <PackageVersion Include="Avalonia.Browser" Version="$(AvaloniaVersion)" />
-        <PackageVersion Include="Avalonia.Android" Version="$(AvaloniaVersion)" />
-        <PackageVersion Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
-        <PackageVersion Include="Avalonia.Controls.DataGrid" Version="$(DataGridVersion)"/>
-
-        <PackageVersion Include="SkiaSharp" Version="$(SkiaSharpVersion)"/>
-        <PackageVersion Include="SkiaSharp.NativeAssets.WebAssembly" Version="$(SkiaSharpVersion)"/>
-
-        <PackageVersion Include="Xamarin.AndroidX.Core.SplashScreen" Version="1.2.0"/>
-
-        <PackageVersion Include="CommunityToolkit.Mvvm" Version="8.4.0"/>
-        <PackageVersion Include="Irihi.Avalonia.Shared" Version="0.3.1"/>
-    </ItemGroup>
-</Project>

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

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

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

@@ -1,6 +1,5 @@
 using Android.App;
 using Android.Content.PM;
-using Avalonia;
 using Avalonia.Android;
 
 namespace Semi.Avalonia.Demo.Android;
@@ -14,9 +13,4 @@ namespace Semi.Avalonia.Demo.Android;
     ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.ScreenSize | ConfigChanges.UiMode)]
 public class MainActivity : AvaloniaMainActivity<App>
 {
-    protected override AppBuilder CustomizeAppBuilder(AppBuilder builder)
-    {
-        return base.CustomizeAppBuilder(builder)
-            .WithSourceHanSansCNFont();
-    }
 }

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

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
     <PropertyGroup>
         <OutputType>Exe</OutputType>
-        <TargetFramework>net10.0-android</TargetFramework>
+        <TargetFramework>net8.0-android</TargetFramework>
         <SupportedOSPlatformVersion>21</SupportedOSPlatformVersion>
         <Nullable>enable</Nullable>
         <ApplicationId>com.irihitech.Semi.Avalonia</ApplicationId>
@@ -14,13 +14,14 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <AndroidResource Include="Icon.png" Link="Resources\drawable\Icon.png"/>
+        <AndroidResource Include="Icon.png">
-        <AvaloniaResource Include="..\Fonts\*" Link="Assets\Fonts\%(Filename)%(Extension)" />
+            <Link>Resources\drawable\Icon.png</Link>
+        </AndroidResource>
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Android"/>
+        <PackageReference Include="Avalonia.Android" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="Xamarin.AndroidX.Core.SplashScreen"/>
+        <PackageReference Include="Xamarin.AndroidX.Core.SplashScreen" Version="1.0.1.1"/>
     </ItemGroup>
 
     <ItemGroup>

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

@@ -4,9 +4,9 @@
         <TargetFramework>net8.0</TargetFramework>
         <Nullable>enable</Nullable>
         <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
-        <ApplicationIcon>..\Semi.Avalonia.Demo\Assets\irihi.ico</ApplicationIcon>
         <!-- Uncomment below to enable Native AOT compilation-->
         <!--<PublishAot>true</PublishAot>-->
+        <!--<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>-->
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
@@ -23,7 +23,7 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Desktop"/>
+        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)"/>
     </ItemGroup>
 
     <ItemGroup>

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

@@ -4,9 +4,9 @@
         <TargetFramework>net8.0</TargetFramework>
         <Nullable>enable</Nullable>
         <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
-        <ApplicationIcon>..\Semi.Avalonia.Demo\Assets\irihi.ico</ApplicationIcon>
         <!-- Uncomment below to enable Native AOT compilation-->
         <!--<PublishAot>true</PublishAot>-->
+        <!--<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>-->
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
@@ -23,8 +23,8 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Desktop"/>
+        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="Avalonia.LinuxFramebuffer"/>
+        <PackageReference Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)"/>
     </ItemGroup>
 
     <ItemGroup>

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

@@ -1,19 +1,17 @@
 <Project Sdk="Microsoft.NET.Sdk.WebAssembly">
     <PropertyGroup>
-        <TargetFramework>net10.0-browser</TargetFramework>
+        <TargetFramework>net8.0-browser</TargetFramework>
         <OutputType>Exe</OutputType>
         <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
         <Nullable>enable</Nullable>
     </PropertyGroup>
 
     <ItemGroup>
-        <AvaloniaResource Include="..\Fonts\*" Link="Assets\Fonts\%(Filename)%(Extension)" />
+        <AvaloniaResource Include="Assets\**"/>
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Browser"/>
+        <PackageReference Include="Avalonia.Browser" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="SkiaSharp"/>
-        <PackageReference Include="SkiaSharp.NativeAssets.WebAssembly"/>
     </ItemGroup>
 
     <ItemGroup>

demo/Semi.Avalonia.Demo/App.axaml

@@ -1,11 +1,11 @@
 <Application
-    Name="Semi Avalonia Demo"
     x:Class="Semi.Avalonia.Demo.App"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    x:CompileBindings="True"
+    x:DataType="viewModels:ApplicationViewModel"
     xmlns:semi="https://irihi.tech/semi"
-    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels">
-    x:DataType="vm:ApplicationViewModel">
     <Application.Styles>
         <semi:SemiTheme Locale="zh-CN" />
         <semi:SemiPopupAnimations />
@@ -20,30 +20,12 @@
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Application.Resources>
-    <NativeMenu.Menu>
-        <NativeMenu>
-            <NativeMenuItem
-                Header="About Us"
-                Command="{Binding JumpToCommand}"
-                CommandParameter="{Binding $self.Header}" />
-        </NativeMenu>
-    </NativeMenu.Menu>
     <TrayIcon.Icons>
         <TrayIcons>
-            <TrayIcon
+            <TrayIcon Icon="/Assets/irihi.ico" MacOSProperties.IsTemplateIcon="true" ToolTipText="Semi Avalonia Demo">
-                Icon="{OnPlatform Default=/Assets/irihi.ico, macOS=/Assets/irihi2.ico}"
-                MacOSProperties.IsTemplateIcon="true"
-                Command="{Binding ActivateCommand}"
-                ToolTipText="Semi Avalonia Demo">
                 <TrayIcon.Menu>
                     <NativeMenu>
-                        <NativeMenuItem
+                        <NativeMenuItem Header="Exit" Command="{Binding ExitCommand}" />
-                            Header="About Us"
-                            Command="{Binding JumpToCommand}"
-                            CommandParameter="{Binding $self.Header}" />
-                        <NativeMenuItem
-                            Header="Exit"
-                            Command="{Binding ExitCommand}" />
                     </NativeMenu>
                 </TrayIcon.Menu>
             </TrayIcon>

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

@@ -5,8 +5,8 @@ namespace Semi.Avalonia.Demo.Constant;
 
 public static class ColorTokens
 {
-    public static IReadOnlyList<Tuple<string, string>> PrimaryTokens { get; } =
+    public static IReadOnlyList<Tuple<string, string>> PrimaryTokens { get; } = new List<Tuple<string, string>>
-    [
+    {
         new("SemiColorPrimary", "Primary"),
         new("SemiColorPrimaryPointerover", "Primary Pointerover"),
         new("SemiColorPrimaryActive", "Primary Active"),
@@ -14,156 +14,130 @@ public static class ColorTokens
         new("SemiColorPrimaryLight", "Primary Light"),
         new("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
         new("SemiColorPrimaryLightActive", "Primary Light Active"),
-    ];
+    };
 
-    public static IReadOnlyList<Tuple<string, string>> SecondaryTokens { get; } =
+    public static IReadOnlyList<Tuple<string, string>> SecondaryTokens { get; } = new List<Tuple<string, string>>
-    [
+    {
         new("SemiColorSecondary", "Secondary"),
         new("SemiColorSecondaryPointerover", "Secondary Pointerover"),
         new("SemiColorSecondaryActive", "Secondary Active"),
         new("SemiColorSecondaryDisabled", "Secondary Disabled"),
         new("SemiColorSecondaryLight", "Secondary Light"),
         new("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"),
-        new("SemiColorSecondaryLightActive", "Secondary Light Active")
+        new("SemiColorSecondaryLightActive", "Secondary Light Active"),
-    ];
+    };
 
-    public static IReadOnlyList<Tuple<string, string>> TertiaryTokens { get; } =
+    public static IReadOnlyList<Tuple<string, string>> TertiaryTokens { get; } = new List<Tuple<string, string>>
-    [
+    {
         new("SemiColorTertiary", "Tertiary"),
         new("SemiColorTertiaryPointerover", "Tertiary Pointerover"),
         new("SemiColorTertiaryActive", "Tertiary Active"),
         new("SemiColorTertiaryLight", "Tertiary Light"),
         new("SemiColorTertiaryLightPointerover", "Tertiary Light Pointerover"),
-        new("SemiColorTertiaryLightActive", "Tertiary Light Active")
+        new("SemiColorTertiaryLightActive", "Tertiary Light Active"),
-    ];
+    };
 
-    public static IReadOnlyList<Tuple<string, string>> InformationTokens { get; } =
+    public static IReadOnlyList<Tuple<string, string>> InformationTokens { get; } = new List<Tuple<string, string>>
-    [
+    {
         new("SemiColorInformation", "Information"),
         new("SemiColorInformationPointerover", "Information Pointerover"),
         new("SemiColorInformationActive", "Information Active"),
         new("SemiColorInformationDisabled", "Information Disabled"),
         new("SemiColorInformationLight", "Information Light"),
         new("SemiColorInformationLightPointerover", "Information Light Pointerover"),
-        new("SemiColorInformationLightActive", "Information Light Active")
+        new("SemiColorInformationLightActive", "Information Light Active"),
-    ];
+    };
 
-    public static IReadOnlyList<Tuple<string, string>> SuccessTokens { get; } =
+    public static IReadOnlyList<Tuple<string, string>> SuccessTokens { get; } = new List<Tuple<string, string>>
-    [
+    {
         new("SemiColorSuccess", "Success"),
         new("SemiColorSuccessPointerover", "Success Pointerover"),
         new("SemiColorSuccessActive", "Success Active"),
         new("SemiColorSuccessDisabled", "Success Disabled"),
         new("SemiColorSuccessLight", "Success Light"),
         new("SemiColorSuccessLightPointerover", "Success Light Pointerover"),
-        new("SemiColorSuccessLightActive", "Success Light Active")
+        new("SemiColorSuccessLightActive", "Success Light Active"),
-    ];
+    };
 
-    public static IReadOnlyList<Tuple<string, string>> WarningTokens { get; } =
+    public static IReadOnlyList<Tuple<string, string>> WarningTokens { get; } = new List<Tuple<string, string>>
-    [
+    {
         new("SemiColorWarning", "Warning"),
         new("SemiColorWarningPointerover", "Warning Pointerover"),
         new("SemiColorWarningActive", "Warning Active"),
         new("SemiColorWarningLight", "Warning Light"),
         new("SemiColorWarningLightPointerover", "Warning Light Pointerover"),
-        new("SemiColorWarningLightActive", "Warning Light Active")
+        new("SemiColorWarningLightActive", "Warning Light Active"),
-    ];
+    };
 
-    public static IReadOnlyList<Tuple<string, string>> DangerTokens { get; } =
+    public static IReadOnlyList<Tuple<string, string>> DangerTokens { get; } = new List<Tuple<string, string>>
-    [
+    {
         new("SemiColorDanger", "Danger"),
         new("SemiColorDangerPointerover", "Danger Pointerover"),
         new("SemiColorDangerActive", "Danger Active"),
         new("SemiColorDangerLight", "Danger Light"),
         new("SemiColorDangerLightPointerover", "Danger Light Pointerover"),
-        new("SemiColorDangerLightActive", "Danger Light Active")
+        new("SemiColorDangerLightActive", "Danger Light Active"),
-    ];
+    };
 
-    public static IReadOnlyList<Tuple<string, string>> AIGeneralTokens { get; } =
+    public static IReadOnlyList<Tuple<string, string>> TextTokens { get; } = new List<Tuple<string, string>>
-    [
+    {
-        new("SemiColorAIGeneral", "AI General"),
-        new("SemiColorAIGeneralPointerover", "AI General Pointerover"),
-        new("SemiColorAIGeneralActive", "AI General Active"),
-        new("SemiColorAIGeneralDisabled", "AI General Disabled")
-    ];
-
-    public static IReadOnlyList<Tuple<string, string>> AIPurpleTokens { get; } =
-    [
-        new("SemiColorAIPurple", "AI Purple"),
-        new("SemiColorAIPurplePointerover", "AI Purple Pointerover"),
-        new("SemiColorAIPurpleActive", "AI Purple Active"),
-        new("SemiColorAIPurpleDisabled", "AI Purple Disabled")
-    ];
-
-    public static IReadOnlyList<Tuple<string, string>> AIBackgroundTokens { get; } =
-    [
-        new("SemiColorAIBackgroundBottom", "AI Bottom Background"),
-        new("SemiColorAIBackgroundBottomPointerover", "AI Bottom Background Pointerover"),
-        new("SemiColorAIBackgroundBottomActive", "AI Bottom Background Active"),
-        new("SemiColorAIBackgroundTop", "AI Top Background"),
-        new("SemiColorAIBackgroundTopPointerover", "AI Top Background Pointerover"),
-        new("SemiColorAIBackgroundTopActive", "AI Top Background Active"),
-    ];
-
-    public static IReadOnlyList<Tuple<string, string>> TextTokens { get; } =
-    [
         new("SemiColorText0", "Text 0"),
         new("SemiColorText1", "Text 1"),
         new("SemiColorText2", "Text 2"),
-        new("SemiColorText3", "Text 3")
+        new("SemiColorText3", "Text 3"),
-    ];
+    };
 
-    public static IReadOnlyList<Tuple<string, string>> LinkTokens { get; } =
+    public static IReadOnlyList<Tuple<string, string>> LinkTokens { get; } = new List<Tuple<string, string>>
-    [
+    {
         new("SemiColorLink", "Link"),
         new("SemiColorLinkPointerover", "Link Pointerover"),
         new("SemiColorLinkActive", "Link Active"),
-        new("SemiColorLinkVisited", "Link Visited")
+        new("SemiColorLinkVisited", "Link Visited"),
-    ];
+    };
 
-    public static IReadOnlyList<Tuple<string, string>> BackgroundTokens { get; } =
+    public static IReadOnlyList<Tuple<string, string>> BackgroundTokens { get; } = new List<Tuple<string, string>>
-    [
+    {
         new("SemiColorBackground0", "Background 0"),
         new("SemiColorBackground1", "Background 1"),
         new("SemiColorBackground2", "Background 2"),
         new("SemiColorBackground3", "Background 3"),
-        new("SemiColorBackground4", "Background 4")
+        new("SemiColorBackground4", "Background 4"),
-    ];
+    };
 
-    public static IReadOnlyList<Tuple<string, string>> FillTokens { get; } =
+    public static IReadOnlyList<Tuple<string, string>> FillTokens { get; } = new List<Tuple<string, string>>
-    [
+    {
         new("SemiColorFill0", "Fill 0"),
         new("SemiColorFill1", "Fill 1"),
-        new("SemiColorFill2", "Fill 2")
+        new("SemiColorFill2", "Fill 2"),
-    ];
+    };
 
-    public static IReadOnlyList<Tuple<string, string>> BorderTokens { get; } =
+    public static IReadOnlyList<Tuple<string, string>> BorderTokens { get; } = new List<Tuple<string, string>>
-    [
+    {
         new("SemiColorBorder", "Border"),
-        new("SemiColorFocusBorder", "Focus Border")
+        new("SemiColorFocusBorder", "Focus Border"),
-    ];
+    };
 
-    public static IReadOnlyList<Tuple<string, string>> DisabledTokens { get; } =
+    public static IReadOnlyList<Tuple<string, string>> DisabledTokens { get; } = new List<Tuple<string, string>>
-    [
+    {
         new("SemiColorDisabledText", "Disabled Text"),
         new("SemiColorDisabledBorder", "Disabled Border"),
         new("SemiColorDisabledBackground", "Disabled Background"),
-        new("SemiColorDisabledFill", "Disabled Fill")
+        new("SemiColorDisabledFill", "Disabled Fill"),
-    ];
+    };
 
-    public static IReadOnlyList<Tuple<string, string>> OtherTokens { get; } =
+    public static IReadOnlyList<Tuple<string, string>> OtherTokens { get; } = new List<Tuple<string, string>>
-    [
+    {
         new("SemiColorWhite", "White"),
         new("SemiColorBlack", "Black"),
         new("SemiColorNavBackground", "Navigation Background"),
         new("SemiColorOverlayBackground", "Overlay Background"),
         new("SemiColorHighlightBackground", "Highlight Background"),
-        new("SemiColorHighlight", "Highlight Text")
+        new("SemiColorHighlight", "Highlight Text"),
-    ];
+    };
 
-    public static IReadOnlyList<Tuple<string, string>> ShadowTokens { get; } =
+    public static IReadOnlyList<Tuple<string, string>> ShadowTokens { get; } = new List<Tuple<string, string>>
-    [
+    {
         new("SemiColorShadow", "Shadow"),
-        new("SemiShadowElevated", "Shadow Elevated")
+        new("SemiShadowElevated", "Shadow Elevated"),
-    ];
+    };
 }

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

@@ -92,12 +92,6 @@ public class ColorDetailControl : TemplatedControl
             Hex2 = hex2 as string;
             OpacityNumber = brush.Opacity.ToString(CultureInfo.InvariantCulture);
         }
-        else
-        {
-            Hex = null;
-            Hex2 = null;
-            OpacityNumber = null;
-        }
     }
 
     public async Task Copy(object o)

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

@@ -1,236 +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"
-    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,14 +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:DataType="vm:AutoCompleteBoxDemoViewModel"
+    x:CompileBindings="False"
+    x:DataType="local:AutoCompleteBoxDemoViewModel"
     mc:Ignorable="d">
     <Design.DataContext>
-        <vm:AutoCompleteBoxDemoViewModel />
+        <local:AutoCompleteBoxDemoViewModel />
     </Design.DataContext>
     <StackPanel HorizontalAlignment="Left" Spacing="20">
         <StackPanel.Styles>
@@ -20,7 +21,7 @@
                     <Binding Path="States" />
                 </Setter>
                 <Setter Property="ItemTemplate">
-                    <DataTemplate DataType="vm:StateData">
+                    <DataTemplate DataType="local:StateData">
                         <TextBlock Text="{Binding Name}" />
                     </DataTemplate>
                 </Setter>
@@ -29,40 +30,40 @@
 
         <AutoCompleteBox
             Watermark="Please select a State"
-            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+            ValueMemberBinding="{Binding Name}" />
         <AutoCompleteBox
             Classes="Large"
-            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+            ValueMemberBinding="{ReflectionBinding Name}" />
         <AutoCompleteBox
             Classes="Small"
-            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+            ValueMemberBinding="{ReflectionBinding Name}" />
         <AutoCompleteBox
             Classes="Bordered"
-            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+            ValueMemberBinding="{ReflectionBinding Name}" />
         <AutoCompleteBox
             IsEnabled="False"
             Watermark="Disabled"
-            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+            ValueMemberBinding="{ReflectionBinding Name}" />
         <AutoCompleteBox
             InnerLeftContent="https://"
             InnerRightContent=".com"
-            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+            ValueMemberBinding="{ReflectionBinding Name}" />
 
         <StackPanel Orientation="Horizontal">
             <AutoCompleteBox
                 Width="100"
                 Classes="Large"
                 Watermark="Large"
-                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+                ValueMemberBinding="{ReflectionBinding Name}" />
             <AutoCompleteBox
                 Width="100"
                 Watermark="Default"
-                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+                ValueMemberBinding="{ReflectionBinding Name}" />
             <AutoCompleteBox
                 Width="100"
                 Classes="Small"
                 Watermark="Small"
-                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+                ValueMemberBinding="{ReflectionBinding Name}" />
         </StackPanel>
 
         <StackPanel Orientation="Horizontal">
@@ -70,17 +71,17 @@
                 Width="100"
                 IsEnabled="False"
                 Watermark="Disabled"
-                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+                ValueMemberBinding="{ReflectionBinding Name}" />
             <AutoCompleteBox
                 Width="100"
                 Classes="Bordered"
                 Watermark="Bordered"
-                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+                ValueMemberBinding="{ReflectionBinding Name}" />
             <AutoCompleteBox
                 Width="100"
                 Classes="Bordered"
                 IsEnabled="False"
-                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+                ValueMemberBinding="{ReflectionBinding Name}" />
         </StackPanel>
 
     </StackPanel>

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

@@ -6,369 +6,174 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
     <ScrollViewer>
-        <StackPanel HorizontalAlignment="Left" Spacing="8">
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
             <StackPanel.Styles>
-                <Style Selector="SplitButton,DropDownButton,ToggleSplitButton">
+                <Style Selector="SplitButton">
-                    <Setter Property="Button.Flyout">
+                    <Setter Property="Flyout">
-                        <MenuFlyout>
+                        <MenuFlyout Placement="BottomEdgeAlignedRight">
+                            <MenuItem Header="Submit All" />
+                            <MenuItem Header="Submit Updated" />
+                        </MenuFlyout>
+                    </Setter>
+                </Style>
+                <Style Selector="DropDownButton">
+                    <Setter Property="Flyout">
+                        <MenuFlyout Placement="BottomEdgeAlignedRight">
+                            <MenuItem Header="Submit All" />
+                            <MenuItem Header="Submit Updated" />
+                        </MenuFlyout>
+                    </Setter>
+                </Style>
+                <Style Selector="ToggleSplitButton">
+                    <Setter Property="Flyout">
+                        <MenuFlyout Placement="BottomEdgeAlignedRight">
                             <MenuItem Header="Submit All" />
                             <MenuItem Header="Submit Updated" />
                         </MenuFlyout>
                     </Setter>
                 </Style>
             </StackPanel.Styles>
-            <HeaderedContentControl
-                Theme="{StaticResource GroupBox}">
-                <HeaderedContentControl.Header>
-                    <StackPanel Spacing="8">
-                        <TextBlock Text="Button/RepeatButton Theme" />
-                        <WrapPanel ItemSpacing="4">
-                            <TextBlock Text="Theme:" />
-                            <Label Theme="{StaticResource TagLabel}" Classes="Blue Solid" Content="Light" />
-                            <Label Theme="{StaticResource TagLabel}" Classes="Blue Solid" Content="Solid" />
-                            <Label Theme="{StaticResource TagLabel}" Classes="Blue Solid" Content="Outline" />
-                            <Label Theme="{StaticResource TagLabel}" Classes="Blue Solid" Content="Borderless" />
-                        </WrapPanel>
-                        <WrapPanel ItemSpacing="4">
-                            <TextBlock Text="Classes:" />
-                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Primary" />
-                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Secondary" />
-                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Tertiary" />
-                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Success" />
-                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Warning" />
-                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Danger" />
-                        </WrapPanel>
-                    </StackPanel>
-                </HeaderedContentControl.Header>
-                <StackPanel HorizontalAlignment="Left" Spacing="16">
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <Button Content="Default" />
-                        <Button Content="Primary" Classes="Primary" />
-                        <Button Content="Secondary" Classes="Secondary" />
-                        <Button Content="Tertiary" Classes="Tertiary" />
-                        <Button Content="Success" Classes="Success" />
-                        <Button Content="Warning" Classes="Warning" />
-                        <Button Content="Danger" Classes="Danger" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <Button Content="Default" Theme="{StaticResource SolidButton}" />
-                        <Button Content="Primary" Classes="Primary" Theme="{StaticResource SolidButton}" />
-                        <Button Content="Secondary" Classes="Secondary" Theme="{StaticResource SolidButton}" />
-                        <Button Content="Tertiary" Classes="Tertiary" Theme="{StaticResource SolidButton}" />
-                        <Button Content="Success" Classes="Success" Theme="{StaticResource SolidButton}" />
-                        <Button Content="Warning" Classes="Warning" Theme="{StaticResource SolidButton}" />
-                        <Button Content="Danger" Classes="Danger" Theme="{StaticResource SolidButton}" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <Button Content="Default" Theme="{StaticResource OutlineButton}" />
-                        <Button Content="Primary" Classes="Primary" Theme="{StaticResource OutlineButton}" />
-                        <Button Content="Secondary" Classes="Secondary" Theme="{StaticResource OutlineButton}" />
-                        <Button Content="Tertiary" Classes="Tertiary" Theme="{StaticResource OutlineButton}" />
-                        <Button Content="Success" Classes="Success" Theme="{StaticResource OutlineButton}" />
-                        <Button Content="Warning" Classes="Warning" Theme="{StaticResource OutlineButton}" />
-                        <Button Content="Danger" Classes="Danger" Theme="{StaticResource OutlineButton}" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <Button Content="Default" Theme="{StaticResource BorderlessButton}" />
-                        <Button Content="Primary" Classes="Primary" Theme="{StaticResource BorderlessButton}" />
-                        <Button Content="Secondary" Classes="Secondary" Theme="{StaticResource BorderlessButton}" />
-                        <Button Content="Tertiary" Classes="Tertiary" Theme="{StaticResource BorderlessButton}" />
-                        <Button Content="Success" Classes="Success" Theme="{StaticResource BorderlessButton}" />
-                        <Button Content="Warning" Classes="Warning" Theme="{StaticResource BorderlessButton}" />
-                        <Button Content="Danger" Classes="Danger" Theme="{StaticResource BorderlessButton}" />
-                    </WrapPanel>
-                </StackPanel>
-            </HeaderedContentControl>
 
-            <HeaderedContentControl
+            <TextBlock>Light (Default)</TextBlock>
-                Theme="{StaticResource GroupBox}"
+            <StackPanel Orientation="Horizontal" Spacing="20">
-                Header="Prohibited Status">
+                <Button Classes="Primary">Primary</Button>
-                <WrapPanel ItemSpacing="16" LineSpacing="16">
+                <Button Classes="Secondary">Secondary</Button>
-                    <Button Content="Light" IsEnabled="False" />
+                <Button Classes="Tertiary">Tertiary</Button>
-                    <Button Content="Solid" IsEnabled="False" Theme="{StaticResource SolidButton}" />
+                <Button Classes="Success">Success</Button>
-                    <Button Content="Outline" IsEnabled="False" Theme="{StaticResource OutlineButton}" />
+                <Button Classes="Warning">Warning</Button>
-                    <Button Content="Borderless" IsEnabled="False" Theme="{StaticResource BorderlessButton}" />
+                <Button Classes="Danger">Danger</Button>
-                </WrapPanel>
+                <Button Classes="Danger" IsEnabled="False">Disabled</Button>
-            </HeaderedContentControl>
+            </StackPanel>
+            <TextBlock>Solid</TextBlock>
+            <StackPanel Orientation="Horizontal" Spacing="20">
+                <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
+                <Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
+                <Button Classes="Tertiary" Theme="{DynamicResource SolidButton}">Tertiary</Button>
+                <Button Classes="Success" Theme="{DynamicResource SolidButton}">Success</Button>
+                <Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
+                <Button Classes="Danger" Theme="{DynamicResource SolidButton}">Danger</Button>
+                <Button
+                    Classes="Danger"
+                    IsEnabled="False"
+                    Theme="{DynamicResource SolidButton}">
+                    Disabled
+                </Button>
+            </StackPanel>
+            <TextBlock>Outline</TextBlock>
+            <StackPanel Orientation="Horizontal" Spacing="20">
+                <Button Classes="Primary" Theme="{DynamicResource OutlineButton}">Primary</Button>
+                <Button Classes="Secondary" Theme="{DynamicResource OutlineButton}">Secondary</Button>
+                <Button Classes="Tertiary" Theme="{DynamicResource OutlineButton}">Tertiary</Button>
+                <Button Classes="Success" Theme="{DynamicResource OutlineButton}">Success</Button>
+                <Button Classes="Warning" Theme="{DynamicResource OutlineButton}">Warning</Button>
+                <Button Classes="Danger" Theme="{DynamicResource OutlineButton}">Danger</Button>
+                <Button Classes="Danger" Theme="{DynamicResource OutlineButton}" IsEnabled="False">Disabled</Button>
+            </StackPanel>
+            <TextBlock>Borderless</TextBlock>
+            <StackPanel Orientation="Horizontal" Spacing="20">
+                <Button Classes="Primary" Theme="{DynamicResource BorderlessButton}">Primary</Button>
+                <Button Classes="Secondary" Theme="{DynamicResource BorderlessButton}">Secondary</Button>
+                <Button Classes="Tertiary" Theme="{DynamicResource BorderlessButton}">Tertiary</Button>
+                <Button Classes="Success" Theme="{DynamicResource BorderlessButton}">Success</Button>
+                <Button Classes="Warning" Theme="{DynamicResource BorderlessButton}">Warning</Button>
+                <Button Classes="Danger" Theme="{DynamicResource BorderlessButton}">Danger</Button>
+                <Button
+                    Classes="Danger"
+                    IsEnabled="False"
+                    Theme="{DynamicResource BorderlessButton}">
+                    Disabled
+                </Button>
+            </StackPanel>
+            <TextBlock>Disabled</TextBlock>
+            <StackPanel Background="{DynamicResource SemiColorBackground1}" Orientation="Horizontal" Spacing="20">
+                <Button IsEnabled="False">Light</Button>
+                <Button IsEnabled="False" Theme="{DynamicResource SolidButton}">Solid</Button>
+                <Button IsEnabled="False" Theme="{DynamicResource OutlineButton}">Outline</Button>
+                <Button IsEnabled="False" Theme="{DynamicResource BorderlessButton}">Borderless</Button>
+            </StackPanel>
+            <TextBlock>Size Classes</TextBlock>
+            <StackPanel Orientation="Horizontal" Spacing="20">
+                <Button Classes="Primary Small">Small</Button>
+                <Button Classes="Primary">Default</Button>
+                <Button Classes="Primary Large">Large</Button>
+            </StackPanel>
 
-            <HeaderedContentControl
+            <TextBlock>DropDownButton</TextBlock>
-                Theme="{StaticResource GroupBox}">
+            <StackPanel Orientation="Horizontal" Spacing="8">
-                <HeaderedContentControl.Header>
+                <DropDownButton Content="Primary" />
-                    <StackPanel Spacing="8">
+                <DropDownButton Classes="Secondary" Content="Secondary" />
-                        <WrapPanel ItemSpacing="4">
+                <DropDownButton Classes="Tertiary" Content="Tertiary" />
-                            <TextBlock Text="Size Classes:" />
+                <DropDownButton Classes="Success" Content="Success" />
-                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Large" />
+                <DropDownButton Classes="Warning" Content="Warning" />
-                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Small" />
+                <DropDownButton Classes="Danger" Content="Danger" />
-                        </WrapPanel>
+                <DropDownButton
-                    </StackPanel>
+                    Classes="Danger"
-                </HeaderedContentControl.Header>
+                    Content="Disabled"
-                <WrapPanel ItemSpacing="16" LineSpacing="16">
+                    IsEnabled="False" />
-                    <Button Content="Large" Classes="Large" />
+            </StackPanel>
-                    <Button Content="Default" />
+            <StackPanel Orientation="Horizontal" Spacing="8">
-                    <Button Content="Small" Classes="Small" />
+                <DropDownButton Content="Default" Classes="Success"/>
-                </WrapPanel>
+                <DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success"/>
-            </HeaderedContentControl>
+                <DropDownButton Content="Outline" Theme="{DynamicResource OutlineDropDownButton}" Classes="Success"/>
+                <DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success"/>
+                <DropDownButton Content="Default" Classes="Success" IsEnabled="False"/>
+                <DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success" IsEnabled="False"/>
+                <DropDownButton Content="Outline" Theme="{DynamicResource OutlineDropDownButton}" Classes="Success" IsEnabled="False"/>
+                <DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success" IsEnabled="False"/>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal" Spacing="8">
+                <DropDownButton Classes="Small" Content="Small" />
+                <DropDownButton Content="Default" />
+                <DropDownButton Classes="Large" Content="Large" />
+            </StackPanel>
 
-            <HeaderedContentControl
+            <TextBlock>SplitButton</TextBlock>
-                Theme="{StaticResource GroupBox}">
+            <StackPanel Orientation="Horizontal" Spacing="8">
-                <HeaderedContentControl.Header>
+                <SplitButton Content="Primary" />
-                    <StackPanel Spacing="8">
+                <SplitButton Classes="Secondary" Content="Secondary" />
-                        <TextBlock Text="AI style - Colorful Button" />
+                <SplitButton Classes="Tertiary" Content="Tertiary" />
-                        <WrapPanel ItemSpacing="4">
+                <SplitButton Classes="Success" Content="Success" />
-                            <TextBlock Text="Theme:" />
+                <SplitButton Classes="Warning" Content="Warning" />
-                            <Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient Solid" Content="Light" />
+                <SplitButton Classes="Danger" Content="Danger" />
-                            <Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient Solid" Content="Solid" />
+                <SplitButton Classes="Danger" Content="Disabled" IsEnabled="False" />
-                            <Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient Solid" Content="Outline" />
+            </StackPanel>
-                            <Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient Solid" Content="Borderless" />
+            <StackPanel Orientation="Horizontal" Spacing="8">
-                        </WrapPanel>
+                <SplitButton Content="Default" Classes="Success" />
-                        <WrapPanel ItemSpacing="4">
+                <SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}"  Classes="Success" />
-                            <TextBlock Text="Classes:" />
+                <SplitButton Content="Outline" Theme="{DynamicResource OutlineSplitButton}" Classes="Success" />
-                            <Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient" Content="Colorful Primary" />
+                <SplitButton Content="Borderless" Theme="{DynamicResource BorderlessSplitButton}" Classes="Success" />
-                            <Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient" Content="Colorful Tertiary" />
+                <SplitButton Content="Default" Classes="Success" IsEnabled="False" />
-                        </WrapPanel>
+                <SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}" Classes="Success" IsEnabled="False" />
-                    </StackPanel>
+                <SplitButton Content="Outline" Theme="{DynamicResource OutlineSplitButton}" Classes="Success" IsEnabled="False" />
-                </HeaderedContentControl.Header>
+                <SplitButton Content="Borderless" Theme="{DynamicResource BorderlessSplitButton}" Classes="Success" IsEnabled="False" />
-                <StackPanel HorizontalAlignment="Left" Spacing="16">
+            </StackPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+            <StackPanel Orientation="Horizontal" Spacing="8">
-                        <Button Content="Primary" Classes="Colorful Primary" />
+                <SplitButton Classes="Small" Content="Small" />
-                        <Button Content="Tertiary" Classes="Colorful Tertiary" />
+                <SplitButton Content="Default" />
-                        <Button Content="Disabled" Classes="Colorful Primary" IsEnabled="False" />
+                <SplitButton Classes="Large" Content="Large" />
-                    </WrapPanel>
+            </StackPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <Button Content="Primary" Classes="Colorful Primary" Theme="{StaticResource SolidButton}" />
-                        <Button Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource SolidButton}" />
-                        <Button Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource SolidButton}" IsEnabled="False" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <Button Content="Primary" Classes="Colorful Primary" Theme="{StaticResource OutlineButton}" />
-                        <Button Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource OutlineButton}" />
-                        <Button Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource OutlineButton}" IsEnabled="False" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <Button Content="Primary" Classes="Colorful Primary" Theme="{StaticResource BorderlessButton}" />
-                        <Button Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource BorderlessButton}" />
-                        <Button Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource BorderlessButton}" IsEnabled="False" />
-                    </WrapPanel>
-                </StackPanel>
-            </HeaderedContentControl>
 
-            <HeaderedContentControl
+            <TextBlock>ToggleSplitButton</TextBlock>
-                Theme="{StaticResource GroupBox}" Header="DropDownButton">
+            <StackPanel Orientation="Horizontal" Spacing="8">
-                <StackPanel HorizontalAlignment="Left" Spacing="16">
+                <ToggleSplitButton Content="Primary" />
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                <ToggleSplitButton Classes="Secondary" Content="Secondary" />
-                        <DropDownButton Content="Default" />
+                <ToggleSplitButton Classes="Tertiary" Content="Tertiary" />
-                        <DropDownButton Content="Primary" Classes="Primary" />
+                <ToggleSplitButton Classes="Success" Content="Success" />
-                        <DropDownButton Content="Secondary" Classes="Secondary" />
+                <ToggleSplitButton Classes="Warning" Content="Warning" />
-                        <DropDownButton Content="Tertiary" Classes="Tertiary" />
+                <ToggleSplitButton Classes="Danger" Content="Danger" />
-                        <DropDownButton Content="Success" Classes="Success" />
+                <ToggleSplitButton Classes="Danger" Content="Disabled" IsEnabled="False" />
-                        <DropDownButton Content="Warning" Classes="Warning" />
+            </StackPanel>
-                        <DropDownButton Content="Danger" Classes="Danger" />
+            <StackPanel Orientation="Horizontal" Spacing="8">
-                    </WrapPanel>
+                <ToggleSplitButton Content="Default" Classes="Success" />
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                <ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True"  />
-                        <DropDownButton Content="Default" Theme="{StaticResource SolidDropDownButton}" />
+                <ToggleSplitButton Content="Default" Classes="Success" IsEnabled="False" />
-                        <DropDownButton Content="Primary" Classes="Primary" Theme="{StaticResource SolidDropDownButton}" />
+                <ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True" IsEnabled="False" />
-                        <DropDownButton Content="Secondary" Classes="Secondary" Theme="{StaticResource SolidDropDownButton}" />
+            </StackPanel>
-                        <DropDownButton Content="Tertiary" Classes="Tertiary" Theme="{StaticResource SolidDropDownButton}" />
+            <StackPanel Orientation="Horizontal" Spacing="8">
-                        <DropDownButton Content="Success" Classes="Success" Theme="{StaticResource SolidDropDownButton}" />
+                <ToggleSplitButton Classes="Small" Content="Small" />
-                        <DropDownButton Content="Warning" Classes="Warning" Theme="{StaticResource SolidDropDownButton}" />
+                <ToggleSplitButton Content="Default" />
-                        <DropDownButton Content="Danger" Classes="Danger" Theme="{StaticResource SolidDropDownButton}" />
+                <ToggleSplitButton Classes="Large" Content="Large" />
-                    </WrapPanel>
+            </StackPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <DropDownButton Content="Default" Theme="{StaticResource OutlineDropDownButton}" />
-                        <DropDownButton Content="Primary" Classes="Primary" Theme="{StaticResource OutlineDropDownButton}" />
-                        <DropDownButton Content="Secondary" Classes="Secondary" Theme="{StaticResource OutlineDropDownButton}" />
-                        <DropDownButton Content="Tertiary" Classes="Tertiary" Theme="{StaticResource OutlineDropDownButton}" />
-                        <DropDownButton Content="Success" Classes="Success" Theme="{StaticResource OutlineDropDownButton}" />
-                        <DropDownButton Content="Warning" Classes="Warning" Theme="{StaticResource OutlineDropDownButton}" />
-                        <DropDownButton Content="Danger" Classes="Danger" Theme="{StaticResource OutlineDropDownButton}" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <DropDownButton Content="Default" Theme="{StaticResource BorderlessDropDownButton}" />
-                        <DropDownButton Content="Primary" Classes="Primary" Theme="{StaticResource BorderlessDropDownButton}" />
-                        <DropDownButton Content="Secondary" Classes="Secondary" Theme="{StaticResource BorderlessDropDownButton}" />
-                        <DropDownButton Content="Tertiary" Classes="Tertiary" Theme="{StaticResource BorderlessDropDownButton}" />
-                        <DropDownButton Content="Success" Classes="Success" Theme="{StaticResource BorderlessDropDownButton}" />
-                        <DropDownButton Content="Warning" Classes="Warning" Theme="{StaticResource BorderlessDropDownButton}" />
-                        <DropDownButton Content="Danger" Classes="Danger" Theme="{StaticResource BorderlessDropDownButton}" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <DropDownButton Content="Light" IsEnabled="False" />
-                        <DropDownButton Content="Solid" IsEnabled="False" Theme="{StaticResource SolidDropDownButton}" />
-                        <DropDownButton Content="Outline" IsEnabled="False" Theme="{StaticResource OutlineDropDownButton}" />
-                        <DropDownButton Content="Borderless" IsEnabled="False" Theme="{StaticResource BorderlessDropDownButton}" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <DropDownButton Content="Large" Classes="Large" />
-                        <DropDownButton Content="Default" />
-                        <DropDownButton Content="Small" Classes="Small" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <DropDownButton Content="Primary" Classes="Colorful Primary" />
-                        <DropDownButton Content="Tertiary" Classes="Colorful Tertiary" />
-                        <DropDownButton Content="Disabled" Classes="Colorful Primary" IsEnabled="False" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <DropDownButton Content="Primary" Classes="Colorful Primary" Theme="{StaticResource SolidDropDownButton}" />
-                        <DropDownButton Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource SolidDropDownButton}" />
-                        <DropDownButton Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource SolidDropDownButton}" IsEnabled="False" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <DropDownButton Content="Primary" Classes="Colorful Primary" Theme="{StaticResource OutlineDropDownButton}" />
-                        <DropDownButton Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource OutlineDropDownButton}" />
-                        <DropDownButton Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource OutlineDropDownButton}" IsEnabled="False" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <DropDownButton Content="Primary" Classes="Colorful Primary" Theme="{StaticResource BorderlessDropDownButton}" />
-                        <DropDownButton Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource BorderlessDropDownButton}" />
-                        <DropDownButton Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource BorderlessDropDownButton}" IsEnabled="False" />
-                    </WrapPanel>
-                </StackPanel>
-            </HeaderedContentControl>
-
-            <HeaderedContentControl
-                Theme="{StaticResource GroupBox}" Header="SplitButton">
-                <StackPanel HorizontalAlignment="Left" Spacing="16">
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <SplitButton Content="Default" />
-                        <SplitButton Content="Primary" Classes="Primary" />
-                        <SplitButton Content="Secondary" Classes="Secondary" />
-                        <SplitButton Content="Tertiary" Classes="Tertiary" />
-                        <SplitButton Content="Success" Classes="Success" />
-                        <SplitButton Content="Warning" Classes="Warning" />
-                        <SplitButton Content="Danger" Classes="Danger" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <SplitButton Content="Default" Theme="{StaticResource SolidSplitButton}" />
-                        <SplitButton Content="Primary" Classes="Primary" Theme="{StaticResource SolidSplitButton}" />
-                        <SplitButton Content="Secondary" Classes="Secondary" Theme="{StaticResource SolidSplitButton}" />
-                        <SplitButton Content="Tertiary" Classes="Tertiary" Theme="{StaticResource SolidSplitButton}" />
-                        <SplitButton Content="Success" Classes="Success" Theme="{StaticResource SolidSplitButton}" />
-                        <SplitButton Content="Warning" Classes="Warning" Theme="{StaticResource SolidSplitButton}" />
-                        <SplitButton Content="Danger" Classes="Danger" Theme="{StaticResource SolidSplitButton}" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <SplitButton Content="Default" Theme="{StaticResource OutlineSplitButton}" />
-                        <SplitButton Content="Primary" Classes="Primary" Theme="{StaticResource OutlineSplitButton}" />
-                        <SplitButton Content="Secondary" Classes="Secondary" Theme="{StaticResource OutlineSplitButton}" />
-                        <SplitButton Content="Tertiary" Classes="Tertiary" Theme="{StaticResource OutlineSplitButton}" />
-                        <SplitButton Content="Success" Classes="Success" Theme="{StaticResource OutlineSplitButton}" />
-                        <SplitButton Content="Warning" Classes="Warning" Theme="{StaticResource OutlineSplitButton}" />
-                        <SplitButton Content="Danger" Classes="Danger" Theme="{StaticResource OutlineSplitButton}" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <SplitButton Content="Default" Theme="{StaticResource BorderlessSplitButton}" />
-                        <SplitButton Content="Primary" Classes="Primary" Theme="{StaticResource BorderlessSplitButton}" />
-                        <SplitButton Content="Secondary" Classes="Secondary" Theme="{StaticResource BorderlessSplitButton}" />
-                        <SplitButton Content="Tertiary" Classes="Tertiary" Theme="{StaticResource BorderlessSplitButton}" />
-                        <SplitButton Content="Success" Classes="Success" Theme="{StaticResource BorderlessSplitButton}" />
-                        <SplitButton Content="Warning" Classes="Warning" Theme="{StaticResource BorderlessSplitButton}" />
-                        <SplitButton Content="Danger" Classes="Danger" Theme="{StaticResource BorderlessSplitButton}" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <SplitButton Content="Light" IsEnabled="False" />
-                        <SplitButton Content="Solid" IsEnabled="False" Theme="{StaticResource SolidSplitButton}" />
-                        <SplitButton Content="Outline" IsEnabled="False" Theme="{StaticResource OutlineSplitButton}" />
-                        <SplitButton Content="Borderless" IsEnabled="False" Theme="{StaticResource BorderlessSplitButton}" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <SplitButton Content="Large" Classes="Large" />
-                        <SplitButton Content="Default" />
-                        <SplitButton Content="Small" Classes="Small" />
-                    </WrapPanel>
-                </StackPanel>
-            </HeaderedContentControl>
-
-            <HeaderedContentControl
-                Theme="{StaticResource GroupBox}"
-                Header="ToggleSplitButton">
-                <StackPanel HorizontalAlignment="Left" Spacing="24">
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <ToggleSplitButton Content="Default" />
-                        <ToggleSplitButton Classes="Primary" Content="Primary" />
-                        <ToggleSplitButton Classes="Secondary" Content="Secondary" />
-                        <ToggleSplitButton Classes="Tertiary" Content="Tertiary" />
-                        <ToggleSplitButton Classes="Success" Content="Success" />
-                        <ToggleSplitButton Classes="Warning" Content="Warning" />
-                        <ToggleSplitButton Classes="Danger" Content="Danger" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <ToggleSplitButton Content="Default" IsChecked="True" />
-                        <ToggleSplitButton Classes="Primary" Content="Primary" IsChecked="True" />
-                        <ToggleSplitButton Classes="Secondary" Content="Secondary" IsChecked="True" />
-                        <ToggleSplitButton Classes="Tertiary" Content="Tertiary" IsChecked="True" />
-                        <ToggleSplitButton Classes="Success" Content="Success" IsChecked="True" />
-                        <ToggleSplitButton Classes="Warning" Content="Warning" IsChecked="True" />
-                        <ToggleSplitButton Classes="Danger" Content="Danger" IsChecked="True" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <ToggleSplitButton Content="Unchecked" Classes="Success" IsEnabled="False" />
-                        <ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True" IsEnabled="False" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <ToggleSplitButton Content="Large" Classes="Large" />
-                        <ToggleSplitButton Content="Default" />
-                        <ToggleSplitButton Content="Small" Classes="Small" />
-                    </WrapPanel>
-                </StackPanel>
-            </HeaderedContentControl>
-
-            <HeaderedContentControl
-                Theme="{StaticResource GroupBox}" Header="ToggleButton">
-                <StackPanel HorizontalAlignment="Left" Spacing="16">
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <ToggleButton Content="Default" />
-                        <ToggleButton Content="Primary" Classes="Primary" />
-                        <ToggleButton Content="Secondary" Classes="Secondary" />
-                        <ToggleButton Content="Tertiary" Classes="Tertiary" />
-                        <ToggleButton Content="Success" Classes="Success" />
-                        <ToggleButton Content="Warning" Classes="Warning" />
-                        <ToggleButton Content="Danger" Classes="Danger" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <ToggleButton Content="Default" IsChecked="True" />
-                        <ToggleButton Content="Primary" Classes="Primary" IsChecked="True" />
-                        <ToggleButton Content="Secondary" Classes="Secondary" IsChecked="True" />
-                        <ToggleButton Content="Tertiary" Classes="Tertiary" IsChecked="True" />
-                        <ToggleButton Content="Success" Classes="Success" IsChecked="True" />
-                        <ToggleButton Content="Warning" Classes="Warning" IsChecked="True" />
-                        <ToggleButton Content="Danger" Classes="Danger" IsChecked="True" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <ToggleButton Content="Default" IsChecked="{x:Null}" IsThreeState="True" />
-                        <ToggleButton Content="Primary" Classes="Primary" IsChecked="{x:Null}" IsThreeState="True" />
-                        <ToggleButton Content="Secondary" Classes="Secondary" IsChecked="{x:Null}" IsThreeState="True" />
-                        <ToggleButton Content="Tertiary" Classes="Tertiary" IsChecked="{x:Null}" IsThreeState="True" />
-                        <ToggleButton Content="Success" Classes="Success" IsChecked="{x:Null}" IsThreeState="True" />
-                        <ToggleButton Content="Warning" Classes="Warning" IsChecked="{x:Null}" IsThreeState="True" />
-                        <ToggleButton Content="Danger" Classes="Danger" IsChecked="{x:Null}" IsThreeState="True" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <ToggleButton Content="Unchecked" IsEnabled="False" />
-                        <ToggleButton Content="Checked" IsEnabled="False" IsChecked="True" />
-                        <ToggleButton Content="Indeterminate" IsEnabled="False" IsChecked="{x:Null}" IsThreeState="True" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <ToggleButton Content="Large" Classes="Large" />
-                        <ToggleButton Content="Default" />
-                        <ToggleButton Content="Small" Classes="Small" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <ToggleButton Content="Primary" Classes="Colorful Primary" />
-                        <ToggleButton Content="Tertiary" Classes="Colorful Tertiary" />
-                        <ToggleButton Content="Disabled" Classes="Colorful Primary" IsEnabled="False" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <ToggleButton Content="Primary" Classes="Colorful Primary" IsChecked="True" />
-                        <ToggleButton Content="Tertiary" Classes="Colorful Tertiary" IsChecked="True" />
-                        <ToggleButton Content="Disabled" Classes="Colorful Primary" IsChecked="True" IsEnabled="False" />
-                    </WrapPanel>
-                    <WrapPanel ItemSpacing="16" LineSpacing="16">
-                        <ToggleButton Content="Primary" Classes="Colorful Primary" IsChecked="{x:Null}" IsThreeState="True" />
-                        <ToggleButton Content="Tertiary" Classes="Colorful Tertiary" IsChecked="{x:Null}" IsThreeState="True" />
-                        <ToggleButton Content="Disabled" Classes="Colorful Primary" IsChecked="{x:Null}" IsThreeState="True" IsEnabled="False" />
-                    </WrapPanel>
-                </StackPanel>
-            </HeaderedContentControl>
         </StackPanel>
     </ScrollViewer>
 </UserControl>

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

@@ -8,10 +8,6 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <StackPanel HorizontalAlignment="Left" Spacing="20">
-        <StackPanel Orientation="Horizontal">
-            <ToggleSwitch Name="showSpinCheck" IsChecked="True" Content="Show Button Spinner" />
-            <ToggleSwitch Name="allowSpinCheck" IsChecked="True" Content="Allow Spin" />
-        </StackPanel>
         <ButtonSpinner
             Height="30"
             AllowSpin="{Binding #allowSpinCheck.IsChecked}"
@@ -36,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.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.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,54 +4,49 @@
     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"
+    mc:Ignorable="d">
-    x:DataType="vm:ComboBoxDemoViewModel">
     <Design.DataContext>
-        <vm:ComboBoxDemoViewModel />
+        <pages:ComboBoxDemoViewModel />
     </Design.DataContext>
-    <ScrollViewer>
+    <StackPanel Spacing="20">
-        <StackPanel Spacing="20">
+        <StackPanel.Styles>
-            <StackPanel.Styles>
+            <Style Selector="ComboBox">
-                <Style Selector="ComboBox">
+                <Setter Property="Width" Value="300" />
-                    <Setter Property="Width" Value="300" />
+                <Setter Property="ItemsSource" Value="{Binding Items}" />
-                    <Setter Property="ItemsSource" Value="{Binding Items}" />
+            </Style>
-                </Style>
+        </StackPanel.Styles>
-            </StackPanel.Styles>
 
-            <ComboBox />
+        <ComboBox />
-            <ComboBox Classes="ClearButton" />
+        <ComboBox Classes="ClearButton" />
-            <ComboBox PlaceholderText="Please Select" />
+        <ComboBox PlaceholderText="Please Select" />
-            <ComboBox IsEnabled="False" />
+        <ComboBox IsEnabled="False" />
-            <ComboBox Classes="Large" IsEnabled="False" />
+        <ComboBox Classes="Large" IsEnabled="False" />
-            <ComboBox Classes="Small" />
+        <ComboBox Classes="Small" />
-            <ComboBox Classes="Bordered" />
+        <ComboBox Classes="Bordered" />
-            <ComboBox Classes="Bordered" IsEnabled="False" />
+        <ComboBox Classes="Bordered" IsEnabled="False" />
-            <ComboBox>
+        <ComboBox>
-                <ComboBox.SelectionBoxItemTemplate>
+          <ComboBox.SelectionBoxItemTemplate>
-                    <DataTemplate DataType="x:String">
+            <DataTemplate DataType="x:String">
-                        <ContentControl BorderThickness="1"
+              <ContentControl BorderThickness="1"
-                                        BorderBrush="Gold"
+                              BorderBrush="Gold"
-                                        Content="{Binding}" />
+                              Content="{Binding}" />
-                    </DataTemplate>
+            </DataTemplate>
-                </ComboBox.SelectionBoxItemTemplate>
+          </ComboBox.SelectionBoxItemTemplate>
-            </ComboBox>
+        </ComboBox>
 
-            <StackPanel Orientation="Horizontal">
+        <StackPanel Orientation="Horizontal">
-                <ComboBox Width="100" Classes="Large" PlaceholderText="Large" />
+            <ComboBox Width="100" Classes="Large" PlaceholderText="Large" />
-                <ComboBox Width="100" PlaceholderText="Default" />
+            <ComboBox Width="100" PlaceholderText="Default" />
-                <ComboBox Width="100" Classes="Small" PlaceholderText="Small" />
+            <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>
-    </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

@@ -7,58 +7,59 @@
     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, *">
+           <Grid RowDefinitions="Auto, *">
-                <StackPanel Grid.Row="0" Orientation="Horizontal">
+               <StackPanel Grid.Row="0" Orientation="Horizontal">
-                    <ToggleSwitch Content="Enable" Name="enable" IsChecked="True" />
+                   <ToggleSwitch Content="Enable" Name="enable" IsChecked="True" />
-                    <ToggleSwitch Content="Inset Content" Name="inset" />
+                   <ToggleSwitch Content="Inset Content" Name="inset" />
-                    <ToggleSwitch Content="ScrollBar Auto Hide" Name="autohide" />
+                   <ToggleSwitch Content="ScrollBar Auto Hide" Name="autohide" />
-                </StackPanel>
+               </StackPanel>
-                <DataGrid Grid.Row="1"
+               <DataGrid Grid.Row="1"
-                          Margin="8"
+                         Margin="8"
-                          CanUserReorderColumns="True"
+                         CanUserReorderColumns="True"
-                          CanUserResizeColumns="True"
+                         CanUserResizeColumns="True"
-                          CanUserSortColumns="True"
+                         CanUserSortColumns="True"
-                          HeadersVisibility="All"
+                         HeadersVisibility="All"
-                          IsReadOnly="True"
+                         IsReadOnly="True"
-                          Classes.InsetContent="{Binding #inset.IsChecked}"
+                         Classes.InsetContent="{Binding #inset.IsChecked}"
-                          ScrollViewer.AllowAutoHide="{Binding #autohide.IsChecked}"
+                         ScrollViewer.AllowAutoHide="{Binding #autohide.IsChecked}"
-                          IsEnabled="{Binding #enable.IsChecked}"
+                         IsEnabled="{Binding #enable.IsChecked}"
-                          ItemsSource="{Binding GridData1}">
+                         ItemsSource="{Binding GridData1}">
-                    <DataGrid.Columns>
+                   <DataGrid.Columns>
-                        <DataGridTextColumn
+                       <DataGridTextColumn
-                            Width="6*"
+                           Width="6*"
-                            x:DataType="vm:Song"
+                           x:DataType="vm:Song"
-                            Binding="{Binding Title}"
+                           Binding="{Binding Title}"
-                            Header="Title" />
+                           Header="Title" />
-                        <DataGridTextColumn
+                       <DataGridTextColumn
-                            Width="6*"
+                           Width="6*"
-                            x:DataType="vm:Song"
+                           x:DataType="vm:Song"
-                            Binding="{Binding Artist}"
+                           Binding="{Binding Artist}"
-                            Header="Artist" />
+                           Header="Artist" />
-                        <DataGridTextColumn
+                       <DataGridTextColumn
-                            Width="6*"
+                           Width="6*"
-                            x:DataType="vm:Song"
+                           x:DataType="vm:Song"
-                            Binding="{Binding Album}"
+                           Binding="{Binding Album}"
-                            Header="Album" />
+                           Header="Album" />
-                        <DataGridTemplateColumn Header="Duration" SortMemberPath="Duration">
+                       <DataGridTemplateColumn Header="Duration" SortMemberPath="Duration">
-                            <DataGridTemplateColumn.CellTemplate>
+                           <DataGridTemplateColumn.CellTemplate>
-                                <DataTemplate>
+                               <DataTemplate>
-                                    <TextBlock
+                                   <TextBlock
-                                        Margin="8,0,0,0"
+                                       Margin="8,0,0,0"
-                                        VerticalAlignment="Center"
+                                       VerticalAlignment="Center"
-                                        Text="{Binding Duration}" />
+                                       Text="{Binding Duration}" />
-                                </DataTemplate>
+                               </DataTemplate>
-                            </DataGridTemplateColumn.CellTemplate>
+                           </DataGridTemplateColumn.CellTemplate>
-                        </DataGridTemplateColumn>
+                       </DataGridTemplateColumn>
-                    </DataGrid.Columns>
+                   </DataGrid.Columns>
 
-                </DataGrid>
+               </DataGrid>
-
+               
-            </Grid>
+           </Grid>
         </TabItem>
         <TabItem Header="Grouping">
             <DataGrid
@@ -176,4 +177,4 @@
             </Grid>
         </TabItem>
     </TabControl>
-</UserControl>
+</UserControl>

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

@@ -1,4 +1,18 @@
+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;

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

@@ -39,4 +39,4 @@
                 CornerRadius="10" />
         </Grid>
     </StackPanel>
-</UserControl>
+</UserControl>

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

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

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

@@ -8,6 +8,7 @@
              xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
              mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="1450"
              x:DataType="vm:HighContrastDemoViewModel"
+             x:CompileBindings="True"
              x:Class="Semi.Avalonia.Demo.Pages.HighContrastDemo">
     <Design.DataContext>
         <vm:HighContrastDemoViewModel />

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

@@ -18,67 +18,78 @@
             Text="{Binding SearchText}"
             Watermark="Input Icon Name" />
 
-        <TabControl
+        <TabControl Grid.Row="1">
-            Grid.Row="1"
+            <TabItem Header="Filled Icons">
-            Theme="{StaticResource LineTabControl}"
+                <ScrollViewer>
-            ItemsSource="{Binding IconTabs}">
+                    <ItemsControl ItemsSource="{Binding FilteredFilledIcons}">
-            <TabControl.ItemTemplate>
+                        <ItemsControl.ItemsPanel>
-                <DataTemplate>
+                            <ItemsPanelTemplate>
-                    <WrapPanel ItemSpacing="5">
+                                <WrapPanel />
-                        <TextBlock Text="{Binding Header}" />
+                            </ItemsPanelTemplate>
-                        <Label 
+                        </ItemsControl.ItemsPanel>
-                            Theme="{StaticResource TagLabel}"
+                        <ItemsControl.ItemTemplate>
-                            Classes="Purple"
+                            <DataTemplate>
-                            IsVisible="{Binding Header, 
+                                <Button Theme="{DynamicResource OutlineButton}"
-                                Converter={x:Static ObjectConverters.Equal},
+                                        Classes="Tertiary"
-                                ConverterParameter='AI Icons'}"
+                                        Padding="0"
-                            Content="New" />
+                                        Margin="10"
-                    </WrapPanel>
+                                        Width="200"
-                </DataTemplate>
+                                        Height="120"
-            </TabControl.ItemTemplate>
+                                        Click="Button_Clicked">
+                                    <StackPanel Spacing="8">
+                                        <PathIcon
+                                            Theme="{DynamicResource InnerPathIcon}"
+                                            HorizontalAlignment="Center"
+                                            Classes="ExtraLarge"
+                                            Data="{Binding Geometry}" />
+                                        <TextBlock
+                                            HorizontalAlignment="Center"
+                                            FontSize="12"
+                                            FontWeight="Normal"
+                                            Text="{Binding ResourceKey}" />
+                                    </StackPanel>
+                                </Button>
+                            </DataTemplate>
+                        </ItemsControl.ItemTemplate>
+                    </ItemsControl>
+                </ScrollViewer>
+            </TabItem>
 
-            <TabControl.ContentTemplate>
+            <TabItem Header="Stroked Icons">
-                <DataTemplate DataType="vm:IconTab">
+                <ScrollViewer>
-                    <ScrollViewer>
+                    <ItemsControl ItemsSource="{Binding FilteredStrokedIcons}">
-                        <ItemsControl
+                        <ItemsControl.ItemsPanel>
-                            Margin="0 10"
+                            <ItemsPanelTemplate>
-                            ItemsSource="{Binding IconItems}">
+                                <WrapPanel />
-                            <ItemsControl.ItemsPanel>
+                            </ItemsPanelTemplate>
-                                <ItemsPanelTemplate>
+                        </ItemsControl.ItemsPanel>
-                                    <WrapPanel
+                        <ItemsControl.ItemTemplate>
-                                        ItemWidth="200"
+                            <DataTemplate>
-                                        ItemHeight="120"
+                                <Button Theme="{DynamicResource OutlineButton}"
-                                        ItemSpacing="10"
+                                        Classes="Tertiary"
-                                        LineSpacing="10" />
+                                        Padding="0"
-                                </ItemsPanelTemplate>
+                                        Margin="10"
-                            </ItemsControl.ItemsPanel>
+                                        Width="200"
-                            <ItemsControl.ItemTemplate>
+                                        Height="120"
-                                <DataTemplate>
+                                        Click="Button_Clicked">
-                                    <Button Theme="{DynamicResource OutlineButton}"
+                                    <StackPanel Spacing="8">
-                                            Classes="Tertiary"
+                                        <PathIcon
-                                            Padding="0"
+                                            Theme="{DynamicResource InnerPathIcon}"
-                                            HorizontalAlignment="Stretch"
+                                            HorizontalAlignment="Center"
-                                            VerticalAlignment="Stretch"
+                                            Classes="ExtraLarge"
-                                            Click="Button_Clicked">
+                                            Data="{Binding Geometry}" />
-                                        <StackPanel Spacing="8">
+                                        <TextBlock
-                                            <PathIcon
+                                            HorizontalAlignment="Center"
-                                                Theme="{DynamicResource InnerPathIcon}"
+                                            FontSize="12"
-                                                HorizontalAlignment="Center"
+                                            FontWeight="Normal"
-                                                Classes="ExtraLarge"
+                                            Text="{Binding ResourceKey}" />
-                                                Data="{Binding Geometry}" />
+                                    </StackPanel>
-                                            <TextBlock
+                                </Button>
-                                                HorizontalAlignment="Center"
+                            </DataTemplate>
-                                                FontSize="12"
+                        </ItemsControl.ItemTemplate>
-                                                FontWeight="Normal"
+                    </ItemsControl>
-                                                Text="{Binding ResourceKey}" />
+                </ScrollViewer>
-                                        </StackPanel>
+            </TabItem>
-                                    </Button>
-                                </DataTemplate>
-                            </ItemsControl.ItemTemplate>
-                        </ItemsControl>
-                    </ScrollViewer>
-                </DataTemplate>
-            </TabControl.ContentTemplate>
         </TabControl>
     </Grid>
 </UserControl>

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

@@ -8,11 +8,14 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <ScrollViewer>
-        <StackPanel>
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
             <StackPanel.Styles>
-                <Style Selector="Grid > TextBlock,Grid > Label">
+                <Style Selector="Label">
-                    <Setter Property="Layoutable.VerticalAlignment" Value="Center" />
+                    <Setter Property="Margin" Value="4" />
-                    <Setter Property="Layoutable.Margin" Value="4" />
+                </Style>
+                <Style Selector="Grid > TextBlock">
+                    <Setter Property="VerticalAlignment" Value="Center" />
+                    <Setter Property="Margin" Value="4" />
                 </Style>
             </StackPanel.Styles>
             <ScrollViewer HorizontalScrollBarVisibility="Auto">
@@ -28,7 +31,7 @@
                             VerticalAlignment="Top"
                             ColumnDefinitions="Auto, *"
                             RowDefinitions="*,*,*,*,*,*,*,*,*,*,*">
-                            <TextBlock Grid.Row="0" Grid.Column="0">Classes</TextBlock>
+                            <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>
@@ -153,89 +156,69 @@
                     </HeaderedContentControl>
                 </StackPanel>
             </ScrollViewer>
-
+            <WrapPanel>
-            <HeaderedContentControl
+                <Label Theme="{StaticResource TagLabel}">Label</Label>
-                Margin="16"
+                <Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
-                Header="Theme: TagLabel"
+                <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
-                Theme="{DynamicResource GroupBox}">
+                <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
-                <ScrollViewer HorizontalScrollBarVisibility="Auto">
+            </WrapPanel>
-                    <StackPanel Orientation="Horizontal" Spacing="8">
+            <WrapPanel>
-                        <StackPanel Spacing="4">
+                <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
-                            <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
+                <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
-                            <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-                            <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
-                            <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-                            <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-                            <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-                            <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-                            <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
-                            <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
-                            <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
+                <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-                            <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-                            <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
-                            <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-                            <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
-                            <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-                            <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
-                            <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
+            </WrapPanel>
-                        </StackPanel>
+            <WrapPanel>
-                        <StackPanel Spacing="4">
+                <Label Classes="Ghost Red" Theme="{StaticResource TagLabel}">Red</Label>
-                            <Label Classes="Ghost Red" Theme="{StaticResource TagLabel}">Red</Label>
+                <Label Classes="Ghost Pink" Theme="{StaticResource TagLabel}">Pink</Label>
-                            <Label Classes="Ghost Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                <Label Classes="Ghost Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-                            <Label Classes="Ghost Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                <Label Classes="Ghost Violet" Theme="{StaticResource TagLabel}">Violet</Label>
-                            <Label Classes="Ghost Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                <Label Classes="Ghost Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-                            <Label Classes="Ghost Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                <Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-                            <Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                <Label Classes="Ghost LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-                            <Label Classes="Ghost LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                <Label Classes="Ghost Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-                            <Label Classes="Ghost Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                <Label Classes="Ghost Teal" Theme="{StaticResource TagLabel}">Teal</Label>
-                            <Label Classes="Ghost Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                <Label Classes="Ghost Green" Theme="{StaticResource TagLabel}">Green</Label>
-                            <Label Classes="Ghost Green" Theme="{StaticResource TagLabel}">Green</Label>
+                <Label Classes="Ghost LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-                            <Label Classes="Ghost LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                <Label Classes="Ghost Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-                            <Label Classes="Ghost Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                <Label Classes="Ghost Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
-                            <Label Classes="Ghost Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                <Label Classes="Ghost Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-                            <Label Classes="Ghost Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                <Label Classes="Ghost Orange" Theme="{StaticResource TagLabel}">Orange</Label>
-                            <Label Classes="Ghost Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                <Label Classes="Ghost Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-                            <Label Classes="Ghost Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                <Label Classes="Ghost White" Theme="{StaticResource TagLabel}">White</Label>
-                            <Label Classes="Ghost White" Theme="{StaticResource TagLabel}">White</Label>
+            </WrapPanel>
-                        </StackPanel>
+            <WrapPanel>
-                        <StackPanel Spacing="4">
+                <Label Classes="Solid Red" Theme="{StaticResource TagLabel}">Red</Label>
-                            <Label Classes="Solid Red" Theme="{StaticResource TagLabel}">Red</Label>
+                <Label Classes="Solid Pink" Theme="{StaticResource TagLabel}">Pink</Label>
-                            <Label Classes="Solid Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                <Label Classes="Solid Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-                            <Label Classes="Solid Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                <Label Classes="Solid Violet" Theme="{StaticResource TagLabel}">Violet</Label>
-                            <Label Classes="Solid Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                <Label Classes="Solid Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-                            <Label Classes="Solid Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                <Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-                            <Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                <Label Classes="Solid LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-                            <Label Classes="Solid LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                <Label Classes="Solid Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-                            <Label Classes="Solid Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                <Label Classes="Solid Teal" Theme="{StaticResource TagLabel}">Teal</Label>
-                            <Label Classes="Solid Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                <Label Classes="Solid Green" Theme="{StaticResource TagLabel}">Green</Label>
-                            <Label Classes="Solid Green" Theme="{StaticResource TagLabel}">Green</Label>
+                <Label Classes="Solid LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-                            <Label Classes="Solid LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                <Label Classes="Solid Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-                            <Label Classes="Solid Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                <Label Classes="Solid Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
-                            <Label Classes="Solid Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                <Label Classes="Solid Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-                            <Label Classes="Solid Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                <Label Classes="Solid Orange" Theme="{StaticResource TagLabel}">Orange</Label>
-                            <Label Classes="Solid Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                <Label Classes="Solid Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-                            <Label Classes="Solid Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                <Label Classes="Solid White" Theme="{StaticResource TagLabel}">White</Label>
-                            <Label Classes="Solid White" Theme="{StaticResource TagLabel}">White</Label>
+            </WrapPanel>
-                        </StackPanel>
-                        <StackPanel Spacing="4">
-                            <Label Classes="Colorful Gradient" Theme="{DynamicResource TagLabel}">Light</Label>
-                            <Label Classes="Colorful Gradient Ghost" Theme="{DynamicResource TagLabel}">Ghost</Label>
-                            <Label Classes="Colorful Gradient Solid" Theme="{DynamicResource TagLabel}">Solid</Label>
-                        </StackPanel>
-                        <StackPanel Spacing="4">
-                            <Label Classes="Colorful" Theme="{DynamicResource TagLabel}">Light</Label>
-                            <Label Classes="Colorful Ghost" Theme="{DynamicResource TagLabel}">Ghost</Label>
-                            <Label Classes="Colorful Solid" Theme="{DynamicResource TagLabel}">Solid</Label>
-                        </StackPanel>
-                        <StackPanel Spacing="4">
-                            <Label Theme="{StaticResource TagLabel}">Label</Label>
-                            <Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
-                            <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
-                            <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
-                        </StackPanel>
-                    </StackPanel>
-                </ScrollViewer>
-            </HeaderedContentControl>
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</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,7 +117,7 @@
                 Header="CheckGroupListBox">
                 <ScrollViewer>
                     <StackPanel Spacing="20">
-                        <TextBlock Text="Theme: CheckGroupListBox" />
+                        <TextBlock Text="Theme: CheckGroupListBox"/>
                         <ListBox
                             SelectionMode="Multiple,Toggle"
                             Theme="{DynamicResource CheckGroupListBox}"
@@ -129,7 +129,7 @@
                             <ListBoxItem>WPF</ListBoxItem>
                         </ListBox>
 
-                        <TextBlock Text="Theme: CardCheckGroupListBox" />
+                        <TextBlock Text="Theme: CardCheckGroupListBox"/>
                         <ListBox
                             SelectionMode="Multiple,Toggle"
                             Theme="{DynamicResource CardCheckGroupListBox}"

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.cs

@@ -27,8 +27,7 @@ public partial class NotificationDemo : UserControl
         if (sender is RadioButton b && b.Content is string s)
         {
             Enum.TryParse<NotificationPosition>(s, out var t);
-            if (_manager is not null)
+            _manager.Position = t;
-                _manager.Position = t;
         }
     }
 

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

@@ -348,7 +348,7 @@
                     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: " />
@@ -409,51 +409,6 @@
                             </Border>
                         </StackPanel>
                     </TabItem>
-                    <TabItem Header="Dock">
-                        <StackPanel>
-                            <TextBlock Text="Install via nuget: " />
-                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].DockInstall}" />
-                            </Border>
-                            <TextBlock Text="Reference styles: " />
-                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock
-                                    FontFamily="Consolas"
-                                    Text="{Binding $parent[local:Overview].DockStyle}"
-                                    TextWrapping="Wrap" />
-                            </Border>
-                        </StackPanel>
-                    </TabItem>
-                    <TabItem Header="Tabalonia">
-                        <StackPanel>
-                            <TextBlock Text="Install via nuget: " />
-                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].TabaloniaInstall}" />
-                            </Border>
-                            <TextBlock Text="Reference styles: " />
-                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock
-                                    FontFamily="Consolas"
-                                    Text="{Binding $parent[local:Overview].TabaloniaStyle}"
-                                    TextWrapping="Wrap" />
-                            </Border>
-                        </StackPanel>
-                    </TabItem>
-                    <TabItem Header="AvaloniaEdit">
-                        <StackPanel>
-                            <TextBlock Text="Install via nuget: " />
-                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].AvaloniaEditInstall}" />
-                            </Border>
-                            <TextBlock Text="Reference styles: " />
-                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock
-                                    FontFamily="Consolas"
-                                    Text="{Binding $parent[local:Overview].AvaloniaEditStyle}"
-                                    TextWrapping="Wrap" />
-                            </Border>
-                        </StackPanel>
-                    </TabItem>
                 </TabControl>
             </StackPanel>
         </StackPanel>

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

@@ -9,7 +9,7 @@ public partial class Overview : UserControl
         InitializeComponent();
     }
 
-    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia";
+    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.2.1.7";
 
     public string MainStyle { get; set; } =
         """
@@ -18,7 +18,7 @@ public partial class Overview : UserControl
         </Application.Styles>
         """;
 
-    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker";
+    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.2.1.7";
 
     public string ColorPickerStyle { get; set; } =
         """
@@ -27,7 +27,7 @@ public partial class Overview : UserControl
         </Application.Styles>
         """;
 
-    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid";
+    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.2.1.7";
 
     public string DataGridStyle { get; set; } =
         """
@@ -36,7 +36,7 @@ public partial class Overview : UserControl
         </Application.Styles>
         """;
 
-    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid";
+    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.10.3";
 
     public string TreeDataGridStyle { get; set; } =
         """
@@ -44,31 +44,4 @@ public partial class Overview : UserControl
             <semi:TreeDataGridSemiTheme />
         </Application.Styles>
         """;
-
-    public string DockInstall { get; set; } = "dotnet add package Semi.Avalonia.Dock";
-
-    public string DockStyle { get; set; } =
-        """
-        <Application.Styles>
-            <semi:DockSemiTheme />
-        </Application.Styles>
-        """;
-
-    public string TabaloniaInstall { get; set; } = "dotnet add package Semi.Avalonia.Tabalonia";
-
-    public string TabaloniaStyle { get; set; } =
-        """
-        <Application.Styles>
-            <semi:TabaloniaSemiTheme />
-        </Application.Styles>
-        """;
-
-    public string AvaloniaEditInstall { get; set; } = "dotnet add package Semi.Avalonia.AvaloniaEdit";
-
-    public string AvaloniaEditStyle { get; set; } =
-        """
-        <Application.Styles>
-            <semi:AvaloniaEditSemiTheme />
-        </Application.Styles>
-        """;
 }

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

@@ -8,6 +8,7 @@
     xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     d:DesignHeight="450"
     d:DesignWidth="800"
+    x:CompileBindings="True"
     x:DataType="viewModels:PaletteDemoViewModel"
     mc:Ignorable="d">
     <Design.DataContext>

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,11 @@
     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">
         <Label DockPanel.Dock="Top">A control that supports pull to refresh</Label>
@@ -23,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

@@ -0,0 +1,80 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.RepeatButtonDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
+        <TextBlock>Light (Default)</TextBlock>
+        <StackPanel Orientation="Horizontal" Spacing="20">
+            <RepeatButton Classes="Primary">Primary</RepeatButton>
+            <RepeatButton Classes="Secondary">Secondary</RepeatButton>
+            <RepeatButton Classes="Tertiary">Tertiary</RepeatButton>
+            <RepeatButton Classes="Success">Success</RepeatButton>
+            <RepeatButton Classes="Warning">Warning</RepeatButton>
+            <RepeatButton Classes="Danger">Danger</RepeatButton>
+            <RepeatButton Classes="Danger" IsEnabled="False">Disabled</RepeatButton>
+        </StackPanel>
+        <TextBlock>Solid</TextBlock>
+        <StackPanel Orientation="Horizontal" Spacing="20">
+            <RepeatButton Classes="Primary" Theme="{DynamicResource SolidRepeatButton}">Primary</RepeatButton>
+            <RepeatButton Classes="Secondary" Theme="{DynamicResource SolidRepeatButton}">Secondary</RepeatButton>
+            <RepeatButton Classes="Tertiary" Theme="{DynamicResource SolidRepeatButton}">Tertiary</RepeatButton>
+            <RepeatButton Classes="Success" Theme="{DynamicResource SolidRepeatButton}">Success</RepeatButton>
+            <RepeatButton Classes="Warning" Theme="{DynamicResource SolidRepeatButton}">Warning</RepeatButton>
+            <RepeatButton Classes="Danger" Theme="{DynamicResource SolidRepeatButton}">Danger</RepeatButton>
+            <RepeatButton
+                Classes="Danger"
+                IsEnabled="False"
+                Theme="{DynamicResource SolidRepeatButton}">
+                Disabled
+            </RepeatButton>
+        </StackPanel>
+        <TextBlock>Outline</TextBlock>
+        <StackPanel Orientation="Horizontal" Spacing="20">
+            <RepeatButton Classes="Primary" Theme="{DynamicResource OutlineRepeatButton}">Primary</RepeatButton>
+            <RepeatButton Classes="Secondary" Theme="{DynamicResource OutlineRepeatButton}">Secondary</RepeatButton>
+            <RepeatButton Classes="Tertiary" Theme="{DynamicResource OutlineRepeatButton}">Tertiary</RepeatButton>
+            <RepeatButton Classes="Success" Theme="{DynamicResource OutlineRepeatButton}">Success</RepeatButton>
+            <RepeatButton Classes="Warning" Theme="{DynamicResource OutlineRepeatButton}">Warning</RepeatButton>
+            <RepeatButton Classes="Danger" Theme="{DynamicResource OutlineRepeatButton}">Danger</RepeatButton>
+            <RepeatButton
+                Classes="Danger"
+                IsEnabled="False"
+                Theme="{DynamicResource OutlineRepeatButton}">
+                Disabled
+            </RepeatButton>
+        </StackPanel>
+        <TextBlock>Borderless</TextBlock>
+        <StackPanel Orientation="Horizontal" Spacing="20">
+            <RepeatButton Classes="Primary" Theme="{DynamicResource BorderlessRepeatButton}">Primary</RepeatButton>
+            <RepeatButton Classes="Secondary" Theme="{DynamicResource BorderlessRepeatButton}">Secondary</RepeatButton>
+            <RepeatButton Classes="Tertiary" Theme="{DynamicResource BorderlessRepeatButton}">Tertiary</RepeatButton>
+            <RepeatButton Classes="Success" Theme="{DynamicResource BorderlessRepeatButton}">Success</RepeatButton>
+            <RepeatButton Classes="Warning" Theme="{DynamicResource BorderlessRepeatButton}">Warning</RepeatButton>
+            <RepeatButton Classes="Danger" Theme="{DynamicResource BorderlessRepeatButton}">Danger</RepeatButton>
+            <RepeatButton
+                Classes="Danger"
+                IsEnabled="False"
+                Theme="{DynamicResource BorderlessRepeatButton}">
+                Disabled
+            </RepeatButton>
+        </StackPanel>
+        <TextBlock>Disabled</TextBlock>
+        <StackPanel Background="{DynamicResource SemiColorBackground1}" Orientation="Horizontal" Spacing="20">
+            <Button IsEnabled="False">Light</Button>
+            <Button IsEnabled="False" Theme="{DynamicResource SolidButton}">Solid</Button>
+            <Button IsEnabled="False" Theme="{DynamicResource OutlineButton}">Outline</Button>
+            <Button IsEnabled="False" Theme="{DynamicResource BorderlessButton}">Borderless</Button>
+        </StackPanel>
+        <TextBlock>Size Classes</TextBlock>
+        <StackPanel Orientation="Horizontal" Spacing="20">
+            <RepeatButton Classes="Small">Small</RepeatButton>
+            <RepeatButton>Default</RepeatButton>
+            <RepeatButton Classes="Large">Large</RepeatButton>
+        </StackPanel>
+    </StackPanel>
+</UserControl>

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

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

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

@@ -165,4 +165,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>

demo/Semi.Avalonia.Demo/Pages/SliderDemo.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 SliderDemo : UserControl
         InitializeComponent();
     }
 
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
 }

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

@@ -4,190 +4,281 @@
     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="1000"
     d:DesignWidth="800"
-    x:DataType="vm:SplitViewDemoViewModel"
     mc:Ignorable="d">
     <Design.DataContext>
-        <vm:SplitViewDemoViewModel />
+        <pages:SplitViewDemoViewModel />
     </Design.DataContext>
     <Border>
         <Grid ColumnDefinitions="*,400">
-            <Border
+            <Border Grid.Column="1" VerticalAlignment="Top" Margin="10 0 0 0">
-                Grid.Column="1"
+                <Grid RowDefinitions="*, *, *, *, *, *" ColumnDefinitions="Auto, *">
-                Margin="10,0,0,0"
-                VerticalAlignment="Top">
-                <Grid ColumnDefinitions="Auto, *" RowDefinitions="*, *, *, *, *, *">
                     <Label
-                        Grid.Row="0"
+                        Grid.Row="0" Grid.Column="0"
-                        Grid.Column="0"
                         VerticalAlignment="Center"
                         Content="IsPaneOpen" />
                     <ToggleSwitch
-                        Name="PaneOpenButton"
+                        Grid.Row="0" Grid.Column="1"
-                        Grid.Row="0"
+                        Name="PaneOpenButton" />
-                        Grid.Column="1" />
 
                     <Label
-                        Grid.Row="1"
+                        Grid.Row="1" Grid.Column="0"
-                        Grid.Column="0"
                         VerticalAlignment="Center"
                         Content="UseLightDismissOverlayMode" />
                     <ToggleSwitch
-                        Name="UseLightDismissOverlayModeButton"
+                        Grid.Row="1" Grid.Column="1"
-                        Grid.Row="1"
+                        Name="UseLightDismissOverlayModeButton" />
-                        Grid.Column="1" />
 
                     <Label
-                        Grid.Row="2"
+                        Grid.Row="2" Grid.Column="0"
-                        Grid.Column="0"
                         VerticalAlignment="Center"
                         Content="Placement" />
-                    <ComboBox 
+                    <ToggleSwitch
-                        Grid.Row="2" 
+                        Grid.Row="2" Grid.Column="1"
-                        Grid.Column="1" 
+                        Name="PanePlacementButton"
-                        Name="PanelPlacementSelector"
+                        OffContent="Left"
-                        HorizontalAlignment="Stretch"
+                        OnContent="Right" />
-                        ItemsSource="{x:Static vm:SplitViewDemoViewModel.Placements}"
+
-                        SelectedItem="{x:Static SplitViewPanePlacement.Left}"
-                        />
                     <Label
-                        Grid.Row="3"
+                        Grid.Row="3" Grid.Column="0"
-                        Grid.Column="0"
                         VerticalAlignment="Center"
                         Content="DisplayMode" />
                     <ComboBox
+                        Grid.Row="3" Grid.Column="1"
                         Name="DisplayModeSelector"
-                        Grid.Row="3"
-                        Grid.Column="1"
                         HorizontalAlignment="Stretch"
-                        ItemsSource="{x:Static vm:SplitViewDemoViewModel.DisplayModes}"
+                        ItemsSource="{x:Static pages:SplitViewDemoViewModel.DisplayModes}"
                         SelectedItem="{x:Static SplitViewDisplayMode.CompactInline}" />
 
                     <Label
-                        Grid.Row="4"
+                        Grid.Row="4" Grid.Column="0"
-                        Grid.Column="0"
                         VerticalAlignment="Center"
                         Content="{Binding #CompactPaneLengthSlider.Value, StringFormat='{}CompactPaneLength: {0}'}" />
                     <Slider
+                        Grid.Row="4" Grid.Column="1"
                         Name="CompactPaneLengthSlider"
-                        Grid.Row="4"
-                        Grid.Column="1"
-                        IsSnapToTickEnabled="True"
                         Maximum="128"
                         Minimum="0"
                         TickFrequency="1"
+                        IsSnapToTickEnabled="True"
                         Value="48" />
 
                     <Label
-                        Grid.Row="5"
+                        Grid.Row="5" Grid.Column="0"
-                        Grid.Column="0"
                         VerticalAlignment="Center"
-                        Content="{Binding #OpenPaneLengthSlider.Value, StringFormat='{}OpenPaneLength: {0}'}" />
+                        Content="{Binding #OpenPaneLengthSlider.Value,StringFormat='{}OpenPaneLength: {0}'}" />
                     <Slider
+                        Grid.Row="5" Grid.Column="1"
                         Name="OpenPaneLengthSlider"
-                        Grid.Row="5"
-                        Grid.Column="1"
-                        IsSnapToTickEnabled="True"
                         Maximum="500"
                         Minimum="128"
                         TickFrequency="1"
+                        IsSnapToTickEnabled="True"
                         Value="256" />
                 </Grid>
             </Border>
-            <SplitView
+            <TabControl Grid.Column="0">
-                Grid.Column="0"
+                <TabItem Header="Default">
-                Name="SplitView"
+                    <Border
-                CompactPaneLength="{Binding #CompactPaneLengthSlider.Value}"
+                        BorderBrush="{DynamicResource SemiGrey1}"
-                DisplayMode="{Binding #DisplayModeSelector.SelectedItem}"
+                        BorderThickness="1">
-                IsPaneOpen="{Binding #PaneOpenButton.IsChecked, Mode=TwoWay}"
+                        <SplitView
-                OpenPaneLength="{Binding #OpenPaneLengthSlider.Value}"
+                            Name="SplitView"
-                PanePlacement="{Binding #PanelPlacementSelector.SelectedItem}"
+                            IsPaneOpen="{Binding #PaneOpenButton.IsChecked,Mode=TwoWay}"
-                UseLightDismissOverlayMode="{Binding #UseLightDismissOverlayModeButton.IsChecked}">
+                            UseLightDismissOverlayMode="{Binding #UseLightDismissOverlayModeButton.IsChecked}"
-                <SplitView.Background>
+                            PanePlacement="{Binding #PanePlacementButton.IsChecked}"
-                    <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                            DisplayMode="{Binding #DisplayModeSelector.SelectedItem}"
-                        <GradientStop Offset="0" Color="#6b4c1b" />
+                            CompactPaneLength="{Binding #CompactPaneLengthSlider.Value}"
-                        <GradientStop Offset="1" Color="#291e10" />
+                            OpenPaneLength="{Binding #OpenPaneLengthSlider.Value}">
-                    </LinearGradientBrush>
+                            <SplitView.Background>
-                </SplitView.Background>
+                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
-                <SplitView.Pane>
+                                    <GradientStop Color="#6b4c1b" Offset="0" />
-                    <Grid RowDefinitions="Auto,*,Auto">
+                                    <GradientStop Color="#291e10" Offset="1" />
-                        <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="8 12">
+                                </LinearGradientBrush>
-                            <ToggleSwitch
+                            </SplitView.Background>
-                                Content="{StaticResource SemiIconSidebar}"
+                            <SplitView.Pane>
-                                IsChecked="{Binding #SplitView.IsPaneOpen}"
+                                <Grid RowDefinitions="Auto,*,Auto">
-                                Theme="{DynamicResource IconBorderlessToggleSwitch}" />
+                                    <TextBlock
-                            <TextBlock
+                                        Grid.Row="0"
-                                Name="PaneHeader"
+                                        Name="PaneHeader"
-                                VerticalAlignment="Center"
+                                        Margin="8,12"
-                                Margin="8 0"
+                                        FontWeight="Bold"
-                                FontWeight="Bold"
+                                        Text="Playlist" />
-                                Text="Playlist" />
+                                    <ListBox
-                        </StackPanel>
+                                        Grid.Row="1"
-                        
+                                        ItemsSource="{Binding Songs}" />
-                        <ListBox Grid.Row="1" ItemsSource="{Binding Songs}" />
+                                    <ToggleSwitch
-                        
+                                        Grid.Row="2"
-                    </Grid>
+                                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
-                </SplitView.Pane>
+                                        Content="{StaticResource SemiIconSidebar}"
+                                        HorizontalAlignment="Left"
+                                        IsChecked="{Binding #SplitView.IsPaneOpen}">
+                                    </ToggleSwitch>
+                                </Grid>
+                            </SplitView.Pane>
 
-                <Panel>
+                            <Panel>
-                    <Panel.Styles>
+                                <Panel.Styles>
-                        <Style Selector="Image#AlbumCover">
+                                    <Style Selector="Image#AlbumCover">
-                            <Style.Animations>
+                                        <Style.Animations>
-                                <Animation IterationCount="Infinite" Duration="0:0:40">
+                                            <Animation IterationCount="Infinite" Duration="0:0:40">
-                                    <KeyFrame Cue="0%">
+                                                <KeyFrame Cue="0%">
-                                        <Setter Property="RotateTransform.Angle" Value="0" />
+                                                    <Setter Property="RotateTransform.Angle" Value="0" />
-                                    </KeyFrame>
+                                                </KeyFrame>
-                                    <KeyFrame Cue="100%">
+                                                <KeyFrame Cue="100%">
-                                        <Setter Property="RotateTransform.Angle" Value="360" />
+                                                    <Setter Property="RotateTransform.Angle" Value="360" />
-                                    </KeyFrame>
+                                                </KeyFrame>
-                                </Animation>
+                                            </Animation>
-                            </Style.Animations>
+                                        </Style.Animations>
-                        </Style>
+                                    </Style>
-                    </Panel.Styles>
+                                </Panel.Styles>
-                    <Image
+                                <Image
-                        Name="AlbumCover"
+                                    Source="/Assets/WORLD.png"
-                        Width="200"
+                                    Name="AlbumCover"
-                        Height="200"
+                                    Width="200"
-                        Source="/Assets/WORLD.png" />
+                                    Height="200" />
-                    <Arc
+                                <Arc
-                        Width="290"
+                                    Width="290"
-                        Height="290"
+                                    Height="290"
-                        StartAngle="0"
+                                    StartAngle="0"
-                        StrokeJoin="Round"
+                                    SweepAngle="360"
-                        StrokeLineCap="Round"
+                                    StrokeJoin="Round"
-                        StrokeThickness="45"
+                                    StrokeLineCap="Round"
-                        SweepAngle="360">
+                                    StrokeThickness="45">
-                        <Arc.Stroke>
+                                    <Arc.Stroke>
-                            <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
+                                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
-                                <GradientStop Offset="0" Color="#010101" />
+                                            <GradientStop Color="#010101" Offset="0" />
-                                <GradientStop Offset="0.5" Color="#363636" />
+                                            <GradientStop Color="#363636" Offset="0.5" />
-                                <GradientStop Offset="1" Color="#010101" />
+                                            <GradientStop Color="#010101" Offset="1" />
-                            </LinearGradientBrush>
+                                        </LinearGradientBrush>
-                        </Arc.Stroke>
+                                    </Arc.Stroke>
-                    </Arc>
+                                </Arc>
-                    <Arc
+                                <Arc
-                        Width="294"
+                                    Width="294"
-                        Height="294"
+                                    Height="294"
-                        StartAngle="0"
+                                    StartAngle="0"
-                        Stroke="Black"
+                                    SweepAngle="360"
-                        StrokeJoin="Round"
+                                    StrokeJoin="Round"
-                        StrokeLineCap="Round"
+                                    StrokeLineCap="Round"
-                        StrokeThickness="4"
+                                    StrokeThickness="4"
-                        SweepAngle="360" />
+                                    Stroke="Black" />
-                    <Arc
+                                <Arc
-                        Width="310"
+                                    Width="310"
-                        Height="310"
+                                    Height="310"
-                        Opacity="0.1"
+                                    StartAngle="0"
-                        StartAngle="0"
+                                    SweepAngle="360"
-                        Stroke="#C6CACD"
+                                    StrokeJoin="Round"
-                        StrokeJoin="Round"
+                                    StrokeLineCap="Round"
-                        StrokeLineCap="Round"
+                                    StrokeThickness="10"
-                        StrokeThickness="10"
+                                    Stroke="#C6CACD"
-                        SweepAngle="360" />
+                                    Opacity="0.1" />
-                </Panel>
+                            </Panel>
-            </SplitView>
+
+                        </SplitView>
+                    </Border>
+                </TabItem>
+                <TabItem Header="VerticalSplitView">
+                    <Border
+                        BorderBrush="{DynamicResource SemiGrey1}"
+                        BorderThickness="1">
+                        <SplitView
+                            Name="SplitView2"
+                            Theme="{DynamicResource VerticalSplitView}"
+                            IsPaneOpen="{Binding #PaneOpenButton.IsChecked,Mode=TwoWay}"
+                            UseLightDismissOverlayMode="{Binding #UseLightDismissOverlayModeButton.IsChecked}"
+                            PanePlacement="{Binding #PanePlacementButton.IsChecked}"
+                            DisplayMode="{Binding #DisplayModeSelector.SelectedItem}"
+                            CompactPaneLength="{Binding #CompactPaneLengthSlider.Value}"
+                            OpenPaneLength="{Binding #OpenPaneLengthSlider.Value}">
+                            <SplitView.Background>
+                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                                    <GradientStop Color="#6b4c1b" Offset="0" />
+                                    <GradientStop Color="#291e10" Offset="1" />
+                                </LinearGradientBrush>
+                            </SplitView.Background>
+                            <SplitView.Pane>
+                                <Grid RowDefinitions="Auto,Auto,*">
+                                    <ToggleSwitch
+                                        Grid.Row="0"
+                                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                                        Content="{StaticResource SemiIconSidebar}"
+                                        HorizontalAlignment="Left"
+                                        IsChecked="{Binding #SplitView2.IsPaneOpen}">
+                                    </ToggleSwitch>
+                                    <TextBlock
+                                        Grid.Row="1"
+                                        Margin="8,12"
+                                        FontWeight="Bold"
+                                        Text="Playlist" />
+                                    <ListBox
+                                        Grid.Row="2"
+                                        ItemsSource="{Binding Songs}" />
+                                </Grid>
+                            </SplitView.Pane>
+
+                            <Panel>
+                                <Panel.Styles>
+                                    <Style Selector="Image#AlbumCover2">
+                                        <Style.Animations>
+                                            <Animation IterationCount="Infinite" Duration="0:0:40">
+                                                <KeyFrame Cue="0%">
+                                                    <Setter Property="RotateTransform.Angle" Value="0" />
+                                                </KeyFrame>
+                                                <KeyFrame Cue="100%">
+                                                    <Setter Property="RotateTransform.Angle" Value="360" />
+                                                </KeyFrame>
+                                            </Animation>
+                                        </Style.Animations>
+                                    </Style>
+                                </Panel.Styles>
+                                <Image
+                                    Source="/Assets/WORLD.png"
+                                    Name="AlbumCover2"
+                                    Width="200"
+                                    Height="200" />
+                                <Arc
+                                    Width="290"
+                                    Height="290"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="45">
+                                    <Arc.Stroke>
+                                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
+                                            <GradientStop Color="#010101" Offset="0" />
+                                            <GradientStop Color="#363636" Offset="0.5" />
+                                            <GradientStop Color="#010101" Offset="1" />
+                                        </LinearGradientBrush>
+                                    </Arc.Stroke>
+                                </Arc>
+                                <Arc
+                                    Width="294"
+                                    Height="294"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="4"
+                                    Stroke="Black" />
+                                <Arc
+                                    Width="310"
+                                    Height="310"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="10"
+                                    Stroke="#C6CACD"
+                                    Opacity="0.1" />
+                            </Panel>
+
+                        </SplitView>
+                    </Border>
+                </TabItem>
+            </TabControl>
         </Grid>
     </Border>
 </UserControl>

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

@@ -1,5 +1,7 @@
+using System.Collections.ObjectModel;
 using Avalonia.Controls;
-using Semi.Avalonia.Demo.ViewModels;
+using Avalonia.Markup.Xaml;
+using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -10,4 +12,33 @@ public partial class SplitViewDemo : UserControl
         InitializeComponent();
         this.DataContext = new SplitViewDemoViewModel();
     }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
+
+public class SplitViewDemoViewModel : ObservableObject
+{
+    public ObservableCollection<string> Songs { get; set; } =
+    [
+        "320万年前",
+        "隐德来希",
+        "孔明",
+        "锦鲤卟噜噜",
+        "指鹿为马",
+        "热带季风Remix",
+        "加州梦境",
+        "渐近自由",
+        "世界所有的烂漫",
+    ];
+
+    public static ObservableCollection<SplitViewDisplayMode> DisplayModes { get; set; } =
+    [
+        SplitViewDisplayMode.Inline,
+        SplitViewDisplayMode.CompactInline,
+        SplitViewDisplayMode.Overlay,
+        SplitViewDisplayMode.CompactOverlay,
+    ];
 }

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

@@ -7,6 +7,7 @@
     xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels;assembly=Semi.Avalonia.Demo"
     d:DesignHeight="450"
     d:DesignWidth="800"
+    x:CompileBindings="True"
     x:DataType="vm:TabControlDemoViewModel"
     mc:Ignorable="d">
     <ScrollViewer>

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

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

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

@@ -5,6 +5,7 @@
              xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Semi.Avalonia.Demo.Pages.TabStripDemo"
+             x:CompileBindings="True"
              x:DataType="vm:TabStripDemoViewModel">
     <Design.DataContext>
         <vm:TabStripDemoViewModel />

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

@@ -159,4 +159,4 @@
             </HeaderedContentControl>
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/TextBlockDemo.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/TextBoxDemo.axaml

@@ -15,6 +15,7 @@
             <TextBox Width="300" Classes="revealPasswordButton" Text="123456" />
             <TextBox
                 Width="300"
+                IsReadOnly="True"
                 Classes="ClearButton RevealPasswordButton"
                 InnerLeftContent="https://"
                 InnerRightContent=".com"
@@ -48,7 +49,6 @@
                     IsEnabled="False" />
             </StackPanel>
             <TextBox Width="300" Classes="TextArea" Watermark="TextArea TextBox" />
-            <TextBox Width="300" Classes="TextArea ClearButton" Text="TextArea with ClearButton - text should be clearable" />
             <TextBox
                 Width="300"
                 Theme="{StaticResource LooklessTextBox}"

demo/Semi.Avalonia.Demo/Pages/TextBoxDemo.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/TimePickerDemo.axaml

@@ -17,9 +17,9 @@
         <TimePicker Classes="Large" />
         <TimePicker Classes="Small" />
         <StackPanel Orientation="Horizontal">
-            <TimePicker Classes="Large" ClockIdentifier="12HourClock" />
+            <TimePicker Classes="Large" ClockIdentifier="12HourClock"/>
-            <TimePicker ClockIdentifier="12HourClock" />
+            <TimePicker ClockIdentifier="12HourClock"/>
-            <TimePicker Classes="Small" ClockIdentifier="12HourClock" />
+            <TimePicker Classes="Small" ClockIdentifier="12HourClock"/>
         </StackPanel>
         <StackPanel Orientation="Horizontal">
             <TimePicker IsEnabled="False" />
@@ -28,4 +28,4 @@
         </StackPanel>
 
     </StackPanel>
-</UserControl>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.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 TimePickerDemo : UserControl
     {
         InitializeComponent();
     }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
 }

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

@@ -0,0 +1,98 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.ToggleButtonDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel Spacing="20">
+        <TextBlock Text="Toggle Button (Default)" />
+        <StackPanel Orientation="Horizontal" Spacing="20">
+            <ToggleButton>Default</ToggleButton>
+            <ToggleButton Classes="Primary">Primary</ToggleButton>
+            <ToggleButton Classes="Secondary">Secondary</ToggleButton>
+            <ToggleButton Classes="Tertiary">Tertiary</ToggleButton>
+            <ToggleButton Classes="Success">Success</ToggleButton>
+            <ToggleButton Classes="Warning">Warning</ToggleButton>
+            <ToggleButton Classes="Danger">Danger</ToggleButton>
+            <ToggleButton Classes="Danger" IsEnabled="False">Disabled</ToggleButton>
+        </StackPanel>
+        <TextBlock Text="Toggle Button Checked State" />
+        <StackPanel Orientation="Horizontal" Spacing="20">
+            <ToggleButton IsChecked="True">Default</ToggleButton>
+            <ToggleButton Classes="Primary" IsChecked="True">Primary</ToggleButton>
+            <ToggleButton Classes="Secondary" IsChecked="True">Secondary</ToggleButton>
+            <ToggleButton Classes="Tertiary" IsChecked="True">Tertiary</ToggleButton>
+            <ToggleButton Classes="Success" IsChecked="True">Success</ToggleButton>
+            <ToggleButton Classes="Warning" IsChecked="True">Warning</ToggleButton>
+            <ToggleButton Classes="Danger" IsChecked="True">Danger</ToggleButton>
+            <ToggleButton
+                Classes="Danger"
+                IsChecked="True"
+                IsEnabled="False">
+                Disabled
+            </ToggleButton>
+        </StackPanel>
+        <TextBlock Text="Toggle Button Three State" />
+        <StackPanel Orientation="Horizontal" Spacing="20">
+            <ToggleButton IsChecked="{x:Null}" IsThreeState="True">Default</ToggleButton>
+            <ToggleButton
+                Classes="Primary"
+                IsChecked="{x:Null}"
+                IsThreeState="True">
+                Primary
+            </ToggleButton>
+            <ToggleButton
+                Classes="Secondary"
+                IsChecked="{x:Null}"
+                IsThreeState="True">
+                Secondary
+            </ToggleButton>
+            <ToggleButton
+                Classes="Tertiary"
+                IsChecked="{x:Null}"
+                IsThreeState="True">
+                Tertiary
+            </ToggleButton>
+            <ToggleButton
+                Classes="Success"
+                IsChecked="{x:Null}"
+                IsThreeState="True">
+                Success
+            </ToggleButton>
+            <ToggleButton
+                Classes="Warning"
+                IsChecked="{x:Null}"
+                IsThreeState="True">
+                Warning
+            </ToggleButton>
+            <ToggleButton
+                Classes="Danger"
+                IsChecked="{x:Null}"
+                IsThreeState="True">
+                Danger
+            </ToggleButton>
+            <ToggleButton
+                Classes="Danger"
+                IsChecked="{x:Null}"
+                IsEnabled="False"
+                IsThreeState="True">
+                Disabled
+            </ToggleButton>
+        </StackPanel>
+        <TextBlock Text="Toggle Button Disabled State" />
+        <StackPanel Background="{DynamicResource SemiColorBackground1}" Orientation="Horizontal" Spacing="20">
+            <ToggleButton IsThreeState="True" IsEnabled="False">Default</ToggleButton>
+            <ToggleButton IsThreeState="True" IsEnabled="False" IsChecked="True">Checked</ToggleButton>
+            <ToggleButton IsThreeState="True" IsEnabled="False" IsChecked="{x:Null}">Indeterminate</ToggleButton>
+        </StackPanel>
+        <TextBlock Text="Toggle Button Size" />
+        <StackPanel Orientation="Horizontal" Spacing="20">
+            <ToggleButton Classes="Small" IsThreeState="True">Small</ToggleButton>
+            <ToggleButton IsThreeState="True">Default</ToggleButton>
+            <ToggleButton Classes="Large" IsThreeState="True">Large</ToggleButton>
+        </StackPanel>
+    </StackPanel>
+</UserControl>

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

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

demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.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 ToggleSwitchDemo : UserControl
     {
         InitializeComponent();
     }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
 }

demo/Semi.Avalonia.Demo/Pages/ToolTipDemo.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 ToolTipDemo : UserControl
     {
         InitializeComponent();
     }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
 }

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

@@ -6,6 +6,7 @@
              xmlns:converters="clr-namespace:Semi.Avalonia.Demo.Converters"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Semi.Avalonia.Demo.Pages.TreeDataGridDemo"
+             x:CompileBindings="True"
              x:DataType="vm:TreeDataGridDemoViewModel">
     <UserControl.Resources>
         <converters:FileIconConverter x:Key="FileIconConverter">

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

@@ -14,9 +14,10 @@ public partial class TreeDataGridDemo : UserControl
 
     private void SelectedPath_KeyDown(object? sender, KeyEventArgs e)
     {
-        if (e.Key == Key.Enter && DataContext is TreeDataGridDemoViewModel vm)
+        if (e.Key == Key.Enter)
         {
-            vm.FilesContext.SelectedPath = (sender as TextBox)?.Text;
+            var vm = DataContext as TreeDataGridDemoViewModel;
+            vm.FilesContext.SelectedPath = (sender as TextBox)!.Text;
         }
     }
 }

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

@@ -8,6 +8,7 @@
     xmlns:vm="clr-namespace:Semi.Avalonia.Demo.Pages"
     d:DesignHeight="450"
     d:DesignWidth="800"
+    x:CompileBindings="True"
     x:DataType="vm:TreeViewVm"
     mc:Ignorable="d">
 
@@ -78,4 +79,4 @@
 
     </Grid>
 
-</UserControl>
+</UserControl>