fix: only update Placement=Top/Bottom in TabbedPage.

* feat: add converters and update bindings in ColorPicker components.

* feat: simplify ColorPicker layout by replacing complex structure with ColorView component.

* feat: remove CornerRadiusToDoubleConverter.

* feat: replace EnumToBoolConverter & ToColorModel with ObjectConverters.Equal.

* feat: set HexInputAlphaPosition to Trailing.

* feat: update ColorView layout and styling for improved UI consistency.

* feat: bind Increment property of ColorSliders to respective TickFrequency and Slider values.

* feat: update ColorView bindings to use new syntax and adjust CornerRadius for improved styling.

* feat: update ColorPicker SelectedIndex Mode to TwoWay.

* feat: sync upstream changes.

* feat: update ColorPicker and ColorView to use SemiColorPalette for improved color selection.

* feat: update ControlTemplate TargetType.

* feat: add AIPurple colors to Palette.

* refactor: display real Hex in HexColorPicker.

* fix: update ColorView bindings to handle null values with a converter.

* refactor: refactor ColorPicker demo.

* refactor: replace RelativeSource bindings with TemplateBinding in ColorView.

* chore: copy ColorView Template to ColorPicker.

* fix: update AlphaEnabled ToggleSwitch content to reflect correct label.

* fix: fix index order in ColorPicker.

.github/workflows/deploy.yml

@@ -2,7 +2,7 @@ name: Deploy to GitHub Pages
 
 env:
   PROJECT_PATH: demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj
-  OUTPUT_PATH: demo/Semi.Avalonia.Demo.Web/bin/Release/net8.0-browser/publish/wwwroot
+  OUTPUT_PATH: demo/Semi.Avalonia.Demo.Web/bin/Release/net10.0-browser/publish/wwwroot
 on:
   workflow_dispatch:
 
@@ -11,12 +11,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v6
 
-      - name: Setup .NET 8
-        uses: actions/setup-dotnet@v4
+      - name: Setup dotnet
+        uses: actions/setup-dotnet@v5
         with:
-          dotnet-version: 8.0.x
+          dotnet-version: |
+            10.0.x
 
       - name: Install wasm-tools
         run: dotnet workload install wasm-tools
@@ -31,7 +32,7 @@ jobs:
         run: touch $OUTPUT_PATH/.nojekyll
 
       - name: Commit wwwroot to GitHub Pages
-        uses: JamesIves/github-pages-deploy-action@v4.5.0
+        uses: JamesIves/github-pages-deploy-action@v4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           branch: gh-pages

.github/workflows/pack-nightly.yml

@@ -6,7 +6,7 @@ on:
       Version_Prefix:
         description: 'Version Prefix'
         required: true
-        default: '11.2.999'
+        default: '12.0.999'
         type: string
       Semi_Avalonia:
         description: 'Pack Semi.Avalonia'
@@ -31,7 +31,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v6
 
       - name: Get Version
         run: |
@@ -62,7 +62,7 @@ jobs:
         run: dotnet nuget push "nugets/*.nupkg" --api-key ${{ secrets.IRIHI_NUGET_API_KEY }} --source irihi.tech --skip-duplicate
 
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: nugets
           path: nugets

.github/workflows/pack.yml

@@ -40,6 +40,7 @@ on:
       Semi_Avalonia_TreeDataGrid:
         type: boolean
         default: true
+    secrets: {}
 
 jobs:
   Pack_to_NuGet:
@@ -47,7 +48,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v6
 
       - name: Pack Semi.Avalonia
         if: ${{ inputs.Semi_Avalonia }}
@@ -70,7 +71,7 @@ jobs:
         run: dotnet nuget push "nugets/*.nupkg" --api-key ${{ secrets.NUGET_ORG_API_KEY }} --source https://api.nuget.org/v3/index.json --skip-duplicate
 
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: nugets
           path: nugets

.github/workflows/publish.yml

@@ -75,11 +75,11 @@ jobs:
     runs-on: windows-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v6
       - name: Publish win-x64
         run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: Semi.Avalonia.Demo.Desktop.win-x64
           path: |
@@ -91,13 +91,13 @@ jobs:
     runs-on: windows-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v6
       - name: Enable Native AOT in .csproj
         run: sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
       - name: Publish win-x64 AOT
         run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release -o publish
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: Semi.Avalonia.Demo.Desktop.win-x64.NativeAOT
           path: |
@@ -109,11 +109,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v6
       - name: Publish linux-x64
         run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r linux-x64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: Semi.Avalonia.Demo.Desktop.linux-x64
           path: |
@@ -125,13 +125,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v6
       - name: Enable Native AOT in .csproj
         run: sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
       - name: Publish linux-x64 AOT
         run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r linux-x64 -c Release -o publish
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: Semi.Avalonia.Demo.Desktop.linux-x64.NativeAOT
           path: |
@@ -143,11 +143,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v6
       - name: Publish linux-x64 DRM
         run: dotnet publish demo/Semi.Avalonia.Demo.Drm -r linux-x64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: Semi.Avalonia.Demo.Drm.linux-x64
           path: |
@@ -159,13 +159,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v6
       - name: Enable Native AOT in .csproj
         run: sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj
       - name: Publish linux-x64 AOT
         run: dotnet publish demo/Semi.Avalonia.Demo.Drm -r linux-x64 -c Release -o publish
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: Semi.Avalonia.Demo.Drm.linux-x64.NativeAOT
           path: |
@@ -177,11 +177,11 @@ jobs:
     runs-on: macos-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v6
       - name: Publish osx-arm64
         run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r osx-arm64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: Semi.Avalonia.Demo.Desktop.osx-arm64
           path: |
@@ -193,13 +193,13 @@ jobs:
     runs-on: macos-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v6
       - name: Enable Native AOT in .csproj
         run: sed -i '' 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
       - name: Publish osx-arm64 AOT
         run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r osx-arm64 -c Release -o publish
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: Semi.Avalonia.Demo.Desktop.osx-arm64.NativeAOT
           path: |
@@ -211,15 +211,15 @@ jobs:
     runs-on: windows-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.2.2
-      - name: CD Android
-        run: cd demo/Semi.Avalonia.Demo.Android
+        uses: actions/checkout@v6
+      - name: Install Android workload
+        run: dotnet workload install android
       - name: Restore Dependencies
-        run: dotnet restore
+        run: dotnet restore demo/Semi.Avalonia.Demo.Android
       - name: Publish Android
-        run: dotnet publish demo/Semi.Avalonia.Demo.Android -c Release -f net8.0-android --no-restore -o publish /p:RuntimeIdentifier=android-arm64
+        run: dotnet publish demo/Semi.Avalonia.Demo.Android -c Release -f net10.0-android --no-restore -o publish /p:RuntimeIdentifier=android-arm64
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: android-arm64
           path: publish/*Signed.apk

.github/workflows/release-tag.yml

@@ -33,6 +33,7 @@ jobs:
       Semi_Avalonia_ColorPicker: ${{ inputs.Semi_Avalonia_ColorPicker }}
       Semi_Avalonia_DataGrid: ${{ inputs.Semi_Avalonia_DataGrid }}
       Semi_Avalonia_TreeDataGrid: ${{ inputs.Semi_Avalonia_TreeDataGrid }}
+    secrets: inherit
 
   publish:
     uses: ./.github/workflows/publish.yml
@@ -41,7 +42,7 @@ jobs:
     needs: [ nuget,publish ]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/download-artifact@v4.3.0
+      - uses: actions/download-artifact@v8
 
       - name: Display structure of downloaded files
         run: ls -R
@@ -62,7 +63,7 @@ jobs:
         run: ls -R
 
       - name: Release
-        uses: softprops/action-gh-release@v2.3.2
+        uses: softprops/action-gh-release@v2
         if: startsWith(github.ref, 'refs/tags/') || github.event_name == 'workflow_dispatch'
         with:
           generate_release_notes: true

Nuget.Config

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

README.md

@@ -75,13 +75,12 @@ We offer limited free community support for Semi Avalonia and Ursa. If you have
 
 ## Version compatibility
 
-| Semi Design Version | Avalonia Version |
-|:--------------------|:-----------------|
-| 11.2.1              | >=11.2.1         |
-| 11.2.0              | 11.2.0           |
-| 11.1.0              | >=11.1.0         |
-| 11.0.7              | >=11.0.7         |
-| 11.0.1              | <=11.0.6         |
+| Semi Avalonia Version | Avalonia Version |
+|:----------------------|:-----------------|
+| 11.3.7                | >=11.3.7         |
+| 11.2.1                | >=11.2.1         |
+| 11.2.0                | End of Life      |
+| 11.1.x                | End of Life      |
 
 ## Credits
 

README_CN.md

@@ -75,13 +75,12 @@ dotnet add package Semi.Avalonia.AvaloniaEdit
 
 ## 版本兼容性
 
-| 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 Version | Avalonia Version |
+|:----------------------|:-----------------|
+| 11.3.7                | >=11.3.7         |
+| 11.2.1                | >=11.2.1         |
+| 11.2.0                | End of Life      |
+| 11.1.x                | End of Life      |
 
 ## 致谢
 

Semi.Avalonia.sln

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

Semi.Avalonia.slnx

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

demo/Directory.Build.props

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

demo/Directory.Packages.props

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

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

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

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

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

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

@@ -11,6 +11,4 @@ namespace Semi.Avalonia.Demo.Android;
     MainLauncher = true,
     LaunchMode = LaunchMode.SingleTop,
     ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.ScreenSize | ConfigChanges.UiMode)]
-public class MainActivity : AvaloniaMainActivity<App>
-{
-}
+public class MainActivity : AvaloniaMainActivity;

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

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

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

@@ -23,7 +23,7 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Desktop"/>
     </ItemGroup>
 
     <ItemGroup>

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

@@ -23,8 +23,8 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Desktop"/>
+        <PackageReference Include="Avalonia.LinuxFramebuffer"/>
     </ItemGroup>
 
     <ItemGroup>

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

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

demo/Semi.Avalonia.Demo/App.axaml

@@ -11,7 +11,7 @@
         <semi:SemiPopupAnimations />
         <semi:ColorPickerSemiTheme />
         <semi:DataGridSemiTheme />
-        <semi:TreeDataGridSemiTheme />
+        <!-- <semi:TreeDataGridSemiTheme /> -->
     </Application.Styles>
     <Application.Resources>
         <ResourceDictionary>

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

@@ -12,6 +12,9 @@ public partial class App : Application
     public override void Initialize()
     {
         AvaloniaXamlLoader.Load(this);
+#if DEBUG
+        this.AttachDeveloperTools();
+#endif
         this.DataContext = new ApplicationViewModel();
     }
 
@@ -22,7 +25,7 @@ public partial class App : Application
             case IClassicDesktopStyleApplicationLifetime desktop:
                 // Line below is needed to remove Avalonia data validation.
                 // Without this line you will get duplicate validations from both Avalonia and CT
-                BindingPlugins.DataValidators.RemoveAt(0);
+                // BindingPlugins.DataValidators.RemoveAt(0);
                 desktop.MainWindow = new MainWindow();
                 break;
             case ISingleViewApplicationLifetime singleView:

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

@@ -79,6 +79,32 @@ public static class ColorTokens
         new("SemiColorDangerLightActive", "Danger Light Active")
     ];
 
+    public static IReadOnlyList<Tuple<string, string>> AIGeneralTokens { get; } =
+    [
+        new("SemiColorAIGeneral", "AI General"),
+        new("SemiColorAIGeneralPointerover", "AI General Pointerover"),
+        new("SemiColorAIGeneralActive", "AI General Active"),
+        new("SemiColorAIGeneralDisabled", "AI General Disabled")
+    ];
+
+    public static IReadOnlyList<Tuple<string, string>> AIPurpleTokens { get; } =
+    [
+        new("SemiColorAIPurple", "AI Purple"),
+        new("SemiColorAIPurplePointerover", "AI Purple Pointerover"),
+        new("SemiColorAIPurpleActive", "AI Purple Active"),
+        new("SemiColorAIPurpleDisabled", "AI Purple Disabled")
+    ];
+
+    public static IReadOnlyList<Tuple<string, string>> AIBackgroundTokens { get; } =
+    [
+        new("SemiColorAIBackgroundBottom", "AI Bottom Background"),
+        new("SemiColorAIBackgroundBottomPointerover", "AI Bottom Background Pointerover"),
+        new("SemiColorAIBackgroundBottomActive", "AI Bottom Background Active"),
+        new("SemiColorAIBackgroundTop", "AI Top Background"),
+        new("SemiColorAIBackgroundTopPointerover", "AI Top Background Pointerover"),
+        new("SemiColorAIBackgroundTopActive", "AI Top Background Active"),
+    ];
+
     public static IReadOnlyList<Tuple<string, string>> TextTokens { get; } =
     [
         new("SemiColorText0", "Text 0"),

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

@@ -3,6 +3,7 @@ using System.Threading.Tasks;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
+using Avalonia.Input.Platform;
 using Avalonia.Media;
 using Semi.Avalonia.Demo.Converters;
 
@@ -92,6 +93,12 @@ public class ColorDetailControl : TemplatedControl
             Hex2 = hex2 as string;
             OpacityNumber = brush.Opacity.ToString(CultureInfo.InvariantCulture);
         }
+        else
+        {
+            Hex = null;
+            Hex2 = null;
+            OpacityNumber = null;
+        }
     }
 
     public async Task Copy(object o)

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

@@ -28,7 +28,7 @@
         </StackPanel.Styles>
 
         <AutoCompleteBox
-            Watermark="Please select a State"
+            PlaceholderText="Please select a State"
             ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             Classes="Large"
@@ -41,7 +41,7 @@
             ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             IsEnabled="False"
-            Watermark="Disabled"
+            PlaceholderText="Disabled"
             ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             InnerLeftContent="https://"
@@ -52,16 +52,16 @@
             <AutoCompleteBox
                 Width="100"
                 Classes="Large"
-                Watermark="Large"
+                PlaceholderText="Large"
                 ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
-                Watermark="Default"
+                PlaceholderText="Default"
                 ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
                 Classes="Small"
-                Watermark="Small"
+                PlaceholderText="Small"
                 ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         </StackPanel>
 
@@ -69,12 +69,12 @@
             <AutoCompleteBox
                 Width="100"
                 IsEnabled="False"
-                Watermark="Disabled"
+                PlaceholderText="Disabled"
                 ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
                 Classes="Bordered"
-                Watermark="Bordered"
+                PlaceholderText="Bordered"
                 ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"

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

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

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

@@ -35,5 +35,30 @@
                 VerticalAlignment="Center"
                 Text="A.S.I.A" />
         </ButtonSpinner>
+        <ButtonSpinner
+            Height="30"
+            AllowSpin="{Binding #allowSpinCheck.IsChecked}"
+            BorderThickness="1"
+            ShowButtonSpinner="{Binding #showSpinCheck.IsChecked}"
+            Spin="OnSpin"
+            Theme="{StaticResource SplitButtonSpinner}">
+            <TextBlock
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                Text="A.S.I.A" />
+        </ButtonSpinner>
+        <ButtonSpinner
+            Height="30"
+            AllowSpin="{Binding #allowSpinCheck.IsChecked}"
+            ButtonSpinnerLocation="Left"
+            BorderThickness="1"
+            ShowButtonSpinner="{Binding #showSpinCheck.IsChecked}"
+            Spin="OnSpin"
+            Theme="{StaticResource SplitButtonSpinner}">
+            <TextBlock
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                Text="A.S.I.A" />
+        </ButtonSpinner>
     </StackPanel>
 </UserControl>

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

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

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

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

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

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

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

@@ -2,80 +2,90 @@
     x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:semi="https://irihi.tech/semi"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     d:DesignHeight="1450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <ScrollViewer>
-        <StackPanel Spacing="20">
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <ColorView Name="Test" ColorSpectrumShape="Ring" />
-                <ColorView ColorSpectrumShape="Box" />
-                <ColorView Palette="{DynamicResource SemiColorPalette}" />
-            </StackPanel>
-            <StackPanel Orientation="Horizontal">
-                <ColorView
-                    Name="SimpleColorViewTest"
-                    HsvColor="hsv(180,80%,70%)"
-                    IsAlphaVisible="True"
-                    Theme="{StaticResource SimpleColorView}" />
-                <StackPanel>
-                    <TextBlock Text="{Binding #SimpleColorViewTest.HsvColor}" />
-                    <TextBlock Text="{Binding #SimpleColorViewTest.Color}" />
+    <DockPanel>
+        <ScrollViewer DockPanel.Dock="Right" Width="260">
+            <StackPanel Margin="12" Spacing="8">
+                <StackPanel.Styles>
+                    <Style Selector="ToggleSwitch">
+                        <Setter Property="OffContent" Value="{Binding $self.OnContent}" />
+                    </Style>
+                </StackPanel.Styles>
+                <StackPanel Spacing="8">
+                    <ToggleSwitch Name="AccentColors" OnContent="IsAccentColorsVisible" IsChecked="True" />
+                    <ToggleSwitch Name="AlphaEnabled" OnContent="IsAlphaEnabled" IsChecked="True" />
+                    <ToggleSwitch Name="Alpha" OnContent="IsAlphaVisible" IsChecked="True" />
+                    <ToggleSwitch Name="ColorComponents" OnContent="IsColorComponentsVisible" IsChecked="True" />
+                    <ToggleSwitch Name="ColorModel" OnContent="IsColorModelVisible" IsChecked="True" />
+                    <ToggleSwitch Name="ColorPalette" OnContent="IsColorPaletteVisible" IsChecked="True" />
+                    <ToggleSwitch Name="ColorPreview" OnContent="IsColorPreviewVisible" IsChecked="True" />
+                    <ToggleSwitch Name="ColorSpectrum" OnContent="IsColorSpectrumVisible" IsChecked="True" />
+                    <ToggleSwitch Name="ColorSpectrumSlider" OnContent="IsColorSpectrumSliderVisible" IsChecked="True" />
+                    <ToggleSwitch Name="ComponentSlider" OnContent="IsComponentSliderVisible" IsChecked="True" />
+                    <ToggleSwitch Name="ComponentTextInput" OnContent="IsComponentTextInputVisible" IsChecked="True" />
+                    <ToggleSwitch Name="HexInput" OnContent="IsHexInputVisible" IsChecked="True" />
+                </StackPanel>
+
+                <Separator />
+
+                <StackPanel Spacing="8">
+                    <TextBlock>
+                        <Run Text="Color: " />
+                        <Run Text="{Binding #cv.Color,Mode=OneWay}" />
+                    </TextBlock>
+                    <TextBlock>
+                        <Run Text="HsvColor:" />
+                        <Run Text="{Binding #cv.HsvColor,Mode=OneWay}" />
+                    </TextBlock>
                 </StackPanel>
             </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <ColorPicker ColorSpectrumShape="Ring">
-                    <ColorPicker.Palette>
-                        <FlatHalfColorPalette />
-                    </ColorPicker.Palette>
-                </ColorPicker>
-                <ColorPicker ColorSpectrumShape="Box">
-                    <ColorPicker.Palette>
-                        <semi:SemiColorLightPalette />
-                    </ColorPicker.Palette>
-                </ColorPicker>
-                <ColorPicker
-                    Theme="{DynamicResource HexColorPicker}"
-                    ColorSpectrumShape="Box">
-                    <ColorPicker.Palette>
-                        <semi:SemiColorLightPalette />
-                    </ColorPicker.Palette>
-                </ColorPicker>
-            </StackPanel>
-            <StackPanel HorizontalAlignment="Left">
-                <TextBlock Text="Use Style to customize button" />
-                <ColorPicker
-                    Margin="8"
-                    MinWidth="32"
-                    HsvColor="hsv(180,80%,70%)">
-                    <ColorPicker.Content>
-                        <Border
-                            Margin="1"
-                            Background="{Binding $parent[ColorPicker].HsvColor, Converter={StaticResource ToBrushConverter}}"
-                            CornerRadius="1" />
-                    </ColorPicker.Content>
-                    <ColorPicker.Styles>
-                        <Style Selector="DropDownButton">
-                            <Setter Property="Padding" Value="0" />
-                            <Style Selector="^ /template/ PathIcon">
-                                <Setter Property="IsVisible" Value="False" />
-                            </Style>
-                        </Style>
-                    </ColorPicker.Styles>
-                </ColorPicker>
-            </StackPanel>
+        </ScrollViewer>
 
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <ColorPicker
-                    Theme="{StaticResource SimpleColorPicker}"
-                    HsvColor="hsv(180,80%,70%)" />
-                <ColorPicker
-                    Theme="{StaticResource HexSimpleColorPicker}"
-                    HsvColor="hsv(180,80%,70%)" />
+        <Border Margin="12"
+                BorderBrush="{DynamicResource SemiColorBorder}"
+                BorderThickness="1"
+                CornerRadius="6"
+                ClipToBounds="True">
+            <Border.Styles>
+                <Style Selector=":is(ColorView)">
+                    <Setter Property="IsAccentColorsVisible" Value="{Binding #AccentColors.IsChecked}" />
+                    <Setter Property="IsAlphaEnabled" Value="{Binding #AlphaEnabled.IsChecked}" />
+                    <Setter Property="IsAlphaVisible" Value="{Binding #Alpha.IsChecked}" />
+                    <Setter Property="IsColorComponentsVisible" Value="{Binding #ColorComponents.IsChecked}" />
+                    <Setter Property="IsColorModelVisible" Value="{Binding #ColorModel.IsChecked}" />
+                    <Setter Property="IsColorPaletteVisible" Value="{Binding #ColorPalette.IsChecked}" />
+                    <Setter Property="IsColorPreviewVisible" Value="{Binding #ColorPreview.IsChecked}" />
+                    <Setter Property="IsColorSpectrumVisible" Value="{Binding #ColorSpectrum.IsChecked}" />
+                    <Setter Property="IsColorSpectrumSliderVisible" Value="{Binding #ColorSpectrumSlider.IsChecked}" />
+                    <Setter Property="IsComponentSliderVisible" Value="{Binding #ComponentSlider.IsChecked}" />
+                    <Setter Property="IsComponentTextInputVisible" Value="{Binding #ComponentTextInput.IsChecked}" />
+                    <Setter Property="IsHexInputVisible" Value="{Binding #HexInput.IsChecked}" />
+
+                    <Setter Property="Color" Value="#39C5BB" />
+                </Style>
+            </Border.Styles>
+            <StackPanel Margin="12" Spacing="12" Orientation="Horizontal">
+                <StackPanel Spacing="12">
+                    <TextBlock Text="Default Theme" FontWeight="Bold" FontSize="16" />
+                    <ColorView Name="cv" />
+                    <StackPanel Spacing="12" Orientation="Horizontal">
+                        <ColorPicker />
+                        <ColorPicker Theme="{DynamicResource HexColorPicker}" />
+                    </StackPanel>
+                </StackPanel>
+                <StackPanel Spacing="12">
+                    <TextBlock Text="SimpleColorPicker" FontWeight="Bold" FontSize="16" />
+                    <ColorView Theme="{DynamicResource SimpleColorView}" />
+                    <StackPanel Spacing="12" Orientation="Horizontal">
+                        <ColorPicker Theme="{DynamicResource SimpleColorPicker}" />
+                        <ColorPicker Theme="{DynamicResource HexSimpleColorPicker}" />
+                    </StackPanel>
+                </StackPanel>
             </StackPanel>
-        </StackPanel>
-    </ScrollViewer>
+        </Border>
+    </DockPanel>
 </UserControl>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -36,10 +36,20 @@
                         <HyperlinkButton HorizontalAlignment="Right" Content="更多" />
                     </Panel>
                 </HeaderedContentControl.Header>
-                <HeaderedContentControl.Content>
-                    <SelectableTextBlock Text="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。" />
-                </HeaderedContentControl.Content>
+                <SelectableTextBlock Text="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。" />
             </HeaderedContentControl>
+            <TextBlock>Real GroupBox</TextBlock>
+            <GroupBox
+                HorizontalAlignment="Left"
+                MaxWidth="360">
+                <HeaderedContentControl.Header>
+                    <Panel>
+                        <SelectableTextBlock Text="Semi Design" />
+                        <HyperlinkButton HorizontalAlignment="Right" Content="更多" />
+                    </Panel>
+                </HeaderedContentControl.Header>
+                <SelectableTextBlock Text="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。" />
+            </GroupBox>
         </StackPanel>
     </ScrollViewer>
 </UserControl>

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

@@ -1,4 +1,4 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<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"

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

@@ -1,5 +1,6 @@
-using System.Threading.Tasks;
+using System.Threading.Tasks;
 using Avalonia.Controls;
+using Avalonia.Input.Platform;
 using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;

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

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

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

@@ -8,14 +8,11 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <ScrollViewer>
-        <StackPanel HorizontalAlignment="Left" Spacing="20">
+        <StackPanel>
             <StackPanel.Styles>
-                <Style Selector="Label">
-                    <Setter Property="Margin" Value="4" />
-                </Style>
-                <Style Selector="Grid > TextBlock">
-                    <Setter Property="VerticalAlignment" Value="Center" />
-                    <Setter Property="Margin" Value="4" />
+                <Style Selector="Grid > TextBlock,Grid > Label">
+                    <Setter Property="Layoutable.VerticalAlignment" Value="Center" />
+                    <Setter Property="Layoutable.Margin" Value="4" />
                 </Style>
             </StackPanel.Styles>
             <ScrollViewer HorizontalScrollBarVisibility="Auto">
@@ -156,69 +153,89 @@
                     </HeaderedContentControl>
                 </StackPanel>
             </ScrollViewer>
-            <WrapPanel>
-                <Label Theme="{StaticResource TagLabel}">Label</Label>
-                <Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
-                <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
-                <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
-            </WrapPanel>
-            <WrapPanel>
-                <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
-                <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
-                <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-                <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
-                <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-                <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-                <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-                <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-                <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
-                <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
-                <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-                <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-                <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
-                <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-                <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
-                <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-                <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
-            </WrapPanel>
-            <WrapPanel>
-                <Label Classes="Ghost Red" Theme="{StaticResource TagLabel}">Red</Label>
-                <Label Classes="Ghost Pink" Theme="{StaticResource TagLabel}">Pink</Label>
-                <Label Classes="Ghost Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-                <Label Classes="Ghost Violet" Theme="{StaticResource TagLabel}">Violet</Label>
-                <Label Classes="Ghost Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-                <Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-                <Label Classes="Ghost LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-                <Label Classes="Ghost Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-                <Label Classes="Ghost Teal" Theme="{StaticResource TagLabel}">Teal</Label>
-                <Label Classes="Ghost Green" Theme="{StaticResource TagLabel}">Green</Label>
-                <Label Classes="Ghost LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-                <Label Classes="Ghost Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-                <Label Classes="Ghost Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
-                <Label Classes="Ghost Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-                <Label Classes="Ghost Orange" Theme="{StaticResource TagLabel}">Orange</Label>
-                <Label Classes="Ghost Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-                <Label Classes="Ghost White" Theme="{StaticResource TagLabel}">White</Label>
-            </WrapPanel>
-            <WrapPanel>
-                <Label Classes="Solid Red" Theme="{StaticResource TagLabel}">Red</Label>
-                <Label Classes="Solid Pink" Theme="{StaticResource TagLabel}">Pink</Label>
-                <Label Classes="Solid Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-                <Label Classes="Solid Violet" Theme="{StaticResource TagLabel}">Violet</Label>
-                <Label Classes="Solid Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-                <Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-                <Label Classes="Solid LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-                <Label Classes="Solid Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-                <Label Classes="Solid Teal" Theme="{StaticResource TagLabel}">Teal</Label>
-                <Label Classes="Solid Green" Theme="{StaticResource TagLabel}">Green</Label>
-                <Label Classes="Solid LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-                <Label Classes="Solid Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-                <Label Classes="Solid Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
-                <Label Classes="Solid Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-                <Label Classes="Solid Orange" Theme="{StaticResource TagLabel}">Orange</Label>
-                <Label Classes="Solid Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-                <Label Classes="Solid White" Theme="{StaticResource TagLabel}">White</Label>
-            </WrapPanel>
+
+            <HeaderedContentControl
+                Margin="16"
+                Header="Theme: TagLabel"
+                Theme="{DynamicResource GroupBox}">
+                <ScrollViewer HorizontalScrollBarVisibility="Auto">
+                    <StackPanel Orientation="Horizontal" Spacing="8">
+                        <StackPanel Spacing="4">
+                            <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
+                            <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                            <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                            <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                            <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                            <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                            <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                            <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                            <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                            <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
+                            <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                            <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                            <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                            <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                            <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                            <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                            <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
+                        </StackPanel>
+                        <StackPanel Spacing="4">
+                            <Label Classes="Ghost Red" Theme="{StaticResource TagLabel}">Red</Label>
+                            <Label Classes="Ghost Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                            <Label Classes="Ghost Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                            <Label Classes="Ghost Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                            <Label Classes="Ghost Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                            <Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                            <Label Classes="Ghost LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                            <Label Classes="Ghost Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                            <Label Classes="Ghost Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                            <Label Classes="Ghost Green" Theme="{StaticResource TagLabel}">Green</Label>
+                            <Label Classes="Ghost LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                            <Label Classes="Ghost Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                            <Label Classes="Ghost Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                            <Label Classes="Ghost Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                            <Label Classes="Ghost Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                            <Label Classes="Ghost Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                            <Label Classes="Ghost White" Theme="{StaticResource TagLabel}">White</Label>
+                        </StackPanel>
+                        <StackPanel Spacing="4">
+                            <Label Classes="Solid Red" Theme="{StaticResource TagLabel}">Red</Label>
+                            <Label Classes="Solid Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                            <Label Classes="Solid Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                            <Label Classes="Solid Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                            <Label Classes="Solid Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                            <Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                            <Label Classes="Solid LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                            <Label Classes="Solid Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                            <Label Classes="Solid Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                            <Label Classes="Solid Green" Theme="{StaticResource TagLabel}">Green</Label>
+                            <Label Classes="Solid LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                            <Label Classes="Solid Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                            <Label Classes="Solid Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                            <Label Classes="Solid Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                            <Label Classes="Solid Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                            <Label Classes="Solid Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                            <Label Classes="Solid White" Theme="{StaticResource TagLabel}">White</Label>
+                        </StackPanel>
+                        <StackPanel Spacing="4">
+                            <Label Classes="Colorful Gradient" Theme="{DynamicResource TagLabel}">Light</Label>
+                            <Label Classes="Colorful Gradient Ghost" Theme="{DynamicResource TagLabel}">Ghost</Label>
+                            <Label Classes="Colorful Gradient Solid" Theme="{DynamicResource TagLabel}">Solid</Label>
+                        </StackPanel>
+                        <StackPanel Spacing="4">
+                            <Label Classes="Colorful" Theme="{DynamicResource TagLabel}">Light</Label>
+                            <Label Classes="Colorful Ghost" Theme="{DynamicResource TagLabel}">Ghost</Label>
+                            <Label Classes="Colorful Solid" Theme="{DynamicResource TagLabel}">Solid</Label>
+                        </StackPanel>
+                        <StackPanel Spacing="4">
+                            <Label Theme="{StaticResource TagLabel}">Label</Label>
+                            <Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
+                            <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
+                            <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
+                        </StackPanel>
+                    </StackPanel>
+                </ScrollViewer>
+            </HeaderedContentControl>
         </StackPanel>
     </ScrollViewer>
 </UserControl>

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

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

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

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

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

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

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

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

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

@@ -353,12 +353,12 @@
                         <StackPanel>
                             <TextBlock Text="Install via nuget: " />
                             <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].MainInstall}" />
+                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].MainInstall}" />
                             </Border>
                             <TextBlock Text="Reference styles: " />
                             <Border Margin="0,16" Classes="CodeBlock">
                                 <SelectableTextBlock
-                                    FontFamily="Consolas"
+                                    
                                     Text="{Binding $parent[local:Overview].MainStyle}"
                                     TextWrapping="Wrap" />
                             </Border>
@@ -368,12 +368,12 @@
                         <StackPanel>
                             <TextBlock Text="Install via nuget: " />
                             <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].ColorPickerInstall}" />
+                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].ColorPickerInstall}" />
                             </Border>
                             <TextBlock Text="Reference styles: " />
                             <Border Margin="0,16" Classes="CodeBlock">
                                 <SelectableTextBlock
-                                    FontFamily="Consolas"
+                                    
                                     Text="{Binding $parent[local:Overview].ColorPickerStyle}"
                                     TextWrapping="Wrap" />
                             </Border>
@@ -383,12 +383,12 @@
                         <StackPanel>
                             <TextBlock Text="Install via nuget: " />
                             <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].DataGridInstall}" />
+                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].DataGridInstall}" />
                             </Border>
                             <TextBlock Text="Reference styles: " />
                             <Border Margin="0,16" Classes="CodeBlock">
                                 <SelectableTextBlock
-                                    FontFamily="Consolas"
+                                    
                                     Text="{Binding $parent[local:Overview].DataGridStyle}"
                                     TextWrapping="Wrap" />
                             </Border>
@@ -398,12 +398,12 @@
                         <StackPanel>
                             <TextBlock Text="Install via nuget: " />
                             <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].TreeDataGridInstall}" />
+                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].TreeDataGridInstall}" />
                             </Border>
                             <TextBlock Text="Reference styles: " />
                             <Border Margin="0,16" Classes="CodeBlock">
                                 <SelectableTextBlock
-                                    FontFamily="Consolas"
+                                    
                                     Text="{Binding $parent[local:Overview].TreeDataGridStyle}"
                                     TextWrapping="Wrap" />
                             </Border>
@@ -413,12 +413,12 @@
                         <StackPanel>
                             <TextBlock Text="Install via nuget: " />
                             <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].DockInstall}" />
+                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].DockInstall}" />
                             </Border>
                             <TextBlock Text="Reference styles: " />
                             <Border Margin="0,16" Classes="CodeBlock">
                                 <SelectableTextBlock
-                                    FontFamily="Consolas"
+                                    
                                     Text="{Binding $parent[local:Overview].DockStyle}"
                                     TextWrapping="Wrap" />
                             </Border>
@@ -428,12 +428,12 @@
                         <StackPanel>
                             <TextBlock Text="Install via nuget: " />
                             <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].TabaloniaInstall}" />
+                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].TabaloniaInstall}" />
                             </Border>
                             <TextBlock Text="Reference styles: " />
                             <Border Margin="0,16" Classes="CodeBlock">
                                 <SelectableTextBlock
-                                    FontFamily="Consolas"
+                                    
                                     Text="{Binding $parent[local:Overview].TabaloniaStyle}"
                                     TextWrapping="Wrap" />
                             </Border>
@@ -443,12 +443,12 @@
                         <StackPanel>
                             <TextBlock Text="Install via nuget: " />
                             <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].AvaloniaEditInstall}" />
+                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].AvaloniaEditInstall}" />
                             </Border>
                             <TextBlock Text="Reference styles: " />
                             <Border Margin="0,16" Classes="CodeBlock">
                                 <SelectableTextBlock
-                                    FontFamily="Consolas"
+                                    
                                     Text="{Binding $parent[local:Overview].AvaloniaEditStyle}"
                                     TextWrapping="Wrap" />
                             </Border>

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

@@ -1,6 +1,7 @@
 using System.Threading.Tasks;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
+using Avalonia.Input.Platform;
 using Avalonia.Threading;
 using Semi.Avalonia.Demo.ViewModels;
 

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

@@ -0,0 +1,99 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.PipsPagerDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="600"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <ScrollViewer>
+        <StackPanel HorizontalAlignment="Left" Spacing="16" Margin="0,0,0,20">
+
+            <!-- Horizontal PipsPager -->
+            <TextBlock Classes="H6" Text="Horizontal" />
+            <PipsPager
+                NumberOfPages="8"
+                Orientation="Horizontal" />
+
+            <!-- Vertical PipsPager -->
+            <TextBlock Classes="H6" Text="Vertical" />
+            <PipsPager
+                NumberOfPages="8"
+                Orientation="Vertical" />
+
+            <!-- Linked with Carousel -->
+            <TextBlock Classes="H6" Text="Linked with Carousel" />
+            <Panel>
+                <Carousel
+                    Name="DemoCarousel"
+                    Height="160">
+                    <Border Background="#EAF5FF">
+                        <TextBlock
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Foreground="#1C1F23"
+                            Text="Page 1" />
+                    </Border>
+                    <Border Background="#F9F9F9">
+                        <TextBlock
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Foreground="#1C1F23"
+                            Text="Page 2" />
+                    </Border>
+                    <Border Background="#FFF8EA">
+                        <TextBlock
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Foreground="#1C1F23"
+                            Text="Page 3" />
+                    </Border>
+                    <Border Background="#FEF2ED">
+                        <TextBlock
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Foreground="#1C1F23"
+                            Text="Page 4" />
+                    </Border>
+                    <Border Background="#F0F5FF">
+                        <TextBlock
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Foreground="#1C1F23"
+                            Text="Page 5" />
+                    </Border>
+                </Carousel>
+                <ThemeVariantScope RequestedThemeVariant="Light">
+                    <PipsPager
+                        Name="LinkedPager"
+                        NumberOfPages="5"
+                        Orientation="Horizontal"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Bottom"
+                        Margin="0,0,0,8"
+                        SelectedPageIndex="{Binding #DemoCarousel.SelectedIndex}" />
+                </ThemeVariantScope>
+            </Panel>
+
+            <!-- Various page counts -->
+            <TextBlock Classes="H6" Text="Various Page Counts" />
+            <StackPanel Spacing="12">
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <TextBlock VerticalAlignment="Center" Width="80" Text="3 pages" />
+                    <PipsPager NumberOfPages="3" Orientation="Horizontal" />
+                </StackPanel>
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <TextBlock VerticalAlignment="Center" Width="80" Text="5 pages" />
+                    <PipsPager NumberOfPages="5" Orientation="Horizontal" />
+                </StackPanel>
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <TextBlock VerticalAlignment="Center" Width="80" Text="10 pages" />
+                    <PipsPager NumberOfPages="10" Orientation="Horizontal" />
+                </StackPanel>
+            </StackPanel>
+
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>
+

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

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

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

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

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

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

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

@@ -22,6 +22,15 @@
             TickFrequency="10"
             TickPlacement="Outside"
             Value="0" />
+        <Slider
+            Value="0"
+            Minimum="0"
+            Maximum="100"
+            TickPlacement="BottomRight"
+            IsSnapToTickEnabled="True"
+            IsDirectionReversed="True"
+            Ticks="0,20,25,40,75,100"
+            Width="300" />
         <Slider
             Width="300"
             Classes="ToolTip"

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

@@ -34,14 +34,10 @@
                         </StackPanel>
                         <Border MinHeight="150" Theme="{StaticResource CardBorder}">
                             <TabControl Classes.ReverseSeparator="{Binding #reverse.IsChecked}" TabStripPlacement="{Binding #place.SelectedValue}">
-                                <TabItem Content="Hello 1" Header="Tab 1" />
-                                <TabItem Content="Hello 2" Header="Tab 2" />
-                                <TabItem Content="Hello 3" Header="Tab 3" />
-                                <TabItem Content="中文内容" Header="中文中文" />
-                                <TabItem
-                                    Content="Hello 4"
-                                    Header="Tab 4"
-                                    IsEnabled="False" />
+                                <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
+                                <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
+                                <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
+                                <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
                             </TabControl>
                         </Border>
                         <Border Height="300" Theme="{StaticResource CardBorder}">
@@ -57,14 +53,10 @@
                     <StackPanel>
                         <Border MinHeight="150" Theme="{StaticResource CardBorder}">
                             <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource LineTabControl}">
-                                <TabItem Content="Hello 1" Header="Tab 1" />
-                                <TabItem Content="Hello 2" Header="Tab 2" />
-                                <TabItem Content="Hello 3" Header="Tab 3" />
-                                <TabItem Content="中文内容" Header="中文中文" />
-                                <TabItem
-                                    Content="Hello 4"
-                                    Header="Tab 4"
-                                    IsEnabled="False" />
+                                <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
+                                <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
+                                <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
+                                <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
                             </TabControl>
                         </Border>
                         <Border Height="300" Theme="{StaticResource CardBorder}">
@@ -82,14 +74,10 @@
                             Background="Transparent"
                             Theme="{StaticResource CardBorder}">
                             <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource CardTabControl}">
-                                <TabItem Content="Hello 1" Header="Tab 1" />
-                                <TabItem Content="Hello 2" Header="Tab 2" />
-                                <TabItem Content="Hello 3" Header="Tab 3" />
-                                <TabItem Content="中文内容" Header="中文中文" />
-                                <TabItem
-                                    Content="Hello 4"
-                                    Header="Tab 4"
-                                    IsEnabled="False" />
+                                <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
+                                <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
+                                <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
+                                <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
                             </TabControl>
                         </Border>
                         <Border
@@ -107,14 +95,10 @@
                     <StackPanel>
                         <Border MinHeight="150" Theme="{StaticResource CardBorder}">
                             <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource ButtonTabControl}">
-                                <TabItem Content="Hello 1" Header="Tab 1" />
-                                <TabItem Content="Hello 2" Header="Tab 2" />
-                                <TabItem Content="Hello 3" Header="Tab 3" />
-                                <TabItem Content="中文内容" Header="中文中文" />
-                                <TabItem
-                                    Content="Hello 4"
-                                    Header="Tab 4"
-                                    IsEnabled="False" />
+                                <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
+                                <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
+                                <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
+                                <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
                             </TabControl>
                         </Border>
                         <Border Height="300" Theme="{StaticResource CardBorder}">

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

@@ -0,0 +1,80 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.TabbedPageDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="600"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <DockPanel>
+        <ScrollViewer DockPanel.Dock="Right" Width="260">
+            <StackPanel Margin="12" Spacing="8">
+                <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
+                           Foreground="{DynamicResource SemiColorText0}" />
+
+                <TextBlock Text="Tab Management" FontWeight="SemiBold" FontSize="13" />
+                <StackPanel Spacing="6">
+                    <Button Content="Add Tab" Click="OnAddTab" HorizontalAlignment="Stretch" />
+                    <Button Content="Remove Latest Tab" Click="OnRemoveTab" HorizontalAlignment="Stretch" />
+                </StackPanel>
+
+                <Separator />
+
+                <TextBlock Text="Tab Placement" FontWeight="SemiBold" FontSize="13" />
+                <ComboBox Name="PlacementCombo" SelectedIndex="0"
+                          SelectionChanged="OnPlacementChanged" HorizontalAlignment="Stretch">
+                    <ComboBoxItem Content="Top" />
+                    <ComboBoxItem Content="Bottom" />
+                    <ComboBoxItem Content="Left" />
+                    <ComboBoxItem Content="Right" />
+                </ComboBox>
+
+                <Separator />
+
+                <TextBlock Text="Status" FontWeight="SemiBold" FontSize="14" />
+                <TextBlock Name="StatusText"
+                           Text="3 tabs | Selected: Home (0)"
+                           Opacity="0.7"
+                           TextWrapping="Wrap" />
+            </StackPanel>
+        </ScrollViewer>
+
+        <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
+
+        <Border Margin="12"
+                BorderBrush="{DynamicResource SemiColorBorder}"
+                BorderThickness="1"
+                CornerRadius="6"
+                ClipToBounds="True">
+            <TabbedPage Name="DemoTabs"
+                        TabPlacement="Top"
+                        SelectionChanged="OnSelectionChanged">
+                <ContentPage Icon="{DynamicResource SemiIconHome}" Header="Home">
+                    <StackPanel Margin="16" Spacing="8">
+                        <TextBlock Text="Home Tab" FontSize="24" FontWeight="Bold" />
+                        <TextBlock Text="Welcome to the Home tab. This is a TabbedPage sample."
+                                   TextWrapping="Wrap" />
+                        <TextBlock Text="Use the panel on the right to add or remove tabs dynamically."
+                                   TextWrapping="Wrap" Opacity="0.7" />
+                    </StackPanel>
+                </ContentPage>
+                <ContentPage Icon="{DynamicResource SemiIconSearch}" Header="Search">
+                    <StackPanel Margin="16" Spacing="8">
+                        <TextBlock Text="Search Tab" FontSize="24" FontWeight="Bold" />
+                        <TextBox PlaceholderText="Type to search..." />
+                        <TextBlock Text="Search results will appear here." Opacity="0.7" />
+                    </StackPanel>
+                </ContentPage>
+                <ContentPage Icon="{DynamicResource SemiIconSetting}" Header="Settings">
+                    <StackPanel Margin="16" Spacing="8">
+                        <TextBlock Text="Settings Tab" FontSize="24" FontWeight="Bold" />
+                        <CheckBox Content="Enable notifications" />
+                        <CheckBox Content="Dark mode" />
+                        <CheckBox Content="Auto-save" IsChecked="True" />
+                    </StackPanel>
+                </ContentPage>
+            </TabbedPage>
+        </Border>
+    </DockPanel>
+</UserControl>

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

@@ -0,0 +1,84 @@
+using System.Collections;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Avalonia.Media;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class TabbedPageDemo : UserControl
+{
+    private int _tabCounter = 3;
+
+    public TabbedPageDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void OnAddTab(object? sender, RoutedEventArgs e)
+    {
+        var idx = ++_tabCounter;
+        var page = new ContentPage
+        {
+            Header = $"Tab {idx}",
+            Content = new StackPanel
+            {
+                Margin = new Thickness(16),
+                Spacing = 8,
+                Children =
+                {
+                    new TextBlock
+                    {
+                        Text = $"Tab {idx}",
+                        FontSize = 24,
+                        FontWeight = FontWeight.Bold,
+                    },
+                    new TextBlock
+                    {
+                        Text = $"This tab was added dynamically (tab #{idx}).",
+                        Opacity = 0.7,
+                        TextWrapping = TextWrapping.Wrap,
+                    }
+                }
+            }
+        };
+
+        ((IList)DemoTabs.Pages!).Add(page);
+        UpdateStatus();
+    }
+
+    private void OnRemoveTab(object? sender, RoutedEventArgs e)
+    {
+        var pages = (IList)DemoTabs.Pages!;
+        if (pages.Count > 1)
+        {
+            pages.RemoveAt(pages.Count - 1);
+            UpdateStatus();
+        }
+    }
+
+    private void OnPlacementChanged(object? sender, SelectionChangedEventArgs e)
+    {
+        if (DemoTabs == null) return;
+        DemoTabs.TabPlacement = PlacementCombo.SelectedIndex switch
+        {
+            1 => TabPlacement.Bottom,
+            2 => TabPlacement.Left,
+            3 => TabPlacement.Right,
+            _ => TabPlacement.Top
+        };
+    }
+
+    private void OnSelectionChanged(object? sender, PageSelectionChangedEventArgs e)
+    {
+        UpdateStatus();
+    }
+
+    private void UpdateStatus()
+    {
+        if (StatusText == null) return;
+        var pages = (IList)DemoTabs.Pages!;
+        var pageName = (DemoTabs.SelectedPage as ContentPage)?.Header?.ToString() ?? "—";
+        StatusText.Text = $"{pages.Count} tab{(pages.Count != 1 ? "s" : "")} | Selected: {pageName} ({DemoTabs.SelectedIndex})";
+    }
+}

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

@@ -23,36 +23,36 @@
                 <TextBox
                     Width="100"
                     Classes="Large"
-                    Watermark="Large" />
+                    PlaceholderText="Large" />
                 <TextBox
                     Width="100"
-                    Watermark="Default" />
+                    PlaceholderText="Default" />
                 <TextBox
                     Width="100"
                     Classes="Small"
-                    Watermark="Small" />
+                    PlaceholderText="Small" />
             </StackPanel>
 
             <StackPanel Orientation="Horizontal">
                 <TextBox
                     Width="100"
                     IsEnabled="False"
-                    Watermark="Disabled" />
+                    PlaceholderText="Disabled" />
                 <TextBox
                     Width="100"
                     Classes="Bordered"
-                    Watermark="Bordered" />
+                    PlaceholderText="Bordered" />
                 <TextBox
                     Width="100"
                     Classes="Bordered"
                     IsEnabled="False" />
             </StackPanel>
-            <TextBox Width="300" Classes="TextArea" Watermark="TextArea TextBox" />
+            <TextBox Width="300" Classes="TextArea" PlaceholderText="TextArea TextBox" />
             <TextBox Width="300" Classes="TextArea ClearButton" Text="TextArea with ClearButton - text should be clearable" />
             <TextBox
                 Width="300"
                 Theme="{StaticResource LooklessTextBox}"
-                Watermark="Lookless TextBox"
+                PlaceholderText="Lookless TextBox"
                 InnerLeftContent="https://"
                 InnerRightContent=".com" />
         </StackPanel>

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<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"
@@ -17,7 +17,7 @@
             Margin="8"
             Classes="ClearButton"
             Text="{Binding SearchText}"
-            Watermark="Input Variable Category/ResourceKey/Type/Value/Description" />
+            PlaceholderText="Input Variable Category/ResourceKey/Type/Value/Description" />
 
         <DataGrid
             Grid.Row="1"
@@ -86,8 +86,7 @@
                 <DataGridTemplateColumn
                     Width="100"
                     x:DataType="vm:VariableItem"
-                    Header="CopyText"
-                    SortMemberPath="Duration">
+                    Header="CopyText">
                     <DataGridTemplateColumn.CellTemplate>
                         <DataTemplate DataType="vm:VariableItem">
                             <Button

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

@@ -1,5 +1,6 @@
-using System.Threading.Tasks;
+using System.Threading.Tasks;
 using Avalonia.Controls;
+using Avalonia.Input.Platform;
 using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;

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

@@ -0,0 +1,32 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Semi.Avalonia.Demo.Pages.WindowCustomizationsPage"
+             x:CompileBindings="True">
+
+    <StackPanel
+        Spacing="10"
+        IsEnabled="{OnFormFactor False, Desktop=True}">
+        <TextBlock Classes="H2" Text="Desktop properties" />
+
+        <CheckBox Content="Extend Client Area to Decorations"
+                  IsChecked="{Binding $parent[Window].ExtendClientAreaToDecorationsHint}" />
+
+        <Slider IsEnabled="{Binding $parent[Window].ExtendClientAreaToDecorationsHint}"
+                HorizontalAlignment="Left"
+                Width="201" Minimum="-1" Maximum="200"
+                Value="{Binding $parent[Window].ExtendClientAreaTitleBarHeightHint}" />
+
+        <CheckBox Content="Can Resize"
+                  IsChecked="{Binding $parent[Window].CanResize}" />
+
+        <CheckBox Content="Can Minimize"
+                  IsChecked="{Binding $parent[Window].CanMinimize}" />
+
+        <CheckBox Content="Can Maximize"
+                  IsChecked="{Binding $parent[Window].CanMaximize}"
+                  IsEnabled="{Binding $parent[Window].CanResize}" />
+    </StackPanel>
+</UserControl>

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

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

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

@@ -11,22 +11,21 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(DataGridVersion)"/>
-        <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)">
+        <PackageReference Include="Avalonia"/>
+        <PackageReference Include="Avalonia.Controls.ColorPicker"/>
+        <PackageReference Include="Avalonia.Controls.DataGrid"/>
+        <!--Condition below is needed to remove AvaloniaUI.DiagnosticsSupport package from build output in Release configuration.-->
+        <PackageReference Include="AvaloniaUI.DiagnosticsSupport">
             <IncludeAssets Condition="'$(Configuration)' != 'Debug'">None</IncludeAssets>
             <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>
         </PackageReference>
-        <PackageReference Include="CommunityToolkit.Mvvm" Version="$(CommunityToolkitVersion)"/>
-        <PackageReference Include="Irihi.Avalonia.Shared" Version="0.3.0" />
+        <PackageReference Include="CommunityToolkit.Mvvm"/>
     </ItemGroup>
 
     <ItemGroup>
         <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj"/>
         <ProjectReference Include="..\..\src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj"/>
         <ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj"/>
-        <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj"/>
+<!--        <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj"/>-->
     </ItemGroup>
 </Project>

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

@@ -12,13 +12,16 @@ public partial class IconDemoViewModel : ObservableObject
 {
     private readonly Icons _resources = new();
 
-    private readonly Dictionary<string, IconItem> _filledIcons = new();
+    private readonly Dictionary<string, IconItem> _fillIcons = new();
     private readonly Dictionary<string, IconItem> _strokedIcons = new();
+    private readonly Dictionary<string, IconItem> _aiIcons = new();
 
     [ObservableProperty] private string? _searchText;
 
-    public ObservableCollection<IconItem> FilteredFilledIcons { get; set; } = [];
+    public ObservableCollection<IconTab> IconTabs { get; } = [];
+    public ObservableCollection<IconItem> FilteredFillIcons { get; set; } = [];
     public ObservableCollection<IconItem> FilteredStrokedIcons { get; set; } = [];
+    public ObservableCollection<IconItem> FilteredAIIcons { get; set; } = [];
 
     public void InitializeResources()
     {
@@ -36,24 +39,31 @@ public partial class IconDemoViewModel : ObservableObject
                     Geometry = geometry
                 };
 
-                if (resourceKey.EndsWith("Stroked", StringComparison.InvariantCultureIgnoreCase))
+                if (resourceKey.StartsWith("SemiIconAI"))
+                    _aiIcons[resourceKey] = icon;
+                else if (resourceKey.EndsWith("Stroked", StringComparison.InvariantCultureIgnoreCase))
                     _strokedIcons[resourceKey] = icon;
                 else
-                    _filledIcons[resourceKey] = icon;
+                    _fillIcons[resourceKey] = icon;
             }
         }
 
         OnSearchTextChanged(string.Empty);
+
+        IconTabs.Clear();
+        IconTabs.Add(new IconTab("Fill Icons", FilteredFillIcons));
+        IconTabs.Add(new IconTab("Stroked Icons", FilteredStrokedIcons));
+        IconTabs.Add(new IconTab("AI Icons", FilteredAIIcons));
     }
 
     partial void OnSearchTextChanged(string? value)
     {
         var search = string.IsNullOrWhiteSpace(value) ? string.Empty : value.Trim();
 
-        FilteredFilledIcons.Clear();
-        foreach (var pair in _filledIcons.Where(kv => kv.Key.Contains(search, StringComparison.InvariantCultureIgnoreCase)))
+        FilteredFillIcons.Clear();
+        foreach (var pair in _fillIcons.Where(kv => kv.Key.Contains(search, StringComparison.InvariantCultureIgnoreCase)))
         {
-            FilteredFilledIcons.Add(pair.Value);
+            FilteredFillIcons.Add(pair.Value);
         }
 
         FilteredStrokedIcons.Clear();
@@ -61,9 +71,21 @@ public partial class IconDemoViewModel : ObservableObject
         {
             FilteredStrokedIcons.Add(pair.Value);
         }
+
+        FilteredAIIcons.Clear();
+        foreach (var pair in _aiIcons.Where(kv => kv.Key.Contains(search, StringComparison.InvariantCultureIgnoreCase)))
+        {
+            FilteredAIIcons.Add(pair.Value);
+        }
     }
 }
 
+public class IconTab(string header, ObservableCollection<IconItem> iconItems)
+{
+    public string Header { get; set; } = header;
+    public ObservableCollection<IconItem> IconItems { get; set; } = iconItems;
+}
+
 public class IconItem
 {
     public string? ResourceKey { get; set; }

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

@@ -19,7 +19,7 @@ public partial class PaletteDemoViewModel : ObservableObject
         "Red", "Pink", "Purple", "Violet", "Indigo",
         "Blue", "LightBlue", "Cyan", "Teal", "Green",
         "LightGreen", "Lime", "Yellow", "Amber", "Orange",
-        "Grey"
+        "Grey", "AIPurple"
     ];
 
     private readonly IResourceDictionary? _lightResourceDictionary;
@@ -61,6 +61,38 @@ public partial class PaletteDemoViewModel : ObservableObject
             s.Initialize(_darkResourceDictionary, color, false);
             DarkLists.Add(s);
         }
+        
+        InitializeAIGeneralGradients();
+    }
+
+    private void InitializeAIGeneralGradients()
+    {
+        if (_lightResourceDictionary is null || _darkResourceDictionary is null) return;
+
+        ColorListViewModel lightGradients = new ColorListViewModel { SeriesName = "AI General" };
+        ColorListViewModel darkGradients = new ColorListViewModel { SeriesName = "AI General" };
+
+        for (var i = 0; i < 10; i++)
+        {
+            var key = $"SemiAIGeneral{i}";
+            
+            if (_lightResourceDictionary.TryGetValue(key, out var lightValue) && lightValue is IBrush lightBrush)
+            {
+                var name = $"AI General {i}";
+                var item = new ColorItemViewModel(name, lightBrush, key, true, i);
+                lightGradients.Color.Add(item);
+            }
+
+            if (_darkResourceDictionary.TryGetValue(key, out var darkValue) && darkValue is IBrush darkBrush)
+            {
+                var name = $"AI General {i}";
+                var item = new ColorItemViewModel(name, darkBrush, key, false, i);
+                darkGradients.Color.Add(item);
+            }
+        }
+        
+        LightLists.Add(lightGradients);
+        DarkLists.Add(darkGradients);
     }
 
     private void InitializeFunctionalColors()
@@ -79,6 +111,12 @@ public partial class PaletteDemoViewModel : ObservableObject
             "Warning", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.WarningTokens));
         FunctionalColors.Add(new FunctionalColorGroupViewModel(
             "Danger", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DangerTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel(
+            "AI General", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.AIGeneralTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel(
+            "AI Purple", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.AIPurpleTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel(
+            "AI Background", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.AIBackgroundTokens));
         FunctionalColors.Add(new FunctionalColorGroupViewModel(
             "Text", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TextTokens));
         FunctionalColors.Add(new FunctionalColorGroupViewModel(
@@ -142,14 +180,24 @@ public partial class ColorItemViewModel : ObservableObject
          <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
          """;
 
-    public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light,
+    public ColorItemViewModel(string colorDisplayName, IBrush brush, string resourceKey, bool light,
         int index)
     {
         ColorDisplayName = colorDisplayName;
         Brush = brush;
         ResourceKey = resourceKey;
-        var hex = ColorConverter.ToHex.Convert(brush.Color, typeof(string), false, CultureInfo.InvariantCulture);
-        Hex = hex as string ?? string.Empty;
+        
+        // Only calculate hex for solid color brushes
+        if (brush is ISolidColorBrush solidBrush)
+        {
+            var hex = ColorConverter.ToHex.Convert(solidBrush.Color, typeof(string), false, CultureInfo.InvariantCulture);
+            Hex = hex as string ?? string.Empty;
+        }
+        else
+        {
+            Hex = string.Empty;
+        }
+        
         if ((light && index < 5) || (!light && index >= 5))
         {
             TextBrush = Brushes.Black;
@@ -175,7 +223,7 @@ public partial class FunctionalColorGroupViewModel : ObservableObject
         {
             if (lightDictionary?.TryGetValue(key, out var lightValue) ?? false)
             {
-                if (lightValue is ISolidColorBrush lightBrush)
+                if (lightValue is IBrush lightBrush)
                 {
                     LightColors.Add(new ColorItemViewModel(name, lightBrush, key, true, 0));
                 }
@@ -183,7 +231,7 @@ public partial class FunctionalColorGroupViewModel : ObservableObject
 
             if (darkDictionary?.TryGetValue(key, out var darkValue) ?? false)
             {
-                if (darkValue is ISolidColorBrush darkBrush)
+                if (darkValue is IBrush darkBrush)
                 {
                     DarkColors.Add(new ColorItemViewModel(name, darkBrush, key, true, 0));
                 }

demo/Semi.Avalonia.Demo/ViewModels/TreeDataGridDemo/FilesPageViewModel.cs

@@ -1,363 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Collections.ObjectModel;
-using System.ComponentModel;
-using System.Diagnostics;
-using System.IO;
-using System.Linq;
-using System.Runtime.InteropServices;
-using Avalonia.Controls;
-using Avalonia.Controls.Models.TreeDataGrid;
-using Avalonia.Controls.Selection;
-using Avalonia.Threading;
-using CommunityToolkit.Mvvm.ComponentModel;
-
-namespace Semi.Avalonia.Demo.ViewModels;
-
-public partial class FilesPageViewModel : ObservableObject
-{
-    public IList<string> Drives { get; }
-    public HierarchicalTreeDataGridSource<FileNodeViewModel> Source { get; }
-    [ObservableProperty] private string _selectedDrive;
-    private string? _selectedPath;
-    [ObservableProperty] private FileNodeViewModel? _root;
-
-    public string? SelectedPath
-    {
-        get => _selectedPath;
-        set => SetSelectedPath(value);
-    }
-
-    partial void OnSelectedDriveChanged(string value)
-    {
-        Root = new FileNodeViewModel(value, true, true);
-        if (Source is not null)
-        {
-            Source.Items = [Root];
-        }
-    }
-
-    public FilesPageViewModel()
-    {
-        Drives = DriveInfo.GetDrives().Select(x => x.Name).ToList();
-        if (RuntimeInformation.IsOSPlatform(OSPlatform.Windows))
-        {
-            SelectedDrive = @"C:\";
-        }
-        else
-        {
-            SelectedDrive = Drives.FirstOrDefault() ?? "/";
-        }
-
-        Source = new HierarchicalTreeDataGridSource<FileNodeViewModel>([])
-        {
-            Columns =
-            {
-                new CheckBoxColumn<FileNodeViewModel>(
-                    null,
-                    x => x.IsChecked,
-                    (o, v) => o.IsChecked = v,
-                    options: new CheckBoxColumnOptions<FileNodeViewModel>
-                    {
-                        CanUserResizeColumn = false,
-                    }),
-                new HierarchicalExpanderColumn<FileNodeViewModel>(
-                    new TemplateColumn<FileNodeViewModel>(
-                        "Name",
-                        "FileNameCell",
-                        "FileNameEditCell",
-                        new GridLength(1, GridUnitType.Star),
-                        new TemplateColumnOptions<FileNodeViewModel>
-                        {
-                            CompareAscending = FileNodeViewModel.SortAscending(vm => vm.Name),
-                            CompareDescending = FileNodeViewModel.SortDescending(vm => vm.Name),
-                            IsTextSearchEnabled = true,
-                            TextSearchValueSelector = vm => vm.Name
-                        }),
-                    vm => vm.Children,
-                    vm => vm.HasChildren,
-                    vm => vm.IsExpanded),
-                new TextColumn<FileNodeViewModel, long?>(
-                    "Size",
-                    vm => vm.Size,
-                    options: new TextColumnOptions<FileNodeViewModel>
-                    {
-                        CompareAscending = FileNodeViewModel.SortAscending(x => x.Size),
-                        CompareDescending = FileNodeViewModel.SortDescending(x => x.Size),
-                    }),
-                new TextColumn<FileNodeViewModel, DateTimeOffset?>(
-                    "Modified",
-                    x => x.Modified,
-                    options: new TextColumnOptions<FileNodeViewModel>
-                    {
-                        CompareAscending = FileNodeViewModel.SortAscending(x => x.Modified),
-                        CompareDescending = FileNodeViewModel.SortDescending(x => x.Modified),
-                    }),
-            }
-        };
-        Source.RowSelection!.SingleSelect = false;
-        Source.RowSelection.SelectionChanged += SelectionChanged;
-    }
-
-    private void SelectionChanged(object? sender, TreeSelectionModelSelectionChangedEventArgs<FileNodeViewModel> e)
-    {
-        var selectedPath = Source.RowSelection?.SelectedItem?.Path;
-        this.SetProperty(ref _selectedPath, selectedPath, nameof(SelectedPath));
-
-        foreach (var i in e.DeselectedItems)
-            Trace.WriteLine($"Deselected '{i?.Path}'");
-        foreach (var i in e.SelectedItems)
-            Trace.WriteLine($"Selected '{i?.Path}'");
-    }
-    private void SetSelectedPath(string? path)
-    {
-        if (string.IsNullOrEmpty(path))
-        {
-            Source.RowSelection!.Clear();
-            return;
-        }
-
-        var components = new Stack<string>();
-        DirectoryInfo? d = null;
-
-        if (File.Exists(path))
-        {
-            var f = new FileInfo(path);
-            components.Push(f.Name);
-            d = f.Directory;
-        }
-        else if (Directory.Exists(path))
-        {
-            d = new DirectoryInfo(path);
-        }
-
-        while (d is not null)
-        {
-            components.Push(d.Name);
-            d = d.Parent;
-        }
-
-        var index = IndexPath.Unselected;
-
-        if (components.Count > 0)
-        {
-            var drive = components.Pop();
-            var driveIndex = Drives.FindIndex(x => string.Equals(x, drive, StringComparison.OrdinalIgnoreCase));
-
-            if (driveIndex >= 0)
-                SelectedDrive = Drives[driveIndex];
-
-            var node = Root;
-            index = new IndexPath(0);
-
-            while (node is not null && components.Count > 0)
-            {
-                node.IsExpanded = true;
-
-                var component = components.Pop();
-                var i = node.Children.FindIndex(x => string.Equals(x.Name, component, StringComparison.OrdinalIgnoreCase));
-                node = i >= 0 ? node.Children[i] : null;
-                index = i >= 0 ? index.Append(i) : default;
-            }
-        }
-
-        Source.Items = [Root!];
-        Source.RowSelection!.SelectedIndex = index;
-    }
-}
-
-public partial class FileNodeViewModel : ObservableObject, IEditableObject
-{
-    [ObservableProperty] private string _path;
-    [ObservableProperty] private string _name;
-    private string? _undoName;
-    [ObservableProperty] private long? _size;
-    [ObservableProperty] private DateTimeOffset? _modified;
-    private FileSystemWatcher? _watcher;
-    private ObservableCollection<FileNodeViewModel>? _children;
-    [ObservableProperty] private bool _hasChildren = true;
-    [ObservableProperty] private bool _isExpanded;
-
-    public FileNodeViewModel(string path, bool isDirectory, bool isRoot = false)
-    {
-        Path = path;
-        Name = isRoot ? path : System.IO.Path.GetFileName(Path);
-        IsExpanded = isRoot;
-        IsDirectory = isDirectory;
-        HasChildren = isDirectory;
-
-        if (!isDirectory)
-        {
-            var info = new FileInfo(path);
-            Size = info.Length;
-            Modified = info.LastWriteTimeUtc;
-        }
-    }
-
-    public bool IsChecked { get; set; }
-    public bool IsDirectory { get; }
-    public IReadOnlyList<FileNodeViewModel> Children => _children ??= LoadChildren();
-
-    private ObservableCollection<FileNodeViewModel> LoadChildren()
-    {
-        if (!IsDirectory)
-        {
-            throw new NotSupportedException();
-        }
-
-        var options = new EnumerationOptions { IgnoreInaccessible = true };
-        var result = new ObservableCollection<FileNodeViewModel>();
-
-        foreach (var d in Directory.EnumerateDirectories(Path, "*", options))
-        {
-            result.Add(new FileNodeViewModel(d, true));
-        }
-
-        foreach (var f in Directory.EnumerateFiles(Path, "*", options))
-        {
-            result.Add(new FileNodeViewModel(f, false));
-        }
-
-        _watcher = new FileSystemWatcher
-        {
-            Path = Path,
-            NotifyFilter = NotifyFilters.FileName | NotifyFilters.Size | NotifyFilters.LastWrite,
-        };
-
-        _watcher.Changed += OnChanged;
-        _watcher.Created += OnCreated;
-        _watcher.Deleted += OnDeleted;
-        _watcher.Renamed += OnRenamed;
-        _watcher.EnableRaisingEvents = true;
-
-        if (result.Count == 0)
-            HasChildren = false;
-
-        return result;
-    }
-
-    public static Comparison<FileNodeViewModel?> SortAscending<T>(Func<FileNodeViewModel, T> selector)
-    {
-        return (x, y) =>
-        {
-            if (x is null && y is null)
-                return 0;
-            else if (x is null)
-                return -1;
-            else if (y is null)
-                return 1;
-            if (x.IsDirectory == y.IsDirectory)
-                return Comparer<T>.Default.Compare(selector(x), selector(y));
-            else if (x.IsDirectory)
-                return -1;
-            else
-                return 1;
-        };
-    }
-
-    public static Comparison<FileNodeViewModel?> SortDescending<T>(Func<FileNodeViewModel, T> selector)
-    {
-        return (x, y) =>
-        {
-            if (x is null && y is null)
-                return 0;
-            else if (x is null)
-                return 1;
-            else if (y is null)
-                return -1;
-            if (x.IsDirectory == y.IsDirectory)
-                return Comparer<T>.Default.Compare(selector(y), selector(x));
-            else if (x.IsDirectory)
-                return -1;
-            else
-                return 1;
-        };
-    }
-
-    void IEditableObject.BeginEdit() => _undoName = Name;
-    void IEditableObject.CancelEdit() => Name = _undoName ?? string.Empty;
-    void IEditableObject.EndEdit() => _undoName = null;
-
-    private void OnChanged(object sender, FileSystemEventArgs e)
-    {
-        if (e.ChangeType == WatcherChangeTypes.Changed && File.Exists(e.FullPath))
-        {
-            Dispatcher.UIThread.Post(() =>
-            {
-                foreach (var child in _children!)
-                {
-                    if (child.Path == e.FullPath)
-                    {
-                        if (!child.IsDirectory)
-                        {
-                            var info = new FileInfo(e.FullPath);
-                            child.Size = info.Length;
-                            child.Modified = info.LastWriteTimeUtc;
-                        }
-
-                        break;
-                    }
-                }
-            });
-        }
-    }
-
-    private void OnCreated(object sender, FileSystemEventArgs e)
-    {
-        Dispatcher.UIThread.Post(() =>
-        {
-            var node = new FileNodeViewModel(
-                e.FullPath,
-                File.GetAttributes(e.FullPath).HasFlag(FileAttributes.Directory));
-            _children!.Add(node);
-        });
-    }
-
-    private void OnDeleted(object sender, FileSystemEventArgs e)
-    {
-        Dispatcher.UIThread.Post(() =>
-        {
-            for (var i = 0; i < _children!.Count; ++i)
-            {
-                if (_children[i].Path == e.FullPath)
-                {
-                    _children.RemoveAt(i);
-                    Debug.WriteLine($"Removed {e.FullPath}");
-                    break;
-                }
-            }
-        });
-    }
-
-    private void OnRenamed(object sender, RenamedEventArgs e)
-    {
-        Dispatcher.UIThread.Post(() =>
-        {
-            foreach (var child in _children!)
-            {
-                if (child.Path == e.OldFullPath)
-                {
-                    child.Path = e.FullPath;
-                    child.Name = e.Name ?? string.Empty;
-                    break;
-                }
-            }
-        });
-    }
-}
-
-internal static class ListExtensions
-{
-    public static int FindIndex<T>(this IEnumerable<T> source, Func<T, bool> predicate)
-    {
-        int i = 0;
-        foreach (var item in source)
-        {
-            if (predicate(item))
-                return i;
-            i++;
-        }
-
-        return -1;
-    }
-}

demo/Semi.Avalonia.Demo/ViewModels/TreeDataGridDemo/SongsPageViewModel.cs

@@ -1,54 +0,0 @@
-using System.Collections.ObjectModel;
-using System.Linq;
-using Avalonia.Controls;
-using Avalonia.Controls.Models.TreeDataGrid;
-using CommunityToolkit.Mvvm.ComponentModel;
-
-namespace Semi.Avalonia.Demo.ViewModels;
-
-public class SongsPageViewModel : ObservableObject
-{
-    public FlatTreeDataGridSource<SongViewModel> Songs { get; }
-
-    public SongsPageViewModel()
-    {
-        var songs = new ObservableCollection<SongViewModel>(Song.Songs.Select(a => new SongViewModel()
-        {
-            Title = a.Title,
-            Artist = a.Artist,
-            Album = a.Album,
-            CountOfComment = a.CountOfComment,
-            IsSelected = false
-        }));
-
-        Songs = new FlatTreeDataGridSource<SongViewModel>(songs)
-        {
-            Columns =
-            {
-                new CheckBoxColumn<SongViewModel>(
-                    "IsSelected",
-                    a => a.IsSelected,
-                    (model, b) => { model.IsSelected = b; },
-                    new GridLength(108, GridUnitType.Pixel)),
-                new TextColumn<SongViewModel, string>(
-                    "Title",
-                    a => a.Title,
-                    (o, a) => o.Title = a,
-                    new GridLength(6, GridUnitType.Star)),
-                new TextColumn<SongViewModel, string>("Artist",
-                    a => a.Artist,
-                    (o, a) => o.Artist = a,
-                    new GridLength(6, GridUnitType.Star)),
-                new TemplateColumn<SongViewModel>("Album",
-                    "AlbumCell",
-                    "AlbumEditCell",
-                    new GridLength(6, GridUnitType.Star)),
-                new TemplateColumn<SongViewModel>(
-                    "Comments",
-                    "CommentsCell",
-                    "CommentsEditCell",
-                    new GridLength(6, GridUnitType.Star)),
-            }
-        };
-    }
-}

demo/Semi.Avalonia.Demo/ViewModels/TreeDataGridDemo/TreeDataGridDemoViewModel.cs

@@ -1,9 +0,0 @@
-using CommunityToolkit.Mvvm.ComponentModel;
-
-namespace Semi.Avalonia.Demo.ViewModels;
-
-public class TreeDataGridDemoViewModel : ObservableObject
-{
-    public SongsPageViewModel SongsContext { get; } = new();
-    public FilesPageViewModel FilesContext { get; } = new();
-}

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

@@ -1,4 +1,4 @@
-using System;
+using System;
 using System.Collections.Generic;
 using System.Globalization;
 using Avalonia;

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

@@ -16,9 +16,9 @@
             <Setter Property="Template">
                 <ControlTemplate TargetType="TabItem">
                     <TextBlock
-                        FontWeight="Bold"
-                        FontSize="12"
                         Margin="4"
+                        FontSize="12"
+                        FontWeight="Bold"
                         Text="{TemplateBinding Header}" />
                 </ControlTemplate>
             </Setter>
@@ -37,48 +37,44 @@
                 <StackPanel Orientation="Horizontal" Spacing="8">
                     <ToggleSwitch
                         Name="ExpandButton"
-                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
-                        Content="{StaticResource SemiIconSidebar}" />
+                        Content="{StaticResource SemiIconSidebar}"
+                        Theme="{DynamicResource IconBorderlessToggleSwitch}" />
                     <SelectableTextBlock
                         VerticalAlignment="Center"
                         Classes="H6"
                         Text="Semi Avalonia"
                         Theme="{DynamicResource TitleSelectableTextBlock}" />
-                    <SelectableTextBlock
-                        VerticalAlignment="Center"
-                        Text="/" />
+                    <SelectableTextBlock VerticalAlignment="Center" Text="/" />
                     <SelectableTextBlock
                         VerticalAlignment="Center"
                         Classes="Secondary"
                         Text="{ReflectionBinding #tab.SelectedItem.Header}" />
                 </StackPanel>
-                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
+                <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
                     <Button
-                        Theme="{DynamicResource IconBorderlessButton}"
                         Command="{Binding OpenUrlCommand}"
                         CommandParameter="{Binding DocumentationUrl}"
-                        Content="{StaticResource SemiIconGlobe}" />
+                        Content="{StaticResource SemiIconGlobe}"
+                        Theme="{DynamicResource IconBorderlessButton}" />
 
                     <Button
-                        Theme="{DynamicResource IconBorderlessButton}"
                         Command="{Binding OpenUrlCommand}"
                         CommandParameter="{Binding RepoUrl}"
-                        Content="{StaticResource SemiIconGithubLogo}" />
+                        Content="{StaticResource SemiIconGithubLogo}"
+                        Theme="{DynamicResource IconBorderlessButton}" />
 
                     <ToggleSwitch
-                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
                         Command="{Binding ToggleThemeCommand}"
+                        OffContent="{StaticResource SemiIconSun}"
                         OnContent="{StaticResource SemiIconMoon}"
-                        OffContent="{StaticResource SemiIconSun}" />
+                        Theme="{DynamicResource IconBorderlessToggleSwitch}" />
 
-                    <Button
-                        Theme="{DynamicResource IconBorderlessButton}"
-                        Content="{StaticResource SemiIconMenu}">
+                    <Button Content="{StaticResource SemiIconMenu}" Theme="{DynamicResource IconBorderlessButton}">
                         <Button.Flyout>
-                            <MenuFlyout Placement="Bottom" ItemsSource="{Binding MenuItems}" />
+                            <MenuFlyout ItemsSource="{Binding MenuItems}" Placement="Bottom" />
                         </Button.Flyout>
                         <Button.Styles>
-                            <Style Selector="MenuItem" x:DataType="views:MenuItemViewModel">
+                            <Style x:DataType="views:MenuItemViewModel" Selector="MenuItem">
                                 <Setter Property="Header" Value="{Binding Header}" />
                                 <Setter Property="ItemsSource" Value="{Binding Items}" />
                                 <Setter Property="Command" Value="{Binding Command}" />
@@ -94,8 +90,8 @@
             Grid.Row="1"
             Margin="8"
             Padding="20,0,0,0"
-            TabStripPlacement="Left"
             Classes.Dismiss="{Binding #ExpandButton.IsChecked}"
+            TabStripPlacement="Left"
             Theme="{DynamicResource ScrollLineTabControl}">
             <TabControl.Styles>
                 <Style Selector=".Dismiss /template/ ScrollViewer#PART_ScrollViewer">
@@ -113,9 +109,7 @@
             <TabItem Header="About Us">
                 <pages:AboutUs />
             </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Resource Browser" />
+            <TabItem Header="Resource Browser" Theme="{DynamicResource CategoryTabItem}" />
             <TabItem Header="Palette">
                 <pages:PaletteDemo />
             </TabItem>
@@ -128,21 +122,17 @@
             <TabItem Header="Icon">
                 <pages:IconDemo />
             </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Separate Pack" />
+            <TabItem Header="Separate Pack" Theme="{DynamicResource CategoryTabItem}" />
             <TabItem Header="ColorPicker">
                 <pages:ColorPickerDemo />
             </TabItem>
             <TabItem Header="DataGrid">
                 <pages:DataGridDemo />
             </TabItem>
-            <TabItem Header="TreeDataGrid">
-                <pages:TreeDataGridDemo />
-            </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Basic" />
+            <!-- <TabItem Header="TreeDataGrid"> -->
+            <!--     <pages:TreeDataGridDemo /> -->
+            <!-- </TabItem> -->
+            <TabItem Header="Basic" Theme="{DynamicResource CategoryTabItem}" />
             <TabItem Header="TextBlock">
                 <pages:TextBlockDemo />
             </TabItem>
@@ -155,21 +145,13 @@
             <TabItem Header="PathIcon">
                 <pages:PathIconDemo />
             </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Button" />
+            <TabItem Header="Button" Theme="{DynamicResource CategoryTabItem}" />
             <TabItem Header="Button">
                 <pages:ButtonDemo />
             </TabItem>
-            <TabItem Header="RepeatButton">
-                <pages:RepeatButtonDemo />
-            </TabItem>
             <TabItem Header="HyperlinkButton">
                 <pages:HyperlinkButtonDemo />
             </TabItem>
-            <TabItem Header="ToggleButton">
-                <pages:ToggleButtonDemo />
-            </TabItem>
             <TabItem Header="CheckBox">
                 <pages:CheckBoxDemo />
             </TabItem>
@@ -179,9 +161,7 @@
             <TabItem Header="ToggleSwitch">
                 <pages:ToggleSwitchDemo />
             </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Input" />
+            <TabItem Header="Input" Theme="{DynamicResource CategoryTabItem}" />
             <TabItem Header="TextBox">
                 <pages:TextBoxDemo />
             </TabItem>
@@ -203,9 +183,7 @@
             <TabItem Header="ManagedFileChooser">
                 <pages:ManagedFileChooserDemo />
             </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Date/Time" />
+            <TabItem Header="Date/Time" Theme="{DynamicResource CategoryTabItem}" />
             <TabItem Header="Calendar">
                 <pages:CalendarDemo />
             </TabItem>
@@ -218,9 +196,22 @@
             <TabItem Header="TimePicker">
                 <pages:TimePickerDemo />
             </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Navigation" />
+            <TabItem Header="Navigation" Theme="{DynamicResource CategoryTabItem}" />
+            <TabItem Header="ContentPage">
+                <pages:ContentPageDemo />
+            </TabItem>
+            <TabItem Header="CarouselPage">
+                <pages:CarouselPageDemo />
+            </TabItem>
+            <TabItem Header="DrawerPage">
+                <pages:DrawerPageDemo />
+            </TabItem>
+            <TabItem Header="NavigationPage">
+                <pages:NavigationPageDemo />
+            </TabItem>
+            <TabItem Header="TabbedPage">
+                <pages:TabbedPageDemo />
+            </TabItem>
             <TabItem Header="TabControl">
                 <pages:TabControlDemo />
             </TabItem>
@@ -230,12 +221,13 @@
             <TabItem Header="TreeView">
                 <pages:TreeViewDemo />
             </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Show" />
+            <TabItem Header="Show" Theme="{DynamicResource CategoryTabItem}" />
             <TabItem Header="Carousel">
                 <pages:CarouselDemo />
             </TabItem>
+            <TabItem Header="PipsPager">
+                <pages:PipsPagerDemo />
+            </TabItem>
             <TabItem Header="Expander">
                 <pages:ExpanderDemo />
             </TabItem>
@@ -257,9 +249,7 @@
             <TabItem Header="ToolTip">
                 <pages:ToolTipDemo />
             </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Feedback" />
+            <TabItem Header="Feedback" Theme="{DynamicResource CategoryTabItem}" />
             <TabItem Header="DataValidationErrors">
                 <pages:DataValidationErrorsDemo />
             </TabItem>
@@ -272,9 +262,10 @@
             <TabItem Header="RefreshContainer">
                 <pages:RefreshContainerDemo />
             </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Other" />
+            <TabItem Header="Other" Theme="{DynamicResource CategoryTabItem}" />
+            <TabItem Header="CommandBar">
+                <pages:CommandBarDemo />
+            </TabItem>
             <TabItem Header="GridSplitter">
                 <pages:GridSplitterDemo />
             </TabItem>
@@ -287,6 +278,9 @@
             <TabItem Header="ThemeVariantScope">
                 <pages:ThemeVariantDemo />
             </TabItem>
+            <TabItem Header="WindowCustomizationsPage">
+                <pages:WindowCustomizationsPage />
+            </TabItem>
         </TabControl>
     </Grid>
 </UserControl>

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

@@ -90,97 +90,97 @@ public partial class MainViewModel : ObservableObject
                     {
                         Header = "简体中文",
                         Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("zh-cn")
+                        CommandParameter = new CultureInfo("zh-CN")
                     },
                     new MenuItemViewModel
                     {
                         Header = "English",
                         Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("en-us")
+                        CommandParameter = new CultureInfo("en-US")
                     },
                     new MenuItemViewModel
                     {
                         Header = "日本語",
                         Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("ja-jp")
+                        CommandParameter = new CultureInfo("ja-JP")
                     },
                     new MenuItemViewModel
                     {
                         Header = "한국어",
                         Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("ko-kr")
+                        CommandParameter = new CultureInfo("ko-KR")
                     },
                     new MenuItemViewModel
                     {
                         Header = "English (UK)",
                         Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("en-gb")
+                        CommandParameter = new CultureInfo("en-GB")
                     },
                     new MenuItemViewModel
                     {
                         Header = "Italiano",
                         Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("it-it")
+                        CommandParameter = new CultureInfo("it-IT")
                     },
                     new MenuItemViewModel
                     {
                         Header = "Italiano (Switzerland)",
                         Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("it-ch")
+                        CommandParameter = new CultureInfo("it-CH")
                     },
                     new MenuItemViewModel
                     {
                         Header = "Nederlands",
                         Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("nl-nl")
+                        CommandParameter = new CultureInfo("nl-NL")
                     },
                     new MenuItemViewModel
                     {
                         Header = "Nederlands (Belgium)",
                         Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("nl-be")
+                        CommandParameter = new CultureInfo("nl-BE")
                     },
                     new MenuItemViewModel
                     {
                         Header = "Українська",
                         Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("uk-ua")
+                        CommandParameter = new CultureInfo("uk-UA")
                     },
                     new MenuItemViewModel
                     {
                         Header = "Русский",
                         Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("ru-ru")
+                        CommandParameter = new CultureInfo("ru-RU")
                     },
                     new MenuItemViewModel
                     {
                         Header = "繁體中文",
                         Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("zh-tw")
+                        CommandParameter = new CultureInfo("zh-TW")
                     },
                     new MenuItemViewModel
                     {
                         Header = "Deutsch",
                         Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("de-de")
+                        CommandParameter = new CultureInfo("de-DE")
                     },
                     new MenuItemViewModel
                     {
                         Header = "Español",
                         Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("es-es")
+                        CommandParameter = new CultureInfo("es-ES")
                     },
                     new MenuItemViewModel
                     {
                         Header = "Polski",
                         Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("pl-pl")
+                        CommandParameter = new CultureInfo("pl-PL")
                     },
                     new MenuItemViewModel
                     {
                         Header = "Français",
                         Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("fr-fr")
+                        CommandParameter = new CultureInfo("fr-FR")
                     },
                 ]
             }

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

@@ -5,10 +5,11 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:views="clr-namespace:Semi.Avalonia.Demo.Views"
-    Title="Semi.Avalonia.Demo"
+    Title="Semi Avalonia Demo"
     d:DesignHeight="450"
     d:DesignWidth="800"
+    ExtendClientAreaToDecorationsHint="True"
     Icon="/Assets/irihi.ico"
     mc:Ignorable="d">
-    <views:MainView />
+    <views:MainView Margin="{Binding $parent[Window].WindowDecorationMargin}" />
 </Window>

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

@@ -1,11 +1,38 @@
 using Avalonia.Controls;
+using Avalonia.Input;
 
 namespace Semi.Avalonia.Demo.Views;
 
 public partial class MainWindow : Window
 {
+    private WindowState _stateBeforeFullScreen = WindowState.Normal;
+
     public MainWindow()
     {
         InitializeComponent();
+        KeyDown += FullScreenKeyDown;
+    }
+
+    private void FullScreenKeyDown(object? sender, KeyEventArgs e)
+    {
+        if (e.Key == Key.F11)
+        {
+            
+            ToggleFullScreen();
+            e.Handled = true;
+        }
+    }
+
+    private void ToggleFullScreen()
+    {
+        if (WindowState is not WindowState.FullScreen)
+        {
+            _stateBeforeFullScreen = WindowState;
+            WindowState = WindowState.FullScreen;
+        }
+        else
+        {
+            WindowState = _stateBeforeFullScreen;
+        }
     }
 }

src/Directory.Build.props

@@ -1,17 +1,23 @@
 <Project>
     <PropertyGroup>
-        <TargetFrameworks>netstandard2.0;net6.0;net8.0</TargetFrameworks>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <Version>11.3.7</Version>
+        <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
+    </PropertyGroup>
+
+    <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
+        <IsAotCompatible>true</IsAotCompatible>
+    </PropertyGroup>
+
+    <PropertyGroup>
         <Authors>IRIHI Technology Co., Ltd.</Authors>
         <Description>Avalonia Theme inspired by Semi Design.</Description>
         <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>
+        <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
         <PackageLicenseExpression>MIT</PackageLicenseExpression>
         <PackageIcon>irihi.png</PackageIcon>
         <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
-        <AvaloniaVersion>11.3.7</AvaloniaVersion>
-        <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
+        <PackageReadmeFile>README.md</PackageReadmeFile>
     </PropertyGroup>
 
     <ItemGroup>

src/Directory.Packages.props

@@ -0,0 +1,14 @@
+<Project>
+    <PropertyGroup>
+        <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
+        <AvaloniaVersion>12.0.0</AvaloniaVersion>
+        <DataGridVersion>12.0.0</DataGridVersion>
+    </PropertyGroup>
+    <ItemGroup>
+        <PackageVersion Include="Avalonia" Version="$(AvaloniaVersion)"/>
+        <PackageVersion Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
+        <PackageVersion Include="Avalonia.Controls.DataGrid" Version="$(DataGridVersion)"/>
+        <PackageVersion Include="Avalonia.Controls.TreeDataGrid" Version="11.1.1"/>
+        <PackageVersion Include="Irihi.Avalonia.Shared" Version="0.4.0"/>
+    </ItemGroup>
+</Project>

src/Semi.Avalonia.ColorPicker/ColorPickerSemiTheme.axaml

@@ -6,6 +6,7 @@
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceInclude x:Key="Default" Source="Light.axaml" />
+                <ResourceInclude x:Key="Light" Source="Light.axaml" />
                 <ResourceInclude x:Key="Dark" Source="Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>

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

@@ -1,39 +1,49 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:converters="using:Avalonia.Controls.Converters">
-    <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
-    <converters:ToBrushConverter x:Key="ToBrushConverter" />
+    xmlns:iri="https://irihi.tech/shared"
+    xmlns:semi="https://irihi.tech/semi">
+    <Design.PreviewWith>
+        <StackPanel Width="500" Height="500">
+            <ColorPicker Name="cp" Color="#AAAAAAAA" IsAlphaVisible="True" IsAlphaEnabled="True" />
+            <ColorPicker Theme="{DynamicResource SimpleColorPicker}" Color="{Binding #cp.Color}" IsAlphaEnabled="{Binding #cp.IsAlphaEnabled}" IsAlphaVisible="{Binding #cp.IsAlphaVisible}" />
+            <ColorPicker Theme="{DynamicResource HexSimpleColorPicker}" Color="{Binding #cp.Color}" IsAlphaEnabled="{Binding #cp.IsAlphaEnabled}" IsAlphaVisible="{Binding #cp.IsAlphaVisible}" />
+            <ColorView Color="{Binding #cp.Color}" IsAlphaEnabled="{Binding #cp.IsAlphaEnabled}" IsAlphaVisible="{Binding #cp.IsAlphaVisible}" />
+        </StackPanel>
+    </Design.PreviewWith>
 
     <ControlTheme x:Key="{x:Type ColorPicker}" TargetType="ColorPicker">
-        <Setter Property="MinWidth" Value="64" />
+        <!-- Alpha position should match CSS (and default slider order) instead of XAML/WinUI -->
+        <Setter Property="HexInputAlphaPosition" Value="Trailing" />
         <Setter Property="HorizontalAlignment" Value="Center" />
+        <Setter Property="Padding" Value="0 0 10 0" />
         <Setter Property="MinHeight" Value="{DynamicResource ColorPickerMinHeight}" />
         <Setter Property="CornerRadius" Value="{DynamicResource ColorPickerCornerRadius}" />
+        <Setter Property="Palette" Value="{DynamicResource SemiColorPalette}" />
         <Setter Property="Content">
             <Template>
                 <Panel>
                     <Border
                         Margin="1,1,0,1"
+                        Width="{Binding $self.Bounds.Height}"
                         Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                        CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+                        CornerRadius="{TemplateBinding CornerRadius, Converter={iri:CornerRadiusMixerConverter Left}}" />
                     <Border
                         Margin="1,1,0,1"
+                        Width="{Binding $self.Bounds.Height}"
                         Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
-                        CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+                        CornerRadius="{TemplateBinding CornerRadius, Converter={iri:CornerRadiusMixerConverter Left}}" />
                 </Panel>
             </Template>
         </Setter>
-        <Setter Property="Palette">
-            <FluentColorPalette />
-        </Setter>
         <Setter Property="Template">
-            <ControlTemplate TargetType="{x:Type ColorPicker}">
+            <ControlTemplate TargetType="ColorPicker">
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
                     MinWidth="{TemplateBinding MinWidth}"
                     MinHeight="{TemplateBinding MinHeight}"
+                    Padding="{TemplateBinding Padding}"
                     HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                     VerticalAlignment="{TemplateBinding VerticalAlignment}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -49,7 +59,9 @@
                         </Style>
                     </DropDownButton.Styles>
                     <DropDownButton.Flyout>
-                        <Flyout FlyoutPresenterClasses="nopadding" Placement="{DynamicResource ColorPickerFlyoutPlacement}">
+                        <Flyout
+                            FlyoutPresenterClasses="nopadding"
+                            Placement="{DynamicResource ColorPickerFlyoutPlacement}">
 
                             <!--
                                 The following is copy-pasted from the ColorView's control template.
@@ -57,7 +69,6 @@
                                 Note the only changes are resources specific to the ColorPicker.
                             -->
                             <Grid
-                                Name="RootGrid"
                                 Width="300"
                                 Height="300"
                                 RowDefinitions="*,Auto">
@@ -81,7 +92,7 @@
                                     Padding="0"
                                     VerticalAlignment="Stretch"
                                     HorizontalContentAlignment="Stretch"
-                                    SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
+                                    SelectedIndex="{TemplateBinding SelectedIndex, Mode=TwoWay}">
                                     <TabControl.Styles>
                                         <Style Selector="TabItem">
                                             <Setter Property="MinHeight" Value="32" />
@@ -116,11 +127,11 @@
                                                 HorizontalAlignment="Center"
                                                 VerticalAlignment="Stretch"
                                                 AutomationProperties.Name="Third Component"
-                                                ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}"
+                                                ColorComponent="{Binding #ColorSpectrum.ThirdComponent}"
                                                 ColorModel="Hsva"
-                                                HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
-                                                IsAlphaVisible="True"
-                                                IsPerceptive="False"
+                                                HsvColor="{Binding #ColorSpectrum.HsvColor}"
+                                                IsAlphaVisible="False"
+                                                IsPerceptive="True"
                                                 IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                                 Orientation="Vertical" />
                                             <ColorSpectrum
@@ -129,7 +140,7 @@
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Stretch"
                                                 Components="{TemplateBinding ColorSpectrumComponents}"
-                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                                 MaxHue="{TemplateBinding MaxHue}"
                                                 MaxSaturation="{TemplateBinding MaxSaturation}"
                                                 MaxValue="{TemplateBinding MaxValue}"
@@ -146,14 +157,10 @@
                                                 AutomationProperties.Name="Alpha Component"
                                                 ColorComponent="Alpha"
                                                 ColorModel="Hsva"
-                                                HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
+                                                HsvColor="{Binding #ColorSpectrum.HsvColor}"
+                                                IsVisible="{TemplateBinding IsAlphaVisible}"
                                                 IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                                 Orientation="Vertical">
-                                                <ColorSlider.IsVisible>
-                                                    <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                                    </MultiBinding>
-                                                </ColorSlider.IsVisible>
                                             </ColorSlider>
                                         </Grid>
                                     </TabItem>
@@ -168,13 +175,13 @@
                                         <ListBox
                                             Margin="12"
                                             VerticalAlignment="Stretch"
-                                            ItemContainerTheme="{DynamicResource ColorViewPaletteListBoxItemTheme}"
+                                            ItemContainerTheme="{StaticResource ColorViewPaletteListBoxItemTheme}"
                                             ItemsSource="{TemplateBinding PaletteColors}"
-                                            SelectedItem="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DoNothingForNullConverter}, Mode=TwoWay}"
-                                            Theme="{DynamicResource ColorViewPaletteListBoxTheme}"
+                                            SelectedItem="{TemplateBinding Color, Mode=TwoWay, Converter={StaticResource DoNothingForNullConverter}}"
+                                            Theme="{StaticResource ColorViewPaletteListBoxTheme}"
                                             UseLayoutRounding="False">
                                             <ListBox.ItemTemplate>
-                                                <DataTemplate DataType="{x:Type Color}">
+                                                <DataTemplate DataType="Color">
                                                     <Border
                                                         HorizontalAlignment="Stretch"
                                                         VerticalAlignment="Stretch"
@@ -205,7 +212,11 @@
                                             Margin="12"
                                             ColumnDefinitions="Auto,*"
                                             RowDefinitions="Auto,24,*,*,*,*,12"
-                                            Tag="{TemplateBinding ColorModel}">
+                                            UseLayoutRounding="False">
+                                            <Grid.Resources>
+                                                <Thickness x:Key="TextBoxContentPadding">8 0</Thickness>
+                                                <Thickness x:Key="TextBoxInnerLeftContentPadding">0 0 8 0</Thickness>
+                                            </Grid.Resources>
                                             <Grid.Styles>
                                                 <Style Selector="NumericUpDown">
                                                     <Setter Property="InnerLeftContent">
@@ -214,34 +225,6 @@
                                                         </Template>
                                                     </Setter>
                                                 </Style>
-                                                <Style Selector="Grid[Tag=Rgba]">
-                                                    <Style Selector="^ NumericUpDown#Component1NumericUpDown">
-                                                        <Setter Property="Tag" Value="R" />
-                                                    </Style>
-                                                    <Style Selector="^ NumericUpDown#Component2NumericUpDown">
-                                                        <Setter Property="Tag" Value="G" />
-                                                    </Style>
-                                                    <Style Selector="^ NumericUpDown#Component3NumericUpDown">
-                                                        <Setter Property="Tag" Value="B" />
-                                                    </Style>
-                                                    <Style Selector="^ NumericUpDown#AlphaComponentNumericUpDown">
-                                                        <Setter Property="Tag" Value="A" />
-                                                    </Style>
-                                                </Style>
-                                                <Style Selector="Grid[Tag=Hsva]">
-                                                    <Style Selector="^ NumericUpDown#Component1NumericUpDown">
-                                                        <Setter Property="Tag" Value="H" />
-                                                    </Style>
-                                                    <Style Selector="^ NumericUpDown#Component2NumericUpDown">
-                                                        <Setter Property="Tag" Value="S" />
-                                                    </Style>
-                                                    <Style Selector="^ NumericUpDown#Component3NumericUpDown">
-                                                        <Setter Property="Tag" Value="V" />
-                                                    </Style>
-                                                    <Style Selector="^ NumericUpDown#AlphaComponentNumericUpDown">
-                                                        <Setter Property="Tag" Value="A" />
-                                                    </Style>
-                                                </Style>
                                             </Grid.Styles>
                                             <!--  Top color model & Hex input  -->
                                             <Grid
@@ -263,9 +246,9 @@
                                                             Content="RGB"
                                                             CornerRadius="3,0,0,3"
                                                             IsChecked="{TemplateBinding ColorModel,
-                                                            Converter={StaticResource EnumToBoolConverter},
-                                                            ConverterParameter={x:Static ColorModel.Rgba},
-                                                            Mode=TwoWay}"
+                                                                Converter={StaticResource EnumToBoolConverter},
+                                                                ConverterParameter={x:Static ColorModel.Rgba},
+                                                                Mode=TwoWay}"
                                                             Theme="{DynamicResource ColorViewRadioButton}" />
                                                         <RadioButton
                                                             Name="HsvRadioButton"
@@ -275,9 +258,9 @@
                                                             Content="HSV"
                                                             CornerRadius="0,3,3,0"
                                                             IsChecked="{TemplateBinding ColorModel,
-                                                            Converter={StaticResource EnumToBoolConverter},
-                                                            ConverterParameter={x:Static ColorModel.Hsva},
-                                                            Mode=TwoWay}"
+                                                                Converter={StaticResource EnumToBoolConverter},
+                                                                ConverterParameter={x:Static ColorModel.Hsva},
+                                                                Mode=TwoWay}"
                                                             Theme="{DynamicResource ColorViewRadioButton}" />
                                                     </Grid>
                                                 </Border>
@@ -302,11 +285,11 @@
                                                 AllowSpin="True"
                                                 Classes="Small"
                                                 IsVisible="{TemplateBinding IsComponentTextInputVisible}"
-                                                Maximum="{Binding Maximum, ElementName=Component1Slider}"
-                                                Minimum="{Binding Minimum, ElementName=Component1Slider}"
+                                                Maximum="{Binding #Component1Slider.Maximum}"
+                                                Minimum="{Binding #Component1Slider.Minimum}"
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
-                                                Value="{Binding Value, ElementName=Component1Slider}" />
+                                                Value="{Binding #Component1Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" />
                                             <ColorSlider
                                                 Name="Component1Slider"
                                                 Grid.Row="2"
@@ -315,7 +298,7 @@
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component1"
                                                 ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
                                                 IsVisible="{TemplateBinding IsComponentSliderVisible}"
@@ -332,11 +315,11 @@
                                                 AllowSpin="True"
                                                 Classes="Small"
                                                 IsVisible="{TemplateBinding IsComponentTextInputVisible}"
-                                                Maximum="{Binding Maximum, ElementName=Component2Slider}"
-                                                Minimum="{Binding Minimum, ElementName=Component2Slider}"
+                                                Maximum="{Binding #Component2Slider.Maximum}"
+                                                Minimum="{Binding #Component2Slider.Minimum}"
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
-                                                Value="{Binding Value, ElementName=Component2Slider}" />
+                                                Value="{Binding #Component2Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" />
                                             <ColorSlider
                                                 Name="Component2Slider"
                                                 Grid.Row="3"
@@ -345,7 +328,7 @@
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component2"
                                                 ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
                                                 IsVisible="{TemplateBinding IsComponentSliderVisible}"
@@ -362,11 +345,11 @@
                                                 AllowSpin="True"
                                                 Classes="Small"
                                                 IsVisible="{TemplateBinding IsComponentTextInputVisible}"
-                                                Maximum="{Binding Maximum, ElementName=Component3Slider}"
-                                                Minimum="{Binding Minimum, ElementName=Component3Slider}"
+                                                Maximum="{Binding #Component3Slider.Maximum}"
+                                                Minimum="{Binding #Component3Slider.Minimum}"
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
-                                                Value="{Binding Value, ElementName=Component3Slider}" />
+                                                Value="{Binding #Component3Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" />
                                             <ColorSlider
                                                 Name="Component3Slider"
                                                 Grid.Row="4"
@@ -375,7 +358,7 @@
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component3"
                                                 ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
                                                 IsVisible="{TemplateBinding IsComponentSliderVisible}"
@@ -392,15 +375,15 @@
                                                 AllowSpin="True"
                                                 Classes="Small"
                                                 IsEnabled="{TemplateBinding IsAlphaEnabled}"
-                                                Maximum="{Binding Maximum, ElementName=AlphaComponentSlider}"
-                                                Minimum="{Binding Minimum, ElementName=AlphaComponentSlider}"
+                                                Maximum="{Binding #AlphaComponentSlider.Maximum}"
+                                                Minimum="{Binding #AlphaComponentSlider.Minimum}"
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
-                                                Value="{Binding Value, ElementName=AlphaComponentSlider}">
+                                                Value="{Binding #AlphaComponentSlider.Value,Converter={StaticResource DoNothingForNullConverter}}">
                                                 <NumericUpDown.IsVisible>
                                                     <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                                        <Binding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                        <TemplateBinding Property="IsAlphaVisible" />
+                                                        <TemplateBinding Property="IsComponentTextInputVisible" />
                                                     </MultiBinding>
                                                 </NumericUpDown.IsVisible>
                                             </NumericUpDown>
@@ -412,7 +395,7 @@
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Alpha"
                                                 ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                                 IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
@@ -420,8 +403,8 @@
                                                 TickFrequency="1">
                                                 <ColorSlider.IsVisible>
                                                     <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                                        <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                        <TemplateBinding Property="IsAlphaVisible" />
+                                                        <TemplateBinding Property="IsComponentSliderVisible" />
                                                     </MultiBinding>
                                                 </ColorSlider.IsVisible>
                                             </ColorSlider>
@@ -429,11 +412,11 @@
                                     </TabItem>
                                 </TabControl>
                                 <!--  Previewer  -->
-                                <!--  Note that top/bottom margins have -5 to remove for drop shadow padding  -->
+                                <!-- Note that the drop shadow is allowed to extend past the control bounds -->
                                 <ColorPreviewer
                                     Grid.Row="1"
-                                    Margin="12,-5,12,7"
-                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    Margin="12,0,12,12"
+                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                     IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
                                     IsVisible="{TemplateBinding IsColorPreviewVisible}" />
                             </Grid>
@@ -442,9 +425,33 @@
                 </DropDownButton>
             </ControlTemplate>
         </Setter>
-
-        <Style Selector="^ /template/ DropDownButton">
-            <Setter Property="Padding" Value="0 0 10 0" />
+        <Style Selector="^[ColorModel=Rgba]">
+            <Style Selector="^ /template/ NumericUpDown#Component1NumericUpDown">
+                <Setter Property="Tag" Value="R" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#Component2NumericUpDown">
+                <Setter Property="Tag" Value="G" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#Component3NumericUpDown">
+                <Setter Property="Tag" Value="B" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#AlphaComponentNumericUpDown">
+                <Setter Property="Tag" Value="A" />
+            </Style>
+        </Style>
+        <Style Selector="^[ColorModel=Hsva]">
+            <Style Selector="^ /template/ NumericUpDown#Component1NumericUpDown">
+                <Setter Property="Tag" Value="H" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#Component2NumericUpDown">
+                <Setter Property="Tag" Value="S" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#Component3NumericUpDown">
+                <Setter Property="Tag" Value="V" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#AlphaComponentNumericUpDown">
+                <Setter Property="Tag" Value="A" />
+            </Style>
         </Style>
     </ControlTheme>
 
@@ -452,38 +459,34 @@
         x:Key="HexColorPicker"
         BasedOn="{StaticResource {x:Type ColorPicker}}"
         TargetType="ColorPicker">
-        <Setter Property="MinWidth" Value="200" />
-        <Setter Property="Content">
-            <Template>
-                <Grid ColumnDefinitions="Auto, *">
-                    <Border
-                        Grid.Column="0"
-                        Width="{Binding $self.Bounds.Height}"
-                        Margin="1,1,0,1"
-                        HorizontalAlignment="Stretch"
-                        VerticalAlignment="Stretch"
-                        Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                        CornerRadius="{TemplateBinding CornerRadius}" />
-                    <Border
-                        Grid.Column="0"
-                        Width="{Binding $self.Bounds.Height}"
-                        Margin="1,1,0,1"
-                        HorizontalAlignment="Stretch"
-                        VerticalAlignment="Stretch"
-                        Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
-                        CornerRadius="{TemplateBinding CornerRadius}" />
-                    <TextBlock
-                        Grid.Column="1"
-                        Margin="8,0,0,0"
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        FontWeight="Regular"
-                        Foreground="{DynamicResource TextBlockDefaultForeground}"
-                        Text="{Binding $parent[ColorPicker].Color}" />
-                </Grid>
-            </Template>
-        </Setter>
+        <Setter Property="MinWidth" Value="180" />
+        <Setter Property="Content" Value="{StaticResource HexColorPickerTemplate}" />
     </ControlTheme>
+    <Template x:Key="HexColorPickerTemplate">
+        <Grid ColumnDefinitions="Auto, *">
+            <Border
+                Grid.Column="0"
+                Width="{Binding $self.Bounds.Height}"
+                Margin="1,1,0,1"
+                Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
+                CornerRadius="{Binding $parent[ColorPicker].CornerRadius}" />
+            <Border
+                Grid.Column="0"
+                Width="{Binding $self.Bounds.Height}"
+                Margin="1,1,0,1"
+                Background="{Binding $parent[ColorPicker].HsvColor,Converter={StaticResource ToBrushConverter}}"
+                CornerRadius="{Binding $parent[ColorPicker].CornerRadius}" />
+            <TextBlock
+                Grid.Column="1"
+                Margin="8,0,0,0"
+                HorizontalAlignment="Left"
+                VerticalAlignment="Center"
+                Foreground="{DynamicResource TextBlockDefaultForeground}">
+                <Run Text="#" />
+                <Run Text="{Binding $parent[ColorPicker].Color, Converter={StaticResource ColorToHexConverter}}" />
+            </TextBlock>
+        </Grid>
+    </Template>
 
     <ControlTheme
         x:Key="SimpleColorPicker"
@@ -491,12 +494,13 @@
         TargetType="ColorPicker">
         <Setter Property="ColorSpectrumComponents" Value="SaturationValue" />
         <Setter Property="Template">
-            <ControlTemplate TargetType="{x:Type ColorPicker}">
+            <ControlTemplate TargetType="ColorPicker">
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
                     MinWidth="{TemplateBinding MinWidth}"
                     MinHeight="{TemplateBinding MinHeight}"
+                    Padding="{TemplateBinding Padding}"
                     HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                     VerticalAlignment="{TemplateBinding VerticalAlignment}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -511,14 +515,16 @@
                         </Style>
                     </DropDownButton.Styles>
                     <DropDownButton.Flyout>
-                        <Flyout FlyoutPresenterClasses="nopadding" Placement="{DynamicResource SimpleColorPickerFlyoutPlacement}">
-
+                        <Flyout
+                            FlyoutPresenterClasses="nopadding"
+                            Placement="{DynamicResource SimpleColorPickerFlyoutPlacement}">
+                            
                             <!--
                                 The following is copy-pasted from the ColorView's control template.
                                 It MUST always be kept in sync with the ColorView (which is master).
                                 Note the only changes are resources specific to the ColorPicker.
                             -->
-                            <Grid Width="280">
+                            <Grid>
                                 <Grid.RowDefinitions>
                                     <RowDefinition Height="*" MinHeight="280" />
                                     <RowDefinition Height="Auto" />
@@ -534,6 +540,7 @@
                                         Name="ColorSpectrum"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
+                                        CornerRadius="8 8 0 0"
                                         Components="{TemplateBinding ColorSpectrumComponents}"
                                         HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                         MaxHue="{TemplateBinding MaxHue}"
@@ -584,35 +591,43 @@
                                         CornerRadius="4" />
                                     <Panel
                                         Name="PART_TextBoxPanel"
-                                        Width="106"
+                                        Width="116"
                                         Margin="4 0 0 0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Center">
                                         <TextBox
                                             Name="PART_HexTextBox"
+                                            AutomationProperties.Name="Hexadecimal Color"
                                             Classes="Small"
+                                            CornerRadius="3 0 0 3"
                                             InnerLeftContent="#"
-                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
-                                            Text="{TemplateBinding Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
-                                            MaxLength="8" />
+                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter=Hex}"
+                                            MaxLength="8">
+                                            <TextBox.Resources>
+                                                <Thickness x:Key="TextBoxInnerLeftContentPadding">0 0 4 0</Thickness>
+                                            </TextBox.Resources>
+                                        </TextBox>
                                         <TextBox
                                             Name="PART_RgbaTextBox"
                                             Classes="Small"
-                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Rgba}"
-                                            Text="{TemplateBinding Color, Converter={StaticResource ColorToTextConverter}, Mode=TwoWay}" />
+                                            CornerRadius="3 0 0 3"
+                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter={x:Static ColorModel.Rgba}}"
+                                            Text="{TemplateBinding Color, Converter={semi:ColorToTextConverter}, Mode=TwoWay}" />
                                         <TextBox
                                             Name="PART_HsvaTextBox"
                                             Classes="Small"
-                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
-                                            Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
+                                            CornerRadius="3 0 0 3"
+                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter={x:Static ColorModel.Hsva}}"
+                                            Text="{TemplateBinding HsvColor, Converter={semi:HsvColorToTextConverter}, Mode=TwoWay}" />
                                     </Panel>
 
                                     <NumericUpDown
                                         Name="AlphaComponentNumericUpDown"
-                                        Width="70"
+                                        Width="60"
                                         HorizontalAlignment="Right"
                                         VerticalAlignment="Center"
                                         AllowSpin="True"
+                                        CornerRadius="0"
                                         Classes="Small"
                                         IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                         Maximum="{Binding #ColorSpectrumAlphaSlider.Maximum}"
@@ -621,14 +636,21 @@
                                         ShowButtonSpinner="False"
                                         InnerRightContent="%"
                                         IsVisible="{TemplateBinding IsAlphaVisible}"
-                                        Value="{Binding #ColorSpectrumAlphaSlider.Value}" />
+                                        Value="{Binding #ColorSpectrumAlphaSlider.Value,Converter={StaticResource DoNothingForNullConverter}}">
+                                        <NumericUpDown.Resources>
+                                            <Thickness x:Key="TextBoxContentPadding">12 0 4 0</Thickness>
+                                            <Thickness x:Key="TextBoxInnerRightContentPadding">4 0 0 0</Thickness>
+                                        </NumericUpDown.Resources>
+                                    </NumericUpDown>
                                     <ComboBox
                                         Name="ColorModelComboBox"
                                         Width="80"
+                                        CornerRadius="0 3 3 0"
                                         VerticalAlignment="Center"
                                         Classes="Small"
                                         SelectedValue="Hex">
-                                        Hex<ColorModel>Rgba</ColorModel>
+                                        <x:String>Hex</x:String>
+                                        <ColorModel>Rgba</ColorModel>
                                         <ColorModel>Hsva</ColorModel>
                                     </ComboBox>
                                 </StackPanel>
@@ -647,37 +669,8 @@
         x:Key="HexSimpleColorPicker"
         BasedOn="{StaticResource SimpleColorPicker}"
         TargetType="ColorPicker">
-        <Setter Property="MinWidth" Value="200" />
-        <Setter Property="Content">
-            <Template>
-                <Grid ColumnDefinitions="Auto, *">
-                    <Border
-                        Grid.Column="0"
-                        Width="{Binding $self.Bounds.Height}"
-                        Margin="1,1,0,1"
-                        HorizontalAlignment="Stretch"
-                        VerticalAlignment="Stretch"
-                        Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                        CornerRadius="{TemplateBinding CornerRadius}" />
-                    <Border
-                        Grid.Column="0"
-                        Width="{Binding $self.Bounds.Height}"
-                        Margin="1,1,0,1"
-                        HorizontalAlignment="Stretch"
-                        VerticalAlignment="Stretch"
-                        Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
-                        CornerRadius="{TemplateBinding CornerRadius}" />
-                    <TextBlock
-                        Grid.Column="1"
-                        Margin="8,0,0,0"
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        FontWeight="Regular"
-                        Foreground="{DynamicResource TextBlockDefaultForeground}"
-                        Text="{Binding $parent[ColorPicker].Color}" />
-                </Grid>
-            </Template>
-        </Setter>
+        <Setter Property="MinWidth" Value="180" />
+        <Setter Property="Content" Value="{StaticResource HexColorPickerTemplate}" />
     </ControlTheme>
 
 </ResourceDictionary>

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

@@ -1,17 +1,13 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:converters="using:Avalonia.Controls.Converters"
-    xmlns:pc="using:Avalonia.Controls.Primitives.Converters">
-    <pc:AccentColorConverter x:Key="AccentColorConverter" />
-    <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
-    <converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight" />
+    xmlns:iri="https://irihi.tech/shared">
 
     <ControlTheme x:Key="{x:Type ColorPreviewer}" TargetType="ColorPreviewer">
         <Setter Property="Height" Value="{DynamicResource ColorPreviewerHeight}" />
         <Setter Property="CornerRadius" Value="{DynamicResource ColorPreviewerCornerRadius}" />
         <Setter Property="Template">
-            <ControlTemplate TargetType="{x:Type ColorPreviewer}">
+            <ControlTemplate TargetType="ColorPreviewer">
                 <Panel>
                     <!--  Preview color with accents to the left and right  -->
                     <Grid ColumnDefinitions="Auto,*,Auto" IsVisible="{TemplateBinding IsAccentColorsVisible}">
@@ -34,7 +30,7 @@
                                 Background="{TemplateBinding HsvColor,
                                 Converter={StaticResource AccentColorConverter},
                                 ConverterParameter='-2'}"
-                                CornerRadius="{TemplateBinding CornerRadius,Converter={StaticResource LeftCornerRadiusFilterConverter}}"
+                                CornerRadius="{TemplateBinding CornerRadius,Converter={iri:CornerRadiusMixerConverter Left}}"
                                 Tag="-2" />
                             <Border
                                 Name="PART_AccentDecrement1Border"
@@ -70,7 +66,7 @@
                                 Background="{TemplateBinding HsvColor,
                                 Converter={StaticResource AccentColorConverter},
                                 ConverterParameter='2'}"
-                                CornerRadius="{TemplateBinding CornerRadius,Converter={StaticResource RightCornerRadiusFilterConverter}}"
+                                CornerRadius="{TemplateBinding CornerRadius,Converter={iri:CornerRadiusMixerConverter Right}}"
                                 Tag="2" />
                         </Grid>
                         <!--  Preview color: Must be last for drop shadow Z-index  -->

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

@@ -1,9 +1,6 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:converters="using:Avalonia.Controls.Converters">
-    <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
-    <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
     <ControlTheme x:Key="ColorSliderThumbTheme" TargetType="Thumb">
         <Setter Property="Background" Value="Transparent" />
@@ -12,7 +9,7 @@
         <Setter Property="BorderThickness" Value="{DynamicResource ColorSliderThumbBorderBrush}" />
         <Setter Property="CornerRadius" Value="{DynamicResource ColorSliderThumbCornerRadius}" />
         <Setter Property="Template">
-            <ControlTemplate>
+            <ControlTemplate TargetType="Thumb">
                 <Border
                     Margin="1"
                     Background="{TemplateBinding Background}"
@@ -30,33 +27,30 @@
             <Setter Property="CornerRadius" Value="{DynamicResource ColorSliderCornerRadius}" />
             <Setter Property="Height" Value="{DynamicResource ColorSliderWidth}" />
             <Setter Property="Template">
-                <ControlTemplate TargetType="{x:Type ColorSlider}">
+                <ControlTemplate TargetType="ColorSlider">
                     <Border
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
                         CornerRadius="{TemplateBinding CornerRadius}">
                         <Grid Margin="{TemplateBinding Padding}">
-                            <Rectangle
-                                Width="{Binding #PART_Track.Bounds.Width}"
-                                Height="{Binding #PART_Track.Bounds.Height}"
+                            <Border
                                 HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-                            <Rectangle
-                                Width="{Binding #PART_Track.Bounds.Width}"
+                                VerticalAlignment="Center"
                                 Height="{Binding #PART_Track.Bounds.Height}"
+                                Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
+                                CornerRadius="{DynamicResource ColorSliderCornerRadius}" />
+                            <Border
                                 HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                Fill="{TemplateBinding Background}"
-                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                                VerticalAlignment="Center"
+                                Height="{Binding #PART_Track.Bounds.Height}"
+                                Background="{TemplateBinding Background}"
+                                CornerRadius="{DynamicResource ColorSliderCornerRadius}" />
+
                             <Track
                                 Name="PART_Track"
                                 Height="12"
                                 HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
+                                VerticalAlignment="Center"
                                 IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
                                 Maximum="{TemplateBinding Maximum}"
                                 Minimum="{TemplateBinding Minimum}"
@@ -101,7 +95,7 @@
                                     Width="{TemplateBinding Height}"
                                     Height="{TemplateBinding Height}"
                                     DataContext="{TemplateBinding Value}"
-                                    Theme="{StaticResource ColorSliderThumbTheme}" />
+                                    Theme="{DynamicResource ColorSliderThumbTheme}" />
                             </Track>
                         </Grid>
                     </Border>
@@ -114,32 +108,28 @@
             <Setter Property="CornerRadius" Value="{DynamicResource ColorSliderCornerRadius}" />
             <Setter Property="Width" Value="{DynamicResource ColorSliderWidth}" />
             <Setter Property="Template">
-                <ControlTemplate TargetType="{x:Type ColorSlider}">
+                <ControlTemplate TargetType="ColorSlider">
                     <Border
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
                         CornerRadius="{TemplateBinding CornerRadius}">
                         <Grid Margin="{TemplateBinding Padding}">
-                            <Rectangle
-                                Width="{Binding #PART_Track.Bounds.Width}"
-                                Height="{Binding #PART_Track.Bounds.Height}"
-                                HorizontalAlignment="Stretch"
+                            <Border
+                                HorizontalAlignment="Center"
                                 VerticalAlignment="Stretch"
-                                Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-                            <Rectangle
                                 Width="{Binding #PART_Track.Bounds.Width}"
-                                Height="{Binding #PART_Track.Bounds.Height}"
-                                HorizontalAlignment="Stretch"
+                                Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
+                                CornerRadius="{DynamicResource ColorSliderCornerRadius}" />
+                            <Border
+                                HorizontalAlignment="Center"
                                 VerticalAlignment="Stretch"
-                                Fill="{TemplateBinding Background}"
-                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                                Width="{Binding #PART_Track.Bounds.Width}"
+                                Background="{TemplateBinding Background}"
+                                CornerRadius="{DynamicResource ColorSliderCornerRadius}" />
                             <Track
                                 Name="PART_Track"
                                 Width="12"
-                                HorizontalAlignment="Stretch"
+                                HorizontalAlignment="Center"
                                 VerticalAlignment="Stretch"
                                 IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
                                 Maximum="{TemplateBinding Maximum}"
@@ -185,7 +175,7 @@
                                     Width="{TemplateBinding Width}"
                                     Height="{TemplateBinding Width}"
                                     DataContext="{TemplateBinding Value}"
-                                    Theme="{StaticResource ColorSliderThumbTheme}" />
+                                    Theme="{DynamicResource ColorSliderThumbTheme}" />
                             </Track>
                         </Grid>
                     </Border>

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

@@ -1,15 +1,11 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:converters="using:Avalonia.Controls.Converters">
-    <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
-    <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
-    <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
     <ControlTheme x:Key="{x:Type ColorSpectrum}" TargetType="ColorSpectrum">
         <Setter Property="CornerRadius" Value="{DynamicResource ColorSpectrumCornerRadius}" />
         <Setter Property="Template">
-            <ControlTemplate TargetType="{x:Type ColorSpectrum}">
+            <ControlTemplate TargetType="ColorSpectrum">
                 <Panel
                     Name="PART_LayoutRoot"
                     HorizontalAlignment="Stretch"
@@ -25,27 +21,27 @@
                             VerticalAlignment="Stretch"
                             IsHitTestVisible="False"
                             IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
+                            Converter={x:Static ObjectConverters.Equal},
                             ConverterParameter={x:Static ColorSpectrumShape.Box}}"
-                            RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                            RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            RadiusX="{Binding CornerRadius.TopLeft,RelativeSource={RelativeSource TemplatedParent}}"
+                            RadiusY="{Binding CornerRadius.BottomRight,RelativeSource={RelativeSource TemplatedParent}}" />
                         <Rectangle
                             Name="PART_SpectrumOverlayRectangle"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             IsHitTestVisible="False"
                             IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
+                            Converter={x:Static ObjectConverters.Equal},
                             ConverterParameter={x:Static ColorSpectrumShape.Box}}"
-                            RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                            RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            RadiusX="{Binding CornerRadius.TopLeft,RelativeSource={RelativeSource TemplatedParent}}"
+                            RadiusY="{Binding CornerRadius.BottomRight,RelativeSource={RelativeSource TemplatedParent}}" />
                         <Ellipse
                             Name="PART_SpectrumEllipse"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             IsHitTestVisible="False"
                             IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
+                            Converter={x:Static ObjectConverters.Equal},
                             ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
                         <Ellipse
                             Name="PART_SpectrumOverlayEllipse"
@@ -53,7 +49,7 @@
                             VerticalAlignment="Stretch"
                             IsHitTestVisible="False"
                             IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
+                            Converter={x:Static ObjectConverters.Equal},
                             ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
                         <Canvas
                             Name="PART_InputTarget"
@@ -89,17 +85,17 @@
                             VerticalAlignment="Stretch"
                             IsHitTestVisible="False"
                             IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
+                            Converter={x:Static ObjectConverters.Equal},
                             ConverterParameter={x:Static ColorSpectrumShape.Box}}"
-                            RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                            RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            RadiusX="{Binding CornerRadius.TopLeft,RelativeSource={RelativeSource TemplatedParent}}"
+                            RadiusY="{Binding CornerRadius.BottomRight,RelativeSource={RelativeSource TemplatedParent}}" />
                         <Ellipse
                             Name="BorderEllipse"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             IsHitTestVisible="False"
                             IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
+                            Converter={x:Static ObjectConverters.Equal},
                             ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
                     </Panel>
                 </Panel>

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

@@ -1,28 +1,23 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:converters="using:Avalonia.Controls.Converters"
-    xmlns:globalization="using:System.Globalization"
-    xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
-    xmlns:cvts="clr-namespace:Semi.Avalonia.ColorPicker.Converters">
-    <pc:ContrastBrushConverter x:Key="ContrastBrushConverter" />
-    <converters:ColorToDisplayNameConverter x:Key="ColorToDisplayNameConverter" />
-    <converters:ColorToHexConverter x:Key="ColorToHexConverter" />
-    <converters:DoNothingForNullConverter x:Key="DoNothingForNullConverter" />
-    <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
-    <converters:ToBrushConverter x:Key="ToBrushConverter" />
-    <cvts:HsvColorToTextConverter x:Key="HsvColorToTextConverter" />
-    <cvts:ColorToTextConverter x:Key="ColorToTextConverter" />
-    <cvts:ToColorModel x:Key="ToColorModel" />
-    <globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
+    xmlns:semi="https://irihi.tech/semi">
 
     <Design.PreviewWith>
-        <ColorView
-            Theme="{StaticResource SimpleColorView}"
-            IsAlphaVisible="True"
-            IsAlphaEnabled="True"
-            ColorModel="Hsva"
-            HsvColor="hsv(120,7%,90%)" />
+        <StackPanel>
+            <ColorView
+                SelectedIndex="2"
+                IsAlphaVisible="True"
+                IsAlphaEnabled="True"
+                ColorModel="Hsva"
+                HsvColor="hsv(120,7%,90%)" />
+            <ColorView
+                Theme="{DynamicResource SimpleColorView}"
+                IsAlphaVisible="True"
+                IsAlphaEnabled="True"
+                ColorModel="Hsva"
+                HsvColor="hsv(120,7%,90%)" />
+        </StackPanel>
     </Design.PreviewWith>
 
     <VisualBrush
@@ -32,16 +27,12 @@
         TileMode="Tile">
         <VisualBrush.Visual>
             <Image Width="8" Height="8">
-                <Image.Source>
-                    <DrawingImage>
-                        <DrawingImage.Drawing>
-                            <DrawingGroup>
-                                <GeometryDrawing Brush="Transparent" Geometry="M0,0 L2,0 2,2, 0,2Z" />
-                                <GeometryDrawing Brush="#19808080" Geometry="M0,1 L2,1 2,2, 1,2 1,0 0,0Z" />
-                            </DrawingGroup>
-                        </DrawingImage.Drawing>
-                    </DrawingImage>
-                </Image.Source>
+                <DrawingImage>
+                    <DrawingGroup>
+                        <GeometryDrawing Brush="Transparent" Geometry="M0 0H2V2H0Z" />
+                        <GeometryDrawing Brush="#19808080" Geometry="M0 1H2V2H1V0H0Z" />
+                    </DrawingGroup>
+                </DrawingImage>
             </Image>
         </VisualBrush.Visual>
     </VisualBrush>
@@ -61,11 +52,11 @@
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <ScrollViewer
                         Name="PART_ScrollViewer"
-                        AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
-                        HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
-                        IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
-                        IsDeferredScrollingEnabled="{TemplateBinding (ScrollViewer.IsDeferredScrollingEnabled)}"
-                        VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
+                        AllowAutoHide="{TemplateBinding ScrollViewer.AllowAutoHide}"
+                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                        IsScrollChainingEnabled="{TemplateBinding ScrollViewer.IsScrollChainingEnabled}"
+                        IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
+                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                         <ItemsPresenter
                             Name="PART_ItemsPresenter"
                             Margin="{TemplateBinding Padding}"
@@ -82,8 +73,8 @@
         <Setter Property="HorizontalContentAlignment" Value="Stretch" />
         <Setter Property="VerticalContentAlignment" Value="Stretch" />
         <Setter Property="Template">
-            <ControlTemplate TargetType="{x:Type ListBoxItem}">
-                <Grid UseLayoutRounding="False">
+            <ControlTemplate TargetType="ListBoxItem">
+                <Panel UseLayoutRounding="False">
                     <ContentPresenter
                         Name="PART_ContentPresenter"
                         Padding="{TemplateBinding Padding}"
@@ -101,7 +92,7 @@
                         VerticalAlignment="Stretch"
                         IsHitTestVisible="False"
                         StrokeThickness="1" />
-                </Grid>
+                </Panel>
             </ControlTemplate>
         </Setter>
 
@@ -141,12 +132,14 @@
                     Content="{TemplateBinding Content}"
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}"
-                    RecognizesAccessKey="True"
                     TextElement.FontSize="{TemplateBinding FontSize}"
                     TextElement.FontWeight="{TemplateBinding FontWeight}"
                     UseLayoutRounding="False" />
             </ControlTemplate>
         </Setter>
+        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="RecognizesAccessKey" Value="True" />
+        </Style>
         <Style Selector="^:checked">
             <Setter Property="Background" Value="{DynamicResource ColorViewRadioButtonCheckedBackground}" />
             <Setter Property="Foreground" Value="{DynamicResource ColorViewRadioButtonCheckedForeground}" />
@@ -168,14 +161,14 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type ColorView}" TargetType="ColorView">
+        <!-- Alpha position should match CSS (and default slider order) instead of XAML/WinUI -->
+        <Setter Property="HexInputAlphaPosition" Value="Trailing" />
         <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
         <Setter Property="Width" Value="300" />
         <Setter Property="Height" Value="300" />
-        <Setter Property="Palette">
-            <FluentColorPalette />
-        </Setter>
+        <Setter Property="Palette" Value="{DynamicResource SemiColorPalette}" />
         <Setter Property="Template">
-            <ControlTemplate TargetType="{x:Type ColorView}">
+            <ControlTemplate TargetType="ColorView">
                 <Grid RowDefinitions="*,Auto">
                     <!--  Backgrounds  -->
                     <!--  TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}"  -->
@@ -197,7 +190,7 @@
                         Padding="0"
                         VerticalAlignment="Stretch"
                         HorizontalContentAlignment="Stretch"
-                        SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
+                        SelectedIndex="{TemplateBinding SelectedIndex, Mode=TwoWay}">
                         <TabControl.Styles>
                             <Style Selector="TabItem">
                                 <Setter Property="MinHeight" Value="32" />
@@ -232,11 +225,11 @@
                                     HorizontalAlignment="Center"
                                     VerticalAlignment="Stretch"
                                     AutomationProperties.Name="Third Component"
-                                    ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}"
+                                    ColorComponent="{Binding #ColorSpectrum.ThirdComponent}"
                                     ColorModel="Hsva"
-                                    HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
-                                    IsAlphaVisible="True"
-                                    IsPerceptive="False"
+                                    HsvColor="{Binding #ColorSpectrum.HsvColor}"
+                                    IsAlphaVisible="False"
+                                    IsPerceptive="True"
                                     IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                     Orientation="Vertical" />
                                 <ColorSpectrum
@@ -245,7 +238,7 @@
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Stretch"
                                     Components="{TemplateBinding ColorSpectrumComponents}"
-                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                     MaxHue="{TemplateBinding MaxHue}"
                                     MaxSaturation="{TemplateBinding MaxSaturation}"
                                     MaxValue="{TemplateBinding MaxValue}"
@@ -262,14 +255,10 @@
                                     AutomationProperties.Name="Alpha Component"
                                     ColorComponent="Alpha"
                                     ColorModel="Hsva"
-                                    HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
+                                    HsvColor="{Binding #ColorSpectrum.HsvColor}"
+                                    IsVisible="{TemplateBinding IsAlphaVisible}"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                     Orientation="Vertical">
-                                    <ColorSlider.IsVisible>
-                                        <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                        </MultiBinding>
-                                    </ColorSlider.IsVisible>
                                 </ColorSlider>
                             </Grid>
                         </TabItem>
@@ -286,11 +275,11 @@
                                 VerticalAlignment="Stretch"
                                 ItemContainerTheme="{StaticResource ColorViewPaletteListBoxItemTheme}"
                                 ItemsSource="{TemplateBinding PaletteColors}"
-                                SelectedItem="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DoNothingForNullConverter}, Mode=TwoWay}"
+                                SelectedItem="{TemplateBinding Color, Mode=TwoWay, Converter={StaticResource DoNothingForNullConverter}}"
                                 Theme="{StaticResource ColorViewPaletteListBoxTheme}"
                                 UseLayoutRounding="False">
                                 <ListBox.ItemTemplate>
-                                    <DataTemplate DataType="{x:Type Color}">
+                                    <DataTemplate DataType="Color">
                                         <Border
                                             HorizontalAlignment="Stretch"
                                             VerticalAlignment="Stretch"
@@ -322,6 +311,10 @@
                                 ColumnDefinitions="Auto,*"
                                 RowDefinitions="Auto,24,*,*,*,*,12"
                                 UseLayoutRounding="False">
+                                <Grid.Resources>
+                                    <Thickness x:Key="TextBoxContentPadding">8 0</Thickness>
+                                    <Thickness x:Key="TextBoxInnerLeftContentPadding">0 0 8 0</Thickness>
+                                </Grid.Resources>
                                 <Grid.Styles>
                                     <Style Selector="NumericUpDown">
                                         <Setter Property="InnerLeftContent">
@@ -351,9 +344,9 @@
                                                 Content="RGB"
                                                 CornerRadius="3,0,0,3"
                                                 IsChecked="{TemplateBinding ColorModel,
-                                                Converter={StaticResource EnumToBoolConverter},
-                                                ConverterParameter={x:Static ColorModel.Rgba},
-                                                Mode=TwoWay}"
+                                                    Converter={StaticResource EnumToBoolConverter},
+                                                    ConverterParameter={x:Static ColorModel.Rgba},
+                                                    Mode=TwoWay}"
                                                 Theme="{DynamicResource ColorViewRadioButton}" />
                                             <RadioButton
                                                 Name="HsvRadioButton"
@@ -363,9 +356,9 @@
                                                 Content="HSV"
                                                 CornerRadius="0,3,3,0"
                                                 IsChecked="{TemplateBinding ColorModel,
-                                                Converter={StaticResource EnumToBoolConverter},
-                                                ConverterParameter={x:Static ColorModel.Hsva},
-                                                Mode=TwoWay}"
+                                                    Converter={StaticResource EnumToBoolConverter},
+                                                    ConverterParameter={x:Static ColorModel.Hsva},
+                                                    Mode=TwoWay}"
                                                 Theme="{DynamicResource ColorViewRadioButton}" />
                                         </Grid>
                                     </Border>
@@ -390,11 +383,11 @@
                                     AllowSpin="True"
                                     Classes="Small"
                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}"
-                                    Maximum="{Binding Maximum, ElementName=Component1Slider}"
-                                    Minimum="{Binding Minimum, ElementName=Component1Slider}"
+                                    Maximum="{Binding #Component1Slider.Maximum}"
+                                    Minimum="{Binding #Component1Slider.Minimum}"
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
-                                    Value="{Binding Value, ElementName=Component1Slider}" />
+                                    Value="{Binding #Component1Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" />
                                 <ColorSlider
                                     Name="Component1Slider"
                                     Grid.Row="2"
@@ -403,7 +396,7 @@
                                     VerticalAlignment="Center"
                                     ColorComponent="Component1"
                                     ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
                                     IsVisible="{TemplateBinding IsComponentSliderVisible}"
@@ -420,11 +413,11 @@
                                     AllowSpin="True"
                                     Classes="Small"
                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}"
-                                    Maximum="{Binding Maximum, ElementName=Component2Slider}"
-                                    Minimum="{Binding Minimum, ElementName=Component2Slider}"
+                                    Maximum="{Binding #Component2Slider.Maximum}"
+                                    Minimum="{Binding #Component2Slider.Minimum}"
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
-                                    Value="{Binding Value, ElementName=Component2Slider}" />
+                                    Value="{Binding #Component2Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" />
                                 <ColorSlider
                                     Name="Component2Slider"
                                     Grid.Row="3"
@@ -433,7 +426,7 @@
                                     VerticalAlignment="Center"
                                     ColorComponent="Component2"
                                     ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
                                     IsVisible="{TemplateBinding IsComponentSliderVisible}"
@@ -450,11 +443,11 @@
                                     AllowSpin="True"
                                     Classes="Small"
                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}"
-                                    Maximum="{Binding Maximum, ElementName=Component3Slider}"
-                                    Minimum="{Binding Minimum, ElementName=Component3Slider}"
+                                    Maximum="{Binding #Component3Slider.Maximum}"
+                                    Minimum="{Binding #Component3Slider.Minimum}"
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
-                                    Value="{Binding Value, ElementName=Component3Slider}" />
+                                    Value="{Binding #Component3Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" />
                                 <ColorSlider
                                     Name="Component3Slider"
                                     Grid.Row="4"
@@ -463,7 +456,7 @@
                                     VerticalAlignment="Center"
                                     ColorComponent="Component3"
                                     ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
                                     IsVisible="{TemplateBinding IsComponentSliderVisible}"
@@ -480,15 +473,15 @@
                                     AllowSpin="True"
                                     Classes="Small"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
-                                    Maximum="{Binding Maximum, ElementName=AlphaComponentSlider}"
-                                    Minimum="{Binding Minimum, ElementName=AlphaComponentSlider}"
+                                    Maximum="{Binding #AlphaComponentSlider.Maximum}"
+                                    Minimum="{Binding #AlphaComponentSlider.Minimum}"
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
-                                    Value="{Binding Value, ElementName=AlphaComponentSlider}">
+                                    Value="{Binding #AlphaComponentSlider.Value,Converter={StaticResource DoNothingForNullConverter}}">
                                     <NumericUpDown.IsVisible>
                                         <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                            <Binding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <TemplateBinding Property="IsAlphaVisible" />
+                                            <TemplateBinding Property="IsComponentTextInputVisible" />
                                         </MultiBinding>
                                     </NumericUpDown.IsVisible>
                                 </NumericUpDown>
@@ -500,7 +493,7 @@
                                     VerticalAlignment="Center"
                                     ColorComponent="Alpha"
                                     ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
@@ -508,8 +501,8 @@
                                     TickFrequency="1">
                                     <ColorSlider.IsVisible>
                                         <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                            <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <TemplateBinding Property="IsAlphaVisible" />
+                                            <TemplateBinding Property="IsComponentSliderVisible" />
                                         </MultiBinding>
                                     </ColorSlider.IsVisible>
                                 </ColorSlider>
@@ -517,11 +510,11 @@
                         </TabItem>
                     </TabControl>
                     <!--  Previewer  -->
-                    <!--  Note that top/bottom margins have -5 to remove for drop shadow padding  -->
+                    <!-- Note that the drop shadow is allowed to extend past the control bounds -->
                     <ColorPreviewer
                         Grid.Row="1"
-                        Margin="12,-5,12,7"
-                        HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                        Margin="12,0,12,12"
+                        HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                         IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
                         IsVisible="{TemplateBinding IsColorPreviewVisible}" />
                 </Grid>
@@ -558,11 +551,12 @@
     </ControlTheme>
 
     <ControlTheme x:Key="SimpleColorView" TargetType="ColorView">
+        <Setter Property="HexInputAlphaPosition" Value="Trailing" />
         <Setter Property="Width" Value="280" />
         <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
         <Setter Property="ColorSpectrumComponents" Value="SaturationValue" />
         <Setter Property="Template">
-            <ControlTemplate TargetType="{x:Type ColorView}">
+            <ControlTemplate TargetType="ColorView">
                 <Grid>
                     <Grid.RowDefinitions>
                         <RowDefinition Height="*" MinHeight="280" />
@@ -579,6 +573,7 @@
                             Name="ColorSpectrum"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
+                            CornerRadius="8 8 0 0"
                             Components="{TemplateBinding ColorSpectrumComponents}"
                             HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                             MaxHue="{TemplateBinding MaxHue}"
@@ -602,7 +597,7 @@
                         Orientation="Horizontal" />
 
                     <ColorSlider
-                        x:Name="ColorSpectrumAlphaSlider"
+                        Name="ColorSpectrumAlphaSlider"
                         Grid.Row="2"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Center"
@@ -629,35 +624,43 @@
                             CornerRadius="4" />
                         <Panel
                             Name="PART_TextBoxPanel"
-                            Width="106"
+                            Width="116"
                             Margin="4 0 0 0"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Center">
                             <TextBox
                                 Name="PART_HexTextBox"
+                                AutomationProperties.Name="Hexadecimal Color"
                                 Classes="Small"
+                                CornerRadius="3 0 0 3"
                                 InnerLeftContent="#"
-                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
-                                Text="{TemplateBinding Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
-                                MaxLength="8" />
+                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter=Hex}"
+                                MaxLength="8">
+                                <TextBox.Resources>
+                                    <Thickness x:Key="TextBoxInnerLeftContentPadding">0 0 4 0</Thickness>
+                                </TextBox.Resources>
+                            </TextBox>
                             <TextBox
                                 Name="PART_RgbaTextBox"
                                 Classes="Small"
-                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Rgba}"
-                                Text="{TemplateBinding Color, Converter={StaticResource ColorToTextConverter}, Mode=TwoWay}" />
+                                CornerRadius="3 0 0 3"
+                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter={x:Static ColorModel.Rgba}}"
+                                Text="{TemplateBinding Color, Converter={semi:ColorToTextConverter}, Mode=TwoWay}" />
                             <TextBox
                                 Name="PART_HsvaTextBox"
                                 Classes="Small"
-                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
-                                Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
+                                CornerRadius="3 0 0 3"
+                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter={x:Static ColorModel.Hsva}}"
+                                Text="{TemplateBinding HsvColor, Converter={semi:HsvColorToTextConverter}, Mode=TwoWay}" />
                         </Panel>
 
                         <NumericUpDown
                             Name="AlphaComponentNumericUpDown"
-                            Width="70"
+                            Width="60"
                             HorizontalAlignment="Right"
                             VerticalAlignment="Center"
                             AllowSpin="True"
+                            CornerRadius="0"
                             Classes="Small"
                             IsEnabled="{TemplateBinding IsAlphaEnabled}"
                             Maximum="{Binding #ColorSpectrumAlphaSlider.Maximum}"
@@ -666,14 +669,21 @@
                             ShowButtonSpinner="False"
                             InnerRightContent="%"
                             IsVisible="{TemplateBinding IsAlphaVisible}"
-                            Value="{Binding #ColorSpectrumAlphaSlider.Value}" />
+                            Value="{Binding #ColorSpectrumAlphaSlider.Value,Converter={StaticResource DoNothingForNullConverter}}">
+                            <NumericUpDown.Resources>
+                                <Thickness x:Key="TextBoxContentPadding">12 0 4 0</Thickness>
+                                <Thickness x:Key="TextBoxInnerRightContentPadding">4 0 0 0</Thickness>
+                            </NumericUpDown.Resources>
+                        </NumericUpDown>
                         <ComboBox
                             Name="ColorModelComboBox"
                             Width="80"
+                            CornerRadius="0 3 3 0"
                             VerticalAlignment="Center"
                             Classes="Small"
                             SelectedValue="Hex">
-                            Hex<ColorModel>Rgba</ColorModel>
+                            <x:String>Hex</x:String>
+                            <ColorModel>Rgba</ColorModel>
                             <ColorModel>Hsva</ColorModel>
                         </ComboBox>
                     </StackPanel>

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

@@ -0,0 +1,17 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:converters="using:Avalonia.Controls.Converters"
+                    xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
+                    xmlns:globalization="using:System.Globalization">
+    <pc:ContrastBrushConverter x:Key="ContrastBrushConverter" />
+    <pc:AccentColorConverter x:Key="AccentColorConverter" />
+
+    <converters:ColorToDisplayNameConverter x:Key="ColorToDisplayNameConverter" />
+    <converters:DoNothingForNullConverter x:Key="DoNothingForNullConverter" />
+    <converters:ToBrushConverter x:Key="ToBrushConverter" />
+    <converters:ColorToHexConverter x:Key="ColorToHexConverter" AlphaPosition="Trailing" IsAlphaVisible="True" />
+
+    <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
+
+    <globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
+</ResourceDictionary>

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

@@ -2,6 +2,7 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <ResourceDictionary.MergedDictionaries>
+        <ResourceInclude Source="Converters.axaml" />
         <ResourceInclude Source="ColorPicker.axaml" />
         <ResourceInclude Source="ColorPreviewer.axaml" />
         <ResourceInclude Source="ColorSlider.axaml" />

src/Semi.Avalonia.ColorPicker/Converters/ColorToTextConverter.cs

@@ -3,19 +3,19 @@ using System.Globalization;
 using System.Linq;
 using Avalonia;
 using Avalonia.Data;
-using Avalonia.Data.Converters;
 using Avalonia.Media;
+using Irihi.Avalonia.Shared.Converters;
 
 namespace Semi.Avalonia.ColorPicker.Converters;
 
-public class ColorToTextConverter : IValueConverter
+public class ColorToTextConverter : MarkupValueConverter
 {
-    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    public override object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
         return value is Color color ? $"{color.R},{color.G},{color.B},{color.A}" : AvaloniaProperty.UnsetValue;
     }
 
-    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    public override object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
         if (value is not string str) return BindingOperations.DoNothing;
         var parts = str.Split(',');

src/Semi.Avalonia.ColorPicker/Converters/HsvColorToTextConverter.cs

@@ -3,21 +3,21 @@ using System.Globalization;
 using System.Linq;
 using Avalonia;
 using Avalonia.Data;
-using Avalonia.Data.Converters;
 using Avalonia.Media;
+using Irihi.Avalonia.Shared.Converters;
 
 namespace Semi.Avalonia.ColorPicker.Converters;
 
-public class HsvColorToTextConverter : IValueConverter
+public class HsvColorToTextConverter : MarkupValueConverter
 {
-    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    public override object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
         return value is HsvColor hsvColor
             ? $"{Math.Round(hsvColor.H)},{Math.Round(hsvColor.S * 100)},{Math.Round(hsvColor.V * 100)},{Math.Round(hsvColor.A * 100)}"
             : AvaloniaProperty.UnsetValue;
     }
 
-    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    public override object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
         if (value is not string str) return BindingOperations.DoNothing;
         var parts = str.Split(',');

src/Semi.Avalonia.ColorPicker/Converters/ToColorModel.cs

@@ -1,21 +0,0 @@
-using System;
-using System.Globalization;
-using Avalonia.Controls;
-using Avalonia.Data.Converters;
-
-namespace Semi.Avalonia.ColorPicker.Converters;
-
-public class ToColorModel : IValueConverter
-{
-    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
-    {
-        return parameter is "Hex" && value is "Hex" ||
-               parameter is "Rgba" && value is ColorModel.Rgba ||
-               parameter is "Hsva" && value is ColorModel.Hsva;
-    }
-
-    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
-    {
-        throw new NotImplementedException();
-    }
-}

src/Semi.Avalonia.ColorPicker/Index.axaml

@@ -3,6 +3,7 @@
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceInclude x:Key="Default" Source="Light.axaml" />
+                <ResourceInclude x:Key="Light" Source="Light.axaml" />
                 <ResourceInclude x:Key="Dark" Source="Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>

src/Semi.Avalonia.ColorPicker/Properties/AssemblyInfo.cs

@@ -1,3 +1,5 @@
 using Avalonia.Metadata;
 
-[assembly: XmlnsDefinition("https://irihi.tech/semi", "Semi.Avalonia.ColorPicker")]
+[assembly: XmlnsPrefix("https://irihi.tech/semi", "semi")]
+[assembly: XmlnsDefinition("https://irihi.tech/semi", "Semi.Avalonia.ColorPicker")]
+[assembly: XmlnsDefinition("https://irihi.tech/semi", "Semi.Avalonia.ColorPicker.Converters")]

src/Semi.Avalonia.ColorPicker/README.md

@@ -0,0 +1,50 @@
+# Semi.Avalonia.ColorPicker
+
+[![Semi Avalonia ColorPicker](https://img.shields.io/nuget/v/Semi.Avalonia.ColorPicker.svg?color=red&style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia.ColorPicker/)
+[![Semi Avalonia ColorPicker](https://img.shields.io/nuget/dt/Semi.Avalonia.ColorPicker.svg?style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia.ColorPicker/)
+
+Avalonia ColorPicker Theme inspired by Semi Design
+
+This package provides Semi Design theming for the Avalonia ColorPicker control.
+
+## Installation
+
+```bash
+dotnet add package Semi.Avalonia.ColorPicker
+```
+
+## Prerequisites
+
+This package requires the main Semi.Avalonia theme to be installed:
+
+```bash
+dotnet add package Semi.Avalonia
+```
+
+## Usage
+
+Include the ColorPicker theme in your application:
+
+```xaml
+<Application
+    ...
+    xmlns:semi="https://irihi.tech/semi">
+    <Application.Styles>
+        <semi:SemiTheme Locale="zh-CN" />
+        <semi:ColorPickerSemiTheme />
+    </Application.Styles>
+</Application>
+```
+
+## Resources
+
+- [Documentation](https://docs.irihi.tech/semi/)
+- [Repository](https://github.com/irihitech/Semi.Avalonia)
+- [Online Demo](https://irihitech.github.io/Semi.Avalonia/)
+- [Download Demo](https://github.com/irihitech/Semi.Avalonia/releases)
+
+## Credits
+
+[Semi Design](https://semi.design/)
+
+[Avalonia](https://github.com/AvaloniaUI/Avalonia)

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

@@ -1,18 +1,16 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
-    <Import Project="../Package.props"/>
-
     <PropertyGroup>
+        <TargetFrameworks>net8.0;net10.0</TargetFrameworks>
+        <Version>12.0.0</Version>
+        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 12.0.0</PackageReleaseNotes>
         <Title>Semi.Avalonia.ColorPicker</Title>
-        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 11.3.7</PackageReleaseNotes>
-    </PropertyGroup>
-
-    <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
-        <IsAotCompatible>true</IsAotCompatible>
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Controls.ColorPicker"/>
+        <PackageReference Include="Irihi.Avalonia.Shared"/>
+        <None Include="README.md" Pack="true" PackagePath="\"/>
     </ItemGroup>
 
 </Project>

src/Semi.Avalonia.ColorPicker/SemiColorDarkPalette.cs

@@ -1,12 +1,12 @@
 using Avalonia.Controls;
 using Avalonia.Media;
-using Avalonia.Utilities;
+using Irihi.Avalonia.Shared.Helpers;
 
 namespace Semi.Avalonia.ColorPicker;
 
-public class SemiColorDarkPalette: IColorPalette
+public class SemiColorDarkPalette : IColorPalette
 {
-    private static readonly Color[,] Colors = new Color[,]
+    private static readonly Color[,] Colors = new[,]
     {
         {
             //Red
@@ -216,16 +216,30 @@ public class SemiColorDarkPalette: IColorPalette
             Color.FromUInt32(0xFFE6E8EA),
             Color.FromUInt32(0xFFF9F9F9),
         },
+        {
+            //AIPurple
+            Color.FromUInt32(0xFF3A1770),
+            Color.FromUInt32(0xFF532394),
+            Color.FromUInt32(0xFF6F31B8),
+            Color.FromUInt32(0xFF8D41DB),
+            Color.FromUInt32(0xFFA744FF),
+            Color.FromUInt32(0xFFC375FF),
+            Color.FromUInt32(0xFFD598FF),
+            Color.FromUInt32(0xFFE5BAFF),
+            Color.FromUInt32(0xFFF3DDFF),
+            Color.FromUInt32(0xFFFBF3FF),
+        },
     };
+
     public Color GetColor(int colorIndex, int shadeIndex)
     {
         return Colors[
-            MathUtilities.Clamp(colorIndex, 0, ColorCount - 1),
-            MathUtilities.Clamp(shadeIndex, 0, ShadeCount - 1)
+            MathHelpers.SafeClamp(colorIndex, 0, ColorCount - 1),
+            MathHelpers.SafeClamp(shadeIndex, 0, ShadeCount - 1)
         ];
     }
 
     public int ColorCount => Colors.GetLength(0);
 
     public int ShadeCount => Colors.GetLength(1);
-}
+}

src/Semi.Avalonia.ColorPicker/SemiColorLightPalette.cs

@@ -1,12 +1,12 @@
 using Avalonia.Controls;
 using Avalonia.Media;
-using Avalonia.Utilities;
+using Irihi.Avalonia.Shared.Helpers;
 
 namespace Semi.Avalonia.ColorPicker;
 
-public class SemiColorLightPalette: IColorPalette
+public class SemiColorLightPalette : IColorPalette
 {
-    private static readonly Color[,] Colors = new Color[,]
+    private static readonly Color[,] Colors = new[,]
     {
         {
             //Red
@@ -216,12 +216,26 @@ public class SemiColorLightPalette: IColorPalette
             Color.FromUInt32(0xFF2E3238),
             Color.FromUInt32(0xFF1C1F23),
         },
+        {
+            //AIPurple
+            Color.FromUInt32(0xFFF8EDFF),
+            Color.FromUInt32(0xFFF2DAFF),
+            Color.FromUInt32(0xFFE3B5FF),
+            Color.FromUInt32(0xFFD191FF),
+            Color.FromUInt32(0xFFBD6CFF),
+            Color.FromUInt32(0xFFA647FF),
+            Color.FromUInt32(0xFF8636DB),
+            Color.FromUInt32(0xFF6928B8),
+            Color.FromUInt32(0xFF4E1C94),
+            Color.FromUInt32(0xFF361270),
+        },
     };
+
     public Color GetColor(int colorIndex, int shadeIndex)
     {
         return Colors[
-            MathUtilities.Clamp(colorIndex, 0, ColorCount - 1),
-            MathUtilities.Clamp(shadeIndex, 0, ShadeCount - 1)
+            MathHelpers.SafeClamp(colorIndex, 0, ColorCount - 1),
+            MathHelpers.SafeClamp(shadeIndex, 0, ShadeCount - 1)
         ];
     }
 

src/Semi.Avalonia.DataGrid/DataGrid.axaml

@@ -86,7 +86,7 @@
                         <Rectangle
                             Name="PART_RightGridLine"
                             Grid.Column="1"
-                            Width="1"
+                            Width="{DynamicResource DataGridGridLineThickness}"
                             VerticalAlignment="Stretch"
                             Fill="{DynamicResource DataGridLineBrush}" />
                     </Grid>
@@ -145,7 +145,7 @@
                         <Rectangle
                             Name="VerticalSeparator"
                             Grid.Column="1"
-                            Width="1"
+                            Width="{DynamicResource DataGridGridLineThickness}"
                             VerticalAlignment="Stretch"
                             Fill="{TemplateBinding SeparatorBrush}"
                             IsVisible="{TemplateBinding AreSeparatorsVisible}" />
@@ -209,7 +209,7 @@
                     <Rectangle
                         Grid.Row="0"
                         Grid.RowSpan="2"
-                        Height="1"
+                        Height="{DynamicResource DataGridGridLineThickness}"
                         VerticalAlignment="Bottom"
                         Fill="{DynamicResource DataGridLineBrush}"
                         StrokeThickness="1" />
@@ -250,7 +250,7 @@
                         Grid.Row="2"
                         Grid.Column="0"
                         Grid.ColumnSpan="2"
-                        Height="1"
+                        Height="{DynamicResource DataGridGridLineThickness}"
                         Margin="1,0,1,0"
                         HorizontalAlignment="Stretch"
                         Fill="{TemplateBinding SeparatorBrush}"
@@ -315,7 +315,7 @@
                             Name="PART_BottomGridLine"
                             Grid.Row="2"
                             Grid.Column="1"
-                            Height="1"
+                            Height="{DynamicResource DataGridGridLineThickness}"
                             HorizontalAlignment="Stretch" />
                     </DataGridFrozenGrid>
                 </Border>
@@ -452,7 +452,7 @@
                         Grid.Row="1"
                         Grid.Column="0"
                         Grid.ColumnSpan="5"
-                        Height="1"
+                        Height="{DynamicResource DataGridGridLineThickness}"
                         Fill="{DynamicResource DataGridLineBrush}" />
                 </DataGridFrozenGrid>
             </ControlTemplate>
@@ -498,7 +498,7 @@
                             Grid.Row="0"
                             Grid.Column="0"
                             Grid.ColumnSpan="3"
-                            Height="1"
+                            Height="{DynamicResource DataGridGridLineThickness}"
                             VerticalAlignment="Bottom"
                             Fill="{DynamicResource DataGridLineBrush}" />
 

src/Semi.Avalonia.DataGrid/DataGridSemiTheme.axaml

@@ -6,6 +6,7 @@
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceInclude x:Key="Default" Source="Light.axaml" />
+                <ResourceInclude x:Key="Light" Source="Light.axaml" />
                 <ResourceInclude x:Key="Dark" Source="Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>

src/Semi.Avalonia.DataGrid/Index.axaml

@@ -3,6 +3,7 @@
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceInclude x:Key="Default" Source="Light.axaml" />
+                <ResourceInclude x:Key="Light" Source="Light.axaml" />
                 <ResourceInclude x:Key="Dark" Source="Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>