feat: enable vulkan in android demo.

.github/FUNDING.yml

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

.github/workflows/deploy.yml

@@ -2,22 +2,24 @@ name: Deploy to GitHub Pages
 
 env:
   PROJECT_PATH: demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj
-  OUTPUT_PATH: demo/Semi.Avalonia.Demo.Web/bin/Release/net10.0-browser/publish/wwwroot
+  OUTPUT_PATH: demo/Semi.Avalonia.Demo.Web/bin/Release/net8.0-browser/publish/wwwroot
 on:
-  workflow_dispatch:
+  push:
+    branches: [ "action/deploy" ]
+  pull_request:
+    branches: [ "action/deploy" ]
 
 jobs:
   deploy-to-github-pages:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4.1.1
 
-      - name: Setup dotnet
+      - name: Setup .NET 8
-        uses: actions/setup-dotnet@v5
+        uses: actions/setup-dotnet@v4
         with:
-          dotnet-version: |
+          dotnet-version: 8.0.x
-            10.0.x
 
       - name: Install wasm-tools
         run: dotnet workload install wasm-tools
@@ -25,6 +27,9 @@ jobs:
       - name: Publish .NET Project
         run: dotnet publish $PROJECT_PATH -c Release --nologo
 
+      - name: Change base-tag in index.html
+        run: sed -i 's/<base href="\/" \/>/<base href="\/Semi.Avalonia\/" \/>/g' $OUTPUT_PATH/index.html
+
       - name: copy index.html to 404.html
         run: cp $OUTPUT_PATH/index.html $OUTPUT_PATH/404.html
 
@@ -32,9 +37,8 @@ jobs:
         run: touch $OUTPUT_PATH/.nojekyll
 
       - name: Commit wwwroot to GitHub Pages
-        uses: JamesIves/github-pages-deploy-action@v4
+        uses: JamesIves/github-pages-deploy-action@v4.5.0
         with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          branch: gh-pages
+          BRANCH: gh-pages
-          folder: ${{ env.OUTPUT_PATH }}
+          FOLDER: ${{ env.OUTPUT_PATH }}
-          single-commit: true

.github/workflows/pack-nightly.yml

@@ -1,69 +0,0 @@
-name: Pack Nightly
-
-on:
-  workflow_dispatch:
-    inputs:
-      Version_Prefix:
-        description: 'Version Prefix'
-        required: true
-        default: '11.2.999'
-        type: string
-      Semi_Avalonia:
-        description: 'Pack Semi.Avalonia'
-        default: true
-        type: boolean
-      Semi_Avalonia_ColorPicker:
-        description: 'Pack Semi.Avalonia.ColorPicker'
-        default: true
-        type: boolean
-      Semi_Avalonia_DataGrid:
-        description: 'Pack Semi.Avalonia.DataGrid'
-        default: false
-        type: boolean
-      Semi_Avalonia_TreeDataGrid:
-        description: 'Pack Semi.Avalonia.TreeDataGrid'
-        default: false
-        type: boolean
-
-jobs:
-  Pack_Nightly:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v6
-
-      - name: Get Version
-        run: |
-          VERSION_TIMESTAMP=$(date +'%Y%m%d%H%M%S')
-          VERSION="${{ inputs.Version_Prefix }}-nightly-${VERSION_TIMESTAMP}"
-          echo "VERSION=$VERSION" >> $GITHUB_ENV
-
-      - name: Pack Semi.Avalonia
-        if: ${{ inputs.Semi_Avalonia }}
-        run: dotnet pack src/Semi.Avalonia -o nugets /p:Version=${{ env.VERSION }}
-
-      - name: Pack Semi.Avalonia.ColorPicker
-        if: ${{ inputs.Semi_Avalonia_ColorPicker }}
-        run: dotnet pack src/Semi.Avalonia.ColorPicker -o nugets /p:Version=${{ env.VERSION }}
-
-      - name: Pack Semi.Avalonia.DataGrid
-        if: ${{ inputs.Semi_Avalonia_DataGrid }}
-        run: dotnet pack src/Semi.Avalonia.DataGrid -o nugets /p:Version=${{ env.VERSION }}
-
-      - name: Pack Semi.Avalonia.TreeDataGrid
-        if: ${{ inputs.Semi_Avalonia_TreeDataGrid }}
-        run: dotnet pack src/Semi.Avalonia.TreeDataGrid -o nugets /p:Version=${{ env.VERSION }}
-
-      - name: Add NuGet Source
-        run: dotnet nuget add source ${{ secrets.IRIHI_NUGET_NIGHTLY_FEED }} -n irihi.tech -u ${{ secrets.IRIHI_NUGET_USERNAME }} -p ${{ secrets.IRIHI_NUGET_PASSWORD }} --store-password-in-clear-text
-
-      - name: Publish Nightly Package
-        run: dotnet nuget push "nugets/*.nupkg" --api-key ${{ secrets.IRIHI_NUGET_API_KEY }} --source irihi.tech --skip-duplicate
-
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v7
-        with:
-          name: nugets
-          path: nugets
-        if: always()

.github/workflows/pack.yml

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

.github/workflows/publish.yml

@@ -1,225 +0,0 @@
-name: Publish Demo
-
-on:
-  workflow_dispatch:
-    inputs:
-      win-x64:
-        description: 'Windows x64'
-        default: false
-        type: boolean
-      win-x64-aot:
-        description: 'Windows x64 AOT'
-        default: false
-        type: boolean
-      linux-x64:
-        description: 'Linux x64'
-        default: false
-        type: boolean
-      linux-x64-aot:
-        description: 'Linux x64 AOT'
-        default: false
-        type: boolean
-      drm-linux-x64:
-        description: 'DRM Linux x64'
-        default: false
-        type: boolean
-      drm-linux-x64-aot:
-        description: 'DRM Linux x64 AOT'
-        default: false
-        type: boolean
-      osx-arm64:
-        description: 'macOS arm64'
-        default: false
-        type: boolean
-      osx-arm64-aot:
-        description: 'macOS arm64 AOT'
-        default: false
-        type: boolean
-      android-arm64:
-        description: 'Android arm64'
-        default: false
-        type: boolean
-  workflow_call:
-    inputs:
-      win-x64:
-        type: boolean
-        default: true
-      win-x64-aot:
-        type: boolean
-        default: true
-      linux-x64:
-        type: boolean
-        default: true
-      linux-x64-aot:
-        type: boolean
-        default: true
-      drm-linux-x64:
-        type: boolean
-        default: true
-      drm-linux-x64-aot:
-        type: boolean
-        default: true
-      osx-arm64:
-        type: boolean
-        default: true
-      osx-arm64-aot:
-        type: boolean
-        default: true
-      android-arm64:
-        type: boolean
-        default: true
-
-jobs:
-  win-x64:
-    if: ${{inputs.win-x64}}
-    runs-on: windows-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v6
-      - name: Publish win-x64
-        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v7
-        with:
-          name: Semi.Avalonia.Demo.Desktop.win-x64
-          path: |
-            publish
-            !publish/*.pdb
-
-  win-x64-aot:
-    if: ${{inputs.win-x64-aot}}
-    runs-on: windows-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v6
-      - 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@v7
-        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@v6
-      - name: Publish linux-x64
-        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r linux-x64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v7
-        with:
-          name: Semi.Avalonia.Demo.Desktop.linux-x64
-          path: |
-            publish
-            !publish/*.pdb
-
-  linux-x64-aot:
-    if: ${{inputs.linux-x64-aot}}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v6
-      - 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@v7
-        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@v6
-      - 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@v7
-        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@v6
-      - 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@v7
-        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@v6
-      - 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@v7
-        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@v6
-      - 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@v7
-        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@v6
-      - name: Install Android workload
-        run: dotnet workload install android
-      - name: Restore Dependencies
-        run: dotnet restore demo/Semi.Avalonia.Demo.Android
-      - name: Publish Android
-        run: dotnet publish demo/Semi.Avalonia.Demo.Android -c Release -f net10.0-android --no-restore -o publish /p:RuntimeIdentifier=android-arm64
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v7
-        with:
-          name: android-arm64
-          path: publish/*Signed.apk

.github/workflows/release-tag.yml

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

LICENSE

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

Nuget.Config

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<configuration>
-    <packageSources>
-        <add key="avalonia-nightly" value="https://nuget-feed-nightly.avaloniaui.net/v3/index.json" />
-    </packageSources>
-</configuration>

README.md

@@ -2,7 +2,6 @@
 
 [![Semi Avalonia](https://img.shields.io/nuget/v/Semi.Avalonia.svg?color=red&style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia/)
 [![Semi Avalonia](https://img.shields.io/nuget/dt/Semi.Avalonia.svg?style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia/)
-[![GitCode](https://gitcode.com/IRIHI_Technology/Semi.Avalonia/star/badge.svg)](https://gitcode.com/IRIHI_Technology/Semi.Avalonia)
 
 [中文](./README_CN.md)
 
@@ -27,41 +26,31 @@ dotnet add package Semi.Avalonia
 Include Semi Design Styles in application:
 
 ```xaml
-<Application
-    ...
-    xmlns:semi="https://irihi.tech/semi">
 <Application.Styles>
-        <semi:SemiTheme Locale="zh-CN" />
+<!-- You can still reference in old way.  -->
+<!-- <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" /> -->
+    <semi:SemiTheme Locale="zh-cn" />
 </Application.Styles>
-</Application>
 ```
 
 That's all.
 
-ColorPicker, DataGrid, TreeDataGrid, Dock, Tabalonia and AvaloniaEdit are distributed in separated packages. Please install if you need.
+ColorPicker, DataGrid and TreeDataGrid are distributed in separated packages. Please install if you need.
 
 ```bash
 dotnet add package Semi.Avalonia.ColorPicker
 dotnet add package Semi.Avalonia.DataGrid
 dotnet add package Semi.Avalonia.TreeDataGrid
-dotnet add package Semi.Avalonia.Dock
-dotnet add package Semi.Avalonia.Tabalonia
-dotnet add package Semi.Avalonia.AvaloniaEdit
 ```
 
 ```xaml
 <Application.Styles>
-    <semi:ColorPickerSemiTheme />
+    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
-    <semi:DataGridSemiTheme />
+    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
-    <semi:TreeDataGridSemiTheme />
+    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
-    <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.
@@ -75,12 +64,11 @@ We offer limited free community support for Semi Avalonia and Ursa. If you have
 
 ## Version compatibility
 
-| Semi Avalonia Version | Avalonia Version |
+| Semi Design Version | Avalonia Version |
-|:----------------------|:-----------------|
+|:--------------------|:-----------------|
-| 11.3.7                | >=11.3.7         |
+| 11.1.0              | >=11.1.0         |
-| 11.2.1                | >=11.2.1         |
+| 11.0.7              | >=11.0.7         |
-| 11.2.0                | End of Life      |
+| 11.0.1              | <=11.0.6         |
-| 11.1.x                | End of Life      |
 
 ## Credits
 

README_CN.md

@@ -2,7 +2,6 @@
 
 [![Semi Avalonia](https://img.shields.io/nuget/v/Semi.Avalonia.svg?color=red&style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia/)
 [![Semi Avalonia](https://img.shields.io/nuget/dt/Semi.Avalonia.svg?style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia/)
-[![GitCode](https://gitcode.com/IRIHI_Technology/Semi.Avalonia/star/badge.svg)](https://gitcode.com/IRIHI_Technology/Semi.Avalonia)
 
 [English](./README.md)
 
@@ -27,44 +26,35 @@ dotnet add package Semi.Avalonia
 在样式中引用 Semi 主题：
 
 ```xaml
-<Application
-    ...
-    xmlns:semi="https://irihi.tech/semi">
 <Application.Styles>
-        <semi:SemiTheme Locale="zh-CN" />
+<!-- 您仍然可以使用旧版方式引用  -->
+<!-- <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" /> -->
+    <semi:SemiTheme Locale="zh-cn" />
 </Application.Styles>
-</Application>
 ```
 
 这样就可以了。
 
-ColorPicker、DataGrid、TreeDataGrid、Dock、Tabalonia 和 AvaloniaEdit 的样式单独分发，如果需要请安装并引用。
+ColorPicker、DataGrid 和 TreeDataGrid 的样式单独分发，如果需要请安装并引用。
 
 ```bash
 dotnet add package Semi.Avalonia.ColorPicker
 dotnet add package Semi.Avalonia.DataGrid
 dotnet add package Semi.Avalonia.TreeDataGrid
-dotnet add package Semi.Avalonia.Dock
-dotnet add package Semi.Avalonia.Tabalonia
-dotnet add package Semi.Avalonia.AvaloniaEdit
 ```
 
 ```xaml
 <Application.Styles>
-    <semi:ColorPickerSemiTheme />
+    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
-    <semi:DataGridSemiTheme />
+    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
-    <semi:TreeDataGridSemiTheme />
+    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
-    <semi:DockSemiTheme />
-    <semi:TabaloniaSemiTheme />
-    <semi:AvaloniaEditSemiTheme />
 </Application.Styles>
 ```
 
-注意：Dock、Tabalonia 和 AvaloniaEdit 是通过 NuGet 免费分发的，但不是开源的。请阅读许可协议并同意后继续使用这些包。如果您需要源代码，请通过电子邮件联系我们：[contact@irihi.tech](contact@irihi.tech)
-
 ## 示例
 
 您可以从 Semi Avalonia 的 release 页下载并试用 Semi Avalonia 的展示应用。
+
 <https://github.com/irihitech/Semi.Avalonia/releases>
 
 ## 社区支持
@@ -73,14 +63,14 @@ dotnet add package Semi.Avalonia.AvaloniaEdit
 
 ![FeiShu](./docs/community-support.png)
 
+
 ## 版本兼容性
 
-| Semi Avalonia Version | Avalonia Version |
+| Semi Design Version | Avalonia Version |
-|:----------------------|:-----------------|
+|:--------------------|:-----------------|
-| 11.3.7                | >=11.3.7         |
+| 11.1.0              | >=11.1.0         |
-| 11.2.1                | >=11.2.1         |
+| 11.0.7              | >=11.0.7         |
-| 11.2.0                | End of Life      |
+| 11.0.1              | <=11.0.6         |
-| 11.1.x                | End of Life      |
 
 ## 致谢
 

Semi.Avalonia.sln

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

Semi.Avalonia.slnx

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

demo/Directory.Build.props

@@ -0,0 +1,6 @@
+<Project>
+  <PropertyGroup>
+    <Nullable>enable</Nullable>
+    <AvaloniaVersion>11.1.3</AvaloniaVersion>
+  </PropertyGroup>
+</Project>

demo/Directory.Packages.props

@@ -1,26 +0,0 @@
-<Project>
-    <PropertyGroup>
-        <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
-        <AvaloniaVersion>12.0.0</AvaloniaVersion>
-        <DataGridVersion>12.0.0</DataGridVersion>
-        <SkiaSharpVersion>3.119.3-preview.1.1</SkiaSharpVersion>
-    </PropertyGroup>
-    <ItemGroup>
-        <PackageVersion Include="Avalonia" Version="$(AvaloniaVersion)"/>
-        <PackageVersion Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
-        <PackageVersion Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)"/>
-        <PackageVersion Include="Avalonia.iOS" Version="$(AvaloniaVersion)" />
-        <PackageVersion Include="Avalonia.Browser" Version="$(AvaloniaVersion)" />
-        <PackageVersion Include="Avalonia.Android" Version="$(AvaloniaVersion)" />
-        <PackageVersion Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
-        <PackageVersion Include="Avalonia.Controls.DataGrid" Version="$(DataGridVersion)"/>
-        <PackageVersion Include="AvaloniaUI.DiagnosticsSupport" Version="2.2.0-beta3"/>
-
-        <PackageVersion Include="SkiaSharp" Version="$(SkiaSharpVersion)"/>
-        <PackageVersion Include="SkiaSharp.NativeAssets.WebAssembly" Version="$(SkiaSharpVersion)"/>
-
-        <PackageVersion Include="Xamarin.AndroidX.Core.SplashScreen" Version="1.2.0.2"/>
-
-        <PackageVersion Include="CommunityToolkit.Mvvm" Version="8.4.2"/>
-    </ItemGroup>
-</Project>

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

@@ -1,20 +0,0 @@
-using Android.App;
-using Android.Runtime;
-using Avalonia;
-using Avalonia.Android;
-
-namespace Semi.Avalonia.Demo.Android;
-
-[Application]
-public class Application : AvaloniaAndroidApplication<App>
-{
-    protected Application(nint javaReference, JniHandleOwnership transfer) : base(javaReference, transfer)
-    {
-    }
-
-    protected override AppBuilder CustomizeAppBuilder(AppBuilder builder)
-    {
-        return base.CustomizeAppBuilder(builder)
-            .WithSourceHanSansCNFont();
-    }
-}

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

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

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

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

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

@@ -1,8 +1,8 @@
 <Project Sdk="Microsoft.NET.Sdk">
     <PropertyGroup>
         <OutputType>Exe</OutputType>
-        <TargetFramework>net10.0-android</TargetFramework>
+        <TargetFramework>net8.0-android</TargetFramework>
-        <SupportedOSPlatformVersion>23</SupportedOSPlatformVersion>
+        <SupportedOSPlatformVersion>21</SupportedOSPlatformVersion>
         <Nullable>enable</Nullable>
         <ApplicationId>com.irihitech.Semi.Avalonia</ApplicationId>
         <ApplicationVersion>1</ApplicationVersion>
@@ -13,20 +13,15 @@
         <RootNamespace>Semi.Avalonia.Demo.Android</RootNamespace>
     </PropertyGroup>
 
-    <!-- Use CoreCLR on Android -->
-    <PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">
-        <UseMonoRuntime>false</UseMonoRuntime>
-        <PublishReadyToRun>true</PublishReadyToRun>
-    </PropertyGroup>
-
     <ItemGroup>
-        <AndroidResource Include="Icon.png" Link="Resources\drawable\Icon.png"/>
+        <AndroidResource Include="Icon.png">
-        <AvaloniaResource Include="..\Fonts\*" Link="Assets\Fonts\%(Filename)%(Extension)" />
+            <Link>Resources\drawable\Icon.png</Link>
+        </AndroidResource>
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Android"/>
+        <PackageReference Include="Avalonia.Android" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="Xamarin.AndroidX.Core.SplashScreen"/>
+        <PackageReference Include="Xamarin.AndroidX.Core.SplashScreen" Version="1.0.1.1"/>
     </ItemGroup>
 
     <ItemGroup>

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

@@ -1,11 +1,13 @@
-using System;
+using Avalonia;
-using Avalonia;
 using Avalonia.Dialogs;
 using Avalonia.Media;
+using System;
+using System.Linq;
+using System.Threading;
 
 namespace Semi.Avalonia.Demo.Desktop;
 
-sealed class Program
+class Program
 {
     // Initialization code. Don't use any Avalonia, third-party APIs or any
     // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
@@ -14,13 +16,13 @@ sealed class Program
     public static void Main(string[] args) => BuildAvaloniaApp()
         .With(new FontManagerOptions
         {
-            FontFallbacks =
+            FontFallbacks = new[]
-            [
+            {
                 new FontFallback
                 {
                     FontFamily = new FontFamily("Microsoft YaHei")
                 }
-            ]
+            }
         })
         .StartWithClassicDesktopLifetime(args);
 

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

@@ -4,9 +4,11 @@
         <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>-->
+        <!--
+        <PublishAot>true</PublishAot>
+        <IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>
+        -->
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
@@ -23,7 +25,9 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Desktop"/>
+        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
+        <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
     </ItemGroup>
 
     <ItemGroup>

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

@@ -7,7 +7,7 @@ using Avalonia.Dialogs;
 
 namespace Semi.Avalonia.Demo.Drm;
 
-sealed class Program
+class Program
 {
     // Initialization code. Don't use any Avalonia, third-party APIs or any
     // SynchronizationContext-reliant code before AppMain is called: things aren't initialized

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

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

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

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

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

@@ -4,9 +4,11 @@
         <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>-->
+        <!--
+        <PublishAot>true</PublishAot>
+        <IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>
+        -->
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
@@ -23,8 +25,10 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Desktop"/>
+        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.LinuxFramebuffer"/>
+        <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)" />
     </ItemGroup>
 
     <ItemGroup>

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

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

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

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

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

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

demo/Semi.Avalonia.Demo/App.axaml

@@ -1,52 +1,13 @@
 <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"
-    xmlns:semi="https://irihi.tech/semi"
+    xmlns:semi="https://irihi.tech/semi">
-    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
-    x:DataType="vm:ApplicationViewModel">
     <Application.Styles>
-        <semi:SemiTheme Locale="zh-CN" />
+        <!-- You can still reference in old way.  -->
-        <semi:SemiPopupAnimations />
+        <!-- <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" /> -->
-        <semi:ColorPickerSemiTheme />
+        <semi:SemiTheme Locale="zh-cn" />
-        <semi:DataGridSemiTheme />
+        <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
-        <!-- <semi:TreeDataGridSemiTheme /> -->
+        <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
     </Application.Styles>
-    <Application.Resources>
-        <ResourceDictionary>
-            <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude Source="Themes/_index.axaml" />
-            </ResourceDictionary.MergedDictionaries>
-        </ResourceDictionary>
-    </Application.Resources>
-    <NativeMenu.Menu>
-        <NativeMenu>
-            <NativeMenuItem
-                Header="About Us"
-                Command="{Binding JumpToCommand}"
-                CommandParameter="{Binding $self.Header}" />
-        </NativeMenu>
-    </NativeMenu.Menu>
-    <TrayIcon.Icons>
-        <TrayIcons>
-            <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="About Us"
-                            Command="{Binding JumpToCommand}"
-                            CommandParameter="{Binding $self.Header}" />
-                        <NativeMenuItem
-                            Header="Exit"
-                            Command="{Binding ExitCommand}" />
-                    </NativeMenu>
-                </TrayIcon.Menu>
-            </TrayIcon>
-        </TrayIcons>
-    </TrayIcon.Icons>
 </Application>

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

@@ -2,7 +2,6 @@ using Avalonia;
 using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Data.Core.Plugins;
 using Avalonia.Markup.Xaml;
-using Semi.Avalonia.Demo.ViewModels;
 using Semi.Avalonia.Demo.Views;
 
 namespace Semi.Avalonia.Demo;
@@ -12,10 +11,6 @@ public partial class App : Application
     public override void Initialize()
     {
         AvaloniaXamlLoader.Load(this);
-#if DEBUG
-        this.AttachDeveloperTools();
-#endif
-        this.DataContext = new ApplicationViewModel();
     }
 
     public override void OnFrameworkInitializationCompleted()
@@ -25,7 +20,7 @@ public partial class App : Application
             case IClassicDesktopStyleApplicationLifetime desktop:
                 // Line below is needed to remove Avalonia data validation.
                 // Without this line you will get duplicate validations from both Avalonia and CT
-                // BindingPlugins.DataValidators.RemoveAt(0);
+                BindingPlugins.DataValidators.RemoveAt(0);
                 desktop.MainWindow = new MainWindow();
                 break;
             case ISingleViewApplicationLifetime singleView:
@@ -33,7 +28,6 @@ public partial class App : Application
                 break;
         }
 
-        this.RegisterFollowSystemTheme();
         base.OnFrameworkInitializationCompleted();
     }
 }

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

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

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

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

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

@@ -1,11 +1,10 @@
 using System.Globalization;
-using System.Threading.Tasks;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
 using Avalonia.Input.Platform;
 using Avalonia.Media;
-using Semi.Avalonia.Demo.Converters;
+using Avalonia.Media.Immutable;
 
 namespace Semi.Avalonia.Demo.Controls;
 
@@ -13,21 +12,19 @@ public class ColorDetailControl : TemplatedControl
 {
     public const string KEY_ResourceKey = "ResourceKey";
     public const string KEY_Hex = "Hex";
-    public const string KEY_Hex2 = "Hex2";
     public const string KEY_Opacity = "Opacity";
     public const string KEY_ColorResourceKey = "ColorResourceKey";
     
-    public static readonly StyledProperty<string?> ResourceKeyProperty =
+    public static readonly StyledProperty<string?> ResourceKeyProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
-        AvaloniaProperty.Register<ColorDetailControl, string?>(nameof(ResourceKey));
+        nameof(ResourceKey));
-
     public string? ResourceKey
     {
         get => GetValue(ResourceKeyProperty);
         set => SetValue(ResourceKeyProperty, value);
     }
 
-    public static readonly StyledProperty<string?> ResourceNameProperty =
+    public static readonly StyledProperty<string?> ResourceNameProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
-        AvaloniaProperty.Register<ColorDetailControl, string?>(nameof(ResourceName));
+        nameof(ResourceName));
 
     public string? ResourceName
     {
@@ -35,8 +32,8 @@ public class ColorDetailControl : TemplatedControl
         set => SetValue(ResourceNameProperty, value);
     }
 
-    public static readonly StyledProperty<string?> ColorResourceKeyProperty =
+    public static readonly StyledProperty<string?> ColorResourceKeyProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
-        AvaloniaProperty.Register<ColorDetailControl, string?>(nameof(ColorResourceKey));
+        nameof(ColorResourceKey));
 
     public string? ColorResourceKey
     {
@@ -44,39 +41,27 @@ public class ColorDetailControl : TemplatedControl
         set => SetValue(ColorResourceKeyProperty, value);
     }
 
-    public static readonly DirectProperty<ColorDetailControl, string?> HexProperty =
+    public static readonly DirectProperty<ColorDetailControl, string?> HexProperty = AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(
-        AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(Hex), o => o.Hex);
+        nameof(Hex), o => o.Hex);
-
     private string? _hex;
-
     public string? Hex
     {
         get => _hex;
         private set => SetAndRaise(HexProperty, ref _hex, value);
     }
     
-    private string? _hex2;
+    public static readonly DirectProperty<ColorDetailControl, string?> OpacityNumberProperty = AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(
-
+        nameof(OpacityNumber), o => o.OpacityNumber);
-    public static readonly DirectProperty<ColorDetailControl, string?> Hex2Property =
-        AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(Hex2), o => o.Hex2);
-
-    public string? Hex2
-    {
-        get => _hex2;
-        set => SetAndRaise(Hex2Property, ref _hex2, value);
-    }
-
-    public static readonly DirectProperty<ColorDetailControl, string?> OpacityNumberProperty =
-        AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(OpacityNumber), o => o.OpacityNumber);
-
     private string? _opacityNumber;
-
     public string? OpacityNumber
     {
         get => _opacityNumber;
         private set => SetAndRaise(OpacityNumberProperty, ref _opacityNumber, value);
     }
     
+    
+    
+    
     static ColorDetailControl()
     {
         BackgroundProperty.Changed.AddClassHandler<ColorDetailControl>((o, e) => o.OnBackgroundChanged(e));
@@ -85,36 +70,30 @@ public class ColorDetailControl : TemplatedControl
     private void OnBackgroundChanged(AvaloniaPropertyChangedEventArgs args)
     {
         var color = args.GetNewValue<IBrush>();
-        if (color is ISolidColorBrush brush)
+        if (color is ISolidColorBrush b)
         {
-            var hex1 = ColorConverter.ToHex.Convert(brush.Color, typeof(string), false, CultureInfo.InvariantCulture);
+            Hex = b.Color.ToString().ToUpperInvariant();
-            var hex2 = ColorConverter.ToHex.Convert(brush.Color, typeof(string), true, CultureInfo.InvariantCulture);
+            OpacityNumber = b.Opacity.ToString(CultureInfo.InvariantCulture);
-            Hex = hex1 as string;
-            Hex2 = hex2 as string;
-            OpacityNumber = brush.Opacity.ToString(CultureInfo.InvariantCulture);
-        }
-        else
-        {
-            Hex = null;
-            Hex2 = null;
-            OpacityNumber = null;
         }
     }
 
-    public async Task Copy(object o)
+    public async void Copy(object o)
     {
         string? text = null;
         if (o is string s)
         {
-            text = s switch
+            switch (s)
             {
-                KEY_ResourceKey => ResourceKey,
+                case KEY_ResourceKey: text = ResourceKey;
-                KEY_Hex => Hex,
+                    break;
-                KEY_Hex2 => Hex2,
+                case KEY_Hex: text = Hex;
-                KEY_Opacity => OpacityNumber,
+                    break;
-                KEY_ColorResourceKey => ColorResourceKey,
+                case KEY_Opacity: text = OpacityNumber;
-                _ => string.Empty
+                    break;
-            };
+                case KEY_ColorResourceKey: text = ColorResourceKey;
+                    break;
+                default: text = string.Empty; break;
+            }
         }
 
         var toplevel = TopLevel.GetTopLevel(this);
@@ -122,5 +101,7 @@ public class ColorDetailControl : TemplatedControl
         {
             await c.SetTextAsync(text??string.Empty);
         }
+
     }
+    
 }

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

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

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

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

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

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

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

@@ -6,36 +6,31 @@ namespace Semi.Avalonia.Demo.Controls;
 
 public class FunctionalColorGroupControl: TemplatedControl
 {
-    public static readonly StyledProperty<string?> TitleProperty =
+    public static readonly StyledProperty<string?> TitleProperty = AvaloniaProperty.Register<FunctionalColorGroupControl, string?>(
-        AvaloniaProperty.Register<FunctionalColorGroupControl, string?>(nameof(Title));
+        nameof(Title));
-
     public string? Title
     {
         get => GetValue(TitleProperty);
         set => SetValue(TitleProperty, value);
     }
     
-    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> LightColorsProperty =
+    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> LightColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(
-        AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(nameof(LightColors),
+        nameof(LightColors), o => o.LightColors, (o, v) => o.LightColors = v);
-            o => o.LightColors, (o, v) => o.LightColors = v);
-
     private IEnumerable? _lightColors;
-
     public IEnumerable? LightColors
     {
         get => _lightColors;
         set => SetAndRaise(LightColorsProperty, ref _lightColors, value);
     }
     
-    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> DarkColorsProperty =
+    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> DarkColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(
-        AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(nameof(DarkColors),
+        nameof(DarkColors), o => o.DarkColors, (o, v) => o.DarkColors = v);
-            o => o.DarkColors, (o, v) => o.DarkColors = v);
-
     private IEnumerable? _darkColors;
-
     public IEnumerable? DarkColors
     {
         get => _darkColors;
         set => SetAndRaise(DarkColorsProperty, ref _darkColors, value);
     }
+    
+    
 }

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

@@ -1,41 +0,0 @@
-using System.Collections;
-using Avalonia;
-using Avalonia.Controls.Primitives;
-
-namespace Semi.Avalonia.Demo.Controls;
-
-public class ShadowGroupControl : TemplatedControl
-{
-    public static readonly StyledProperty<string?> TitleProperty =
-        AvaloniaProperty.Register<ShadowGroupControl, string?>(nameof(Title));
-
-    public string? Title
-    {
-        get => GetValue(TitleProperty);
-        set => SetValue(TitleProperty, value);
-    }
-
-    private IEnumerable? _lightShadows;
-
-    public static readonly DirectProperty<ShadowGroupControl, IEnumerable?> LightShadowsProperty =
-        AvaloniaProperty.RegisterDirect<ShadowGroupControl, IEnumerable?>(nameof(LightShadows),
-            o => o.LightShadows, (o, v) => o.LightShadows = v);
-
-    public IEnumerable? LightShadows
-    {
-        get => _lightShadows;
-        set => SetAndRaise(LightShadowsProperty, ref _lightShadows, value);
-    }
-
-    private IEnumerable? _darkShadows;
-
-    public static readonly DirectProperty<ShadowGroupControl, IEnumerable?> DarkShadowsProperty =
-        AvaloniaProperty.RegisterDirect<ShadowGroupControl, IEnumerable?>(nameof(DarkShadows),
-            o => o.DarkShadows, (o, v) => o.DarkShadows = v);
-
-    public IEnumerable? DarkShadows
-    {
-        get => _darkShadows;
-        set => SetAndRaise(DarkShadowsProperty, ref _darkShadows, value);
-    }
-}

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,9 @@
+using System.Collections.ObjectModel;
+using Avalonia;
 using Avalonia.Controls;
-using Semi.Avalonia.Demo.ViewModels;
+using Avalonia.Markup.Xaml;
+using System.Collections.Generic;
+using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -11,3 +15,85 @@ public partial class AutoCompleteBoxDemo : UserControl
         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.cs

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

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

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

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

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

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

@@ -8,10 +8,6 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <StackPanel HorizontalAlignment="Left" Spacing="20">
-        <StackPanel Orientation="Horizontal">
-            <ToggleSwitch Name="showSpinCheck" IsChecked="True" Content="Show Button Spinner" />
-            <ToggleSwitch Name="allowSpinCheck" IsChecked="True" Content="Allow Spin" />
-        </StackPanel>
         <ButtonSpinner
             Height="30"
             AllowSpin="{Binding #allowSpinCheck.IsChecked}"
@@ -35,30 +31,5 @@
                 VerticalAlignment="Center"
                 Text="A.S.I.A" />
         </ButtonSpinner>
-        <ButtonSpinner
-            Height="30"
-            AllowSpin="{Binding #allowSpinCheck.IsChecked}"
-            BorderThickness="1"
-            ShowButtonSpinner="{Binding #showSpinCheck.IsChecked}"
-            Spin="OnSpin"
-            Theme="{StaticResource SplitButtonSpinner}">
-            <TextBlock
-                HorizontalAlignment="Center"
-                VerticalAlignment="Center"
-                Text="A.S.I.A" />
-        </ButtonSpinner>
-        <ButtonSpinner
-            Height="30"
-            AllowSpin="{Binding #allowSpinCheck.IsChecked}"
-            ButtonSpinnerLocation="Left"
-            BorderThickness="1"
-            ShowButtonSpinner="{Binding #showSpinCheck.IsChecked}"
-            Spin="OnSpin"
-            Theme="{StaticResource SplitButtonSpinner}">
-            <TextBlock
-                HorizontalAlignment="Center"
-                VerticalAlignment="Center"
-                Text="A.S.I.A" />
-        </ButtonSpinner>
     </StackPanel>
 </UserControl>

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

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

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

@@ -33,6 +33,6 @@
             Margin="0,0,0,8"
             CustomDateFormatString="ddd, MMM d"
             SelectedDateFormat="Custom" />
-        <CalendarDatePicker Margin="0,0,0,8" PlaceholderText="Placeholder" />
+        <CalendarDatePicker Margin="0,0,0,8" Watermark="Watermark" />
     </StackPanel>
 </UserControl>

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

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

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

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

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

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

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

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

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

@@ -1,69 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             x:Class="Semi.Avalonia.Demo.Pages.CarouselPageDemo">
-    <DockPanel>
-        <ScrollViewer DockPanel.Dock="Right" Width="220">
-            <StackPanel Margin="12" Spacing="8">
-                <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
-                           Foreground="{DynamicResource SystemControlHighlightAccentBrush}" />
-
-                <TextBlock Text="Navigation" FontWeight="SemiBold" FontSize="13" />
-                <StackPanel Spacing="6">
-                    <Button Content="Previous" Click="OnPrevious" HorizontalAlignment="Stretch" />
-                    <Button Content="Next" Click="OnNext" HorizontalAlignment="Stretch" />
-                </StackPanel>
-
-                <Separator />
-
-                <TextBlock Text="Status" FontWeight="SemiBold" FontSize="13" />
-                <TextBlock Name="StatusText" Text="Page 1 of 3" Opacity="0.7" TextWrapping="Wrap" />
-            </StackPanel>
-        </ScrollViewer>
-
-        <Border DockPanel.Dock="Right" Width="1"
-                Background="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" />
-
-        <Border Margin="12"
-                BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}"
-                BorderThickness="1" CornerRadius="6" ClipToBounds="True">
-            <Panel>
-                <CarouselPage Name="DemoCarousel"
-                              SelectionChanged="OnSelectionChanged">
-                    <ContentPage Header="Welcome">
-                        <StackPanel Margin="24" Spacing="12"
-                                    HorizontalAlignment="Center" VerticalAlignment="Center">
-                            <TextBlock Text="Welcome" FontSize="28" FontWeight="Bold"
-                                       HorizontalAlignment="Center" />
-                            <TextBlock Text="Swipe left or use the buttons to navigate."
-                                       TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="280" />
-                        </StackPanel>
-                    </ContentPage>
-                    <ContentPage Header="Explore">
-                        <StackPanel Margin="24" Spacing="12"
-                                    HorizontalAlignment="Center" VerticalAlignment="Center">
-                            <TextBlock Text="Explore" FontSize="28" FontWeight="Bold"
-                                       HorizontalAlignment="Center" />
-                            <TextBlock Text="CarouselPage supports scroll-based and transition-based navigation modes."
-                                       TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="280" />
-                        </StackPanel>
-                    </ContentPage>
-                    <ContentPage Header="Get Started">
-                        <StackPanel Margin="24" Spacing="12"
-                                    HorizontalAlignment="Center" VerticalAlignment="Center">
-                            <TextBlock Text="Get Started" FontSize="28" FontWeight="Bold"
-                                       HorizontalAlignment="Center" />
-                            <TextBlock Text="Use SelectedIndex to jump to any page, or assign a PageTransition for animated switching."
-                                       TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="280" />
-                        </StackPanel>
-                    </ContentPage>
-                </CarouselPage>
-                <PipsPager HorizontalAlignment="Center"
-                           VerticalAlignment="Bottom" Margin="0,0,0,20"
-                           NumberOfPages="3"
-                           SelectedPageIndex="{Binding #DemoCarousel.SelectedIndex}" />
-            </Panel>
-        </Border>
-
-
-    </DockPanel>
-</UserControl>

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

@@ -1,34 +0,0 @@
-using System.Collections;
-using Avalonia.Controls;
-using Avalonia.Interactivity;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class CarouselPageDemo : UserControl
-{
-    public CarouselPageDemo()
-    {
-        InitializeComponent();
-    }
-
-    private void OnPrevious(object? sender, RoutedEventArgs e)
-    {
-        if (DemoCarousel.SelectedIndex > 0)
-            DemoCarousel.SelectedIndex--;
-    }
-
-    private void OnNext(object? sender, RoutedEventArgs e)
-    {
-        var pageCount = (DemoCarousel.Pages as IList)?.Count ?? 0;
-        if (DemoCarousel.SelectedIndex < pageCount - 1)
-            DemoCarousel.SelectedIndex++;
-    }
-
-    private void OnSelectionChanged(object? sender, PageSelectionChangedEventArgs e)
-    {
-        if (StatusText == null)
-            return;
-        var pageCount = (DemoCarousel.Pages as IList)?.Count ?? 0;
-        StatusText.Text = $"Page {DemoCarousel.SelectedIndex + 1} of {pageCount}";
-    }
-}

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

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

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

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

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

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

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

@@ -4,15 +4,13 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
     d:DesignHeight="800"
     d:DesignWidth="800"
-    mc:Ignorable="d"
+    mc:Ignorable="d">
-    x:DataType="vm:ComboBoxDemoViewModel">
     <Design.DataContext>
-        <vm:ComboBoxDemoViewModel />
+        <pages:ComboBoxDemoViewModel />
     </Design.DataContext>
-    <ScrollViewer>
     <StackPanel Spacing="20">
         <StackPanel.Styles>
             <Style Selector="ComboBox">
@@ -29,15 +27,6 @@
         <ComboBox Classes="Small" />
         <ComboBox Classes="Bordered" />
         <ComboBox Classes="Bordered" IsEnabled="False" />
-            <ComboBox>
-                <ComboBox.SelectionBoxItemTemplate>
-                    <DataTemplate DataType="x:String">
-                        <ContentControl BorderThickness="1"
-                                        BorderBrush="Gold"
-                                        Content="{Binding}" />
-                    </DataTemplate>
-                </ComboBox.SelectionBoxItemTemplate>
-            </ComboBox>
 
         <StackPanel Orientation="Horizontal">
             <ComboBox Width="100" Classes="Large" PlaceholderText="Large" />
@@ -50,8 +39,5 @@
             <ComboBox Width="100" Classes="Bordered" PlaceholderText="Bordered" />
             <ComboBox Width="100" Classes="Bordered" IsEnabled="False" />
         </StackPanel>
-            <ToggleSwitch Name="toggle" IsChecked="True" Content="IsEditable" />
-            <ComboBox IsEditable="{Binding #toggle.IsChecked}" />
     </StackPanel>
-    </ScrollViewer>
 </UserControl>

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

@@ -1,5 +1,6 @@
+using System.Collections.ObjectModel;
 using Avalonia.Controls;
-using Semi.Avalonia.Demo.ViewModels;
+using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -11,3 +12,8 @@ public partial class ComboBoxDemo : UserControl
         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/CommandBarDemo.axaml

@@ -1,94 +0,0 @@
-<UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.CommandBarDemo"
-    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:collections="clr-namespace:Avalonia.Collections;assembly=Avalonia.Base"
-    d:DesignHeight="600"
-    d:DesignWidth="800"
-    mc:Ignorable="d">
-    <UserControl.Resources>
-        <collections:AvaloniaList x:TypeArguments="CommandBarDefaultLabelPosition" x:Key="LabelPositionList">
-            <CommandBarDefaultLabelPosition>Bottom</CommandBarDefaultLabelPosition>
-            <CommandBarDefaultLabelPosition>Collapsed</CommandBarDefaultLabelPosition>
-            <CommandBarDefaultLabelPosition>Right</CommandBarDefaultLabelPosition>
-        </collections:AvaloniaList>
-        <collections:AvaloniaList x:TypeArguments="CommandBarOverflowButtonVisibility" x:Key="VisibilityList">
-            <CommandBarOverflowButtonVisibility>Auto</CommandBarOverflowButtonVisibility>
-            <CommandBarOverflowButtonVisibility>Collapsed</CommandBarOverflowButtonVisibility>
-            <CommandBarOverflowButtonVisibility>Visible</CommandBarOverflowButtonVisibility>
-        </collections:AvaloniaList>
-    </UserControl.Resources>
-    <ScrollViewer>
-        <StackPanel Spacing="16">
-            <GroupBox>
-                <GroupBox.Header>
-                    <Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto">
-
-                        <TextBlock Grid.Row="0" Grid.Column="0" Text="DefaultLabelPosition" VerticalAlignment="Center" />
-                        <ComboBox Grid.Row="0" Grid.Column="1"
-                                  Name="lc"
-                                  ItemsSource="{DynamicResource LabelPositionList}"
-                                  SelectedValue="{x:Static CommandBarDefaultLabelPosition.Bottom}" />
-
-                        <TextBlock Grid.Row="1" Grid.Column="0" Text="OverflowButtonVisibility" VerticalAlignment="Center" />
-                        <ComboBox Grid.Row="1" Grid.Column="1"
-                                  Name="btvb"
-                                  ItemsSource="{DynamicResource VisibilityList}"
-                                  SelectedValue="{x:Static CommandBarOverflowButtonVisibility.Auto}" />
-
-                        <TextBlock Grid.Row="2" Grid.Column="0" Text="IsDynamicOverflowEnabled" VerticalAlignment="Center" />
-                        <ToggleSwitch Grid.Row="2" Grid.Column="1" Name="idfe" IsChecked="True" />
-
-                        <TextBlock Grid.Row="3" Grid.Column="0" Text="IsOpen" VerticalAlignment="Center" />
-                        <ToggleSwitch Grid.Row="3" Grid.Column="1" Name="isop" />
-
-                        <TextBlock Grid.Row="4" Grid.Column="0" Text="IsSticky" VerticalAlignment="Center" />
-                        <ToggleSwitch Grid.Row="4" Grid.Column="1" Name="isst" />
-
-                        <TextBlock Grid.Row="5" Grid.Column="0" Text="Width" VerticalAlignment="Center" />
-                        <Slider Grid.Row="5" Grid.Column="1" Name="ws" HorizontalAlignment="Left" Width="500" Minimum="0" Maximum="1000" Value="200" />
-                    </Grid>
-                </GroupBox.Header>
-                <CommandBar
-                    DefaultLabelPosition="{Binding #lc.SelectedValue}"
-                    OverflowButtonVisibility="{Binding #btvb.SelectedValue}"
-                    IsDynamicOverflowEnabled="{Binding #idfe.IsChecked}"
-                    IsOpen="{Binding #isop.IsChecked}"
-                    IsSticky="{Binding #isst.IsChecked}"
-                    Width="{Binding #ws.Value}">
-                    <CommandBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
-                    <CommandBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
-                    <CommandBarSeparator />
-                    <CommandBarToggleButton Label="Bold" Icon="{DynamicResource SemiIconBold}" />
-                    <CommandBarToggleButton Label="Italic" Icon="{DynamicResource SemiIconItalic}" />
-                    <CommandBarToggleButton IsChecked="True" IsEnabled="False" Label="Underline" Icon="{DynamicResource SemiIconUnderline}" />
-                    <CommandBarSeparator />
-                    <CommandBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
-                    <CommandBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
-                    <CommandBarButton Label="Print" Icon="{DynamicResource SemiIconPrint}" />
-                    <CommandBarSeparator />
-                    <CommandBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
-                </CommandBar>
-            </GroupBox>
-
-            <!--  With secondary commands (overflow)  -->
-            <GroupBox>
-                <GroupBox.Header>
-                    <TextBlock Text="CommandBar — With Secondary Commands (overflow)" />
-                </GroupBox.Header>
-                <CommandBar>
-                    <CommandBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
-                    <CommandBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
-                    <CommandBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
-                    <CommandBar.SecondaryCommands>
-                        <CommandBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
-                        <CommandBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
-                    </CommandBar.SecondaryCommands>
-                </CommandBar>
-            </GroupBox>
-
-        </StackPanel>
-    </ScrollViewer>
-</UserControl>

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

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

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

@@ -1,54 +0,0 @@
-<UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.ContentPageDemo"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    d:DesignHeight="600"
-    d:DesignWidth="800"
-    mc:Ignorable="d">
-    <DockPanel>
-        <ScrollViewer DockPanel.Dock="Right" Width="260">
-            <StackPanel Margin="12" Spacing="8">
-                <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
-                           Foreground="{DynamicResource SemiColorText0}" />
-                <TextBlock Text="ContentPage is the fundamental page type. It hosts a single piece of content and integrates with NavigationPage, TabbedPage, and CarouselPage. The Header property sets the navigation bar title."
-                           FontSize="12" Opacity="0.7" TextWrapping="Wrap" />
-
-                <Separator />
-
-                <TextBlock Text="Navigation" FontWeight="SemiBold" />
-                <Button Content="Push Page" HorizontalAlignment="Stretch" Click="OnPush" />
-                <Button Content="Pop Page" HorizontalAlignment="Stretch" Click="OnPop" />
-                <Button Content="Pop to Root" HorizontalAlignment="Stretch" Click="OnPopToRoot" />
-
-                <Separator />
-
-                <TextBlock Text="Key Properties" FontWeight="SemiBold" />
-                <TextBlock Text="• Header: nav bar title (string or Control)" FontSize="12" Opacity="0.8" TextWrapping="Wrap" />
-                <TextBlock Text="• Content: any Avalonia control" FontSize="12" Opacity="0.8" TextWrapping="Wrap" />
-                <TextBlock Text="• Background: page background brush" FontSize="12" Opacity="0.8" TextWrapping="Wrap" />
-                <TextBlock Text="• HorizontalContentAlignment" FontSize="12" Opacity="0.8" />
-                <TextBlock Text="• VerticalContentAlignment" FontSize="12" Opacity="0.8" />
-                <TextBlock Text="• AutomaticallyApplySafeAreaPadding" FontSize="12" Opacity="0.8" />
-
-                <Separator />
-
-                <TextBlock Name="StatusText"
-                           Text="Depth: 1 | Current: Root Page"
-                           FontSize="11"
-                           Opacity="0.7" />
-            </StackPanel>
-        </ScrollViewer>
-
-        <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
-
-        <Border Margin="12"
-                BorderBrush="{DynamicResource SemiColorBorder}"
-                BorderThickness="1"
-                CornerRadius="6"
-                ClipToBounds="True">
-            <NavigationPage Name="DemoNav" />
-        </Border>
-    </DockPanel>
-</UserControl>

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

@@ -1,93 +0,0 @@
-using Avalonia.Controls;
-using Avalonia.Interactivity;
-using Avalonia.Media;
-using Avalonia.Layout;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class ContentPageDemo : UserControl
-{
-    private static readonly Color[] PageColors =
-    [
-        Color.FromRgb(0xE3, 0xF2, 0xFD), // blue
-        Color.FromRgb(0xF3, 0xE5, 0xF5), // purple
-        Color.FromRgb(0xE8, 0xF5, 0xE9), // green
-        Color.FromRgb(0xFF, 0xF8, 0xE1), // amber
-        Color.FromRgb(0xFB, 0xE9, 0xE7), // deep orange
-    ];
-
-    private int _pageCount;
-
-    public ContentPageDemo()
-    {
-        InitializeComponent();
-        Loaded += OnLoaded;
-    }
-
-    private async void OnLoaded(object? sender, RoutedEventArgs e)
-    {
-        await DemoNav.PushAsync(MakePage("Root Page", "ContentPage inside a NavigationPage.\nUse the options to navigate."));
-        UpdateStatus();
-    }
-
-    private async void OnPush(object? sender, RoutedEventArgs e)
-    {
-        _pageCount++;
-        await DemoNav.PushAsync(MakePage($"Page {_pageCount}", $"ContentPage #{_pageCount}.\nNavigate back using the back button."));
-        UpdateStatus();
-    }
-
-    private async void OnPop(object? sender, RoutedEventArgs e)
-    {
-        await DemoNav.PopAsync();
-        UpdateStatus();
-    }
-
-    private async void OnPopToRoot(object? sender, RoutedEventArgs e)
-    {
-        await DemoNav.PopToRootAsync();
-        _pageCount = 0;
-        UpdateStatus();
-    }
-
-    private void UpdateStatus()
-    {
-        StatusText.Text = $"Depth: {DemoNav.StackDepth} | Current: {DemoNav.CurrentPage?.Header}";
-    }
-
-    private ContentPage MakePage(string header, string body) =>
-        new ContentPage
-        {
-            Header = header,
-            Background = new SolidColorBrush(PageColors[_pageCount % PageColors.Length]),
-            Content = new StackPanel
-            {
-                HorizontalAlignment = HorizontalAlignment.Center,
-                VerticalAlignment = VerticalAlignment.Center,
-                Spacing = 10,
-                Children =
-                {
-                    new TextBlock
-                    {
-                        Text = header,
-                        FontSize = 20,
-                        FontWeight = FontWeight.SemiBold,
-                        HorizontalAlignment = HorizontalAlignment.Center,
-                        Foreground = Brushes.Black,
-                    },
-                    new TextBlock
-                    {
-                        Text = body,
-                        FontSize = 13,
-                        Opacity = 0.7,
-                        TextWrapping = TextWrapping.Wrap,
-                        TextAlignment = TextAlignment.Center,
-                        MaxWidth = 260,
-                        Foreground = Brushes.Black,
-                    }
-                }
-            },
-            HorizontalContentAlignment = HorizontalAlignment.Stretch,
-            VerticalContentAlignment = VerticalAlignment.Stretch
-        };
-}

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

@@ -3,19 +3,20 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:Semi.Avalonia.Demo.Pages"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels;assembly=Semi.Avalonia.Demo"
     d:DesignHeight="450"
     d:DesignWidth="800"
+    x:CompileBindings="True"
     x:DataType="vm:DataGridDemoViewModel"
     mc:Ignorable="d">
     <TabControl>
         <TabItem Header="DataGrid">
            <Grid RowDefinitions="Auto, *">
                <StackPanel Grid.Row="0" Orientation="Horizontal">
-                    <ToggleSwitch Content="Enable" Name="enable" IsChecked="True" />
+                   <ToggleSwitch Content="Disable" Name="DisableToggle" />
-                    <ToggleSwitch Content="Inset Content" Name="inset" />
+                   <ToggleSwitch Content="ScrollViewerHide" Name="ScrollViewerHide" />
-                    <ToggleSwitch Content="ScrollBar Auto Hide" Name="autohide" />
                </StackPanel>
                <DataGrid Grid.Row="1"
                          Margin="8"
@@ -24,9 +25,8 @@
                          CanUserSortColumns="True"
                          HeadersVisibility="All"
                          IsReadOnly="True"
-                          Classes.InsetContent="{Binding #inset.IsChecked}"
+                         ScrollViewer.AllowAutoHide="{Binding #ScrollViewerHide.IsChecked}"
-                          ScrollViewer.AllowAutoHide="{Binding #autohide.IsChecked}"
+                         IsEnabled="{Binding #DisableToggle.IsChecked}"
-                          IsEnabled="{Binding #enable.IsChecked}"
                          ItemsSource="{Binding GridData1}">
                    <DataGrid.Columns>
                        <DataGridTextColumn
@@ -101,7 +101,7 @@
                 </DataGrid.Columns>
             </DataGrid>
         </TabItem>
-        <TabItem Name="EditableTab" Header="Editable">
+        <TabItem x:Name="EditableTab" Header="Editable">
             <Grid Margin="8" RowDefinitions="Auto,*,Auto">
                 <StackPanel
                     Grid.Row="0"
@@ -109,14 +109,14 @@
                     Spacing="4">
                     <TextBlock VerticalAlignment="Center" Text="FontSize:" />
                     <Slider
-                        Name="FontSizeSlider"
+                        x:Name="FontSizeSlider"
                         Width="100"
                         VerticalAlignment="Center"
                         Maximum="30"
                         Minimum="5"
                         Value="14" />
                     <CheckBox
-                        Name="IsThreeStateCheckBox"
+                        x:Name="IsThreeStateCheckBox"
                         Content="IsThreeState"
                         IsChecked="False" />
                 </StackPanel>

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

@@ -1,6 +1,18 @@
+using System;
+using System.Collections;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using System.Linq;
 using Avalonia;
+using Avalonia.Collections;
 using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Data;
+using Avalonia.Input;
+using Avalonia.Input.Raw;
 using Avalonia.Markup.Xaml;
+using Avalonia.Threading;
 using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;

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

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

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

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

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

@@ -1,77 +0,0 @@
-<UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.DrawerPageDemo"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    d:DesignHeight="700"
-    d:DesignWidth="800"
-    mc:Ignorable="d">
-    <DockPanel>
-        <ScrollViewer DockPanel.Dock="Right" Width="260">
-            <StackPanel Margin="12" Spacing="8">
-                <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
-                           Foreground="{DynamicResource SemiColorText0}" />
-
-                <Button Content="Toggle Drawer"
-                        HorizontalAlignment="Stretch"
-                        Click="OnToggleDrawer" />
-
-                <Separator />
-
-                <CheckBox Name="GestureCheck"
-                          Content="Gesture Enabled"
-                          IsChecked="True"
-                          IsCheckedChanged="OnGestureChanged" />
-                
-                <ComboBox SelectionChanged="OnLayoutChanged" >
-                    <ComboBoxItem Content="CompactOverlay" />
-                    <ComboBoxItem Content="CompactInline" />
-                    <ComboBoxItem Content="Split" />
-                    <ComboBoxItem Content="Overlay" />
-                </ComboBox>
-
-                <Separator />
-
-                <TextBlock Text="Status" FontWeight="SemiBold" FontSize="14" />
-                <TextBlock Name="StatusText"
-                           Text="Drawer: Closed"
-                           Opacity="0.7"
-                           TextWrapping="Wrap" />
-            </StackPanel>
-        </ScrollViewer>
-
-        <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
-        
-        <DrawerPage Name="DemoDrawer"
-                    Margin="12"
-                    Header="First Look"
-                    DrawerLayoutBehavior="Overlay"
-                    CompactDrawerLength="80"
-                    DrawerLength="250">
-            <DrawerPage.DrawerHeader>
-                <TextBlock Text="Menu" Margin="16" FontSize="18" FontWeight="SemiBold" Foreground="{DynamicResource SemiColorPrimary}" />
-            </DrawerPage.DrawerHeader>
-            <DrawerPage.DrawerFooter>
-                <TextBlock HorizontalAlignment="Center" Text="Powered by IRIHI" Margin="8" />
-            </DrawerPage.DrawerFooter>
-            <DrawerPage.Drawer>
-                <ListBox Name="DrawerMenu" SelectionChanged="OnMenuSelectionChanged">
-                    <ListBoxItem Content="Home" />
-                    <ListBoxItem Content="Settings" />
-                    <ListBoxItem Content="Profile" />
-                    <ListBoxItem Content="About" />
-                </ListBox>
-            </DrawerPage.Drawer>
-            <DrawerPage.Content>
-                <ContentPage Header="Home">
-                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="8">
-                        <TextBlock Text="Home Page" FontSize="20" FontWeight="SemiBold" HorizontalAlignment="Center" />
-                        <TextBlock Text="Swipe from the left edge or use the hamburger button to open the drawer."
-                                   FontSize="13" Opacity="0.7" TextWrapping="Wrap" TextAlignment="Center" MaxWidth="300" />
-                    </StackPanel>
-                </ContentPage>
-            </DrawerPage.Content>
-        </DrawerPage>
-    </DockPanel>
-</UserControl>

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

@@ -1,90 +0,0 @@
-using System;
-using System.Linq;
-using Avalonia.Controls;
-using Avalonia.Input.GestureRecognizers;
-using Avalonia.Interactivity;
-using Avalonia.Layout;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class DrawerPageDemo : UserControl
-{
-    public DrawerPageDemo()
-    {
-        InitializeComponent();
-        EnableMouseSwipeGesture(DemoDrawer);
-    }
-
-    protected override void OnLoaded(RoutedEventArgs e)
-    {
-        base.OnLoaded(e);
-        DemoDrawer.Opened += OnDrawerStatusChanged;
-        DemoDrawer.Closed += OnDrawerStatusChanged;
-    }
-
-    protected override void OnUnloaded(RoutedEventArgs e)
-    {
-        base.OnUnloaded(e);
-        DemoDrawer.Opened -= OnDrawerStatusChanged;
-        DemoDrawer.Closed -= OnDrawerStatusChanged;
-    }
-
-    private void OnDrawerStatusChanged(object? sender, EventArgs e) => UpdateStatus();
-
-    private void OnToggleDrawer(object? sender, RoutedEventArgs e)
-    {
-        DemoDrawer.IsOpen = !DemoDrawer.IsOpen;
-    }
-
-    private void OnGestureChanged(object? sender, RoutedEventArgs e)
-    {
-        DemoDrawer.IsGestureEnabled = GestureCheck.IsChecked == true;
-    }
-
-    private void OnMenuSelectionChanged(object? sender, SelectionChangedEventArgs e)
-    {
-        if (DrawerMenu.SelectedItem is ListBoxItem item)
-        {
-            DemoDrawer.Content = new ContentPage
-            {
-                Header = item.Content?.ToString(),
-                Content = new TextBlock
-                {
-                    Text = $"{item.Content} page content",
-                    FontSize = 16,
-                    HorizontalAlignment = HorizontalAlignment.Center,
-                    VerticalAlignment = VerticalAlignment.Center,
-                },
-                HorizontalContentAlignment = HorizontalAlignment.Stretch,
-                VerticalContentAlignment = VerticalAlignment.Stretch
-            };
-            DemoDrawer.IsOpen = false;
-        }
-    }
-
-    private void UpdateStatus()
-    {
-        StatusText.Text = $"Drawer: {(DemoDrawer.IsOpen ? "Open" : "Closed")}";
-    }
-
-    private static void EnableMouseSwipeGesture(Control control)
-    {
-        var recognizer = control.GestureRecognizers
-            .OfType<SwipeGestureRecognizer>()
-            .FirstOrDefault();
-
-        recognizer?.IsMouseEnabled = true;
-    }
-
-    private void OnLayoutChanged(object? sender, SelectionChangedEventArgs e)
-    {
-        DemoDrawer.DrawerLayoutBehavior = (sender as ComboBox)?.SelectedIndex switch
-        {
-            0 => DrawerLayoutBehavior.CompactOverlay,
-            1 => DrawerLayoutBehavior.CompactInline,
-            2 => DrawerLayoutBehavior.Split,
-            3 => DrawerLayoutBehavior.Overlay,
-            _ => DrawerLayoutBehavior.CompactOverlay
-        };
-    }
-}

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

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

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

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

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

@@ -1,5 +1,5 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.GridSplitterDemo"
+    x:Class="Semi.Avalonia.Demo.Pages.GridSplitter"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
@@ -14,13 +14,13 @@
             RowDefinitions="*, Auto, *">
             <Border
                 HorizontalAlignment="Stretch"
-                Background="{DynamicResource SemiGrey0Color}"
+                Background="#FEFBCB"
                 CornerRadius="10" />
             <GridSplitter Grid.Row="1" ShowsPreview="True" />
             <Border
                 Grid.Row="2"
                 HorizontalAlignment="Stretch"
-                Background="{DynamicResource SemiGrey0Color}"
+                Background="#FEFBCB"
                 CornerRadius="10" />
         </Grid>
         <Grid
@@ -29,13 +29,13 @@
             ColumnDefinitions="*, Auto, *">
             <Border
                 HorizontalAlignment="Stretch"
-                Background="{DynamicResource SemiGrey0Color}"
+                Background="#FEFBCB"
                 CornerRadius="10" />
             <GridSplitter Grid.Column="1" ShowsPreview="True" />
             <Border
                 Grid.Column="2"
                 HorizontalAlignment="Stretch"
-                Background="{DynamicResource SemiGrey0Color}"
+                Background="#FEFBCB"
                 CornerRadius="10" />
         </Grid>
     </StackPanel>

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

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

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

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

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

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

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

@@ -1,327 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
-             xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
-             xmlns:cvt="clr-namespace:Semi.Avalonia.Demo.Converters"
-             xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
-             mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="1450"
-             x:DataType="vm:HighContrastDemoViewModel"
-             x:Class="Semi.Avalonia.Demo.Pages.HighContrastDemo">
-    <Design.DataContext>
-        <vm:HighContrastDemoViewModel />
-    </Design.DataContext>
-    <SplitView
-        Name="splitView"
-        CompactPaneLength="50"
-        DisplayMode="CompactInline"
-        IsPaneOpen="{Binding #toggle.IsChecked, Mode=TwoWay}"
-        OpenPaneLength="300"
-        PanePlacement="Right">
-        <SplitView.Pane>
-            <StackPanel>
-                <ToggleSwitch
-                    Name="toggle"
-                    HorizontalAlignment="Right"
-                    IsChecked="True"
-                    Theme="{DynamicResource IconBorderlessToggleSwitch}"
-                    Content="{StaticResource SemiIconSidebar}" />
-                <Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
-                    <Panel>
-                        <TextBlock
-                            IsVisible="{Binding SelectedColorResource, Converter={x:Static ObjectConverters.IsNull}}"
-                            Text="Click on Color to Check Details"
-                            TextWrapping="Wrap" />
-                        <controls:ColorDetailControl
-                            Background="{Binding SelectedColorResource.Brush}"
-                            IsVisible="{Binding SelectedColorResource, Converter={x:Static ObjectConverters.IsNotNull}}"
-                            ResourceKey="{Binding SelectedColorResource.ResourceKey}"
-                            ResourceName="{Binding SelectedColorResource.ResourceKey}" />
-                    </Panel>
-                </Border>
-            </StackPanel>
-        </SplitView.Pane>
-        <SplitView.Content>
-            <ScrollViewer>
-                <StackPanel Spacing="10">
-                    <TextBlock Text="Theme Preview" FontWeight="SemiBold" />
-                    <ListBox
-                        Theme="{StaticResource PureCardRadioGroupListBox}"
-                        ItemsSource="{Binding ThemeVariants}"
-                        SelectedItem="{Binding SelectedThemeVariant}">
-                        <ListBox.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <WrapPanel Orientation="Horizontal" />
-                            </ItemsPanelTemplate>
-                        </ListBox.ItemsPanel>
-                        <ListBox.ItemTemplate>
-                            <DataTemplate>
-                                <StackPanel HorizontalAlignment="Left" Spacing="5" MinWidth="200">
-                                    <ThemeVariantScope RequestedThemeVariant="{Binding}">
-                                        <Border
-                                            Padding="5 25 5 5"
-                                            HorizontalAlignment="Left"
-                                            Background="{DynamicResource WindowColor}"
-                                            BorderBrush="{DynamicResource WindowTextColor}"
-                                            BorderThickness="1"
-                                            CornerRadius="3">
-                                            <StackPanel Spacing="10">
-                                                <StackPanel Orientation="Horizontal" Spacing="50">
-                                                    <StackPanel Spacing="5">
-                                                        <TextBlock
-                                                            FontSize="50"
-                                                            Text="Aa" />
-                                                        <StackPanel Orientation="Horizontal" Spacing="3">
-                                                            <StackPanel.Styles>
-                                                                <Style Selector="Border">
-                                                                    <Setter Property="BorderThickness" Value="1" />
-                                                                    <Setter Property="BorderBrush" Value="{DynamicResource WindowTextColor}" />
-                                                                    <Setter Property="CornerRadius" Value="5" />
-                                                                    <Setter Property="Width" Value="10" />
-                                                                    <Setter Property="Height" Value="{Binding $self.Width}" />
-                                                                </Style>
-                                                            </StackPanel.Styles>
-                                                            <Border Background="{DynamicResource WindowColor}" />
-                                                            <Border Background="{DynamicResource HotlightColor}" />
-                                                            <Border Background="{DynamicResource GrayTextColor}" />
-                                                            <Border Background="{DynamicResource HighlightTextColor}" />
-                                                            <Border Background="{DynamicResource HighlightColor}" />
-                                                        </StackPanel>
-                                                    </StackPanel>
-                                                    <Border
-                                                        BorderThickness="1"
-                                                        BorderBrush="{DynamicResource WindowTextColor}"
-                                                        CornerRadius="3"
-                                                        Padding="8">
-                                                        <Panel>
-                                                            <StackPanel Spacing="5">
-                                                                <Border
-                                                                    Width="50"
-                                                                    Height="1"
-                                                                    Background="{DynamicResource WindowTextColor}" />
-                                                                <Border
-                                                                    Height="1"
-                                                                    Background="{DynamicResource WindowTextColor}" />
-                                                                <Border
-                                                                    Height="1"
-                                                                    Background="{DynamicResource WindowTextColor}" />
-                                                            </StackPanel>
-                                                            <StackPanel
-                                                                HorizontalAlignment="Right"
-                                                                VerticalAlignment="Bottom"
-                                                                Orientation="Horizontal"
-                                                                Spacing="2">
-                                                                <Border
-                                                                    Width="20"
-                                                                    Height="5"
-                                                                    Background="{DynamicResource HighlightColor}"
-                                                                    CornerRadius="1" />
-                                                                <Border
-                                                                    Width="20"
-                                                                    Height="5"
-                                                                    BorderThickness="1"
-                                                                    BorderBrush="{DynamicResource ButtonTextColor}"
-                                                                    CornerRadius="1" />
-                                                            </StackPanel>
-                                                        </Panel>
-                                                    </Border>
-                                                </StackPanel>
-                                                <Border
-                                                    Height="1"
-                                                    Background="{DynamicResource WindowTextColor}" />
-                                            </StackPanel>
-                                        </Border>
-                                    </ThemeVariantScope>
-                                    <TextBlock Text="{Binding}" FontWeight="SemiBold" />
-                                </StackPanel>
-                            </DataTemplate>
-                        </ListBox.ItemTemplate>
-                    </ListBox>
-
-                    <ThemeVariantScope
-                        MinWidth="400"
-                        RequestedThemeVariant="{Binding SelectedThemeVariant}">
-                        <Border Padding="10" Background="{DynamicResource WindowColor}">
-                            <StackPanel Spacing="16">
-                                <StackPanel.Styles>
-                                    <Style Selector="TextBlock">
-                                        <Setter Property="HorizontalAlignment" Value="Left" />
-                                        <Setter Property="VerticalAlignment" Value="Center" />
-                                        <Setter Property="FontWeight" Value="SemiBold" />
-                                    </Style>
-                                    <Style Selector="controls|ColorItemControl.ColorBlock">
-                                        <Setter Property="Width" Value="44" />
-                                        <Setter Property="Height" Value="{Binding $self.Width}" />
-                                        <Setter Property="HorizontalAlignment" Value="Right" />
-                                        <Setter Property="BorderThickness" Value="1" />
-                                        <Setter Property="BorderBrush" Value="{DynamicResource WindowTextColor}" />
-                                        <Setter Property="CornerRadius" Value="3" />
-                                    </Style>
-                                </StackPanel.Styles>
-                                <Panel>
-                                    <TextBlock
-                                        Foreground="{DynamicResource WindowTextColor}"
-                                        Text="Background" />
-                                    <controls:ColorItemControl
-                                        Classes="ColorBlock"
-                                        DataContext="{Binding ColorResources[0]}"
-                                        Background="{DynamicResource  WindowColor}" />
-                                </Panel>
-                                <Panel>
-                                    <TextBlock
-                                        Foreground="{DynamicResource WindowTextColor}"
-                                        Text="Text" />
-                                    <controls:ColorItemControl
-                                        Classes="ColorBlock"
-                                        DataContext="{Binding ColorResources[1]}"
-                                        Background="{DynamicResource  WindowTextColor}" />
-                                </Panel>
-                                <Panel>
-                                    <TextBlock
-                                        Foreground="{DynamicResource HotlightColor}"
-                                        TextDecorations="Underline"
-                                        Text="Hyperlink" />
-                                    <controls:ColorItemControl
-                                        Classes="ColorBlock"
-                                        DataContext="{Binding ColorResources[2]}"
-                                        Background="{DynamicResource  HotlightColor}" />
-                                </Panel>
-                                <Panel>
-                                    <TextBlock
-                                        Foreground="{DynamicResource GrayTextColor}"
-                                        Text="Inactive Text" />
-                                    <controls:ColorItemControl
-                                        Classes="ColorBlock"
-                                        DataContext="{Binding ColorResources[3]}"
-                                        Background="{DynamicResource  GrayTextColor}" />
-                                </Panel>
-                                <Panel>
-                                    <TextBlock
-                                        Foreground="{DynamicResource HighlightTextColor}"
-                                        Background="{DynamicResource HighlightColor}"
-                                        Text="Selected text" />
-                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="4">
-                                        <controls:ColorItemControl
-                                            Classes="ColorBlock"
-                                            DataContext="{Binding ColorResources[4]}"
-                                            Background="{DynamicResource  HighlightTextColor}" />
-                                        <controls:ColorItemControl
-                                            Classes="ColorBlock"
-                                            DataContext="{Binding ColorResources[5]}"
-                                            Background="{DynamicResource  HighlightColor}" />
-                                    </StackPanel>
-                                </Panel>
-                                <Panel>
-                                    <Border
-                                        HorizontalAlignment="Left"
-                                        VerticalAlignment="Center"
-                                        BorderBrush="{DynamicResource ButtonTextColor}"
-                                        Background="{DynamicResource ButtonFaceColor}"
-                                        BorderThickness="2"
-                                        CornerRadius="3">
-                                        <TextBlock
-                                            Foreground="{DynamicResource ButtonTextColor}"
-                                            Padding="16 6"
-                                            Text="Button text" />
-                                    </Border>
-                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="4">
-                                        <controls:ColorItemControl
-                                            Classes="ColorBlock"
-                                            DataContext="{Binding ColorResources[6]}"
-                                            Background="{DynamicResource  ButtonTextColor}" />
-                                        <controls:ColorItemControl
-                                            Classes="ColorBlock"
-                                            DataContext="{Binding ColorResources[7]}"
-                                            Background="{DynamicResource  ButtonFaceColor}" />
-                                    </StackPanel>
-                                </Panel>
-                            </StackPanel>
-                        </Border>
-                    </ThemeVariantScope>
-
-                    <DataGrid
-                        HorizontalAlignment="Left"
-                        CanUserSortColumns="False"
-                        AutoGenerateColumns="False"
-                        ItemsSource="{Binding ColorResources}"
-                        GridLinesVisibility="All"
-                        BorderBrush="{DynamicResource SemiColorBorder}"
-                        BorderThickness="1"
-                        Padding="5">
-                        <DataGrid.Columns>
-                            <DataGridTemplateColumn Header="Color">
-                                <DataGridTemplateColumn.CellTemplate>
-                                    <DataTemplate>
-                                        <controls:ColorItemControl
-                                            Width="40"
-                                            Height="20"
-                                            CornerRadius="3"
-                                            Background="{Binding Brush}" />
-                                    </DataTemplate>
-                                </DataGridTemplateColumn.CellTemplate>
-                            </DataGridTemplateColumn>
-
-                            <DataGridTemplateColumn Header="ResourceKey">
-                                <DataGridTemplateColumn.CellTemplate>
-                                    <DataTemplate>
-                                        <SelectableTextBlock
-                                            Margin="12 0"
-                                            VerticalAlignment="Center"
-                                            Text="{Binding ResourceKey}" />
-                                    </DataTemplate>
-                                </DataGridTemplateColumn.CellTemplate>
-                            </DataGridTemplateColumn>
-
-                            <DataGridTemplateColumn Header="Hex">
-                                <DataGridTemplateColumn.CellTemplate>
-                                    <DataTemplate>
-                                        <SelectableTextBlock
-                                            Margin="12 0"
-                                            VerticalAlignment="Center"
-                                            Text="{Binding Brush,
-                                                Converter={x:Static cvt:ColorConverter.ToHex},ConverterParameter={x:False}}" />
-                                    </DataTemplate>
-                                </DataGridTemplateColumn.CellTemplate>
-                            </DataGridTemplateColumn>
-
-                            <DataGridTemplateColumn Header="Description">
-                                <DataGridTemplateColumn.CellTemplate>
-                                    <DataTemplate>
-                                        <SelectableTextBlock
-                                            Margin="12 0"
-                                            VerticalAlignment="Center"
-                                            Text="{Binding Description}" />
-                                    </DataTemplate>
-                                </DataGridTemplateColumn.CellTemplate>
-                            </DataGridTemplateColumn>
-
-                            <DataGridTemplateColumn Header="Pair With">
-                                <DataGridTemplateColumn.CellTemplate>
-                                    <DataTemplate>
-                                        <SelectableTextBlock
-                                            Margin="12 0"
-                                            VerticalAlignment="Center"
-                                            Text="{Binding PairWith}" />
-                                    </DataTemplate>
-                                </DataGridTemplateColumn.CellTemplate>
-                            </DataGridTemplateColumn>
-
-                            <DataGridTemplateColumn Width="100" Header="CopyText">
-                                <DataGridTemplateColumn.CellTemplate>
-                                    <DataTemplate DataType="vm:ColorResource">
-                                        <Button
-                                            Command="{Binding $parent[pages:HighContrastDemo].Copy}"
-                                            CommandParameter="{Binding CopyText}"
-                                            Theme="{DynamicResource  IconBorderlessButton}"
-                                            Content="{StaticResource SemiIconCopy}" />
-                                    </DataTemplate>
-                                </DataGridTemplateColumn.CellTemplate>
-                            </DataGridTemplateColumn>
-                        </DataGrid.Columns>
-                    </DataGrid>
-                </StackPanel>
-            </ScrollViewer>
-        </SplitView.Content>
-    </SplitView>
-</UserControl>

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

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

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

@@ -8,22 +8,36 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <StackPanel HorizontalAlignment="Left" Spacing="20">
-        <HyperlinkButton
-            NavigateUri="https://www.irihi.tech/"
-            Content="IRIHI Homepage" />
-        <HyperlinkButton
-            Classes="Underline"
-            IsEnabled="False"
-            NavigateUri="https://www.irihi.tech/"
-            Content="Not Enabled" />
-        <HyperlinkButton
-            Classes="WithIcon Underline"
-            Height="20"
-            NavigateUri="https://www.irihi.tech/"
-            Content="带下划线的网页链接" />
         <StackPanel Orientation="Horizontal">
-            <HyperlinkButton Classes="OnlyIcon" NavigateUri="https://www.irihi.tech/" />
+            <HyperlinkButton Height="20" NavigateUri="http://www.irihi.tech/">
-            <HyperlinkButton Classes="OnlyIcon" NavigateUri="https://www.irihi.tech/" />
+                <TextBlock
+                    HorizontalAlignment="Center"
+                    Text="iRihi Homepage"
+                    TextDecorations="Underline"
+                    VerticalAlignment="Center" />
+            </HyperlinkButton>
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <HyperlinkButton Height="20" IsEnabled="False">
+                <TextBlock
+                    HorizontalAlignment="Center"
+                    Text="Not Enabled"
+                    TextDecorations="Underline"
+                    VerticalAlignment="Center" />
+            </HyperlinkButton>
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <HyperlinkButton
+                BorderThickness="1"
+                Classes="WithIcon"
+                Height="20"
+                NavigateUri="http://www.irihi.tech/">
+                <TextBlock
+                    HorizontalAlignment="Center"
+                    Text="Link with Icon"
+                    TextDecorations="Underline"
+                    VerticalAlignment="Center" />
+            </HyperlinkButton>
         </StackPanel>
     </StackPanel>
 </UserControl>

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

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

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

@@ -1,84 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:DataType="vm:IconDemoViewModel"
-             x:Class="Semi.Avalonia.Demo.Pages.IconDemo">
-    <Design.DataContext>
-        <vm:IconDemoViewModel />
-    </Design.DataContext>
-    <Grid RowDefinitions="Auto, *">
-        <TextBox
-            Grid.Row="0"
-            Width="600"
-            Margin="8"
-            Classes="ClearButton"
-            Text="{Binding SearchText}"
-            PlaceholderText="Input Icon Name" />
-
-        <TabControl
-            Grid.Row="1"
-            Theme="{StaticResource LineTabControl}"
-            ItemsSource="{Binding IconTabs}">
-            <TabControl.ItemTemplate>
-                <DataTemplate>
-                    <WrapPanel ItemSpacing="5">
-                        <TextBlock Text="{Binding Header}" />
-                        <Label 
-                            Theme="{StaticResource TagLabel}"
-                            Classes="Purple"
-                            IsVisible="{Binding Header, 
-                                Converter={x:Static ObjectConverters.Equal},
-                                ConverterParameter='AI Icons'}"
-                            Content="New" />
-                    </WrapPanel>
-                </DataTemplate>
-            </TabControl.ItemTemplate>
-
-            <TabControl.ContentTemplate>
-                <DataTemplate DataType="vm:IconTab">
-                    <ScrollViewer>
-                        <ItemsControl
-                            Margin="0 10"
-                            ItemsSource="{Binding IconItems}">
-                            <ItemsControl.ItemsPanel>
-                                <ItemsPanelTemplate>
-                                    <WrapPanel
-                                        ItemWidth="200"
-                                        ItemHeight="120"
-                                        ItemSpacing="10"
-                                        LineSpacing="10" />
-                                </ItemsPanelTemplate>
-                            </ItemsControl.ItemsPanel>
-                            <ItemsControl.ItemTemplate>
-                                <DataTemplate>
-                                    <Button Theme="{DynamicResource OutlineButton}"
-                                            Classes="Tertiary"
-                                            Padding="0"
-                                            HorizontalAlignment="Stretch"
-                                            VerticalAlignment="Stretch"
-                                            Click="Button_Clicked">
-                                        <StackPanel Spacing="8">
-                                            <PathIcon
-                                                Theme="{DynamicResource InnerPathIcon}"
-                                                HorizontalAlignment="Center"
-                                                Classes="ExtraLarge"
-                                                Data="{Binding Geometry}" />
-                                            <TextBlock
-                                                HorizontalAlignment="Center"
-                                                FontSize="12"
-                                                FontWeight="Normal"
-                                                Text="{Binding ResourceKey}" />
-                                        </StackPanel>
-                                    </Button>
-                                </DataTemplate>
-                            </ItemsControl.ItemTemplate>
-                        </ItemsControl>
-                    </ScrollViewer>
-                </DataTemplate>
-            </TabControl.ContentTemplate>
-        </TabControl>
-    </Grid>
-</UserControl>

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

@@ -1,47 +0,0 @@
-using Avalonia;
-using Avalonia.Controls;
-using Avalonia.Controls.Notifications;
-using Avalonia.Controls.Primitives;
-using Avalonia.Input.Platform;
-using Avalonia.Interactivity;
-using Avalonia.Threading;
-using Semi.Avalonia.Demo.ViewModels;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class IconDemo : UserControl
-{
-    private IClipboard? _clipboard;
-    private WindowNotificationManager? _windowNotificationManager;
-
-    public IconDemo()
-    {
-        InitializeComponent();
-        this.DataContext = new IconDemoViewModel();
-    }
-
-    protected override async void OnApplyTemplate(TemplateAppliedEventArgs e)
-    {
-        base.OnApplyTemplate(e);
-        var vm = this.DataContext as IconDemoViewModel;
-        await Dispatcher.UIThread.InvokeAsync(() => { vm?.InitializeResources(); });
-    }
-
-    protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
-    {
-        base.OnAttachedToVisualTree(e);
-        var topLevel = TopLevel.GetTopLevel(this);
-        _windowNotificationManager = new WindowNotificationManager(topLevel) { MaxItems = 3 };
-        _clipboard = topLevel?.Clipboard;
-    }
-
-    private async void Button_Clicked(object sender, RoutedEventArgs e)
-    {
-        if (_clipboard is null) return;
-        if (sender is not Button { DataContext: IconItem s }) return;
-        await _clipboard.SetTextAsync(s.ResourceKey);
-        _windowNotificationManager?.Show(
-            new Notification("Copied", s.ResourceKey),
-            NotificationType.Success);
-    }
-}

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

@@ -4,19 +4,24 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    d:DesignHeight="800"
+    d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
     <ScrollViewer>
-        <StackPanel>
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
             <StackPanel.Styles>
-                <Style Selector="Grid > TextBlock,Grid > Label">
+                <Style Selector="Label">
-                    <Setter Property="Layoutable.VerticalAlignment" Value="Center" />
+                    <Setter Property="Margin" Value="4" />
-                    <Setter Property="Layoutable.Margin" Value="4" />
                 </Style>
             </StackPanel.Styles>
             <ScrollViewer HorizontalScrollBarVisibility="Auto">
                 <StackPanel Orientation="Horizontal">
+                    <StackPanel.Styles>
+                        <Style Selector="Label, TextBlock">
+                            <Setter Property="VerticalAlignment" Value="Center" />
+                            <Setter Property="Margin" Value="4" />
+                        </Style>
+                    </StackPanel.Styles>
                     <HeaderedContentControl
                         Width="400"
                         Height="400"
@@ -27,62 +32,62 @@
                         <Grid
                             VerticalAlignment="Top"
                             ColumnDefinitions="Auto, *"
-                            RowDefinitions="*,*,*,*,*,*,*,*,*,*,*">
+                            RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
-                            <TextBlock Grid.Row="0" Grid.Column="0">Classes</TextBlock>
+                            <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
-                            <TextBlock Grid.Row="1" Grid.Column="0">-</TextBlock>
+                            <TextBlock Grid.Row="2" Grid.Column="0">-</TextBlock>
-                            <TextBlock Grid.Row="2" Grid.Column="0">Secondary</TextBlock>
+                            <TextBlock Grid.Row="3" Grid.Column="0">Secondary</TextBlock>
-                            <TextBlock Grid.Row="3" Grid.Column="0">Tertiary</TextBlock>
+                            <TextBlock Grid.Row="4" Grid.Column="0">Tertiary</TextBlock>
-                            <TextBlock Grid.Row="4" Grid.Column="0">Quaternary</TextBlock>
+                            <TextBlock Grid.Row="5" Grid.Column="0">Quaternary</TextBlock>
-                            <TextBlock Grid.Row="5" Grid.Column="0">Success</TextBlock>
+                            <TextBlock Grid.Row="6" Grid.Column="0">Success</TextBlock>
-                            <TextBlock Grid.Row="6" Grid.Column="0">Warning</TextBlock>
+                            <TextBlock Grid.Row="7" Grid.Column="0">Warning</TextBlock>
-                            <TextBlock Grid.Row="7" Grid.Column="0">Danger</TextBlock>
+                            <TextBlock Grid.Row="8" Grid.Column="0">Danger</TextBlock>
-                            <TextBlock Grid.Row="8" Grid.Column="0">Mark</TextBlock>
+                            <TextBlock Grid.Row="9" Grid.Column="0">Mark</TextBlock>
-                            <TextBlock Grid.Row="9" Grid.Column="0">Code</TextBlock>
+                            <TextBlock Grid.Row="10" Grid.Column="0">Code</TextBlock>
-                            <Label Grid.Row="1" Grid.Column="1">Text</Label>
+                            <Label Grid.Row="2" Grid.Column="1">Text</Label>
                             <Label
-                                Grid.Row="2"
+                                Grid.Row="3"
                                 Grid.Column="1"
                                 Classes="Secondary">
                                 Secondary
                             </Label>
                             <Label
-                                Grid.Row="3"
+                                Grid.Row="4"
                                 Grid.Column="1"
                                 Classes="Tertiary">
                                 Tertiary
                             </Label>
                             <Label
-                                Grid.Row="4"
+                                Grid.Row="5"
                                 Grid.Column="1"
                                 Classes="Quaternary">
                                 Quaternary
                             </Label>
                             <Label
-                                Grid.Row="5"
+                                Grid.Row="6"
                                 Grid.Column="1"
                                 Classes="Success">
                                 Success
                             </Label>
                             <Label
-                                Grid.Row="6"
+                                Grid.Row="7"
                                 Grid.Column="1"
                                 Classes="Warning">
                                 Warning
                             </Label>
                             <Label
-                                Grid.Row="7"
+                                Grid.Row="8"
                                 Grid.Column="1"
                                 Classes="Danger">
                                 Danger
                             </Label>
                             <Label
-                                Grid.Row="8"
+                                Grid.Row="9"
                                 Grid.Column="1"
                                 Classes="Mark">
                                 Default Mark
                             </Label>
                             <Label
-                                Grid.Row="9"
+                                Grid.Row="10"
                                 Grid.Column="1"
                                 Classes="Code">
                                 Code
@@ -99,51 +104,51 @@
                         <Grid
                             VerticalAlignment="Top"
                             ColumnDefinitions="Auto, *"
-                            RowDefinitions="*,*,*,*,*,*,*">
+                            RowDefinitions="*,*,*,*,*,*,*,*">
-                            <TextBlock Grid.Row="0" Grid.Column="0">Classes</TextBlock>
+                            <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
-                            <TextBlock Grid.Row="1" Grid.Column="0">H1</TextBlock>
+                            <TextBlock Grid.Row="2" Grid.Column="0">H1</TextBlock>
-                            <TextBlock Grid.Row="2" Grid.Column="0">H2</TextBlock>
+                            <TextBlock Grid.Row="3" Grid.Column="0">H2</TextBlock>
-                            <TextBlock Grid.Row="3" Grid.Column="0">H3</TextBlock>
+                            <TextBlock Grid.Row="4" Grid.Column="0">H3</TextBlock>
-                            <TextBlock Grid.Row="4" Grid.Column="0">H4</TextBlock>
+                            <TextBlock Grid.Row="5" Grid.Column="0">H4</TextBlock>
-                            <TextBlock Grid.Row="5" Grid.Column="0">H5</TextBlock>
+                            <TextBlock Grid.Row="6" Grid.Column="0">H5</TextBlock>
-                            <TextBlock Grid.Row="6" Grid.Column="0">H6</TextBlock>
+                            <TextBlock Grid.Row="7" Grid.Column="0">H6</TextBlock>
                             <Label
-                                Grid.Row="1"
+                                Grid.Row="2"
                                 Grid.Column="1"
                                 Classes="H1"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 1
                             </Label>
                             <Label
-                                Grid.Row="2"
+                                Grid.Row="3"
                                 Grid.Column="1"
                                 Classes="H2"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 2
                             </Label>
                             <Label
-                                Grid.Row="3"
+                                Grid.Row="4"
                                 Grid.Column="1"
                                 Classes="H3"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 3
                             </Label>
                             <Label
-                                Grid.Row="4"
+                                Grid.Row="5"
                                 Grid.Column="1"
                                 Classes="H4"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 4
                             </Label>
                             <Label
-                                Grid.Row="5"
+                                Grid.Row="6"
                                 Grid.Column="1"
                                 Classes="H5"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 5
                             </Label>
                             <Label
-                                Grid.Row="6"
+                                Grid.Row="7"
                                 Grid.Column="1"
                                 Classes="H6"
                                 Theme="{StaticResource TitleLabel}">
@@ -153,14 +158,13 @@
                     </HeaderedContentControl>
                 </StackPanel>
             </ScrollViewer>
-
+            <WrapPanel>
-            <HeaderedContentControl
+                <Label Theme="{StaticResource TagLabel}">Label</Label>
-                Margin="16"
+                <Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
-                Header="Theme: TagLabel"
+                <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
-                Theme="{DynamicResource GroupBox}">
+                <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
-                <ScrollViewer HorizontalScrollBarVisibility="Auto">
+            </WrapPanel>
-                    <StackPanel Orientation="Horizontal" Spacing="8">
+            <WrapPanel>
-                        <StackPanel Spacing="4">
                 <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
                 <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
                 <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
@@ -178,8 +182,8 @@
                 <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
                 <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
                 <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
-                        </StackPanel>
+            </WrapPanel>
-                        <StackPanel Spacing="4">
+            <WrapPanel>
                 <Label Classes="Ghost Red" Theme="{StaticResource TagLabel}">Red</Label>
                 <Label Classes="Ghost Pink" Theme="{StaticResource TagLabel}">Pink</Label>
                 <Label Classes="Ghost Purple" Theme="{StaticResource TagLabel}">Purple</Label>
@@ -197,8 +201,8 @@
                 <Label Classes="Ghost Orange" Theme="{StaticResource TagLabel}">Orange</Label>
                 <Label Classes="Ghost Grey" Theme="{StaticResource TagLabel}">Grey</Label>
                 <Label Classes="Ghost White" Theme="{StaticResource TagLabel}">White</Label>
-                        </StackPanel>
+            </WrapPanel>
-                        <StackPanel Spacing="4">
+            <WrapPanel>
                 <Label Classes="Solid Red" Theme="{StaticResource TagLabel}">Red</Label>
                 <Label Classes="Solid Pink" Theme="{StaticResource TagLabel}">Pink</Label>
                 <Label Classes="Solid Purple" Theme="{StaticResource TagLabel}">Purple</Label>
@@ -216,26 +220,7 @@
                 <Label Classes="Solid Orange" Theme="{StaticResource TagLabel}">Orange</Label>
                 <Label Classes="Solid Grey" Theme="{StaticResource TagLabel}">Grey</Label>
                 <Label Classes="Solid White" Theme="{StaticResource TagLabel}">White</Label>
-                        </StackPanel>
+            </WrapPanel>
-                        <StackPanel Spacing="4">
-                            <Label Classes="Colorful Gradient" Theme="{DynamicResource TagLabel}">Light</Label>
-                            <Label Classes="Colorful Gradient Ghost" Theme="{DynamicResource TagLabel}">Ghost</Label>
-                            <Label Classes="Colorful Gradient Solid" Theme="{DynamicResource TagLabel}">Solid</Label>
-                        </StackPanel>
-                        <StackPanel Spacing="4">
-                            <Label Classes="Colorful" Theme="{DynamicResource TagLabel}">Light</Label>
-                            <Label Classes="Colorful Ghost" Theme="{DynamicResource TagLabel}">Ghost</Label>
-                            <Label Classes="Colorful Solid" Theme="{DynamicResource TagLabel}">Solid</Label>
-                        </StackPanel>
-                        <StackPanel Spacing="4">
-                            <Label Theme="{StaticResource TagLabel}">Label</Label>
-                            <Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
-                            <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
-                            <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
-                        </StackPanel>
-                    </StackPanel>
-                </ScrollViewer>
-            </HeaderedContentControl>
         </StackPanel>
     </ScrollViewer>
 </UserControl>

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

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

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

@@ -119,11 +119,11 @@
                     <StackPanel Spacing="20">
                         <TextBlock Text="Theme: CheckGroupListBox"/>
                         <ListBox
-                            SelectionMode="Multiple,Toggle"
+                            SelectionMode="Multiple"
                             Theme="{DynamicResource CheckGroupListBox}"
                             ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
                         <ListBox Theme="{DynamicResource CheckGroupListBox}"
-                                 SelectionMode="Multiple,Toggle"
+                                 SelectionMode="Multiple"
                                  IsEnabled="False">
                             <ListBoxItem IsSelected="True">Avalonia</ListBoxItem>
                             <ListBoxItem>WPF</ListBoxItem>
@@ -131,11 +131,11 @@
 
                         <TextBlock Text="Theme: CardCheckGroupListBox"/>
                         <ListBox
-                            SelectionMode="Multiple,Toggle"
+                            SelectionMode="Multiple"
                             Theme="{DynamicResource CardCheckGroupListBox}"
                             ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
                         <ListBox Theme="{DynamicResource CardCheckGroupListBox}"
-                                 SelectionMode="Multiple,Toggle"
+                                 SelectionMode="Multiple"
                                  IsEnabled="False">
                             <ListBoxItem>Avalonia</ListBoxItem>
                             <ListBoxItem IsSelected="True">WPF</ListBoxItem>

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

@@ -13,8 +13,8 @@
                 <Setter Property="HorizontalAlignment" Value="Stretch" />
             </Style>
         </StackPanel.Styles>
-        <Button Name="OpenFileButton" Content="Open File" />
+        <Button Name="openFileDialog">Open File</Button>
-        <Button Name="SelectFolderButton" Content="Select Folder" />
+        <Button Name="selectFolderDialog">Select Folder</Button>
-        <Button Name="SaveFileButton" Content="Save File" />
+        <Button Name="saveFileDialog">Save File</Button>
     </StackPanel>
 </UserControl>

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

@@ -1,6 +1,10 @@
+using System;
 using System.Collections.Generic;
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Dialogs;
 using Avalonia.Interactivity;
+using Avalonia.Markup.Xaml;
 using Avalonia.Platform.Storage;
 
 namespace Semi.Avalonia.Demo.Pages;
@@ -10,14 +14,14 @@ public partial class ManagedFileChooserDemo : UserControl
     public ManagedFileChooserDemo()
     {
         InitializeComponent();
-        OpenFileButton.Click += OpenFileDialog;
+        openFileDialog.Click += OpenFileDialog;
-        SelectFolderButton.Click += SelectFolderDialog;
+        selectFolderDialog.Click += SelectFolderDialog;
-        SaveFileButton.Click += SaveFileDialog;
+        saveFileDialog.Click += SaveFileDialog;
     }
 
-    private async void OpenFileDialog(object? sender, RoutedEventArgs args)
+    private async void OpenFileDialog(object sender, RoutedEventArgs args)
     {
-        var sp = GetStorageProvider();
+        IStorageProvider? sp = GetStorageProvider();
         if (sp is null) return;
         var result = await sp.OpenFilePickerAsync(new FilePickerOpenOptions()
         {
@@ -26,10 +30,9 @@ public partial class ManagedFileChooserDemo : UserControl
             AllowMultiple = true,
         });
     }
-
+    private async void SelectFolderDialog(object sender, RoutedEventArgs args)
-    private async void SelectFolderDialog(object? sender, RoutedEventArgs args)
     {
-        var sp = GetStorageProvider();
+        IStorageProvider? sp = GetStorageProvider();
         if (sp is null) return;
         var result = await sp.OpenFolderPickerAsync(new FolderPickerOpenOptions()
         {
@@ -37,14 +40,13 @@ public partial class ManagedFileChooserDemo : UserControl
             AllowMultiple = true,
         });
     }
-
+    private async void SaveFileDialog(object sender, RoutedEventArgs args)
-    private async void SaveFileDialog(object? sender, RoutedEventArgs args)
     {
-        var sp = GetStorageProvider();
+        IStorageProvider? sp = GetStorageProvider();
         if (sp is null) return;
         var result = await sp.SaveFilePickerAsync(new FilePickerSaveOptions()
         {
-            Title = "Save File",
+            Title = "Open File",
         });
     }
     
@@ -56,10 +58,10 @@ public partial class ManagedFileChooserDemo : UserControl
 
     List<FilePickerFileType>? GetFileTypes()
     {
-        return
+        return new List<FilePickerFileType>
-        [
+        {
             FilePickerFileTypes.All,
             FilePickerFileTypes.TextPlain
-        ];
+        };
     }
 }

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

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

demo/Semi.Avalonia.Demo/Pages/NavigationDemoHelper.cs

@@ -1,66 +0,0 @@
-using Avalonia.Controls;
-using Avalonia.Layout;
-using Avalonia.Media;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-/// <summary>
-/// Shared helpers for ControlCatalog demo pages.
-/// </summary>
-internal static class NavigationDemoHelper
-{
-    /// <summary>
-    /// Pastel background brushes cycled by page index.
-    /// </summary>
-    internal static readonly IBrush[] PageBrushes =
-    [
-        new SolidColorBrush(Color.Parse("#BBDEFB")),
-        new SolidColorBrush(Color.Parse("#C8E6C9")),
-        new SolidColorBrush(Color.Parse("#FFE0B2")),
-        new SolidColorBrush(Color.Parse("#E1BEE7")),
-        new SolidColorBrush(Color.Parse("#FFCDD2")),
-        new SolidColorBrush(Color.Parse("#B2EBF2"))
-    ];
-
-    internal static IBrush GetPageBrush(int index) =>
-        PageBrushes[(index % PageBrushes.Length + PageBrushes.Length) % PageBrushes.Length];
-
-    /// <summary>
-    /// Creates a simple demo ContentPage with a centered title and subtitle.
-    /// </summary>
-    internal static ContentPage MakePage(string header, string body, int colorIndex) =>
-        new()
-        {
-            Header = header,
-            Background = GetPageBrush(colorIndex),
-            Content = new StackPanel
-            {
-                HorizontalAlignment = HorizontalAlignment.Center,
-                VerticalAlignment = VerticalAlignment.Center,
-                Spacing = 8,
-                Children =
-                {
-                    new TextBlock
-                    {
-                        Text = header,
-                        FontSize = 20,
-                        FontWeight = FontWeight.SemiBold,
-                        HorizontalAlignment = HorizontalAlignment.Center,
-                        Foreground = Brushes.Black,
-                    },
-                    new TextBlock
-                    {
-                        Text = body,
-                        FontSize = 13,
-                        Opacity = 0.7,
-                        TextWrapping = TextWrapping.Wrap,
-                        TextAlignment = TextAlignment.Center,
-                        MaxWidth = 260,
-                        Foreground = Brushes.Black,
-                    }
-                }
-            },
-            HorizontalContentAlignment = HorizontalAlignment.Stretch,
-            VerticalContentAlignment = VerticalAlignment.Stretch
-        };
-}

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

@@ -1,68 +0,0 @@
-<UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.NavigationPageDemo"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    d:DesignHeight="700"
-    d:DesignWidth="800"
-    mc:Ignorable="d">
-    <ScrollViewer>
-        <DockPanel>
-            <ScrollViewer DockPanel.Dock="Right" Width="260">
-                <StackPanel Margin="12" Spacing="8">
-                    <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16" />
-                    <TextBlock Text="Navigation" FontWeight="SemiBold" FontSize="13" />
-
-                    <Button Content="Push Page"
-                            HorizontalAlignment="Stretch"
-                            Click="OnPush" />
-                    <Button Content="Pop"
-                            HorizontalAlignment="Stretch"
-                            Click="OnPop" />
-                    <Button Content="Pop to Root"
-                            HorizontalAlignment="Stretch"
-                            Click="OnPopToRoot" />
-
-                    <Separator />
-
-                    <TextBlock Text="Options" FontWeight="SemiBold" FontSize="14" />
-
-                    <CheckBox Name="HasNavBarCheck"
-                              Content="Has Navigation Bar"
-                              IsChecked="True"
-                              IsCheckedChanged="OnHasNavBarChanged" />
-                    <CheckBox Name="HasBackButtonCheck"
-                              Content="Has Back Button"
-                              IsChecked="True" 
-                              IsCheckedChanged="OnHasBackButonChanged" />
-
-                    <Separator />
-
-                    <TextBlock Text="Status" FontWeight="SemiBold" FontSize="14" />
-                    <TextBlock Name="StatusText"
-                               Text="Depth: 1"
-                               Opacity="0.7"
-                               TextWrapping="Wrap" />
-                    <TextBlock Name="HeaderText"
-                               Text="Current: Home"
-                               Opacity="0.7"
-                               TextWrapping="Wrap" />
-                    <ToggleSwitch Content="Large" Name="large" />
-                </StackPanel>
-            </ScrollViewer>
-
-            <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
-
-            <Border Margin="12"
-                    BorderBrush="{DynamicResource SemiColorBorder}"
-                    BorderThickness="1"
-                    CornerRadius="6"
-                    ClipToBounds="True">
-                <NavigationPage 
-                    Name="DemoNav" 
-                    Classes.Large="{Binding #large.IsChecked}" />
-            </Border>
-        </DockPanel>
-    </ScrollViewer>
-</UserControl>

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

@@ -1,66 +0,0 @@
-using Avalonia.Controls;
-using Avalonia.Interactivity;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class NavigationPageDemo : UserControl
-{
-    private int _pageCount;
-
-    public NavigationPageDemo()
-    {
-        InitializeComponent();
-        Loaded += OnLoaded;
-    }
-
-    private async void OnLoaded(object? sender, RoutedEventArgs e)
-    {
-        await DemoNav.PushAsync(NavigationDemoHelper.MakePage("Home", "Welcome!\nUse the buttons to push and pop pages.", 0), null);
-        UpdateStatus();
-    }
-
-    private async void OnPush(object? sender, RoutedEventArgs e)
-    {
-        _pageCount++;
-        var page = NavigationDemoHelper.MakePage($"Page {_pageCount}", $"This is page {_pageCount}.", _pageCount);
-        NavigationPage.SetHasNavigationBar(page, HasNavBarCheck.IsChecked == true);
-        NavigationPage.SetHasBackButton(page, HasBackButtonCheck.IsChecked == true);
-        await DemoNav.PushAsync(page);
-        UpdateStatus();
-    }
-
-    private async void OnPop(object? sender, RoutedEventArgs e)
-    {
-        await DemoNav.PopAsync();
-        UpdateStatus();
-    }
-
-    private async void OnPopToRoot(object? sender, RoutedEventArgs e)
-    {
-        await DemoNav.PopToRootAsync();
-        _pageCount = 0;
-        UpdateStatus();
-    }
-
-    private void OnHasNavBarChanged(object? sender, RoutedEventArgs e)
-    {
-        if (DemoNav == null)
-            return;
-        if (DemoNav.CurrentPage != null)
-            NavigationPage.SetHasNavigationBar(DemoNav.CurrentPage, HasNavBarCheck.IsChecked == true);
-    }
-
-    private void OnHasBackButonChanged(object? sender, RoutedEventArgs e)
-    {
-        if (DemoNav == null)
-            return;
-        if (DemoNav.CurrentPage != null)
-            NavigationPage.SetHasBackButton(DemoNav.CurrentPage, HasBackButtonCheck.IsChecked == true);
-    }
-
-    private void UpdateStatus()
-    {
-        StatusText.Text = $"Depth: {DemoNav.StackDepth}";
-        HeaderText.Text = $"Current: {DemoNav.CurrentPage?.Header ?? "(none)"}";
-    }
-}

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

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

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

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

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

@@ -28,15 +28,15 @@
             <NumericUpDown
                 Width="100"
                 Classes="Large"
-                PlaceholderText="Large"
+                Watermark="Large"
                 ButtonSpinnerLocation="Left" />
             <NumericUpDown
                 Width="100"
-                PlaceholderText="Default"
+                Watermark="Default"
                 ShowButtonSpinner="False" />
             <NumericUpDown
                 Width="100"
-                PlaceholderText="Small"
+                Watermark="Small"
                 Classes="Small" />
         </StackPanel>
 
@@ -52,10 +52,5 @@
             <NumericUpDown Width="100" ButtonSpinnerLocation="Left" />
         </StackPanel>
 
-        <StackPanel>
-            <TextBlock Text="Split" />
-            <NumericUpDown Classes="Split" Width="300" />
-        </StackPanel>
-
     </StackPanel>
 </UserControl>