misc: bump version.

ready for Avalonia 11.3.7

.github/FUNDING.yml

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

.github/workflows/deploy.yml

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

.github/workflows/pack.yml

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

.github/workflows/publish.yml

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

.github/workflows/release-tag.yml

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

LICENSE

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

README.md

@@ -38,22 +38,30 @@ Include Semi Design Styles in application:
 
 That's all.
 
-ColorPicker, DataGrid and TreeDataGrid are distributed in separated packages. Please install if you need.
+ColorPicker, DataGrid, TreeDataGrid, Dock, Tabalonia and AvaloniaEdit are distributed in separated packages. Please install if you need.
 
 ```bash
 dotnet add package Semi.Avalonia.ColorPicker
 dotnet add package Semi.Avalonia.DataGrid
 dotnet add package Semi.Avalonia.TreeDataGrid
+dotnet add package Semi.Avalonia.Dock
+dotnet add package Semi.Avalonia.Tabalonia
+dotnet add package Semi.Avalonia.AvaloniaEdit
 ```
 
 ```xaml
 <Application.Styles>
-    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+    <semi:ColorPickerSemiTheme />
-    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+    <semi:DataGridSemiTheme />
-    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
+    <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.
@@ -63,7 +71,7 @@ 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
 

README_CN.md

@@ -38,22 +38,30 @@ dotnet add package Semi.Avalonia
 
 这样就可以了。
 
-ColorPicker、DataGrid 和 TreeDataGrid 的样式单独分发，如果需要请安装并引用。
+ColorPicker、DataGrid、TreeDataGrid、Dock、Tabalonia 和 AvaloniaEdit 的样式单独分发，如果需要请安装并引用。
 
 ```bash
 dotnet add package Semi.Avalonia.ColorPicker
 dotnet add package Semi.Avalonia.DataGrid
 dotnet add package Semi.Avalonia.TreeDataGrid
+dotnet add package Semi.Avalonia.Dock
+dotnet add package Semi.Avalonia.Tabalonia
+dotnet add package Semi.Avalonia.AvaloniaEdit
 ```
 
 ```xaml
 <Application.Styles>
-    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+    <semi:ColorPickerSemiTheme />
-    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+    <semi:DataGridSemiTheme />
-    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
+    <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 的展示应用。

Semi.Avalonia.sln

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

demo/Directory.Build.props

@@ -1,6 +1,7 @@
 <Project>
     <PropertyGroup>
-        <AvaloniaVersion>11.2.3</AvaloniaVersion>
+        <AvaloniaVersion>11.3.7</AvaloniaVersion>
+        <DataGridVersion>11.3.7</DataGridVersion>
         <CommunityToolkitVersion>8.4.0</CommunityToolkitVersion>
     </PropertyGroup>
 </Project>

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

@@ -14,9 +14,7 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <AndroidResource Include="Icon.png">
+        <AndroidResource Include="Icon.png" Link="Resources\drawable\Icon.png"/>
-            <Link>Resources\drawable\Icon.png</Link>
-        </AndroidResource>
     </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'))">

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'))">

demo/Semi.Avalonia.Demo/App.axaml

@@ -1,33 +1,49 @@
 <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:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels">
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    x:DataType="vm:ApplicationViewModel">
     <Application.Styles>
-        <!-- You can still reference in old way.  -->
-        <!-- <StyleInclude Source="avares://Semi.Avalonia/Index.axaml" /> -->
         <semi:SemiTheme Locale="zh-CN" />
         <semi:SemiPopupAnimations />
-        <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+        <semi:ColorPickerSemiTheme />
-        <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+        <semi:DataGridSemiTheme />
+        <semi:TreeDataGridSemiTheme />
     </Application.Styles>
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude
+                <ResourceInclude Source="Themes/_index.axaml" />
-                    Source="Themes/_index.axaml" />
             </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 Icon="/Assets/irihi.ico" MacOSProperties.IsTemplateIcon="true" ToolTipText="Semi Avalonia Demo">
+            <TrayIcon
+                Icon="{OnPlatform Default=/Assets/irihi.ico, macOS=/Assets/irihi2.ico}"
+                MacOSProperties.IsTemplateIcon="true"
+                Command="{Binding ActivateCommand}"
+                ToolTipText="Semi Avalonia Demo">
                 <TrayIcon.Menu>
                     <NativeMenu>
-                        <NativeMenuItem Header="Exit" Command="{Binding ExitCommand}" />
+                        <NativeMenuItem
+                            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

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

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

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

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

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

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

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

@@ -3,15 +3,14 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:local="clr-namespace:Semi.Avalonia.Demo.Pages"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    x:CompileBindings="False"
+    x:DataType="vm:AutoCompleteBoxDemoViewModel"
-    x:DataType="local:AutoCompleteBoxDemoViewModel"
     mc:Ignorable="d">
     <Design.DataContext>
-        <local:AutoCompleteBoxDemoViewModel />
+        <vm:AutoCompleteBoxDemoViewModel />
     </Design.DataContext>
     <StackPanel HorizontalAlignment="Left" Spacing="20">
         <StackPanel.Styles>
@@ -21,7 +20,7 @@
                     <Binding Path="States" />
                 </Setter>
                 <Setter Property="ItemTemplate">
-                    <DataTemplate DataType="local:StateData">
+                    <DataTemplate DataType="vm:StateData">
                         <TextBlock Text="{Binding Name}" />
                     </DataTemplate>
                 </Setter>
@@ -30,40 +29,40 @@
 
         <AutoCompleteBox
             Watermark="Please select a State"
-            ValueMemberBinding="{Binding Name}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             Classes="Large"
-            ValueMemberBinding="{ReflectionBinding Name}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             Classes="Small"
-            ValueMemberBinding="{ReflectionBinding Name}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             Classes="Bordered"
-            ValueMemberBinding="{ReflectionBinding Name}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             IsEnabled="False"
             Watermark="Disabled"
-            ValueMemberBinding="{ReflectionBinding Name}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             InnerLeftContent="https://"
             InnerRightContent=".com"
-            ValueMemberBinding="{ReflectionBinding Name}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
 
         <StackPanel Orientation="Horizontal">
             <AutoCompleteBox
                 Width="100"
                 Classes="Large"
                 Watermark="Large"
-                ValueMemberBinding="{ReflectionBinding Name}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
                 Watermark="Default"
-                ValueMemberBinding="{ReflectionBinding Name}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
                 Classes="Small"
                 Watermark="Small"
-                ValueMemberBinding="{ReflectionBinding Name}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         </StackPanel>
 
         <StackPanel Orientation="Horizontal">
@@ -71,17 +70,17 @@
                 Width="100"
                 IsEnabled="False"
                 Watermark="Disabled"
-                ValueMemberBinding="{ReflectionBinding Name}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
                 Classes="Bordered"
                 Watermark="Bordered"
-                ValueMemberBinding="{ReflectionBinding Name}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
                 Classes="Bordered"
                 IsEnabled="False"
-                ValueMemberBinding="{ReflectionBinding Name}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         </StackPanel>
 
     </StackPanel>

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

@@ -1,9 +1,5 @@
-using System.Collections.ObjectModel;
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
+using Semi.Avalonia.Demo.ViewModels;
-using System.Collections.Generic;
-using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -14,86 +10,4 @@ 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,6 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 

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

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

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

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

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

@@ -8,6 +8,10 @@
     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}"
@@ -32,4 +36,4 @@
                 Text="A.S.I.A" />
         </ButtonSpinner>
     </StackPanel>
-</UserControl>
+</UserControl>

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

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

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

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

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

@@ -1,7 +1,4 @@
-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,6 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 

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

@@ -2,8 +2,7 @@
     x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker;assembly=Semi.Avalonia.ColorPicker"
+    xmlns:semi="https://irihi.tech/semi"
-    xmlns:controls="using:Avalonia.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     d:DesignHeight="1450"
@@ -11,18 +10,15 @@
     mc:Ignorable="d">
     <ScrollViewer>
         <StackPanel Spacing="20">
-            <StackPanel
+            <StackPanel Orientation="Horizontal" Spacing="20">
-                VerticalAlignment="Top"
-                Orientation="Horizontal"
-                Spacing="20">
                 <ColorView Name="Test" ColorSpectrumShape="Ring" />
                 <ColorView ColorSpectrumShape="Box" />
                 <ColorView Palette="{DynamicResource SemiColorPalette}" />
             </StackPanel>
-            <StackPanel VerticalAlignment="Top" Orientation="Horizontal">
+            <StackPanel Orientation="Horizontal">
                 <ColorView
                     Name="SimpleColorViewTest"
-                    HsvColor="hsv(120,11%,10%)"
+                    HsvColor="hsv(180,80%,70%)"
                     IsAlphaVisible="True"
                     Theme="{StaticResource SimpleColorView}" />
                 <StackPanel>
@@ -30,63 +26,55 @@
                     <TextBlock Text="{Binding #SimpleColorViewTest.Color}" />
                 </StackPanel>
             </StackPanel>
-            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
+            <StackPanel Orientation="Horizontal" Spacing="8">
-                <ColorPicker Margin="8" ColorSpectrumShape="Ring">
+                <ColorPicker ColorSpectrumShape="Ring">
                     <ColorPicker.Palette>
-                        <controls:FlatHalfColorPalette />
+                        <FlatHalfColorPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
-                <ColorPicker Margin="8" ColorSpectrumShape="Box">
+                <ColorPicker ColorSpectrumShape="Box">
                     <ColorPicker.Palette>
-                        <colorPicker:SemiColorLightPalette />
+                        <semi:SemiColorLightPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
-
                 <ColorPicker
-                    Margin="8"
+                    Theme="{DynamicResource HexColorPicker}"
-                    ColorSpectrumShape="Box"
+                    ColorSpectrumShape="Box">
-                    Theme="{DynamicResource HexColorPicker}">
                     <ColorPicker.Palette>
-                        <colorPicker:SemiColorLightPalette />
+                        <semi:SemiColorLightPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
             </StackPanel>
-            <StackPanel HorizontalAlignment="Left" >
+            <StackPanel HorizontalAlignment="Left">
-                <TextBlock Text="Use Style to customize button"></TextBlock>
+                <TextBlock Text="Use Style to customize button" />
                 <ColorPicker
                     Margin="8"
-                    Width="32"
+                    MinWidth="32"
-                    HsvColor="hsv(120,11%,10%)"
+                    HsvColor="hsv(180,80%,70%)">
-                    >
                     <ColorPicker.Content>
                         <Border
                             Margin="1"
-                            HorizontalAlignment="Stretch"
+                            Background="{Binding $parent[ColorPicker].HsvColor, Converter={StaticResource ToBrushConverter}}"
-                            VerticalAlignment="Stretch"
-                            Background="{Binding $parent[ColorPicker].HsvColor, 
-                                                     Converter={StaticResource ToBrushConverter}}"
                             CornerRadius="1" />
                     </ColorPicker.Content>
                     <ColorPicker.Styles>
                         <Style Selector="DropDownButton">
-                            <Setter Property="Padding" Value="0"/>
+                            <Setter Property="Padding" Value="0" />
                             <Style Selector="^ /template/ PathIcon">
-                                <Setter Property="IsVisible" Value="False"/>
+                                <Setter Property="IsVisible" Value="False" />
                             </Style>
                         </Style>
                     </ColorPicker.Styles>
                 </ColorPicker>
-
             </StackPanel>
-            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
+
+            <StackPanel Orientation="Horizontal" Spacing="8">
                 <ColorPicker
-                    Margin="8"
+                    Theme="{StaticResource SimpleColorPicker}"
-                    HsvColor="hsv(120,11%,10%)"
+                    HsvColor="hsv(180,80%,70%)" />
-                    Theme="{StaticResource SimpleColorPicker}" />
                 <ColorPicker
-                    Margin="8"
+                    Theme="{StaticResource HexSimpleColorPicker}"
-                    HsvColor="hsv(120,11%,10%)"
+                    HsvColor="hsv(180,80%,70%)" />
-                    Theme="{StaticResource HexSimpleColorPicker}" />
             </StackPanel>
         </StackPanel>
     </ScrollViewer>

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

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

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

@@ -4,49 +4,54 @@
     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:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     d:DesignHeight="800"
     d:DesignWidth="800"
-    mc:Ignorable="d">
+    mc:Ignorable="d"
+    x:DataType="vm:ComboBoxDemoViewModel">
     <Design.DataContext>
-        <pages:ComboBoxDemoViewModel />
+        <vm:ComboBoxDemoViewModel />
     </Design.DataContext>
-    <StackPanel Spacing="20">
+    <ScrollViewer>
-        <StackPanel.Styles>
+        <StackPanel Spacing="20">
-            <Style Selector="ComboBox">
+            <StackPanel.Styles>
-                <Setter Property="Width" Value="300" />
+                <Style Selector="ComboBox">
-                <Setter Property="ItemsSource" Value="{Binding Items}" />
+                    <Setter Property="Width" Value="300" />
-            </Style>
+                    <Setter Property="ItemsSource" Value="{Binding Items}" />
-        </StackPanel.Styles>
+                </Style>
+            </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>
-        <StackPanel Orientation="Horizontal">
+</UserControl>
-            <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,6 +1,5 @@
-using System.Collections.ObjectModel;
 using Avalonia.Controls;
-using CommunityToolkit.Mvvm.ComponentModel;
+using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -11,9 +10,4 @@ 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

@@ -3,62 +3,62 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:local="using:Semi.Avalonia.Demo.Pages"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels;assembly=Semi.Avalonia.Demo"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    x:CompileBindings="True"
     x:DataType="vm:DataGridDemoViewModel"
     mc:Ignorable="d">
     <TabControl>
         <TabItem Header="DataGrid">
-           <Grid RowDefinitions="Auto, *">
+            <Grid RowDefinitions="Auto, *">
-               <StackPanel Grid.Row="0" Orientation="Horizontal">
+                <StackPanel Grid.Row="0" Orientation="Horizontal">
-                   <ToggleSwitch Content="Disable" Name="DisableToggle" />
+                    <ToggleSwitch Content="Enable" Name="enable" IsChecked="True" />
-                   <ToggleSwitch Content="ScrollViewerHide" Name="ScrollViewerHide" />
+                    <ToggleSwitch Content="Inset Content" Name="inset" />
-               </StackPanel>
+                    <ToggleSwitch Content="ScrollBar Auto Hide" Name="autohide" />
-               <DataGrid Grid.Row="1"
+                </StackPanel>
-                         Margin="8"
+                <DataGrid Grid.Row="1"
-                         CanUserReorderColumns="True"
+                          Margin="8"
-                         CanUserResizeColumns="True"
+                          CanUserReorderColumns="True"
-                         CanUserSortColumns="True"
+                          CanUserResizeColumns="True"
-                         HeadersVisibility="All"
+                          CanUserSortColumns="True"
-                         IsReadOnly="True"
+                          HeadersVisibility="All"
-                         ScrollViewer.AllowAutoHide="{Binding #ScrollViewerHide.IsChecked}"
+                          IsReadOnly="True"
-                         IsEnabled="{Binding #DisableToggle.IsChecked}"
+                          Classes.InsetContent="{Binding #inset.IsChecked}"
-                         ItemsSource="{Binding GridData1}">
+                          ScrollViewer.AllowAutoHide="{Binding #autohide.IsChecked}"
-                   <DataGrid.Columns>
+                          IsEnabled="{Binding #enable.IsChecked}"
-                       <DataGridTextColumn
+                          ItemsSource="{Binding GridData1}">
-                           Width="6*"
+                    <DataGrid.Columns>
-                           x:DataType="vm:Song"
+                        <DataGridTextColumn
-                           Binding="{Binding Title}"
+                            Width="6*"
-                           Header="Title" />
+                            x:DataType="vm:Song"
-                       <DataGridTextColumn
+                            Binding="{Binding Title}"
-                           Width="6*"
+                            Header="Title" />
-                           x:DataType="vm:Song"
+                        <DataGridTextColumn
-                           Binding="{Binding Artist}"
+                            Width="6*"
-                           Header="Artist" />
+                            x:DataType="vm:Song"
-                       <DataGridTextColumn
+                            Binding="{Binding Artist}"
-                           Width="6*"
+                            Header="Artist" />
-                           x:DataType="vm:Song"
+                        <DataGridTextColumn
-                           Binding="{Binding Album}"
+                            Width="6*"
-                           Header="Album" />
+                            x:DataType="vm:Song"
-                       <DataGridTemplateColumn Header="Duration" SortMemberPath="Duration">
+                            Binding="{Binding Album}"
-                           <DataGridTemplateColumn.CellTemplate>
+                            Header="Album" />
-                               <DataTemplate>
+                        <DataGridTemplateColumn Header="Duration" SortMemberPath="Duration">
-                                   <TextBlock
+                            <DataGridTemplateColumn.CellTemplate>
-                                       Margin="8,0,0,0"
+                                <DataTemplate>
-                                       VerticalAlignment="Center"
+                                    <TextBlock
-                                       Text="{Binding Duration}" />
+                                        Margin="8,0,0,0"
-                               </DataTemplate>
+                                        VerticalAlignment="Center"
-                           </DataGridTemplateColumn.CellTemplate>
+                                        Text="{Binding Duration}" />
-                       </DataGridTemplateColumn>
+                                </DataTemplate>
-                   </DataGrid.Columns>
+                            </DataGridTemplateColumn.CellTemplate>
+                        </DataGridTemplateColumn>
+                    </DataGrid.Columns>
 
-               </DataGrid>
+                </DataGrid>
-               
+
-           </Grid>
+            </Grid>
         </TabItem>
         <TabItem Header="Grouping">
             <DataGrid
@@ -176,4 +176,4 @@
             </Grid>
         </TabItem>
     </TabControl>
-</UserControl>
+</UserControl>

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

@@ -1,18 +1,4 @@
-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,6 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -10,9 +8,4 @@ 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,7 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
-using Avalonia.Media;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -11,14 +8,4 @@ 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,6 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 

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

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

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

@@ -5,9 +5,9 @@
              xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
              xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
              xmlns:cvt="clr-namespace:Semi.Avalonia.Demo.Converters"
+             xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
              mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="1450"
              x:DataType="vm:HighContrastDemoViewModel"
-             x:CompileBindings="True"
              x:Class="Semi.Avalonia.Demo.Pages.HighContrastDemo">
     <Design.DataContext>
         <vm:HighContrastDemoViewModel />
@@ -306,6 +306,18 @@
                                     </DataTemplate>
                                 </DataGridTemplateColumn.CellTemplate>
                             </DataGridTemplateColumn>
+
+                            <DataGridTemplateColumn Width="100" Header="CopyText">
+                                <DataGridTemplateColumn.CellTemplate>
+                                    <DataTemplate DataType="vm:ColorResource">
+                                        <Button
+                                            Command="{Binding $parent[pages:HighContrastDemo].Copy}"
+                                            CommandParameter="{Binding CopyText}"
+                                            Theme="{DynamicResource  IconBorderlessButton}"
+                                            Content="{StaticResource SemiIconCopy}" />
+                                    </DataTemplate>
+                                </DataGridTemplateColumn.CellTemplate>
+                            </DataGridTemplateColumn>
                         </DataGrid.Columns>
                     </DataGrid>
                 </StackPanel>

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

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

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

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

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

@@ -31,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>
@@ -221,4 +221,4 @@
             </WrapPanel>
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>

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

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

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

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

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

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

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

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

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

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

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

@@ -41,9 +41,9 @@
                     <Image.Source>
                         <DrawingImage>
                             <DrawingGroup>
-                                <GeometryDrawing Brush="#8B44AC" Geometry="M74.8535 85.8231C75.0263 85.8231 75.1954 85.8231 75.3679 85.8231C80.7347 85.8231 85.1439 81.8027 85.7614 76.6019L85.8357 41.7604C85.2255 18.5931 66.2537 0 42.9393 0C19.2399 0 0.02771 19.2122 0.02771 42.9116C0.02771 66.3573 18.8309 85.418 42.18 85.8231H74.8535Z" />
+                                <GeometryDrawing Brush="#0D6EFD" Geometry="M74.8535 85.8231C75.0263 85.8231 75.1954 85.8231 75.3679 85.8231C80.7347 85.8231 85.1439 81.8027 85.7614 76.6019L85.8357 41.7604C85.2255 18.5931 66.2537 0 42.9393 0C19.2399 0 0.02771 19.2122 0.02771 42.9116C0.02771 66.3573 18.8309 85.418 42.18 85.8231H74.8535Z" />
-                                <GeometryDrawing Brush="#F9F9FB" Geometry="M43.0585 14.6143C29.5513 14.6143 18.2555 24.082 15.4454 36.7432C18.1357 37.4975 20.1087 39.9679 20.1087 42.8992C20.1087 45.8305 18.1357 48.301 15.4454 49.0552C18.2555 61.7164 29.5513 71.1842 43.0585 71.1842C47.9754 71.1842 52.5993 69.9296 56.6276 67.723V70.9926H71.3435V44.0716C71.3569 43.7138 71.3435 43.2603 71.3435 42.8992C71.3435 27.2779 58.6799 14.6143 43.0585 14.6143ZM29.5096 42.8992C29.5096 35.4164 35.5757 29.3503 43.0585 29.3503C50.5414 29.3503 56.6074 35.4164 56.6074 42.8992C56.6074 50.3821 50.5414 56.4481 43.0585 56.4481C35.5757 56.4481 29.5096 50.3821 29.5096 42.8992Z" />
+                                <GeometryDrawing Brush="White" Geometry="M43.0585 14.6143C29.5513 14.6143 18.2555 24.082 15.4454 36.7432C18.1357 37.4975 20.1087 39.9679 20.1087 42.8992C20.1087 45.8305 18.1357 48.301 15.4454 49.0552C18.2555 61.7164 29.5513 71.1842 43.0585 71.1842C47.9754 71.1842 52.5993 69.9296 56.6276 67.723V70.9926H71.3435V44.0716C71.3569 43.7138 71.3435 43.2603 71.3435 42.8992C71.3435 27.2779 58.6799 14.6143 43.0585 14.6143ZM29.5096 42.8992C29.5096 35.4164 35.5757 29.3503 43.0585 29.3503C50.5414 29.3503 56.6074 35.4164 56.6074 42.8992C56.6074 50.3821 50.5414 56.4481 43.0585 56.4481C35.5757 56.4481 29.5096 50.3821 29.5096 42.8992Z" />
-                                <GeometryDrawing Brush="#F9F9FB" Geometry="M18.105 42.8805C18.105 45.3803 16.0785 47.4068 13.5787 47.4068C11.0789 47.4068 9.05237 45.3803 9.05237 42.8805C9.05237 40.3807 11.0789 38.3542 13.5787 38.3542C16.0785 38.3542 18.105 40.3807 18.105 42.8805Z" />
+                                <GeometryDrawing Brush="White" Geometry="M18.105 42.8805C18.105 45.3803 16.0785 47.4068 13.5787 47.4068C11.0789 47.4068 9.05237 45.3803 9.05237 42.8805C9.05237 40.3807 11.0789 38.3542 13.5787 38.3542C16.0785 38.3542 18.105 40.3807 18.105 42.8805Z" />
                             </DrawingGroup>
                         </DrawingImage>
                     </Image.Source>
@@ -234,7 +234,7 @@
                             VerticalAlignment="Top"
                             Palette="{DynamicResource SemiColorPalette}"
                             SelectedIndex="2"
-                            Color="#8B44AC" />
+                            Color="#0D6EFD" />
                         <StackPanel Width="300" Margin="8">
                             <StackPanel Orientation="Horizontal">
                                 <Slider
@@ -348,7 +348,7 @@
                     Classes="H5"
                     Text="Start to install"
                     Theme="{DynamicResource TitleTextBlock}" />
-                <TabControl Padding="8">
+                <TabControl Theme="{StaticResource LineTabControl}">
                     <TabItem Header="Main">
                         <StackPanel>
                             <TextBlock Text="Install via nuget: " />
@@ -409,6 +409,51 @@
                             </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,41 +9,66 @@ public partial class Overview : UserControl
         InitializeComponent();
     }
 
-    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.2.1.3";
+    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia";
 
     public string MainStyle { get; set; } =
         """
         <Application.Styles>
-        <!-- You can still reference in old way.  -->
-        <!-- <StyleInclude Source="avares://Semi.Avalonia/Index.axaml" /> -->
             <semi:SemiTheme Locale="zh-CN" />
         </Application.Styles>
         """;
 
-    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.2.1.3";
+    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker";
 
     public string ColorPickerStyle { get; set; } =
         """
         <Application.Styles>
-            <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+            <semi:ColorPickerSemiTheme />
         </Application.Styles>
         """;
 
-    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.2.1.3";
+    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid";
 
     public string DataGridStyle { get; set; } =
         """
         <Application.Styles>
-            <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+            <semi:DataGridSemiTheme />
         </Application.Styles>
         """;
 
-    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.10.1";
+    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid";
 
     public string TreeDataGridStyle { get; set; } =
         """
         <Application.Styles>
-            <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
+            <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,7 +8,6 @@
     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/PaletteDemo.axaml.cs

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

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

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

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

@@ -20,15 +20,16 @@
                     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,6 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -10,9 +8,4 @@ public partial class ProgressBarDemo : UserControl
     {
         InitializeComponent();
     }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }

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

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

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

@@ -4,11 +4,10 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    x:DataType="pages:RefreshContainerDemoViewModel"
+    x:DataType="vm:RefreshContainerDemoViewModel"
-    x:CompileBindings="True"
     mc:Ignorable="d">
     <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Top">
         <Label DockPanel.Dock="Top">A control that supports pull to refresh</Label>
@@ -24,4 +23,4 @@
                      ItemsSource="{Binding Items}" />
         </RefreshContainer>
     </DockPanel>
-</UserControl>
+</UserControl>

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

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

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

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

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

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

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

@@ -1,6 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -10,9 +8,4 @@ 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,6 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -11,8 +9,4 @@ 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,6 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -11,8 +9,4 @@ public partial class SliderDemo : UserControl
         InitializeComponent();
     }
 
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }

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

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

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

@@ -1,7 +1,5 @@
-using System.Collections.ObjectModel;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
+using Semi.Avalonia.Demo.ViewModels;
-using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -12,33 +10,4 @@ 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 ObservableCollection<SplitViewDisplayMode> DisplayModes { get; set; } =
-    [
-        SplitViewDisplayMode.Inline,
-        SplitViewDisplayMode.CompactInline,
-        SplitViewDisplayMode.Overlay,
-        SplitViewDisplayMode.CompactOverlay,
-    ];
 }

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

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

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

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

@@ -0,0 +1,93 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Semi.Avalonia.Demo.Pages.TabStripDemo"
+             x:DataType="vm:TabStripDemoViewModel">
+    <Design.DataContext>
+        <vm:TabStripDemoViewModel />
+    </Design.DataContext>
+    <ScrollViewer>
+        <StackPanel>
+            <TabControl Theme="{StaticResource LineTabControl}">
+                <TabItem Header="Default">
+                    <StackPanel>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip>
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                                <TabStripItem Content="中文中文" />
+                                <TabStripItem Content="Tab 4" IsEnabled="False" />
+                            </TabStrip>
+                        </Border>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip
+                                ItemsSource="{Binding Items}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Line">
+                    <StackPanel>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip Theme="{StaticResource LineTabStrip}">
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                                <TabStripItem Content="中文中文" />
+                                <TabStripItem Content="Tab 4" IsEnabled="False" />
+                            </TabStrip>
+                        </Border>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip
+                                ItemsSource="{Binding Items}"
+                                Theme="{StaticResource LineTabStrip}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Card">
+                    <StackPanel>
+                        <Border
+                            Background="Transparent"
+                            Theme="{StaticResource CardBorder}">
+                            <TabStrip Theme="{StaticResource CardTabStrip}">
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                                <TabStripItem Content="中文中文" />
+                                <TabStripItem Content="Tab 4" IsEnabled="False" />
+                            </TabStrip>
+                        </Border>
+                        <Border
+                            Background="Transparent"
+                            Theme="{StaticResource CardBorder}">
+                            <TabStrip
+                                ItemsSource="{Binding Items}"
+                                Theme="{StaticResource CardTabStrip}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Button">
+                    <StackPanel>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip Theme="{StaticResource ButtonTabStrip}">
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                                <TabStripItem Content="中文中文" />
+                                <TabStripItem Content="Tab 4" IsEnabled="False" />
+                            </TabStrip>
+                        </Border>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip
+                                ItemsSource="{Binding Items}"
+                                Theme="{StaticResource ButtonTabStrip}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+            </TabControl>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>

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

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

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

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

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

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

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

@@ -48,6 +48,7 @@
                     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,6 +1,4 @@
-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,6 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -10,9 +8,4 @@ public partial class TimePickerDemo : UserControl
     {
         InitializeComponent();
     }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }

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

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

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

@@ -20,7 +20,7 @@
         </StackPanel>
         <StackPanel Orientation="Horizontal">
             <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" />
-            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsChecked="True"/>
+            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsChecked="True" />
             <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsEnabled="False" />
             <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsEnabled="False" IsChecked="True" />
         </StackPanel>
@@ -64,7 +64,9 @@
         <StackPanel Orientation="Horizontal">
             <ToggleSwitch
                 HorizontalAlignment="Left"
-                Padding="8"
+                Padding="{StaticResource SemiThicknessTight}"
+                Width="{StaticResource SemiSpacingExtraLoose}"
+                Height="{StaticResource SemiSpacingExtraLoose}"
                 Theme="{DynamicResource ButtonToggleSwitch}"
                 Foreground="{DynamicResource ButtonDefaultTertiaryForeground}">
                 <ToggleSwitch.Content>
@@ -75,7 +77,9 @@
             </ToggleSwitch>
             <ToggleSwitch
                 HorizontalAlignment="Left"
-                Padding="8"
+                Padding="{StaticResource SemiThicknessTight}"
+                Width="{StaticResource SemiSpacingExtraLoose}"
+                Height="{StaticResource SemiSpacingExtraLoose}"
                 Theme="{DynamicResource ButtonToggleSwitch}"
                 Foreground="{DynamicResource ButtonDefaultTertiaryForeground}">
                 <ToggleSwitch.OnContent>

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,5 @@
 using System.Collections.ObjectModel;
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
 using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
@@ -23,35 +21,46 @@ public class TreeViewVm : ObservableObject
 
     public TreeViewVm()
     {
-        Items = new ObservableCollection<TreeViewItemVm>()
+        Items =
-        {
+        [
-            new TreeViewItemVm() {Name = "Item 1", Id = "1"},
+            new TreeViewItemVm { Name = "Item 1", Id = "1" },
-            new TreeViewItemVm() {Name = "Item 2", Id = "2"},
+            new TreeViewItemVm { Name = "Item 2", Id = "2" },
-            new TreeViewItemVm() {Name = "Item 3", Id = "3", Items = new ObservableCollection<TreeViewItemVm>()
+            new TreeViewItemVm
             {
-                new TreeViewItemVm() {Name = "Item 3.1", Id = "3.1"},
+                Name = "Item 3", Id = "3", Items =
-                new TreeViewItemVm() {Name = "Item 3.2", Id = "3.2"},
+                [
-                new TreeViewItemVm() {Name = "Item 3.3", Id = "3.3"},
+                    new TreeViewItemVm { Name = "Item 3.1", Id = "3.1" },
-            },
+                    new TreeViewItemVm { Name = "Item 3.2", Id = "3.2" },
-            },
+                    new TreeViewItemVm { Name = "Item 3.3", Id = "3.3" }
-        };
+                ],
+            }
 
-        MultipleLevelItems = new();
+        ];
-        for (int i = 1; i < 6; i++)
+
+        MultipleLevelItems = [];
+        for (var i = 1; i < 6; i++)
         {
-            FirstItem firstItem = new FirstItem { Id = i, Name = $"FirstItem {i}" };
+            var firstItem = new FirstItem
-            firstItem.SecondItems = new();
-            for (int j = 1; j < 6; j++)
             {
-                SecondItem secondItem = new SecondItem { Id = j, Name = $"SecondItem {j}" };
+                Id = i, Name = $"FirstItem {i}",
-                secondItem.ThirdItemItems = new();
+                SecondItems = []
-                for (int k = 1; k < 6; k++)
+            };
+            for (var j = 1; j < 6; j++)
+            {
+                var secondItem = new SecondItem
                 {
-                    ThirdItem thirdItem = new ThirdItem { Id = k, Name = $"ThirdItem {k}" };
+                    Id = j, Name = $"SecondItem {j}",
+                    ThirdItemItems = []
+                };
+                for (var k = 1; k < 6; k++)
+                {
+                    var thirdItem = new ThirdItem { Id = k, Name = $"ThirdItem {k}" };
                     secondItem.ThirdItemItems.Add(thirdItem);
                 }
+
                 firstItem.SecondItems.Add(secondItem);
             }
+
             MultipleLevelItems.Add(firstItem);
         }
     }
@@ -59,9 +68,9 @@ public class TreeViewVm : ObservableObject
 
 public partial class TreeViewItemVm : ObservableObject
 {
-    public ObservableCollection<TreeViewItemVm> Items { get; set; }
+    public ObservableCollection<TreeViewItemVm> Items { get; set; } = [];
-    public string Name { get; set; }
+    public string? Name { get; set; }
-    public string Id { get; set; }
+    public string? Id { get; set; }
 }
 
 public class ItemBase
@@ -69,18 +78,17 @@ public class ItemBase
     public int Id { get; set; }
     public string? Name { get; set; }
 }
+
 public class FirstItem : ItemBase
 {
     public ObservableCollection<SecondItem>? SecondItems { get; set; }
 }
+
 public class SecondItem : ItemBase
 {
     public ObservableCollection<ThirdItem>? ThirdItemItems { get; set; }
-
 }
+
 public class ThirdItem : ItemBase
 {
-}
+}
-
-
-

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

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

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

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