feat: change render mode in browser demo.

.github/workflows/deploy.yml

@@ -4,7 +4,10 @@ env:
   PROJECT_PATH: demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj
   OUTPUT_PATH: demo/Semi.Avalonia.Demo.Web/bin/Release/net8.0-browser/publish/wwwroot
 on:
-  workflow_dispatch:
+  push:
+    branches: [ "action/deploy" ]
+  pull_request:
+    branches: [ "action/deploy" ]
 
 jobs:
   deploy-to-github-pages:
@@ -25,7 +28,7 @@ jobs:
         run: dotnet publish $PROJECT_PATH -c Release --nologo
 
       - name: Change base-tag in index.html
-        run: sed -i 's#<base href="/" />#<base href="/Semi.Avalonia/" />#g' $OUTPUT_PATH/index.html
+        run: sed -i 's/<base href="\/" \/>/<base href="\/Semi.Avalonia\/" \/>/g' $OUTPUT_PATH/index.html
 
       - name: copy index.html to 404.html
         run: cp $OUTPUT_PATH/index.html $OUTPUT_PATH/404.html

.github/workflows/pack-nightly.yml

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

.github/workflows/pack.yml

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

.github/workflows/publish.yml

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

.github/workflows/release-tag.yml

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

README.md

@@ -2,7 +2,6 @@
 
 [![Semi Avalonia](https://img.shields.io/nuget/v/Semi.Avalonia.svg?color=red&style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia/)
 [![Semi Avalonia](https://img.shields.io/nuget/dt/Semi.Avalonia.svg?style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia/)
-[![GitCode](https://gitcode.com/IRIHI_Technology/Semi.Avalonia/star/badge.svg)](https://gitcode.com/IRIHI_Technology/Semi.Avalonia)
 
 [中文](./README_CN.md)
 
@@ -27,13 +26,11 @@ dotnet add package Semi.Avalonia
 Include Semi Design Styles in application:
 
 ```xaml
-<Application
+<Application.Styles>
-    ...
+<!-- You can still reference in old way.  -->
-    xmlns:semi="https://irihi.tech/semi">
+<!-- <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" /> -->
-    <Application.Styles>
+    <semi:SemiTheme Locale="zh-cn" />
-        <semi:SemiTheme Locale="zh-CN" />
+</Application.Styles>
-    </Application.Styles>
-</Application>
 ```
 
 That's all.
@@ -69,8 +66,6 @@ We offer limited free community support for Semi Avalonia and Ursa. If you have
 
 | Semi Design Version | Avalonia Version |
 |:--------------------|:-----------------|
-| 11.2.1              | >=11.2.1         |
-| 11.2.0              | 11.2.0           |
 | 11.1.0              | >=11.1.0         |
 | 11.0.7              | >=11.0.7         |
 | 11.0.1              | <=11.0.6         |

README_CN.md

@@ -2,7 +2,6 @@
 
 [![Semi Avalonia](https://img.shields.io/nuget/v/Semi.Avalonia.svg?color=red&style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia/)
 [![Semi Avalonia](https://img.shields.io/nuget/dt/Semi.Avalonia.svg?style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia/)
-[![GitCode](https://gitcode.com/IRIHI_Technology/Semi.Avalonia/star/badge.svg)](https://gitcode.com/IRIHI_Technology/Semi.Avalonia)
 
 [English](./README.md)
 
@@ -27,13 +26,11 @@ dotnet add package Semi.Avalonia
 在样式中引用 Semi 主题：
 
 ```xaml
-<Application
+<Application.Styles>
-    ...
+<!-- 您仍然可以使用旧版方式引用  -->
-    xmlns:semi="https://irihi.tech/semi">
+<!-- <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" /> -->
-    <Application.Styles>
+    <semi:SemiTheme Locale="zh-cn" />
-        <semi:SemiTheme Locale="zh-CN" />
+</Application.Styles>
-    </Application.Styles>
-</Application>
 ```
 
 这样就可以了。
@@ -57,6 +54,7 @@ dotnet add package Semi.Avalonia.TreeDataGrid
 ## 示例
 
 您可以从 Semi Avalonia 的 release 页下载并试用 Semi Avalonia 的展示应用。
+
 <https://github.com/irihitech/Semi.Avalonia/releases>
 
 ## 社区支持
@@ -65,12 +63,11 @@ dotnet add package Semi.Avalonia.TreeDataGrid
 
 ![FeiShu](./docs/community-support.png)
 
+
 ## 版本兼容性
 
 | Semi Design Version | Avalonia Version |
 |:--------------------|:-----------------|
-| 11.2.1              | >=11.2.1         |
-| 11.2.0              | 11.2.0           |
 | 11.1.0              | >=11.1.0         |
 | 11.0.7              | >=11.0.7         |
 | 11.0.1              | <=11.0.6         |

Semi.Avalonia.sln

@@ -12,15 +12,6 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Files", "Solution
 		src\Package.props = src\Package.props
 	EndProjectSection
 EndProject
-Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "GitHub Action", "GitHub Action", "{318534A1-1CC3-40FB-B4AE-736F94465232}"
-	ProjectSection(SolutionItems) = preProject
-		.github\workflows\deploy.yml = .github\workflows\deploy.yml
-		.github\workflows\pack.yml = .github\workflows\pack.yml
-		.github\workflows\pack-nightly.yml = .github\workflows\pack-nightly.yml
-		.github\workflows\publish.yml = .github\workflows\publish.yml
-		.github\workflows\release-tag.yml = .github\workflows\release-tag.yml
-	EndProjectSection
-EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Demo", "Demo", "{43091528-9509-43CB-A003-9C5C11E96DD6}"
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.Demo.Desktop", "demo\Semi.Avalonia.Demo.Desktop\Semi.Avalonia.Demo.Desktop.csproj", "{2ADCA724-2B6D-46EC-87F7-604D7918B89A}"

demo/Directory.Build.props

@@ -1,7 +1,6 @@
 <Project>
   <PropertyGroup>
     <Nullable>enable</Nullable>
-    <AvaloniaVersion>11.2.2</AvaloniaVersion>
+    <AvaloniaVersion>11.1.3</AvaloniaVersion>
-    <CommunityToolkitVersion>8.3.2</CommunityToolkitVersion>
   </PropertyGroup>
 </Project>

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

@@ -16,13 +16,13 @@ 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

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

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

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

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

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

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

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

demo/Semi.Avalonia.Demo/App.axaml

@@ -5,9 +5,8 @@
     xmlns:semi="https://irihi.tech/semi">
     <Application.Styles>
         <!-- You can still reference in old way.  -->
-        <!-- <StyleInclude Source="avares://Semi.Avalonia/Index.axaml" /> -->
+        <!-- <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" /> -->
-        <semi:SemiTheme Locale="zh-CN" />
+        <semi:SemiTheme Locale="zh-cn" />
-        <semi:SemiPopupAnimations/>
         <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
         <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
     </Application.Styles>

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
@@ -34,13 +39,13 @@
                             Grid.Row="1"
                             Grid.Column="1"
                             Classes="Tertiary"
-                            Padding="8"
                             Command="{Binding $parent[controls:ColorDetailControl].Copy}"
                             CommandParameter="{x:Static controls:ColorDetailControl.KEY_ResourceKey}"
                             Theme="{DynamicResource BorderlessButton}">
                             <PathIcon
-                                Theme="{DynamicResource InnerPathIcon}"
+                                Width="12"
-                                Data="{StaticResource SemiIconCopy}"
+                                Height="12"
+                                Data="{StaticResource CopyIcon}"
                                 Foreground="{Binding $parent[Button].Foreground}" />
                         </Button>
                         <SelectableTextBlock
@@ -53,14 +58,14 @@
                             Grid.Row="2"
                             Grid.Column="1"
                             Classes="Tertiary"
-                            Padding="8"
                             Command="{Binding $parent[controls:ColorDetailControl].Copy}"
                             CommandParameter="{x:Static controls:ColorDetailControl.KEY_ColorResourceKey}"
                             IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
                             Theme="{DynamicResource BorderlessButton}">
                             <PathIcon
-                                Theme="{DynamicResource InnerPathIcon}"
+                                Width="12"
-                                Data="{StaticResource SemiIconCopy}"
+                                Height="12"
+                                Data="{StaticResource CopyIcon}"
                                 Foreground="{Binding $parent[Button].Foreground}" />
                         </Button>
 
@@ -82,13 +87,13 @@
                             Grid.Row="4"
                             Grid.Column="1"
                             Classes="Tertiary"
-                            Padding="8"
                             Command="{Binding $parent[controls:ColorDetailControl].Copy}"
                             CommandParameter="{x:Static controls:ColorDetailControl.KEY_Hex}"
                             Theme="{DynamicResource BorderlessButton}">
                             <PathIcon
-                                Theme="{DynamicResource InnerPathIcon}"
+                                Width="12"
-                                Data="{StaticResource SemiIconCopy}"
+                                Height="12"
+                                Data="{StaticResource CopyIcon}"
                                 Foreground="{Binding $parent[Button].Foreground}" />
                         </Button>
 
@@ -110,13 +115,13 @@
                             Grid.Row="6"
                             Grid.Column="1"
                             Classes="Tertiary"
-                            Padding="8"
                             Command="{Binding $parent[controls:ColorDetailControl].Copy}"
                             CommandParameter="{x:Static controls:ColorDetailControl.KEY_Opacity}"
                             Theme="{DynamicResource BorderlessButton}">
                             <PathIcon
-                                Theme="{DynamicResource InnerPathIcon}"
+                                Width="12"
-                                Data="{StaticResource SemiIconCopy}"
+                                Height="12"
+                                Data="{StaticResource CopyIcon}"
                                 Foreground="{Binding $parent[Button].Foreground}" />
                         </Button>
                     </Grid>

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

@@ -2,28 +2,29 @@ using System.Globalization;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
+using Avalonia.Input.Platform;
 using Avalonia.Media;
+using Avalonia.Media.Immutable;
 
 namespace Semi.Avalonia.Demo.Controls;
 
-public class ColorDetailControl : TemplatedControl
+public class ColorDetailControl: TemplatedControl
 {
     public const string KEY_ResourceKey = "ResourceKey";
     public const string KEY_Hex = "Hex";
     public const string KEY_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
     {
@@ -31,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
     {
@@ -40,28 +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);
     }
-
+    
-    public static readonly DirectProperty<ColorDetailControl, string?> OpacityNumberProperty =
+    public static readonly DirectProperty<ColorDetailControl, string?> OpacityNumberProperty = AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(
-        AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(OpacityNumber), o => o.OpacityNumber);
+        nameof(OpacityNumber), o => o.OpacityNumber);
-
     private string? _opacityNumber;
-
     public string? OpacityNumber
     {
         get => _opacityNumber;
         private set => SetAndRaise(OpacityNumberProperty, ref _opacityNumber, value);
     }
-
+    
+    
+    
+    
     static ColorDetailControl()
     {
         BackgroundProperty.Changed.AddClassHandler<ColorDetailControl>((o, e) => o.OnBackgroundChanged(e));
@@ -84,17 +84,13 @@ public class ColorDetailControl : TemplatedControl
         {
             switch (s)
             {
-                case KEY_ResourceKey:
+                case KEY_ResourceKey: text = ResourceKey;
-                    text = ResourceKey;
                     break;
-                case KEY_Hex:
+                case KEY_Hex: text = Hex;
-                    text = Hex;
                     break;
-                case KEY_Opacity:
+                case KEY_Opacity: text = OpacityNumber;
-                    text = OpacityNumber;
                     break;
-                case KEY_ColorResourceKey:
+                case KEY_ColorResourceKey: text = ColorResourceKey;
-                    text = ColorResourceKey;
                     break;
                 default: text = string.Empty; break;
             }
@@ -103,7 +99,9 @@ public class ColorDetailControl : TemplatedControl
         var toplevel = TopLevel.GetTopLevel(this);
         if (toplevel?.Clipboard is { } c)
         {
-            await c.SetTextAsync(text ?? string.Empty);
+            await c.SetTextAsync(text??string.Empty);
         }
+
     }
+    
 }

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

@@ -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>
+</ResourceDictionary>

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

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

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

@@ -5,16 +5,18 @@
     xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     x:CompileBindings="True"
     x:DataType="viewModels:FunctionalColorGroupViewModel">
+    <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type controls:FunctionalColorGroupControl}" TargetType="controls:FunctionalColorGroupControl">
-        <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}">
@@ -129,4 +131,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

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

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

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

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

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/Pages/CarouselDemo.axaml

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

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

@@ -19,74 +19,42 @@
                 <ColorView ColorSpectrumShape="Box" />
                 <ColorView Palette="{DynamicResource SemiColorPalette}" />
             </StackPanel>
-            <StackPanel VerticalAlignment="Top" Orientation="Horizontal">
+            <StackPanel
+                VerticalAlignment="Top"
+                Orientation="Horizontal">
                 <ColorView
                     Name="SimpleColorViewTest"
-                    HsvColor="hsv(120,11%,10%)"
+                    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 HorizontalAlignment="Left" Orientation="Horizontal">
-                <ColorPicker Margin="8" ColorSpectrumShape="Ring">
+                <ColorPicker ColorSpectrumShape="Ring">
                     <ColorPicker.Palette>
                         <controls:FlatHalfColorPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
-                <ColorPicker Margin="8" ColorSpectrumShape="Box">
+                <ColorPicker ColorSpectrumShape="Box">
                     <ColorPicker.Palette>
                         <colorPicker:SemiColorLightPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
 
-                <ColorPicker
+                <ColorPicker ColorSpectrumShape="Box" Theme="{DynamicResource HexColorPicker}">
-                    Margin="8"
-                    ColorSpectrumShape="Box"
-                    Theme="{DynamicResource HexColorPicker}">
                     <ColorPicker.Palette>
                         <colorPicker:SemiColorLightPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
             </StackPanel>
-            <StackPanel HorizontalAlignment="Left" >
-                <TextBlock Text="Use Style to customize button"></TextBlock>
-                <ColorPicker
-                    Margin="8"
-                    Width="32"
-                    HsvColor="hsv(120,11%,10%)"
-                    >
-                    <ColorPicker.Content>
-                        <Border
-                            Margin="1"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Stretch"
-                            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 HorizontalAlignment="Left" Orientation="Horizontal">
-                <ColorPicker
+                <ColorPicker Theme="{StaticResource SimpleColorPicker}"
-                    Margin="8"
+                             HsvColor="hsv(120,11%,10%)" />
-                    HsvColor="hsv(120,11%,10%)"
+                <ColorPicker Theme="{StaticResource HexSimpleColorPicker}"
-                    Theme="{StaticResource SimpleColorPicker}" />
+                             HsvColor="hsv(120,11%,10%)" />
-                <ColorPicker
-                    Margin="8"
-                    HsvColor="hsv(120,11%,10%)"
-                    Theme="{StaticResource HexSimpleColorPicker}" />
             </StackPanel>
         </StackPanel>
     </ScrollViewer>

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

@@ -27,15 +27,6 @@
         <ComboBox Classes="Small" />
         <ComboBox Classes="Bordered" />
         <ComboBox Classes="Bordered" IsEnabled="False" />
-        <ComboBox>
-          <ComboBox.SelectionBoxItemTemplate>
-            <DataTemplate DataType="x:String">
-              <ContentControl BorderThickness="1"
-                              BorderBrush="Gold"
-                              Content="{Binding}" />
-            </DataTemplate>
-          </ComboBox.SelectionBoxItemTemplate>
-        </ComboBox>
 
         <StackPanel Orientation="Horizontal">
             <ComboBox Width="100" Classes="Large" PlaceholderText="Large" />

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

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

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

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

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

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

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

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

@@ -1,320 +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"
-             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>
-    <UserControl.Resources>
-        <ResourceDictionary>
-            <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude Source="../Themes/ToggleSwitch.axaml" />
-                <ResourceInclude Source="../Controls/ColorItemControl.axaml" />
-                <ResourceInclude Source="../Controls/ColorDetailControl.axaml" />
-            </ResourceDictionary.MergedDictionaries>
-        </ResourceDictionary>
-    </UserControl.Resources>
-    <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 SplitViewToggleSwitch}" />
-                <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 Hex}" />
-                                    </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>
-                        </DataGrid.Columns>
-                    </DataGrid>
-                </StackPanel>
-            </ScrollViewer>
-        </SplitView.Content>
-    </SplitView>
-</UserControl>

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

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

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

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

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

@@ -1,95 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:DataType="vm:IconDemoViewModel"
-             x:Class="Semi.Avalonia.Demo.Pages.IconDemo">
-    <Design.DataContext>
-        <vm:IconDemoViewModel />
-    </Design.DataContext>
-    <Grid RowDefinitions="Auto, *">
-        <TextBox
-            Grid.Row="0"
-            Width="600"
-            Margin="8"
-            Classes="ClearButton"
-            Text="{Binding SearchText}"
-            Watermark="Input Icon Name" />
-
-        <TabControl Grid.Row="1">
-            <TabItem Header="Filled Icons">
-                <ScrollViewer>
-                    <ItemsControl ItemsSource="{Binding FilteredFilledIcons}">
-                        <ItemsControl.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <WrapPanel />
-                            </ItemsPanelTemplate>
-                        </ItemsControl.ItemsPanel>
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate>
-                                <Button Theme="{DynamicResource OutlineButton}"
-                                        Classes="Tertiary"
-                                        Padding="0"
-                                        Margin="10"
-                                        Width="200"
-                                        Height="120"
-                                        Click="Button_Clicked">
-                                    <StackPanel Spacing="8">
-                                        <PathIcon
-                                            Theme="{DynamicResource InnerPathIcon}"
-                                            HorizontalAlignment="Center"
-                                            Classes="ExtraLarge"
-                                            Data="{Binding Geometry}" />
-                                        <TextBlock
-                                            HorizontalAlignment="Center"
-                                            FontSize="12"
-                                            FontWeight="Normal"
-                                            Text="{Binding ResourceKey}" />
-                                    </StackPanel>
-                                </Button>
-                            </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                    </ItemsControl>
-                </ScrollViewer>
-            </TabItem>
-
-            <TabItem Header="Stroked Icons">
-                <ScrollViewer>
-                    <ItemsControl ItemsSource="{Binding FilteredStrokedIcons}">
-                        <ItemsControl.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <WrapPanel />
-                            </ItemsPanelTemplate>
-                        </ItemsControl.ItemsPanel>
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate>
-                                <Button Theme="{DynamicResource OutlineButton}"
-                                        Classes="Tertiary"
-                                        Padding="0"
-                                        Margin="10"
-                                        Width="200"
-                                        Height="120"
-                                        Click="Button_Clicked">
-                                    <StackPanel Spacing="8">
-                                        <PathIcon
-                                            Theme="{DynamicResource InnerPathIcon}"
-                                            HorizontalAlignment="Center"
-                                            Classes="ExtraLarge"
-                                            Data="{Binding Geometry}" />
-                                        <TextBlock
-                                            HorizontalAlignment="Center"
-                                            FontSize="12"
-                                            FontWeight="Normal"
-                                            Text="{Binding ResourceKey}" />
-                                    </StackPanel>
-                                </Button>
-                            </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                    </ItemsControl>
-                </ScrollViewer>
-            </TabItem>
-        </TabControl>
-    </Grid>
-</UserControl>

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

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

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

@@ -4,7 +4,7 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    d:DesignHeight="800"
+    d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
     <ScrollViewer>
@@ -13,13 +13,15 @@
                 <Style Selector="Label">
                     <Setter Property="Margin" Value="4" />
                 </Style>
-                <Style Selector="Grid > TextBlock">
-                    <Setter Property="VerticalAlignment" Value="Center" />
-                    <Setter Property="Margin" Value="4" />
-                </Style>
             </StackPanel.Styles>
             <ScrollViewer HorizontalScrollBarVisibility="Auto">
                 <StackPanel Orientation="Horizontal">
+                    <StackPanel.Styles>
+                        <Style Selector="Label, TextBlock">
+                            <Setter Property="VerticalAlignment" Value="Center" />
+                            <Setter Property="Margin" Value="4" />
+                        </Style>
+                    </StackPanel.Styles>
                     <HeaderedContentControl
                         Width="400"
                         Height="400"
@@ -30,62 +32,62 @@
                         <Grid
                             VerticalAlignment="Top"
                             ColumnDefinitions="Auto, *"
-                            RowDefinitions="*,*,*,*,*,*,*,*,*,*,*">
+                            RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
-                            <TextBlock Grid.Row="0"  Grid.Column="0">Classes</TextBlock>
+                            <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
-                            <TextBlock Grid.Row="1" Grid.Column="0">-</TextBlock>
+                            <TextBlock Grid.Row="2" Grid.Column="0">-</TextBlock>
-                            <TextBlock Grid.Row="2" Grid.Column="0">Secondary</TextBlock>
+                            <TextBlock Grid.Row="3" Grid.Column="0">Secondary</TextBlock>
-                            <TextBlock Grid.Row="3" Grid.Column="0">Tertiary</TextBlock>
+                            <TextBlock Grid.Row="4" Grid.Column="0">Tertiary</TextBlock>
-                            <TextBlock Grid.Row="4" Grid.Column="0">Quaternary</TextBlock>
+                            <TextBlock Grid.Row="5" Grid.Column="0">Quaternary</TextBlock>
-                            <TextBlock Grid.Row="5" Grid.Column="0">Success</TextBlock>
+                            <TextBlock Grid.Row="6" Grid.Column="0">Success</TextBlock>
-                            <TextBlock Grid.Row="6" Grid.Column="0">Warning</TextBlock>
+                            <TextBlock Grid.Row="7" Grid.Column="0">Warning</TextBlock>
-                            <TextBlock Grid.Row="7" Grid.Column="0">Danger</TextBlock>
+                            <TextBlock Grid.Row="8" Grid.Column="0">Danger</TextBlock>
-                            <TextBlock Grid.Row="8" Grid.Column="0">Mark</TextBlock>
+                            <TextBlock Grid.Row="9" Grid.Column="0">Mark</TextBlock>
-                            <TextBlock Grid.Row="9" Grid.Column="0">Code</TextBlock>
+                            <TextBlock Grid.Row="10" Grid.Column="0">Code</TextBlock>
-                            <Label Grid.Row="1" Grid.Column="1">Text</Label>
+                            <Label Grid.Row="2" Grid.Column="1">Text</Label>
                             <Label
-                                Grid.Row="2"
+                                Grid.Row="3"
                                 Grid.Column="1"
                                 Classes="Secondary">
                                 Secondary
                             </Label>
                             <Label
-                                Grid.Row="3"
+                                Grid.Row="4"
                                 Grid.Column="1"
                                 Classes="Tertiary">
                                 Tertiary
                             </Label>
                             <Label
-                                Grid.Row="4"
+                                Grid.Row="5"
                                 Grid.Column="1"
                                 Classes="Quaternary">
                                 Quaternary
                             </Label>
                             <Label
-                                Grid.Row="5"
+                                Grid.Row="6"
                                 Grid.Column="1"
                                 Classes="Success">
                                 Success
                             </Label>
                             <Label
-                                Grid.Row="6"
+                                Grid.Row="7"
                                 Grid.Column="1"
                                 Classes="Warning">
                                 Warning
                             </Label>
                             <Label
-                                Grid.Row="7"
+                                Grid.Row="8"
                                 Grid.Column="1"
                                 Classes="Danger">
                                 Danger
                             </Label>
                             <Label
-                                Grid.Row="8"
+                                Grid.Row="9"
                                 Grid.Column="1"
                                 Classes="Mark">
                                 Default Mark
                             </Label>
                             <Label
-                                Grid.Row="9"
+                                Grid.Row="10"
                                 Grid.Column="1"
                                 Classes="Code">
                                 Code
@@ -102,51 +104,51 @@
                         <Grid
                             VerticalAlignment="Top"
                             ColumnDefinitions="Auto, *"
-                            RowDefinitions="*,*,*,*,*,*,*">
+                            RowDefinitions="*,*,*,*,*,*,*,*">
-                            <TextBlock Grid.Row="0" Grid.Column="0">Classes</TextBlock>
+                            <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
-                            <TextBlock Grid.Row="1" Grid.Column="0">H1</TextBlock>
+                            <TextBlock Grid.Row="2" Grid.Column="0">H1</TextBlock>
-                            <TextBlock Grid.Row="2" Grid.Column="0">H2</TextBlock>
+                            <TextBlock Grid.Row="3" Grid.Column="0">H2</TextBlock>
-                            <TextBlock Grid.Row="3" Grid.Column="0">H3</TextBlock>
+                            <TextBlock Grid.Row="4" Grid.Column="0">H3</TextBlock>
-                            <TextBlock Grid.Row="4" Grid.Column="0">H4</TextBlock>
+                            <TextBlock Grid.Row="5" Grid.Column="0">H4</TextBlock>
-                            <TextBlock Grid.Row="5" Grid.Column="0">H5</TextBlock>
+                            <TextBlock Grid.Row="6" Grid.Column="0">H5</TextBlock>
-                            <TextBlock Grid.Row="6" Grid.Column="0">H6</TextBlock>
+                            <TextBlock Grid.Row="7" Grid.Column="0">H6</TextBlock>
                             <Label
-                                Grid.Row="1"
+                                Grid.Row="2"
                                 Grid.Column="1"
                                 Classes="H1"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 1
                             </Label>
                             <Label
-                                Grid.Row="2"
+                                Grid.Row="3"
                                 Grid.Column="1"
                                 Classes="H2"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 2
                             </Label>
                             <Label
-                                Grid.Row="3"
+                                Grid.Row="4"
                                 Grid.Column="1"
                                 Classes="H3"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 3
                             </Label>
                             <Label
-                                Grid.Row="4"
+                                Grid.Row="5"
                                 Grid.Column="1"
                                 Classes="H4"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 4
                             </Label>
                             <Label
-                                Grid.Row="5"
+                                Grid.Row="6"
                                 Grid.Column="1"
                                 Classes="H5"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 5
                             </Label>
                             <Label
-                                Grid.Row="6"
+                                Grid.Row="7"
                                 Grid.Column="1"
                                 Classes="H6"
                                 Theme="{StaticResource TitleLabel}">

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

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

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

@@ -31,12 +31,12 @@
                 <PathIcon
                     Width="32"
                     Height="32"
-                    Data="{StaticResource SemiIconSemiLogo}" />
+                    Data="M10.6201 17.5C6.06377 17.5 2.37012 13.8063 2.37012 9.25C2.37012 4.69365 6.06377 1 10.6201 1V17.5ZM13.3701 6.5C17.9265 6.5 21.6201 10.1936 21.6201 14.75C21.6201 19.3063 17.9265 23 13.3701 23V6.5Z" />
                 <PathIcon
                     Width="10"
                     Height="10"
                     Margin="20,0"
-                    Data="{StaticResource SemiIconPlus}" />
+                    Data="M20.5 13.5C21.3284 13.5 22 12.8284 22 12C22 11.1716 21.3284 10.5 20.5 10.5L13.5 10.5L13.5 3.5C13.5 2.67157 12.8284 2 12 2C11.1716 2 10.5 2.67157 10.5 3.5L10.5 10.5L3.5 10.5C2.67157 10.5 2 11.1716 2 12C2 12.8284 2.67157 13.5 3.5 13.5L10.5 13.5V20.5C10.5 21.3284 11.1716 22 12 22C12.8284 22 13.5 21.3284 13.5 20.5V13.5L20.5 13.5Z" />
                 <Image Width="32" Height="32">
                     <Image.Source>
                         <DrawingImage>

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

@@ -9,7 +9,7 @@ public partial class Overview : UserControl
         InitializeComponent();
     }
 
-    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.2.1.2";
+    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.1.0";
 
     public string MainStyle { get; set; } =
         """
@@ -20,7 +20,7 @@ public partial class Overview : UserControl
         </Application.Styles>
         """;
 
-    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.2.1.2";
+    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.1.0";
 
     public string ColorPickerStyle { get; set; } =
         """
@@ -29,7 +29,7 @@ public partial class Overview : UserControl
         </Application.Styles>
         """;
 
-    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.2.1.2";
+    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.1.0";
 
     public string DataGridStyle { get; set; } =
         """
@@ -38,7 +38,7 @@ public partial class Overview : UserControl
         </Application.Styles>
         """;
 
-    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.10.1";
+    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.1.0";
 
     public string TreeDataGridStyle { get; set; } =
         """

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

@@ -17,11 +17,10 @@
     <UserControl.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude Source="../Themes/ToggleSwitch.axaml" />
+                <ResourceInclude Source="../Themes/ToggleButton.axaml" />
                 <ResourceInclude Source="../Controls/ColorItemControl.axaml" />
                 <ResourceInclude Source="../Controls/ColorDetailControl.axaml" />
                 <ResourceInclude Source="../Controls/FunctionalColorGroupControl.axaml" />
-                <ResourceInclude Source="../Controls/ShadowGroupControl.axaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </UserControl.Resources>
@@ -34,11 +33,11 @@
         PanePlacement="Right">
         <SplitView.Pane>
             <StackPanel>
-                <ToggleSwitch
+                <ToggleButton
                     Name="toggle"
                     HorizontalAlignment="Right"
                     IsChecked="True"
-                    Theme="{DynamicResource SplitViewToggleSwitch}" />
+                    Theme="{DynamicResource SplitViewToggleButton}" />
                 <Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
                     <Panel>
                         <TextBlock
@@ -116,6 +115,7 @@
                     <ItemsControl ItemsSource="{Binding FunctionalColors}">
                         <ItemsControl.ItemTemplate>
                             <DataTemplate>
+                                <!--    -->
                                 <controls:FunctionalColorGroupControl
                                     Title="{Binding Title}"
                                     DarkColors="{Binding DarkColors}"
@@ -123,20 +123,8 @@
                             </DataTemplate>
                         </ItemsControl.ItemTemplate>
                     </ItemsControl>
-
-                    <ItemsControl ItemsSource="{Binding Shadows}">
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate>
-                                <controls:ShadowGroupControl
-                                    Title="{Binding Title}"
-                                    DarkShadows="{Binding DarkShadows}"
-                                    LightShadows="{Binding LightShadows}" />
-                            </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                    </ItemsControl>
-
                 </StackPanel>
             </ScrollViewer>
         </SplitView.Content>
     </SplitView>
-</UserControl>
+</UserControl>

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

@@ -13,16 +13,17 @@ public partial class PaletteDemo : UserControl
     public PaletteDemo()
     {
         InitializeComponent();
-        this.DataContext = new PaletteDemoViewModel();
+        
     }
 
     protected override async  void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
         base.OnApplyTemplate(e);
-        PaletteDemoViewModel? vm = this.DataContext as PaletteDemoViewModel;
+        PaletteDemoViewModel? vm = new PaletteDemoViewModel();
         await Dispatcher.UIThread.InvokeAsync(() =>
         {
-            vm?.InitializeResources();
+            vm.InitializeResources();
         });
+        DataContext = vm;
     }
 }

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

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

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

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

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

@@ -11,6 +11,11 @@
     <Design.DataContext>
         <pages:SplitViewDemoViewModel />
     </Design.DataContext>
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <StreamGeometry x:Key="NavigationMenuExpandIconGlyph">M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z</StreamGeometry>
+        </ResourceDictionary>
+    </UserControl.Resources>
     <Border>
         <Grid ColumnDefinitions="*,400">
             <Border Grid.Column="1" VerticalAlignment="Top" Margin="10 0 0 0">
@@ -109,9 +114,20 @@
                                 ItemsSource="{Binding Songs}" />
                             <ToggleSwitch
                                 Grid.Row="2"
-                                Theme="{DynamicResource SplitViewToggleSwitch}"
+                                Theme="{DynamicResource ButtonToggleSwitch}"
-                                HorizontalAlignment="Left"
                                 IsChecked="{Binding #SplitView.IsPaneOpen}">
+                                <ToggleSwitch.OnContent>
+                                    <PathIcon
+                                        Width="16"
+                                        Height="16"
+                                        Data="{StaticResource NavigationMenuExpandIconGlyph}" />
+                                </ToggleSwitch.OnContent>
+                                <ToggleSwitch.OffContent>
+                                    <PathIcon
+                                        Width="16"
+                                        Height="16"
+                                        Data="{StaticResource NavigationMenuExpandIconGlyph}" />
+                                </ToggleSwitch.OffContent>
                             </ToggleSwitch>
                         </Grid>
                     </SplitView.Pane>

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

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

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

@@ -4,56 +4,80 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:system="clr-namespace:System;assembly=netstandard"
     d:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
     <ScrollViewer>
         <StackPanel HorizontalAlignment="Left" Spacing="20">
             <TextBox Width="300" />
-            <TextBox Width="300" InnerLeftContent="https://" InnerRightContent=".com" />
+            <TextBox Width="300" Classes="Large" />
-            <TextBox Width="300" Classes="clearButton" Text="click to clear" />
+            <TextBox Width="300" Classes="Small" />
-            <TextBox Width="300" Classes="revealPasswordButton" Text="123456" />
+            <TextBox Width="300" Watermark="Please use this" />
+            <TextBox Width="300" InnerLeftContent="http://" />
+            <TextBox Width="300" InnerRightContent=".com" />
+            <TextBox
+                Width="500"
+                InnerLeftContent="http://"
+                InnerRightContent=".com" />
+            <TextBox Width="300" Classes="clearButton" />
+            <TextBox Width="300" PasswordChar="*" />
             <TextBox
                 Width="300"
                 Classes="ClearButton RevealPasswordButton"
-                InnerLeftContent="https://"
+                PasswordChar="*"
-                InnerRightContent=".com"
                 Text="123456" />
+            <TextBox
+                Width="500"
+                InnerLeftContent="http://"
+                InnerRightContent=".com"
+                IsEnabled="False" />
+            <TextBox
+                Width="500"
+                Classes="Bordered"
+                InnerLeftContent="http://"
+                InnerRightContent=".com" />
+            <TextBox
+                Width="500"
+                Classes="Bordered"
+                InnerLeftContent="http://"
+                InnerRightContent=".com"
+                IsEnabled="False" />
             <StackPanel Orientation="Horizontal">
                 <TextBox
-                    Width="100"
+                    Width="150"
                     Classes="Large"
                     Watermark="Large" />
                 <TextBox
-                    Width="100"
+                    Width="150"
                     Watermark="Default" />
                 <TextBox
-                    Width="100"
+                    Width="150"
                     Classes="Small"
                     Watermark="Small" />
             </StackPanel>
 
             <StackPanel Orientation="Horizontal">
                 <TextBox
-                    Width="100"
+                    Width="150"
                     IsEnabled="False"
                     Watermark="Disabled" />
                 <TextBox
-                    Width="100"
+                    Width="150"
                     Classes="Bordered"
                     Watermark="Bordered" />
                 <TextBox
-                    Width="100"
+                    Width="150"
                     Classes="Bordered"
                     IsEnabled="False" />
             </StackPanel>
-            <TextBox Width="300" Classes="TextArea" Watermark="TextArea TextBox" />
+            <TextBox Width="300" Classes="TextArea" />
             <TextBox
                 Width="300"
                 Theme="{StaticResource LooklessTextBox}"
                 Watermark="Lookless TextBox"
-                InnerLeftContent="https://"
+                InnerLeftContent="http://"
                 InnerRightContent=".com" />
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>

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

@@ -4,36 +4,18 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.Pages"
-    x:DataType="vm:ThemeVariantDemoViewModel"
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <Design.DataContext>
+    <Grid>
-        <vm:ThemeVariantDemoViewModel />
+        <ThemeVariantScope Name="scope">
-    </Design.DataContext>
-    <StackPanel>
-        <Border Theme="{StaticResource CardBorder}">
-            <StackPanel>
-                <ListBox
-                    Theme="{StaticResource CardRadioGroupListBox}"
-                    ItemsSource="{Binding ThemeVariants}"
-                    SelectedItem="{Binding SelectedThemeVariant}" />
-                <DatePicker />
-                <CalendarDatePicker />
-            </StackPanel>
-        </Border>
-        <ThemeVariantScope RequestedThemeVariant="{Binding SelectedThemeVariant}">
             <Border Theme="{StaticResource CardBorder}">
                 <StackPanel>
-                    <ListBox
-                        Theme="{StaticResource CardRadioGroupListBox}"
-                        ItemsSource="{Binding ThemeVariants}"
-                        SelectedItem="{Binding SelectedThemeVariant}" />
                     <DatePicker />
                     <CalendarDatePicker />
+                    <ToggleSwitch Content="Switch Theme" IsCheckedChanged="Switch_OnIsCheckedChanged" />
                 </StackPanel>
             </Border>
         </ThemeVariantScope>
-    </StackPanel>
+    </Grid>
-</UserControl>
+</UserControl>

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

@@ -1,7 +1,8 @@
-using System.Collections.Generic;
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Avalonia.Markup.Xaml;
 using Avalonia.Styling;
-using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -10,22 +11,10 @@ public partial class ThemeVariantDemo : UserControl
     public ThemeVariantDemo()
     {
         InitializeComponent();
-        this.DataContext = new ThemeVariantDemoViewModel();
     }
-}
 
-public partial class ThemeVariantDemoViewModel : ObservableObject
+    private void Switch_OnIsCheckedChanged(object sender, RoutedEventArgs e)
-{
+    {
-    [ObservableProperty] private ThemeVariant? _selectedThemeVariant;
+        scope.RequestedThemeVariant = scope.ActualThemeVariant == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
-
+    }
-    public IEnumerable<ThemeVariant> ThemeVariants =>
-    [
-        ThemeVariant.Default,
-        ThemeVariant.Light,
-        ThemeVariant.Dark,
-        SemiTheme.Aquatic,
-        SemiTheme.Desert,
-        SemiTheme.Dusk,
-        SemiTheme.NightSky,
-    ];
 }

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

@@ -9,7 +9,6 @@
     mc:Ignorable="d">
     <StackPanel Spacing="20">
         <TimePicker />
-        <TimePicker UseSeconds="True" />
         <TimePicker Classes="ClearButton" />
         <TimePicker MinuteIncrement="15" />
         <TimePicker ClockIdentifier="24HourClock" />

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

@@ -8,23 +8,22 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <StackPanel Spacing="8" Margin="20">
-        <StackPanel Orientation="Horizontal">
+        <ToggleSwitch
-            <StackPanel>
+            Content="Content"
-                <ToggleSwitch />
+            OffContent="OffContent"
-                <ToggleSwitch IsChecked="True" />
+            OnContent="OnContent" />
-            </StackPanel>
+        <ToggleSwitch
-            <StackPanel>
+            Content="Content"
-                <ToggleSwitch IsEnabled="False" />
+            IsChecked="True"
-                <ToggleSwitch IsChecked="True" IsEnabled="False" />
+            IsEnabled="False"
-            </StackPanel>
+            OffContent="OffContent"
-        </StackPanel>
+            OnContent="OnContent" />
-        <StackPanel Orientation="Horizontal">
+        <ToggleSwitch
-            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" />
+            Content="Content"
-            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsChecked="True"/>
+            IsChecked="False"
-            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsEnabled="False" />
+            IsEnabled="False"
-            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsEnabled="False" IsChecked="True" />
+            OffContent="OffContent"
-        </StackPanel>
+            OnContent="OnContent" />
-
         <StackPanel Orientation="Horizontal">
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" />
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" IsChecked="True" />
@@ -45,8 +44,8 @@
         </StackPanel>
 
         <StackPanel Orientation="Horizontal">
-            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开"/>
-            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜"/>
         </StackPanel>
         <StackPanel Orientation="Horizontal">
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" IsChecked="True" />
@@ -61,35 +60,21 @@
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" Classes="Large" IsChecked="True" />
         </StackPanel>
 
-        <StackPanel Orientation="Horizontal">
+        <ToggleSwitch Theme="{DynamicResource ButtonToggleSwitch}">
-            <ToggleSwitch
+            <ToggleSwitch.OnContent>
-                HorizontalAlignment="Left"
+                <PathIcon
-                Padding="8"
+                    Width="16"
-                Theme="{DynamicResource ButtonToggleSwitch}"
+                    Height="16"
-                Foreground="{DynamicResource ButtonDefaultTertiaryForeground}">
+                    Data="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13"
-                <ToggleSwitch.Content>
+                    Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                    <PathIcon
+            </ToggleSwitch.OnContent>
-                        Theme="{DynamicResource InnerPathIcon}"
+            <ToggleSwitch.OffContent>
-                        Data="{StaticResource SemiIconSidebar}" />
+                <PathIcon
-                </ToggleSwitch.Content>
+                    Width="16"
-            </ToggleSwitch>
+                    Height="16"
-            <ToggleSwitch
+                    Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z"
-                HorizontalAlignment="Left"
+                    Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                Padding="8"
+            </ToggleSwitch.OffContent>
-                Theme="{DynamicResource ButtonToggleSwitch}"
+        </ToggleSwitch>
-                Foreground="{DynamicResource ButtonDefaultTertiaryForeground}">
-                <ToggleSwitch.OnContent>
-                    <PathIcon
-                        Theme="{DynamicResource InnerPathIcon}"
-                        Data="{StaticResource SemiIconSun}" />
-                </ToggleSwitch.OnContent>
-                <ToggleSwitch.OffContent>
-                    <PathIcon
-                        Theme="{DynamicResource InnerPathIcon}"
-                        Data="{StaticResource SemiIconMoon}" />
-                </ToggleSwitch.OffContent>
-            </ToggleSwitch>
-        </StackPanel>
-
     </StackPanel>
 </UserControl>

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

@@ -14,7 +14,7 @@
         <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(AvaloniaVersion)" />
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
         <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="CommunityToolkit.Mvvm" Version="$(CommunityToolkitVersion)" />
+        <PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2" />
     </ItemGroup>
 
     <ItemGroup>

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

@@ -1,6 +1,8 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
     <ControlTheme x:Key="NavigationTab" TargetType="TabControl">
-        <Setter Property="Template">
+        <Setter Property="TabControl.Template">
+            <!--    -->
             <ControlTemplate TargetType="TabControl">
                 <Border
                     HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
@@ -10,10 +12,7 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <DockPanel>
-                        <ScrollViewer
+                        <ScrollViewer DockPanel.Dock="Left" VerticalScrollBarVisibility="Auto">
-                            DockPanel.Dock="Left"
-                            Name="PART_ScrollViewer"
-                            VerticalScrollBarVisibility="Auto">
                             <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
                                 <ItemsPresenter Name="PART_ItemsPresenter">
                                     <ItemsPresenter.ItemsPanel>
@@ -22,8 +21,7 @@
                                         </ItemsPanelTemplate>
                                     </ItemsPresenter.ItemsPanel>
                                 </ItemsPresenter>
-                                <Border Name="PART_BorderSeparator"
+                                <Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
-                                        Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
                             </Panel>
                         </ScrollViewer>
                         <ContentPresenter
@@ -42,8 +40,5 @@
             <Setter Property="VerticalAlignment" Value="Stretch" />
             <Setter Property="HorizontalAlignment" Value="Left" />
         </Style>
-        <Style Selector="^.Dismiss /template/ ScrollViewer#PART_ScrollViewer">
-            <Setter Property="IsVisible" Value="False" />
-        </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

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

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

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

@@ -1,31 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <ControlTheme x:Key="ThemeToggleSwitch"
-                  BasedOn="{StaticResource ButtonToggleSwitch}"
-                  TargetType="ToggleSwitch">
-        <Setter Property="Padding" Value="8" />
-        <Setter Property="OnContent" Value="{Binding $self.Content}" />
-        <Setter Property="OnContentTemplate">
-            <DataTemplate>
-                <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
-            </DataTemplate>
-        </Setter>
-        <Setter Property="OffContent" Value="{Binding $self.Content}" />
-        <Setter Property="OffContentTemplate">
-            <DataTemplate>
-                <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
-            </DataTemplate>
-        </Setter>
-        <Setter Property="ContentTemplate">
-            <DataTemplate>
-                <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
-            </DataTemplate>
-        </Setter>
-    </ControlTheme>
-
-    <ControlTheme x:Key="SplitViewToggleSwitch"
-                  BasedOn="{StaticResource ThemeToggleSwitch}"
-                  TargetType="ToggleSwitch">
-        <Setter Property="Content"
-                Value="M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z" />
-    </ControlTheme>
-</ResourceDictionary>

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

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

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

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

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

@@ -2,26 +2,25 @@ using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
 using Avalonia.Media;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Messaging;
-using Semi.Avalonia.Tokens.Palette;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
-public class PaletteDemoViewModel : ObservableObject
+public class PaletteDemoViewModel: ObservableObject
 {
     private readonly string[] _predefinedColorNames =
-    [
+    {
         "Red", "Pink", "Purple", "Violet", "Indigo",
         "Blue", "LightBlue", "Cyan", "Teal", "Green",
         "LightGreen", "Lime", "Yellow", "Amber", "Orange",
         "Grey"
-    ];
+    };
-
     private readonly IResourceDictionary? _lightResourceDictionary;
     private readonly IResourceDictionary? _darkResourceDictionary;
-
+    
     private ColorItemViewModel _selectedColor = null!;
 
     public ColorItemViewModel SelectedColor
@@ -29,31 +28,27 @@ public class PaletteDemoViewModel : ObservableObject
         get => _selectedColor;
         set => SetProperty(ref _selectedColor, value);
     }
-
+    
-
+    
     private ObservableCollection<ColorListViewModel>? _lightLists;
-
     public ObservableCollection<ColorListViewModel>? LightLists
     {
         get => _lightLists;
         set => SetProperty(ref _lightLists, value);
     }
-
     private ObservableCollection<ColorListViewModel>? _darkLists;
-
     public ObservableCollection<ColorListViewModel>? DarkLists
     {
         get => _darkLists;
         set => SetProperty(ref _darkLists, value);
     }
 
-    public ObservableCollection<FunctionalColorGroupViewModel> FunctionalColors { get; set; } = [];
+    public ObservableCollection<FunctionalColorGroupViewModel> FunctionalColors { get; set; } = new();
-    public ObservableCollection<ShadowGroupViewModel> Shadows { get; set; } = [];
 
     public PaletteDemoViewModel()
     {
-        _lightResourceDictionary = new Light();
+        _lightResourceDictionary  = new Light.Palette();
-        _darkResourceDictionary = new Dark();
+        _darkResourceDictionary = new Dark.Palette();
         WeakReferenceMessenger.Default.Register<PaletteDemoViewModel, ColorItemViewModel>(this, OnClickColorItem);
     }
 
@@ -61,20 +56,18 @@ public class PaletteDemoViewModel : ObservableObject
     {
         InitializePalette();
         InitializeFunctionalColors();
-        InitializeShadows();
     }
 
     private void InitializePalette()
     {
-        LightLists = [];
+        LightLists = new ObservableCollection<ColorListViewModel>();
         foreach (var color in _predefinedColorNames)
         {
             ColorListViewModel s = new ColorListViewModel();
             s.Initialize(_lightResourceDictionary, color, true);
             LightLists.Add(s);
         }
-
+        DarkLists = new ObservableCollection<ColorListViewModel>();
-        DarkLists = [];
         foreach (var color in _predefinedColorNames)
         {
             ColorListViewModel s = new ColorListViewModel();
@@ -99,19 +92,13 @@ public class PaletteDemoViewModel : ObservableObject
         FunctionalColors.Add(new FunctionalColorGroupViewModel("Border", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BorderTokens));
         FunctionalColors.Add(new FunctionalColorGroupViewModel("Disabled", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DisabledTokens));
     }
-
-    private void InitializeShadows()
-    {
-        Shadows.Add(new ShadowGroupViewModel("Shadow", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.ShadowTokens));
-    }
-
     private void OnClickColorItem(PaletteDemoViewModel vm, ColorItemViewModel item)
     {
         SelectedColor = item;
     }
 }
 
-public class ColorListViewModel : ObservableObject
+public class ColorListViewModel: ObservableObject
 {
     private ObservableCollection<ColorItemViewModel>? _colors;
 
@@ -128,18 +115,17 @@ public class ColorListViewModel : ObservableObject
         get => _seriesName;
         set => SetProperty(ref _seriesName, value);
     }
-
+    
     internal void Initialize(IResourceDictionary? resourceDictionary, string color, bool light)
     {
         if (resourceDictionary is null)
         {
             return;
         }
-
         SeriesName = color;
-        Color = [];
+        Color = new ObservableCollection<ColorItemViewModel>();
-
+        
-        for (var i = 0; i < 10; i++)
+        for (int i = 0; i < 10; i++)
         {
             var key = "Semi" + color + i;
             if (resourceDictionary.TryGetValue(key, out var value))
@@ -150,7 +136,7 @@ public class ColorListViewModel : ObservableObject
                     var item = new ColorItemViewModel(name, brush, key, light, i);
                     item.ColorResourceKey = item.ResourceKey + "Color";
                     Color.Add(item);
-                }
+                } 
             }
         }
     }
@@ -158,16 +144,15 @@ public class ColorListViewModel : ObservableObject
 
 public class ColorItemViewModel : ObservableObject
 {
-    private IBrush _brush = null!;
 
+    private IBrush _brush = null!;
     public IBrush Brush
     {
         get => _brush;
         set => SetProperty(ref _brush, value);
     }
-
+    
     private IBrush _textBrush = null!;
-
     public IBrush TextBrush
     {
         get => _textBrush;
@@ -175,7 +160,6 @@ public class ColorItemViewModel : ObservableObject
     }
 
     private string _colorDisplayName = null!;
-
     public string ColorDisplayName
     {
         get => _colorDisplayName;
@@ -205,9 +189,8 @@ public class ColorItemViewModel : ObservableObject
         get => _hex;
         set => SetProperty(ref _hex, value);
     }
-
+    
-    public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light,
+    public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light, int index)
-        int index)
     {
         ColorDisplayName = colorDisplayName;
         Brush = brush;
@@ -227,22 +210,22 @@ public class ColorItemViewModel : ObservableObject
 public class FunctionalColorGroupViewModel : ObservableObject
 {
     private string _title = null!;
-
     public string Title
     {
         get => _title;
         set => SetProperty(ref _title, value);
     }
 
-    public ObservableCollection<ColorItemViewModel> LightColors { get; set; } = [];
+    public ObservableCollection<ColorItemViewModel> LightColors { get; set; } = new();
-    public ObservableCollection<ColorItemViewModel> DarkColors { get; set; } = [];
+    public ObservableCollection<ColorItemViewModel> DarkColors { get; set; } = new();
 
-    public FunctionalColorGroupViewModel(string title, IResourceDictionary? lightDictionary,
+    public FunctionalColorGroupViewModel(string title, IResourceDictionary? lightDictionary, IResourceDictionary? darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
-        IResourceDictionary? darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
     {
         Title = title;
-        foreach (var (key, name) in tokens)
+        foreach (var token in tokens)
         {
+            string key = token.Item1;
+            string name = token.Item2;
             if (lightDictionary?.TryGetValue(key, out var lightValue) ?? false)
             {
                 if (lightValue is ISolidColorBrush lightBrush)
@@ -262,203 +245,125 @@ public class FunctionalColorGroupViewModel : ObservableObject
     }
 }
 
-public class ShadowItemViewModel : ObservableObject
-{
-    private string _shadowDisplayName = null!;
-
-    public string ShadowDisplayName
-    {
-        get => _shadowDisplayName;
-        set => SetProperty(ref _shadowDisplayName, value);
-    }
-
-    private string _resourceKey = null!;
-
-    public string ResourceKey
-    {
-        get => _resourceKey;
-        set => SetProperty(ref _resourceKey, value);
-    }
-
-    private string _boxShadowValue = null!;
-
-    public string BoxShadowValue
-    {
-        get => _boxShadowValue;
-        set => SetProperty(ref _boxShadowValue, value);
-    }
-
-    public ShadowItemViewModel(string shadowDisplayName, BoxShadows boxShadows, string resourceKey)
-    {
-        ShadowDisplayName = shadowDisplayName;
-        ResourceKey = resourceKey;
-        BoxShadowValue = boxShadows.ToString();
-    }
-}
-
-public class ShadowGroupViewModel : ObservableObject
-{
-    private string _title = null!;
-
-    public string Title
-    {
-        get => _title;
-        set => SetProperty(ref _title, value);
-    }
-
-    public ObservableCollection<ShadowItemViewModel> LightShadows { get; set; } = [];
-    public ObservableCollection<ShadowItemViewModel> DarkShadows { get; set; } = [];
-
-
-    public ShadowGroupViewModel(string title, IResourceDictionary? lightDictionary,
-        IResourceDictionary? darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
-    {
-        Title = title;
-        foreach (var (key, name) in tokens)
-        {
-            if (lightDictionary?.TryGetValue(key, out var lightValue) ?? false)
-            {
-                if (lightValue is BoxShadows lightShadow)
-                {
-                    LightShadows.Add(new ShadowItemViewModel(name, lightShadow, key));
-                }
-            }
-
-            if (darkDictionary?.TryGetValue(key, out var darkValue) ?? false)
-            {
-                if (darkValue is BoxShadows darkShadow)
-                {
-                    DarkShadows.Add(new ShadowItemViewModel(name, darkShadow, key));
-                }
-            }
-        }
-    }
-}
-
 public static class ColorTokens
 {
     public static IReadOnlyList<Tuple<string, string>> PrimaryTokens { get; } = new List<Tuple<string, string>>
     {
-        new("SemiColorPrimary", "Primary"),
+        new ("SemiColorPrimary", "Primary"),
-        new("SemiColorPrimaryPointerover", "Primary Pointerover"),
+        new ("SemiColorPrimaryPointerover", "Primary Pointerover"),
-        new("SemiColorPrimaryActive", "Primary Active"),
+        new ("SemiColorPrimaryActive", "Primary Active"),
-        new("SemiColorPrimaryDisabled", "Primary Disabled"),
+        new ("SemiColorPrimaryDisabled", "Primary Disabled"),
-        new("SemiColorPrimaryLight", "Primary Light"),
+        new ("SemiColorPrimaryLight", "Primary Light"),
-        new("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
+        new ("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
-        new("SemiColorPrimaryLightActive", "Primary Light Active"),
+        new ("SemiColorPrimaryLightActive", "Primary Light Active"),
     };
 
     public static IReadOnlyList<Tuple<string, string>> SecondaryTokens { get; } = new List<Tuple<string, string>>
     {
-        new("SemiColorSecondary", "Secondary"),
+        new ("SemiColorSecondary", "Secondary"),
-        new("SemiColorSecondaryPointerover", "Secondary Pointerover"),
+        new ("SemiColorSecondaryPointerover", "Secondary Pointerover"),
-        new("SemiColorSecondaryActive", "Secondary Active"),
+        new ("SemiColorSecondaryActive", "Secondary Active"),
-        new("SemiColorSecondaryDisabled", "Secondary Disabled"),
+        new ("SemiColorSecondaryDisabled", "Secondary Disabled"),
-        new("SemiColorSecondaryLight", "Secondary Light"),
+        new ("SemiColorSecondaryLight", "Secondary Light"),
-        new("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"),
+        new ("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"),
-        new("SemiColorSecondaryLightActive", "Secondary Light Active"),
+        new ("SemiColorSecondaryLightActive", "Secondary Light Active"),
     };
-
+    
     public static IReadOnlyList<Tuple<string, string>> TertiaryTokens { get; } = new List<Tuple<string, string>>
     {
-        new("SemiColorTertiary", "Tertiary"),
+        new ("SemiColorTertiary", "Tertiary"),
-        new("SemiColorTertiaryPointerover", "Tertiary Pointerover"),
+        new ("SemiColorTertiaryPointerover", "Tertiary Pointerover"),
-        new("SemiColorTertiaryActive", "Tertiary Active"),
+        new ("SemiColorTertiaryActive", "Tertiary Active"),
-        new("SemiColorTertiaryLight", "Tertiary Light"),
+        new ("SemiColorTertiaryLight", "Tertiary Light"),
-        new("SemiColorTertiaryLightPointerover", "Tertiary Light Pointerover"),
+        new ("SemiColorTertiaryLightPointerover", "Tertiary Light Pointerover"),
-        new("SemiColorTertiaryLightActive", "Tertiary Light Active"),
+        new ("SemiColorTertiaryLightActive", "Tertiary Light Active"),
     };
-
+    
     public static IReadOnlyList<Tuple<string, string>> InformationTokens { get; } = new List<Tuple<string, string>>
     {
-        new("SemiColorInformation", "Information"),
+        new ("SemiColorInformation", "Information"),
-        new("SemiColorInformationPointerover", "Information Pointerover"),
+        new ("SemiColorInformationPointerover", "Information Pointerover"),
-        new("SemiColorInformationActive", "Information Active"),
+        new ("SemiColorInformationActive", "Information Active"),
-        new("SemiColorInformationDisabled", "Information Disabled"),
+        new ("SemiColorInformationDisabled", "Information Disabled"),
-        new("SemiColorInformationLight", "Information Light"),
+        new ("SemiColorInformationLight", "Information Light"),
-        new("SemiColorInformationLightPointerover", "Information Light Pointerover"),
+        new ("SemiColorInformationLightPointerover", "Information Light Pointerover"),
-        new("SemiColorInformationLightActive", "Information Light Active"),
+        new ("SemiColorInformationLightActive", "Information Light Active"),
     };
-
+    
     public static IReadOnlyList<Tuple<string, string>> SuccessTokens { get; } = new List<Tuple<string, string>>
     {
-        new("SemiColorSuccess", "Success"),
+        new ("SemiColorSuccess", "Success"),
-        new("SemiColorSuccessPointerover", "Success Pointerover"),
+        new ("SemiColorSuccessPointerover", "Success Pointerover"),
-        new("SemiColorSuccessActive", "Success Active"),
+        new ("SemiColorSuccessActive", "Success Active"),
-        new("SemiColorSuccessDisabled", "Success Disabled"),
+        new ("SemiColorSuccessDisabled", "Success Disabled"),
-        new("SemiColorSuccessLight", "Success Light"),
+        new ("SemiColorSuccessLight", "Success Light"),
-        new("SemiColorSuccessLightPointerover", "Success Light Pointerover"),
+        new ("SemiColorSuccessLightPointerover", "Success Light Pointerover"),
-        new("SemiColorSuccessLightActive", "Success Light Active"),
+        new ("SemiColorSuccessLightActive", "Success Light Active"),
     };
-
+    
     public static IReadOnlyList<Tuple<string, string>> WarningTokens { get; } = new List<Tuple<string, string>>
     {
-        new("SemiColorWarning", "Warning"),
+        new ("SemiColorWarning", "Warning"),
-        new("SemiColorWarningPointerover", "Warning Pointerover"),
+        new ("SemiColorWarningPointerover", "Warning Pointerover"),
-        new("SemiColorWarningActive", "Warning Active"),
+        new ("SemiColorWarningActive", "Warning Active"),
-        new("SemiColorWarningLight", "Warning Light"),
+        new ("SemiColorWarningLight", "Warning Light"),
-        new("SemiColorWarningLightPointerover", "Warning Light Pointerover"),
+        new ("SemiColorWarningLightPointerover", "Warning Light Pointerover"),
-        new("SemiColorWarningLightActive", "Warning Light Active"),
+        new ("SemiColorWarningLightActive", "Warning Light Active"),
     };
-
+    
     public static IReadOnlyList<Tuple<string, string>> DangerTokens { get; } = new List<Tuple<string, string>>
     {
-        new("SemiColorDanger", "Danger"),
+        new ("SemiColorDanger", "Danger"),
-        new("SemiColorDangerPointerover", "Danger Pointerover"),
+        new ("SemiColorDangerPointerover", "Danger Pointerover"),
-        new("SemiColorDangerActive", "Danger Active"),
+        new ("SemiColorDangerActive", "Danger Active"),
-        new("SemiColorDangerLight", "Danger Light"),
+        new ("SemiColorDangerLight", "Danger Light"),
-        new("SemiColorDangerLightPointerover", "Danger Light Pointerover"),
+        new ("SemiColorDangerLightPointerover", "Danger Light Pointerover"),
-        new("SemiColorDangerLightActive", "Danger Light Active"),
+        new ("SemiColorDangerLightActive", "Danger Light Active"),
     };
 
     public static IReadOnlyList<Tuple<string, string>> TextTokens { get; } = new List<Tuple<string, string>>
     {
-        new("SemiColorText0", "Text 0"),
+        new ("SemiColorText0", "Text 0"),
-        new("SemiColorText1", "Text 1"),
+        new ("SemiColorText1", "Text 1"),
-        new("SemiColorText2", "Text 2"),
+        new ("SemiColorText2", "Text 2"),
-        new("SemiColorText3", "Text 3"),
+        new ("SemiColorText3", "Text 3"),
     };
-
+    
     public static IReadOnlyList<Tuple<string, string>> LinkTokens { get; } = new List<Tuple<string, string>>
     {
-        new("SemiColorLink", "Link"),
+        new ("SemiColorLink", "Link"),
-        new("SemiColorLinkPointerover", "Link Pointerover"),
+        new ("SemiColorLinkPointerover", "Link Pointerover"),
-        new("SemiColorLinkActive", "Link Active"),
+        new ("SemiColorLinkActive", "Link Active"),
-        new("SemiColorLinkVisited", "Link Visited"),
+        new ("SemiColorLinkVisited", "Link Visited"),
     };
-
+    
     public static IReadOnlyList<Tuple<string, string>> BackgroundTokens { get; } = new List<Tuple<string, string>>
     {
-        new("SemiColorBackground0", "Background 0"),
+        new ("SemiColorBackground0", "Background 0"),
-        new("SemiColorBackground1", "Background 1"),
+        new ("SemiColorBackground1", "Background 1"),
-        new("SemiColorBackground2", "Background 2"),
+        new ("SemiColorBackground2", "Background 2"),
-        new("SemiColorBackground3", "Background 3"),
+        new ("SemiColorBackground3", "Background 3"),
-        new("SemiColorBackground4", "Background 4"),
+        new ("SemiColorBackground4", "Background 4"),
     };
-
+    
     public static IReadOnlyList<Tuple<string, string>> FillTokens { get; } = new List<Tuple<string, string>>
     {
-        new("SemiColorFill0", "Fill 0"),
+        new ("SemiColorFill0", "Fill 0"),
-        new("SemiColorFill1", "Fill 1"),
+        new ("SemiColorFill1", "Fill 1"),
-        new("SemiColorFill2", "Fill 2"),
+        new ("SemiColorFill2", "Fill 2"),
     };
-
+    
     public static IReadOnlyList<Tuple<string, string>> BorderTokens { get; } = new List<Tuple<string, string>>
     {
-        new("SemiColorBorder", "Border"),
+        new ("SemiColorBorder", "Border"),
     };
-
+    
     public static IReadOnlyList<Tuple<string, string>> DisabledTokens { get; } = new List<Tuple<string, string>>
     {
-        new("SemiColorDisabledText", "Disabled Text"),
+        new ("SemiColorDisabledText", "Disabled Text"),
-        new("SemiColorDisabledBorder", "Disabled Border"),
+        new ("SemiColorDisabledBorder", "Disabled Border"),
-        new("SemiColorDisabledBackground", "Disabled Background"),
+        new ("SemiColorDisabledBackground", "Disabled Background"),
-        new("SemiColorDisabledFill", "Disabled Fill"),
+        new ("SemiColorDisabledFill", "Disabled Fill"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> ShadowTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorShadow", "Shadow"),
-        new("SemiShadowElevated", "Shadow Elevated"),
     };
+    
 }

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

@@ -5,89 +5,77 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:pages="using:Semi.Avalonia.Demo.Pages"
-    xmlns:views="clr-namespace:Semi.Avalonia.Demo.Views"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    x:CompileBindings="True"
-    x:DataType="views:MainViewModel"
     mc:Ignorable="d">
     <UserControl.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceInclude Source="../Themes/TabMenu.axaml" />
-                <ResourceInclude Source="../Themes/ToggleSwitch.axaml" />
+                <ResourceInclude Source="../Themes/ToggleButton.axaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </UserControl.Resources>
     <Grid RowDefinitions="Auto, *">
         <Border
-            Grid.Row="0"
             Margin="8"
             Padding="12,4"
             Theme="{DynamicResource CardBorder}">
-            <Panel>
+            <Grid VerticalAlignment="Center" ColumnDefinitions="*, Auto">
-                <StackPanel Orientation="Horizontal" Spacing="8">
+                <StackPanel Grid.Column="0" Orientation="Horizontal">
-                    <ToggleSwitch
+                    <TextBlock
-                        Name="ExpandButton"
-                        Theme="{DynamicResource SplitViewToggleSwitch}" />
-                    <SelectableTextBlock
                         VerticalAlignment="Center"
                         Classes="H6"
                         Text="Semi Avalonia"
-                        Theme="{DynamicResource TitleSelectableTextBlock}" />
+                        Theme="{DynamicResource TitleTextBlock}" />
-                    <SelectableTextBlock
+                    <TextBlock
+                        Margin="8,0"
                         VerticalAlignment="Center"
                         Text="/" />
-                    <SelectableTextBlock
+                    <TextBlock
+                        Margin="8,0"
                         VerticalAlignment="Center"
                         Classes="Secondary"
-                        Text="{ReflectionBinding #tab.SelectedItem.Header}" />
+                        Text="{Binding #tab.SelectedItem.Header}" />
                 </StackPanel>
-                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
+                <StackPanel Grid.Column="1" Orientation="Horizontal">
-                    <StackPanel.Styles>
+                    <Button Theme="{DynamicResource BorderlessButton}" Click="OpenDocumentation">
-                        <Style Selector="Button">
+                        <PathIcon
-                            <Setter Property="Theme" Value="{DynamicResource BorderlessButton}" />
+                            Width="16"
-                            <Setter Property="Padding" Value="8" />
+                            Height="16"
-                            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
+                            Data="M12 21.5C10.65 20.65 8.2 20 6.5 20C4.85 20 3.15 20.3 1.75 21.05C1.65 21.1 1.6 21.1 1.5 21.1C1.25 21.1 1 20.85 1 20.6V6C1.6 5.55 2.25 5.25 3 5C4.11 4.65 5.33 4.5 6.5 4.5C8.45 4.5 10.55 4.9 12 6C13.45 4.9 15.55 4.5 17.5 4.5C18.67 4.5 19.89 4.65 21 5C21.75 5.25 22.4 5.55 23 6V20.6C23 20.85 22.75 21.1 22.5 21.1C22.4 21.1 22.35 21.1 22.25 21.05C20.85 20.3 19.15 20 17.5 20C15.8 20 13.35 20.65 12 21.5M12 8V19.5C13.35 18.65 15.8 18 17.5 18C18.7 18 19.9 18.15 21 18.5V7C19.9 6.65 18.7 6.5 17.5 6.5C15.8 6.5 13.35 7.15 12 8M13 11.5C14.11 10.82 15.6 10.5 17.5 10.5C18.41 10.5 19.26 10.59 20 10.78V9.23C19.13 9.08 18.29 9 17.5 9C15.73 9 14.23 9.28 13 9.84V11.5M17.5 11.67C15.79 11.67 14.29 11.93 13 12.46V14.15C14.11 13.5 15.6 13.16 17.5 13.16C18.54 13.16 19.38 13.24 20 13.4V11.9C19.13 11.74 18.29 11.67 17.5 11.67M20 14.57C19.13 14.41 18.29 14.33 17.5 14.33C15.67 14.33 14.17 14.6 13 15.13V16.82C14.11 16.16 15.6 15.83 17.5 15.83C18.54 15.83 19.38 15.91 20 16.07V14.57Z"
-                        </Style>
+                            Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                        <Style Selector="ToggleSwitch">
-                            <Setter Property="Theme" Value="{DynamicResource ThemeToggleSwitch}" />
-                            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                        </Style>
-                        <Style Selector="PathIcon">
-                            <Setter Property="Theme" Value="{DynamicResource InnerPathIcon}" />
-                        </Style>
-                    </StackPanel.Styles>
-
-                    <Button Command="{Binding OpenUrlCommand}" CommandParameter="{Binding DocumentationUrl}">
-                        <PathIcon Data="{StaticResource SemiIconGlobe}" />
                     </Button>
-
+                    <Button Theme="{DynamicResource BorderlessButton}" Click="OpenRepository">
-                    <Button Command="{Binding OpenUrlCommand}" CommandParameter="{Binding RepoUrl}">
+                        <PathIcon
-                        <PathIcon Data="{StaticResource SemiIconGithubLogo}" />
+                            Width="16"
+                            Height="16"
+                            Data="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
+                            Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
                     </Button>
-
                     <ToggleSwitch
-                        Command="{Binding ToggleThemeCommand}"
+                        Grid.Column="1"
-                        OnContent="{StaticResource SemiIconMoon}"
+                        Padding="4"
-                        OffContent="{StaticResource SemiIconSun}" />
+                        IsCheckedChanged="ToggleButton_OnIsCheckedChanged"
-
+                        Theme="{DynamicResource ButtonToggleSwitch}">
-                    <Button>
+                        <ToggleSwitch.OnContent>
-                        <PathIcon Data="{StaticResource SemiIconMenu}" />
+                            <PathIcon
-                        <Button.Flyout>
+                                Width="16"
-                            <MenuFlyout Placement="Bottom" ItemsSource="{Binding MenuItems}" />
+                                Height="16"
-                        </Button.Flyout>
+                                Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z"
-                        <Button.Styles>
+                                Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                            <Style Selector="MenuItem" x:DataType="views:MenuItemViewModel">
+                        </ToggleSwitch.OnContent>
-                                <Setter Property="Header" Value="{Binding Header}" />
+                        <ToggleSwitch.OffContent>
-                                <Setter Property="ItemsSource" Value="{Binding Items}" />
+                            <PathIcon
-                                <Setter Property="Command" Value="{Binding Command}" />
+                                Width="16"
-                                <Setter Property="CommandParameter" Value="{Binding CommandParameter}" />
+                                Height="16"
-                            </Style>
+                                Data="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13"
-                        </Button.Styles>
+                                Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                    </Button>
+                        </ToggleSwitch.OffContent>
+                    </ToggleSwitch>
                 </StackPanel>
-            </Panel>
+            </Grid>
+
         </Border>
         <TabControl
             Name="tab"
@@ -96,7 +84,6 @@
             Padding="20,0,0,0"
             HorizontalAlignment="Stretch"
             TabStripPlacement="Left"
-            Classes.Dismiss="{Binding #ExpandButton.IsChecked}"
             Theme="{DynamicResource NavigationTab}">
             <TabItem Header="Overview">
                 <pages:Overview />
@@ -104,12 +91,6 @@
             <TabItem Header="Palette">
                 <pages:PaletteDemo />
             </TabItem>
-            <TabItem Header="HighContrastTheme">
-                <pages:HighContrastDemo />
-            </TabItem>
-            <TabItem Header="Icon">
-                <pages:IconDemo />
-            </TabItem>
             <TabItem Header="AutoCompleteBox">
                 <pages:AutoCompleteBoxDemo />
             </TabItem>
@@ -156,7 +137,7 @@
                 <pages:FlyoutDemo />
             </TabItem>
             <TabItem Header="GridSplitter">
-                <pages:GridSplitterDemo />
+                <pages:GridSplitter />
             </TabItem>
             <TabItem Header="HeaderedContentControl">
                 <pages:HeaderedContentControlDemo />
@@ -239,4 +220,4 @@
         </TabControl>
     </Grid>
 
-</UserControl>
+</UserControl>

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

@@ -1,13 +1,8 @@
 using System;
-using System.Collections.Generic;
-using System.Threading.Tasks;
-using System.Windows.Input;
 using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Controls.ApplicationLifetimes;
+using Avalonia.Interactivity;
 using Avalonia.Styling;
-using CommunityToolkit.Mvvm.ComponentModel;
-using CommunityToolkit.Mvvm.Input;
 
 namespace Semi.Avalonia.Demo.Views;
 
@@ -16,98 +11,31 @@ public partial class MainView : UserControl
     public MainView()
     {
         InitializeComponent();
-        this.DataContext = new MainViewModel();
-    }
-}
-
-public partial class MainViewModel : ObservableObject
-{
-    public string DocumentationUrl => "https://docs.irihi.tech/semi";
-    public string RepoUrl => "https://github.com/irihitech/Semi.Avalonia";
-    public IReadOnlyList<MenuItemViewModel> MenuItems { get; }
-
-    public MainViewModel()
-    {
-        MenuItems =
-        [
-            new MenuItemViewModel
-            {
-                Header = "High Contrast Theme",
-                Items =
-                [
-                    new MenuItemViewModel
-                    {
-                        Header = "Aquatic",
-                        Command = SelectThemeCommand,
-                        CommandParameter = SemiTheme.Aquatic
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Desert",
-                        Command = SelectThemeCommand,
-                        CommandParameter = SemiTheme.Desert
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Dusk",
-                        Command = SelectThemeCommand,
-                        CommandParameter = SemiTheme.Dusk
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "NightSky",
-                        Command = SelectThemeCommand,
-                        CommandParameter = SemiTheme.NightSky
-                    },
-                ]
-            }
-        ];
     }
 
-    [RelayCommand]
+    private void ToggleButton_OnIsCheckedChanged(object sender, RoutedEventArgs e)
-    private void ToggleTheme()
-    {
-        var app = Application.Current;
-        if (app is null) return;
-        var theme = app.ActualThemeVariant;
-        app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
-    }
-
-    [RelayCommand]
-    private void SelectTheme(object? obj)
     {
         var app = Application.Current;
         if (app is not null)
         {
-            app.RequestedThemeVariant = obj as ThemeVariant;
+            var theme = app.ActualThemeVariant;
+            app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
         }
     }
 
-    [RelayCommand]
+    private async void OpenRepository(object sender, RoutedEventArgs e)
-    private static async Task OpenUrl(string url)
     {
-        var launcher = ResolveDefaultTopLevel()?.Launcher;
+        var top = TopLevel.GetTopLevel(this);
-        if (launcher is not null)
+        if (top is null) return;
-        {
+        var launcher = top.Launcher;
-            await launcher.LaunchUriAsync(new Uri(url));
+        await launcher.LaunchUriAsync(new Uri("https://github.com/irihitech/Semi.Avalonia"));
-        }
     }
 
-    private static TopLevel? ResolveDefaultTopLevel()
+    private async void OpenDocumentation(object sender, RoutedEventArgs e)
     {
-        return Application.Current?.ApplicationLifetime switch
+        var top = TopLevel.GetTopLevel(this);
-        {
+        if (top is null) return;
-            IClassicDesktopStyleApplicationLifetime desktopLifetime => desktopLifetime.MainWindow,
+        var launcher = top.Launcher;
-            ISingleViewApplicationLifetime singleView => TopLevel.GetTopLevel(singleView.MainView),
+        await launcher.LaunchUriAsync(new Uri("https://docs.irihi.tech/semi"));
-            _ => null
-        };
     }
-}
-
-public class MenuItemViewModel
-{
-    public string? Header { get; set; }
-    public ICommand? Command { get; set; }
-    public object? CommandParameter { get; set; }
-    public IList<MenuItemViewModel>? Items { get; set; }
 }

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

@@ -1,6 +1,5 @@
 using Avalonia;
 using System;
-using Avalonia.Media;
 
 namespace Semi.Avalonia.TreeDataGrid.Demo;
 
@@ -11,21 +10,12 @@ class Program
     // yet and stuff might break.
     [STAThread]
     public static void Main(string[] args) => BuildAvaloniaApp()
-        .With(new FontManagerOptions
-        {
-            FontFallbacks =
-            [
-                new FontFallback
-                {
-                    FontFamily = new FontFamily("Microsoft YaHei")
-                }
-            ]
-        })
         .StartWithClassicDesktopLifetime(args);
 
     // Avalonia configuration, don't remove; also used by visual designer.
     public static AppBuilder BuildAvaloniaApp()
         => AppBuilder.Configure<App>()
             .UsePlatformDetect()
+            .WithInterFont()
             .LogToTrace();
 }

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

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

src/Package.props

@@ -3,14 +3,14 @@
         <TargetFrameworks>net6.0;net8.0;netstandard2.0</TargetFrameworks>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <Version>11.2.1.2</Version>
+        <Version>11.1.0.3</Version>
         <Authors>IRIHI Technology Co., Ltd.</Authors>
         <Description>Avalonia Theme inspired by Semi Design.</Description>
         <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>
         <PackageLicenseExpression>MIT</PackageLicenseExpression>
         <PackageIcon>irihi.png</PackageIcon>
         <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
-        <AvaloniaVersion>11.2.1</AvaloniaVersion>
+        <AvaloniaVersion>11.1.0</AvaloniaVersion>
     </PropertyGroup>
 
     <ItemGroup>

src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml

@@ -5,6 +5,7 @@
     xmlns:converters="using:Avalonia.Controls.Converters"
     xmlns:primitives="using:Avalonia.Controls.Primitives"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <ResourceDictionary.MergedDictionaries>
         <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml" />
@@ -51,6 +52,7 @@
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
+                    Padding="0,0,10,0"
                     HorizontalContentAlignment="Stretch"
                     VerticalContentAlignment="Stretch"
                     ClipToBounds="True"
@@ -80,7 +82,7 @@
                                 <!--  Backgrounds  -->
                                 <!--  TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}"  -->
                                 <Border
-                                    Name="ContentBackgroundBorder"
+                                    x:Name="ContentBackgroundBorder"
                                     Grid.Row="0"
                                     Grid.RowSpan="2"
                                     Height="{TemplateBinding Height}"
@@ -92,7 +94,7 @@
                                     CornerRadius="{TemplateBinding CornerRadius}" />
 
                                 <TabControl
-                                    Name="PART_TabControl"
+                                    x:Name="PART_TabControl"
                                     Grid.Row="0"
                                     Padding="0"
                                     VerticalAlignment="Stretch"
@@ -129,7 +131,7 @@
                                                 <ColumnDefinition Width="Auto" MinWidth="32" />
                                             </Grid.ColumnDefinitions>
                                             <primitives:ColorSlider
-                                                Name="ColorSpectrumThirdComponentSlider"
+                                                x:Name="ColorSpectrumThirdComponentSlider"
                                                 Grid.Column="0"
                                                 Margin="0,0,12,0"
                                                 HorizontalAlignment="Center"
@@ -143,7 +145,7 @@
                                                 IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                                 Orientation="Vertical" />
                                             <primitives:ColorSpectrum
-                                                Name="ColorSpectrum"
+                                                x:Name="ColorSpectrum"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Stretch"
@@ -157,7 +159,7 @@
                                                 MinValue="{TemplateBinding MinValue}"
                                                 Shape="{TemplateBinding ColorSpectrumShape}" />
                                             <primitives:ColorSlider
-                                                Name="ColorSpectrumAlphaSlider"
+                                                x:Name="ColorSpectrumAlphaSlider"
                                                 Grid.Column="2"
                                                 Margin="12,0,0,0"
                                                 HorizontalAlignment="Center"
@@ -281,7 +283,7 @@
                                                     CornerRadius="3">
                                                     <Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
                                                         <RadioButton
-                                                            Name="RgbRadioButton"
+                                                            x:Name="RgbRadioButton"
                                                             Grid.Column="0"
                                                             HorizontalContentAlignment="Center"
                                                             VerticalContentAlignment="Center"
@@ -293,7 +295,7 @@
                                                                                         Mode=TwoWay}"
                                                             Theme="{DynamicResource ColorViewRadioButton}" />
                                                         <RadioButton
-                                                            Name="HsvRadioButton"
+                                                            x:Name="HsvRadioButton"
                                                             Grid.Column="1"
                                                             HorizontalContentAlignment="Center"
                                                             VerticalContentAlignment="Center"
@@ -307,7 +309,7 @@
                                                     </Grid>
                                                 </Border>
                                                 <TextBox
-                                                    Name="PART_HexTextBox"
+                                                    x:Name="PART_HexTextBox"
                                                     Grid.Column="2"
                                                     Height="32"
                                                     HorizontalAlignment="Stretch"
@@ -319,7 +321,7 @@
                                             <!--  Color component editing controls  -->
                                             <!--  Component 1 RGB:Red HSV:Hue  -->
                                             <NumericUpDown
-                                                Name="Component1NumericUpDown"
+                                                x:Name="Component1NumericUpDown"
                                                 Grid.Row="2"
                                                 Grid.Column="0"
                                                 Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -334,7 +336,7 @@
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component1Slider}" />
                                             <primitives:ColorSlider
-                                                Name="Component1Slider"
+                                                x:Name="Component1Slider"
                                                 Grid.Row="2"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
@@ -350,7 +352,7 @@
                                                 TickFrequency="1" />
                                             <!--  Component 2 RGB:Green HSV:Saturation  -->
                                             <NumericUpDown
-                                                Name="Component2NumericUpDown"
+                                                x:Name="Component2NumericUpDown"
                                                 Grid.Row="3"
                                                 Grid.Column="0"
                                                 Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -365,7 +367,7 @@
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component2Slider}" />
                                             <primitives:ColorSlider
-                                                Name="Component2Slider"
+                                                x:Name="Component2Slider"
                                                 Grid.Row="3"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
@@ -381,7 +383,7 @@
                                                 TickFrequency="1" />
                                             <!--  Component 3 RGB:Blue HSV:Value  -->
                                             <NumericUpDown
-                                                Name="Component3NumericUpDown"
+                                                x:Name="Component3NumericUpDown"
                                                 Grid.Row="4"
                                                 Grid.Column="0"
                                                 Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -396,7 +398,7 @@
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component3Slider}" />
                                             <primitives:ColorSlider
-                                                Name="Component3Slider"
+                                                x:Name="Component3Slider"
                                                 Grid.Row="4"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
@@ -412,7 +414,7 @@
                                                 TickFrequency="1" />
                                             <!--  Alpha Component  -->
                                             <NumericUpDown
-                                                Name="AlphaComponentNumericUpDown"
+                                                x:Name="AlphaComponentNumericUpDown"
                                                 Grid.Row="5"
                                                 Grid.Column="0"
                                                 Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -434,7 +436,7 @@
                                                 </NumericUpDown.IsVisible>
                                             </NumericUpDown>
                                             <primitives:ColorSlider
-                                                Name="AlphaComponentSlider"
+                                                x:Name="AlphaComponentSlider"
                                                 Grid.Row="5"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
@@ -472,10 +474,6 @@
                 </DropDownButton>
             </ControlTemplate>
         </Setter>
-        
-        <Style Selector="^ /template/ DropDownButton">
-            <Setter Property="Padding" Value="0 0 10 0"></Setter>
-        </Style>
     </ControlTheme>
 
     <ControlTheme
@@ -526,6 +524,7 @@
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
+                    Padding="0,0,10,0"
                     HorizontalContentAlignment="Stretch"
                     VerticalContentAlignment="Stretch"
                     ClipToBounds="True"
@@ -559,7 +558,7 @@
                                     CornerRadius="8 8 0 0"
                                     ClipToBounds="True">
                                     <primitives:ColorSpectrum
-                                        Name="ColorSpectrum"
+                                        x:Name="ColorSpectrum"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
                                         Components="{TemplateBinding ColorSpectrumComponents}"
@@ -573,7 +572,7 @@
                                         Shape="{TemplateBinding ColorSpectrumShape}" />
                                 </Border>
                                 <primitives:ColorSlider
-                                    Name="ColorSpectrumThirdComponentSlider"
+                                    x:Name="ColorSpectrumThirdComponentSlider"
                                     Grid.Row="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
@@ -585,7 +584,7 @@
                                     Orientation="Horizontal" />
 
                                 <primitives:ColorSlider
-                                    Name="ColorSpectrumAlphaSlider"
+                                    x:Name="ColorSpectrumAlphaSlider"
                                     Grid.Row="2"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
@@ -612,32 +611,32 @@
                                         Height="20"
                                         CornerRadius="4" />
                                     <Panel
-                                        Name="PART_TextBoxPanel"
+                                        x:Name="PART_TextBoxPanel"
                                         Width="106"
                                         Margin="4 0 0 0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Center">
                                         <TextBox
-                                            Name="PART_HexTextBox"
+                                            x:Name="PART_HexTextBox"
                                             Classes="Small"
                                             InnerLeftContent="#"
                                             IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
                                             Text="{TemplateBinding Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
                                             MaxLength="8" />
                                         <TextBox
-                                            Name="PART_RgbaTextBox"
+                                            x:Name="PART_RgbaTextBox"
                                             Classes="Small"
                                             IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Rgba}"
                                             Text="{TemplateBinding Color, Converter={StaticResource ColorToTextConverter}, Mode=TwoWay}" />
                                         <TextBox
-                                            Name="PART_HsvaTextBox"
+                                            x:Name="PART_HsvaTextBox"
                                             Classes="Small"
                                             IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
                                             Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
                                     </Panel>
 
                                     <NumericUpDown
-                                        Name="AlphaComponentNumericUpDown"
+                                        x:Name="AlphaComponentNumericUpDown"
                                         Width="70"
                                         HorizontalAlignment="Right"
                                         VerticalAlignment="Center"
@@ -652,7 +651,7 @@
                                         IsVisible="{TemplateBinding IsAlphaVisible}"
                                         Value="{Binding #ColorSpectrumAlphaSlider.Value}" />
                                     <ComboBox
-                                        Name="ColorModelComboBox"
+                                        x:Name="ColorModelComboBox"
                                         Width="80"
                                         VerticalAlignment="Center"
                                         Classes="Small"

src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml

@@ -4,6 +4,7 @@
     xmlns:converters="using:Avalonia.Controls.Converters"
     xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <pc:AccentColorConverter x:Key="AccentColorConverter" />
     <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
     <converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight" />
@@ -30,7 +31,7 @@
                                 VerticalAlignment="Stretch"
                                 Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" />
                             <Border
-                                Name="PART_AccentDecrement2Border"
+                                x:Name="PART_AccentDecrement2Border"
                                 Grid.Column="0"
                                 Background="{TemplateBinding HsvColor,
                                                              Converter={StaticResource AccentColorConverter},
@@ -39,7 +40,7 @@
                                                                Converter={StaticResource LeftCornerRadiusFilterConverter}}"
                                 Tag="-2" />
                             <Border
-                                Name="PART_AccentDecrement1Border"
+                                x:Name="PART_AccentDecrement1Border"
                                 Grid.Column="1"
                                 Background="{TemplateBinding HsvColor,
                                                              Converter={StaticResource AccentColorConverter},
@@ -60,14 +61,14 @@
                                 VerticalAlignment="Stretch"
                                 Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" />
                             <Border
-                                Name="PART_AccentIncrement1Border"
+                                x:Name="PART_AccentIncrement1Border"
                                 Grid.Column="0"
                                 Background="{TemplateBinding HsvColor,
                                                              Converter={StaticResource AccentColorConverter},
                                                              ConverterParameter='1'}"
                                 Tag="1" />
                             <Border
-                                Name="PART_AccentIncrement2Border"
+                                x:Name="PART_AccentIncrement2Border"
                                 Grid.Column="1"
                                 Background="{TemplateBinding HsvColor,
                                                              Converter={StaticResource AccentColorConverter},

src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml

@@ -3,6 +3,8 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:converters="using:Avalonia.Controls.Converters"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
+
     <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
     <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
 

src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml

@@ -4,6 +4,7 @@
     xmlns:controls="using:Avalonia.Controls"
     xmlns:converters="using:Avalonia.Controls.Converters"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
     <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
     <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
@@ -15,16 +16,16 @@
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type ColorSpectrum}">
                     <Panel
-                        Name="PART_LayoutRoot"
+                        x:Name="PART_LayoutRoot"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch">
                         <Panel
-                            Name="PART_SizingPanel"
+                            x:Name="PART_SizingPanel"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center"
                             ClipToBounds="True">
                             <Rectangle
-                                Name="PART_SpectrumRectangle"
+                                x:Name="PART_SpectrumRectangle"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"
@@ -36,7 +37,7 @@
                                 RadiusY="{TemplateBinding CornerRadius,
                                                           Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Rectangle
-                                Name="PART_SpectrumOverlayRectangle"
+                                x:Name="PART_SpectrumOverlayRectangle"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"
@@ -48,7 +49,7 @@
                                 RadiusY="{TemplateBinding CornerRadius,
                                                           Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Ellipse
-                                Name="PART_SpectrumEllipse"
+                                x:Name="PART_SpectrumEllipse"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"
@@ -56,7 +57,7 @@
                                                             Converter={StaticResource EnumToBoolConverter},
                                                             ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
                             <Ellipse
-                                Name="PART_SpectrumOverlayEllipse"
+                                x:Name="PART_SpectrumOverlayEllipse"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"
@@ -64,24 +65,24 @@
                                                             Converter={StaticResource EnumToBoolConverter},
                                                             ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
                             <Canvas
-                                Name="PART_InputTarget"
+                                x:Name="PART_InputTarget"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Background="Transparent">
                                 <!--  Note: ToolTip.VerticalOffset is for touch devices to keep the tip above fingers  -->
                                 <Panel
-                                    Name="PART_SelectionEllipsePanel"
+                                    x:Name="PART_SelectionEllipsePanel"
                                     ToolTip.Placement="Top"
                                     ToolTip.VerticalOffset="-10">
                                     <Ellipse
-                                        Name="FocusEllipse"
+                                        x:Name="FocusEllipse"
                                         Margin="-2"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
                                         IsHitTestVisible="False"
                                         StrokeThickness="2" />
                                     <Ellipse
-                                        Name="SelectionEllipse"
+                                        x:Name="SelectionEllipse"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
                                         IsHitTestVisible="False"
@@ -92,7 +93,7 @@
                                 </Panel>
                             </Canvas>
                             <Rectangle
-                                Name="BorderRectangle"
+                                x:Name="BorderRectangle"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"
@@ -104,7 +105,7 @@
                                 RadiusY="{TemplateBinding CornerRadius,
                                                           Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Ellipse
-                                Name="BorderEllipse"
+                                x:Name="BorderEllipse"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"

src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml

@@ -90,7 +90,7 @@
                         ContentTemplate="{TemplateBinding ContentTemplate}"
                         CornerRadius="{TemplateBinding CornerRadius}" />
                     <Rectangle
-                        Name="BorderRectangle"
+                        x:Name="BorderRectangle"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         IsHitTestVisible="False"
@@ -124,7 +124,7 @@
         <Setter Property="RadioButton.Template">
             <ControlTemplate TargetType="RadioButton">
                 <ContentPresenter
-                    Name="PART_ContentPresenter"
+                    x:Name="PART_ContentPresenter"
                     Margin="{TemplateBinding Margin}"
                     Padding="{TemplateBinding Padding}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -174,7 +174,7 @@
                     <!--  Backgrounds  -->
                     <!--  TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}"  -->
                     <Border
-                        Name="ContentBackgroundBorder"
+                        x:Name="ContentBackgroundBorder"
                         Grid.Row="0"
                         Grid.RowSpan="2"
                         Height="{TemplateBinding Height}"
@@ -186,7 +186,7 @@
                         CornerRadius="{TemplateBinding CornerRadius}" />
 
                     <TabControl
-                        Name="PART_TabControl"
+                        x:Name="PART_TabControl"
                         Grid.Row="0"
                         Padding="0"
                         VerticalAlignment="Stretch"
@@ -223,7 +223,7 @@
                                     <ColumnDefinition Width="Auto" MinWidth="32" />
                                 </Grid.ColumnDefinitions>
                                 <primitives:ColorSlider
-                                    Name="ColorSpectrumThirdComponentSlider"
+                                    x:Name="ColorSpectrumThirdComponentSlider"
                                     Grid.Column="0"
                                     Margin="0,0,12,0"
                                     HorizontalAlignment="Center"
@@ -237,7 +237,7 @@
                                     IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                     Orientation="Vertical" />
                                 <primitives:ColorSpectrum
-                                    Name="ColorSpectrum"
+                                    x:Name="ColorSpectrum"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Stretch"
@@ -251,7 +251,7 @@
                                     MinValue="{TemplateBinding MinValue}"
                                     Shape="{TemplateBinding ColorSpectrumShape}" />
                                 <primitives:ColorSlider
-                                    Name="ColorSpectrumAlphaSlider"
+                                    x:Name="ColorSpectrumAlphaSlider"
                                     Grid.Column="2"
                                     Margin="12,0,0,0"
                                     HorizontalAlignment="Center"
@@ -347,7 +347,7 @@
                                         CornerRadius="3">
                                         <Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
                                             <RadioButton
-                                                Name="RgbRadioButton"
+                                                x:Name="RgbRadioButton"
                                                 Grid.Column="0"
                                                 HorizontalContentAlignment="Center"
                                                 VerticalContentAlignment="Center"
@@ -359,7 +359,7 @@
                                                                             Mode=TwoWay}"
                                                 Theme="{DynamicResource ColorViewRadioButton}" />
                                             <RadioButton
-                                                Name="HsvRadioButton"
+                                                x:Name="HsvRadioButton"
                                                 Grid.Column="1"
                                                 HorizontalContentAlignment="Center"
                                                 VerticalContentAlignment="Center"
@@ -373,7 +373,7 @@
                                         </Grid>
                                     </Border>
                                     <TextBox
-                                        Name="PART_HexTextBox"
+                                        x:Name="PART_HexTextBox"
                                         Grid.Column="2"
                                         Height="32"
                                         HorizontalAlignment="Stretch"
@@ -385,7 +385,7 @@
                                 <!--  Color component editing controls  -->
                                 <!--  Component 1 RGB:Red HSV:Hue  -->
                                 <NumericUpDown
-                                    Name="Component1NumericUpDown"
+                                    x:Name="Component1NumericUpDown"
                                     Grid.Row="2"
                                     Grid.Column="0"
                                     Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -400,7 +400,7 @@
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component1Slider}" />
                                 <primitives:ColorSlider
-                                    Name="Component1Slider"
+                                    x:Name="Component1Slider"
                                     Grid.Row="2"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
@@ -416,7 +416,7 @@
                                     TickFrequency="1" />
                                 <!--  Component 2 RGB:Green HSV:Saturation  -->
                                 <NumericUpDown
-                                    Name="Component2NumericUpDown"
+                                    x:Name="Component2NumericUpDown"
                                     Grid.Row="3"
                                     Grid.Column="0"
                                     Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -431,7 +431,7 @@
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component2Slider}" />
                                 <primitives:ColorSlider
-                                    Name="Component2Slider"
+                                    x:Name="Component2Slider"
                                     Grid.Row="3"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
@@ -447,7 +447,7 @@
                                     TickFrequency="1" />
                                 <!--  Component 3 RGB:Blue HSV:Value  -->
                                 <NumericUpDown
-                                    Name="Component3NumericUpDown"
+                                    x:Name="Component3NumericUpDown"
                                     Grid.Row="4"
                                     Grid.Column="0"
                                     Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -462,7 +462,7 @@
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component3Slider}" />
                                 <primitives:ColorSlider
-                                    Name="Component3Slider"
+                                    x:Name="Component3Slider"
                                     Grid.Row="4"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
@@ -478,7 +478,7 @@
                                     TickFrequency="1" />
                                 <!--  Alpha Component  -->
                                 <NumericUpDown
-                                    Name="AlphaComponentNumericUpDown"
+                                    x:Name="AlphaComponentNumericUpDown"
                                     Grid.Row="5"
                                     Grid.Column="0"
                                     Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -500,7 +500,7 @@
                                     </NumericUpDown.IsVisible>
                                 </NumericUpDown>
                                 <primitives:ColorSlider
-                                    Name="AlphaComponentSlider"
+                                    x:Name="AlphaComponentSlider"
                                     Grid.Row="5"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
@@ -584,7 +584,7 @@
                         CornerRadius="8 8 0 0"
                         ClipToBounds="True">
                         <primitives:ColorSpectrum
-                            Name="ColorSpectrum"
+                            x:Name="ColorSpectrum"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Components="{TemplateBinding ColorSpectrumComponents}"
@@ -598,7 +598,7 @@
                             Shape="{TemplateBinding ColorSpectrumShape}" />
                     </Border>
                     <primitives:ColorSlider
-                        Name="ColorSpectrumThirdComponentSlider"
+                        x:Name="ColorSpectrumThirdComponentSlider"
                         Grid.Row="1"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Center"
@@ -610,7 +610,7 @@
                         Orientation="Horizontal" />
 
                     <primitives:ColorSlider
-                        Name="ColorSpectrumAlphaSlider"
+                        x:Name="ColorSpectrumAlphaSlider"
                         Grid.Row="2"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Center"
@@ -637,32 +637,32 @@
                             Height="20"
                             CornerRadius="4" />
                         <Panel
-                            Name="PART_TextBoxPanel"
+                            x:Name="PART_TextBoxPanel"
                             Width="106"
                             Margin="4 0 0 0"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Center">
                             <TextBox
-                                Name="PART_HexTextBox"
+                                x:Name="PART_HexTextBox"
                                 Classes="Small"
                                 InnerLeftContent="#"
                                 IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
                                 Text="{TemplateBinding Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
                                 MaxLength="8" />
                             <TextBox
-                                Name="PART_RgbaTextBox"
+                                x:Name="PART_RgbaTextBox"
                                 Classes="Small"
                                 IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Rgba}"
                                 Text="{TemplateBinding Color, Converter={StaticResource ColorToTextConverter}, Mode=TwoWay}" />
                             <TextBox
-                                Name="PART_HsvaTextBox"
+                                x:Name="PART_HsvaTextBox"
                                 Classes="Small"
                                 IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
                                 Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
                         </Panel>
 
                         <NumericUpDown
-                            Name="AlphaComponentNumericUpDown"
+                            x:Name="AlphaComponentNumericUpDown"
                             Width="70"
                             HorizontalAlignment="Right"
                             VerticalAlignment="Center"
@@ -677,7 +677,7 @@
                             IsVisible="{TemplateBinding IsAlphaVisible}"
                             Value="{Binding #ColorSpectrumAlphaSlider.Value}" />
                         <ComboBox
-                            Name="ColorModelComboBox"
+                            x:Name="ColorModelComboBox"
                             Width="80"
                             VerticalAlignment="Center"
                             Classes="Small"

src/Semi.Avalonia.ColorPicker/Dark.axaml

@@ -17,5 +17,5 @@
 
     <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
 
-    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">inset 0 0 0 1 #1AFFFFFF, 0 4 14 #40000000</BoxShadows>
+    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1AFFFFFF</BoxShadows>
 </ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Light.axaml

@@ -17,5 +17,5 @@
 
     <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
 
-    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 1 #4A000000, 0 4 14 #1A000000</BoxShadows>
+    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1A000000</BoxShadows>
 </ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Semi.Avalonia.ColorPicker.csproj

@@ -4,7 +4,7 @@
 
     <PropertyGroup>
         <Title>Semi.Avalonia.ColorPicker</Title>
-        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 11.2.1.2</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Avalonia 11.1.0.3</PackageReleaseNotes>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">

src/Semi.Avalonia.ColorPicker/Shared.axaml

@@ -6,12 +6,15 @@
     <Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness>
     <x:Double x:Key="ColorViewNumericUpDownWidth">70</x:Double>
 
-    <StreamGeometry x:Key="ColorViewSpectrumIconGlyph">M1.22 20.77a4.24 4.24 0 0 1 .02-5.98l9.33-9.28-.94-.95a1.41 1.41 0 0 1 0-1.99 1.39 1.39 0 0 1 1.97 0l.95.97L14.9 1.2a4.16 4.16 0 0 1 5.89.02 4.24 4.24 0 0 1-.02 5.98l-2.3 2.28 1.02 1.02c.54.55.54 1.44 0 1.99-.55.55-1.43.55-1.97 0l-1.03-1.03-9.37 9.32a4.16 4.16 0 0 1-5.89-.02ZM12.54 7.49l1.97 1.99-9.35 9.3c-.55.55-1.42.55-1.97 0a1.41 1.41 0 0 1 .01-2l9.34-9.29Z</StreamGeometry>
+    <StreamGeometry x:Key="ColorViewSpectrumIconGlyph">
-    <StreamGeometry x:Key="ColorViewPaletteIconGlyph">M2 4c0-1.1.9-2 2-2h5a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm6 13.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm11.59-8.91L16.4 5.4a2 2 0 0 0-2.82 0L13 6v12l6.59-6.59a2 2 0 0 0 0-2.82ZM22 16a2 2 0 0 0-2-2l-8 8h8a2 2 0 0 0 2-2v-4Z</StreamGeometry>
+        M6.92,19L5,17.08L13.06,9L15,10.94M20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L13.84,6.41L11.91,4.5L10.5,5.91L11.92,7.33L3,16.25V21H7.75L16.67,12.08L18.09,13.5L19.5,12.09L17.58,10.17L20.7,7.05C21.1,6.65 21.1,6 20.71,5.63Z
-    <StreamGeometry x:Key="ColorViewComponentsIconGlyph">M4 6.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM9.5 3a1.5 1.5 0 1 0 0 3h11a1.5 1.5 0 0 0 0-3h-11ZM8 11.5c0-.83.67-1.5 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11A1.5 1.5 0 0 1 8 11.5Zm0 7c0-.83.67-1.5 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11A1.5 1.5 0 0 1 8 18.5Zm-2-7a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm-2 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z</StreamGeometry>
+    </StreamGeometry>
-    <!-- <StaticResource x:Key="ColorViewSpectrumIconGlyph" ResourceKey="SemiIconEyedropper" /> -->
+    <StreamGeometry x:Key="ColorViewPaletteIconGlyph">
-    <!-- <StaticResource x:Key="ColorViewPaletteIconGlyph" ResourceKey="SemiIconColorPalette" /> -->
+        M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z
-    <!-- <StaticResource x:Key="ColorViewComponentsIconGlyph" ResourceKey="SemiIconList" /> -->
+    </StreamGeometry>
+    <StreamGeometry x:Key="ColorViewComponentsIconGlyph">
+        M4 6.5C5.10457 6.5 6 5.60457 6 4.5C6 3.39543 5.10457 2.5 4 2.5C2.89543 2.5 2 3.39543 2 4.5C2 5.60457 2.89543 6.5 4 6.5ZM9.5 3C8.67157 3 8 3.67157 8 4.5C8 5.32843 8.67157 6 9.5 6H20.5C21.3284 6 22 5.32843 22 4.5C22 3.67157 21.3284 3 20.5 3H9.5ZM8 11.5C8 10.6716 8.67157 10 9.5 10H20.5C21.3284 10 22 10.6716 22 11.5C22 12.3284 21.3284 13 20.5 13H9.5C8.67157 13 8 12.3284 8 11.5ZM8 18.5C8 17.6716 8.67157 17 9.5 17H20.5C21.3284 17 22 17.6716 22 18.5C22 19.3284 21.3284 20 20.5 20H9.5C8.67157 20 8 19.3284 8 18.5ZM6 11.5C6 12.6046 5.10457 13.5 4 13.5C2.89543 13.5 2 12.6046 2 11.5C2 10.3954 2.89543 9.5 4 9.5C5.10457 9.5 6 10.3954 6 11.5ZM4 20.5C5.10457 20.5 6 19.6046 6 18.5C6 17.3954 5.10457 16.5 4 16.5C2.89543 16.5 2 17.3954 2 18.5C2 19.6046 2.89543 20.5 4 20.5Z
+    </StreamGeometry>
 
     <x:Double x:Key="ColorSliderWidth">16</x:Double>
     <CornerRadius x:Key="ColorSliderCornerRadius">6</CornerRadius>
@@ -24,7 +27,7 @@
     <CornerRadius x:Key="ColorPreviewerCornerRadius">3</CornerRadius>
 
     <colorPicker:SemiColorDarkPalette x:Key="SemiColorPalette" />
-
+    
     <PlacementMode x:Key="ColorPickerFlyoutPlacement">AnchorAndGravity</PlacementMode>
     <PlacementMode x:Key="SimpleColorPickerFlyoutPlacement">BottomEdgeAlignedLeft</PlacementMode>
 </ResourceDictionary>

src/Semi.Avalonia.DataGrid/DataGrid.axaml

@@ -3,6 +3,7 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:collections="using:Avalonia.Collections"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <ControlTheme x:Key="DataGridCellTextBlockTheme" TargetType="TextBlock">
         <Setter Property="Margin" Value="{DynamicResource DataGridCellTextBlockDefaultMargin}" />
         <Setter Property="VerticalAlignment" Value="Center" />
@@ -34,14 +35,14 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
-                    Name="CellBorder"
+                    x:Name="CellBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid Name="PART_CellRoot" ColumnDefinitions="*,Auto">
+                    <Grid x:Name="PART_CellRoot" ColumnDefinitions="*,Auto">
                         <Rectangle
-                            Name="CurrencyVisual"
+                            x:Name="CurrencyVisual"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Fill="Transparent"
@@ -50,7 +51,7 @@
                             Stroke="{DynamicResource DataGridCellCurrentBorderBrush}"
                             StrokeThickness="{DynamicResource DataGridCellVisualStrokeThickness}" />
                         <Panel
-                            Name="FocusVisual"
+                            x:Name="FocusVisual"
                             Grid.Column="0"
                             IsHitTestVisible="False"
                             IsVisible="False">
@@ -74,7 +75,7 @@
                             Foreground="{TemplateBinding Foreground}" />
 
                         <Rectangle
-                            Name="InvalidVisualElement"
+                            x:Name="InvalidVisualElement"
                             Grid.Column="0"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
@@ -116,7 +117,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="DataGridColumnHeader">
                 <Border
-                    Name="HeaderBorder"
+                    x:Name="HeaderBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -152,7 +153,7 @@
                             Fill="{TemplateBinding SeparatorBrush}"
                             IsVisible="{TemplateBinding AreSeparatorsVisible}" />
                         <Panel
-                            Name="FocusVisual"
+                            x:Name="FocusVisual"
                             Grid.Column="0"
                             IsHitTestVisible="False"
                             IsVisible="False">
@@ -203,7 +204,7 @@
         TargetType="DataGridColumnHeader">
         <Setter Property="Template">
             <ControlTemplate>
-                <Grid Name="TopLeftHeaderRoot" RowDefinitions="*,*,Auto">
+                <Grid x:Name="TopLeftHeaderRoot" RowDefinitions="*,*,Auto">
                     <Border
                         Grid.RowSpan="2"
                         BorderBrush="{DynamicResource DataGridLineBrush}"
@@ -227,7 +228,7 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Grid
-                    Name="PART_Root"
+                    x:Name="PART_Root"
                     ColumnDefinitions="Auto,*"
                     RowDefinitions="*,*,Auto">
                     <Border
@@ -237,18 +238,18 @@
                         BorderThickness="0,0,1,0">
                         <Grid Background="{TemplateBinding Background}">
                             <Rectangle
-                                Name="RowInvalidVisualElement"
+                                x:Name="RowInvalidVisualElement"
                                 Fill="{DynamicResource DataGridCellErrorBrush}"
                                 Opacity="0"
                                 Stretch="Fill" />
                             <Rectangle
-                                Name="BackgroundRectangle"
+                                x:Name="BackgroundRectangle"
                                 Fill="{DynamicResource DataGridRowBackground}"
                                 Stretch="Fill" />
                         </Grid>
                     </Border>
                     <Rectangle
-                        Name="HorizontalSeparator"
+                        x:Name="HorizontalSeparator"
                         Grid.Row="2"
                         Grid.Column="0"
                         Grid.ColumnSpan="2"
@@ -277,7 +278,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="DataGridRow">
                 <Border
-                    Name="RowBorder"
+                    x:Name="RowBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -295,7 +296,7 @@
                             Background="{DynamicResource DataGridRowBackground}"
                             CornerRadius="3" />
                         <Rectangle
-                            Name="InvalidVisualElement"
+                            x:Name="InvalidVisualElement"
                             Grid.ColumnSpan="2"
                             Fill="{DynamicResource DataGridRowErrorBackground}"
                             Opacity="0" />
@@ -406,11 +407,10 @@
                             Margin="4,0,0,0"
                             Foreground="{TemplateBinding Foreground}"
                             IsVisible="{TemplateBinding IsPropertyNameVisible}" />
-                        <ContentControl
+                        <TextBlock
-                            Name="PART_GroupKeyContentControl"
                             Margin="4,0,0,0"
                             Foreground="{TemplateBinding Foreground}"
-                            Content="{Binding Key}" />
+                            Text="{Binding Key}" />
                         <TextBlock
                             Name="PART_ItemCountElement"
                             Margin="4,0,0,0"
@@ -419,7 +419,7 @@
                     </StackPanel>
 
                     <Rectangle
-                        Name="CurrencyVisual"
+                        x:Name="CurrencyVisual"
                         Grid.Row="0"
                         Grid.Column="0"
                         HorizontalAlignment="Stretch"
@@ -430,7 +430,7 @@
                         Stroke="{DynamicResource DataGridRowGroupHeaderCurrentBorderBrush}"
                         StrokeThickness="{DynamicResource DataGridRowGroupHeaderVisualStrokeThickness}" />
                     <Panel
-                        Name="FocusVisual"
+                        x:Name="FocusVisual"
                         Grid.Row="0"
                         Grid.Column="0"
                         IsHitTestVisible="False"
@@ -453,7 +453,7 @@
                         DataGridFrozenGrid.IsFrozen="True" />
 
                     <Rectangle
-                        Name="PART_BottomGridLine"
+                        x:Name="PART_BottomGridLine"
                         Grid.Row="1"
                         Grid.Column="0"
                         Grid.ColumnSpan="5"
@@ -482,7 +482,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="DataGrid">
                 <Border
-                    Name="DataGridBorder"
+                    x:Name="DataGridBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -544,7 +544,7 @@
                                 Orientation="Horizontal" />
                         </Grid>
                         <Border
-                            Name="PART_DisabledVisualElement"
+                            x:Name="PART_DisabledVisualElement"
                             Grid.Row="0"
                             Grid.RowSpan="4"
                             Grid.Column="0"

src/Semi.Avalonia.DataGrid/Light.axaml

@@ -18,8 +18,8 @@
     <SolidColorBrush x:Key="DataGridDetailsPresenterBackground" Color="Transparent" />
 
     <SolidColorBrush x:Key="DataGridRowPointeroverBackground" Opacity="0.09" Color="#2E3238" />
-    <SolidColorBrush x:Key="DataGridRowSelectedBackground" Color="#EAF5FF" />
+    <SolidColorBrush x:Key="DataGridRowSelectedBackground" Opacity="0.2" Color="#EAF5FF" />
-    <SolidColorBrush x:Key="DataGridRowSelectedPointeroverBackground" Color="#CBE7FE" />
+    <SolidColorBrush x:Key="DataGridRowSelectedPointeroverBackground" Opacity="0.3" Color="#CBE7FE" />
     <SolidColorBrush x:Key="DataGridRowGroupHeaderExpandIconForeground" Opacity="0.62" Color="#1C1F23" />
     <SolidColorBrush x:Key="DataGridRowGroupHeaderBackground" Opacity="0.05" Color="#2E3238" />
 

src/Semi.Avalonia.DataGrid/Semi.Avalonia.DataGrid.csproj

@@ -4,7 +4,7 @@
     
     <PropertyGroup>
         <Title>Semi.Avalonia.DataGrid</Title>
-        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 11.2.1.2</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Avalonia 11.1.0.3</PackageReleaseNotes>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">

src/Semi.Avalonia.DataGrid/Shared.axaml

@@ -8,16 +8,13 @@
     <Thickness x:Key="DataGridColumnHeaderPadding">12 0 0 0</Thickness>
     <x:Double x:Key="DataGridColumnHeaderMinHeight">32</x:Double>
 
-    <StreamGeometry x:Key="DataGridColumnHeaderAscendingGlyph">m6.45 8.34 4.8-5.48a1 1 0 0 1 1.5 0l4.8 5.48A1 1 0 0 1 16.8 10H7.2a1 1 0 0 1-.75-1.66Z</StreamGeometry>
+    <StreamGeometry x:Key="DataGridColumnHeaderAscendingGlyph">M6.45096 8.34102L11.247 2.86102C11.3408 2.75361 11.4566 2.66753 11.5865 2.60854C11.7163 2.54956 11.8573 2.51904 12 2.51904C12.1426 2.51904 12.2836 2.54956 12.4135 2.60854C12.5433 2.66753 12.6591 2.75361 12.753 2.86102L17.549 8.34102C18.115 8.98802 17.655 10 16.796 10H7.20396C6.34396 10 5.88496 8.98802 6.45096 8.34102Z</StreamGeometry>
-    <StreamGeometry x:Key="DataGridColumnHeaderDescendingGlyph">m17.55 15.66-4.8 5.48a1 1 0 0 1-1.5 0l-4.8-5.48A1 1 0 0 1 7.2 14h9.6a1 1 0 0 1 .75 1.66Z</StreamGeometry>
+    <StreamGeometry x:Key="DataGridColumnHeaderDescendingGlyph">M17.549 15.659L12.753 21.139C12.6591 21.2464 12.5434 21.3325 12.4135 21.3915C12.2836 21.4505 12.1427 21.481 12 21.481C11.8574 21.481 11.7164 21.4505 11.5865 21.3915C11.4566 21.3325 11.3409 21.2464 11.247 21.139L6.45101 15.659C5.88501 15.011 6.34501 14 7.20401 14H16.796C17.656 14 18.115 15.012 17.549 15.659Z</StreamGeometry>
-    <!-- <StaticResource x:Key="DataGridColumnHeaderAscendingGlyph" ResourceKey="SemiIconCaretUp" /> -->
-    <!-- <StaticResource x:Key="DataGridColumnHeaderDescendingGlyph" ResourceKey="SemiIconCaretDown" /> -->
 
     <Thickness x:Key="DataGridRowHeaderMargin">8 0</Thickness>
     <Thickness x:Key="DataGridRowMargin">2</Thickness>
 
-    <StreamGeometry x:Key="DataGridRowGroupHeaderExpandIconGlyph">M7.44 19.8a1.5 1.5 0 0 1 0-2.13l5.66-5.65-5.66-5.66a1.5 1.5 0 1 1 2.12-2.12l6.72 6.72a1.5 1.5 0 0 1 0 2.12L9.56 19.8a1.5 1.5 0 0 1-2.12 0Z</StreamGeometry>
+    <StreamGeometry x:Key="DataGridRowGroupHeaderExpandIconGlyph">M7.43934 19.7957C6.85355 19.2099 6.85355 18.2601 7.43934 17.6744L13.0962 12.0175L7.43934 6.36065C6.85355 5.77486 6.85355 4.82511 7.43934 4.23933C8.02513 3.65354 8.97487 3.65354 9.56066 4.23933L16.2782 10.9568C16.864 11.5426 16.864 12.4924 16.2782 13.0782L9.56066 19.7957C8.97487 20.3815 8.02513 20.3815 7.43934 19.7957Z</StreamGeometry>
-    <!-- <StaticResource x:Key="DataGridRowGroupHeaderExpandIconGlyph" ResourceKey="SemiIconChevronRight" /> -->
 
     <x:Double x:Key="DataGridRowGroupHeaderVisualStrokeThickness">1</x:Double>
 </ResourceDictionary>

src/Semi.Avalonia.TreeDataGrid/Dark.axaml

@@ -1,4 +1,5 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
     <SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Opacity="0.08" Color="White" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBackground" Opacity="0.16" Color="White" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPressedBackground" Opacity="0.20" Color="White" />

src/Semi.Avalonia.TreeDataGrid/Index.axaml

@@ -1,9 +1,10 @@
 <Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
     <Styles.Resources>
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
-                <ResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.TreeDataGrid/Light.axaml" />
+                <MergeResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.TreeDataGrid/Light.axaml" />
-                <ResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.TreeDataGrid/Dark.axaml" />
+                <MergeResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.TreeDataGrid/Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceInclude Source="avares://Semi.Avalonia.TreeDataGrid/TreeDataGrid.axaml" />

src/Semi.Avalonia.TreeDataGrid/Light.axaml

@@ -1,4 +1,5 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
     <SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Opacity="0.08" Color="#1C1F23" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBackground" Opacity="0.09" Color="#2E3238" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPressedBackground" Opacity="0.13" Color="#2E3238" />

src/Semi.Avalonia.TreeDataGrid/Semi.Avalonia.TreeDataGrid.csproj

@@ -4,14 +4,14 @@
         <TargetFramework>net6.0</TargetFramework>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <Version>11.0.10.1</Version>
+        <PackageReleaseNotes>Update to Avalonia 11.1-rc1</PackageReleaseNotes>
-        <PackageReleaseNotes>Update to 11.0.10.1</PackageReleaseNotes>
         <Authors>IRIHI Technology Co., Ltd.</Authors>
         <Description>Avalonia Theme inspired by Semi Design.</Description>
         <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>
         <PackageLicenseExpression>MIT</PackageLicenseExpression>
         <PackageIcon>irihi.png</PackageIcon>
         <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
+        <AvaloniaVersion>11.0.0</AvaloniaVersion>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
@@ -19,7 +19,7 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Controls.TreeDataGrid" Version="11.0.10"/>
+        <PackageReference Include="Avalonia.Controls.TreeDataGrid" Version="$(AvaloniaVersion)"/>
         <None Include="irihi.png" Pack="true" PackagePath=""/>
     </ItemGroup>
 

src/Semi.Avalonia.TreeDataGrid/Shared.axaml

@@ -1,9 +1,9 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StreamGeometry x:Key="TreeDataGridSortIconAscendingPath">m6.45 8.34 4.8-5.48a1 1 0 0 1 1.5 0l4.8 5.48A1 1 0 0 1 16.8 10H7.2a1 1 0 0 1-.75-1.66Z</StreamGeometry>
+    <!--  Add Resources Here  -->
-    <StreamGeometry x:Key="TreeDataGridSortIconDescendingPath">m17.55 15.66-4.8 5.48a1 1 0 0 1-1.5 0l-4.8-5.48A1 1 0 0 1 7.2 14h9.6a1 1 0 0 1 .75 1.66Z</StreamGeometry>
+    <StreamGeometry x:Key="TreeDataGridSortIconDescendingPath">
-    <StreamGeometry x:Key="TreeDataGridItemCollapsedChevronPathData">m9.66 3.44 8.97 7.8a1 1 0 0 1 0 1.51l-8.97 7.81A1 1 0 0 1 8 19.81V4.19a1 1 0 0 1 1.66-.75Z</StreamGeometry>
+        M17.549 15.659L12.753 21.139C12.6591 21.2464 12.5434 21.3325 12.4135 21.3915C12.2836 21.4505 12.1427 21.481 12 21.481C11.8574 21.481 11.7164 21.4505 11.5865 21.3915C11.4566 21.3325 11.3409 21.2464 11.247 21.139L6.45101 15.659C5.88501 15.011 6.34501 14 7.20401 14H16.796C17.656 14 18.115 15.012 17.549 15.659Z
-    <!-- <StaticResource x:Key="TreeDataGridSortIconAscendingPath" ResourceKey="SemiIconCaretUp"/> -->
+    </StreamGeometry>
-    <!-- <StaticResource x:Key="TreeDataGridSortIconDescendingPath" ResourceKey="SemiIconCaretDown"/> -->
+    <StreamGeometry x:Key="TreeDataGridSortIconAscendingPath">M6.45096 8.34102L11.247 2.86102C11.3408 2.75361 11.4566 2.66753 11.5865 2.60854C11.7163 2.54956 11.8573 2.51904 12 2.51904C12.1426 2.51904 12.2836 2.54956 12.4135 2.60854C12.5433 2.66753 12.6591 2.75361 12.753 2.86102L17.549 8.34102C18.115 8.98802 17.655 10 16.796 10H7.20396C6.34396 10 5.88496 8.98802 6.45096 8.34102Z</StreamGeometry>
-    <!-- <StaticResource x:Key="TreeDataGridItemCollapsedChevronPathData" ResourceKey="SemiIconTreeTriangleRight"/> -->
+    <StreamGeometry x:Key="TreeDataGridItemCollapsedChevronPathData">M9.65618 3.44015L18.6322 11.2454C19.0906 11.644 19.0906 12.356 18.6322 12.7546L9.65618 20.5598C9.00895 21.1226 8 20.6629 8 19.8052V4.19475C8 3.33705 9.00895 2.87734 9.65618 3.44015Z</StreamGeometry>
     <Thickness x:Key="TreeDataGridRowMargin">2</Thickness>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia.TreeDataGrid/TreeDataGrid.axaml

@@ -2,6 +2,7 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:conv="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls.TreeDataGrid">
+    <!--  Add Resources Here  -->
     <Design.PreviewWith>
         <StackPanel Margin="20">
             <TreeDataGridColumnHeader Header="123" />
@@ -11,7 +12,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="TreeDataGrid">
                 <Border
-                    Name="RootBorder"
+                    x:Name="RootBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -23,7 +24,7 @@
                             HorizontalScrollBarVisibility="Hidden"
                             IsVisible="{TemplateBinding ShowColumnHeaders}"
                             VerticalScrollBarVisibility="Disabled">
-                            <Border Name="ColumnHeadersPresenterBorder">
+                            <Border x:Name="ColumnHeadersPresenterBorder">
                                 <TreeDataGridColumnHeadersPresenter
                                     Name="PART_ColumnHeadersPresenter"
                                     ElementFactory="{TemplateBinding ElementFactory}"
@@ -173,7 +174,7 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
-                    Name="CellBorder"
+                    x:Name="CellBorder"
                     Padding="{TemplateBinding Padding}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
@@ -205,7 +206,7 @@
                     VerticalAlignment="Center"
                     Background="Transparent">
                     <PathIcon
-                        Name="ChevronPath"
+                        x:Name="ChevronPath"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         Data="{DynamicResource TreeDataGridItemCollapsedChevronPathData}"
@@ -222,7 +223,7 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
-                    Name="CellBorder"
+                    x:Name="CellBorder"
                     Padding="{TemplateBinding Indent,
                                               Converter={x:Static conv:IndentConverter.Instance}}"
                     Background="{TemplateBinding Background}"
@@ -253,7 +254,7 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
-                    Name="CellBorder"
+                    x:Name="CellBorder"
                     Padding="{TemplateBinding Padding}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
@@ -275,7 +276,7 @@
             <Setter Property="Template">
                 <ControlTemplate>
                     <Border
-                        Name="CellBorder"
+                        x:Name="CellBorder"
                         Padding="{TemplateBinding Padding}"
                         Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"

src/Semi.Avalonia/Animations/SemiPopupAnimations.axaml

@@ -1,37 +0,0 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        x:Class="Semi.Avalonia.SemiPopupAnimations"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:converters="clr-namespace:Semi.Avalonia.Converters">
-    <Style Selector="Popup LayoutTransformControl#PART_LayoutTransform">
-        <Setter Property="RenderTransformOrigin" Value="{Binding $parent[Popup].Placement, Converter={x:Static converters:PlacementToRenderTransformOriginConverter.Instance}}" />
-    </Style>
-
-    <Style Selector="Popup[IsOpen=True] LayoutTransformControl#PART_LayoutTransform">
-        <Style.Animations>
-            <Animation Duration="0:0:0.1" FillMode="Forward" Easing="CubicEaseIn">
-                <KeyFrame Cue="0.0">
-                    <Setter Property="ScaleTransform.ScaleX" Value="0.98" />
-                    <Setter Property="ScaleTransform.ScaleY" Value="0.98" />
-                </KeyFrame>
-                <KeyFrame Cue="1.0">
-                    <Setter Property="ScaleTransform.ScaleX" Value="1.0" />
-                    <Setter Property="ScaleTransform.ScaleY" Value="1.0" />
-                </KeyFrame>
-            </Animation>
-        </Style.Animations>
-    </Style>
-    <Style Selector="Popup[IsOpen=False] LayoutTransformControl#PART_LayoutTransform">
-        <Style.Animations>
-            <Animation Duration="0:0:0.1" FillMode="Forward" Easing="CubicEaseOut">
-                <KeyFrame Cue="0.0">
-                    <Setter Property="ScaleTransform.ScaleX" Value="1.0" />
-                    <Setter Property="ScaleTransform.ScaleY" Value="1.0" />
-                </KeyFrame>
-                <KeyFrame Cue="1.0">
-                    <Setter Property="ScaleTransform.ScaleX" Value="0.98" />
-                    <Setter Property="ScaleTransform.ScaleY" Value="0.98" />
-                </KeyFrame>
-            </Animation>
-        </Style.Animations>
-    </Style>
-</Styles>

src/Semi.Avalonia/Animations/SemiPopupAnimations.axaml.cs

@@ -1,8 +0,0 @@
-using Avalonia.Styling;
-
-namespace Semi.Avalonia;
-
-public class SemiPopupAnimations: Styles
-{
-    
-}

src/Semi.Avalonia/Controls/AdornerLayer.axaml

@@ -5,17 +5,9 @@
     <ControlTheme x:Key="{x:Type AdornerLayer}" TargetType="AdornerLayer">
         <Setter Property="DefaultFocusAdorner">
             <FocusAdornerTemplate>
-                <Border Theme="{DynamicResource AdornerLayerBorder}" />
+                <Border BorderThickness="{DynamicResource AdornerLayerBorderThickness}"
+                        BorderBrush="{DynamicResource AdornerLayerStroke}" />
             </FocusAdornerTemplate>
         </Setter>
     </ControlTheme>
-
-    <ControlTheme x:Key="AdornerLayerBorder" TargetType="Border">
-        <Setter Property="BorderThickness" Value="{DynamicResource AdornerLayerBorderThickness}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource AdornerLayerBorderBrush}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource AdornerLayerCornerRadius}" />
-        <Style Selector="^.Solid">
-            <Setter Property="BorderBrush" Value="{DynamicResource AdornerLayerSolidBorderBrush}" />
-        </Style>
-    </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/AutoCompleteBox.axaml

@@ -9,9 +9,9 @@
         </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type AutoCompleteBox}" TargetType="AutoCompleteBox">
-        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="AutoCompleteBox.VerticalAlignment" Value="Center" />
-        <Setter Property="MinHeight" Value="{DynamicResource AutoCompleteBoxDefaultHeight}" />
+        <Setter Property="AutoCompleteBox.MinHeight" Value="{DynamicResource AutoCompleteBoxDefaultHeight}" />
-        <Setter Property="MaxDropDownHeight" Value="{DynamicResource AutoCompleteMaxDropdownHeight}" />
+        <Setter Property="AutoCompleteBox.MaxDropDownHeight" Value="{DynamicResource AutoCompleteMaxDropdownHeight}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="AutoCompleteBox">
                 <DataValidationErrors>
@@ -27,13 +27,12 @@
                             Watermark="{TemplateBinding Watermark}" />
                         <Popup
                             Name="PART_Popup"
+                            MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
                             MaxHeight="{TemplateBinding MaxDropDownHeight}"
                             IsLightDismissEnabled="True"
                             PlacementTarget="{TemplateBinding}">
                             <Border
-                                MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
                                 Margin="{DynamicResource AutoCompleteBoxPopupMargin}"
-                                Padding="{DynamicResource AutoCompleteBoxPopupPadding}"
                                 HorizontalAlignment="Stretch"
                                 Background="{DynamicResource AutoCompleteBoxPopupBackground}"
                                 BorderBrush="{DynamicResource AutoCompleteBoxPopupBorderBrush}"
@@ -66,25 +65,24 @@
                             Watermark="{TemplateBinding Watermark}" />
                         <Popup
                             Name="PART_Popup"
+                            MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
                             MaxHeight="{TemplateBinding MaxDropDownHeight}"
                             IsLightDismissEnabled="True"
                             PlacementTarget="{TemplateBinding}">
                             <Border
-                                MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
                                 Margin="{DynamicResource AutoCompleteBoxPopupMargin}"
-                                Padding="{DynamicResource AutoCompleteBoxPopupPadding}"
                                 HorizontalAlignment="Stretch"
                                 Background="{DynamicResource AutoCompleteBoxPopupBackground}"
                                 BorderBrush="{DynamicResource AutoCompleteBoxPopupBorderBrush}"
                                 BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
                                 BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
                                 CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
-                                    <ListBox
+                                <ListBox
-                                        Name="PART_SelectingItemsControl"
+                                    Name="PART_SelectingItemsControl"
-                                        Foreground="{TemplateBinding Foreground}"
+                                    Foreground="{TemplateBinding Foreground}"
-                                        ItemTemplate="{TemplateBinding ItemTemplate}"
+                                    ItemTemplate="{TemplateBinding ItemTemplate}"
-                                        ScrollViewer.HorizontalScrollBarVisibility="Auto"
+                                    ScrollViewer.HorizontalScrollBarVisibility="Auto"
-                                        ScrollViewer.VerticalScrollBarVisibility="Auto" />
+                                    ScrollViewer.VerticalScrollBarVisibility="Auto" />
                             </Border>
                         </Popup>
                     </Panel>

src/Semi.Avalonia/Controls/Border.axaml

@@ -16,13 +16,18 @@
         </StackPanel>
     </Design.PreviewWith>
 
+    <ControlTheme x:Key="RadioButtonGroupBorder" TargetType="Border">
+        <Setter Property="Border.CornerRadius" Value="{DynamicResource RadioButtonGroupCornerRadius}" />
+        <Setter Property="Border.Background" Value="{DynamicResource RadioButtonGroupBackground}" />
+    </ControlTheme>
+
     <ControlTheme x:Key="CardBorder" TargetType="Border">
-        <Setter Property="Padding" Value="{DynamicResource ThicknessCardPadding}" />
+        <Setter Property="Border.Padding" Value="{DynamicResource ThicknessCardPadding}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource BorderCardBorderBrush}" />
+        <Setter Property="Border.BorderBrush" Value="{DynamicResource BorderCardBorderBrush}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource RadiusCardCornerRadius}" />
+        <Setter Property="Border.CornerRadius" Value="{DynamicResource RadiusCardCornerRadius}" />
-        <Setter Property="Background" Value="{DynamicResource BorderCardBackground}" />
+        <Setter Property="Border.Background" Value="{DynamicResource BorderCardBackground}" />
-        <Setter Property="BorderThickness" Value="{DynamicResource ThicknessCardBorderThickness}" />
+        <Setter Property="Border.BorderThickness" Value="{DynamicResource ThicknessCardBorderThickness}" />
-        <Setter Property="Margin" Value="{DynamicResource ThicknessCardMargin}" />
+        <Setter Property="Border.Margin" Value="{DynamicResource ThicknessCardMargin}" />
         <Style Selector="^.Shadow">
             <Setter Property="BoxShadow" Value="{DynamicResource BorderCardBoxShadow}" />
         </Style>

src/Semi.Avalonia/Controls/Button.axaml

@@ -27,7 +27,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="Button">
                 <ContentPresenter
-                    Name="PART_ContentPresenter"
+                    x:Name="PART_ContentPresenter"
                     Padding="{TemplateBinding Padding}"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
@@ -102,12 +102,6 @@
         x:Key="SolidButton"
         BasedOn="{StaticResource {x:Type Button}}"
         TargetType="Button">
-        <Setter Property="FocusAdorner">
-            <FocusAdornerTemplate>
-                <Border Theme="{DynamicResource AdornerLayerBorder}"
-                        Classes="Solid" />
-            </FocusAdornerTemplate>
-        </Setter>
         <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
             <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
@@ -119,7 +113,6 @@
             <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPointeroverBorderBrush}" />
         </Style>
         <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidPrimaryPressedForeground}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
             <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPressedBorderBrush}" />
         </Style>
@@ -135,7 +128,6 @@
                 <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource ButtonSolidPrimaryPressedForeground}" />
                 <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
                 <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPressedBorderBrush}" />
             </Style>
@@ -217,9 +209,9 @@
         </Style>
 
         <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidDisabledForeground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidDisabledBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidDisabledBorderBrush}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
         </Style>
     </ControlTheme>
 
@@ -260,32 +252,30 @@
         BasedOn="{StaticResource {x:Type Button}}"
         TargetType="Button">
         <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
+            <Setter Property="Background" Value="Transparent" />
-            <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
+            <Setter Property="BorderBrush" Value="Transparent" />
         </Style>
         <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
+            <Setter Property="BorderBrush" Value="Transparent" />
-            <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
+            <Setter Property="Background" Value="Transparent" />
             <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
         </Style>
 
     </ControlTheme>
 
     <ControlTheme x:Key="InnerIconButton" TargetType="Button">
-        <Setter Property="Width" Value="16"/>
-        <Setter Property="Height" Value="16"/>
         <Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerForeground}" />
-        <Setter Property="Background" Value="Transparent" />
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="Button">
-                <PathIcon
+                <ContentControl Background="Transparent">
-                    Theme="{DynamicResource InnerPathIcon}"
+                    <PathIcon
-                    Width="{TemplateBinding Width}"
+                        Width="16"
-                    Height="{TemplateBinding Height}"
+                        Height="16"
-                    Data="{TemplateBinding Content}"
+                        Margin="{TemplateBinding Padding}"
-                    Foreground="{TemplateBinding Foreground}"
+                        Data="{TemplateBinding Content}"
-                    Background="{TemplateBinding Background}" />
+                        Foreground="{TemplateBinding Foreground}" />
+                </ContentControl>
             </ControlTemplate>
         </Setter>
         <Style Selector="^:pointerover">

src/Semi.Avalonia/Controls/ButtonSpinner.axaml

@@ -8,12 +8,12 @@
         </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="ButtonSpinnerRepeatButton" TargetType="RepeatButton">
-        <Setter Property="Background" Value="{DynamicResource ButtonSpinnerRepeatButtonBackground}" />
+        <Setter Property="RepeatButton.Background" Value="{DynamicResource ButtonSpinnerRepeatButtonBackground}" />
-        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="RepeatButton.Cursor" Value="Hand" />
-        <Setter Property="Template">
+        <Setter Property="RepeatButton.Template">
             <ControlTemplate>
                 <ContentPresenter
-                    Name="PART_ContentPresenter"
+                    x:Name="PART_ContentPresenter"
                     Padding="{TemplateBinding Padding}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                     VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
@@ -38,10 +38,10 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type ButtonSpinner}" TargetType="ButtonSpinner">
-        <Setter Property="BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}" />
+        <Setter Property="ButtonSpinner.BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}" />
-        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="ButtonSpinner.BorderThickness" Value="0" />
-        <Setter Property="MinWidth" Value="300" />
+        <Setter Property="ButtonSpinner.MinWidth" Value="300" />
-        <Setter Property="Template">
+        <Setter Property="ButtonSpinner.Template">
             <ControlTemplate TargetType="ButtonSpinner">
                 <Grid ColumnDefinitions="Auto, *, Auto">
                     <Border
@@ -73,8 +73,8 @@
                                 Grid.Row="0"
                                 Theme="{StaticResource ButtonSpinnerRepeatButton}">
                                 <PathIcon
-                                    Theme="{DynamicResource InnerPathIcon}"
+                                    Width="8"
-                                    Classes="ExtraSmall"
+                                    Height="8"
                                     Data="{DynamicResource ButtonSpinnerIncreaseButtonGlyph}"
                                     Foreground="{DynamicResource ButtonSpinnerRepeatButtonForeground}" />
                             </RepeatButton>
@@ -83,8 +83,8 @@
                                 Grid.Row="1"
                                 Theme="{StaticResource ButtonSpinnerRepeatButton}">
                                 <PathIcon
-                                    Theme="{DynamicResource InnerPathIcon}"
+                                    Width="8"
-                                    Classes="ExtraSmall"
+                                    Height="8"
                                     Data="{DynamicResource ButtonSpinnerDecreaseButtonGlyph}"
                                     Foreground="{DynamicResource ButtonSpinnerRepeatButtonForeground}" />
                             </RepeatButton>
@@ -97,8 +97,5 @@
             <Setter Property="Grid.Column" Value="0" />
             <Setter Property="Margin" Value="0 0 4 0" />
         </Style>
-        <Style Selector="^:pointerover /template/ Border#ButtonGroup">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonPointeroverBorderBrush}"/>
-        </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/Calendar.axaml

@@ -2,12 +2,14 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
+
     <ControlTheme x:Key="{x:Type Calendar}" TargetType="Calendar">
         <Setter Property="Foreground" Value="{DynamicResource CalendarForeground}" />
         <Setter Property="Background" Value="{DynamicResource CalendarBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource CalendarBorderBrush}" />
         <Setter Property="BorderThickness" Value="{DynamicResource CalendarBorderThickness}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource CalendarCornerRadius}" />
+        <Setter Property="Calendar.CornerRadius" Value="{DynamicResource CalendarCornerRadius}" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="Template">
@@ -29,9 +31,9 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type CalendarItem}" TargetType="CalendarItem">
-        <Setter Property="MinWidth" Value="{DynamicResource CalendarMinWidth}" />
+        <Setter Property="CalendarItem.MinWidth" Value="{DynamicResource CalendarMinWidth}" />
-        <Setter Property="MinHeight" Value="{DynamicResource CalendarMinHeight}" />
+        <Setter Property="CalendarItem.MinHeight" Value="{DynamicResource CalendarMinHeight}" />
-        <Setter Property="DayTitleTemplate">
+        <Setter Property="CalendarItem.DayTitleTemplate">
             <Template>
                 <TextBlock
                     HorizontalAlignment="Center"
@@ -43,7 +45,7 @@
             </Template>
         </Setter>
 
-        <Setter Property="Template">
+        <Setter Property="CalendarItem.Template">
             <ControlTemplate TargetType="CalendarItem">
                 <Border
                     Padding="16"
@@ -65,8 +67,8 @@
                                 Foreground="{TemplateBinding Foreground}"
                                 Theme="{DynamicResource BorderlessButton}">
                                 <PathIcon
-                                    Theme="{DynamicResource InnerPathIcon}"
+                                    Width="12"
-                                    Classes="Large"
+                                    Height="12"
                                     Data="{DynamicResource CalendarItemPreviousIconGlyph}"
                                     Foreground="{DynamicResource CalendarItemIconForeground}" />
                             </Button>
@@ -85,8 +87,8 @@
                                 Foreground="{TemplateBinding Foreground}"
                                 Theme="{DynamicResource BorderlessButton}">
                                 <PathIcon
-                                    Theme="{DynamicResource InnerPathIcon}"
+                                    Width="12"
-                                    Classes="Large"
+                                    Height="12"
                                     Data="{DynamicResource CalendarItemNextIconGlyph}"
                                     Foreground="{DynamicResource CalendarItemIconForeground}" />
                             </Button>
@@ -95,8 +97,7 @@
                             Name="PART_MonthView"
                             Grid.Row="1"
                             HorizontalAlignment="Stretch"
-                            IsVisible="False"
+                            IsVisible="False">
-                            ColumnDefinitions="*,*,*,*,*,*,*">
                             <Grid.RowDefinitions>
                                 <RowDefinition Height="{DynamicResource CalendarItemWeekDayNameHeight}" />
                                 <RowDefinition Height="*" />
@@ -106,14 +107,33 @@
                                 <RowDefinition Height="*" />
                                 <RowDefinition Height="*" />
                             </Grid.RowDefinitions>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*" />
+                            </Grid.ColumnDefinitions>
                         </Grid>
                         <Grid
                             Name="PART_YearView"
                             Grid.Row="1"
                             Background="{TemplateBinding Background}"
-                            IsVisible="False"
+                            IsVisible="False">
-                            ColumnDefinitions="*,*,*,*"
+                            <Grid.RowDefinitions>
-                            RowDefinitions="*,*,*" />
+                                <RowDefinition Height="*" />
+                                <RowDefinition Height="*" />
+                                <RowDefinition Height="*" />
+                            </Grid.RowDefinitions>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*" />
+                            </Grid.ColumnDefinitions>
+                        </Grid>
                     </Grid>
                 </Border>
             </ControlTemplate>
@@ -126,14 +146,13 @@
         <Setter Property="Foreground" Value="{DynamicResource CalendarItemCalendarButtonForeground}" />
         <Setter Property="Background" Value="{DynamicResource CalendarItemCalendarButtonBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource CalendarItemCalendarButtonBorderBrush}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource CalendarItemCalendarButtonCornerRadius}" />
+        <Setter Property="CalendarButton.CornerRadius" Value="{DynamicResource CalendarItemCalendarButtonCornerRadius}" />
         <Setter Property="BorderThickness" Value="0" />
         <Setter Property="ClipToBounds" Value="False" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="CalendarButton.HorizontalContentAlignment" Value="Center" />
-        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="CalendarButton.VerticalContentAlignment" Value="Center" />
-        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="CalendarButton.HorizontalAlignment" Value="Stretch" />
-        <Setter Property="VerticalAlignment" Value="Stretch" />
+        <Setter Property="CalendarButton.VerticalAlignment" Value="Stretch" />
-        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CalendarButton">
                 <ContentControl
@@ -194,7 +213,6 @@
         <Setter Property="VerticalAlignment" Value="Stretch" />
         <Setter Property="HorizontalContentAlignment" Value="Center" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CalendarDayButton">
                 <ContentControl

src/Semi.Avalonia/Controls/CalendarDatePicker.axaml

@@ -2,11 +2,7 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
-    <Design.PreviewWith>
+    <!--  Add Resources Here  -->
-        <StackPanel Margin="20" Width="800" Height="400">
-            <CalendarDatePicker HorizontalAlignment="Center" Classes="ClearButton" />
-        </StackPanel>
-    </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type CalendarDatePicker}" TargetType="CalendarDatePicker">
         <Setter Property="Background" Value="{DynamicResource CalendarDatePickerBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerForeground}" />
@@ -25,11 +21,11 @@
             <ControlTemplate TargetType="CalendarDatePicker">
                 <DataValidationErrors>
                     <Panel
-                        Name="LayoutRoot"
+                        x:Name="LayoutRoot"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch">
                         <Border
-                            Name="Background"
+                            x:Name="Background"
                             BackgroundSizing="{TemplateBinding BackgroundSizing}"
                             Background="{TemplateBinding Background}"
                             BorderBrush="{TemplateBinding BorderBrush}"
@@ -80,38 +76,42 @@
                             <Button
                                 Name="ClearButton"
                                 Grid.Column="1"
-                                Theme="{DynamicResource InnerIconButton}"
+                                Padding="0,0,8,0"
-                                Margin="8 0"
                                 Content="{DynamicResource IconButtonClearData}"
                                 Command="{Binding $parent[CalendarDatePicker].Clear}"
                                 Focusable="False"
-                                IsVisible="False" />
+                                IsVisible="False"
+                                Theme="{DynamicResource InnerIconButton}" />
                             <Button
                                 Name="PART_Button"
                                 Grid.Column="1"
-                                Theme="{DynamicResource InnerIconButton}"
+                                Padding="0,0,8,0"
-                                Margin="8 0"
                                 Content="{DynamicResource CalendarDatePickerIconGlyph}"
-                                Focusable="False" />
+                                Focusable="False"
+                                Theme="{DynamicResource InnerIconButton}" />
                             <Popup
                                 Name="PART_Popup"
                                 Grid.Column="0"
+                                HorizontalOffset="-8"
                                 IsLightDismissEnabled="True"
-                                Placement="BottomEdgeAlignedLeft"
+                                PlacementTarget="{TemplateBinding}"
-                                PlacementTarget="{TemplateBinding}">
+                                VerticalOffset="-4">
                                 <Border
-                                    Margin="4"
+                                    Margin="8"
+                                    Background="Transparent"
                                     BoxShadow="{DynamicResource CalendarDatePickerPopupBoxShadows}"
                                     CornerRadius="{DynamicResource CalendarCornerRadius}">
                                     <Calendar
                                         Name="PART_Calendar"
                                         BorderThickness="0"
+                                        CornerRadius="{Binding $parent[Border].CornerRadius}"
                                         DisplayDate="{TemplateBinding DisplayDate}"
                                         DisplayDateEnd="{TemplateBinding DisplayDateEnd}"
                                         DisplayDateStart="{TemplateBinding DisplayDateStart}"
                                         FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
                                         IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
-                                        SelectedDate="{TemplateBinding SelectedDate, Mode=TwoWay}" />
+                                        SelectedDate="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedDate, Mode=TwoWay}">
+                                    </Calendar>
                                 </Border>
                             </Popup>
                         </Grid>
@@ -141,7 +141,6 @@
         <Style Selector="^:pointerover">
             <Style Selector="^ /template/ Border#Background">
                 <Setter Property="Background" Value="{DynamicResource CalendarDatePickerPointeroverBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerPointeroverBorderBrush}" />
             </Style>
         </Style>
 

src/Semi.Avalonia/Controls/CaptionButtons.axaml

@@ -2,9 +2,8 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
-    <Design.PreviewWith>
+    <!--  Add Resources Here  -->
-        <CaptionButtons />
+
-    </Design.PreviewWith>
     <ControlTheme x:Key="CaptionButton" TargetType="Button">
         <Setter Property="Background" Value="{DynamicResource CaptionButtonPointeroverBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource CaptionButtonPressedBackground}" />
@@ -46,28 +45,31 @@
                     Orientation="Horizontal"
                     Spacing="2"
                     TextElement.FontSize="10">
-                    <Button Name="PART_FullScreenButton" Theme="{StaticResource CaptionButton}">
+                    <Button x:Name="PART_FullScreenButton" Theme="{StaticResource CaptionButton}">
                         <PathIcon
                             Name="PART_FullScreenButtonIcon"
-                            Theme="{DynamicResource InnerPathIcon}"
+                            Width="12"
+                            Height="12"
                             Data="{DynamicResource WindowExpandGlyph}"
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>
-                    <Button Name="PART_MinimizeButton" Theme="{StaticResource CaptionButton}">
+                    <Button x:Name="PART_MinimizeButton" Theme="{StaticResource CaptionButton}">
                         <PathIcon
-                            Theme="{DynamicResource InnerPathIcon}"
+                            Width="12"
+                            Height="12"
                             Data="{DynamicResource WindowMinimizeGlyph}"
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>
-                    <Button Name="PART_RestoreButton" Theme="{StaticResource CaptionButton}">
+                    <Button x:Name="PART_RestoreButton" Theme="{StaticResource CaptionButton}">
                         <PathIcon
                             Name="PART_RestoreButtonIcon"
-                            Theme="{DynamicResource InnerPathIcon}"
+                            Width="12"
+                            Height="12"
                             Data="{DynamicResource WindowMaximizeGlyph}"
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>
                     <Button
-                        Name="PART_CloseButton"
+                        x:Name="PART_CloseButton"
                         Background="{DynamicResource CaptionButtonClosePointeroverBackground}"
                         BorderBrush="{DynamicResource CaptionButtonClosePressedBackground}"
                         Theme="{StaticResource CaptionButton}">
@@ -80,7 +82,8 @@
                             </Style>
                         </Button.Styles>
                         <PathIcon
-                            Theme="{DynamicResource InnerPathIcon}"
+                            Width="12"
+                            Height="12"
                             Data="{DynamicResource WindowCloseIconGlyph}"
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>

src/Semi.Avalonia/Controls/Carousel.axaml

@@ -1,66 +1,10 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:converter="clr-namespace:Semi.Avalonia.Converters"
+    xmlns:converters="clr-namespace:Semi.Avalonia.Converters"
     x:CompileBindings="True">
-    <Design.PreviewWith>
+    <!--  Add Resources Here  -->
-        <StackPanel Spacing="20" Width="800" Height="800">
+    <converters:ItemToObjectConverter x:Key="ItemsConverter" />
-            <StackPanel.Styles>
-                <Style Selector="Carousel">
-                    <Setter Property="Height" Value="200" />
-                </Style>
-                <Style Selector="TextBlock">
-                    <Setter Property="HorizontalAlignment" Value="Center" />
-                    <Setter Property="VerticalAlignment" Value="Center" />
-                    <Setter Property="Foreground" Value="#1C1F23" />
-                </Style>
-            </StackPanel.Styles>
-            <Carousel Theme="{DynamicResource FullCarousel}">
-                <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>
-            <Carousel Theme="{DynamicResource FullCarousel}"
-                      Classes="Line">
-                <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>
-            <Carousel Theme="{DynamicResource FullCarousel}"
-                      Classes="Columnar Left">
-                <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>
-    </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type Carousel}" TargetType="Carousel">
         <Setter Property="Template">
             <ControlTemplate>
@@ -69,7 +13,6 @@
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
-                    BringIntoViewOnFocusChange="True"
                     HorizontalScrollBarVisibility="Hidden"
                     VerticalScrollBarVisibility="Hidden">
                     <ItemsPresenter
@@ -82,94 +25,125 @@
     </ControlTheme>
 
     <ControlTheme x:Key="CarouselIndicatorDotListBoxItem" TargetType="ListBoxItem">
-        <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorForeground}" />
+        <!--  Use fit in different color themes, Use Foreground to normal, Background to hover, BorderBrush to Selected  -->
-        <Setter Property="Margin" Value="4 0"/>
+        <Setter Property="ListBoxItem.Cursor" Value="Hand" />
-        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="ListBoxItem.Foreground" Value="{DynamicResource CarouselIndicatorForeground}" />
-        <Setter Property="Template">
+        <Setter Property="ListBoxItem.Template">
             <ControlTemplate TargetType="ListBoxItem">
-                <Ellipse
+                <Panel>
-                    Name="Container"
+                    <Border Padding="4" Background="Transparent">
-                    Width="{DynamicResource CarouselIndicatorDotWidth}"
+                        <Ellipse
-                    Height="{DynamicResource CarouselIndicatorDotHeight}"
+                            Name="Container"
-                    Fill="{TemplateBinding Foreground}" />
+                            Width="{DynamicResource CarouselIndicatorWidth}"
+                            Height="{DynamicResource CarouselIndicatorHeight}"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Fill="{TemplateBinding Foreground}" />
+                    </Border>
+                </Panel>
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:pointerover">
+        <Style Selector="^:pointerover /template/ Ellipse#Container">
-            <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" />
+            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" />
         </Style>
-        <Style Selector="^:pressed">
+        <Style Selector="^:pressed /template/ Ellipse#Container">
-            <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
+            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
         </Style>
-        <Style Selector="^:selected">
+        <Style Selector="^:selected /template/ Ellipse#Container">
-            <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
+            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
         </Style>
     </ControlTheme>
 
-    <ControlTheme x:Key="CarouselIndicatorLineListBoxItem"
+    <ControlTheme x:Key="CarouselIndicatorLineListBoxItem" TargetType="ListBoxItem">
-                  BasedOn="{StaticResource CarouselIndicatorDotListBoxItem}"
+        <!--  Use fit in different color themes, Use Foreground to normal, Background to hover, BorderBrush to Selected  -->
-                  TargetType="ListBoxItem">
+        <Setter Property="ListBoxItem.Cursor" Value="Hand" />
-        <Setter Property="Margin" Value="2 0"/>
+        <Setter Property="ListBoxItem.Background" Value="{DynamicResource CarouselIndicatorForeground}" />
-        <Setter Property="Template">
+        <Setter Property="ListBoxItem.Template">
             <ControlTemplate TargetType="ListBoxItem">
-                <Rectangle
+                <Panel Background="Transparent">
-                    Name="Container"
+                    <Border Padding="2,0" Background="Transparent">
-                    Height="{DynamicResource CarouselIndicatorLineHeight}"
+                        <Border
-                    Fill="{TemplateBinding Foreground}" />
+                            Name="Container"
+                            Width="{DynamicResource CarouselIndicatorLineWidth}"
+                            Height="{DynamicResource CarouselIndicatorLineHeight}"
+                            Background="{TemplateBinding Background}">
+                        </Border>
+                    </Border>
+                </Panel>
             </ControlTemplate>
         </Setter>
+        <Style Selector="^:pointerover /template/ Border#Container">
+            <Setter Property="Background" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" />
+        </Style>
+        <Style Selector="^:pressed /template/ Border#Container">
+            <Setter Property="Background" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
+        </Style>
+        <Style Selector="^:selected /template/ Border#Container">
+            <Setter Property="Background" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
+        </Style>
     </ControlTheme>
 
-    <ControlTheme x:Key="CarouselIndicatorColumnarListBoxItem"
+    <ControlTheme x:Key="CarouselIndicatorColumnarListBoxItem" TargetType="ListBoxItem">
-                  BasedOn="{StaticResource CarouselIndicatorDotListBoxItem}"
+        <Setter Property="ListBoxItem.Cursor" Value="Hand" />
-                  TargetType="ListBoxItem">
+        <Setter Property="ListBoxItem.Background" Value="{DynamicResource CarouselIndicatorForeground}" />
-        <Setter Property="Width" Value="{DynamicResource CarouselIndicatorColumnarWidth}"/>
+        <Setter Property="ListBoxItem.Template">
-        <Setter Property="Height" Value="{DynamicResource CarouselIndicatorColumnarSelectedHeight}"/>
-        <Setter Property="Margin" Value="2 0"/>
-        <Setter Property="Template">
             <ControlTemplate TargetType="ListBoxItem">
-                <Rectangle
+                <Panel Background="Transparent">
-                    Name="Container"
+                    <Border Padding="2,0" Background="Transparent">
-                    Width="{DynamicResource CarouselIndicatorColumnarWidth}"
+                        <Border Width="{DynamicResource CarouselIndicatorColumnarWidth}"
-                    Height="{DynamicResource CarouselIndicatorColumnarHeight}"
+                                Height="{DynamicResource CarouselIndicatorColumnarSelectedHeight}">
-                    VerticalAlignment="Bottom"
+                            <Rectangle
-                    Fill="{TemplateBinding Foreground}">
+                                Name="Container"
-                    <Rectangle.Transitions>
+                                Width="{DynamicResource CarouselIndicatorColumnarWidth}"
-                        <Transitions>
+                                Height="{DynamicResource CarouselIndicatorColumnarHeight}"
-                            <DoubleTransition Property="Height" Duration="0:0:0.2" />
+                                VerticalAlignment="Bottom"
-                        </Transitions>
+                                Fill="{TemplateBinding Background}">
-                    </Rectangle.Transitions>
+                                <Rectangle.Transitions>
-                </Rectangle>
+                                    <Transitions>
+                                        <DoubleTransition Property="Height" Duration="0:0:0.2"></DoubleTransition>
+                                    </Transitions>
+                                </Rectangle.Transitions>
+                            </Rectangle>
+                        </Border>
+                    </Border>
+                </Panel>
             </ControlTemplate>
         </Setter>
+        <Style Selector="^:pointerover /template/ Rectangle#Container">
+            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" />
+        </Style>
+        <Style Selector="^:pressed /template/ Rectangle#Container">
+            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
+        </Style>
         <Style Selector="^:selected /template/ Rectangle#Container">
+            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
             <Setter Property="Height" Value="{DynamicResource CarouselIndicatorColumnarSelectedHeight}" />
         </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="CarouselButton" TargetType="Button">
-        <Setter Property="Width" Value="32" />
+        <Setter Property="Button.Cursor" Value="Hand" />
-        <Setter Property="Height" Value="32" />
+        <Setter Property="Button.Foreground" Value="{DynamicResource CarouselButtonForeground}" />
-        <Setter Property="Foreground" Value="{DynamicResource CarouselButtonForeground}" />
+        <Setter Property="Button.Template">
-        <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="Template">
             <ControlTemplate TargetType="Button">
-                <PathIcon
+                <Grid Background="Transparent">
-                    Theme="{DynamicResource InnerPathIcon}"
+                    <PathIcon
-                    Width="{TemplateBinding Width}"
+                        Width="24"
-                    Height="{TemplateBinding Height}"
+                        Height="24"
-                    Data="{DynamicResource CarouselButtonGlyph}"
+                        Data="{DynamicResource CarouselButtonGlyph}"
-                    Foreground="{TemplateBinding Foreground}" />
+                        Foreground="{TemplateBinding Foreground}" />
+                </Grid>
             </ControlTemplate>
         </Setter>
         <Style Selector="^:pointerover /template/ PathIcon">
             <Setter Property="Foreground" Value="{DynamicResource CarouselButtonPointeroverForeground}" />
         </Style>
+        <Style Selector="^:pointerover /template/ PathIcon">
+            <Setter Property="Foreground" Value="{DynamicResource CarouselButtonPressedForeground}" />
+        </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="FullCarousel" TargetType="Carousel">
-        <Setter Property="PageTransition">
-            <PageSlide Orientation="Horizontal" Duration="0.3" />
-        </Setter>
         <Setter Property="Template">
             <ControlTemplate TargetType="Carousel">
                 <Grid ColumnDefinitions="Auto, *, Auto" RowDefinitions="*, Auto">
@@ -192,15 +166,16 @@
                     <ListBox
                         Name="PART_ItemsPresenter2"
                         Grid.Row="1"
-                        Grid.Column="0"
+                        Grid.Column="1"
-                        Grid.ColumnSpan="3"
+                        MaxHeight="30"
-                        Margin="32"
+                        Margin="0,8"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         ItemContainerTheme="{DynamicResource CarouselIndicatorDotListBoxItem}"
-                        ItemsSource="{TemplateBinding ItemCount, Converter={x:Static converter:ItemConverter.ItemToObjectConverter}}"
+                        ItemsSource="{TemplateBinding ItemCount,
-                        IsVisible="{TemplateBinding ItemCount, Converter={x:Static converter:ItemConverter.ItemVisibleConverter}}"
+                                                      Mode=OneWay,
-                        SelectedIndex="{TemplateBinding SelectedIndex, Mode=TwoWay}">
+                                                      Converter={StaticResource ItemsConverter}}"
+                        SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
                         <ListBox.ItemsPanel>
                             <ItemsPanelTemplate>
                                 <StackPanel Orientation="Horizontal" />
@@ -211,31 +186,30 @@
                         Grid.Row="0"
                         Grid.RowSpan="2"
                         Grid.Column="0"
-                        Theme="{DynamicResource CarouselButton}"
                         Margin="{DynamicResource CarouselButtonMargin}"
+                        VerticalAlignment="Center"
+                        Background="{DynamicResource CarouselButtonPointeroverForeground}"
+                        BorderBrush="{DynamicResource CarouselButtonPressedForeground}"
+                        Command="{Binding $parent[Carousel].Previous}"
                         Foreground="{DynamicResource CarouselButtonForeground}"
-                        IsVisible="{TemplateBinding ItemCount, Converter={x:Static converter:ItemConverter.ItemVisibleConverter}}"
+                        Theme="{DynamicResource CarouselButton}" />
-                        Command="{Binding $parent[Carousel].Previous}" />
                     <Button
                         Grid.Row="0"
                         Grid.RowSpan="2"
                         Grid.Column="2"
-                        Theme="{DynamicResource CarouselButton}"
                         Margin="{DynamicResource CarouselButtonMargin}"
-                        Foreground="{DynamicResource CarouselButtonForeground}"
+                        VerticalAlignment="Center"
-                        IsVisible="{TemplateBinding ItemCount, Converter={x:Static converter:ItemConverter.ItemVisibleConverter}}"
+                        Background="{DynamicResource CarouselButtonPointeroverForeground}"
+                        BorderBrush="{DynamicResource CarouselButtonPressedForeground}"
                         Command="{Binding $parent[Carousel].Next}"
-                        RenderTransform="rotate(180deg)" />
+                        Foreground="{DynamicResource CarouselButtonForeground}"
+                        RenderTransform="rotate(180deg)"
+                        Theme="{DynamicResource CarouselButton}" />
                 </Grid>
             </ControlTemplate>
         </Setter>
         <Style Selector="^.Line /template/ ListBox#PART_ItemsPresenter2">
             <Setter Property="ItemContainerTheme" Value="{DynamicResource CarouselIndicatorLineListBoxItem}" />
-            <Setter Property="ItemsPanel">
-                <ItemsPanelTemplate>
-                    <UniformGrid Columns="{TemplateBinding ItemCount}" Rows="1" Width="240" />
-                </ItemsPanelTemplate>
-            </Setter>
         </Style>
         <Style Selector="^.Columnar /template/ ListBox#PART_ItemsPresenter2">
             <Setter Property="ItemContainerTheme" Value="{DynamicResource CarouselIndicatorColumnarListBoxItem}" />

src/Semi.Avalonia/Controls/CheckBox.axaml

@@ -2,42 +2,35 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
-    <Design.PreviewWith>
-        <ThemeVariantScope RequestedThemeVariant="Dark">
-            <StackPanel Background="{DynamicResource SemiBackground0Color}">
-                <CheckBox>Hello</CheckBox>
-                <CheckBox>Hello</CheckBox>
-                <CheckBox Theme="{DynamicResource CardCheckBox}">Hello</CheckBox>
-                <CheckBox Theme="{DynamicResource PureCardCheckBox}">Hello</CheckBox>
-            </StackPanel>
-        </ThemeVariantScope>
-    </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type CheckBox}" TargetType="CheckBox">
+        <Setter Property="Padding" Value="8,0,0,0" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Top" />
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="FontSize" Value="{DynamicResource CheckBoxFontSize}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxBoxCornerRadius}" />
+        <Setter Property="MinHeight" Value="32" />
         <Setter Property="Foreground" Value="{DynamicResource CheckBoxForeground}" />
         <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultBorderBrush}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxBoxCornerRadius}" />
-        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CheckBox">
                 <Border
-                    Name="RootBorder"
+                    x:Name="RootBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid ColumnDefinitions="Auto,*">
+                    <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
-                        <Panel
+                        <Grid
                             Grid.Column="0"
                             TemplatedControl.IsTemplateFocusTarget="True"
-                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
+                            Margin="0,0,0,0"
+                            VerticalAlignment="Center">
                             <Border
-                                Name="NormalRectangle"
+                                x:Name="NormalRectangle"
                                 Width="{DynamicResource CheckBoxBoxWidth}"
                                 Height="{DynamicResource CheckBoxBoxHeight}"
                                 Background="{DynamicResource CheckBoxDefaultBackground}"
@@ -47,21 +40,19 @@
                                 UseLayoutRounding="False" />
                             <PathIcon
                                 Name="CheckGlyph"
-                                Theme="{DynamicResource InnerPathIcon}"
                                 Width="{DynamicResource CheckBoxBoxGlyphWidth}"
                                 Height="{DynamicResource CheckBoxBoxGlyphHeight}"
                                 Foreground="{DynamicResource CheckBoxGlyphFill}" />
-                        </Panel>
+                        </Grid>
                         <ContentPresenter
-                            Name="PART_ContentPresenter"
+                            x:Name="ContentPresenter"
                             Grid.Column="1"
-                            Margin="{DynamicResource CheckBoxContentMargin}"
+                            Margin="{TemplateBinding Padding}"
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            VerticalAlignment="Center"
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
                             IsVisible="{TemplateBinding Content,Converter={x:Static ObjectConverters.IsNotNull}}"
-                            FontSize="{TemplateBinding FontSize}"
                             RecognizesAccessKey="True"
                             TextWrapping="Wrap" />
                     </Grid>
@@ -87,7 +78,7 @@
 
         <!--  Unchecked Disabled state  -->
         <Style Selector="^:disabled">
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
                 <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
             </Style>
             <Style Selector="^ /template/ Border#NormalRectangle">
@@ -125,7 +116,7 @@
 
             <!--  Checked Disabled State  -->
             <Style Selector="^:disabled">
-                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
                     <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
                 </Style>
                 <Style Selector="^ /template/ Border#NormalRectangle">
@@ -168,7 +159,7 @@
 
             <!--  Checked Disabled State  -->
             <Style Selector="^:disabled">
-                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
                     <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
                 </Style>
                 <Style Selector="^ /template/ Border#NormalRectangle">
@@ -186,29 +177,29 @@
     <ControlTheme x:Key="SimpleCheckBox" TargetType="CheckBox">
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Top" />
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="FontSize" Value="{DynamicResource CheckBoxFontSize}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxBoxCornerRadius}" />
         <Setter Property="Foreground" Value="{DynamicResource CheckBoxForeground}" />
         <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultBorderBrush}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxBoxCornerRadius}" />
-        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CheckBox">
                 <Border
-                    Name="RootBorder"
+                    x:Name="RootBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid ColumnDefinitions="Auto,*">
+                    <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
-                        <Panel
+                        <Grid
                             Grid.Column="0"
-                            TemplatedControl.IsTemplateFocusTarget="True"
+                            Margin="0,0,0,0"
-                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
+                            VerticalAlignment="Center">
                             <Border
-                                Name="NormalRectangle"
+                                x:Name="NormalRectangle"
                                 Width="{DynamicResource CheckBoxBoxWidth}"
                                 Height="{DynamicResource CheckBoxBoxHeight}"
                                 Background="{DynamicResource CheckBoxDefaultBackground}"
@@ -218,11 +209,10 @@
                                 UseLayoutRounding="False" />
                             <PathIcon
                                 Name="CheckGlyph"
-                                Theme="{DynamicResource InnerPathIcon}"
                                 Width="{DynamicResource CheckBoxBoxGlyphWidth}"
                                 Height="{DynamicResource CheckBoxBoxGlyphHeight}"
                                 Foreground="{DynamicResource CheckBoxGlyphFill}" />
-                        </Panel>
+                        </Grid>
                     </Grid>
                 </Border>
             </ControlTemplate>
@@ -334,15 +324,13 @@
     </ControlTheme>
 
     <ControlTheme x:Key="CardCheckBox" TargetType="CheckBox">
-        <Setter Property="HorizontalContentAlignment" Value="Left" />
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="Padding" Value="{DynamicResource CheckBoxCardPadding}" />
-        <Setter Property="FontSize" Value="{DynamicResource CheckBoxFontSize}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource CheckBoxCardBorderThickness}" />
         <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxCardCornerRadius}" />
         <Setter Property="Background" Value="Transparent" />
-        <Setter Property="BorderThickness" Value="{DynamicResource CheckBoxCardBorderThickness}" />
+        <Setter Property="CheckBox.Template">
-        <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="Template">
             <ControlTemplate TargetType="CheckBox">
                 <Border
                     Name="RootBorder"
@@ -352,15 +340,13 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <Grid
+                        x:Name="RootGrid"
                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                         ColumnDefinitions="Auto,*">
-                        <Panel
+                        <Grid Grid.Column="0" VerticalAlignment="Top">
-                            Grid.Column="0"
-                            VerticalAlignment="Top"
-                            Margin="{DynamicResource CheckBoxBoxMargin}">
                             <Border
-                                Name="NormalRectangle"
+                                x:Name="NormalRectangle"
                                 Width="{DynamicResource CheckBoxBoxWidth}"
                                 Height="{DynamicResource CheckBoxBoxHeight}"
                                 Background="{DynamicResource CheckBoxDefaultBackground}"
@@ -370,23 +356,20 @@
                                 UseLayoutRounding="False" />
                             <PathIcon
                                 Name="CheckGlyph"
-                                Theme="{DynamicResource InnerPathIcon}"
                                 Width="{DynamicResource CheckBoxBoxGlyphWidth}"
                                 Height="{DynamicResource CheckBoxBoxGlyphHeight}"
                                 Foreground="{DynamicResource CheckBoxGlyphFill}" />
-                        </Panel>
 
+                        </Grid>
                         <ContentPresenter
-                            Name="PART_ContentPresenter"
+                            x:Name="ContentPresenter"
                             Grid.Column="1"
-                            Margin="{DynamicResource CheckBoxContentMargin}"
+                            Margin="8,0,0,0"
-                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="Center"
-                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
-                            Foreground="{TemplateBinding Foreground}"
+                            IsVisible="{TemplateBinding Content,
-                            IsVisible="{TemplateBinding Content,Converter={x:Static ObjectConverters.IsNotNull}}"
+                                                        Converter={x:Static ObjectConverters.IsNotNull}}"
-                            FontSize="{TemplateBinding FontSize}"
                             RecognizesAccessKey="True"
                             TextWrapping="Wrap" />
                     </Grid>
@@ -416,7 +399,7 @@
 
         <!--  Unchecked Disabled state  -->
         <Style Selector="^:disabled">
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
                 <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
             </Style>
             <Style Selector="^ /template/ Border#NormalRectangle">
@@ -467,7 +450,7 @@
                 <Style Selector="^ /template/ Border#RootBorder">
                     <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
                 </Style>
-                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
                     <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
                 </Style>
                 <Style Selector="^ /template/ Border#NormalRectangle">
@@ -522,7 +505,7 @@
                 <Style Selector="^ /template/ Border#RootBorder">
                     <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
                 </Style>
-                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
                     <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
                 </Style>
                 <Style Selector="^ /template/ Border#NormalRectangle">
@@ -538,22 +521,20 @@
     </ControlTheme>
 
     <ControlTheme x:Key="PureCardCheckBox" TargetType="CheckBox">
-        <Setter Property="HorizontalContentAlignment" Value="Left" />
-        <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="Padding" Value="{DynamicResource CheckBoxCardPadding}" />
-        <Setter Property="FontSize" Value="{DynamicResource CheckBoxFontSize}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxCardCornerRadius}" />
-        <Setter Property="Background" Value="Transparent" />
-        <Setter Property="BorderThickness" Value="{DynamicResource CheckBoxCardBorderThickness}" />
         <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="Template">
+        <Setter Property="Padding" Value="{DynamicResource CheckBoxCardPadding}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource CheckBoxCardBorderThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxCardCornerRadius}" />
+        <Setter Property="CheckBox.VerticalContentAlignment" Value="Center" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="CheckBox.Template">
             <ControlTemplate TargetType="CheckBox">
                 <ContentPresenter
-                    Name="PART_ContentPresenter"
+                    x:Name="PART_ContentPresenter"
+                    Margin="{TemplateBinding Margin}"
                     Padding="{TemplateBinding Padding}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                     VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                    Foreground="{TemplateBinding Foreground}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -561,8 +542,7 @@
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}"
                     RecognizesAccessKey="True"
-                    UseLayoutRounding="False"
+                    UseLayoutRounding="False" />
-                    TextWrapping="Wrap" />
             </ControlTemplate>
         </Setter>
 

src/Semi.Avalonia/Controls/ComboBox.axaml

@@ -30,11 +30,10 @@
     <ControlTheme x:Key="{x:Type ComboBox}" TargetType="ComboBox">
         <Setter Property="Padding" Value="{DynamicResource ComboBoxSelectorDefaultPadding}" />
         <Setter Property="FocusAdorner" Value="{x:Null}" />
-        <Setter Property="MaxDropDownHeight" Value="{DynamicResource ComboBoxPopupMaxDropDownHeight}" />
+        <Setter Property="MaxDropDownHeight" Value="504" />
         <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorBackground}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorBorderBrush}" />
         <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
-        <Setter Property="BorderThickness" Value="{DynamicResource ComboBoxSelectorThickness}" />
+        <Setter Property="BorderThickness" Value="1" />
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="CornerRadius" Value="{DynamicResource ComboBoxSelectorCornerRadius}" />
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
@@ -49,7 +48,7 @@
                 <DataValidationErrors>
                     <Grid ColumnDefinitions="*, Auto">
                         <Border
-                            Name="Background"
+                            x:Name="Background"
                             Grid.Column="0"
                             Grid.ColumnSpan="2"
                             Background="{TemplateBinding Background}"
@@ -59,39 +58,49 @@
                             CornerRadius="{TemplateBinding CornerRadius}"
                             MinHeight="{TemplateBinding MinHeight}" />
                         <TextBlock
-                            Name="PlaceholderTextBlock"
+                            x:Name="PlaceholderTextBlock"
                             Grid.Column="0"
                             Margin="{TemplateBinding Padding}"
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                             TextTrimming="CharacterEllipsis"
                             Foreground="{TemplateBinding Foreground}"
-                            IsVisible="{TemplateBinding SelectionBoxItem,Converter={x:Static ObjectConverters.IsNull}}"
+                            IsVisible="{TemplateBinding SelectionBoxItem,
+                                                        Converter={x:Static ObjectConverters.IsNull}}"
                             Opacity="0.3"
                             Text="{TemplateBinding PlaceholderText}" />
                         <ContentPresenter
-                            Name="ContentPresenter"
+                            x:Name="ContentPresenter"
                             Grid.Column="0"
                             Margin="{TemplateBinding Padding}"
                             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                             Content="{TemplateBinding SelectionBoxItem}"
-                            ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" />
+                            ContentTemplate="{TemplateBinding ItemTemplate}" />
                         <Button
                             Name="ClearButton"
                             Grid.Column="1"
-                            Theme="{DynamicResource InnerIconButton}"
+                            Margin="0,0,8,0"
-                            Width="{DynamicResource ComboBoxIconWidth}"
                             Command="{Binding $parent[ComboBox].Clear}"
                             Content="{DynamicResource IconButtonClearData}"
                             Focusable="False"
+                            IsVisible="False"
+                            Theme="{DynamicResource InnerIconButton}" />
+                        <Border
+                            x:Name="DropDownOverlay"
+                            Grid.Column="1"
+                            Width="30"
+                            Margin="0,1,1,1"
+                            HorizontalAlignment="Right"
+                            Background="Transparent"
                             IsVisible="False" />
 
                         <PathIcon
-                            Name="DropDownGlyph"
+                            x:Name="DropDownGlyph"
                             Grid.Column="1"
-                            Theme="{DynamicResource InnerPathIcon}"
+                            Width="12"
-                            Width="{DynamicResource ComboBoxIconWidth}"
+                            Height="12"
+                            Margin="0,0,12,0"
                             Data="{DynamicResource ComboBoxIcon}"
                             Foreground="{DynamicResource ComboBoxIconDefaultForeground}"
                             IsHitTestVisible="False"
@@ -100,29 +109,32 @@
                         <Popup
                             Name="PART_Popup"
                             Grid.Column="0"
+                            MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
                             MaxHeight="{TemplateBinding MaxDropDownHeight}"
+                            ClipToBounds="False"
                             InheritsTransform="True"
                             IsLightDismissEnabled="True"
-                            IsOpen="{TemplateBinding IsDropDownOpen, Mode=TwoWay}"
+                            IsOpen="{TemplateBinding IsDropDownOpen,
+                                                     Mode=TwoWay}"
                             PlacementTarget="Background"
                             WindowManagerAddShadowHint="False">
                             <Border
-                                Name="PopupBorder"
+                                x:Name="PopupBorder"
+                                Margin="0,4"
                                 HorizontalAlignment="Stretch"
-                                MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
-                                Margin="{DynamicResource ComboBoxPopupBorderMargin}"
-                                Padding="{DynamicResource ComboBoxPopupBorderPadding}"
                                 Background="{DynamicResource ComboBoxPopupBackground}"
                                 BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
                                 BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}"
                                 BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
-                                CornerRadius="{DynamicResource ComboBoxPopupBoxCornerRadius}">
+                                ClipToBounds="True"
+                                CornerRadius="6">
                                 <ScrollViewer
                                     HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
-                                    IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
+                                    IsDeferredScrollingEnabled="{TemplateBinding (ScrollViewer.IsDeferredScrollingEnabled)}"
                                     VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                                     <ItemsPresenter
                                         Name="PART_ItemsPresenter"
+                                        Margin="{DynamicResource ComboBoxDropdownContentMargin}"
                                         ItemsPanel="{TemplateBinding ItemsPanel}" />
                                 </ScrollViewer>
                             </Border>
@@ -182,7 +194,6 @@
         <!--  Disabled State  -->
         <Style Selector="^:disabled">
             <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorDisabledBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorDisabledBorderBrush}" />
             <Style Selector="^ /template/ ContentControl#ContentPresenter">
                 <Setter Property="Foreground" Value="{DynamicResource ComboBoxDisabledForeground}" />
             </Style>
@@ -288,12 +299,10 @@
         </Setter>
 
         <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemPointeroverForeground}" />
             <Setter Property="Background" Value="{DynamicResource ComboBoxItemPointeroverBackground}" />
         </Style>
 
         <Style Selector="^:focus /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemFocusForeground}" />
             <Setter Property="Background" Value="{DynamicResource ComboBoxItemFocusBackground}" />
         </Style>
 
@@ -302,12 +311,10 @@
         </Style>
 
         <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemPressedForeground}" />
             <Setter Property="Background" Value="{DynamicResource ComboBoxItemPressedBackground}" />
         </Style>
 
         <Style Selector="^:selected">
-            <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemSelectedForeground}" />
             <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="Background" Value="{DynamicResource ComboBoxItemSelectedBackground}" />
             </Style>

src/Semi.Avalonia/Controls/ContextMenu.axaml

@@ -3,18 +3,17 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
     <ControlTheme x:Key="{x:Type ContextMenu}" TargetType="ContextMenu">
-        <Setter Property="Background" Value="{DynamicResource MenuFlyoutBackground}" />
+        <Setter Property="ContextMenu.Background" Value="{DynamicResource MenuFlyoutBackground}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource MenuFlyoutBorderBrush}" />
+        <Setter Property="ContextMenu.BorderBrush" Value="{DynamicResource MenuFlyoutBorderBrush}" />
-        <Setter Property="BorderThickness" Value="{DynamicResource MenuFlyoutBorderThickness}" />
+        <Setter Property="ContextMenu.BorderThickness" Value="{DynamicResource MenuFlyoutBorderThickness}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource MenuFlyoutCornerRadius}" />
+        <Setter Property="ContextMenu.CornerRadius" Value="{DynamicResource MenuFlyoutCornerRadius}" />
-        <Setter Property="MaxWidth" Value="{DynamicResource MenuFlyoutMaxWidth}" />
+        <Setter Property="ContextMenu.MaxWidth" Value="{DynamicResource MenuFlyoutMaxWidth}" />
-        <Setter Property="MinHeight" Value="{DynamicResource MenuFlyoutMinHeight}" />
+        <Setter Property="ContextMenu.MinHeight" Value="{DynamicResource MenuFlyoutMinHeight}" />
-        <Setter Property="Padding" Value="{DynamicResource MenuFlyoutPadding}" />
+        <Setter Property="ContextMenu.Padding" Value="{DynamicResource MenuFlyoutPadding}" />
-        <Setter Property="Focusable" Value="True"></Setter>
+        <Setter Property="ContextMenu.HorizontalAlignment" Value="Stretch" />
-        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="TextBlock.FontWeight" Value="Normal" />
-        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="ContextMenu.WindowManagerAddShadowHint" Value="False" />
-        <Setter Property="WindowManagerAddShadowHint" Value="False" />
+        <Setter Property="ContextMenu.Template">
-        <Setter Property="Template">
             <ControlTemplate TargetType="ContextMenu">
                 <Border
                     MinHeight="{TemplateBinding MinHeight}"

src/Semi.Avalonia/Controls/DataValidationErrors.axaml

@@ -2,12 +2,13 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:collections="clr-namespace:System.Collections;assembly=netstandard">
+    <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type DataValidationErrors}" TargetType="DataValidationErrors">
         <Setter Property="Template">
             <ControlTemplate TargetType="DataValidationErrors">
                 <DockPanel LastChildFill="True">
                     <ContentControl
-                        Name="InlineDataValidationContentControl"
+                        x:Name="InlineDataValidationContentControl"
                         Margin="0,4,0,0"
                         Content="{Binding (DataValidationErrors.Errors)}"
                         ContentTemplate="{TemplateBinding ErrorTemplate}"

src/Semi.Avalonia/Controls/DatePicker.axaml

@@ -2,14 +2,13 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type DatePickerPresenter}" TargetType="DatePickerPresenter">
         <Setter Property="Width" Value="296" />
         <Setter Property="MinWidth" Value="296" />
         <Setter Property="MaxHeight" Value="300" />
         <Setter Property="FontWeight" Value="Normal" />
         <Setter Property="Background" Value="{DynamicResource DateTimePickerPopupBackground}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerPopupBorderBrush}" />
-        <Setter Property="BorderThickness" Value="1" />
         <Setter Property="CornerRadius" Value="6" />
         <Setter Property="Template">
             <ControlTemplate TargetType="DatePickerPresenter">
@@ -23,103 +22,97 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     BoxShadow="{DynamicResource DateTimePickerFlyoutBoxShadow}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Border
+                    <Grid Name="ContentPanel" RowDefinitions="*,Auto">
-                        CornerRadius="{TemplateBinding CornerRadius}"
+                        <Grid Name="PART_PickerContainer">
-                        ClipToBounds="True">
+                            <Grid.Styles>
-                        <Grid Name="ContentPanel" RowDefinitions="*,Auto">
+                                <Style Selector="DateTimePickerPanel &gt; ListBoxItem">
-                            <Grid Name="PART_PickerContainer">
+                                    <Setter Property="Theme" Value="{StaticResource DateTimePickerItem}" />
-                                <Grid.Styles>
+                                </Style>
-                                    <Style Selector="DateTimePickerPanel > ListBoxItem">
+                            </Grid.Styles>
-                                        <Setter Property="Theme" Value="{StaticResource DateTimePickerItem}" />
+                            <!--  Column Definitions set in code, ignore here  -->
-                                    </Style>
+                            <Panel Name="PART_MonthHost">
-                                </Grid.Styles>
+                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
-                                <!--  Column Definitions set in code, ignore here  -->
+                                    <DateTimePickerPanel
-                                <Panel Name="PART_MonthHost">
+                                        Name="PART_MonthSelector"
-                                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
-                                        <DateTimePickerPanel
+                                        PanelType="Month"
-                                            Name="PART_MonthSelector"
+                                        ShouldLoop="True" />
-                                            ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                </ScrollViewer>
-                                            PanelType="Month"
+                                <RepeatButton Name="PART_MonthUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
-                                            ShouldLoop="True" />
+                                <RepeatButton Name="PART_MonthDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
-                                    </ScrollViewer>
+                            </Panel>
-                                    <RepeatButton Name="PART_MonthUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                            <Panel Name="PART_DayHost">
-                                    <RepeatButton Name="PART_MonthDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
+                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
-                                </Panel>
+                                    <DateTimePickerPanel
-                                <Panel Name="PART_DayHost">
+                                        Name="PART_DaySelector"
-                                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
-                                        <DateTimePickerPanel
+                                        PanelType="Day"
-                                            Name="PART_DaySelector"
+                                        ShouldLoop="True" />
-                                            ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                </ScrollViewer>
-                                            PanelType="Day"
+                                <RepeatButton Name="PART_DayUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
-                                            ShouldLoop="True" />
+                                <RepeatButton Name="PART_DayDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
-                                    </ScrollViewer>
+                            </Panel>
-                                    <RepeatButton Name="PART_DayUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                            <Panel Name="PART_YearHost">
-                                    <RepeatButton Name="PART_DayDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
+                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
-                                </Panel>
+                                    <DateTimePickerPanel
-                                <Panel Name="PART_YearHost">
+                                        Name="PART_YearSelector"
-                                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
-                                        <DateTimePickerPanel
+                                        PanelType="Year"
-                                            Name="PART_YearSelector"
+                                        ShouldLoop="False" />
-                                            ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                </ScrollViewer>
-                                            PanelType="Year"
+                                <RepeatButton Name="PART_YearUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
-                                            ShouldLoop="False" />
+                                <RepeatButton Name="PART_YearDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
-                                    </ScrollViewer>
+                            </Panel>
-                                    <RepeatButton Name="PART_YearUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                            <Rectangle
-                                    <RepeatButton Name="PART_YearDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
+                                Name="PART_FirstSpacer"
-                                </Panel>
+                                Grid.Column="1"
-                                <Rectangle
+                                Width="1"
-                                    Name="PART_FirstSpacer"
+                                Margin="0,4"
-                                    Grid.Column="1"
+                                HorizontalAlignment="Center"
-                                    Width="1"
+                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
-                                    HorizontalAlignment="Center"
+                            <Rectangle
-                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                Name="PART_SecondSpacer"
-                                <Rectangle
+                                Grid.Column="3"
-                                    Name="PART_SecondSpacer"
+                                Width="1"
-                                    Grid.Column="3"
+                                Margin="0,4"
-                                    Width="1"
+                                HorizontalAlignment="Center"
-                                    HorizontalAlignment="Center"
+                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
-                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
-                            </Grid>
-
-                            <Grid
-                                Name="AcceptDismissGrid"
-                                Grid.Row="1"
-                                ColumnDefinitions="*,Auto,*">
-                                <Button
-                                    Name="PART_AcceptButton"
-                                    Grid.Column="0"
-                                    HorizontalAlignment="Stretch"
-                                    VerticalAlignment="Stretch"
-                                    Theme="{StaticResource DateTimePickerButton}">
-                                    <PathIcon
-                                        Width="12"
-                                        Height="12"
-                                        Data="{DynamicResource DateTimePickerAcceptGlyph}" />
-                                </Button>
-                                <Rectangle
-                                    Grid.Column="1"
-                                    Width="1"
-                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
-                                <Button
-                                    Name="PART_DismissButton"
-                                    Grid.Column="2"
-                                    HorizontalAlignment="Stretch"
-                                    VerticalAlignment="Stretch"
-                                    Theme="{StaticResource DateTimePickerButton}">
-                                    <PathIcon
-                                        Width="12"
-                                        Height="12"
-                                        Data="{DynamicResource DateTimePickerDismissGlyph}" />
-                                </Button>
-                                <Rectangle
-                                    Grid.Column="0"
-                                    Grid.ColumnSpan="3"
-                                    Height="1"
-                                    VerticalAlignment="Top"
-                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
-                            </Grid>
                         </Grid>
-                    </Border>
+
+                        <Grid
+                            Name="AcceptDismissGrid"
+                            Grid.Row="1"
+                            ColumnDefinitions="*,*">
+                            <Button
+                                Name="PART_AcceptButton"
+                                Grid.Column="0"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Theme="{StaticResource DateTimePickerButton}">
+                                <PathIcon
+                                    Width="12"
+                                    Height="12"
+                                    Data="{DynamicResource DateTimePickerAcceptGlyph}" />
+                            </Button>
+                            <Button
+                                Name="PART_DismissButton"
+                                Grid.Column="1"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                FontSize="16"
+                                Theme="{StaticResource DateTimePickerButton}">
+                                <PathIcon
+                                    Width="12"
+                                    Height="12"
+                                    Data="{DynamicResource DateTimePickerDismissGlyph}" />
+                            </Button>
+                            <Rectangle
+                                Grid.ColumnSpan="2"
+                                Height="1"
+                                VerticalAlignment="Top"
+                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                        </Grid>
+                    </Grid>
                 </Border>
             </ControlTemplate>
         </Setter>
@@ -183,7 +176,6 @@
                                     <TextBlock
                                         Name="PART_MonthTextBlock"
                                         Padding="12,0"
-                                        HorizontalAlignment="Center"
                                         VerticalAlignment="Center"
                                         FontFamily="{TemplateBinding FontFamily}"
                                         FontSize="{TemplateBinding FontSize}"
@@ -200,7 +192,7 @@
                                         FontWeight="{TemplateBinding FontWeight}"
                                         Text="{DynamicResource STRING_DATEPICKER_YEAR_TEXT}" />
                                     <Rectangle
-                                        Name="PART_FirstSpacer"
+                                        x:Name="PART_FirstSpacer"
                                         Grid.Column="1"
                                         Width="1"
                                         Height="{TemplateBinding Height}"
@@ -208,7 +200,7 @@
                                         HorizontalAlignment="Center"
                                         Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                                     <Rectangle
-                                        Name="PART_SecondSpacer"
+                                        x:Name="PART_SecondSpacer"
                                         Grid.Column="3"
                                         Width="1"
                                         Height="{TemplateBinding Height}"
@@ -219,7 +211,8 @@
                                 <PathIcon
                                     Name="PART_Icon"
                                     Grid.Column="1"
-                                    Theme="{DynamicResource InnerPathIcon}"
+                                    Width="16"
+                                    Height="16"
                                     Margin="0,0,8,0"
                                     Data="{DynamicResource DatePickerIconGlyph}"
                                     Foreground="{DynamicResource DateTimePickerIconForeground}" />
@@ -238,11 +231,11 @@
                         <Button
                             Name="ClearButton"
                             Grid.Column="1"
-                            Theme="{DynamicResource InnerIconButton}"
+                            Margin="0,0,8,0"
-                            Margin="0,0,9,0"
                             Command="{Binding $parent[DatePicker].Clear}"
                             Content="{DynamicResource IconButtonClearData}"
-                            IsVisible="False" />
+                            IsVisible="False"
+                            Theme="{DynamicResource InnerIconButton}" />
                     </Grid>
                 </DataValidationErrors>
             </ControlTemplate>

src/Semi.Avalonia/Controls/DateTimePickerShared.axaml

@@ -2,6 +2,8 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
+
     <ControlTheme x:Key="DateTimePickerFlyoutButton" TargetType="Button">
         <Setter Property="RenderTransform" Value="none" />
         <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
@@ -24,7 +26,6 @@
 
         <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
             <Setter Property="Background" Value="{DynamicResource DateTimePickerButtonPointeroverBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerButtonPointeroverBorderBrush}" />
         </Style>
 
         <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
@@ -57,7 +58,7 @@
         x:Key="DateTimePickerItem"
         BasedOn="{StaticResource {x:Type ListBoxItem}}"
         TargetType="ListBoxItem">
-        <Setter Property="CornerRadius" Value="0" />
+        <Setter Property="ListBoxItem.CornerRadius" Value="0" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="HorizontalContentAlignment" Value="Center" />
         <Setter Property="Background" Value="{DynamicResource DateTimePickerListItemBackground}" />
@@ -65,6 +66,10 @@
         <Style Selector="^:selected">
             <Setter Property="IsHitTestVisible" Value="False" />
         </Style>
+        <Style Selector="^.MonthItem">
+            <Setter Property="Padding" Value="{DynamicResource DatePickerFlyoutPresenterMonthPadding}" />
+            <Setter Property="HorizontalContentAlignment" Value="Left" />
+        </Style>
     </ControlTheme>
 
     <!--  This is used for both the accept/dismiss & buttons in the presenter  -->
@@ -79,7 +84,7 @@
             <ControlTemplate TargetType="Button">
                 <Border Background="{TemplateBinding Background}">
                     <ContentPresenter
-                        Name="ContentPresenter"
+                        x:Name="ContentPresenter"
                         Padding="{TemplateBinding Padding}"
                         HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                         VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"