feat: update window decoration styles to use transparent backgrounds.

Integrate font management for Linux demo (#822 )
* feat: integrate font management by adding Semi.Avalonia.Demo.Fonts project. * chore: test on ubuntu. * feat: add linux options. * feat: update theme settings and adjust window decorations. * feat: add font to DRM project. * misc: net8.0->net10.0
2026-06-07 10:28:21 +08:00 · 2026-05-21 15:14:24 +08:00 · 2026-05-18 21:16:03 +08:00 · 2026-04-30 14:53:38 +08:00 · 2026-04-30 14:37:51 +08:00 · 2026-04-28 11:10:34 +08:00
179 changed files with 4485 additions and 2378 deletions
@@ -0,0 +1,240 @@
+# editorconfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Default settings:
+# A newline ending every file
+# Use 4 spaces as indentation
+[*]
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+
+# C# files
+[*.cs]
+# New line preferences
+csharp_new_line_before_open_brace = all
+csharp_new_line_before_else = true
+csharp_new_line_before_catch = true
+csharp_new_line_before_finally = true
+csharp_new_line_before_members_in_object_initializers = true
+csharp_new_line_before_members_in_anonymous_types = true
+csharp_new_line_between_query_expression_clauses = true
+# trim_trailing_whitespace = true
+
+# Indentation preferences
+csharp_indent_block_contents = true
+csharp_indent_braces = false
+csharp_indent_case_contents = true
+csharp_indent_switch_labels = true
+csharp_indent_labels = one_less_than_current
+
+# avoid this. unless absolutely necessary
+dotnet_style_qualification_for_field = false:suggestion
+dotnet_style_qualification_for_property = false:suggestion
+dotnet_style_qualification_for_method = false:suggestion
+dotnet_style_qualification_for_event = false:suggestion
+
+# prefer var
+csharp_style_var_for_built_in_types = true
+csharp_style_var_when_type_is_apparent = true
+csharp_style_var_elsewhere = true:suggestion
+
+# use language keywords instead of BCL types
+dotnet_style_predefined_type_for_locals_parameters_members = true:suggestion
+dotnet_style_predefined_type_for_member_access = true:suggestion
+
+# name all constant fields using PascalCase
+dotnet_naming_rule.constant_fields_should_be_pascal_case.severity = suggestion
+dotnet_naming_rule.constant_fields_should_be_pascal_case.symbols  = constant_fields
+dotnet_naming_rule.constant_fields_should_be_pascal_case.style    = pascal_case_style
+
+dotnet_naming_symbols.constant_fields.applicable_kinds   = field
+dotnet_naming_symbols.constant_fields.required_modifiers = const
+
+dotnet_naming_style.pascal_case_style.capitalization = pascal_case
+
+# private static fields should have s_ prefix
+dotnet_naming_rule.private_static_fields_should_have_prefix.severity = suggestion
+dotnet_naming_rule.private_static_fields_should_have_prefix.symbols  = private_static_fields
+dotnet_naming_rule.private_static_fields_should_have_prefix.style    = private_static_prefix_style
+
+dotnet_naming_symbols.private_static_fields.applicable_kinds   = field
+dotnet_naming_symbols.private_static_fields.required_modifiers = static
+dotnet_naming_symbols.private_static_fields.applicable_accessibilities = private
+
+dotnet_naming_style.private_static_prefix_style.required_prefix = s_
+dotnet_naming_style.private_static_prefix_style.capitalization = camel_case
+
+# internal and private fields should be _camelCase
+dotnet_naming_rule.camel_case_for_private_internal_fields.severity = suggestion
+dotnet_naming_rule.camel_case_for_private_internal_fields.symbols  = private_internal_fields
+dotnet_naming_rule.camel_case_for_private_internal_fields.style    = camel_case_underscore_style
+
+dotnet_naming_symbols.private_internal_fields.applicable_kinds = field
+dotnet_naming_symbols.private_internal_fields.applicable_accessibilities = private, internal
+
+dotnet_naming_style.camel_case_underscore_style.required_prefix = _
+dotnet_naming_style.camel_case_underscore_style.capitalization = camel_case
+
+# use accessibility modifiers
+dotnet_style_require_accessibility_modifiers = for_non_interface_members:suggestion
+
+# Code style defaults
+dotnet_sort_system_directives_first = true
+csharp_preserve_single_line_blocks = true
+csharp_preserve_single_line_statements = false
+
+# Expression-level preferences
+dotnet_style_object_initializer = true:suggestion
+dotnet_style_collection_initializer = true:suggestion
+dotnet_style_explicit_tuple_names = true:suggestion
+dotnet_style_coalesce_expression = true:suggestion
+dotnet_style_null_propagation = true:suggestion
+
+# Expression-bodied members
+csharp_style_expression_bodied_methods = false:none
+csharp_style_expression_bodied_constructors = false:none
+csharp_style_expression_bodied_operators = false:none
+csharp_style_expression_bodied_properties = true:none
+csharp_style_expression_bodied_indexers = true:none
+csharp_style_expression_bodied_accessors = true:none
+
+# Pattern matching
+csharp_style_pattern_matching_over_is_with_cast_check = true:suggestion
+csharp_style_pattern_matching_over_as_with_null_check = true:suggestion
+csharp_style_inlined_variable_declaration = true:suggestion
+
+# Null checking preferences
+csharp_style_throw_expression = true:suggestion
+csharp_style_conditional_delegate_call = true:suggestion
+
+# Space preferences
+csharp_space_after_cast = false
+csharp_space_after_colon_in_inheritance_clause = true
+csharp_space_after_comma = true
+csharp_space_after_dot = false
+csharp_space_after_keywords_in_control_flow_statements = true
+csharp_space_after_semicolon_in_for_statement = true
+csharp_space_around_binary_operators = before_and_after
+csharp_space_around_declaration_statements = false
+csharp_space_before_colon_in_inheritance_clause = true
+csharp_space_before_comma = false
+csharp_space_before_dot = false
+csharp_space_before_open_square_brackets = false
+csharp_space_before_semicolon_in_for_statement = false
+csharp_space_between_empty_square_brackets = false
+csharp_space_between_method_call_empty_parameter_list_parentheses = false
+csharp_space_between_method_call_name_and_opening_parenthesis = false
+csharp_space_between_method_call_parameter_list_parentheses = false
+csharp_space_between_method_declaration_empty_parameter_list_parentheses = false
+csharp_space_between_method_declaration_name_and_open_parenthesis = false
+csharp_space_between_method_declaration_parameter_list_parentheses = false
+csharp_space_between_parentheses = false
+csharp_space_between_square_brackets = false
+space_within_single_line_array_initializer_braces = true
+
+#Net Analyzer
+dotnet_analyzer_diagnostic.category-Performance.severity = none #error - Uncomment when all violations are fixed.
+
+# CA1018: Mark attributes with AttributeUsageAttribute
+dotnet_diagnostic.CA1018.severity = warning
+# CA1304: Specify CultureInfo
+dotnet_diagnostic.CA1304.severity = warning
+# CA1802: Use literals where appropriate
+dotnet_diagnostic.CA1802.severity = warning
+# CA1813: Avoid unsealed attributes
+dotnet_diagnostic.CA1813.severity = warning
+# CA1815: Override equals and operator equals on value types
+dotnet_diagnostic.CA1815.severity = warning
+# CA1820: Test for empty strings using string length
+dotnet_diagnostic.CA1820.severity = warning
+# CA1821: Remove empty finalizers
+dotnet_diagnostic.CA1821.severity = warning
+# CA1822: Mark members as static
+dotnet_diagnostic.CA1822.severity = suggestion
+dotnet_code_quality.CA1822.api_surface = private, internal
+# CA1823: Avoid unused private fields
+dotnet_diagnostic.CA1823.severity = warning
+# CA1825: Avoid zero-length array allocations
+dotnet_diagnostic.CA1825.severity = warning
+# CA1826: Use property instead of Linq Enumerable method
+dotnet_diagnostic.CA1826.severity = suggestion
+# CA1827: Do not use Count/LongCount when Any can be used
+dotnet_diagnostic.CA1827.severity = warning
+# CA1828: Do not use CountAsync/LongCountAsync when AnyAsync can be used
+dotnet_diagnostic.CA1828.severity = warning
+# CA1829: Use Length/Count property instead of Enumerable.Count method
+dotnet_diagnostic.CA1829.severity = warning
+#CA1847: Use string.Contains(char) instead of string.Contains(string) with single characters
+dotnet_diagnostic.CA1847.severity = warning
+# CA1851: Possible multiple enumerations of IEnumerable collection
+dotnet_diagnostic.CA1851.severity = warning
+#CA1854: Prefer the IDictionary.TryGetValue(TKey, out TValue) method
+dotnet_diagnostic.CA1854.severity = warning
+#CA2211:Non-constant fields should not be visible
+dotnet_diagnostic.CA2211.severity = warning
+
+# Wrapping preferences
+csharp_wrap_before_ternary_opsigns = false
+
+# Avalonia PublicAnalyzer preferences
+dotnet_diagnostic.AVP1000.severity = warning
+dotnet_diagnostic.AVP1001.severity = warning
+dotnet_diagnostic.AVP1002.severity = warning
+dotnet_diagnostic.AVP1010.severity = warning
+dotnet_diagnostic.AVP1011.severity = warning
+dotnet_diagnostic.AVP1012.severity = warning
+dotnet_diagnostic.AVP1013.severity = warning
+dotnet_diagnostic.AVP1020.severity = warning
+dotnet_diagnostic.AVP1021.severity = warning
+dotnet_diagnostic.AVP1022.severity = warning
+dotnet_diagnostic.AVP1030.severity = warning
+dotnet_diagnostic.AVP1031.severity = warning
+dotnet_diagnostic.AVP1032.severity = warning
+dotnet_diagnostic.AVP1040.severity = warning
+dotnet_diagnostic.AVA2001.severity = warning
+
+# Xaml files
+[*.{xaml,axaml}]
+indent_size = 4
+# DuplicateSetterError
+avalonia_xaml_diagnostic.AVLN2203.severity = warning
+# StyleInMergedDictionaries
+avalonia_xaml_diagnostic.AVLN2204.severity = warning
+# RequiredTemplatePartMissing
+avalonia_xaml_diagnostic.AVLN2205.severity = warning
+# OptionalTemplatePartMissing
+avalonia_xaml_diagnostic.AVLN2206.severity = info
+# TemplatePartWrongType
+avalonia_xaml_diagnostic.AVLN2207.severity = warning
+# ItemContainerInsideTemplate
+avalonia_xaml_diagnostic.AVLN2208.severity = warning
+# Obsolete
+avalonia_xaml_diagnostic.AVLN5001.severity = warning
+
+# Xml project files
+[*.{csproj,vcxproj,vcxproj.filters,proj,nativeproj,locproj}]
+indent_size = 2
+
+# Xml build files
+[*.builds]
+indent_size = 2
+
+# Xml files
+[*.{xml,stylecop,resx,ruleset}]
+indent_size = 2
+
+# Xml config files
+[*.{props,targets,config,nuspec}]
+indent_size = 2
+
+[*.json]
+indent_size = 2
+
+# Shell scripts
+[*.sh]
+end_of_line = lf
+[*.{cmd,bat}]
+end_of_line = crlf
@@ -0,0 +1,92 @@
+# Git Commit Message Convention
+
+This project follows the [Conventional Commits](https://www.conventionalcommits.org/) specification for commit messages.
+
+## Format
+
+```
+<type>[optional scope]: <description>
+
+[optional body]
+
+[optional footer(s)]
+```
+
+## Types
+
+| Type | Description |
+|------|-------------|
+| `feat` | A new feature |
+| `fix` | A bug fix |
+| `docs` | Documentation only changes |
+| `style` | Changes that do not affect the meaning of the code (formatting, missing semicolons, etc.) |
+| `refactor` | A code change that neither fixes a bug nor adds a feature |
+| `perf` | A code change that improves performance |
+| `test` | Adding missing tests or correcting existing tests |
+| `build` | Changes that affect the build system or external dependencies |
+| `ci` | Changes to CI configuration files and scripts |
+| `chore` | Other changes that don't modify source or test files |
+| `revert` | Reverts a previous commit |
+
+## Rules
+
+1. **Limit the subject line to 50 characters** (72 character hard limit)
+2. **Use the imperative mood** in the subject line (e.g., "add feature" not "added feature")
+3. **Do not end the subject line with a period**
+4. **Use lowercase** for the description (e.g., "add feature" not "Add feature")
+5. **Separate subject from body with a blank line**
+6. **Wrap the body at 72 characters**
+7. **Use the body to explain what and why**, not how
+8. **Reference issues and pull requests** in the footer
+
+## Scope
+
+The scope should be the name of the package or area affected (e.g., `button`, `datepicker`, `theme`, `demo`).
+
+## Examples
+
+### Simple commit
+
+```
+feat(button): add loading state support
+```
+
+### Commit with body
+
+```
+fix(datepicker): correct month navigation overflow
+
+When navigating past December, the month index wrapped to a
+negative value instead of rolling over to January of the next year.
+```
+
+### Commit with breaking change
+
+```
+feat(theme)!: rename SemiColorPrimary to SemiColorBrand
+
+BREAKING CHANGE: The token SemiColorPrimary has been renamed to
+SemiColorBrand. Update all references in your custom theme files.
+```
+
+### Commit referencing an issue
+
+```
+fix(textbox): placeholder not visible in dark mode
+
+Closes #123
+```
+
+## Breaking Changes
+
+Breaking changes must be indicated by appending a `!` after the type/scope, or by including a `BREAKING CHANGE:` footer. Both methods may be used together.
+
+## Revert Commits
+
+When reverting a previous commit, use the `revert` type and reference the reverted commit SHA in the footer:
+
+```
+revert: feat(button): add loading state support
+
+Revert commit a1b2c3d.
+```
@@ -11,7 +11,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6

      - name: Setup dotnet
        uses: actions/setup-dotnet@v5
@@ -32,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
@@ -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@v5
+        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
@@ -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@v5
+        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
@@ -75,11 +75,11 @@ jobs:
    runs-on: windows-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v5
+        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@v5
+        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@v5
+        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@v5
+        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@v5
+        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@v5
+        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@v5
+        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@v5
+        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,7 +211,7 @@ jobs:
    runs-on: windows-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
      - name: Install Android workload
        run: dotnet workload install android
      - name: Restore Dependencies
@@ -219,7 +219,7 @@ jobs:
      - name: Publish Android
        run: dotnet publish demo/Semi.Avalonia.Demo.Android -c Release -f net10.0-android --no-restore -o publish /p:RuntimeIdentifier=android-arm64
      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
        with:
          name: android-arm64
          path: publish/*Signed.apk
@@ -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@v3
        if: startsWith(github.ref, 'refs/tags/') || github.event_name == 'workflow_dispatch'
        with:
          generate_release_notes: true
@@ -0,0 +1,25 @@
+name: Remove old artifacts
+
+on:
+  schedule:
+    # Every day at 1am
+    - cron: '0 1 * * *'
+  workflow_dispatch:
+
+jobs:
+  remove-old-artifacts:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    # For private repos
+    permissions:
+      actions: write
+
+    steps:
+    - name: Remove old artifacts
+      uses: c-hive/gha-remove-artifacts@v1
+      with:
+        age: '15 days' # '<number> <unit>', e.g. 5 days, 2 years, 90 seconds, parsed by Moment.js
+        # Optional inputs
+        skip-tags: true
+        skip-recent: 5
@@ -0,0 +1,26 @@
+<Project>
+  <PropertyGroup>
+    <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
+    <CentralPackageVersionOverrideEnabled>true</CentralPackageVersionOverrideEnabled>
+    <AvaloniaVersion>12.0.1</AvaloniaVersion>
+    <DataGridVersion>12.0.0</DataGridVersion>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <!--src-->
+    <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"/>
+    <!--demo-->
+    <PackageVersion Include="Avalonia.Android" Version="$(AvaloniaVersion)"/>
+    <PackageVersion Include="Avalonia.Browser" Version="$(AvaloniaVersion)"/>
+    <PackageVersion Include="Avalonia.Desktop" Version="$(AvaloniaVersion)"/>
+    <PackageVersion Include="Avalonia.iOS" Version="$(AvaloniaVersion)"/>
+    <PackageVersion Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)"/>
+    <PackageVersion Include="AvaloniaUI.DiagnosticsSupport" Version="2.2.1"/>
+    <PackageVersion Include="CommunityToolkit.Mvvm" Version="8.4.2"/>
+    <PackageVersion Include="Xamarin.AndroidX.Core.SplashScreen" Version="1.2.0.2"/>
+  </ItemGroup>
+</Project>
@@ -3,6 +3,7 @@
        <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.Fonts/Semi.Avalonia.Demo.Fonts.csproj"/>
        <Project Path="demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj"/>
        <Project Path="demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj"/>
    </Folder>
@@ -12,13 +13,18 @@
        <File Path=".github/workflows/pack.yml"/>
        <File Path=".github/workflows/publish.yml"/>
        <File Path=".github/workflows/release-tag.yml"/>
+        <File Path=".github/workflows/remove-old-artifacts.yml"/>
+    </Folder>
+    <Folder Name="/Solution Items/">
+        <File Path="Directory.Packages.props"/>
+        <File Path="global.json"/>
+        <File Path="Nuget.Config"/>
    </Folder>
    <Folder Name="/Solution Items/Demo/">
-        <File Path="demo/Directory.Packages.props"/>
+        <File Path="demo/Directory.Build.targets"/>
        <File Path="demo/global.json"/>
    </Folder>
-    <Folder Name="/Solution Items/Package/">
-        <File Path="src/Directory.Packages.props"/>
+    <Folder Name="/Solution Items/Src/">
        <File Path="src/Directory.Build.props"/>
    </Folder>
    <Project Path="src/Semi.Avalonia.ColorPicker/Semi.Avalonia.ColorPicker.csproj"/>
@@ -0,0 +1,17 @@
+<Project>
+  <PropertyGroup>
+    <AvaloniaVersion>12.0.2</AvaloniaVersion>
+    <DataGridVersion>12.0.0</DataGridVersion>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Update="Avalonia" VersionOverride="$(AvaloniaVersion)"/>
+    <PackageReference Update="Avalonia.Android" VersionOverride="$(AvaloniaVersion)"/>
+    <PackageReference Update="Avalonia.Browser" VersionOverride="$(AvaloniaVersion)"/>
+    <PackageReference Update="Avalonia.Desktop" VersionOverride="$(AvaloniaVersion)"/>
+    <PackageReference Update="Avalonia.iOS" VersionOverride="$(AvaloniaVersion)"/>
+    <PackageReference Update="Avalonia.LinuxFramebuffer" VersionOverride="$(AvaloniaVersion)"/>
+    <PackageReference Update="Avalonia.Controls.ColorPicker" VersionOverride="$(AvaloniaVersion)"/>
+    <PackageReference Update="Avalonia.Controls.DataGrid" VersionOverride="$(DataGridVersion)"/>
+  </ItemGroup>
+</Project>
@@ -1,27 +0,0 @@
-<Project>
-    <PropertyGroup>
-        <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
-        <AvaloniaVersion>12.0.0-preview2</AvaloniaVersion>
-        <DataGridVersion>11.3.10</DataGridVersion>
-        <SkiaSharpVersion>3.119.1</SkiaSharpVersion>
-    </PropertyGroup>
-    <ItemGroup>
-        <PackageVersion Include="Avalonia" Version="$(AvaloniaVersion)"/>
-        <PackageVersion Include="AvaloniaUI.DiagnosticsSupport" Version="2.2.0-beta3"/>
-        <PackageVersion Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
-        <PackageVersion Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)"/>
-        <PackageVersion Include="Avalonia.iOS" Version="$(AvaloniaVersion)" />
-        <PackageVersion Include="Avalonia.Browser" Version="$(AvaloniaVersion)" />
-        <PackageVersion Include="Avalonia.Android" Version="$(AvaloniaVersion)" />
-        <PackageVersion Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
-        <PackageVersion Include="Avalonia.Controls.DataGrid" Version="$(DataGridVersion)"/>
-
-        <PackageVersion Include="SkiaSharp" Version="$(SkiaSharpVersion)"/>
-        <PackageVersion Include="SkiaSharp.NativeAssets.WebAssembly" Version="$(SkiaSharpVersion)"/>
-
-        <PackageVersion Include="Xamarin.AndroidX.Core.SplashScreen" Version="1.2.0"/>
-
-        <PackageVersion Include="CommunityToolkit.Mvvm" Version="8.4.0"/>
-        <PackageVersion Include="Irihi.Avalonia.Shared" Version="0.3.1"/>
-    </ItemGroup>
-</Project>
@@ -2,6 +2,7 @@
 using Android.Runtime;
 using Avalonia;
 using Avalonia.Android;
+using Semi.Avalonia.Demo.Fonts;

 namespace Semi.Avalonia.Demo.Android;

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

    <ItemGroup>
        <AndroidResource Include="Icon.png" Link="Resources\drawable\Icon.png"/>
-        <AvaloniaResource Include="..\Fonts\*" Link="Assets\Fonts\%(Filename)%(Extension)" />
    </ItemGroup>

    <ItemGroup>
@@ -31,5 +30,6 @@

    <ItemGroup>
        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj"/>
+        <ProjectReference Include="..\Semi.Avalonia.Demo.Fonts\Semi.Avalonia.Demo.Fonts.csproj"/>
    </ItemGroup>
-</Project>
+</Project>
@@ -2,8 +2,10 @@
 using Avalonia;
 using Avalonia.Dialogs;
 using Avalonia.Media;
+using Semi.Avalonia.Demo.Fonts;

 namespace Semi.Avalonia.Demo.Desktop;
+#pragma warning disable CA1416, AVALONIA_X11_CSD, AVALONIA_X11_FORCE_CSD

 sealed class Program
 {
@@ -11,24 +13,28 @@ sealed class Program
    // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
    // yet and stuff might break.
    [STAThread]
-    public static void Main(string[] args) => BuildAvaloniaApp()
-        .With(new FontManagerOptions
-        {
-            FontFallbacks =
-            [
-                new FontFallback
-                {
-                    FontFamily = new FontFamily("Microsoft YaHei")
-                }
-            ]
-        })
-        .StartWithClassicDesktopLifetime(args);
+    public static void Main(string[] args)
+    {
+        var appBuilder = BuildAvaloniaApp();
+        if (!OperatingSystem.IsLinux())
+            appBuilder.With(new FontManagerOptions
+            {
+                FontFallbacks = [new FontFallback { FontFamily = new FontFamily("Microsoft YaHei") }]
+            });
+
+        appBuilder.StartWithClassicDesktopLifetime(args);
+    }

    // Avalonia configuration, don't remove; also used by visual designer.
    public static AppBuilder BuildAvaloniaApp()
-        => AppBuilder.Configure<App>()
+    {
+        var appBuilder = AppBuilder.Configure<App>()
            .UseManagedSystemDialogs()
            .UsePlatformDetect()
            .With(new Win32PlatformOptions())
+            .With(new X11PlatformOptions { EnableDrawnDecorations = true })
            .LogToTrace();
-}
+        if (OperatingSystem.IsLinux()) appBuilder.WithSourceHanSansCNFont();
+        return appBuilder;
+    }
+}
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
    <PropertyGroup>
        <OutputType>WinExe</OutputType>
-        <TargetFramework>net8.0</TargetFramework>
+        <TargetFramework>net10.0</TargetFramework>
        <Nullable>enable</Nullable>
        <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
        <ApplicationIcon>..\Semi.Avalonia.Demo\Assets\irihi.ico</ApplicationIcon>
@@ -28,5 +28,6 @@

    <ItemGroup>
        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj"/>
+        <ProjectReference Include="..\Semi.Avalonia.Demo.Fonts\Semi.Avalonia.Demo.Fonts.csproj"/>
    </ItemGroup>
 </Project>
@@ -4,8 +4,10 @@ using System.Linq;
 using System.Threading;
 using Avalonia;
 using Avalonia.Dialogs;
+using Semi.Avalonia.Demo.Fonts;

 namespace Semi.Avalonia.Demo.Drm;
+#pragma warning disable CA1416, AVALONIA_X11_CSD, AVALONIA_X11_FORCE_CSD

 sealed class Program
 {
@@ -40,17 +42,17 @@ sealed class Program
        => AppBuilder.Configure<App>()
            .UseManagedSystemDialogs()
            .UsePlatformDetect()
-            .With(new Win32PlatformOptions())
+            .With(new X11PlatformOptions { EnableDrawnDecorations = true })
+            .WithSourceHanSansCNFont()
            .LogToTrace();

    private static void SilenceConsole()
    {
        new Thread(() =>
-            {
-                Console.CursorVisible = false;
-                while (true)
-                    Console.ReadKey(true);
-            })
-            { IsBackground = true }.Start();
+        {
+            Console.CursorVisible = false;
+            while (true)
+                Console.ReadKey(true);
+        }) { IsBackground = true }.Start();
    }
-}
+}
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
    <PropertyGroup>
        <OutputType>WinExe</OutputType>
-        <TargetFramework>net8.0</TargetFramework>
+        <TargetFramework>net10.0</TargetFramework>
        <Nullable>enable</Nullable>
        <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
        <ApplicationIcon>..\Semi.Avalonia.Demo\Assets\irihi.ico</ApplicationIcon>
@@ -29,5 +29,6 @@

    <ItemGroup>
        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj"/>
+        <ProjectReference Include="..\Semi.Avalonia.Demo.Fonts\Semi.Avalonia.Demo.Fonts.csproj"/>
    </ItemGroup>
 </Project>
@@ -0,0 +1,16 @@
+using Avalonia;
+using Avalonia.Media;
+
+namespace Semi.Avalonia.Demo.Fonts;
+
+public static class AvaloniaAppBuilderExtensions
+{
+    public static AppBuilder WithSourceHanSansCNFont(this AppBuilder builder)
+    {
+        const string uri = "avares://Semi.Avalonia.Demo.Fonts/Assets#Source Han Sans CN";
+        return builder.With(new FontManagerOptions
+        {
+            DefaultFamilyName = uri, FontFallbacks = [new FontFallback { FontFamily = new FontFamily(uri) }]
+        });
+    }
+}
@@ -0,0 +1,16 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <TargetFramework>net10.0</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <AvaloniaResource Include="Assets\**" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Avalonia"/>
+  </ItemGroup>
+</Project>
@@ -1,16 +0,0 @@
-using Avalonia;
-using Avalonia.Media;
-
-namespace Semi.Avalonia.Demo.Web;
-
-public static class AvaloniaAppBuilderExtensions
-{
-    private static string DefaultFontFamily => "avares://Semi.Avalonia.Demo.Web/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) }]
-        });
-}
@@ -2,6 +2,7 @@
 using System.Threading.Tasks;
 using Avalonia;
 using Avalonia.Browser;
+using Semi.Avalonia.Demo.Fonts;

 [assembly: SupportedOSPlatform("browser")]

@@ -15,4 +16,4 @@ internal sealed partial class Program

    public static AppBuilder BuildAvaloniaApp()
        => AppBuilder.Configure<App>();
-}
+}
@@ -6,17 +6,12 @@
        <Nullable>enable</Nullable>
    </PropertyGroup>

-    <ItemGroup>
-        <AvaloniaResource Include="..\Fonts\*" Link="Assets\Fonts\%(Filename)%(Extension)" />
-    </ItemGroup>
-
    <ItemGroup>
        <PackageReference Include="Avalonia.Browser"/>
-        <PackageReference Include="SkiaSharp"/>
-        <PackageReference Include="SkiaSharp.NativeAssets.WebAssembly"/>
    </ItemGroup>

    <ItemGroup>
        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj"/>
+        <ProjectReference Include="..\Semi.Avalonia.Demo.Fonts\Semi.Avalonia.Demo.Fonts.csproj"/>
    </ItemGroup>
 </Project>
@@ -5,12 +5,13 @@
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:semi="https://irihi.tech/semi"
    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    RequestedThemeVariant="Default"
    x:DataType="vm:ApplicationViewModel">
    <Application.Styles>
        <semi:SemiTheme Locale="zh-CN" />
        <semi:SemiPopupAnimations />
        <semi:ColorPickerSemiTheme />
-        <!-- <semi:DataGridSemiTheme /> -->
+        <semi:DataGridSemiTheme />
        <!-- <semi:TreeDataGridSemiTheme /> -->
    </Application.Styles>
    <Application.Resources>
@@ -28,6 +29,15 @@
                CommandParameter="{Binding $self.Header}" />
        </NativeMenu>
    </NativeMenu.Menu>
+    <NativeDock.Menu>
+        <NativeMenu>
+            <NativeMenuItem Header="New Window" />
+            <NativeMenuItemSeparator />
+            <NativeMenuItem Header="Show Main Window" />
+            <NativeMenuItemSeparator />
+            <NativeMenuItem Header="Add Dock Menu Item" />
+        </NativeMenu>
+    </NativeDock.Menu>
    <TrayIcon.Icons>
        <TrayIcons>
            <TrayIcon
@@ -49,4 +59,4 @@
            </TrayIcon>
        </TrayIcons>
    </TrayIcon.Icons>
-</Application>
+</Application>
@@ -1,6 +1,6 @@
+using System;
 using Avalonia;
 using Avalonia.Controls.ApplicationLifetimes;
-using Avalonia.Data.Core.Plugins;
 using Avalonia.Markup.Xaml;
 using Semi.Avalonia.Demo.ViewModels;
 using Semi.Avalonia.Demo.Views;
@@ -15,25 +15,29 @@ public partial class App : Application
 #if DEBUG
        this.AttachDeveloperTools();
 #endif
-        this.DataContext = new ApplicationViewModel();
+        DataContext = new ApplicationViewModel();
+        if (OperatingSystem.IsLinux())
+        {
+            Resources.Add("DefaultFontFamily", null);
+        }
    }

    public override void OnFrameworkInitializationCompleted()
    {
-        switch (ApplicationLifetime)
+        if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
        {
-            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);
-                desktop.MainWindow = new MainWindow();
-                break;
-            case ISingleViewApplicationLifetime singleView:
-                singleView.MainView = new MainView();
-                break;
+            desktop.MainWindow = new MainWindow { DataContext = new MainViewModel() };
+        }
+        else if (ApplicationLifetime is IActivityApplicationLifetime applicationLifetime)
+        {
+            applicationLifetime.MainViewFactory = () => new MainView { DataContext = new MainViewModel() };
+        }
+        else if (ApplicationLifetime is ISingleViewApplicationLifetime singleViewPlatform)
+        {
+            singleViewPlatform.MainView = new MainView { DataContext = new MainViewModel() };
        }

        this.RegisterFollowSystemTheme();
        base.OnFrameworkInitializationCompleted();
    }
-}
+}
@@ -1,28 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Globalization;
-using Avalonia;
-using Avalonia.Data.Converters;
-using Avalonia.Metadata;
-
-namespace Semi.Avalonia.Demo.Converters;
-
-public class FileIconConverter : IMultiValueConverter
-{
-    [Content] public IDictionary<string, object?> Items { get; } = new Dictionary<string, object?>();
-
-    public object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
-    {
-        if (values[0] is bool isDirectory && values[1] is bool isOpen)
-        {
-            if (!isDirectory)
-            {
-                return Items["file"];
-            }
-
-            return isOpen ? Items["folderOpen"] : Items["folderClosed"];
-        }
-
-        return AvaloniaProperty.UnsetValue;
-    }
-}
@@ -29,40 +29,40 @@

        <AutoCompleteBox
            PlaceholderText="Please select a State"
-            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+            ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
        <AutoCompleteBox
            Classes="Large"
-            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+            ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
        <AutoCompleteBox
            Classes="Small"
-            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+            ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
        <AutoCompleteBox
            Classes="Bordered"
-            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+            ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
        <AutoCompleteBox
            IsEnabled="False"
            PlaceholderText="Disabled"
-            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+            ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
        <AutoCompleteBox
            InnerLeftContent="https://"
            InnerRightContent=".com"
-            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+            ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />

        <StackPanel Orientation="Horizontal">
            <AutoCompleteBox
                Width="100"
                Classes="Large"
                PlaceholderText="Large"
-                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+                ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
            <AutoCompleteBox
                Width="100"
                PlaceholderText="Default"
-                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+                ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
            <AutoCompleteBox
                Width="100"
                Classes="Small"
                PlaceholderText="Small"
-                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+                ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
        </StackPanel>

        <StackPanel Orientation="Horizontal">
@@ -70,17 +70,17 @@
                Width="100"
                IsEnabled="False"
                PlaceholderText="Disabled"
-                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+                ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
            <AutoCompleteBox
                Width="100"
                Classes="Bordered"
                PlaceholderText="Bordered"
-                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+                ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
            <AutoCompleteBox
                Width="100"
                Classes="Bordered"
                IsEnabled="False"
-                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+                ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
        </StackPanel>

    </StackPanel>
@@ -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>
@@ -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>
@@ -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}";
+    }
+}
@@ -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>
@@ -58,18 +58,18 @@
                    IsOpen="{Binding #isop.IsChecked}"
                    IsSticky="{Binding #isst.IsChecked}"
                    Width="{Binding #ws.Value}">
-                    <AppBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
-                    <AppBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
-                    <AppBarSeparator />
-                    <AppBarToggleButton Label="Bold" Icon="{DynamicResource SemiIconBold}" />
-                    <AppBarToggleButton Label="Italic" Icon="{DynamicResource SemiIconItalic}" />
-                    <AppBarToggleButton IsChecked="True" IsEnabled="False" Label="Underline" Icon="{DynamicResource SemiIconUnderline}" />
-                    <AppBarSeparator />
-                    <AppBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
-                    <AppBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
-                    <AppBarButton Label="Print" Icon="{DynamicResource SemiIconPrint}" />
-                    <AppBarSeparator />
-                    <AppBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
+                    <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>

@@ -79,12 +79,12 @@
                    <TextBlock Text="CommandBar — With Secondary Commands (overflow)" />
                </GroupBox.Header>
                <CommandBar>
-                    <AppBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
-                    <AppBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
-                    <AppBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
+                    <CommandBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
+                    <CommandBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
+                    <CommandBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
                    <CommandBar.SecondaryCommands>
-                        <AppBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
-                        <AppBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
+                        <CommandBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
+                        <CommandBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
                    </CommandBar.SecondaryCommands>
                </CommandBar>
            </GroupBox>
@@ -0,0 +1,179 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.DataGridDemo"
+    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;assembly=Semi.Avalonia.Demo"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:DataType="vm:DataGridDemoViewModel"
+    mc:Ignorable="d">
+    <TabControl>
+        <TabItem Header="DataGrid">
+            <Grid RowDefinitions="Auto, *">
+                <StackPanel Grid.Row="0" Orientation="Horizontal">
+                    <ToggleSwitch Content="Enable" Name="enable" IsChecked="True" />
+                    <ToggleSwitch Content="Inset Content" Name="inset" />
+                    <ToggleSwitch Content="ScrollBar Auto Hide" Name="autohide" />
+                </StackPanel>
+                <DataGrid Grid.Row="1"
+                          Margin="8"
+                          CanUserReorderColumns="True"
+                          CanUserResizeColumns="True"
+                          CanUserSortColumns="True"
+                          HeadersVisibility="All"
+                          IsReadOnly="True"
+                          Classes.InsetContent="{Binding #inset.IsChecked}"
+                          ScrollViewer.AllowAutoHide="{Binding #autohide.IsChecked}"
+                          IsEnabled="{Binding #enable.IsChecked}"
+                          ItemsSource="{Binding GridData1}">
+                    <DataGrid.Columns>
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:Song"
+                            Binding="{Binding Title}"
+                            Header="Title" />
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:Song"
+                            Binding="{Binding Artist}"
+                            Header="Artist" />
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:Song"
+                            Binding="{Binding Album}"
+                            Header="Album" />
+                        <DataGridTemplateColumn Header="Duration" SortMemberPath="Duration">
+                            <DataGridTemplateColumn.CellTemplate>
+                                <DataTemplate>
+                                    <TextBlock
+                                        Margin="8,0,0,0"
+                                        VerticalAlignment="Center"
+                                        Text="{Binding Duration}" />
+                                </DataTemplate>
+                            </DataGridTemplateColumn.CellTemplate>
+                        </DataGridTemplateColumn>
+                    </DataGrid.Columns>
+
+                </DataGrid>
+
+            </Grid>
+        </TabItem>
+        <TabItem Header="Grouping">
+            <DataGrid
+                Margin="8"
+                CanUserReorderColumns="True"
+                CanUserResizeColumns="True"
+                CanUserSortColumns="True"
+                HeadersVisibility="All"
+                IsReadOnly="True"
+                ItemsSource="{Binding GridData2}">
+                <DataGrid.Columns>
+                    <DataGridTextColumn
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Title}"
+                        Header="Title" />
+                    <DataGridTextColumn
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Artist}"
+                        Header="Artist" />
+                    <DataGridTextColumn
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Album}"
+                        Header="Album" />
+                    <DataGridTemplateColumn
+                        x:DataType="vm:Song"
+                        Header="Duration"
+                        SortMemberPath="Duration">
+                        <DataGridTemplateColumn.CellTemplate>
+                            <DataTemplate x:DataType="vm:Song">
+                                <TextBlock
+                                    Margin="8,0,0,0"
+                                    VerticalAlignment="Center"
+                                    Text="{Binding Duration}" />
+                            </DataTemplate>
+                        </DataGridTemplateColumn.CellTemplate>
+                    </DataGridTemplateColumn>
+                </DataGrid.Columns>
+            </DataGrid>
+        </TabItem>
+        <TabItem Name="EditableTab" Header="Editable">
+            <Grid Margin="8" RowDefinitions="Auto,*,Auto">
+                <StackPanel
+                    Grid.Row="0"
+                    Orientation="Horizontal"
+                    Spacing="4">
+                    <TextBlock VerticalAlignment="Center" Text="FontSize:" />
+                    <Slider
+                        Name="FontSizeSlider"
+                        Width="100"
+                        VerticalAlignment="Center"
+                        Maximum="30"
+                        Minimum="5"
+                        Value="14" />
+                    <CheckBox
+                        Name="IsThreeStateCheckBox"
+                        Content="IsThreeState"
+                        IsChecked="False" />
+                </StackPanel>
+                <DataGrid
+                    Grid.Row="1"
+                    Margin="8"
+                    ItemsSource="{Binding GridData3}">
+                    <DataGrid.Columns>
+                        <DataGridCheckBoxColumn
+                            Width="2*"
+                            Binding="{Binding IsSelected}"
+                            Header="Select"
+                            IsThreeState="{Binding #IsThreeStateCheckBox.IsChecked, Mode=OneWay}" />
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:SongViewModel"
+                            Binding="{Binding Title}"
+                            FontSize="{Binding #FontSizeSlider.Value, Mode=OneWay}"
+                            Header="Title" />
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:SongViewModel"
+                            Binding="{Binding Artist}"
+                            Header="Artist" />
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:SongViewModel"
+                            Binding="{Binding Album}"
+                            Header="Album" />
+                        <DataGridTemplateColumn Width="2*" Header="Comments">
+                            <DataGridTemplateColumn.CellTemplate>
+                                <DataTemplate>
+                                    <TextBlock
+                                        HorizontalAlignment="Center"
+                                        VerticalAlignment="Center"
+                                        Text="{Binding CountOfComment}" />
+                                </DataTemplate>
+                            </DataGridTemplateColumn.CellTemplate>
+                            <DataGridTemplateColumn.CellEditingTemplate>
+                                <DataTemplate>
+                                    <NumericUpDown
+                                        HorizontalAlignment="Stretch"
+                                        FormatString="N0"
+                                        Minimum="0"
+                                        Value="{Binding CountOfComment}" />
+                                </DataTemplate>
+                            </DataGridTemplateColumn.CellEditingTemplate>
+                        </DataGridTemplateColumn>
+                    </DataGrid.Columns>
+                </DataGrid>
+                <Button
+                    Grid.Row="2"
+                    Margin="12,0,12,12"
+                    HorizontalAlignment="Right"
+                    Command="{Binding AddCommand}"
+                    Content="Add" />
+            </Grid>
+        </TabItem>
+    </TabControl>
+</UserControl>
@@ -0,0 +1,15 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class DataGridDemo : UserControl
+{
+    public DataGridDemo()
+    {
+        InitializeComponent();
+        DataContext = new DataGridDemoViewModel();
+    }
+}
@@ -10,63 +10,107 @@
    <DockPanel>
        <ScrollViewer DockPanel.Dock="Right" Width="260">
            <StackPanel Margin="12" Spacing="8">
-                <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
-                           Foreground="{DynamicResource SemiColorText0}" />
+                <TextBlock
+                    Theme="{DynamicResource TitleTextBlock}"
+                    Classes="H4"
+                    Text="Configuration" />

-                <Button Content="Toggle Drawer"
-                        HorizontalAlignment="Stretch"
-                        Click="OnToggleDrawer" />
-
-                <Separator />
+                <CheckBox Name="ToggleDrawerCheck"
+                          Content="Toggle Drawer" />

                <CheckBox Name="GestureCheck"
                          Content="Gesture Enabled"
-                          IsChecked="True"
-                          IsCheckedChanged="OnGestureChanged" />
+                          IsChecked="True" />

-                <Separator />
+                <TextBlock Text="Behavior" FontSize="12" />
+                <ComboBox
+                    Name="BehaviorComboBox"
+                    HorizontalAlignment="Stretch"
+                    SelectedIndex="0">
+                    <DrawerBehavior>Auto</DrawerBehavior>
+                    <DrawerBehavior>Flyout</DrawerBehavior>
+                    <DrawerBehavior>Locked</DrawerBehavior>
+                    <DrawerBehavior>Disabled</DrawerBehavior>
+                </ComboBox>

-                <TextBlock Text="Status" FontWeight="SemiBold" FontSize="14" />
-                <TextBlock Name="StatusText"
-                           Text="Drawer: Closed"
-                           Opacity="0.7"
-                           TextWrapping="Wrap" />
+                <TextBlock Text="Layout" FontSize="12" />
+                <ComboBox
+                    Name="LayoutComboBox"
+                    HorizontalAlignment="Stretch"
+                    SelectedIndex="0">
+                    <DrawerLayoutBehavior>Overlay</DrawerLayoutBehavior>
+                    <DrawerLayoutBehavior>Split</DrawerLayoutBehavior>
+                    <DrawerLayoutBehavior>CompactOverlay</DrawerLayoutBehavior>
+                    <DrawerLayoutBehavior>CompactInline</DrawerLayoutBehavior>
+                </ComboBox>
+
+                <TextBlock Text="Placement" FontSize="12" />
+                <ComboBox
+                    Name="PlacementComboBox"
+                    HorizontalAlignment="Stretch"
+                    SelectedIndex="0">
+                    <DrawerPlacement>Left</DrawerPlacement>
+                    <DrawerPlacement>Right</DrawerPlacement>
+                    <DrawerPlacement>Top</DrawerPlacement>
+                    <DrawerPlacement>Bottom</DrawerPlacement>
+                </ComboBox>
+
+                <TextBlock Text="Compact Drawer Length" FontSize="12" />
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <Slider Name="CompactDrawerLengthSlider"
+                            Minimum="0" Maximum="250" Value="80"
+                            TickFrequency="1"
+                            IsSnapToTickEnabled="True"
+                            Width="150" />
+                    <TextBlock Text="{Binding #CompactDrawerLengthSlider.Value}" />
+                </StackPanel>
+                <TextBlock Text="Drawer Length" FontSize="12" />
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <Slider Name="DrawerLengthSlider"
+                            Minimum="150" Maximum="400" Value="260"
+                            TickFrequency="1"
+                            IsSnapToTickEnabled="True"
+                            Width="150" />
+                    <TextBlock Text="{Binding #DrawerLengthSlider.Value}" />
+                </StackPanel>
            </StackPanel>
        </ScrollViewer>

-        <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
+        <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBorder}" />

-        <Border Margin="12"
-                BorderBrush="{DynamicResource SemiColorBorder}"
-                BorderThickness="1"
-                CornerRadius="6"
-                ClipToBounds="True">
-            <DrawerPage Name="DemoDrawer"
-                        Header="First Look"
-                        DrawerLength="250">
-                <DrawerPage.DrawerHeader>
-                    <Border Padding="16" Background="{DynamicResource SemiColorPrimary}">
-                        <TextBlock Text="Menu" FontSize="18" FontWeight="SemiBold" Foreground="{DynamicResource SemiColorText0}" />
-                    </Border>
-                </DrawerPage.DrawerHeader>
-                <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>
-        </Border>
+        <DrawerPage Name="DemoDrawer"
+                    Margin="12"
+                    Header="First Look"
+                    IsOpen="{Binding #ToggleDrawerCheck.IsChecked}"
+                    IsGestureEnabled="{Binding #GestureCheck.IsChecked}"
+                    DrawerBehavior="{Binding #BehaviorComboBox.SelectedItem}"
+                    DrawerLayoutBehavior="{Binding #LayoutComboBox.SelectedItem}"
+                    DrawerPlacement="{Binding #PlacementComboBox.SelectedItem}"
+                    CompactDrawerLength="{Binding #CompactDrawerLengthSlider.Value}"
+                    DrawerLength="{Binding #DrawerLengthSlider.Value}">
+            <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>
+</UserControl>
@@ -1,8 +1,7 @@
-using System;
+using System.Linq;
 using Avalonia.Controls;
-using Avalonia.Interactivity;
+using Avalonia.Input.GestureRecognizers;
 using Avalonia.Layout;
-using Avalonia.Media;

 namespace Semi.Avalonia.Demo.Pages;

@@ -11,32 +10,7 @@ public partial class DrawerPageDemo : UserControl
    public DrawerPageDemo()
    {
        InitializeComponent();
-    }
-
-    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;
+        EnableMouseSwipeGesture(DemoDrawer);
    }

    private void OnMenuSelectionChanged(object? sender, SelectionChangedEventArgs e)
@@ -52,7 +26,6 @@ public partial class DrawerPageDemo : UserControl
                    FontSize = 16,
                    HorizontalAlignment = HorizontalAlignment.Center,
                    VerticalAlignment = VerticalAlignment.Center,
-                    Foreground = Brushes.Black,
                },
                HorizontalContentAlignment = HorizontalAlignment.Stretch,
                VerticalContentAlignment = VerticalAlignment.Stretch
@@ -61,8 +34,12 @@ public partial class DrawerPageDemo : UserControl
        }
    }

-    private void UpdateStatus()
+    private static void EnableMouseSwipeGesture(Control control)
    {
-        StatusText.Text = $"Drawer: {(DemoDrawer.IsOpen ? "Open" : "Closed")}";
+        var recognizer = control.GestureRecognizers
+            .OfType<SwipeGestureRecognizer>()
+            .FirstOrDefault();
+
+        recognizer?.IsMouseEnabled = true;
    }
-}
+}
@@ -0,0 +1,327 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+             xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+             xmlns:cvt="clr-namespace:Semi.Avalonia.Demo.Converters"
+             xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+             mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="1450"
+             x:DataType="vm:HighContrastDemoViewModel"
+             x:Class="Semi.Avalonia.Demo.Pages.HighContrastDemo">
+    <Design.DataContext>
+        <vm:HighContrastDemoViewModel />
+    </Design.DataContext>
+    <SplitView
+        Name="splitView"
+        CompactPaneLength="50"
+        DisplayMode="CompactInline"
+        IsPaneOpen="{Binding #toggle.IsChecked, Mode=TwoWay}"
+        OpenPaneLength="300"
+        PanePlacement="Right">
+        <SplitView.Pane>
+            <StackPanel>
+                <ToggleSwitch
+                    Name="toggle"
+                    HorizontalAlignment="Right"
+                    IsChecked="True"
+                    Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                    Content="{StaticResource SemiIconSidebar}" />
+                <Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
+                    <Panel>
+                        <TextBlock
+                            IsVisible="{Binding SelectedColorResource, Converter={x:Static ObjectConverters.IsNull}}"
+                            Text="Click on Color to Check Details"
+                            TextWrapping="Wrap" />
+                        <controls:ColorDetailControl
+                            Background="{Binding SelectedColorResource.Brush}"
+                            IsVisible="{Binding SelectedColorResource, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            ResourceKey="{Binding SelectedColorResource.ResourceKey}"
+                            ResourceName="{Binding SelectedColorResource.ResourceKey}" />
+                    </Panel>
+                </Border>
+            </StackPanel>
+        </SplitView.Pane>
+        <SplitView.Content>
+            <ScrollViewer>
+                <StackPanel Spacing="10">
+                    <TextBlock Text="Theme Preview" FontWeight="SemiBold" />
+                    <ListBox
+                        Theme="{StaticResource PureCardRadioGroupListBox}"
+                        ItemsSource="{Binding ThemeVariants}"
+                        SelectedItem="{Binding SelectedThemeVariant}">
+                        <ListBox.ItemsPanel>
+                            <ItemsPanelTemplate>
+                                <WrapPanel Orientation="Horizontal" />
+                            </ItemsPanelTemplate>
+                        </ListBox.ItemsPanel>
+                        <ListBox.ItemTemplate>
+                            <DataTemplate>
+                                <StackPanel HorizontalAlignment="Left" Spacing="5" MinWidth="200">
+                                    <ThemeVariantScope RequestedThemeVariant="{Binding}">
+                                        <Border
+                                            Padding="5 25 5 5"
+                                            HorizontalAlignment="Left"
+                                            Background="{DynamicResource WindowColor}"
+                                            BorderBrush="{DynamicResource WindowTextColor}"
+                                            BorderThickness="1"
+                                            CornerRadius="3">
+                                            <StackPanel Spacing="10">
+                                                <StackPanel Orientation="Horizontal" Spacing="50">
+                                                    <StackPanel Spacing="5">
+                                                        <TextBlock
+                                                            FontSize="50"
+                                                            Text="Aa" />
+                                                        <StackPanel Orientation="Horizontal" Spacing="3">
+                                                            <StackPanel.Styles>
+                                                                <Style Selector="Border">
+                                                                    <Setter Property="BorderThickness" Value="1" />
+                                                                    <Setter Property="BorderBrush" Value="{DynamicResource WindowTextColor}" />
+                                                                    <Setter Property="CornerRadius" Value="5" />
+                                                                    <Setter Property="Width" Value="10" />
+                                                                    <Setter Property="Height" Value="{Binding $self.Width}" />
+                                                                </Style>
+                                                            </StackPanel.Styles>
+                                                            <Border Background="{DynamicResource WindowColor}" />
+                                                            <Border Background="{DynamicResource HotlightColor}" />
+                                                            <Border Background="{DynamicResource GrayTextColor}" />
+                                                            <Border Background="{DynamicResource HighlightTextColor}" />
+                                                            <Border Background="{DynamicResource HighlightColor}" />
+                                                        </StackPanel>
+                                                    </StackPanel>
+                                                    <Border
+                                                        BorderThickness="1"
+                                                        BorderBrush="{DynamicResource WindowTextColor}"
+                                                        CornerRadius="3"
+                                                        Padding="8">
+                                                        <Panel>
+                                                            <StackPanel Spacing="5">
+                                                                <Border
+                                                                    Width="50"
+                                                                    Height="1"
+                                                                    Background="{DynamicResource WindowTextColor}" />
+                                                                <Border
+                                                                    Height="1"
+                                                                    Background="{DynamicResource WindowTextColor}" />
+                                                                <Border
+                                                                    Height="1"
+                                                                    Background="{DynamicResource WindowTextColor}" />
+                                                            </StackPanel>
+                                                            <StackPanel
+                                                                HorizontalAlignment="Right"
+                                                                VerticalAlignment="Bottom"
+                                                                Orientation="Horizontal"
+                                                                Spacing="2">
+                                                                <Border
+                                                                    Width="20"
+                                                                    Height="5"
+                                                                    Background="{DynamicResource HighlightColor}"
+                                                                    CornerRadius="1" />
+                                                                <Border
+                                                                    Width="20"
+                                                                    Height="5"
+                                                                    BorderThickness="1"
+                                                                    BorderBrush="{DynamicResource ButtonTextColor}"
+                                                                    CornerRadius="1" />
+                                                            </StackPanel>
+                                                        </Panel>
+                                                    </Border>
+                                                </StackPanel>
+                                                <Border
+                                                    Height="1"
+                                                    Background="{DynamicResource WindowTextColor}" />
+                                            </StackPanel>
+                                        </Border>
+                                    </ThemeVariantScope>
+                                    <TextBlock Text="{Binding}" FontWeight="SemiBold" />
+                                </StackPanel>
+                            </DataTemplate>
+                        </ListBox.ItemTemplate>
+                    </ListBox>
+
+                    <ThemeVariantScope
+                        MinWidth="400"
+                        RequestedThemeVariant="{Binding SelectedThemeVariant}">
+                        <Border Padding="10" Background="{DynamicResource WindowColor}">
+                            <StackPanel Spacing="16">
+                                <StackPanel.Styles>
+                                    <Style Selector="TextBlock">
+                                        <Setter Property="HorizontalAlignment" Value="Left" />
+                                        <Setter Property="VerticalAlignment" Value="Center" />
+                                        <Setter Property="FontWeight" Value="SemiBold" />
+                                    </Style>
+                                    <Style Selector="controls|ColorItemControl.ColorBlock">
+                                        <Setter Property="Width" Value="44" />
+                                        <Setter Property="Height" Value="{Binding $self.Width}" />
+                                        <Setter Property="HorizontalAlignment" Value="Right" />
+                                        <Setter Property="BorderThickness" Value="1" />
+                                        <Setter Property="BorderBrush" Value="{DynamicResource WindowTextColor}" />
+                                        <Setter Property="CornerRadius" Value="3" />
+                                    </Style>
+                                </StackPanel.Styles>
+                                <Panel>
+                                    <TextBlock
+                                        Foreground="{DynamicResource WindowTextColor}"
+                                        Text="Background" />
+                                    <controls:ColorItemControl
+                                        Classes="ColorBlock"
+                                        DataContext="{Binding ColorResources[0]}"
+                                        Background="{DynamicResource  WindowColor}" />
+                                </Panel>
+                                <Panel>
+                                    <TextBlock
+                                        Foreground="{DynamicResource WindowTextColor}"
+                                        Text="Text" />
+                                    <controls:ColorItemControl
+                                        Classes="ColorBlock"
+                                        DataContext="{Binding ColorResources[1]}"
+                                        Background="{DynamicResource  WindowTextColor}" />
+                                </Panel>
+                                <Panel>
+                                    <TextBlock
+                                        Foreground="{DynamicResource HotlightColor}"
+                                        TextDecorations="Underline"
+                                        Text="Hyperlink" />
+                                    <controls:ColorItemControl
+                                        Classes="ColorBlock"
+                                        DataContext="{Binding ColorResources[2]}"
+                                        Background="{DynamicResource  HotlightColor}" />
+                                </Panel>
+                                <Panel>
+                                    <TextBlock
+                                        Foreground="{DynamicResource GrayTextColor}"
+                                        Text="Inactive Text" />
+                                    <controls:ColorItemControl
+                                        Classes="ColorBlock"
+                                        DataContext="{Binding ColorResources[3]}"
+                                        Background="{DynamicResource  GrayTextColor}" />
+                                </Panel>
+                                <Panel>
+                                    <TextBlock
+                                        Foreground="{DynamicResource HighlightTextColor}"
+                                        Background="{DynamicResource HighlightColor}"
+                                        Text="Selected text" />
+                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="4">
+                                        <controls:ColorItemControl
+                                            Classes="ColorBlock"
+                                            DataContext="{Binding ColorResources[4]}"
+                                            Background="{DynamicResource  HighlightTextColor}" />
+                                        <controls:ColorItemControl
+                                            Classes="ColorBlock"
+                                            DataContext="{Binding ColorResources[5]}"
+                                            Background="{DynamicResource  HighlightColor}" />
+                                    </StackPanel>
+                                </Panel>
+                                <Panel>
+                                    <Border
+                                        HorizontalAlignment="Left"
+                                        VerticalAlignment="Center"
+                                        BorderBrush="{DynamicResource ButtonTextColor}"
+                                        Background="{DynamicResource ButtonFaceColor}"
+                                        BorderThickness="2"
+                                        CornerRadius="3">
+                                        <TextBlock
+                                            Foreground="{DynamicResource ButtonTextColor}"
+                                            Padding="16 6"
+                                            Text="Button text" />
+                                    </Border>
+                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="4">
+                                        <controls:ColorItemControl
+                                            Classes="ColorBlock"
+                                            DataContext="{Binding ColorResources[6]}"
+                                            Background="{DynamicResource  ButtonTextColor}" />
+                                        <controls:ColorItemControl
+                                            Classes="ColorBlock"
+                                            DataContext="{Binding ColorResources[7]}"
+                                            Background="{DynamicResource  ButtonFaceColor}" />
+                                    </StackPanel>
+                                </Panel>
+                            </StackPanel>
+                        </Border>
+                    </ThemeVariantScope>
+
+                    <DataGrid
+                        HorizontalAlignment="Left"
+                        CanUserSortColumns="False"
+                        AutoGenerateColumns="False"
+                        ItemsSource="{Binding ColorResources}"
+                        GridLinesVisibility="All"
+                        BorderBrush="{DynamicResource SemiColorBorder}"
+                        BorderThickness="1"
+                        Padding="5">
+                        <DataGrid.Columns>
+                            <DataGridTemplateColumn Header="Color">
+                                <DataGridTemplateColumn.CellTemplate>
+                                    <DataTemplate>
+                                        <controls:ColorItemControl
+                                            Width="40"
+                                            Height="20"
+                                            CornerRadius="3"
+                                            Background="{Binding Brush}" />
+                                    </DataTemplate>
+                                </DataGridTemplateColumn.CellTemplate>
+                            </DataGridTemplateColumn>
+
+                            <DataGridTemplateColumn Header="ResourceKey">
+                                <DataGridTemplateColumn.CellTemplate>
+                                    <DataTemplate>
+                                        <SelectableTextBlock
+                                            Margin="12 0"
+                                            VerticalAlignment="Center"
+                                            Text="{Binding ResourceKey}" />
+                                    </DataTemplate>
+                                </DataGridTemplateColumn.CellTemplate>
+                            </DataGridTemplateColumn>
+
+                            <DataGridTemplateColumn Header="Hex">
+                                <DataGridTemplateColumn.CellTemplate>
+                                    <DataTemplate>
+                                        <SelectableTextBlock
+                                            Margin="12 0"
+                                            VerticalAlignment="Center"
+                                            Text="{Binding Brush,
+                                                Converter={x:Static cvt:ColorConverter.ToHex},ConverterParameter={x:False}}" />
+                                    </DataTemplate>
+                                </DataGridTemplateColumn.CellTemplate>
+                            </DataGridTemplateColumn>
+
+                            <DataGridTemplateColumn Header="Description">
+                                <DataGridTemplateColumn.CellTemplate>
+                                    <DataTemplate>
+                                        <SelectableTextBlock
+                                            Margin="12 0"
+                                            VerticalAlignment="Center"
+                                            Text="{Binding Description}" />
+                                    </DataTemplate>
+                                </DataGridTemplateColumn.CellTemplate>
+                            </DataGridTemplateColumn>
+
+                            <DataGridTemplateColumn Header="Pair With">
+                                <DataGridTemplateColumn.CellTemplate>
+                                    <DataTemplate>
+                                        <SelectableTextBlock
+                                            Margin="12 0"
+                                            VerticalAlignment="Center"
+                                            Text="{Binding PairWith}" />
+                                    </DataTemplate>
+                                </DataGridTemplateColumn.CellTemplate>
+                            </DataGridTemplateColumn>
+
+                            <DataGridTemplateColumn Width="100" Header="CopyText">
+                                <DataGridTemplateColumn.CellTemplate>
+                                    <DataTemplate DataType="vm:ColorResource">
+                                        <Button
+                                            Command="{Binding $parent[pages:HighContrastDemo].Copy}"
+                                            CommandParameter="{Binding CopyText}"
+                                            Theme="{DynamicResource  IconBorderlessButton}"
+                                            Content="{StaticResource SemiIconCopy}" />
+                                    </DataTemplate>
+                                </DataGridTemplateColumn.CellTemplate>
+                            </DataGridTemplateColumn>
+                        </DataGrid.Columns>
+                    </DataGrid>
+                </StackPanel>
+            </ScrollViewer>
+        </SplitView.Content>
+    </SplitView>
+</UserControl>
@@ -0,0 +1,25 @@
+using System.Threading.Tasks;
+using Avalonia.Controls;
+using Avalonia.Input.Platform;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class HighContrastDemo : UserControl
+{
+    public HighContrastDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new HighContrastDemoViewModel();
+    }
+
+    public async Task Copy(object? o)
+    {
+        if (o is null) return;
+        var toplevel = TopLevel.GetTopLevel(this);
+        if (toplevel?.Clipboard is { } c)
+        {
+            await c.SetTextAsync(o.ToString());
+        }
+    }
+}
@@ -48,6 +48,7 @@
                               Text="Current: Home"
                               Opacity="0.7"
                               TextWrapping="Wrap" />
+                    <ToggleSwitch Content="Large" Name="large" />
                </StackPanel>
            </ScrollViewer>

@@ -58,7 +59,9 @@
                    BorderThickness="1"
                    CornerRadius="6"
                    ClipToBounds="True">
-                <NavigationPage Name="DemoNav" />
+                <NavigationPage 
+                    Name="DemoNav" 
+                    Classes.Large="{Binding #large.IsChecked}" />
            </Border>
        </DockPanel>
    </ScrollViewer>
@@ -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>
@@ -12,14 +12,16 @@ public partial class PaletteDemo : UserControl
    public PaletteDemo()
    {
        InitializeComponent();
-        this.DataContext = new PaletteDemoViewModel();
+        this.DataContext = PaletteDemoViewModel.Instance.Value;
    }

    protected override async void OnApplyTemplate(TemplateAppliedEventArgs e)
    {
        base.OnApplyTemplate(e);
-        PaletteDemoViewModel? vm = this.DataContext as PaletteDemoViewModel;
-        await Dispatcher.UIThread.InvokeAsync(() => { vm?.InitializeResources(); });
+        if (this.DataContext is PaletteDemoViewModel vm && !vm.IsInitialized)
+        {
+            await Dispatcher.UIThread.InvokeAsync(() => { vm?.InitializeResources(); });
+        }
    }

    public async Task Copy(object? o)
@@ -31,4 +33,4 @@ public partial class PaletteDemo : UserControl
            await c.SetTextAsync(o.ToString());
        }
    }
-}
+}
@@ -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>
+
@@ -0,0 +1,12 @@
+using Avalonia.Controls;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class PipsPagerDemo : UserControl
+{
+    public PipsPagerDemo()
+    {
+        InitializeComponent();
+    }
+}
+
@@ -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}">
@@ -50,7 +50,7 @@
            <TabbedPage Name="DemoTabs"
                        TabPlacement="Top"
                        SelectionChanged="OnSelectionChanged">
-                <ContentPage Header="Home">
+                <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."
@@ -59,14 +59,14 @@
                                   TextWrapping="Wrap" Opacity="0.7" />
                    </StackPanel>
                </ContentPage>
-                <ContentPage Header="Search">
+                <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 Header="Settings">
+                <ContentPage Icon="{DynamicResource SemiIconSetting}" Header="Settings">
                    <StackPanel Margin="16" Spacing="8">
                        <TextBlock Text="Settings Tab" FontSize="24" FontWeight="Bold" />
                        <CheckBox Content="Enable notifications" />
@@ -0,0 +1,103 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+             xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Semi.Avalonia.Demo.Pages.VariablesDemo"
+             x:DataType="vm:VariablesDemoViewModel">
+    <Design.DataContext>
+        <vm:VariablesDemoViewModel />
+    </Design.DataContext>
+    <Grid RowDefinitions="Auto, *">
+        <TextBox
+            Grid.Row="0"
+            Width="600"
+            Margin="8"
+            Classes="ClearButton"
+            Text="{Binding SearchText}"
+            PlaceholderText="Input Variable Category/ResourceKey/Type/Value/Description" />
+
+        <DataGrid
+            Grid.Row="1"
+            Margin="8"
+            CanUserReorderColumns="True"
+            CanUserResizeColumns="True"
+            CanUserSortColumns="True"
+            HeadersVisibility="All"
+            IsReadOnly="True"
+            ItemsSource="{Binding GridData}">
+            <DataGrid.Columns>
+                <DataGridTemplateColumn
+                    Width="300"
+                    x:DataType="vm:VariableItem"
+                    Header="ResourceKey">
+                    <DataGridTemplateColumn.CellTemplate>
+                        <DataTemplate DataType="vm:VariableItem">
+                            <SelectableTextBlock
+                                Margin="12,0"
+                                VerticalAlignment="Center"
+                                Text="{Binding ResourceKey}" />
+                        </DataTemplate>
+                    </DataGridTemplateColumn.CellTemplate>
+                </DataGridTemplateColumn>
+                <DataGridTemplateColumn
+                    Width="200"
+                    x:DataType="vm:VariableItem"
+                    Header="Type">
+                    <DataGridTemplateColumn.CellTemplate>
+                        <DataTemplate DataType="vm:VariableItem">
+                            <SelectableTextBlock
+                                Margin="12,0"
+                                VerticalAlignment="Center"
+                                Text="{Binding Type.Name}" />
+                        </DataTemplate>
+                    </DataGridTemplateColumn.CellTemplate>
+                </DataGridTemplateColumn>
+                <DataGridTemplateColumn
+                    Width="200"
+                    x:DataType="vm:VariableItem"
+                    Header="Value">
+                    <DataGridTemplateColumn.CellTemplate>
+                        <DataTemplate DataType="vm:VariableItem">
+                            <SelectableTextBlock
+                                Margin="12,0"
+                                VerticalAlignment="Center"
+                                Text="{Binding Value}"
+                                TextWrapping="Wrap" />
+                        </DataTemplate>
+                    </DataGridTemplateColumn.CellTemplate>
+                </DataGridTemplateColumn>
+                <DataGridTemplateColumn
+                    Width="*"
+                    x:DataType="vm:VariableItem"
+                    Header="Description">
+                    <DataGridTemplateColumn.CellTemplate>
+                        <DataTemplate DataType="vm:VariableItem">
+                            <SelectableTextBlock
+                                Margin="12,0"
+                                VerticalAlignment="Center"
+                                Text="{Binding Description}"
+                                TextWrapping="Wrap" />
+                        </DataTemplate>
+                    </DataGridTemplateColumn.CellTemplate>
+                </DataGridTemplateColumn>
+                <DataGridTemplateColumn
+                    Width="100"
+                    x:DataType="vm:VariableItem"
+                    Header="CopyText">
+                    <DataGridTemplateColumn.CellTemplate>
+                        <DataTemplate DataType="vm:VariableItem">
+                            <Button
+                                Command="{Binding $parent[pages:VariablesDemo].Copy}"
+                                CommandParameter="{Binding CopyText}"
+                                Theme="{DynamicResource  IconBorderlessButton}"
+                                Content="{StaticResource SemiIconCopy}" />
+                        </DataTemplate>
+                    </DataGridTemplateColumn.CellTemplate>
+                </DataGridTemplateColumn>
+            </DataGrid.Columns>
+        </DataGrid>
+    </Grid>
+</UserControl>
@@ -0,0 +1,25 @@
+using System.Threading.Tasks;
+using Avalonia.Controls;
+using Avalonia.Input.Platform;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class VariablesDemo : UserControl
+{
+    public VariablesDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new VariablesDemoViewModel();
+    }
+
+    public async Task Copy(object? o)
+    {
+        if (o is null) return;
+        var toplevel = TopLevel.GetTopLevel(this);
+        if (toplevel?.Clipboard is { } c)
+        {
+            await c.SetTextAsync(o.ToString());
+        }
+    }
+}
@@ -0,0 +1,31 @@
+<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">
+
+    <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>
@@ -0,0 +1,12 @@
+using Avalonia.Controls;
+
+namespace Semi.Avalonia.Demo.Pages
+{
+    public partial class WindowCustomizationsPage : UserControl
+    {
+        public WindowCustomizationsPage()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -1,9 +1,8 @@
 <Project Sdk="Microsoft.NET.Sdk">
    <PropertyGroup>
-        <TargetFramework>net8.0</TargetFramework>
+        <TargetFramework>net10.0</TargetFramework>
        <Nullable>enable</Nullable>
        <LangVersion>latest</LangVersion>
-        <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
    </PropertyGroup>

    <ItemGroup>
@@ -13,8 +12,8 @@
    <ItemGroup>
        <PackageReference Include="Avalonia"/>
        <PackageReference Include="Avalonia.Controls.ColorPicker"/>
-<!--        <PackageReference Include="Avalonia.Controls.DataGrid"/>-->
-        <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
+        <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>
@@ -25,11 +24,7 @@
    <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.DataGrid\Semi.Avalonia.DataGrid.csproj"/>
 <!--        <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj"/>-->
    </ItemGroup>
-
-    <ItemGroup>
-      <AvaloniaXaml Remove="Pages\VariablesDemo.axaml" />
-    </ItemGroup>
 </Project>
@@ -0,0 +1,152 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+    x:DataType="viewModels:FunctionalColorGroupViewModel">
+    <ControlTheme x:Key="{x:Type controls:FunctionalColorGroupControl}" TargetType="controls:FunctionalColorGroupControl">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="controls:FunctionalColorGroupControl">
+                <Grid RowDefinitions="Auto, *">
+                    <SelectableTextBlock
+                        Grid.Row="0"
+                        Margin="0,16,0,0"
+                        Classes="H3"
+                        Text="{TemplateBinding Title}"
+                        Theme="{DynamicResource TitleSelectableTextBlock}" />
+                    <TabControl Grid.Row="1">
+                        <TabItem Header="Light">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightColors}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="70" Header="Color">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <controls:ColorItemControl
+                                                    Width="40"
+                                                    Height="20"
+                                                    Background="{Binding Brush}"
+                                                    CornerRadius="3" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="100" Header="Hex">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Hex}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="80" Header="Opacity">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Brush.Opacity}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ColorItemViewModel"
+                                        Binding="{Binding ColorDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Description" />
+                                    <DataGridTemplateColumn Width="100" Header="CopyText">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <Button
+                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
+                                                    CommandParameter="{Binding CopyText}"
+                                                    Theme="{DynamicResource  IconBorderlessButton}"
+                                                    Content="{StaticResource SemiIconCopy}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                        <TabItem Header="Dark">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkColors}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="70" Header="Color">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <controls:ColorItemControl
+                                                    Width="40"
+                                                    Height="20"
+                                                    Background="{Binding Brush}"
+                                                    CornerRadius="3" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="100" Header="Hex">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Hex}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="80" Header="Opacity">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Brush.Opacity}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ColorItemViewModel"
+                                        Binding="{Binding ColorDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Description" />
+                                    <DataGridTemplateColumn Width="100" Header="CopyText">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <Button
+                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
+                                                    CommandParameter="{Binding CopyText}"
+                                                    Theme="{DynamicResource  IconBorderlessButton}"
+                                                    Content="{StaticResource SemiIconCopy}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                    </TabControl>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>
@@ -0,0 +1,110 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+    x:DataType="viewModels:ShadowGroupViewModel">
+    <ControlTheme x:Key="{x:Type controls:ShadowGroupControl}" TargetType="controls:ShadowGroupControl">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="controls:ShadowGroupControl">
+                <Grid RowDefinitions="Auto, *">
+                    <SelectableTextBlock
+                        Grid.Row="0"
+                        Margin="0,16,0,0"
+                        Classes="H3"
+                        Text="{TemplateBinding Title}"
+                        Theme="{DynamicResource TitleSelectableTextBlock}" />
+                    <TabControl Grid.Row="1">
+                        <TabItem Header="Light">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightShadows}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding BoxShadowValue}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ShadowItemViewModel"
+                                        Binding="{Binding ShadowDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Description" />
+                                    <DataGridTemplateColumn Width="100" Header="CopyText">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <Button
+                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
+                                                    CommandParameter="{Binding CopyText}"
+                                                    Theme="{DynamicResource  IconBorderlessButton}"
+                                                    Content="{StaticResource SemiIconCopy}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                        <TabItem Header="Dark">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkShadows}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding BoxShadowValue}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ShadowItemViewModel"
+                                        Binding="{Binding ShadowDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Description" />
+                                    <DataGridTemplateColumn Width="100" Header="CopyText">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <Button
+                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
+                                                    CommandParameter="{Binding CopyText}"
+                                                    Theme="{DynamicResource  IconBorderlessButton}"
+                                                    Content="{StaticResource SemiIconCopy}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                    </TabControl>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>
@@ -2,6 +2,8 @@
    <ResourceDictionary.MergedDictionaries>
        <ResourceInclude Source="ColorDetailControl.axaml" />
        <ResourceInclude Source="ColorItemControl.axaml" />
+        <ResourceInclude Source="FunctionalColorGroupControl.axaml" />
+        <ResourceInclude Source="ShadowGroupControl.axaml" />
        <ResourceInclude Source="ToggleSwitch.axaml" />
    </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>
@@ -0,0 +1,154 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using Avalonia.Collections;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class DataGridDemoViewModel : ObservableObject
+{
+    public ObservableCollection<Song> GridData1 { get; set; }
+
+    public DataGridCollectionView GridData2 { get; set; }
+
+    public ObservableCollection<SongViewModel> GridData3 { get; set; }
+
+    public RelayCommand AddCommand { get; set; }
+
+    public DataGridDemoViewModel()
+    {
+        GridData1 = new ObservableCollection<Song>(Song.Songs);
+        GridData2 = new DataGridCollectionView(Song.Songs);
+        GridData2.GroupDescriptions.Add(new DataGridPathGroupDescription("Album"));
+        GridData3 = new ObservableCollection<SongViewModel>(Song.Songs.Take(10).Select(a => new SongViewModel()
+        {
+            Title = a.Title,
+            Artist = a.Artist,
+            Album = a.Album,
+            CountOfComment = a.CountOfComment,
+            IsSelected = false
+        }));
+        AddCommand = new RelayCommand(Add);
+    }
+
+    private void Add()
+    {
+        GridData3.Add(new SongViewModel());
+    }
+}
+
+public class Song
+{
+    public string? Title { get; set; }
+    public string? Artist { get; set; }
+    public TimeSpan? Duration { get; set; }
+    public string? Album { get; set; }
+    public int CountOfComment { get; set; }
+    public string Url { get; set; }
+
+    public Song(string title, string artist, int m, int s, string album, int countOfComment, int netEaseId)
+    {
+        Title = title;
+        Artist = artist;
+        Duration = new TimeSpan(0, m, s);
+        Album = album;
+        CountOfComment = countOfComment;
+        Url = $"https://music.163.com/song?id={netEaseId}";
+    }
+
+    public static List<string> Albums =>
+    [
+        "A.S.I.A",
+        "饕餮人间",
+        "七步咙咚呛",
+        "大惊小怪",
+        "The ONE",
+        "以梦为马 (壮志骄阳版)",
+        "emo了",
+        "一眼万年",
+        "冲刺吧",
+        "爱的赏味期限",
+        "COSMIC ANTHEM / 手紙",
+        "世界晚安",
+        "明年也要好好长大",
+        "320万年前",
+        "W.O.R.L.D."
+    ];
+
+    public static List<Song> Songs =>
+    [
+        new("好肚有肚(feat.李玲玉)", "熊猫堂ProducePandas", 2, 50, "A.S.I.A", 730, 1487039339),
+        new("荒诞秀", "熊猫堂ProducePandas", 3, 15, "A.S.I.A", 639, 1487037601),
+        new("长大", "熊猫堂ProducePandas", 4, 6, "A.S.I.A", 1114, 1487037690),
+        new("招财猫(feat.纪粹希(G-Tracy))", "熊猫堂ProducePandas", 3, 37, "A.S.I.A", 361, 1487039632),
+        new("千转", "熊猫堂ProducePandas", 4, 0, "A.S.I.A", 1115, 1477312398),
+        new("辣辣辣", "熊猫堂ProducePandas", 3, 24, "A.S.I.A", 1873, 1465043716),
+        new("碎碎念", "熊猫堂ProducePandas", 3, 25, "A.S.I.A", 676, 1474142064),
+        new("盘他", "熊猫堂ProducePandas", 2, 16, "A.S.I.A", 365, 1481652786),
+        new("Na Na Na", "熊猫堂ProducePandas", 3, 26, "A.S.I.A", 312, 1469022662),
+        new("Indigo", "熊猫堂ProducePandas", 3, 15, "A.S.I.A", 137, 1487039517),
+        new("饕餮人间", "熊猫堂ProducePandas", 3, 20, "饕餮人间", 1295, 1499584605),
+        new("七步咙咚呛", "熊猫堂ProducePandas", 3, 10, "七步咙咚呛", 175, 1809095152),
+        new("大惊小怪", "熊猫堂ProducePandas", 3, 32, "大惊小怪", 10420, 1847477425),
+        new("工具人", "熊猫堂ProducePandas", 2, 46, "大惊小怪", 1135, 1847476499),
+        new("以梦为马", "熊猫堂ProducePandas", 4, 19, "大惊小怪", 18361, 1836034373),
+        new("以梦为马(Piano Version)", "熊猫堂ProducePandas", 3, 4, "大惊小怪", 570, 1847477423),
+        new("The ONE", "熊猫堂ProducePandas", 2, 58, "The ONE", 1508, 1864329424),
+        new("The ONE(日文版)", "熊猫堂ProducePandas", 2, 57, "The ONE", 385, 1864329429),
+        new("以梦为马 (壮志骄阳版)", "熊猫堂ProducePandas", 4, 19, "以梦为马 (壮志骄阳版)", 161, 1865138896),
+        new("New Horse", "熊猫堂ProducePandas", 2, 30, "emo了", 643, 1887021307),
+        new("不例外", "熊猫堂ProducePandas", 3, 31, "emo了", 1818, 1887022665),
+        new("满意", "熊猫堂ProducePandas", 4, 32, "emo了", 1081, 1882433472),
+        new("就算与全世界为敌也要跟你在一起", "熊猫堂ProducePandas", 3, 32, "emo了", 2119, 1881759960),
+        new("The ONE", "熊猫堂ProducePandas", 2, 58, "emo了", 67, 1887022648),
+        new("口香糖", "熊猫堂ProducePandas", 3, 10, "emo了", 2181, 1885502254),
+        new("Suuuuuuper Mario", "熊猫堂ProducePandas", 3, 32, "emo了", 1010, 1887021318),
+        new("饕餮人间", "熊猫堂ProducePandas", 3, 22, "emo了", 109, 1887021320),
+        new("以梦为马 (壮志骄阳版)", "熊猫堂ProducePandas", 4, 21, "emo了", 34, 1887022666),
+        new("The ONE(日文版)", "熊猫堂ProducePandas", 2, 57, "emo了", 27, 1887022646),
+        new("满意(DJheap九天版)", "熊猫堂ProducePandas", 4, 31, "emo了", 31, 1901605941),
+        new("一眼万年", "熊猫堂ProducePandas", 3, 54, "一眼万年", 20, 1922599361),
+        new("冲刺", "熊猫堂ProducePandas", 3, 49, "冲刺吧", 1006, 1932878194),
+        new("滴答滴", "熊猫堂ProducePandas", 2, 30, "爱的赏味期限", 86, 1957515790),
+        new("热带季风", "熊猫堂ProducePandas", 2, 45, "爱的赏味期限", 212, 1957514964),
+        new("渣", "熊猫堂ProducePandas", 3, 28, "爱的赏味期限", 22, 1957514965),
+        new("独特", "熊猫堂ProducePandas", 3, 33, "爱的赏味期限", 62, 1957514966),
+        new("雨后", "熊猫堂ProducePandas", 4, 15, "爱的赏味期限", 23, 1957514967),
+        new("然后然后", "熊猫堂ProducePandas", 3, 50, "爱的赏味期限", 108, 1957514968),
+        new("丢", "熊猫堂ProducePandas", 3, 26, "爱的赏味期限", 30, 1957515792),
+        new("热带疾风(FACEVOID桃心连哥 Remix)", "熊猫堂ProducePandas", 3, 23, "爱的赏味期限", 55, 1957515793),
+        new("COSMIC ANTHEM -Japanese Ver.-", "熊猫堂ProducePandas", 3, 11, "COSMIC ANTHEM / 手紙", 0, 1977171493),
+        new("手紙 (「長大-You Raise Me Up-」-Japanese Ver.-)", "熊猫堂ProducePandas", 4, 11, "COSMIC ANTHEM / 手紙", 0,
+            1977171494),
+        new("COSMIC ANTHEM -Chinese Ver.-", "熊猫堂ProducePandas", 3, 31, "COSMIC ANTHEM / 手紙", 0, 1977172202),
+        new("世界晚安", "熊猫堂ProducePandas", 2, 59, "世界晚安", 652, 1985063377),
+        new("世界晚安(泰文版)", "熊猫堂ProducePandas", 2, 59, "世界晚安", 134, 1987842504),
+        new("世界晚安(钢琴版)", "熊猫堂ProducePandas", 3, 2, "世界晚安", 76, 1990475933),
+        new("世界晚安(泰文钢琴版)", "熊猫堂ProducePandas", 3, 2, "世界晚安", 29, 1990475934),
+        new("世界晚安(DJ沈念版)", "熊猫堂ProducePandas", 3, 9, "世界晚安", 34, 2014263184),
+        new("世界晚安(钢琴配乐)", "熊猫堂ProducePandas", 2, 59, "世界晚安", 11, 2014263185),
+        new("明年也要好好长大", "熊猫堂ProducePandas", 3, 12, "明年也要好好长大", 0, 2010515162),
+        new("320万年前（DJ沈念版）", "熊猫堂ProducePandas", 3, 21, "320万年前", 8, 2055888636),
+        new("320万年前", "熊猫堂ProducePandas", 3, 7, "W.O.R.L.D.", 329, 2049770469),
+        new("隐德来希", "熊猫堂ProducePandas", 3, 3, "W.O.R.L.D.", 594, 2061317924),
+        new("孔明", "熊猫堂ProducePandas", 3, 59, "W.O.R.L.D.", 91, 2063175274),
+        new("锦鲤卟噜噜", "熊猫堂ProducePandas", 3, 5, "W.O.R.L.D.", 67, 2059208262),
+        new("指鹿为马", "熊猫堂ProducePandas", 3, 12, "W.O.R.L.D.", 74, 2063175272),
+        new("热带季风Remix", "熊猫堂ProducePandas", 3, 22, "W.O.R.L.D.", 23, 2063173319),
+        new("加州梦境", "熊猫堂ProducePandas", 2, 56, "W.O.R.L.D.", 1662, 2063173324),
+        new("渐近自由", "熊猫堂ProducePandas", 4, 19, "W.O.R.L.D.", 124, 2063173321),
+        new("世界所有的烂漫", "熊猫堂ProducePandas", 3, 30, "W.O.R.L.D.", 335, 2053388775)
+    ];
+}
+
+public partial class SongViewModel : ObservableObject
+{
+    [ObservableProperty] private string? _title;
+    [ObservableProperty] private string? _artist;
+    [ObservableProperty] private string? _album;
+    [ObservableProperty] private int _countOfComment;
+    [ObservableProperty] private bool? _isSelected;
+}
@@ -0,0 +1,353 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Globalization;
+using System.Linq;
+using System.Threading.Tasks;
+using System.Windows.Input;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.ApplicationLifetimes;
+using Avalonia.Layout;
+using Avalonia.Styling;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Semi.Avalonia.Demo.Pages;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public partial class MainViewModel : ObservableObject
+{
+    private readonly Dictionary<string, NavigationItemViewModel> _itemsByTitle = new(StringComparer.Ordinal);
+    private readonly IReadOnlyList<NavigationSectionViewModel> _allSections;
+
+    [ObservableProperty] public partial string? SearchText { get; set; }
+
+    public string DocumentationUrl => "https://docs.irihi.tech/semi";
+    public string RepoUrl => "https://github.com/irihitech/Semi.Avalonia";
+    public IReadOnlyList<MenuItemViewModel> MenuItems { get; }
+    public IReadOnlyList<NavigationSectionViewModel> Sections { get; }
+    public ObservableCollection<NavigationSectionViewModel> FilteredSections { get; } = [];
+    public bool ShowEmptySearchState => FilteredSections.Count == 0 && !string.IsNullOrWhiteSpace(SearchText);
+    public ContentPage? CurrentPage => SelectedItem?.Page;
+    public string SelectedPageTitle => SelectedItem?.Title ?? "Overview";
+
+    public NavigationItemViewModel? SelectedItem
+    {
+        get;
+        private set
+        {
+            if (ReferenceEquals(field, value))
+            {
+                return;
+            }
+
+            var previous = field;
+            if (SetProperty(ref field, value))
+            {
+                previous?.IsSelected = false;
+                value?.IsSelected = true;
+                OnPropertyChanged(nameof(CurrentPage));
+                OnPropertyChanged(nameof(SelectedPageTitle));
+            }
+        }
+    }
+
+    public MainViewModel()
+    {
+        MenuItems =
+        [
+            new MenuItemViewModel
+            {
+                Header = "Theme",
+                Items =
+                [
+                    new MenuItemViewModel { Header = "Auto", Command = FollowSystemThemeCommand },
+                    new MenuItemViewModel { Header = "Aquatic", Command = SelectThemeCommand, CommandParameter = SemiTheme.Aquatic },
+                    new MenuItemViewModel { Header = "Desert", Command = SelectThemeCommand, CommandParameter = SemiTheme.Desert },
+                    new MenuItemViewModel { Header = "Dusk", Command = SelectThemeCommand, CommandParameter = SemiTheme.Dusk },
+                    new MenuItemViewModel { Header = "NightSky", Command = SelectThemeCommand, CommandParameter = SemiTheme.NightSky },
+                ]
+            },
+            new MenuItemViewModel
+            {
+                Header = "Locale",
+                Items =
+                [
+                    new MenuItemViewModel { Header = "简体中文", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("zh-CN") },
+                    new MenuItemViewModel { Header = "English", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("en-US") },
+                    new MenuItemViewModel { Header = "日本語", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("ja-JP") },
+                    new MenuItemViewModel { Header = "한국어", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("ko-KR") },
+                    new MenuItemViewModel { Header = "English (UK)", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("en-GB") },
+                    new MenuItemViewModel { Header = "Italiano", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("it-IT") },
+                    new MenuItemViewModel { Header = "Italiano (Switzerland)", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("it-CH") },
+                    new MenuItemViewModel { Header = "Nederlands", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("nl-NL") },
+                    new MenuItemViewModel { Header = "Nederlands (Belgium)", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("nl-BE") },
+                    new MenuItemViewModel { Header = "Українська", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("uk-UA") },
+                    new MenuItemViewModel { Header = "Русский", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("ru-RU") },
+                    new MenuItemViewModel { Header = "繁體中文", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("zh-TW") },
+                    new MenuItemViewModel { Header = "Deutsch", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("de-DE") },
+                    new MenuItemViewModel { Header = "Español", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("es-ES") },
+                    new MenuItemViewModel { Header = "Polski", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("pl-PL") },
+                    new MenuItemViewModel { Header = "Français", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("fr-FR") },
+                ]
+            }
+        ];
+
+        Sections = _allSections =
+        [
+            new NavigationSectionViewModel("Overview",
+            [
+                CreateItem("Overview", static () => new Overview()),
+                CreateItem("About Us", static () => new AboutUs()),
+            ]),
+            new NavigationSectionViewModel("Resource Browser",
+            [
+                CreateItem("Palette", static () => new PaletteDemo()),
+                CreateItem("HighContrastTheme", static () => new HighContrastDemo()),
+                CreateItem("Variables", static () => new VariablesDemo()),
+                CreateItem("Icon", static () => new IconDemo()),
+            ]),
+            new NavigationSectionViewModel("Separate Pack",
+            [
+                CreateItem("ColorPicker", static () => new ColorPickerDemo()),
+                CreateItem("DataGrid", static () => new DataGridDemo()),
+            ]),
+            new NavigationSectionViewModel("Basic",
+            [
+                CreateItem("TextBlock", static () => new TextBlockDemo()),
+                CreateItem("SelectableTextBlock", static () => new SelectableTextBlockDemo()),
+                CreateItem("Border", static () => new BorderDemo()),
+                CreateItem("PathIcon", static () => new PathIconDemo()),
+            ]),
+            new NavigationSectionViewModel("Button",
+            [
+                CreateItem("Button", static () => new ButtonDemo()),
+                CreateItem("HyperlinkButton", static () => new HyperlinkButtonDemo()),
+                CreateItem("CheckBox", static () => new CheckBoxDemo()),
+                CreateItem("RadioButton", static () => new RadioButtonDemo()),
+                CreateItem("ToggleSwitch", static () => new ToggleSwitchDemo()),
+            ]),
+            new NavigationSectionViewModel("Input",
+            [
+                CreateItem("TextBox", static () => new TextBoxDemo()),
+                CreateItem("AutoCompleteBox", static () => new AutoCompleteBoxDemo()),
+                CreateItem("ComboBox", static () => new ComboBoxDemo()),
+                CreateItem("ButtonSpinner", static () => new ButtonSpinnerDemo()),
+                CreateItem("NumericUpDown", static () => new NumericUpDownDemo()),
+                CreateItem("Slider", static () => new SliderDemo()),
+                CreateItem("ManagedFileChooser", static () => new ManagedFileChooserDemo()),
+            ]),
+            new NavigationSectionViewModel("Date/Time",
+            [
+                CreateItem("Calendar", static () => new CalendarDemo()),
+                CreateItem("CalendarDatePicker", static () => new CalendarDatePickerDemo()),
+                CreateItem("DatePicker", static () => new DatePickerDemo()),
+                CreateItem("TimePicker", static () => new TimePickerDemo()),
+            ]),
+            new NavigationSectionViewModel("Navigation",
+            [
+                CreateItem("ContentPage", static () => new ContentPageDemo()),
+                CreateItem("CarouselPage", static () => new CarouselPageDemo()),
+                CreateItem("DrawerPage", static () => new DrawerPageDemo()),
+                CreateItem("NavigationPage", static () => new NavigationPageDemo()),
+                CreateItem("TabbedPage", static () => new TabbedPageDemo()),
+                CreateItem("TabControl", static () => new TabControlDemo()),
+                CreateItem("TabStrip", static () => new TabStripDemo()),
+                CreateItem("TreeView", static () => new TreeViewDemo()),
+            ]),
+            new NavigationSectionViewModel("Show",
+            [
+                CreateItem("Carousel", static () => new CarouselDemo()),
+                CreateItem("PipsPager", static () => new PipsPagerDemo()),
+                CreateItem("Expander", static () => new ExpanderDemo()),
+                CreateItem("Flyout", static () => new FlyoutDemo()),
+                CreateItem("HeaderedContentControl", static () => new HeaderedContentControlDemo()),
+                CreateItem("Label", static () => new LabelDemo()),
+                CreateItem("ListBox", static () => new ListBoxDemo()),
+                CreateItem("SplitView", static () => new SplitViewDemo()),
+                CreateItem("ToolTip", static () => new ToolTipDemo()),
+            ]),
+            new NavigationSectionViewModel("Feedback",
+            [
+                CreateItem("DataValidationErrors", static () => new DataValidationErrorsDemo()),
+                CreateItem("Notification", static () => new NotificationDemo()),
+                CreateItem("ProgressBar", static () => new ProgressBarDemo()),
+                CreateItem("RefreshContainer", static () => new RefreshContainerDemo()),
+            ]),
+            new NavigationSectionViewModel("Other",
+            [
+                CreateItem("CommandBar", static () => new CommandBarDemo()),
+                CreateItem("GridSplitter", static () => new GridSplitterDemo()),
+                CreateItem("Menu", static () => new MenuDemo()),
+                CreateItem("ScrollViewer", static () => new ScrollViewerDemo()),
+                CreateItem("ThemeVariantScope", static () => new ThemeVariantDemo()),
+                CreateItem("WindowCustomizationsPage", static () => new WindowCustomizationsPage()),
+            ]),
+        ];
+
+        SelectedItem = Sections[0].Items[0];
+        RefreshFilteredSections();
+    }
+
+    public bool TryNavigateTo(string title)
+    {
+        if (_itemsByTitle.TryGetValue(title, out var item))
+        {
+            SelectedItem = item;
+            return true;
+        }
+
+        return false;
+    }
+
+    partial void OnSearchTextChanged(string? value)
+    {
+        RefreshFilteredSections();
+    }
+
+    [RelayCommand]
+    private void NavigateTo(object? parameter)
+    {
+        if (parameter is NavigationItemViewModel item)
+        {
+            SelectedItem = item;
+        }
+    }
+
+    [RelayCommand]
+    private void FollowSystemTheme()
+    {
+        Application.Current?.RegisterFollowSystemTheme();
+    }
+
+    [RelayCommand]
+    private void ToggleTheme()
+    {
+        var app = Application.Current;
+        if (app is null) return;
+        var theme = app.ActualThemeVariant;
+        app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
+        app.UnregisterFollowSystemTheme();
+    }
+
+    [RelayCommand]
+    private void SelectTheme(object? obj)
+    {
+        var app = Application.Current;
+        if (app is null) return;
+        app.RequestedThemeVariant = obj as ThemeVariant;
+        app.UnregisterFollowSystemTheme();
+    }
+
+    [RelayCommand]
+    private void SelectLocale(object? obj)
+    {
+        var app = Application.Current;
+        if (app is null) return;
+        SemiTheme.OverrideLocaleResources(app, obj as CultureInfo);
+    }
+
+    [RelayCommand]
+    private static async Task OpenUrl(string url)
+    {
+        var launcher = ResolveDefaultTopLevel()?.Launcher;
+        if (launcher is not null)
+        {
+            await launcher.LaunchUriAsync(new Uri(url));
+        }
+    }
+
+    private NavigationItemViewModel CreateItem(string title, Func<Control> contentFactory)
+    {
+        var item = new NavigationItemViewModel(title, NavigateToCommand, contentFactory);
+        _itemsByTitle.Add(title, item);
+        return item;
+    }
+
+    private void RefreshFilteredSections()
+    {
+        var search = string.IsNullOrWhiteSpace(SearchText) ? string.Empty : SearchText.Trim();
+
+        FilteredSections.Clear();
+
+        foreach (var section in _allSections)
+        {
+            if (search.Length == 0 ||
+                section.Header.Contains(search, StringComparison.InvariantCultureIgnoreCase))
+            {
+                FilteredSections.Add(section);
+                continue;
+            }
+
+            var matchedItems = section.Items
+                .Where(item => item.Title.Contains(search, StringComparison.InvariantCultureIgnoreCase))
+                .ToArray();
+
+            if (matchedItems.Length > 0)
+            {
+                FilteredSections.Add(new NavigationSectionViewModel(section.Header, matchedItems));
+            }
+        }
+
+        OnPropertyChanged(nameof(ShowEmptySearchState));
+    }
+
+    private static TopLevel? ResolveDefaultTopLevel()
+    {
+        return Application.Current?.ApplicationLifetime switch
+        {
+            IClassicDesktopStyleApplicationLifetime desktopLifetime => desktopLifetime.MainWindow,
+            ISingleViewApplicationLifetime singleView => TopLevel.GetTopLevel(singleView.MainView),
+            _ => null
+        };
+    }
+}
+
+public class NavigationSectionViewModel
+{
+    public NavigationSectionViewModel(string header, IReadOnlyList<NavigationItemViewModel> items)
+    {
+        Header = header;
+        Items = items;
+    }
+
+    public string Header { get; }
+
+    public IReadOnlyList<NavigationItemViewModel> Items { get; }
+}
+
+public partial class NavigationItemViewModel : ObservableObject
+{
+    private readonly Func<Control> _contentFactory;
+
+    public NavigationItemViewModel(string title, ICommand navigateCommand, Func<Control> contentFactory)
+    {
+        Title = title;
+        NavigateCommand = navigateCommand;
+        _contentFactory = contentFactory;
+    }
+
+    public string Title { get; }
+
+    public ICommand NavigateCommand { get; }
+
+    public ContentPage Page => field ??= new ContentPage
+    {
+        Header = Title,
+        Background = null,
+        HorizontalContentAlignment = HorizontalAlignment.Stretch,
+        VerticalContentAlignment = VerticalAlignment.Stretch,
+        Content = _contentFactory()
+    };
+
+    [ObservableProperty] public partial bool IsSelected { get; set; }
+}
+
+public class MenuItemViewModel
+{
+    public string? Header { get; set; }
+    public ICommand? Command { get; set; }
+    public object? CommandParameter { get; set; }
+    public IList<MenuItemViewModel>? Items { get; set; }
+}
@@ -14,6 +14,8 @@ namespace Semi.Avalonia.Demo.ViewModels;

 public partial class PaletteDemoViewModel : ObservableObject
 {
+    public static Lazy<PaletteDemoViewModel> Instance { get; } = new(() => new PaletteDemoViewModel());
+    public bool IsInitialized { get; private set; }
    private readonly string[] _predefinedColorNames =
    [
        "Red", "Pink", "Purple", "Violet", "Indigo",
@@ -44,6 +46,7 @@ public partial class PaletteDemoViewModel : ObservableObject
        InitializePalette();
        InitializeFunctionalColors();
        InitializeShadows();
+        IsInitialized = true;
    }

    private void InitializePalette()
@@ -289,4 +292,4 @@ public partial class ShadowGroupViewModel : ObservableObject
            }
        }
    }
-}
+}
@@ -0,0 +1,151 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using Avalonia;
+using Avalonia.Collections;
+using Avalonia.Controls;
+using Avalonia.Media;
+using CommunityToolkit.Mvvm.ComponentModel;
+using Semi.Avalonia.Tokens;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public partial class VariablesDemoViewModel : ObservableObject
+{
+    public DataGridCollectionView GridData { get; set; }
+    [ObservableProperty] private string _searchText = string.Empty;
+
+    public VariablesDemoViewModel()
+    {
+        IResourceDictionary dictionary = new Variables();
+        foreach (var token in Tokens)
+        {
+            if (token.ResourceKey is not null && dictionary.TryGetValue(token.ResourceKey, out var value))
+            {
+                token.Type = value?.GetType();
+                token.Value = GetValueString(value);
+            }
+        }
+
+        GridData = new DataGridCollectionView(Tokens);
+        GridData.GroupDescriptions.Add(new DataGridPathGroupDescription(nameof(VariableItem.Category)));
+    }
+
+    private static string? GetValueString(object? value)
+    {
+        if (value is null) return string.Empty;
+
+        return value switch
+        {
+            double d => d.ToString(CultureInfo.InvariantCulture),
+            CornerRadius c => c.IsUniform ? $"{c.TopLeft}" : c.ToString(),
+            Thickness t => t.IsUniform ? $"{t.Left}" : t.ToString(),
+            FontWeight fontWeight => Convert.ToInt32(fontWeight).ToString(),
+            FontFamily fontFamily => fontFamily.FamilyNames.ToString(),
+            _ => value.ToString()
+        };
+    }
+
+    partial void OnSearchTextChanged(string value)
+    {
+        if (string.IsNullOrWhiteSpace(value))
+        {
+            GridData.Filter = _ => true;
+            GridData.Refresh();
+            return;
+        }
+
+        var search = value.Trim();
+        GridData.Filter = item =>
+        {
+            if (item is not VariableItem variableItem) return false;
+            return (variableItem.Category?.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false) ||
+                   (variableItem.ResourceKey?.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false) ||
+                   (variableItem.Value?.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false) ||
+                   (variableItem.Type?.Name.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false) ||
+                   (variableItem.Description?.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false);
+        };
+        GridData.Refresh();
+    }
+
+    private static List<VariableItem> Tokens { get; set; } =
+    [
+        new("Height", "SemiHeightControlSmall"),
+        new("Height", "SemiHeightControlDefault"),
+        new("Height", "SemiHeightControlLarge"),
+        new("Icon Size", "SemiWidthIconExtraSmall"),
+        new("Icon Size", "SemiWidthIconSmall"),
+        new("Icon Size", "SemiWidthIconMedium"),
+        new("Icon Size", "SemiWidthIconLarge"),
+        new("Icon Size", "SemiWidthIconExtraLarge"),
+        new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingExtraSmall"),
+        new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingSmall"),
+        new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingMedium"),
+        new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingLarge"),
+        new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingFull"),
+        new("Border CornerRadius", "SemiBorderRadiusExtraSmall"),
+        new("Border CornerRadius", "SemiBorderRadiusSmall"),
+        new("Border CornerRadius", "SemiBorderRadiusMedium"),
+        new("Border CornerRadius", "SemiBorderRadiusLarge"),
+        new("Border CornerRadius", "SemiBorderRadiusFull"),
+        new("Border Spacing", "SemiBorderSpacing"),
+        new("Border Spacing", "SemiBorderSpacingControl"),
+        new("Border Spacing", "SemiBorderSpacingControlFocus"),
+        new("Border Thickness", "SemiBorderThickness"),
+        new("Border Thickness", "SemiBorderThicknessControl"),
+        new("Border Thickness", "SemiBorderThicknessControlFocus"),
+        new("Spacing", "SemiSpacingNone"),
+        new("Spacing", "SemiSpacingSuperTight"),
+        new("Spacing", "SemiSpacingExtraTight"),
+        new("Spacing", "SemiSpacingTight"),
+        new("Spacing", "SemiSpacingBaseTight"),
+        new("Spacing", "SemiSpacingBase"),
+        new("Spacing", "SemiSpacingBaseLoose"),
+        new("Spacing", "SemiSpacingLoose"),
+        new("Spacing", "SemiSpacingExtraLoose"),
+        new("Spacing", "SemiSpacingSuperLoose"),
+        new("Thickness", "SemiThicknessNone"),
+        new("Thickness", "SemiThicknessSuperTight"),
+        new("Thickness", "SemiThicknessExtraTight"),
+        new("Thickness", "SemiThicknessTight"),
+        new("Thickness", "SemiThicknessBaseTight"),
+        new("Thickness", "SemiThicknessBase"),
+        new("Thickness", "SemiThicknessBaseLoose"),
+        new("Thickness", "SemiThicknessLoose"),
+        new("Thickness", "SemiThicknessExtraLoose"),
+        new("Thickness", "SemiThicknessSuperLoose"),
+        new("FontSize", "SemiFontSizeSmall"),
+        new("FontSize", "SemiFontSizeRegular"),
+        new("FontSize", "SemiFontSizeHeader6"),
+        new("FontSize", "SemiFontSizeHeader5"),
+        new("FontSize", "SemiFontSizeHeader4"),
+        new("FontSize", "SemiFontSizeHeader3"),
+        new("FontSize", "SemiFontSizeHeader2"),
+        new("FontSize", "SemiFontSizeHeader1"),
+        new("FontWeight", "SemiFontWeightLight"),
+        new("FontWeight", "SemiFontWeightRegular"),
+        new("FontWeight", "SemiFontWeightBold"),
+        new("FontFamily", "SemiFontFamilyRegular"),
+    ];
+}
+
+public class VariableItem()
+{
+    public string? Category { get; set; }
+    public string? ResourceKey { get; set; }
+    public Type? Type { get; set; }
+    public string? Value { get; set; }
+    public string? Description { get; set; }
+
+    public VariableItem(string category, string resourceKey, string description = "") : this()
+    {
+        Category = category;
+        ResourceKey = resourceKey;
+        Description = description;
+    }
+
+    public string CopyText =>
+        $"""
+         <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
+         """;
+}
@@ -4,298 +4,142 @@
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:pages="using:Semi.Avalonia.Demo.Pages"
-    xmlns:views="clr-namespace:Semi.Avalonia.Demo.Views"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
    d:DesignHeight="450"
    d:DesignWidth="800"
-    x:DataType="views:MainViewModel"
+    x:DataType="vm:MainViewModel"
    mc:Ignorable="d">
-    <UserControl.Resources>
-        <ControlTheme x:Key="CategoryTabItem" TargetType="TabItem">
-            <Setter Property="IsEnabled" Value="False" />
-            <Setter Property="Template">
-                <ControlTemplate TargetType="TabItem">
+    <UserControl.Styles>
+        <Style Selector="TextBlock.NavSectionHeader">
+            <Setter Property="Margin" Value="12,10,12,2" />
+            <Setter Property="FontSize" Value="12" />
+            <Setter Property="FontWeight" Value="Bold" />
+            <Setter Property="Foreground" Value="{DynamicResource SemiColorText1}" />
+        </Style>
+
+        <Style Selector="Border.NavItemHost">
+            <Setter Property="Margin" Value="6,0" />
+            <Setter Property="Background" Value="Transparent" />
+        </Style>
+
+        <Style Selector="Border.NavItemHost.Selected">
+            <Setter Property="Background" Value="{DynamicResource SemiColorPrimaryLight}" />
+        </Style>
+
+        <Style Selector="Button.NavItem">
+            <Setter Property="Theme" Value="{DynamicResource BorderlessButton}" />
+            <Setter Property="HorizontalAlignment" Value="Stretch" />
+            <Setter Property="HorizontalContentAlignment" Value="Left" />
+            <Setter Property="Padding" Value="12,8" />
+            <Setter Property="Foreground" Value="{DynamicResource SemiColorText0}" />
+        </Style>
+        <Style Selector="Button.NavItem.Selected">
+            <Setter Property="Foreground" Value="{DynamicResource SemiColorPrimary}" />
+        </Style>
+    </UserControl.Styles>
+
+    <DrawerPage
+        Name="MainDrawer"
+        Margin="8"
+        Background="Transparent"
+        Content="{Binding CurrentPage}"
+        DrawerLayoutBehavior="{OnFormFactor Split, Mobile=Overlay}"
+        DrawerLength="300"
+        IsOpen="True">
+        <DrawerPage.Header>
+            <StackPanel Orientation="Horizontal" Spacing="8">
+                <SelectableTextBlock
+                    VerticalAlignment="Center"
+                    Classes="H6"
+                    Text="Semi Avalonia"
+                    Theme="{DynamicResource TitleSelectableTextBlock}" />
+                <TextBlock VerticalAlignment="Center" Text="/" />
+                <SelectableTextBlock
+                    VerticalAlignment="Center"
+                    Classes="Secondary"
+                    Text="{Binding SelectedPageTitle}" />
+            </StackPanel>
+        </DrawerPage.Header>
+
+        <DrawerPage.DrawerHeader>
+            <TextBox
+                Margin="8"
+                Classes="ClearButton"
+                PlaceholderText="Search demos or sections"
+                Text="{Binding SearchText}" />
+        </DrawerPage.DrawerHeader>
+
+        <DrawerPage.Drawer>
+            <ScrollViewer HorizontalScrollBarVisibility="Disabled">
+                <StackPanel>
+                    <ItemsControl ItemsSource="{Binding FilteredSections}">
+                        <ItemsControl.ItemTemplate>
+                            <DataTemplate DataType="vm:NavigationSectionViewModel">
+                                <StackPanel Margin="0,0,0,10">
+                                    <TextBlock Classes="NavSectionHeader" Text="{Binding Header}" />
+                                    <ItemsControl ItemsSource="{Binding Items}">
+                                        <ItemsControl.ItemTemplate>
+                                            <DataTemplate DataType="vm:NavigationItemViewModel">
+                                                <Border Classes="NavItemHost" Classes.Selected="{Binding IsSelected}">
+                                                    <Button
+                                                        Classes="NavItem"
+                                                        FontWeight="Normal"
+                                                        Classes.Selected="{Binding IsSelected}"
+                                                        Command="{Binding NavigateCommand}"
+                                                        CommandParameter="{Binding}"
+                                                        Content="{Binding Title}" />
+                                                </Border>
+                                            </DataTemplate>
+                                        </ItemsControl.ItemTemplate>
+                                    </ItemsControl>
+                                </StackPanel>
+                            </DataTemplate>
+                        </ItemsControl.ItemTemplate>
+                    </ItemsControl>
+
                    <TextBlock
-                        FontWeight="Bold"
-                        FontSize="12"
-                        Margin="4"
-                        Text="{TemplateBinding Header}" />
-                </ControlTemplate>
-            </Setter>
-            <Style Selector="^:disabled /template/ TextBlock">
-                <Setter Property="Foreground" Value="{DynamicResource SemiColorText1}" />
-            </Style>
-        </ControlTheme>
-    </UserControl.Resources>
-    <Grid RowDefinitions="Auto, *">
-        <Border
-            Grid.Row="0"
-            Margin="8"
-            Padding="12,4"
-            Theme="{DynamicResource CardBorder}">
-            <Panel>
-                <StackPanel Orientation="Horizontal" Spacing="8">
-                    <ToggleSwitch
-                        Name="ExpandButton"
-                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
-                        Content="{StaticResource SemiIconSidebar}" />
-                    <SelectableTextBlock
-                        VerticalAlignment="Center"
-                        Classes="H6"
-                        Text="Semi Avalonia"
-                        Theme="{DynamicResource TitleSelectableTextBlock}" />
-                    <SelectableTextBlock
-                        VerticalAlignment="Center"
-                        Text="/" />
-                    <SelectableTextBlock
-                        VerticalAlignment="Center"
-                        Classes="Secondary"
-                        Text="{ReflectionBinding #tab.SelectedItem.Header}" />
+                        Margin="16,12,16,0"
+                        Foreground="{DynamicResource SemiColorText1}"
+                        IsVisible="{Binding ShowEmptySearchState}"
+                        Text="No demo pages matched your search." />
                </StackPanel>
-                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
-                    <Button
-                        Theme="{DynamicResource IconBorderlessButton}"
-                        Command="{Binding OpenUrlCommand}"
-                        CommandParameter="{Binding DocumentationUrl}"
-                        Content="{StaticResource SemiIconGlobe}" />
+            </ScrollViewer>
+        </DrawerPage.Drawer>

-                    <Button
-                        Theme="{DynamicResource IconBorderlessButton}"
-                        Command="{Binding OpenUrlCommand}"
-                        CommandParameter="{Binding RepoUrl}"
-                        Content="{StaticResource SemiIconGithubLogo}" />
+        <DrawerPage.DrawerFooter>
+            <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
+                <Button
+                    Command="{Binding OpenUrlCommand}"
+                    CommandParameter="{Binding DocumentationUrl}"
+                    Content="{StaticResource SemiIconGlobe}"
+                    Theme="{DynamicResource IconBorderlessButton}" />

-                    <ToggleSwitch
-                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
-                        Command="{Binding ToggleThemeCommand}"
-                        OnContent="{StaticResource SemiIconMoon}"
-                        OffContent="{StaticResource SemiIconSun}" />
+                <Button
+                    Command="{Binding OpenUrlCommand}"
+                    CommandParameter="{Binding RepoUrl}"
+                    Content="{StaticResource SemiIconGithubLogo}"
+                    Theme="{DynamicResource IconBorderlessButton}" />

-                    <Button
-                        Theme="{DynamicResource IconBorderlessButton}"
-                        Content="{StaticResource SemiIconMenu}">
-                        <Button.Flyout>
-                            <MenuFlyout Placement="Bottom" ItemsSource="{Binding MenuItems}" />
-                        </Button.Flyout>
-                        <Button.Styles>
-                            <Style Selector="MenuItem" x:DataType="views:MenuItemViewModel">
-                                <Setter Property="Header" Value="{Binding Header}" />
-                                <Setter Property="ItemsSource" Value="{Binding Items}" />
-                                <Setter Property="Command" Value="{Binding Command}" />
-                                <Setter Property="CommandParameter" Value="{Binding CommandParameter}" />
-                            </Style>
-                        </Button.Styles>
-                    </Button>
-                </StackPanel>
-            </Panel>
-        </Border>
-        <TabControl
-            Name="tab"
-            Grid.Row="1"
-            Margin="8"
-            Padding="20,0,0,0"
-            TabStripPlacement="Left"
-            Classes.Dismiss="{Binding #ExpandButton.IsChecked}"
-            Theme="{DynamicResource ScrollLineTabControl}">
-            <TabControl.Styles>
-                <Style Selector=".Dismiss /template/ ScrollViewer#PART_ScrollViewer">
-                    <Setter Property="IsVisible" Value="False" />
-                </Style>
-            </TabControl.Styles>
-            <TabControl.ItemsPanel>
-                <ItemsPanelTemplate>
-                    <StackPanel />
-                </ItemsPanelTemplate>
-            </TabControl.ItemsPanel>
-            <TabItem Header="Overview">
-                <pages:Overview />
-            </TabItem>
-            <TabItem Header="About Us">
-                <pages:AboutUs />
-            </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Resource Browser" />
-            <!-- <TabItem Header="Palette"> -->
-            <!--     <pages:PaletteDemo /> -->
-            <!-- </TabItem> -->
-            <!-- <TabItem Header="HighContrastTheme"> -->
-            <!--     <pages:HighContrastDemo /> -->
-            <!-- </TabItem> -->
-            <!-- <TabItem Header="Variables"> -->
-            <!--     <pages:VariablesDemo /> -->
-            <!-- </TabItem> -->
-            <TabItem Header="Icon">
-                <pages:IconDemo />
-            </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Separate Pack" />
-            <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="TextBlock">
-                <pages:TextBlockDemo />
-            </TabItem>
-            <TabItem Header="SelectableTextBlock">
-                <pages:SelectableTextBlockDemo />
-            </TabItem>
-            <TabItem Header="Border">
-                <pages:BorderDemo />
-            </TabItem>
-            <TabItem Header="PathIcon">
-                <pages:PathIconDemo />
-            </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Button" />
-            <TabItem Header="Button">
-                <pages:ButtonDemo />
-            </TabItem>
-            <TabItem Header="HyperlinkButton">
-                <pages:HyperlinkButtonDemo />
-            </TabItem>
-            <TabItem Header="CheckBox">
-                <pages:CheckBoxDemo />
-            </TabItem>
-            <TabItem Header="RadioButton">
-                <pages:RadioButtonDemo />
-            </TabItem>
-            <TabItem Header="ToggleSwitch">
-                <pages:ToggleSwitchDemo />
-            </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Input" />
-            <TabItem Header="TextBox">
-                <pages:TextBoxDemo />
-            </TabItem>
-            <TabItem Header="AutoCompleteBox">
-                <pages:AutoCompleteBoxDemo />
-            </TabItem>
-            <TabItem Header="ComboBox">
-                <pages:ComboBoxDemo />
-            </TabItem>
-            <TabItem Header="ButtonSpinner">
-                <pages:ButtonSpinnerDemo />
-            </TabItem>
-            <TabItem Header="NumericUpDown">
-                <pages:NumericUpDownDemo />
-            </TabItem>
-            <TabItem Header="Slider">
-                <pages:SliderDemo />
-            </TabItem>
-            <TabItem Header="ManagedFileChooser">
-                <pages:ManagedFileChooserDemo />
-            </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Date/Time" />
-            <TabItem Header="Calendar">
-                <pages:CalendarDemo />
-            </TabItem>
-            <TabItem Header="CalendarDatePicker">
-                <pages:CalendarDatePickerDemo />
-            </TabItem>
-            <TabItem Header="DatePicker">
-                <pages:DatePickerDemo />
-            </TabItem>
-            <TabItem Header="TimePicker">
-                <pages:TimePickerDemo />
-            </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Navigation" />
-            <TabItem Header="ContentPage">
-                <pages:ContentPageDemo />
-            </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>
-            <TabItem Header="TabStrip">
-                <pages:TabStripDemo />
-            </TabItem>
-            <TabItem Header="TreeView">
-                <pages:TreeViewDemo />
-            </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Show" />
-            <TabItem Header="Carousel">
-                <pages:CarouselDemo />
-            </TabItem>
-            <TabItem Header="Expander">
-                <pages:ExpanderDemo />
-            </TabItem>
-            <TabItem Header="Flyout">
-                <pages:FlyoutDemo />
-            </TabItem>
-            <TabItem Header="HeaderedContentControl">
-                <pages:HeaderedContentControlDemo />
-            </TabItem>
-            <TabItem Header="Label">
-                <pages:LabelDemo />
-            </TabItem>
-            <TabItem Header="ListBox">
-                <pages:ListBoxDemo />
-            </TabItem>
-            <TabItem Header="SplitView">
-                <pages:SplitViewDemo />
-            </TabItem>
-            <TabItem Header="ToolTip">
-                <pages:ToolTipDemo />
-            </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Feedback" />
-            <TabItem Header="DataValidationErrors">
-                <pages:DataValidationErrorsDemo />
-            </TabItem>
-            <TabItem Header="Notification">
-                <pages:NotificationDemo />
-            </TabItem>
-            <TabItem Header="ProgressBar">
-                <pages:ProgressBarDemo />
-            </TabItem>
-            <TabItem Header="RefreshContainer">
-                <pages:RefreshContainerDemo />
-            </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Other" />
-            <TabItem Header="CommandBar">
-                <pages:CommandBarDemo />
-            </TabItem>
-            <TabItem Header="GridSplitter">
-                <pages:GridSplitterDemo />
-            </TabItem>
-            <TabItem Header="Menu">
-                <pages:MenuDemo />
-            </TabItem>
-            <TabItem Header="ScrollViewer">
-                <pages:ScrollViewerDemo />
-            </TabItem>
-            <TabItem Header="ThemeVariantScope">
-                <pages:ThemeVariantDemo />
-            </TabItem>
-        </TabControl>
-    </Grid>
-</UserControl>
+                <ToggleSwitch
+                    Command="{Binding ToggleThemeCommand}"
+                    OffContent="{StaticResource SemiIconSun}"
+                    OnContent="{StaticResource SemiIconMoon}"
+                    Theme="{DynamicResource IconBorderlessToggleSwitch}" />
+
+                <Button Content="{StaticResource SemiIconMenu}" Theme="{DynamicResource IconBorderlessButton}">
+                    <Button.Flyout>
+                        <MenuFlyout ItemsSource="{Binding MenuItems}" Placement="Bottom" />
+                    </Button.Flyout>
+                    <Button.Styles>
+                        <Style x:DataType="vm:MenuItemViewModel" Selector="MenuItem">
+                            <Setter Property="Header" Value="{Binding Header}" />
+                            <Setter Property="ItemsSource" Value="{Binding Items}" />
+                            <Setter Property="Command" Value="{Binding Command}" />
+                            <Setter Property="CommandParameter" Value="{Binding CommandParameter}" />
+                        </Style>
+                    </Button.Styles>
+                </Button>
+            </StackPanel>
+        </DrawerPage.DrawerFooter>
+    </DrawerPage>
+</UserControl>
@@ -1,250 +1,22 @@
-using System;
-using System.Collections.Generic;
-using System.Globalization;
-using System.Threading.Tasks;
-using System.Windows.Input;
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Controls.ApplicationLifetimes;
-using Avalonia.Styling;
-using CommunityToolkit.Mvvm.ComponentModel;
-using CommunityToolkit.Mvvm.Input;
 using CommunityToolkit.Mvvm.Messaging;
+using Semi.Avalonia.Demo.ViewModels;

 namespace Semi.Avalonia.Demo.Views;

 public partial class MainView : UserControl
 {
+    private readonly MainViewModel _viewModel;
+
    public MainView()
    {
        InitializeComponent();
-        this.DataContext = new MainViewModel();
+        DataContext = _viewModel = new MainViewModel();
        WeakReferenceMessenger.Default.Register<string, string>(this, "JumpTo", MessageHandler);
    }

    private void MessageHandler(object _, string message)
    {
-        foreach (var item in tab.ItemsView)
-        {
-            if (item is TabItem tabItem && tabItem.Header is not null && tabItem.Header.Equals(message))
-            {
-                tab.SelectedItem = tabItem;
-                break;
-            }
-        }
+        _viewModel.TryNavigateTo(message);
    }
 }
-
-public partial class MainViewModel : ObservableObject
-{
-    public string DocumentationUrl => "https://docs.irihi.tech/semi";
-    public string RepoUrl => "https://github.com/irihitech/Semi.Avalonia";
-    public IReadOnlyList<MenuItemViewModel> MenuItems { get; }
-
-    public MainViewModel()
-    {
-        MenuItems =
-        [
-            new MenuItemViewModel
-            {
-                Header = "Theme",
-                Items =
-                [
-                    new MenuItemViewModel
-                    {
-                        Header = "Auto",
-                        Command = FollowSystemThemeCommand
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Aquatic",
-                        Command = SelectThemeCommand,
-                        CommandParameter = SemiTheme.Aquatic
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Desert",
-                        Command = SelectThemeCommand,
-                        CommandParameter = SemiTheme.Desert
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Dusk",
-                        Command = SelectThemeCommand,
-                        CommandParameter = SemiTheme.Dusk
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "NightSky",
-                        Command = SelectThemeCommand,
-                        CommandParameter = SemiTheme.NightSky
-                    },
-                ]
-            },
-            new MenuItemViewModel
-            {
-                Header = "Locale",
-                Items =
-                [
-                    new MenuItemViewModel
-                    {
-                        Header = "简体中文",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("zh-CN")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "English",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("en-US")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "日本語",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("ja-JP")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "한국어",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("ko-KR")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "English (UK)",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("en-GB")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Italiano",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("it-IT")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Italiano (Switzerland)",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("it-CH")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Nederlands",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("nl-NL")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Nederlands (Belgium)",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("nl-BE")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Українська",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("uk-UA")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Русский",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("ru-RU")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "繁體中文",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("zh-TW")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Deutsch",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("de-DE")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Español",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("es-ES")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Polski",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("pl-PL")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Français",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("fr-FR")
-                    },
-                ]
-            }
-        ];
-    }
-
-    [RelayCommand]
-    private void FollowSystemTheme()
-    {
-        Application.Current?.RegisterFollowSystemTheme();
-    }
-
-    [RelayCommand]
-    private void ToggleTheme()
-    {
-        var app = Application.Current;
-        if (app is null) return;
-        var theme = app.ActualThemeVariant;
-        app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
-        app.UnregisterFollowSystemTheme();
-    }
-
-    [RelayCommand]
-    private void SelectTheme(object? obj)
-    {
-        var app = Application.Current;
-        if (app is null) return;
-        app.RequestedThemeVariant = obj as ThemeVariant;
-        app.UnregisterFollowSystemTheme();
-    }
-
-    [RelayCommand]
-    private void SelectLocale(object? obj)
-    {
-        var app = Application.Current;
-        if (app is null) return;
-        SemiTheme.OverrideLocaleResources(app, obj as CultureInfo);
-    }
-
-    [RelayCommand]
-    private static async Task OpenUrl(string url)
-    {
-        var launcher = ResolveDefaultTopLevel()?.Launcher;
-        if (launcher is not null)
-        {
-            await launcher.LaunchUriAsync(new Uri(url));
-        }
-    }
-
-    private static TopLevel? ResolveDefaultTopLevel()
-    {
-        return Application.Current?.ApplicationLifetime switch
-        {
-            IClassicDesktopStyleApplicationLifetime desktopLifetime => desktopLifetime.MainWindow,
-            ISingleViewApplicationLifetime singleView => TopLevel.GetTopLevel(singleView.MainView),
-            _ => null
-        };
-    }
-}
-
-public class MenuItemViewModel
-{
-    public string? Header { get; set; }
-    public ICommand? Command { get; set; }
-    public object? CommandParameter { get; set; }
-    public IList<MenuItemViewModel>? Items { get; set; }
-}
@@ -9,7 +9,6 @@
    d:DesignHeight="450"
    d:DesignWidth="800"
    ExtendClientAreaToDecorationsHint="True"
-    ExtendClientAreaTitleBarHeightHint="40"
    Icon="/Assets/irihi.ico"
    mc:Ignorable="d">
    <views:MainView Margin="{Binding $parent[Window].WindowDecorationMargin}" />
@@ -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;
+        }
    }
 }
@@ -1,5 +0,0 @@
-{
-    "sdk": {
-        "version": "8.0"
-    }
-}
@@ -1,6 +1,6 @@
 {
  "sdk": {
-    "version": "8.0.0",
+    "version": "10.0.0",
    "rollForward": "latestMajor",
    "allowPrerelease": true
  }
@@ -2,7 +2,6 @@
    <PropertyGroup>
        <Nullable>enable</Nullable>
        <LangVersion>latest</LangVersion>
-        <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
    </PropertyGroup>

    <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
@@ -1,14 +0,0 @@
-<Project>
-    <PropertyGroup>
-        <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
-        <AvaloniaVersion>12.0.0-preview2</AvaloniaVersion>
-        <DataGridVersion>11.3.7</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-preview1"/>
-    </ItemGroup>
-</Project>
@@ -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>
@@ -2,38 +2,48 @@
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:iri="https://irihi.tech/shared"
-    xmlns:converters="using:Avalonia.Controls.Converters">
-    <converters:ToBrushConverter x:Key="ToBrushConverter" />
+    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={iri:CornerRadiusMixerConverter Left}}" />
                    <Border
                        Margin="1,1,0,1"
+                        Width="{Binding $self.Bounds.Height}"
                        Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
                        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>
@@ -1,15 +1,13 @@
 <ResourceDictionary
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:iri="https://irihi.tech/shared"
-    xmlns:pc="using:Avalonia.Controls.Primitives.Converters">
-    <pc:AccentColorConverter x:Key="AccentColorConverter" />
+    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}">
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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" />
@@ -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(',');
@@ -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(',');
@@ -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();
-    }
-}
@@ -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>
@@ -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")]
@@ -2,8 +2,8 @@

    <PropertyGroup>
        <TargetFrameworks>net8.0;net10.0</TargetFrameworks>
-        <Version>12.0.0-preview2</Version>
-        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 12.0.0-preview2</PackageReleaseNotes>
+        <Version>12.0.1</Version>
+        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 12.0.1</PackageReleaseNotes>
        <Title>Semi.Avalonia.ColorPicker</Title>
    </PropertyGroup>

@@ -1,13 +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
@@ -217,7 +216,21 @@ 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[
@@ -229,4 +242,4 @@ public class SemiColorDarkPalette: IColorPalette
    public int ColorCount => Colors.GetLength(0);

    public int ShadeCount => Colors.GetLength(1);
-}
+}
@@ -1,13 +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
@@ -217,7 +216,21 @@ 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[
@@ -1,8 +1,7 @@
 <ResourceDictionary
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:collections="using:Avalonia.Collections"
-    x:CompileBindings="True">
+    xmlns:collections="using:Avalonia.Collections">
    <ControlTheme x:Key="DataGridCellTextBlockTheme" TargetType="TextBlock">
        <Setter Property="Margin" Value="{DynamicResource DataGridCellTextBlockDefaultMargin}" />
        <Setter Property="VerticalAlignment" Value="Center" />
@@ -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>
@@ -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>
@@ -1,9 +1,9 @@
 <Project Sdk="Microsoft.NET.Sdk">

    <PropertyGroup>
-        <TargetFrameworks>netstandard2.0;net6.0;net8.0</TargetFrameworks>
-        <Version>11.3.7.3</Version>
-        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 11.3.7.3</PackageReleaseNotes>
+        <TargetFrameworks>net8.0;net10.0</TargetFrameworks>
+        <Version>12.0.0</Version>
+        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 12.0.0</PackageReleaseNotes>
        <Title>Semi.Avalonia.DataGrid</Title>
    </PropertyGroup>

@@ -1,8 +1,7 @@
 <ResourceDictionary
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:conv="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls.TreeDataGrid"
-    x:CompileBindings="True">
+    xmlns:conv="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls.TreeDataGrid">
    <Design.PreviewWith>
        <StackPanel Margin="20">
            <TreeDataGridColumnHeader Header="123" />
@@ -20,6 +20,7 @@
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Content="{TemplateBinding Content}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
                    ContentTemplate="{TemplateBinding ContentTemplate}" />
            </ControlTemplate>
        </Setter>
@@ -92,7 +93,7 @@
                </Grid>
            </ControlTemplate>
        </Setter>
-        <Style Selector="^[ButtonSpinnerLocation=Left] /template/ Border#ButtonGroup">
+        <Style Selector="^:left /template/ Border#ButtonGroup">
            <Setter Property="Grid.Column" Value="0" />
            <Setter Property="Margin" Value="0 0 4 0" />
        </Style>
@@ -100,4 +101,70 @@
            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonPointeroverBorderBrush}" />
        </Style>
    </ControlTheme>
+
+    <ControlTheme x:Key="SplitButtonSpinner" TargetType="ButtonSpinner">
+        <Setter Property="BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}" />
+        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="MinWidth" Value="200" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ButtonSpinner">
+                <Grid ColumnDefinitions="Auto, *, Auto">
+                    <RepeatButton
+                        Name="PART_DecreaseButton"
+                        Grid.Column="0"
+                        VerticalAlignment="Stretch"
+                        Padding="{DynamicResource SplitButtonSpinnerButtonPadding}"
+                        BorderBrush="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}"
+                        BorderThickness="{DynamicResource ButtonSpinnerButtonGroupBorderThickness}"
+                        CornerRadius="{DynamicResource SplitButtonSpinnerLeftButtonCornerRadius}"
+                        IsVisible="{TemplateBinding ShowButtonSpinner}"
+                        Theme="{StaticResource ButtonSpinnerRepeatButton}">
+                        <PathIcon
+                            Theme="{DynamicResource InnerPathIcon}"
+                            Classes="Small"
+                            Data="{DynamicResource SplitButtonSpinnerDecreaseButtonGlyph}"
+                            Foreground="{DynamicResource ButtonSpinnerRepeatButtonForeground}" />
+                    </RepeatButton>
+                    <Border
+                        Grid.Column="1"
+                        Margin="2 0"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <ContentPresenter
+                            Name="PART_ContentPresenter"
+                            Padding="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}" />
+                    </Border>
+                    <RepeatButton
+                        Name="PART_IncreaseButton"
+                        Grid.Column="2"
+                        VerticalAlignment="Stretch"
+                        Padding="{DynamicResource SplitButtonSpinnerButtonPadding}"
+                        BorderBrush="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}"
+                        BorderThickness="{DynamicResource ButtonSpinnerButtonGroupBorderThickness}"
+                        CornerRadius="{DynamicResource SplitButtonSpinnerRightButtonCornerRadius}"
+                        IsVisible="{TemplateBinding ShowButtonSpinner}"
+                        Theme="{StaticResource ButtonSpinnerRepeatButton}">
+                        <PathIcon
+                            Theme="{DynamicResource InnerPathIcon}"
+                            Classes="Small"
+                            Data="{DynamicResource SplitButtonSpinnerIncreaseButtonGlyph}"
+                            Foreground="{DynamicResource ButtonSpinnerRepeatButtonForeground}" />
+                    </RepeatButton>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:left /template/ RepeatButton#PART_DecreaseButton">
+            <Setter Property="Grid.Column" Value="2" />
+            <Setter Property="CornerRadius" Value="{DynamicResource SplitButtonSpinnerRightButtonCornerRadius}" />
+        </Style>
+        <Style Selector="^:left /template/ RepeatButton#PART_IncreaseButton">
+            <Setter Property="Grid.Column" Value="0" />
+            <Setter Property="CornerRadius" Value="{DynamicResource SplitButtonSpinnerLeftButtonCornerRadius}" />
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>
@@ -156,7 +156,7 @@
                    Theme="{DynamicResource InnerPathIcon}"
                    Width="{TemplateBinding Width}"
                    Height="{TemplateBinding Height}"
-                    Data="{DynamicResource CarouselButtonGlyph}"
+                    Data="{TemplateBinding Content}"
                    Foreground="{TemplateBinding Foreground}" />
            </ControlTemplate>
        </Setter>
@@ -213,6 +213,7 @@
                        Theme="{DynamicResource CarouselButton}"
                        Margin="{DynamicResource CarouselButtonMargin}"
                        Foreground="{DynamicResource CarouselButtonForeground}"
+                        Content="{StaticResource SemiIconChevronLeft}"
                        IsVisible="{TemplateBinding ItemCount, Converter={x:Static semi:ItemConverter.ItemVisibleConverter}}"
                        Command="{Binding $parent[Carousel].Previous}" />
                    <Button
@@ -222,9 +223,9 @@
                        Theme="{DynamicResource CarouselButton}"
                        Margin="{DynamicResource CarouselButtonMargin}"
                        Foreground="{DynamicResource CarouselButtonForeground}"
+                        Content="{StaticResource SemiIconChevronRight}"
                        IsVisible="{TemplateBinding ItemCount, Converter={x:Static semi:ItemConverter.ItemVisibleConverter}}"
-                        Command="{Binding $parent[Carousel].Next}"
-                        RenderTransform="rotate(180deg)" />
+                        Command="{Binding $parent[Carousel].Next}" />
                </Grid>
            </ControlTemplate>
        </Setter>
@@ -0,0 +1,19 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme x:Key="{x:Type CarouselPage}" TargetType="CarouselPage">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="CarouselPage">
+                <Carousel
+                    Name="PART_Carousel"
+                    Background="{TemplateBinding Background}"
+                    ItemTemplate="{TemplateBinding PageTemplate}"
+                    PageTransition="{TemplateBinding PageTransition}"
+                    ItemsPanel="{TemplateBinding ItemsPanel}"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Stretch" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>
@@ -28,24 +28,24 @@
                    DefaultLabelPosition="{Binding #lc.SelectedValue}"
                    IsDynamicOverflowEnabled="{Binding #idfe.IsChecked}"
                    Width="{Binding #ws.Value}">
-                    <AppBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
-                    <AppBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
-                    <AppBarSeparator />
-                    <AppBarToggleButton Label="Bold" Icon="{DynamicResource SemiIconBold}" />
-                    <AppBarToggleButton Label="Italic" Icon="{DynamicResource SemiIconItalic}" />
-                    <AppBarToggleButton IsEnabled="False" IsChecked="True" Label="Underline" Icon="{DynamicResource SemiIconUnderline}" />
-                    <AppBarSeparator />
-                    <AppBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
-                    <AppBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
-                    <AppBarButton Label="Print" Icon="{DynamicResource SemiIconPrint}" />
-                    <AppBarSeparator />
-                    <AppBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
+                    <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 IsEnabled="False" IsChecked="True" 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>
            </StackPanel>
        </GroupBox>
    </Design.PreviewWith>

-    <ControlTheme x:Key="AppBarButtonBaseTheme" TargetType="Button">
+    <ControlTheme x:Key="CommandBarButtonBaseTheme" TargetType="Button">
        <Setter Property="Template">
            <ControlTemplate TargetType="Button">
                <Border
@@ -57,7 +57,7 @@
                    Padding="{TemplateBinding Padding}">
                    <StackPanel
                        Name="PART_LayoutRoot"
-                        Spacing="{DynamicResource AppBarButtonPanelSpacing}"
+                        Spacing="{DynamicResource CommandBarButtonPanelSpacing}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                        <ContentPresenter
@@ -73,50 +73,51 @@
                        </ContentPresenter>
                        <TextBlock
                            Name="PART_Label"
+                            MaxLines="1"
                            Foreground="{TemplateBinding Foreground}"
-                            FontSize="{DynamicResource AppBarButtonLabelFontSize}"
+                            FontSize="{DynamicResource CommandBarButtonLabelFontSize}"
                            TextTrimming="CharacterEllipsis" />
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter>

-        <Setter Property="Background" Value="{DynamicResource AppBarButtonBackground}" />
-        <Setter Property="Foreground" Value="{DynamicResource AppBarButtonForeground}" />
+        <Setter Property="Background" Value="{DynamicResource CommandBarButtonBackground}" />
+        <Setter Property="Foreground" Value="{DynamicResource CommandBarButtonForeground}" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="BorderThickness" Value="0" />
-        <Setter Property="Padding" Value="{DynamicResource AppBarButtonPadding}" />
-        <Setter Property="Width" Value="{DynamicResource AppBarButtonWidth}" />
-        <Setter Property="MinHeight" Value="{DynamicResource AppBarButtonMinHeight}" />
+        <Setter Property="Padding" Value="{DynamicResource CommandBarButtonPadding}" />
+        <Setter Property="Width" Value="{DynamicResource CommandBarButtonWidth}" />
+        <Setter Property="MinHeight" Value="{DynamicResource CommandBarButtonMinHeight}" />

-        <Setter Property="CornerRadius" Value="{DynamicResource AppBarButtonCornerRadius}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CommandBarButtonCornerRadius}" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Cursor" Value="Hand" />

        <Style Selector="^:pointerover /template/ Border#PART_Border">
-            <Setter Property="Background" Value="{DynamicResource AppBarButtonPointeroverBackground}" />
+            <Setter Property="Background" Value="{DynamicResource CommandBarButtonPointeroverBackground}" />
        </Style>

        <Style Selector="^:pressed /template/ Border#PART_Border">
-            <Setter Property="Background" Value="{DynamicResource AppBarButtonPressedBackground}" />
+            <Setter Property="Background" Value="{DynamicResource CommandBarButtonPressedBackground}" />
        </Style>

        <Style Selector="^:disabled">
            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource AppBarButtonDisabledForeground}" />
+                <Setter Property="Foreground" Value="{DynamicResource CommandBarButtonDisabledForeground}" />
            </Style>
            <Style Selector="^ /template/ TextBlock#PART_Label">
-                <Setter Property="Foreground" Value="{DynamicResource AppBarButtonDisabledForeground}" />
+                <Setter Property="Foreground" Value="{DynamicResource CommandBarButtonDisabledForeground}" />
            </Style>
        </Style>
    </ControlTheme>

-    <!--  AppBarButton  -->
+    <!--  CommandBarButton  -->
    <ControlTheme
-        x:Key="{x:Type AppBarButton}"
-        BasedOn="{StaticResource AppBarButtonBaseTheme}"
-        TargetType="AppBarButton">
+        x:Key="{x:Type CommandBarButton}"
+        BasedOn="{StaticResource CommandBarButtonBaseTheme}"
+        TargetType="CommandBarButton">

        <Style Selector="^ /template/ TextBlock#PART_Label">
            <Setter Property="Text" Value="{TemplateBinding Label}" />
@@ -127,7 +128,7 @@

        <!--  IsCompact: hide label, use compact width  -->
        <Style Selector="^[IsCompact=True]">
-            <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
+            <Setter Property="Width" Value="{DynamicResource CommandBarButtonCompactWidth}" />
            <Style Selector="^ /template/ TextBlock#PART_Label">
                <Setter Property="IsVisible" Value="False" />
            </Style>
@@ -135,7 +136,7 @@

        <!--  LabelPosition=Collapsed: hide label, use compact width  -->
        <Style Selector="^[LabelPosition=Collapsed]">
-            <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
+            <Setter Property="Width" Value="{DynamicResource CommandBarButtonCompactWidth}" />
            <Style Selector="^ /template/ TextBlock#PART_Label">
                <Setter Property="IsVisible" Value="False" />
            </Style>
@@ -144,7 +145,7 @@
        <!--  LabelPosition=Right: horizontal layout, auto-width  -->
        <Style Selector="^[LabelPosition=Right]">
            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
-            <Setter Property="MinWidth" Value="{DynamicResource AppBarButtonCompactWidth}" />
+            <Setter Property="MinWidth" Value="{DynamicResource CommandBarButtonCompactWidth}" />
            <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
                <Setter Property="Orientation" Value="Horizontal" />
            </Style>
@@ -160,8 +161,8 @@
        <Style Selector="^[IsInOverflow=True]">
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
-            <Setter Property="MinHeight" Value="{DynamicResource AppBarButtonOverflowMinHeight}" />
-            <Setter Property="Padding" Value="{DynamicResource AppBarButtonOverflowPadding}" />
+            <Setter Property="MinHeight" Value="{DynamicResource CommandBarButtonOverflowMinHeight}" />
+            <Setter Property="Padding" Value="{DynamicResource CommandBarButtonOverflowPadding}" />
            <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
                <Setter Property="Orientation" Value="Horizontal" />
            </Style>
@@ -174,11 +175,11 @@
        </Style>
    </ControlTheme>

-    <!--  AppBarToggleButton  -->
+    <!--  CommandBarToggleButton  -->
    <ControlTheme
-        x:Key="{x:Type AppBarToggleButton}"
-        BasedOn="{StaticResource AppBarButtonBaseTheme}"
-        TargetType="AppBarToggleButton">
+        x:Key="{x:Type CommandBarToggleButton}"
+        BasedOn="{StaticResource CommandBarButtonBaseTheme}"
+        TargetType="CommandBarToggleButton">

        <Style Selector="^ /template/ TextBlock#PART_Label">
            <Setter Property="Text" Value="{TemplateBinding Label}" />
@@ -189,25 +190,25 @@

        <Style Selector="^:checked">
            <Style Selector="^ /template/ Border#PART_Border">
-                <Setter Property="Background" Value="{DynamicResource AppBarToggleButtonCheckedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonCheckedBackground}" />
            </Style>
            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource AppBarToggleButtonCheckedForeground}" />
+                <Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonCheckedForeground}" />
            </Style>
            <Style Selector="^:pointerover /template/ Border#PART_Border">
-                <Setter Property="Background" Value="{DynamicResource AppBarToggleButtonCheckedPointeroverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonCheckedPointeroverBackground}" />
            </Style>
            <Style Selector="^:pressed /template/ Border#PART_Border">
-                <Setter Property="Background" Value="{DynamicResource AppBarToggleButtonCheckedPressedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonCheckedPressedBackground}" />
            </Style>
            <Style Selector="^:disabled /template/ ContentPresenter#PART_IconPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource AppBarToggleButtonCheckedDisabledForeground}" />
+                <Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonCheckedDisabledForeground}" />
            </Style>
        </Style>

        <!--  IsCompact: hide label, use compact width  -->
        <Style Selector="^[IsCompact=True]">
-            <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
+            <Setter Property="Width" Value="{DynamicResource CommandBarButtonCompactWidth}" />
            <Style Selector="^ /template/ TextBlock#PART_Label">
                <Setter Property="IsVisible" Value="False" />
            </Style>
@@ -215,7 +216,7 @@

        <!--  LabelPosition=Collapsed: hide label, use compact width  -->
        <Style Selector="^[LabelPosition=Collapsed]">
-            <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
+            <Setter Property="Width" Value="{DynamicResource CommandBarButtonCompactWidth}" />
            <Style Selector="^ /template/ TextBlock#PART_Label">
                <Setter Property="IsVisible" Value="False" />
            </Style>
@@ -224,7 +225,7 @@
        <!--  LabelPosition=Right: horizontal layout, auto-width  -->
        <Style Selector="^[LabelPosition=Right]">
            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
-            <Setter Property="MinWidth" Value="{DynamicResource AppBarButtonCompactWidth}" />
+            <Setter Property="MinWidth" Value="{DynamicResource CommandBarButtonCompactWidth}" />
            <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
                <Setter Property="Orientation" Value="Horizontal" />
            </Style>
@@ -240,8 +241,8 @@
        <Style Selector="^[IsInOverflow=True]">
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
-            <Setter Property="MinHeight" Value="{DynamicResource AppBarButtonOverflowMinHeight}" />
-            <Setter Property="Padding" Value="{DynamicResource AppBarButtonOverflowPadding}" />
+            <Setter Property="MinHeight" Value="{DynamicResource CommandBarButtonOverflowMinHeight}" />
+            <Setter Property="Padding" Value="{DynamicResource CommandBarButtonOverflowPadding}" />
            <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
                <Setter Property="Orientation" Value="Horizontal" />
            </Style>
@@ -254,14 +255,14 @@
        </Style>
    </ControlTheme>

-    <!--  AppBarSeparator  -->
-    <ControlTheme x:Key="{x:Type AppBarSeparator}" TargetType="AppBarSeparator">
-        <Setter Property="Background" Value="{DynamicResource AppBarSeparatorBackground}" />
-        <Setter Property="Width" Value="{DynamicResource AppBarSeparatorWidth}" />
-        <Setter Property="MinHeight" Value="{DynamicResource AppBarSeparatorMinHeight}" />
-        <Setter Property="Margin" Value="{DynamicResource AppBarSeparatorMargin}" />
+    <!--  CommandBarSeparator  -->
+    <ControlTheme x:Key="{x:Type CommandBarSeparator}" TargetType="CommandBarSeparator">
+        <Setter Property="Background" Value="{DynamicResource CommandBarSeparatorBackground}" />
+        <Setter Property="Width" Value="{DynamicResource CommandBarSeparatorWidth}" />
+        <Setter Property="MinHeight" Value="{DynamicResource CommandBarSeparatorMinHeight}" />
+        <Setter Property="Margin" Value="{DynamicResource CommandBarSeparatorMargin}" />
        <Setter Property="Template">
-            <ControlTemplate TargetType="AppBarSeparator">
+            <ControlTemplate TargetType="CommandBarSeparator">
                <Border
                    Background="{TemplateBinding Background}"
                    Width="{TemplateBinding Width}"
@@ -273,9 +274,9 @@
        <Style Selector="^[IsInOverflow=True]">
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
-            <Setter Property="Height" Value="{DynamicResource AppBarSeparatorOverflowHeight}" />
+            <Setter Property="Height" Value="{DynamicResource CommandBarSeparatorOverflowHeight}" />
            <Setter Property="MinHeight" Value="0" />
-            <Setter Property="Margin" Value="{DynamicResource AppBarSeparatorOverflowMargin}" />
+            <Setter Property="Margin" Value="{DynamicResource CommandBarSeparatorOverflowMargin}" />
        </Style>
    </ControlTheme>

@@ -299,9 +300,9 @@
                    MinHeight="{TemplateBinding MinHeight}"
                    Padding="{TemplateBinding Padding}">
                    <Panel>
-                        <DockPanel>
+                        <DockPanel KeyboardNavigation.TabNavigation="Cycle">
                            <!--  Overflow button (docked right)  -->
-                            <AppBarButton
+                            <CommandBarButton
                                Name="PART_OverflowButton"
                                DockPanel.Dock="Right"
                                Icon="{DynamicResource CommandBarOverflowButtonGlyph}"
@@ -351,6 +352,7 @@
                                CornerRadius="{DynamicResource CommandBarOverflowCornerRadius}">

                                <ItemsControl
+                                    Name="PART_OverflowPresenter"
                                    ItemsSource="{Binding OverflowItems, RelativeSource={RelativeSource TemplatedParent}}">
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate>
@@ -16,28 +16,27 @@
    <ControlTheme x:Key="{x:Type ContentPage}" TargetType="ContentPage">
        <Setter Property="Background" Value="{DynamicResource ContentPageBackground}" />
        <Setter Property="Foreground" Value="{DynamicResource ContentPageForeground}" />
-        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
-        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="Template">
            <ControlTemplate TargetType="ContentPage">
-                <Grid RowDefinitions="Auto,*,Auto" Background="{TemplateBinding Background}">
+                <DockPanel>
                    <ContentPresenter
                        Name="PART_TopCommandBar"
-                        Grid.Row="0"
-                        Content="{TemplateBinding TopCommandBar}" />
-                    <ContentPresenter
-                        Name="PART_ContentPresenter"
-                        Grid.Row="1"
-                        Content="{TemplateBinding Content}"
-                        ContentTemplate="{TemplateBinding ContentTemplate}"
-                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+                        DockPanel.Dock="Top" />
                    <ContentPresenter
                        Name="PART_BottomCommandBar"
-                        Grid.Row="2"
-                        Content="{TemplateBinding BottomCommandBar}" />
-                </Grid>
+                        DockPanel.Dock="Bottom" />
+                    <ContentPresenter
+                        Name="PART_ContentPresenter"
+                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}" />
+                </DockPanel>
            </ControlTemplate>
        </Setter>
    </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>
@@ -1,6 +1,4 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Design.PreviewWith>
        <DrawerPage Width="400" Height="300" />
    </Design.PreviewWith>
@@ -8,136 +6,231 @@
    <ControlTheme x:Key="{x:Type DrawerPage}" TargetType="DrawerPage">
        <Setter Property="Background" Value="{DynamicResource DrawerPageBackground}" />
        <Setter Property="Foreground" Value="{DynamicResource DrawerPageForeground}" />
-        <Setter Property="DrawerBackground" Value="{DynamicResource DrawerPageDrawerBackground}" />
-        <Setter Property="DrawerLength" Value="{DynamicResource DrawerPageDrawerLength}" />
-        <Setter Property="CompactDrawerLength" Value="{DynamicResource DrawerPageCompactDrawerLength}" />
-        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
-        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="Template">
            <ControlTemplate TargetType="DrawerPage">
-                <Grid RowDefinitions="Auto,*" Background="{TemplateBinding Background}">
-
-                    <!--  Top bar with pane toggle button  -->
-                    <Border
-                        Name="PART_TopBar"
-                        Grid.Row="0"
-                        MinHeight="{DynamicResource DrawerPageTopBarMinHeight}"
-                        Padding="{DynamicResource DrawerPageTopBarPadding}"
-                        Background="{DynamicResource DrawerPageTopBarBackground}"
-                        BorderBrush="{DynamicResource DrawerPageTopBarBorderBrush}"
-                        BorderThickness="{DynamicResource DrawerPageTopBarBorderThickness}">
-                        <Grid ColumnDefinitions="Auto,Auto,*">
-                            <!--  Pane toggle button (hamburger)  -->
+                <SplitView
+                    Name="PART_SplitView"
+                    CompactPaneLength="{TemplateBinding CompactDrawerLength}"
+                    DisplayMode="{TemplateBinding DisplayMode}"
+                    IsPaneOpen="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                    OpenPaneLength="{TemplateBinding DrawerLength}"
+                    PaneBackground="{Binding DrawerBackground, RelativeSource={RelativeSource TemplatedParent}}">
+                    <SplitView.Pane>
+                        <DockPanel Background="{TemplateBinding DrawerBackground}">
+                            <!--  Compact-mode toggle: visible only in CompactOverlay/CompactInline.  -->
                            <ToggleButton
-                                Name="PART_PaneButton"
-                                Grid.Column="0"
-                                Width="{DynamicResource DrawerPagePaneButtonSize}"
-                                Height="{DynamicResource DrawerPagePaneButtonSize}"
-                                Margin="{DynamicResource DrawerPagePaneButtonMargin}"
-                                VerticalAlignment="Center"
-                                Background="{DynamicResource DrawerPagePaneButtonBackground}"
-                                Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
-                                IsChecked="{TemplateBinding IsOpen, Mode=TwoWay}">
-                                <PathIcon
-                                    Width="16"
-                                    Height="16"
-                                    Data="{DynamicResource DrawerPageMenuGlyph}"
-                                    Foreground="{DynamicResource DrawerPagePaneButtonForeground}" />
-                            </ToggleButton>
-
-                            <!--  Drawer icon (shown in top bar)  -->
-                            <ContentPresenter
-                                Name="PART_PaneIconPresenter"
-                                Grid.Column="1"
-                                VerticalAlignment="Center"
-                                Content="{TemplateBinding DrawerIcon}" />
-                        </Grid>
-                    </Border>
-
-                    <!--  Main area: SplitView + Backdrop  -->
-                    <Panel Grid.Row="1">
-                        <SplitView
-                            Name="PART_SplitView"
-                            CompactPaneLength="{TemplateBinding CompactDrawerLength}"
-                            DisplayMode="{TemplateBinding DisplayMode}"
-                            IsPaneOpen="{TemplateBinding IsOpen, Mode=TwoWay}"
-                            OpenPaneLength="{TemplateBinding DrawerLength}"
-                            PaneBackground="{TemplateBinding DrawerBackground}">
-                            <SplitView.Pane>
-                                <DockPanel>
-                                    <!--  Drawer header  -->
-                                    <ContentPresenter
-                                        Name="PART_DrawerHeader"
-                                        DockPanel.Dock="Top"
-                                        Background="{TemplateBinding DrawerHeaderBackground}"
-                                        Content="{TemplateBinding DrawerHeader}" />
-
-                                    <!--  Drawer footer  -->
-                                    <ContentPresenter
-                                        Name="PART_DrawerFooter"
-                                        DockPanel.Dock="Bottom"
-                                        Background="{TemplateBinding DrawerFooterBackground}"
-                                        Content="{TemplateBinding DrawerFooter}" />
-
-                                    <!--  Compact pane icon (compact mode)  -->
+                                Name="PART_CompactPaneToggle"
+                                DockPanel.Dock="Top"
+                                AutomationProperties.Name="Toggle navigation drawer"
+                                ToolTip.Tip="{DynamicResource STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER}"
+                                Width="{DynamicResource ButtonDefaultHeight}"
+                                Height="{DynamicResource ButtonDefaultHeight}"
+                                HorizontalAlignment="Left"
+                                Background="Transparent"
+                                IsChecked="{Binding #PART_SplitView.IsPaneOpen, Mode=TwoWay}"
+                                IsVisible="False">
+                                <Panel>
+                                    <PathIcon
+                                        Data="{DynamicResource DrawerPageMenuGlyph}"
+                                        Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
+                                        IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNull}}"
+                                        Theme="{DynamicResource InnerPathIcon}" />
                                    <ContentPresenter
                                        Name="PART_CompactPaneIconPresenter"
-                                        DockPanel.Dock="Top"
-                                        IsVisible="False"
-                                        Content="{TemplateBinding DrawerIcon}" />
-
-                                    <!--  Bottom pane icon  -->
+                                        Content="{TemplateBinding DrawerIcon}"
+                                        ContentTemplate="{TemplateBinding DrawerIconTemplate}"
+                                        Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
+                                        IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                                </Panel>
+                            </ToggleButton>
+                            <ContentPresenter
+                                Name="PART_DrawerHeader"
+                                DockPanel.Dock="Top"
+                                Background="{TemplateBinding DrawerHeaderBackground}"
+                                Content="{TemplateBinding DrawerHeader}"
+                                ContentTemplate="{TemplateBinding DrawerHeaderTemplate}"
+                                IsVisible="{TemplateBinding DrawerHeader, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                            <ContentPresenter
+                                Name="PART_DrawerFooter"
+                                DockPanel.Dock="Bottom"
+                                Background="{TemplateBinding DrawerFooterBackground}"
+                                Content="{TemplateBinding DrawerFooter}"
+                                ContentTemplate="{TemplateBinding DrawerFooterTemplate}"
+                                IsVisible="{TemplateBinding DrawerFooter, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                            <ContentPresenter
+                                Name="PART_DrawerPresenter"
+                                Content="{TemplateBinding Drawer}"
+                                ContentTemplate="{TemplateBinding DrawerTemplate}" />
+                        </DockPanel>
+                    </SplitView.Pane>
+                    <Panel>
+                        <DockPanel Name="PART_ContentDock">
+                            <Border
+                                Name="PART_TopBar"
+                                DockPanel.Dock="Top"
+                                Height="{DynamicResource DrawerPageTopBarMinHeight}"
+                                Background="{DynamicResource DrawerPageTopBarBackground}">
+                                <DockPanel>
+                                    <ToggleButton
+                                        Name="PART_PaneButton"
+                                        DockPanel.Dock="Left"
+                                        AutomationProperties.Name="Toggle navigation drawer"
+                                        ToolTip.Tip="{DynamicResource STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER}"
+                                        Width="{DynamicResource ButtonDefaultHeight}"
+                                        Height="{DynamicResource ButtonDefaultHeight}"
+                                        Background="Transparent"
+                                        IsChecked="{Binding #PART_SplitView.IsPaneOpen, Mode=TwoWay}">
+                                        <Panel>
+                                            <PathIcon
+                                                Data="{DynamicResource DrawerPageMenuGlyph}"
+                                                Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
+                                                IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNull}}"
+                                                Theme="{DynamicResource InnerPathIcon}" />
+                                            <ContentPresenter
+                                                Name="PART_PaneIconPresenter"
+                                                Content="{TemplateBinding DrawerIcon}"
+                                                ContentTemplate="{TemplateBinding DrawerIconTemplate}"
+                                                Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
+                                                IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                                        </Panel>
+                                    </ToggleButton>
                                    <ContentPresenter
-                                        Name="PART_BottomPaneIconPresenter"
-                                        DockPanel.Dock="Bottom"
-                                        IsVisible="False" />
-
-                                    <!--  Drawer main content  -->
-                                    <ContentPresenter
-                                        Name="PART_DrawerPresenter"
-                                        Content="{TemplateBinding Drawer}"
-                                        ContentTemplate="{TemplateBinding DrawerTemplate}" />
+                                        Name="PART_TitlePresenter"
+                                        Margin="{DynamicResource DrawerPageTitleMargin}"
+                                        VerticalContentAlignment="Center"
+                                        Content="{TemplateBinding Header}"
+                                        ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                        FontSize="{DynamicResource DrawerPageTitleFontSize}"
+                                        FontWeight="{DynamicResource DrawerPageTitleFontWeight}"
+                                        IsVisible="{TemplateBinding Header, Converter={x:Static ObjectConverters.IsNotNull}}" />
                                </DockPanel>
-                            </SplitView.Pane>
-
-                            <!--  Main page content  -->
+                            </Border>
+                            <Border
+                                Name="PART_BottomBar"
+                                DockPanel.Dock="Bottom"
+                                Height="{DynamicResource DrawerPageTopBarMinHeight}"
+                                Background="{DynamicResource DrawerPageTopBarBackground}"
+                                IsVisible="False">
+                                <DockPanel>
+                                    <ToggleButton
+                                        Name="PART_BottomPaneButton"
+                                        DockPanel.Dock="Left"
+                                        AutomationProperties.Name="Toggle navigation drawer"
+                                        ToolTip.Tip="{DynamicResource STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER}"
+                                        Width="{DynamicResource ButtonDefaultHeight}"
+                                        Height="{DynamicResource ButtonDefaultHeight}"
+                                        Background="Transparent"
+                                        IsChecked="{Binding #PART_SplitView.IsPaneOpen, Mode=TwoWay}">
+                                        <Panel>
+                                            <PathIcon
+                                                Data="{DynamicResource DrawerPageMenuGlyph}"
+                                                Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
+                                                IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNull}}"
+                                                Theme="{DynamicResource InnerPathIcon}" />
+                                            <ContentPresenter
+                                                Name="PART_BottomPaneIconPresenter"
+                                                Content="{TemplateBinding DrawerIcon}"
+                                                ContentTemplate="{TemplateBinding DrawerIconTemplate}"
+                                                Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
+                                                IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                                        </Panel>
+                                    </ToggleButton>
+                                    <ContentPresenter
+                                        Name="PART_BottomTitlePresenter"
+                                        Margin="{DynamicResource DrawerPageTitleMargin}"
+                                        VerticalContentAlignment="Center"
+                                        Content="{TemplateBinding Header}"
+                                        ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                        FontSize="{DynamicResource DrawerPageTitleFontSize}"
+                                        FontWeight="{DynamicResource DrawerPageTitleFontWeight}"
+                                        IsVisible="{TemplateBinding Header, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                                </DockPanel>
+                            </Border>
                            <ContentPresenter
                                Name="PART_ContentPresenter"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                Background="{TemplateBinding Background}"
+                                BorderBrush="{TemplateBinding BorderBrush}"
+                                BorderThickness="{TemplateBinding BorderThickness}"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
-                        </SplitView>
-
-                        <!--  Backdrop overlay (shown in overlay/flyout modes)  -->
+                                CornerRadius="{TemplateBinding CornerRadius}" />
+                        </DockPanel>
                        <Border
                            Name="PART_Backdrop"
                            Background="{TemplateBinding BackdropBrush}"
                            IsHitTestVisible="False"
                            IsVisible="False" />
-
-                        <!--  Compact pane toggle  -->
-                        <ToggleButton
-                            Name="PART_CompactPaneToggle"
-                            IsVisible="False" />
                    </Panel>
-                </Grid>
+                </SplitView>
            </ControlTemplate>
        </Setter>

-        <!--  Pseudo-class: right-side drawer  -->
-        <Style Selector="^:placement-right /template/ SplitView#PART_SplitView">
-            <Setter Property="PanePlacement" Value="Right" />
+        <Style Selector="^:placement-right /template/ ToggleButton#PART_PaneButton">
+            <Setter Property="DockPanel.Dock" Value="Right" />
        </Style>

-        <!--  Pseudo-class: top drawer  -->
-        <Style Selector="^:placement-top /template/ SplitView#PART_SplitView">
-            <Setter Property="PanePlacement" Value="Top" />
+        <!--  Bottom placement: swap top bar for bottom bar  -->
+        <Style Selector="^:placement-bottom /template/ Border#PART_TopBar">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+        <Style Selector="^:placement-bottom /template/ Border#PART_BottomBar">
+            <Setter Property="IsVisible" Value="True" />
        </Style>

-        <!--  Pseudo-class: bottom drawer  -->
-        <Style Selector="^:placement-bottom /template/ SplitView#PART_SplitView">
-            <Setter Property="PanePlacement" Value="Bottom" />
+        <!--  Bottom placement + compact modes: pane compact strip provides toggle, hide bottom bar  -->
+        <Style Selector="^:placement-bottom[DisplayMode=CompactOverlay] /template/ Border#PART_BottomBar">
+            <Setter Property="IsVisible" Value="False" />
        </Style>
+        <Style Selector="^:placement-bottom[DisplayMode=CompactInline] /template/ Border#PART_BottomBar">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+
+        <!--  Horizontal pane (Bottom/Top): compact toggle must dock Left so drawer content can fill the rest  -->
+        <Style Selector="^:placement-bottom /template/ ToggleButton#PART_CompactPaneToggle">
+            <Setter Property="DockPanel.Dock" Value="Left" />
+        </Style>
+        <Style Selector="^:placement-top /template/ ToggleButton#PART_CompactPaneToggle">
+            <Setter Property="DockPanel.Dock" Value="Left" />
+        </Style>
+
+        <Style Selector="^[DrawerBehavior=Locked] /template/ Border#PART_TopBar">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+
+        <Style Selector="^[DrawerBehavior=Disabled] /template/ Border#PART_TopBar">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+
+        <Style Selector="^:detail-is-navpage /template/ Border#PART_TopBar">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+
+        <Style Selector="^[DisplayMode=CompactOverlay] /template/ Border#PART_TopBar">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+
+        <Style Selector="^[DisplayMode=CompactOverlay] /template/ ToggleButton#PART_CompactPaneToggle">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+
+        <Style Selector="^[DisplayMode=CompactInline] /template/ Border#PART_TopBar">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+
+        <Style Selector="^[DisplayMode=CompactInline] /template/ ToggleButton#PART_CompactPaneToggle">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+
+        <Style Selector="^[IsInNavigationPage=True] /template/ Border#PART_TopBar">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+
+        <!--  NavigationPage already hosts a hamburger toggle — suppress the compact pane toggle.  -->
+        <Style Selector="^:detail-is-navpage /template/ ToggleButton#PART_CompactPaneToggle">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+
    </ControlTheme>
 </ResourceDictionary>
@@ -10,7 +10,7 @@
                <Panel>
                    <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
                    <Border Background="{TemplateBinding Background}">
-                        <VisualLayerManager>
+                        <VisualLayerManager Name="PART_VisualLayerManager">
                            <ContentPresenter
                                Name="PART_ContentPresenter"
                                Margin="{TemplateBinding Padding}"
@@ -116,5 +116,13 @@
                </Border>
            </ControlTemplate>
        </Setter>
+
+        <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+            <Setter Property="RecognizesAccessKey" Value="True" />
+        </Style>
+
+        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="RecognizesAccessKey" Value="True" />
+        </Style>
    </ControlTheme>
 </ResourceDictionary>
@@ -54,4 +54,17 @@
            </ControlTemplate>
        </Setter>
    </ControlTheme>
+
+    <ControlTheme
+        x:Key="HorizontalMenuFlyoutPresenter"
+        TargetType="MenuFlyoutPresenter"
+        BasedOn="{StaticResource {x:Type MenuFlyoutPresenter}}">
+        <Setter Property="Padding" Value="0" />
+        <Setter Property="MinWidth" Value="{DynamicResource HorizontalMenuFlyoutThemeMinWidth}" />
+        <Setter Property="ItemsPanel">
+            <ItemsPanelTemplate>
+                <StackPanel Orientation="Horizontal" />
+            </ItemsPanelTemplate>
+        </Setter>
+    </ControlTheme>
 </ResourceDictionary>
@@ -6,89 +6,118 @@
    </Design.PreviewWith>

    <ControlTheme x:Key="{x:Type NavigationPage}" TargetType="NavigationPage">
-        <Setter Property="Background" Value="{DynamicResource NavigationPageBackground}" />
-        <Setter Property="Foreground" Value="{DynamicResource NavigationPageForeground}" />
+        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BarHeight" Value="{DynamicResource NavigationPageBarMinHeight}" />
        <Setter Property="Template">
            <ControlTemplate TargetType="NavigationPage">
-                <Grid RowDefinitions="Auto,*,Auto" Background="{TemplateBinding Background}">
-                    <!--  Top command bar  -->
-                    <ContentPresenter
-                        Name="PART_TopCommandBar"
-                        Grid.Row="0" />
-
-                    <!--  Content host (pages + navigation bar)  -->
-                    <Panel Name="PART_ContentHost" Grid.Row="1">
-                        <!--  Previous page (back animation target)  -->
-                        <ContentPresenter Name="PART_PageBackPresenter" />
-
-                        <!--  Current page  -->
-                        <ContentPresenter Name="PART_PagePresenter" />
-
-                        <!--  Modal back page  -->
-                        <ContentPresenter Name="PART_ModalBackPresenter" />
-
-                        <!--  Modal page  -->
-                        <ContentPresenter Name="PART_ModalPresenter" />
-
-                        <!--  Navigation bar (overlaid on content by default)  -->
+                <Panel ClipToBounds="True">
+                    <DockPanel>
                        <Border
-                            Name="PART_NavigationBar"
-                            MinHeight="{TemplateBinding BarHeight}"
-                            Padding="{DynamicResource NavigationPageBarPadding}"
-                            VerticalAlignment="Top"
-                            Background="{DynamicResource NavigationPageBarBackground}"
-                            BorderBrush="{DynamicResource NavigationPageBarBorderBrush}"
-                            BorderThickness="{DynamicResource NavigationPageBarBorderThickness}">
-                            <Grid ColumnDefinitions="Auto,*,Auto">
-                                <Button
-                                    Name="PART_BackButton"
-                                    Grid.Column="0"
-                                    MinHeight="{DynamicResource NavigationPageBarMinHeight}"
-                                    MinWidth="{DynamicResource NavigationPageBarMinHeight}"
-                                    Padding="8"
-                                    VerticalAlignment="Center"
-                                    IsVisible="{TemplateBinding IsBackButtonEffectivelyVisible}"
-                                    Background="{DynamicResource NavigationPageBackButtonBackground}"
-                                    Theme="{StaticResource BorderlessButton}">
-                                    <Panel Background="Transparent">
-                                        <PathIcon
-                                            Theme="{StaticResource InnerPathIcon}"
-                                            Classes="Large"
-                                            Data="{DynamicResource NavigationPageBackButtonGlyph}"
-                                            Foreground="{DynamicResource NavigationPageBackButtonForeground}"
-                                            IsVisible="{Binding CurrentPage?.(NavigationPage.BackButtonContent), RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static ObjectConverters.IsNull}, FallbackValue=False}" />
-                                        <ContentPresenter
-                                            Content="{Binding CurrentPage?.(NavigationPage.BackButtonContent), RelativeSource={RelativeSource TemplatedParent}, FallbackValue={x:Null}}"
-                                            IsVisible="{Binding CurrentPage?.(NavigationPage.BackButtonContent), RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static ObjectConverters.IsNotNull}, FallbackValue=False}"
-                                            VerticalAlignment="Center"
-                                            HorizontalAlignment="Center" />
-                                    </Panel>
-                                </Button>
-                                <ContentPresenter
-                                    Grid.Column="1"
-                                    HorizontalAlignment="Center"
-                                    VerticalAlignment="Center" />
-                            </Grid>
-                        </Border>
-                    </Panel>
+                            Name="PART_NavBarSpacer"
+                            Height="{TemplateBinding EffectiveBarHeight}"
+                            IsVisible="False"
+                            DockPanel.Dock="Top" />
+                        <ContentPresenter
+                            Name="PART_BottomCommandBar"
+                            DockPanel.Dock="Bottom"
+                            Background="{TemplateBinding Background}"
+                            Content="{Binding CurrentPage.(NavigationPage.BottomCommandBar), RelativeSource={RelativeSource TemplatedParent}, FallbackValue={x:Null}}" />
+                        <Panel
+                            Name="PART_ContentHost"
+                            Background="{TemplateBinding Background}"
+                            ClipToBounds="True">
+                            <ContentPresenter Name="PART_PageBackPresenter" />
+                            <ContentPresenter Name="PART_PagePresenter" />
+                        </Panel>
+                    </DockPanel>

-                    <!--  Bottom command bar  -->
+                    <Border
+                        Name="PART_NavigationBar"
+                        VerticalAlignment="Top"
+                        MinHeight="{TemplateBinding EffectiveBarHeight}"
+                        Padding="{DynamicResource NavigationPageBarPadding}"
+                        Background="{DynamicResource NavigationPageBarBackground}"
+                        BorderBrush="{DynamicResource NavigationPageBarBorderBrush}"
+                        BorderThickness="{DynamicResource NavigationPageBarBorderThickness}">
+                        <Grid ColumnDefinitions="Auto,*,Auto">
+                            <Button
+                                Name="PART_BackButton"
+                                Grid.Column="0"
+                                Classes="Tertiary"
+                                Height="{TemplateBinding BarHeight}"
+                                Width="{TemplateBinding BarHeight}"
+                                Padding="8"
+                                IsVisible="{TemplateBinding IsBackButtonEffectivelyVisible}"
+                                Theme="{StaticResource BorderlessButton}">
+                                <Panel Background="Transparent">
+                                    <PathIcon
+                                        Name="PART_BackButtonDefaultIcon"
+                                        Theme="{StaticResource InnerPathIcon}"
+                                        Data="{DynamicResource NavigationPageBackButtonGlyph}" />
+                                    <ContentPresenter
+                                        Name="PART_BackButtonContentPresenter"
+                                        VerticalAlignment="Center"
+                                        HorizontalAlignment="Center" />
+                                </Panel>
+                            </Button>
+                            <ContentPresenter
+                                Name="PART_Header"
+                                Grid.Column="1"
+                                FontWeight="SemiBold"
+                                Content="{Binding CurrentPage?.Header, RelativeSource={RelativeSource TemplatedParent}, FallbackValue={x:Null}}"
+                                ContentTemplate="{Binding CurrentPage?.HeaderTemplate, RelativeSource={RelativeSource TemplatedParent}, FallbackValue={x:Null}}"
+                                VerticalAlignment="Center"
+                                Margin="12,0" />
+                            <ContentPresenter
+                                Name="PART_TopCommandBar"
+                                Grid.Column="2"
+                                HorizontalAlignment="Right"
+                                Content="{Binding CurrentPage?.(NavigationPage.TopCommandBar), RelativeSource={RelativeSource TemplatedParent}, FallbackValue={x:Null}}" />
+                        </Grid>
+                    </Border>
+
+                    <Border
+                        Name="PART_NavBarShadow"
+                        ZIndex="1"
+                        VerticalAlignment="Top"
+                        IsVisible="False"
+                        Height="4"
+                        IsHitTestVisible="False">
+                        <Border.Background>
+                            <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                                <GradientStop Color="#0C000000" Offset="0" />
+                                <GradientStop Color="#00000000" Offset="1" />
+                            </LinearGradientBrush>
+                        </Border.Background>
+                    </Border>
                    <ContentPresenter
-                        Name="PART_BottomCommandBar"
-                        Grid.Row="2" />
-                </Grid>
+                        Name="PART_ModalBackPresenter"
+                        ZIndex="99"
+                        IsVisible="False"
+                        Background="{TemplateBinding Background}" />
+                    <ContentPresenter
+                        Name="PART_ModalPresenter"
+                        ZIndex="100"
+                        IsVisible="False"
+                        Background="{TemplateBinding Background}" />
+                </Panel>
            </ControlTemplate>
        </Setter>

-        <!--  Navigation bar is inset (content flows under the bar)  -->
-        <Style Selector="^:nav-bar-inset /template/ Border#PART_NavigationBar">
-            <Setter Property="BorderThickness" Value="0" />
+        <Style Selector="^ /template/ Border#PART_NavigationBar">
+            <Setter Property="Background" Value="{DynamicResource NavigationBarBackground}" />
        </Style>

-        <!--  Compact navigation bar  -->
-        <Style Selector="^:nav-bar-compact /template/ Border#PART_NavigationBar">
-            <Setter Property="MinHeight" Value="0" />
+        <Style Selector="^:nav-bar-inset /template/ Border#PART_NavBarSpacer">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+
+        <Style Selector="^:nav-bar-compact /template/ ContentPresenter#PART_TopCommandBar CommandBar">
+            <Setter Property="DefaultLabelPosition" Value="Collapsed" />
+        </Style>
+        
+        <Style Selector="^.Large">
+            <Setter Property="BarHeight" Value="{DynamicResource NavigationPageBarLargeMinHeight}" />
        </Style>
    </ControlTheme>
 </ResourceDictionary>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Zhang Dian	7f557bb2c5	feat: update window decoration styles to use transparent backgrounds.	2026-05-21 15:14:24 +08:00
Zhang Dian	ec94bdd36d	Integrate font management for Linux demo (#822 ) * feat: integrate font management by adding Semi.Avalonia.Demo.Fonts project. * chore: test on ubuntu. * feat: add linux options. * feat: update theme settings and adjust window decorations. * feat: add font to DRM project. * misc: net8.0->net10.0	2026-05-18 21:16:03 +08:00
Zhang Dian	331141197d	Enhance DrawerPage (#813 ) * feat: enhance navigation and UI structure in MainView and Application. * fix: using ContentPreseter and add HeaderTemplate. * feat: add locale resource for navigation drawer toggle button text. * feat: add customizations for DrawerPageDemo. * fix: fix DrawerPage title vertical alignment to Center. * Update DrawerPageDemo.axaml Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update DrawerPageDemo.axaml.cs Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * fix: fix bottom bar styles. * fix: update border background color in DrawerPageDemo.axaml. --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>	2026-04-30 14:53:38 +08:00
Zhang Dian	b0373e9697	chore: enable CPM with single file. (#816 ) * chore: enable CPM with single file. * fix: fix copilot comments.	2026-04-30 14:37:51 +08:00
Copilot	d2f789bdbd	Add scheduled workflow to auto-remove old CI artifacts (#815 ) * Initial plan * Add workflow to remove old artifacts Agent-Logs-Url: https://github.com/irihitech/Semi.Avalonia/sessions/ac7e9f88-0a15-4dfe-aae7-64cda4c5ad1e Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> * ci: add workflow_dispatch trigger to remove-old-artifacts.yml. * ci: add remove-old-artifacts.yml to solution file. --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> Co-authored-by: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>	2026-04-28 11:10:34 +08:00
Zhang Dian	d164acea21	feat: enhance navigation and UI structure in MainView and Application. (#811 ) * feat: enhance navigation and UI structure in MainView and Application. * feat: implement singleton pattern for PaletteDemoViewModel and add initialization check * feat: set FontWeight to Normal for navigation button in MainView --------- Co-authored-by: Dong Bin <popmessiah@hotmail.com>	2026-04-24 19:58:27 +08:00
Copilot	1f10fd680f	Add git commit message convention under .github (#789 )	2026-04-24 14:48:16 +08:00
Dong Bin	480316e2f9	Change indent size for Xaml files from 2 to 4	2026-04-21 16:02:25 +08:00
rabbitism	a024d2ca0e	chore: fix datagrid version and bump package version	2026-04-18 16:49:25 +08:00
Copilot	18dec50bb5	Bump Avalonia version to 12.0.1 (#805 ) Agent-Logs-Url: https://github.com/irihitech/Semi.Avalonia/sessions/ccdc8843-c9ae-4277-89e1-f25308ba3eaf Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com>	2026-04-18 16:44:43 +08:00
Zhang Dian	6eb871581c	misc: replace QR code of community-support.	2026-04-17 12:57:11 +08:00
Zhang Dian	3807090a4b	misc: follow .editorconfig from Avalonia. (#798 ) * misc: follow .editorconfig from Avalonia. * fix: remove Avalonia DevAnalyzer preferences.	2026-04-16 17:37:22 +08:00
Zhang Dian	89cdae2d39	Update AutoCompleteBox bindings and clean up project files (#802 ) * fix: update ValueMemberBinding syntax for AutoCompleteBox components. * chore: remove AvaloniaUseCompiledBindingsByDefault property from project files. * ci: upgrade draft release version.	2026-04-15 17:01:28 +08:00
Zhang Dian	555ecf16d9	Add icons to TabbedPage content and improve layout. (#801 ) * fix: add icons to TabbedPage content and improve layout. * fix: only update Placement=Top/Bottom in TabbedPage.	2026-04-13 22:46:53 +08:00
Zhang Dian	49ee1c12cc	fix: fix workflow_call secrets issue.	2026-04-10 14:56:12 +08:00
Zhang Dian	4447475f18	chore: bump ColorPicker & DataGrid version to 12.0.0.	2026-04-08 01:00:05 +08:00
Zhang Dian	e53e744d1f	Refactor ColorPicker components and improve UI consistency (#795 ) * 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.	2026-04-08 00:55:03 +08:00
Zhang Dian	6eaa47e7ce	chore: bump version to 12.0.0.	2026-04-08 00:09:46 +08:00
Zhang Dian	1edc65c091	Remove obsolete resources. (#792 )	2026-04-08 00:03:22 +08:00
Dong Bin	1348149957	Update Drawer to match upstream design (#790 ) * feat: update DrawerPage and related resources for improved layout and functionality * feat: enable mouse swipe gesture for Drawer control. * chore: remove useless resources. * chore: remove useless Style. * chore: using TemplateBinding. * fix: using InnerPathIcon theme for Icon. * fix: use normal Binding. --------- Co-authored-by: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>	2026-04-07 23:56:17 +08:00
Zhang Dian	3b4443cd54	Fix CarouselPage ControlTemplate and sync NavigationPage template (#791 ) * fix: specify TargetType in ControlTemplate for CarouselPage and remove redundant ItemsSource bindings in TabbedPage. * feat: sync ContentPage with Avalonia Fluent version. * fix: sync upstream NavigationPage template. * feat: adjust NavigationPage bar height and add large style support * feat: add ToggleSwitch for large style support in NavigationPageDemo --------- Co-authored-by: Dong Bin <popmessiah@hotmail.com>	2026-04-07 23:53:11 +08:00
Zhang Dian	35bea6ff1f	feat: add maximize2 and restore icons.	2026-04-07 21:30:36 +08:00
Zhang Dian	c393d41112	chore: upgrade version to Avalonia 12.0.0.	2026-04-07 21:29:32 +08:00
Zhang Dian	d4c4ef1dba	Merge branch '12.0.0-rc2'	2026-04-07 21:14:20 +08:00
Zhang Dian	35b62fe3af	chore: bump version to 12.0.0-rc2.	2026-04-07 11:56:21 +08:00
Zhang Dian	c48d96e40f	Sync Avalonia 12.0.0-rc2 changes (#786 ) * chore: AppBar -> CommanrBar. * feat: Add keyboard navigation for overflow CommandBar popup. * chore: Style -> Theme in PipsPager. * chore: add Header/Footer templates to DrawerPage. * feaa: hide caption buttons when the platform does not support the action. * feat: Touch Improvements to TextBox. * chore: remove Opacity from PART_Placeholder. * feat: enable access key recognition for GroupBox. * feat: limit label text to a single line in CommandBar.	2026-04-01 23:01:45 +08:00
Zhang Dian	c128feb4ff	Refactor ProgressBar styles for improved layout and animation (#750 ) * refactor: refactor ProgressBar styles for improved layout and animation. * fix: set MinHeight for ProgressBar text part. * chore: remove useless Progress resources.	2026-04-01 18:05:01 +08:00
Zhang Dian	48c3837d81	chore: upgrade to Avalonia 12.0.0-rc2.	2026-04-01 11:28:01 +08:00
Zhang Dian	f22709fcb1	Update CaptionButtonForeground resource and WindowDrawnDecorations layout (#779 ) * fix: update CaptionButtonForeground resource key and remove cursor setter. * fix: update WindowDrawnDecorations layout. * feat: add CaptionButtonDisabledForeground for disabled state and WindowCustomizationsPage.	2026-03-26 14:15:47 +08:00
Zhang Dian	0fbcf43309	feat: update TabItem with icon. (#778 )	2026-03-25 19:51:23 +08:00
Zhang Dian	a1bda0d2d9	fix: remove ExtendClientAreaTitleBarHeightHint from MainWindow.axaml.	2026-03-25 14:57:45 +08:00
Zhang Dian	52cc3887b1	feat: add MaximizeGlyph & RestoreGlyph. (#777 )	2026-03-24 14:12:33 +08:00
Copilot	9cf27b3906	Add SplitButtonSpinner theme for ButtonSpinner and NumericUpDown (#776 ) * Initial plan * Add SplitButtonSpinner theme for ButtonSpinner Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> Agent-Logs-Url: https://github.com/irihitech/Semi.Avalonia/sessions/7095fb6c-cdd9-48c0-9076-85a35fa93453 * feat: enhance ButtonSpinner and NumericUpDown with new styles and properties. * fix: fix Glyph and enlarge icons. --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> Co-authored-by: Dong Bin <popmessiah@hotmail.com> Co-authored-by: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>	2026-03-23 17:20:41 +08:00
Zhang Dian	bfb3dd671b	Add fullscreen toggle functionality and update popover alignment (#773 ) * fix: update Height binding and add VerticalAlignment to fullscreen popover. * feat: add fullscreen toggle functionality with F11 key.	2026-03-21 22:21:23 +08:00
Zhang Dian	665dca3bd3	fix: fix the draft release version tag.	2026-03-21 18:18:49 +08:00
Zhang Dian	f5e56511ac	chore: bump to 12.0.0-rc1.	2026-03-21 18:08:48 +08:00
Dong Bin	b3b7459088	Pr3/carousel page (#772 ) * feat: add CarouselPage and PipsPager. * feat: add PipsPager control and integrate into index * feat: add PipsPagerDemo and integrate into MainView --------- Co-authored-by: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>	2026-03-21 17:58:35 +08:00
Zhang Dian	96f7f3d1e1	Adjust Resource Structure (#771 ) * chore: update GitHub Actions to use latest versions of actions. * feat: update theme resource structure and remove Schemes. * refactor: simplify locale resource handling and remove redundant code. * feat: add Light theme resource to ColorPicker and DataGrid semi themes. * feat: replace SetResources with BulkSetResources.	2026-03-21 17:57:56 +08:00
Zhang Dian	64e2b50a1d	fix: add ContentTemplate binding for DrawerIcon in DrawerPage.axaml.	2026-03-20 15:47:53 +08:00
Zhang Dian	fbfe5b0b6a	fix: add Name to VisualLayerManager for 12.0.0-rc1.	2026-03-20 15:11:30 +08:00
Zhang Dian	bd4d4e2096	chore: update package versions to 12.0.0-rc1.	2026-03-20 15:05:00 +08:00
Dong Bin	01e213d741	Implement DataGrid V12 (#770 ) * feat: bring datagrid demo back. * feat: add FunctionalColorGroupControl and ShadowGroupControl with data binding * Add 10 TFM Co-authored-by: Zhang Dian <54255897+zdpcdt@users.noreply.github.com> * feat: Use new property Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * fix: fix changelog. Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * fix: fix sort member path. Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * chore: remove useless property. --------- Co-authored-by: Zhang Dian <54255897+zdpcdt@users.noreply.github.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>	2026-03-19 13:28:13 +08:00
Copilot	77dffc55b1	Sync 45 new icons from Semi Design commit ba384587 (#761 ) * Initial plan * Sync 45 new icons from Semi Design commit ba384587 Co-authored-by: zdpcdt <54255897+zdpcdt@users.noreply.github.com> * fix: correct geometry paths for Semi icons. * fix: update EyeClosedSolidStroked & IconHornStroked paths for Semi icons in StrokedIcons.axaml. * fix: resolve copilot review. --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: zdpcdt <54255897+zdpcdt@users.noreply.github.com>	2026-03-10 14:42:21 +08:00
Gehongyan	3ba357b691	Fix TextBox MaxLines property not constraining height in Semi theme (#753 ) * Initial plan * Fix TextBox MaxLines property by adding Name=PART_ScrollViewer to ScrollViewer elements Co-authored-by: gehongyan <21241496+gehongyan@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>	2026-03-05 23:16:29 +08:00