chore: bump version to 12.0.3.

create-dmg (#818 )
* create-dmg * create-dmg-update * Potential fix for pull request finding OK Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
2026-06-07 10:28:21 +08:00 · 2026-05-25 10:54:00 +08:00 · 2026-05-25 10:54:00 +08:00 · 2026-05-25 10:13:48 +08:00 · 2026-05-21 17:30:35 +08:00 · 2026-05-21 15:14:24 +08:00
382 changed files with 10526 additions and 6347 deletions
@@ -0,0 +1,243 @@
+# 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
+
+[*.{yml,yaml}]
+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.
+```
@@ -2,7 +2,7 @@ name: Deploy to GitHub Pages

 env:
  PROJECT_PATH: demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj
-  OUTPUT_PATH: demo/Semi.Avalonia.Demo.Web/bin/Release/net8.0-browser/publish/wwwroot
+  OUTPUT_PATH: demo/Semi.Avalonia.Demo.Web/bin/Release/net10.0-browser/publish/wwwroot
 on:
  workflow_dispatch:

@@ -11,12 +11,13 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v6

-      - name: Setup .NET 8
-        uses: actions/setup-dotnet@v4
+      - name: Setup dotnet
+        uses: actions/setup-dotnet@v5
        with:
-          dotnet-version: 8.0.x
+          dotnet-version: |
+            10.0.x

      - name: Install wasm-tools
        run: dotnet workload install wasm-tools
@@ -24,9 +25,6 @@ jobs:
      - name: Publish .NET Project
        run: dotnet publish $PROJECT_PATH -c Release --nologo

-      - name: Change base-tag in index.html
-        run: sed -i 's#<base href="/" />#<base href="/Semi.Avalonia/" />#g' $OUTPUT_PATH/index.html
-
      - name: copy index.html to 404.html
        run: cp $OUTPUT_PATH/index.html $OUTPUT_PATH/404.html

@@ -34,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,27 +6,23 @@ on:
      Version_Prefix:
        description: 'Version Prefix'
        required: true
-        default: '11.2.999'
+        default: '12.0.999'
        type: string
      Semi_Avalonia:
        description: 'Pack Semi.Avalonia'
-        required: true
-        default: 'true'
+        default: true
        type: boolean
      Semi_Avalonia_ColorPicker:
        description: 'Pack Semi.Avalonia.ColorPicker'
-        required: true
-        default: 'true'
+        default: true
        type: boolean
      Semi_Avalonia_DataGrid:
        description: 'Pack Semi.Avalonia.DataGrid'
-        required: true
-        default: 'false'
+        default: false
        type: boolean
      Semi_Avalonia_TreeDataGrid:
        description: 'Pack Semi.Avalonia.TreeDataGrid'
-        required: true
-        default: 'false'
+        default: false
        type: boolean

 jobs:
@@ -35,39 +31,39 @@ jobs:

    steps:
      - name: Checkout
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v6

      - name: Get Version
        run: |
          VERSION_TIMESTAMP=$(date +'%Y%m%d%H%M%S')
-          VERSION="${{ github.event.inputs.Version_Prefix }}-nightly-${VERSION_TIMESTAMP}"
+          VERSION="${{ inputs.Version_Prefix }}-nightly-${VERSION_TIMESTAMP}"
          echo "VERSION=$VERSION" >> $GITHUB_ENV

      - name: Pack Semi.Avalonia
-        if: ${{ github.event.inputs.Semi_Avalonia == 'true' }}
-        run: dotnet pack ./src/Semi.Avalonia -o ./nugets /p:Version=${{ env.VERSION }}
+        if: ${{ inputs.Semi_Avalonia }}
+        run: dotnet pack src/Semi.Avalonia -o nugets /p:Version=${{ env.VERSION }}

      - name: Pack Semi.Avalonia.ColorPicker
-        if: ${{ github.event.inputs.Semi_Avalonia_ColorPicker == 'true' }}
-        run: dotnet pack ./src/Semi.Avalonia.ColorPicker -o ./nugets /p:Version=${{ env.VERSION }}
+        if: ${{ inputs.Semi_Avalonia_ColorPicker }}
+        run: dotnet pack src/Semi.Avalonia.ColorPicker -o nugets /p:Version=${{ env.VERSION }}

      - name: Pack Semi.Avalonia.DataGrid
-        if: ${{ github.event.inputs.Semi_Avalonia_DataGrid == 'true' }}
-        run: dotnet pack ./src/Semi.Avalonia.DataGrid -o ./nugets /p:Version=${{ env.VERSION }}
+        if: ${{ inputs.Semi_Avalonia_DataGrid }}
+        run: dotnet pack src/Semi.Avalonia.DataGrid -o nugets /p:Version=${{ env.VERSION }}

      - name: Pack Semi.Avalonia.TreeDataGrid
-        if: ${{ github.event.inputs.Semi_Avalonia_TreeDataGrid == 'true' }}
-        run: dotnet pack ./src/Semi.Avalonia.TreeDataGrid -o ./nugets /p:Version=${{ env.VERSION }}
+        if: ${{ inputs.Semi_Avalonia_TreeDataGrid }}
+        run: dotnet pack src/Semi.Avalonia.TreeDataGrid -o nugets /p:Version=${{ env.VERSION }}

      - name: Add NuGet Source
        run: dotnet nuget add source ${{ secrets.IRIHI_NUGET_NIGHTLY_FEED }} -n irihi.tech -u ${{ secrets.IRIHI_NUGET_USERNAME }} -p ${{ secrets.IRIHI_NUGET_PASSWORD }} --store-password-in-clear-text

      - name: Publish Nightly Package
-        run: dotnet nuget push "./nugets/*.nupkg" --api-key ${{ secrets.IRIHI_NUGET_API_KEY }} --source irihi.tech --skip-duplicate
+        run: dotnet nuget push "nugets/*.nupkg" --api-key ${{ secrets.IRIHI_NUGET_API_KEY }} --source irihi.tech --skip-duplicate

      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.3.1
+        uses: actions/upload-artifact@v7
        with:
          name: nugets
-          path: ./nugets
+          path: nugets
        if: always()
@@ -3,26 +3,44 @@ name: Pack to NuGet
 on:
  workflow_dispatch:
    inputs:
+      Upload_to_NuGet:
+        description: 'Upload to NuGet'
+        default: true
+        type: boolean
      Semi_Avalonia:
        description: 'Pack Semi.Avalonia'
-        required: true
-        default: 'true'
+        default: true
        type: boolean
      Semi_Avalonia_ColorPicker:
        description: 'Pack Semi.Avalonia.ColorPicker'
-        required: true
-        default: 'true'
+        default: true
        type: boolean
      Semi_Avalonia_DataGrid:
        description: 'Pack Semi.Avalonia.DataGrid'
-        required: true
-        default: 'false'
+        default: false
        type: boolean
      Semi_Avalonia_TreeDataGrid:
        description: 'Pack Semi.Avalonia.TreeDataGrid'
-        required: true
-        default: 'false'
+        default: false
        type: boolean
+  workflow_call:
+    inputs:
+      Upload_to_NuGet:
+        type: boolean
+        default: false
+      Semi_Avalonia:
+        type: boolean
+        default: true
+      Semi_Avalonia_ColorPicker:
+        type: boolean
+        default: true
+      Semi_Avalonia_DataGrid:
+        type: boolean
+        default: true
+      Semi_Avalonia_TreeDataGrid:
+        type: boolean
+        default: true
+    secrets: {}

 jobs:
  Pack_to_NuGet:
@@ -30,30 +48,31 @@ jobs:

    steps:
      - name: Checkout
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v6

      - name: Pack Semi.Avalonia
-        if: ${{ github.event.inputs.Semi_Avalonia == 'true' }}
-        run: dotnet pack ./src/Semi.Avalonia -o ./nugets
+        if: ${{ inputs.Semi_Avalonia }}
+        run: dotnet pack src/Semi.Avalonia -o nugets

      - name: Pack Semi.Avalonia.ColorPicker
-        if: ${{ github.event.inputs.Semi_Avalonia_ColorPicker == 'true' }}
-        run: dotnet pack ./src/Semi.Avalonia.ColorPicker -o ./nugets
+        if: ${{ inputs.Semi_Avalonia_ColorPicker }}
+        run: dotnet pack src/Semi.Avalonia.ColorPicker -o nugets

      - name: Pack Semi.Avalonia.DataGrid
-        if: ${{ github.event.inputs.Semi_Avalonia_DataGrid == 'true' }}
-        run: dotnet pack ./src/Semi.Avalonia.DataGrid -o ./nugets
+        if: ${{ inputs.Semi_Avalonia_DataGrid }}
+        run: dotnet pack src/Semi.Avalonia.DataGrid -o nugets

      - name: Pack Semi.Avalonia.TreeDataGrid
-        if: ${{ github.event.inputs.Semi_Avalonia_TreeDataGrid == 'true' }}
-        run: dotnet pack ./src/Semi.Avalonia.TreeDataGrid -o ./nugets
+        if: ${{ inputs.Semi_Avalonia_TreeDataGrid }}
+        run: dotnet pack src/Semi.Avalonia.TreeDataGrid -o nugets

-      - name: Publish NuGet package
-        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 to NuGet
+        if: ${{ inputs.Upload_to_NuGet }}
+        run: dotnet nuget push "nugets/*.nupkg" --api-key ${{ secrets.NUGET_ORG_API_KEY }} --source https://api.nuget.org/v3/index.json --skip-duplicate

      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.3.1
+        uses: actions/upload-artifact@v7
        with:
          name: nugets
-          path: ./nugets
+          path: nugets
        if: always()
@@ -3,116 +3,338 @@ name: Publish Demo
 on:
  workflow_dispatch:
    inputs:
-      platform:
-        description: 'Platform to publish'
-        required: true
-        default: 'all'
-        type: choice
-        options:
-          - 'windows'
-          - 'linux'
-          - 'android'
-          - 'all'
-      include_aot:
-        description: 'Include Windows AOT packaging'
-        required: true
-        default: true
+      win-x64:
+        description: 'Windows x64'
+        default: false
        type: boolean
-      include_drm:
-        description: 'Include Linux DRM packaging'
-        required: true
-        default: true
+      win-x64-aot:
+        description: 'Windows x64 AOT'
+        default: false
        type: boolean
+      linux-x64:
+        description: 'Linux x64'
+        default: false
+        type: boolean
+      linux-x64-aot:
+        description: 'Linux x64 AOT'
+        default: false
+        type: boolean
+      drm-linux-x64:
+        description: 'DRM Linux x64'
+        default: false
+        type: boolean
+      drm-linux-x64-aot:
+        description: 'DRM Linux x64 AOT'
+        default: false
+        type: boolean
+      osx-arm64:
+        description: 'macOS arm64'
+        default: false
+        type: boolean
+      osx-arm64-aot:
+        description: 'macOS arm64 AOT'
+        default: false
+        type: boolean
+      osx-x64:
+        description: 'macOS Intel x64'
+        default: false
+        type: boolean
+      osx-x64-aot:
+        description: 'macOS Intel x64 AOT'
+        default: false
+        type: boolean
+      android-arm64:
+        description: 'Android arm64'
+        default: false
+        type: boolean
+  workflow_call:
+    inputs:
+      win-x64:
+        type: boolean
+        default: true
+      win-x64-aot:
+        type: boolean
+        default: true
+      linux-x64:
+        type: boolean
+        default: true
+      linux-x64-aot:
+        type: boolean
+        default: true
+      drm-linux-x64:
+        type: boolean
+        default: true
+      drm-linux-x64-aot:
+        type: boolean
+        default: true
+      osx-arm64:
+        type: boolean
+        default: true
+      osx-arm64-aot:
+        type: boolean
+        default: true
+      osx-x64:
+        type: boolean
+        default: true
+      osx-x64-aot:
+        type: boolean
+        default: true
+      android-arm64:
+        type: boolean
+        default: true

 jobs:
-  windows:
-    if: ${{ github.event.inputs.platform == 'windows' || github.event.inputs.platform == 'all' }}
+  win-x64:
+    if: ${{inputs.win-x64}}
    runs-on: windows-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v4.1.1
-
-      - name: Make upload directory
-        run: mkdir upload
-
+        uses: actions/checkout@v6
      - name: Publish win-x64
-        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true -o ./publish/win64
-
-      - name: Zip win-x64
-        run: |
-          $files = Get-ChildItem -Path ./publish/win64/* -Recurse -Exclude *.pdb
-          Compress-Archive -Path $files.FullName -DestinationPath ./upload/Semi.Avalonia.Demo.Desktop.win-x64.zip
-
-      - name: Enable Native AOT in .csproj
-        if: ${{ github.event.inputs.include_aot == 'true' }}
-        run: |
-          sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
-          sed -i 's#<!--<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>-->#<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
-
-      - name: Publish win-x64 AOT
-        if: ${{ github.event.inputs.include_aot == 'true' }}
-        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release -o ./publish/win64-aot
-
-      - name: Zip win-x64 AOT
-        if: ${{ github.event.inputs.include_aot == 'true' }}
-        run: |
-          $files = Get-ChildItem -Path ./publish/win64-aot/* -Recurse -Exclude *.pdb
-          Compress-Archive -Path $files.FullName -DestinationPath ./upload/Semi.Avalonia.Demo.Desktop.win-x64.NativeAOT.zip
-
+        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.3.1
+        uses: actions/upload-artifact@v7
        with:
-          name: windows
-          path: ./upload
+          name: Semi.Avalonia.Demo.Desktop.win-x64
+          path: |
+            publish
+            !publish/*.pdb

-  linux:
-    if: ${{ github.event.inputs.platform == 'linux' || github.event.inputs.platform == 'all' }}
+  win-x64-aot:
+    if: ${{inputs.win-x64-aot}}
+    runs-on: windows-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+      - name: Enable Native AOT in .csproj
+        run: sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
+      - name: Publish win-x64 AOT
+        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release -o publish
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v7
+        with:
+          name: Semi.Avalonia.Demo.Desktop.win-x64.NativeAOT
+          path: |
+            publish
+            !publish/*.pdb
+
+  linux-x64:
+    if: ${{inputs.linux-x64}}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v4.1.1
-
-      - name: Make upload directory
-        run: mkdir upload
-
+        uses: actions/checkout@v6
      - name: Publish linux-x64
-        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r linux-x64 -c Release --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true -o ./publish/linux64
+        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r linux-x64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v7
+        with:
+          name: Semi.Avalonia.Demo.Desktop.linux-x64
+          path: |
+            publish
+            !publish/*.pdb

-      - name: Zip linux-x64
-        run: zip -j -r ./upload/Semi.Avalonia.Demo.Desktop.linux-x64.zip ./publish/linux64 -x "*.pdb"
+  linux-x64-aot:
+    if: ${{inputs.linux-x64-aot}}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+      - name: Enable Native AOT in .csproj
+        run: sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
+      - name: Publish linux-x64 AOT
+        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r linux-x64 -c Release -o publish
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v7
+        with:
+          name: Semi.Avalonia.Demo.Desktop.linux-x64.NativeAOT
+          path: |
+            publish
+            !publish/*.pdb

+  drm-linux-x64:
+    if: ${{inputs.drm-linux-x64}}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
      - name: Publish linux-x64 DRM
-        if: ${{ github.event.inputs.include_drm == 'true' }}
-        run: dotnet publish demo/Semi.Avalonia.Demo.Drm -r linux-x64 -c Release --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true -o ./publish/drm
+        run: dotnet publish demo/Semi.Avalonia.Demo.Drm -r linux-x64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v7
+        with:
+          name: Semi.Avalonia.Demo.Drm.linux-x64
+          path: |
+            publish
+            !publish/*.pdb

-      - name: Zip linux-x64 DRM
-        if: ${{ github.event.inputs.include_drm == 'true' }}
-        run: zip -j -r ./upload/Semi.Avalonia.Demo.Drm.linux-x64.zip ./publish/drm -x "*.pdb"
+  drm-linux-x64-aot:
+    if: ${{inputs.drm-linux-x64-aot}}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+      - name: Enable Native AOT in .csproj
+        run: sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj
+      - name: Publish linux-x64 AOT
+        run: dotnet publish demo/Semi.Avalonia.Demo.Drm -r linux-x64 -c Release -o publish
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v7
+        with:
+          name: Semi.Avalonia.Demo.Drm.linux-x64.NativeAOT
+          path: |
+            publish
+            !publish/*.pdb
+
+  osx-arm64:
+    if: ${{inputs.osx-arm64}}
+    runs-on: macos-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+      - name: Publish osx-arm64
+        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r osx-arm64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
+
+      - name: Create .app bundle and DMG (create-dmg)
+        run: |
+          set -euo pipefail
+          APP_DIR="bundle/Semi.Avalonia.Demo.app"
+          MACOS_DIR="${APP_DIR}/Contents/MacOS"
+          mkdir -p "${MACOS_DIR}"
+          cp -R publish/. "${MACOS_DIR}/"
+          chmod +x "${MACOS_DIR}/Semi.Avalonia.Demo.Desktop"
+          cp publish/Info-macOS.plist "${APP_DIR}/Contents/Info.plist"
+          codesign --force --deep --sign - "${APP_DIR}"
+          mkdir -p dmg_stage
+          ditto "${APP_DIR}" "dmg_stage/Semi.Avalonia.Demo.app"
+          brew install create-dmg
+          rm -f Semi.Avalonia.Demo.Desktop.osx-arm64.dmg
+          create-dmg \
+            --volname "Semi Avalonia Demo" \
+            --window-pos 200 120 \
+            --window-size 640 400 \
+            --icon-size 100 \
+            --icon "Semi.Avalonia.Demo.app" 175 185 \
+            --hide-extension "Semi.Avalonia.Demo.app" \
+            --app-drop-link 455 185 \
+            --skip-jenkins \
+            "Semi.Avalonia.Demo.Desktop.osx-arm64.dmg" \
+            "dmg_stage"

      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.3.1
+        uses: actions/upload-artifact@v7
        with:
-          name: linux
-          path: ./upload
+          name: Semi.Avalonia.Demo.Desktop.osx-arm64
+          path: |
+            publish
+            !publish/*.pdb

-  android:
-    if: ${{ github.event.inputs.platform == 'android' || github.event.inputs.platform == 'all' }}
+      - name: Upload macOS DMG
+        uses: actions/upload-artifact@v7
+        with:
+          name: Semi.Avalonia.Demo.Desktop.osx-arm64.dmg
+          path: Semi.Avalonia.Demo.Desktop.osx-arm64.dmg
+
+  osx-x64:
+    if: ${{inputs.osx-x64}}
+    runs-on: macos-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Publish osx-x64
+        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r osx-x64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
+
+      - name: Create .app bundle and DMG (create-dmg)
+        run: |
+          set -euo pipefail
+          APP_DIR="bundle/Semi.Avalonia.Demo.app"
+          MACOS_DIR="${APP_DIR}/Contents/MacOS"
+          mkdir -p "${MACOS_DIR}"
+          cp -R publish/. "${MACOS_DIR}/"
+          chmod +x "${MACOS_DIR}/Semi.Avalonia.Demo.Desktop"
+          cp publish/Info-macOS.plist "${APP_DIR}/Contents/Info.plist"
+          codesign --force --deep --sign - "${APP_DIR}"
+          mkdir -p dmg_stage
+          ditto "${APP_DIR}" "dmg_stage/Semi.Avalonia.Demo.app"
+          brew install create-dmg
+          rm -f Semi.Avalonia.Demo.Desktop.osx-x64.dmg
+          create-dmg \
+            --volname "Semi Avalonia Demo" \
+            --window-pos 200 120 \
+            --window-size 640 400 \
+            --icon-size 100 \
+            --icon "Semi.Avalonia.Demo.app" 175 185 \
+            --hide-extension "Semi.Avalonia.Demo.app" \
+            --app-drop-link 455 185 \
+            --skip-jenkins \
+            "Semi.Avalonia.Demo.Desktop.osx-x64.dmg" \
+            "dmg_stage"
+
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v7
+        with:
+          name: Semi.Avalonia.Demo.Desktop.osx-x64
+          path: |
+            publish
+            !publish/*.pdb
+
+      - name: Upload macOS DMG (Intel)
+        uses: actions/upload-artifact@v7
+        with:
+          name: Semi.Avalonia.Demo.Desktop.osx-x64.dmg
+          path: Semi.Avalonia.Demo.Desktop.osx-x64.dmg
+
+  osx-arm64-aot:
+    if: ${{inputs.osx-arm64-aot}}
+    runs-on: macos-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+      - name: Enable Native AOT in .csproj
+        run: sed -i '' 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
+      - name: Publish osx-arm64 AOT
+        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r osx-arm64 -c Release -o publish
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v7
+        with:
+          name: Semi.Avalonia.Demo.Desktop.osx-arm64.NativeAOT
+          path: |
+            publish
+            !publish/*.pdb
+
+  osx-x64-aot:
+    if: ${{inputs.osx-x64-aot}}
+    runs-on: macos-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+      - name: Enable Native AOT in .csproj
+        run: sed -i '' 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
+      - name: Publish osx-x64 AOT
+        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r osx-x64 -c Release -o publish
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v7
+        with:
+          name: Semi.Avalonia.Demo.Desktop.osx-x64.NativeAOT
+          path: |
+            publish
+            !publish/*.pdb
+
+  android-arm64:
+    if: ${{inputs.android-arm64 }}
    runs-on: windows-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v4.1.1
-
-      - name: CD Android
-        run: cd ./demo/Semi.Avalonia.Demo.Android
-
+        uses: actions/checkout@v6
+      - name: Install Android workload
+        run: dotnet workload install android
      - name: Restore Dependencies
-        run: dotnet restore
-
+        run: dotnet restore demo/Semi.Avalonia.Demo.Android
      - name: Publish Android
-        run: dotnet publish demo/Semi.Avalonia.Demo.Android -c Release -f net8.0-android --no-restore -o ./publish -p:RuntimeIdentifier=android-arm64
-
+        run: dotnet publish demo/Semi.Avalonia.Demo.Android -c Release -f net10.0-android --no-restore -o publish /p:RuntimeIdentifier=android-arm64
      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.3.1
+        uses: actions/upload-artifact@v7
        with:
-          name: android
-          path: ./publish/*Signed.apk
+          name: android-arm64
+          path: publish/*Signed.apk
@@ -1,146 +1,80 @@
 name: Release Tag

 on:
-  push:
-    tags:
-      - "v[0-9]+.[0-9]+.[0-9]+.[0-9]+"
  workflow_dispatch:
+    inputs:
+      Upload_to_NuGet:
+        description: 'Upload to NuGet'
+        default: false
+        type: boolean
+      Semi_Avalonia:
+        description: 'Pack Semi.Avalonia'
+        default: true
+        type: boolean
+      Semi_Avalonia_ColorPicker:
+        description: 'Pack Semi.Avalonia.ColorPicker'
+        default: true
+        type: boolean
+      Semi_Avalonia_DataGrid:
+        description: 'Pack Semi.Avalonia.DataGrid'
+        default: false
+        type: boolean
+      Semi_Avalonia_TreeDataGrid:
+        description: 'Pack Semi.Avalonia.TreeDataGrid'
+        default: false
+        type: boolean

 jobs:
-  pack:
-    runs-on: ubuntu-latest
+  nuget:
+    uses: ./.github/workflows/pack.yml
+    with:
+      Upload_to_NuGet: ${{ inputs.Upload_to_NuGet }}
+      Semi_Avalonia: ${{ inputs.Semi_Avalonia }}
+      Semi_Avalonia_ColorPicker: ${{ inputs.Semi_Avalonia_ColorPicker }}
+      Semi_Avalonia_DataGrid: ${{ inputs.Semi_Avalonia_DataGrid }}
+      Semi_Avalonia_TreeDataGrid: ${{ inputs.Semi_Avalonia_TreeDataGrid }}
+    secrets: inherit

-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Pack Semi.Avalonia
-        run: dotnet pack ./src/Semi.Avalonia -o ./nugets
-
-      - name: Pack Semi.Avalonia.ColorPicker
-        run: dotnet pack ./src/Semi.Avalonia.ColorPicker -o ./nugets
-
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: nugets
-          path: ./nugets
-
-  publish-windows:
-    runs-on: windows-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Make upload directory
-        run: mkdir upload
-
-      - name: Publish win-x64
-        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true -o ./publish/win64
-
-      - name: Zip win-x64
-        run: |
-          $files = Get-ChildItem -Path ./publish/win64/* -Recurse -Exclude *.pdb
-          Compress-Archive -Path $files.FullName -DestinationPath ./upload/Semi.Avalonia.Demo.Desktop.win-x64.zip
-
-      - name: Enable Native AOT in .csproj
-        run: |
-          sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
-          sed -i 's#<!--<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>-->#<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
-
-      - name: Publish win-x64 AOT
-        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release -o ./publish/win64-aot
-
-      - name: Zip win-x64 AOT
-        run: |
-          $files = Get-ChildItem -Path ./publish/win64-aot/* -Recurse -Exclude *.pdb
-          Compress-Archive -Path $files.FullName -DestinationPath ./upload/Semi.Avalonia.Demo.Desktop.win-x64.NativeAOT.zip
-
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: windows
-          path: ./upload
-
-  publish-linux:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Make upload directory
-        run: mkdir upload
-
-      - name: Publish linux-x64
-        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r linux-x64 -c Release --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true -o ./publish/linux64
-
-      - name: Zip linux-x64
-        run: zip -j -r ./upload/Semi.Avalonia.Demo.Desktop.linux-x64.zip ./publish/linux64 -x "*.pdb"
-
-      - name: Publish linux-x64 DRM
-        run: dotnet publish demo/Semi.Avalonia.Demo.Drm -r linux-x64 -c Release --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true -o ./publish/drm
-
-      - name: Zip linux-x64 DRM
-        run: zip -j -r ./upload/Semi.Avalonia.Demo.Drm.linux-x64.zip ./publish/drm -x "*.pdb"
-
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: linux
-          path: ./upload
-
-  publish-android:
-    runs-on: windows-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: CD Android
-        run: cd ./demo/Semi.Avalonia.Demo.Android
-
-      - name: Restore Dependencies
-        run: dotnet restore
-
-      - name: Publish Android
-        run: dotnet publish demo/Semi.Avalonia.Demo.Android -c Release -f net8.0-android --no-restore -o ./publish -p:RuntimeIdentifier=android-arm64
-
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: android
-          path: ./publish/*Signed.apk
+  publish:
+    uses: ./.github/workflows/publish.yml

  draft-release:
-    needs: [ pack, publish-windows, publish-linux, publish-android ]
+    needs: [ nuget,publish ]
    runs-on: ubuntu-latest
    steps:
-      - name: Download nugets Artifacts
-        uses: actions/download-artifact@v4
-        with:
-          name: nugets
+      - uses: actions/download-artifact@v8

-      - name: Download windows Artifacts
-        uses: actions/download-artifact@v4
-        with:
-          name: windows
+      - name: Display structure of downloaded files
+        run: ls -R

-      - name: Download linux Artifacts
-        uses: actions/download-artifact@v4
-        with:
-          name: linux
+      - name: Zip artifacts
+        run: |
+          zip -rj Semi.Avalonia.Demo.Desktop.win-x64.zip Semi.Avalonia.Demo.Desktop.win-x64
+          zip -rj Semi.Avalonia.Demo.Desktop.win-x64.NativeAOT.zip Semi.Avalonia.Demo.Desktop.win-x64.NativeAOT
+          zip -rj Semi.Avalonia.Demo.Desktop.linux-x64.zip Semi.Avalonia.Demo.Desktop.linux-x64
+          zip -rj Semi.Avalonia.Demo.Desktop.linux-x64.NativeAOT.zip Semi.Avalonia.Demo.Desktop.linux-x64.NativeAOT
+          zip -rj Semi.Avalonia.Demo.Drm.linux-x64.zip Semi.Avalonia.Demo.Drm.linux-x64
+          zip -rj Semi.Avalonia.Demo.Drm.linux-x64.NativeAOT.zip Semi.Avalonia.Demo.Drm.linux-x64.NativeAOT
+          zip -rj Semi.Avalonia.Demo.Desktop.osx-arm64.zip Semi.Avalonia.Demo.Desktop.osx-arm64
+          cd Semi.Avalonia.Demo.Desktop.osx-arm64.NativeAOT
+          zip -r ../Semi.Avalonia.Demo.Desktop.osx-arm64.NativeAOT.zip .
+          cd "${GITHUB_WORKSPACE}"
+          zip -rj Semi.Avalonia.Demo.Desktop.osx-x64.zip Semi.Avalonia.Demo.Desktop.osx-x64
+          cd Semi.Avalonia.Demo.Desktop.osx-x64.NativeAOT
+          zip -r ../Semi.Avalonia.Demo.Desktop.osx-x64.NativeAOT.zip .

-      - name: Download android Artifacts
-        uses: actions/download-artifact@v4
-        with:
-          name: android
+      - name: Display structure of zipped files
+        run: ls -R

      - name: Release
-        uses: softprops/action-gh-release@v2
+        uses: softprops/action-gh-release@v3
        if: startsWith(github.ref, 'refs/tags/') || github.event_name == 'workflow_dispatch'
        with:
          generate_release_notes: true
          draft: true
          files: |
-            *.nupkg
+            nugets/*.nupkg
+            android-arm64/*.apk
            *.zip
-            *.apk
+            Semi.Avalonia.Demo.Desktop.osx-arm64.dmg/Semi.Avalonia.Demo.Desktop.osx-arm64.dmg
+            Semi.Avalonia.Demo.Desktop.osx-x64.dmg/Semi.Avalonia.Demo.Desktop.osx-x64.dmg
@@ -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.3</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>
@@ -1,6 +1,6 @@
 MIT License

-Copyright (c) 2022 iriHi Technology
+Copyright (c) 2022 IRIHI Technology

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+    <packageSources>
+        <add key="avalonia-nightly" value="https://nuget-feed-nightly.avaloniaui.net/v3/index.json" />
+    </packageSources>
+</configuration>
@@ -38,12 +38,15 @@ Include Semi Design Styles in application:

 That's all.

-ColorPicker, DataGrid and TreeDataGrid are distributed in separated packages. Please install if you need.
+ColorPicker, DataGrid, TreeDataGrid, Dock, Tabalonia and AvaloniaEdit are distributed in separated packages. Please install if you need.

 ```bash
 dotnet add package Semi.Avalonia.ColorPicker
 dotnet add package Semi.Avalonia.DataGrid
 dotnet add package Semi.Avalonia.TreeDataGrid
+dotnet add package Semi.Avalonia.Dock
+dotnet add package Semi.Avalonia.Tabalonia
+dotnet add package Semi.Avalonia.AvaloniaEdit
 ```

 ```xaml
@@ -51,9 +54,14 @@ dotnet add package Semi.Avalonia.TreeDataGrid
    <semi:ColorPickerSemiTheme />
    <semi:DataGridSemiTheme />
    <semi:TreeDataGridSemiTheme />
+    <semi:DockSemiTheme />
+    <semi:TabaloniaSemiTheme />
+    <semi:AvaloniaEditSemiTheme />
 </Application.Styles>
 ```

+Notice: Dock, Tabalonia and AvaloniaEdit are delivered via nuget for free, but not open source. Please read the license and agree to continue use these packages. If you need source code, please contact us via email: [contact@irihi.tech](contact@irihi.tech)
+
 ## Demo

 You can always download demo executable to play around with Semi Avalonia Themes.
@@ -63,17 +71,16 @@ You can always download demo executable to play around with Semi Avalonia Themes

 We offer limited free community support for Semi Avalonia and Ursa. If you have any question or suggestion, feel free to raise issues and discussions via GitHub, and you are welcomed to join our group via FeiShu(Lark)

-![FeiShu](./docs/community-support.png) 
+![FeiShu](./docs/community-support.png)

 ## Version compatibility

-| Semi Design Version | Avalonia Version |
-|:--------------------|:-----------------|
-| 11.2.1              | >=11.2.1         |
-| 11.2.0              | 11.2.0           |
-| 11.1.0              | >=11.1.0         |
-| 11.0.7              | >=11.0.7         |
-| 11.0.1              | <=11.0.6         |
+| Semi Avalonia Version | Avalonia Version |
+|:----------------------|:-----------------|
+| 11.3.7                | >=11.3.7         |
+| 11.2.1                | >=11.2.1         |
+| 11.2.0                | End of Life      |
+| 11.1.x                | End of Life      |

 ## Credits

@@ -38,12 +38,15 @@ dotnet add package Semi.Avalonia

 这样就可以了。

-ColorPicker、DataGrid 和 TreeDataGrid 的样式单独分发，如果需要请安装并引用。
+ColorPicker、DataGrid、TreeDataGrid、Dock、Tabalonia 和 AvaloniaEdit 的样式单独分发，如果需要请安装并引用。

 ```bash
 dotnet add package Semi.Avalonia.ColorPicker
 dotnet add package Semi.Avalonia.DataGrid
 dotnet add package Semi.Avalonia.TreeDataGrid
+dotnet add package Semi.Avalonia.Dock
+dotnet add package Semi.Avalonia.Tabalonia
+dotnet add package Semi.Avalonia.AvaloniaEdit
 ```

 ```xaml
@@ -51,9 +54,14 @@ dotnet add package Semi.Avalonia.TreeDataGrid
    <semi:ColorPickerSemiTheme />
    <semi:DataGridSemiTheme />
    <semi:TreeDataGridSemiTheme />
+    <semi:DockSemiTheme />
+    <semi:TabaloniaSemiTheme />
+    <semi:AvaloniaEditSemiTheme />
 </Application.Styles>
 ```

+注意：Dock、Tabalonia 和 AvaloniaEdit 是通过 NuGet 免费分发的，但不是开源的。请阅读许可协议并同意后继续使用这些包。如果您需要源代码，请通过电子邮件联系我们：[contact@irihi.tech](contact@irihi.tech)
+
 ## 示例

 您可以从 Semi Avalonia 的 release 页下载并试用 Semi Avalonia 的展示应用。
@@ -67,13 +75,12 @@ dotnet add package Semi.Avalonia.TreeDataGrid

 ## 版本兼容性

-| Semi Design Version | Avalonia Version |
-|:--------------------|:-----------------|
-| 11.2.1              | >=11.2.1         |
-| 11.2.0              | 11.2.0           |
-| 11.1.0              | >=11.1.0         |
-| 11.0.7              | >=11.0.7         |
-| 11.0.1              | <=11.0.6         |
+| Semi Avalonia Version | Avalonia Version |
+|:----------------------|:-----------------|
+| 11.3.7                | >=11.3.7         |
+| 11.2.1                | >=11.2.1         |
+| 11.2.0                | End of Life      |
+| 11.1.x                | End of Life      |

 ## 致谢

@@ -1,99 +0,0 @@
-
-Microsoft Visual Studio Solution File, Format Version 12.00
-# Visual Studio Version 17
-VisualStudioVersion = 17.3.32929.385
-MinimumVisualStudioVersion = 10.0.40219.1
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia", "src\Semi.Avalonia\Semi.Avalonia.csproj", "{90D0B063-BC64-40AB-A56C-AC11909CF410}"
-EndProject
-Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Files", "Solution Files", "{B1E6A7D4-0AFB-4D32-9969-5FBDAC0CFF3E}"
-	ProjectSection(SolutionItems) = preProject
-		demo\Directory.Build.props = demo\Directory.Build.props
-		demo\global.json = demo\global.json
-		src\Package.props = src\Package.props
-	EndProjectSection
-EndProject
-Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "GitHub Action", "GitHub Action", "{318534A1-1CC3-40FB-B4AE-736F94465232}"
-	ProjectSection(SolutionItems) = preProject
-		.github\workflows\deploy.yml = .github\workflows\deploy.yml
-		.github\workflows\pack.yml = .github\workflows\pack.yml
-		.github\workflows\pack-nightly.yml = .github\workflows\pack-nightly.yml
-		.github\workflows\publish.yml = .github\workflows\publish.yml
-		.github\workflows\release-tag.yml = .github\workflows\release-tag.yml
-	EndProjectSection
-EndProject
-Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Demo", "Demo", "{43091528-9509-43CB-A003-9C5C11E96DD6}"
-EndProject
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.Demo.Desktop", "demo\Semi.Avalonia.Demo.Desktop\Semi.Avalonia.Demo.Desktop.csproj", "{2ADCA724-2B6D-46EC-87F7-604D7918B89A}"
-EndProject
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.Demo.Web", "demo\Semi.Avalonia.Demo.Web\Semi.Avalonia.Demo.Web.csproj", "{69A2C77D-6DB7-4AE4-B179-D1F5CF5E2DF0}"
-EndProject
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.Demo", "demo\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj", "{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0}"
-EndProject
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.DataGrid", "src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj", "{8A90C292-8761-4F70-8E1F-EFC097FEADB3}"
-EndProject
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.ColorPicker", "src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj", "{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}"
-EndProject
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.Demo.Android", "demo\Semi.Avalonia.Demo.Android\Semi.Avalonia.Demo.Android.csproj", "{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}"
-EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.Demo.Drm", "demo\Semi.Avalonia.Demo.Drm\Semi.Avalonia.Demo.Drm.csproj", "{86D93406-412A-4429-93B2-92AAD0407784}"
-EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.TreeDataGrid", "src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj", "{398D2998-0835-41F5-99A3-608CAB8051E2}"
-EndProject
-Global
-	GlobalSection(SolutionConfigurationPlatforms) = preSolution
-		Debug|Any CPU = Debug|Any CPU
-		Release|Any CPU = Release|Any CPU
-	EndGlobalSection
-	GlobalSection(ProjectConfigurationPlatforms) = postSolution
-		{90D0B063-BC64-40AB-A56C-AC11909CF410}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{90D0B063-BC64-40AB-A56C-AC11909CF410}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{90D0B063-BC64-40AB-A56C-AC11909CF410}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{90D0B063-BC64-40AB-A56C-AC11909CF410}.Release|Any CPU.Build.0 = Release|Any CPU
-		{2ADCA724-2B6D-46EC-87F7-604D7918B89A}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{2ADCA724-2B6D-46EC-87F7-604D7918B89A}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{2ADCA724-2B6D-46EC-87F7-604D7918B89A}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{2ADCA724-2B6D-46EC-87F7-604D7918B89A}.Release|Any CPU.Build.0 = Release|Any CPU
-		{69A2C77D-6DB7-4AE4-B179-D1F5CF5E2DF0}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{69A2C77D-6DB7-4AE4-B179-D1F5CF5E2DF0}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{69A2C77D-6DB7-4AE4-B179-D1F5CF5E2DF0}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{69A2C77D-6DB7-4AE4-B179-D1F5CF5E2DF0}.Release|Any CPU.Build.0 = Release|Any CPU
-		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0}.Release|Any CPU.Build.0 = Release|Any CPU
-		{8A90C292-8761-4F70-8E1F-EFC097FEADB3}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{8A90C292-8761-4F70-8E1F-EFC097FEADB3}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{8A90C292-8761-4F70-8E1F-EFC097FEADB3}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{8A90C292-8761-4F70-8E1F-EFC097FEADB3}.Release|Any CPU.Build.0 = Release|Any CPU
-		{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}.Release|Any CPU.Build.0 = Release|Any CPU
-		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
-		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}.Release|Any CPU.Build.0 = Release|Any CPU
-		{86D93406-412A-4429-93B2-92AAD0407784}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{86D93406-412A-4429-93B2-92AAD0407784}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{86D93406-412A-4429-93B2-92AAD0407784}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{86D93406-412A-4429-93B2-92AAD0407784}.Release|Any CPU.Build.0 = Release|Any CPU
-		{398D2998-0835-41F5-99A3-608CAB8051E2}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{398D2998-0835-41F5-99A3-608CAB8051E2}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{398D2998-0835-41F5-99A3-608CAB8051E2}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{398D2998-0835-41F5-99A3-608CAB8051E2}.Release|Any CPU.Build.0 = Release|Any CPU
-	EndGlobalSection
-	GlobalSection(SolutionProperties) = preSolution
-		HideSolutionNode = FALSE
-	EndGlobalSection
-	GlobalSection(NestedProjects) = preSolution
-		{2ADCA724-2B6D-46EC-87F7-604D7918B89A} = {43091528-9509-43CB-A003-9C5C11E96DD6}
-		{69A2C77D-6DB7-4AE4-B179-D1F5CF5E2DF0} = {43091528-9509-43CB-A003-9C5C11E96DD6}
-		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0} = {43091528-9509-43CB-A003-9C5C11E96DD6}
-		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F} = {43091528-9509-43CB-A003-9C5C11E96DD6}
-		{86D93406-412A-4429-93B2-92AAD0407784} = {43091528-9509-43CB-A003-9C5C11E96DD6}
-	EndGlobalSection
-	GlobalSection(ExtensibilityGlobals) = postSolution
-		SolutionGuid = {7CA41ED3-2CED-40CC-AA21-28C3B42B1E86}
-	EndGlobalSection
-EndGlobal
@@ -0,0 +1,33 @@
+<Solution>
+    <Folder Name="/Demo/">
+        <Project Path="demo/Semi.Avalonia.Demo.Android/Semi.Avalonia.Demo.Android.csproj"/>
+        <Project Path="demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj"/>
+        <Project Path="demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj"/>
+        <Project Path="demo/Semi.Avalonia.Demo.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>
+    <Folder Name="/GitHub Action/">
+        <File Path=".github/workflows/deploy.yml"/>
+        <File Path=".github/workflows/pack-nightly.yml"/>
+        <File Path=".github/workflows/pack.yml"/>
+        <File Path=".github/workflows/publish.yml"/>
+        <File Path=".github/workflows/release-tag.yml"/>
+        <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.Build.targets"/>
+    </Folder>
+    <Folder Name="/Solution Items/Src/">
+        <File Path="src/Directory.Build.props"/>
+    </Folder>
+    <Project Path="src/Semi.Avalonia.ColorPicker/Semi.Avalonia.ColorPicker.csproj"/>
+    <Project Path="src/Semi.Avalonia.DataGrid/Semi.Avalonia.DataGrid.csproj"/>
+    <Project Path="src/Semi.Avalonia.TreeDataGrid/Semi.Avalonia.TreeDataGrid.csproj"/>
+    <Project Path="src/Semi.Avalonia/Semi.Avalonia.csproj"/>
+</Solution>
@@ -1,7 +0,0 @@
-<Project>
-    <PropertyGroup>
-        <AvaloniaVersion>11.2.5</AvaloniaVersion>
-        <DataGridVersion>11.2.5</DataGridVersion>
-        <CommunityToolkitVersion>8.4.0</CommunityToolkitVersion>
-    </PropertyGroup>
-</Project>
@@ -0,0 +1,17 @@
+<Project>
+  <PropertyGroup>
+    <AvaloniaVersion>12.0.3</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>
@@ -0,0 +1,21 @@
+using Android.App;
+using Android.Runtime;
+using Avalonia;
+using Avalonia.Android;
+using Semi.Avalonia.Demo.Fonts;
+
+namespace Semi.Avalonia.Demo.Android;
+
+[Application]
+public class Application : AvaloniaAndroidApplication<App>
+{
+    protected Application(nint javaReference, JniHandleOwnership transfer) : base(javaReference, transfer)
+    {
+    }
+
+    protected override AppBuilder CustomizeAppBuilder(AppBuilder builder)
+    {
+        return base.CustomizeAppBuilder(builder)
+            .WithSourceHanSansCNFont();
+    }
+}
@@ -11,6 +11,4 @@ namespace Semi.Avalonia.Demo.Android;
    MainLauncher = true,
    LaunchMode = LaunchMode.SingleTop,
    ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.ScreenSize | ConfigChanges.UiMode)]
-public class MainActivity : AvaloniaMainActivity<App>
-{
-}
+public class MainActivity : AvaloniaMainActivity;
@@ -1,8 +1,8 @@
 <Project Sdk="Microsoft.NET.Sdk">
    <PropertyGroup>
        <OutputType>Exe</OutputType>
-        <TargetFramework>net8.0-android</TargetFramework>
-        <SupportedOSPlatformVersion>21</SupportedOSPlatformVersion>
+        <TargetFramework>net10.0-android</TargetFramework>
+        <SupportedOSPlatformVersion>23</SupportedOSPlatformVersion>
        <Nullable>enable</Nullable>
        <ApplicationId>com.irihitech.Semi.Avalonia</ApplicationId>
        <ApplicationVersion>1</ApplicationVersion>
@@ -13,18 +13,23 @@
        <RootNamespace>Semi.Avalonia.Demo.Android</RootNamespace>
    </PropertyGroup>

+    <!-- Use CoreCLR on Android -->
+    <PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">
+        <UseMonoRuntime>false</UseMonoRuntime>
+        <PublishReadyToRun>true</PublishReadyToRun>
+    </PropertyGroup>
+
    <ItemGroup>
-        <AndroidResource Include="Icon.png">
-            <Link>Resources\drawable\Icon.png</Link>
-        </AndroidResource>
+        <AndroidResource Include="Icon.png" Link="Resources\drawable\Icon.png"/>
    </ItemGroup>

    <ItemGroup>
-        <PackageReference Include="Avalonia.Android" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="Xamarin.AndroidX.Core.SplashScreen" Version="1.0.1.1"/>
+        <PackageReference Include="Avalonia.Android"/>
+        <PackageReference Include="Xamarin.AndroidX.Core.SplashScreen"/>
    </ItemGroup>

    <ItemGroup>
        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj"/>
+        <ProjectReference Include="..\Semi.Avalonia.Demo.Fonts\Semi.Avalonia.Demo.Fonts.csproj"/>
    </ItemGroup>
-</Project>
+</Project>
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleExecutable</key>
+	<string>Semi.Avalonia.Demo.Desktop</string>
+	<key>CFBundleIdentifier</key>
+	<string>org.avaloniaui.SemiAvaloniaDemo</string>
+	<key>CFBundleName</key>
+	<string>Semi Avalonia Demo</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>$(Version)</string>
+	<key>CFBundleVersion</key>
+	<string>$(Version)</string>
+	<key>LSMinimumSystemVersion</key>
+	<string>10.15</string>
+</dict>
+</plist>
@@ -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,32 +1,56 @@
 <Project Sdk="Microsoft.NET.Sdk">
-    <PropertyGroup>
-        <OutputType>WinExe</OutputType>
-        <TargetFramework>net8.0</TargetFramework>
-        <Nullable>enable</Nullable>
-        <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
-        <!-- Uncomment below to enable Native AOT compilation-->
-        <!--<PublishAot>true</PublishAot>-->
-        <!--<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>-->
-    </PropertyGroup>
+  <PropertyGroup>
+    <OutputType>WinExe</OutputType>
+    <TargetFramework>net10.0</TargetFramework>
+    <Version>1.0.0</Version>
+    <Nullable>enable</Nullable>
+    <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
+    <ApplicationIcon>..\Semi.Avalonia.Demo\Assets\irihi.ico</ApplicationIcon>
+    <!-- Uncomment below to enable Native AOT compilation-->
+    <!--<PublishAot>true</PublishAot>-->
+  </PropertyGroup>

-    <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
-        <IsTrimmable>true</IsTrimmable>
-        <PublishTrimmed>true</PublishTrimmed>
-    </PropertyGroup>
+  <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
+    <IsTrimmable>true</IsTrimmable>
+    <PublishTrimmed>true</PublishTrimmed>
+  </PropertyGroup>

-    <PropertyGroup>
-        <ApplicationManifest>app.manifest</ApplicationManifest>
-    </PropertyGroup>
+  <PropertyGroup>
+    <ApplicationManifest>app.manifest</ApplicationManifest>
+  </PropertyGroup>

-    <ItemGroup>
-        <TrimmerRootDescriptor Include="Roots.xml"/>
-    </ItemGroup>
+  <ItemGroup>
+    <TrimmerRootDescriptor Include="Roots.xml"/>
+  </ItemGroup>

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

-    <ItemGroup>
-        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj"/>
-    </ItemGroup>
+  <ItemGroup>
+    <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj"/>
+    <ProjectReference Include="..\Semi.Avalonia.Demo.Fonts\Semi.Avalonia.Demo.Fonts.csproj"/>
+  </ItemGroup>
+
+  <UsingTask TaskName="ExpandMacOSPlistVersion" TaskFactory="RoslynCodeTaskFactory" AssemblyFile="$(MSBuildToolsPath)\Microsoft.Build.Tasks.Core.dll">
+    <ParameterGroup>
+      <InputFile ParameterType="System.String" Required="true"/>
+      <OutputFile ParameterType="System.String" Required="true"/>
+      <AppVersion ParameterType="System.String" Required="true"/>
+    </ParameterGroup>
+    <Task>
+      <Code Type="Fragment" Language="cs"><![CDATA[
+var token = "$" + "(Version)";
+System.IO.File.WriteAllText(
+    OutputFile,
+    System.IO.File.ReadAllText(InputFile).Replace(token, AppVersion));
+]]></Code>
+    </Task>
+  </UsingTask>
+  <Target Name="ExpandMacOSInfoPlist" AfterTargets="Publish">
+    <ExpandMacOSPlistVersion
+      InputFile="$(MSBuildProjectDirectory)/Info-macOS.plist"
+      OutputFile="$(PublishDir)Info-macOS.plist"
+      AppVersion="$(Version)"/>
+  </Target>
 </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();
    }
-}
+}
@@ -63,7 +63,7 @@ private static void SilenceConsole()
 6. Publish the app to Linux

 ```bash
-dotnet publish demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj -c Release -r linux-x64 --sc -p:PublishSingleFile=true -p:IncludeNativeLibrariesForSelfExtract=true
+dotnet publish demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj -c Release -r linux-x64 --sc /p:PublishSingleFile=true -p:IncludeNativeLibrariesForSelfExtract=true
 ```

 Add the following code to the csproj file for AOT publishing
@@ -63,7 +63,7 @@ private static void SilenceConsole()
 6. 发布程序到Linux

 ```bash
-dotnet publish demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj -c Release -r linux-x64 --sc -p:PublishSingleFile=true -p:IncludeNativeLibrariesForSelfExtract=true
+dotnet publish demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj -c Release -r linux-x64 --sc /p:PublishSingleFile=true -p:IncludeNativeLibrariesForSelfExtract=true
 ```

 AOT发布需要在csproj文件中添加以下代码
@@ -1,12 +1,12 @@
 <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>
        <!-- Uncomment below to enable Native AOT compilation-->
        <!--<PublishAot>true</PublishAot>-->
-        <!--<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>-->
    </PropertyGroup>

    <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
@@ -23,11 +23,12 @@
    </ItemGroup>

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

    <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>();
-}
+}
@@ -1,20 +1,17 @@
 <Project Sdk="Microsoft.NET.Sdk.WebAssembly">
    <PropertyGroup>
-        <TargetFramework>net8.0-browser</TargetFramework>
+        <TargetFramework>net10.0-browser</TargetFramework>
        <OutputType>Exe</OutputType>
        <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
        <Nullable>enable</Nullable>
    </PropertyGroup>

    <ItemGroup>
-        <AvaloniaResource Include="Assets\**"/>
-    </ItemGroup>
-
-    <ItemGroup>
-        <PackageReference Include="Avalonia.Browser" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Browser"/>
    </ItemGroup>

    <ItemGroup>
        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj"/>
+        <ProjectReference Include="..\Semi.Avalonia.Demo.Fonts\Semi.Avalonia.Demo.Fonts.csproj"/>
    </ItemGroup>
 </Project>
@@ -1,17 +1,18 @@
 <Application
+    Name="Semi Avalonia Demo"
    x:Class="Semi.Avalonia.Demo.App"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    x:CompileBindings="True"
-    x:DataType="viewModels:ApplicationViewModel"
    xmlns:semi="https://irihi.tech/semi"
-    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels">
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    RequestedThemeVariant="Default"
+    x:DataType="vm:ApplicationViewModel">
    <Application.Styles>
        <semi:SemiTheme Locale="zh-CN" />
        <semi:SemiPopupAnimations />
        <semi:ColorPickerSemiTheme />
        <semi:DataGridSemiTheme />
-        <semi:TreeDataGridSemiTheme />
+        <!-- <semi:TreeDataGridSemiTheme /> -->
    </Application.Styles>
    <Application.Resources>
        <ResourceDictionary>
@@ -20,15 +21,42 @@
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
+    <NativeMenu.Menu>
+        <NativeMenu>
+            <NativeMenuItem
+                Header="About Us"
+                Command="{Binding JumpToCommand}"
+                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 Icon="/Assets/irihi.ico" MacOSProperties.IsTemplateIcon="true" ToolTipText="Semi Avalonia Demo">
+            <TrayIcon
+                Icon="{OnPlatform Default=/Assets/irihi.ico, macOS=/Assets/irihi2.ico}"
+                MacOSProperties.IsTemplateIcon="true"
+                Command="{Binding ActivateCommand}"
+                ToolTipText="Semi Avalonia Demo">
                <TrayIcon.Menu>
                    <NativeMenu>
-                        <NativeMenuItem Header="Exit" Command="{Binding ExitCommand}" />
+                        <NativeMenuItem
+                            Header="About Us"
+                            Command="{Binding JumpToCommand}"
+                            CommandParameter="{Binding $self.Header}" />
+                        <NativeMenuItem
+                            Header="Exit"
+                            Command="{Binding ExitCommand}" />
                    </NativeMenu>
                </TrayIcon.Menu>
            </TrayIcon>
        </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;
@@ -12,25 +12,32 @@ public partial class App : Application
    public override void Initialize()
    {
        AvaloniaXamlLoader.Load(this);
-        this.DataContext = new ApplicationViewModel();
+#if DEBUG
+        this.AttachDeveloperTools();
+#endif
+        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();
    }
-}
+}
@@ -5,8 +5,8 @@ namespace Semi.Avalonia.Demo.Constant;

 public static class ColorTokens
 {
-    public static IReadOnlyList<Tuple<string, string>> PrimaryTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> PrimaryTokens { get; } =
+    [
        new("SemiColorPrimary", "Primary"),
        new("SemiColorPrimaryPointerover", "Primary Pointerover"),
        new("SemiColorPrimaryActive", "Primary Active"),
@@ -14,130 +14,156 @@ public static class ColorTokens
        new("SemiColorPrimaryLight", "Primary Light"),
        new("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
        new("SemiColorPrimaryLightActive", "Primary Light Active"),
-    };
+    ];

-    public static IReadOnlyList<Tuple<string, string>> SecondaryTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> SecondaryTokens { get; } =
+    [
        new("SemiColorSecondary", "Secondary"),
        new("SemiColorSecondaryPointerover", "Secondary Pointerover"),
        new("SemiColorSecondaryActive", "Secondary Active"),
        new("SemiColorSecondaryDisabled", "Secondary Disabled"),
        new("SemiColorSecondaryLight", "Secondary Light"),
        new("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"),
-        new("SemiColorSecondaryLightActive", "Secondary Light Active"),
-    };
+        new("SemiColorSecondaryLightActive", "Secondary Light Active")
+    ];

-    public static IReadOnlyList<Tuple<string, string>> TertiaryTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> TertiaryTokens { get; } =
+    [
        new("SemiColorTertiary", "Tertiary"),
        new("SemiColorTertiaryPointerover", "Tertiary Pointerover"),
        new("SemiColorTertiaryActive", "Tertiary Active"),
        new("SemiColorTertiaryLight", "Tertiary Light"),
        new("SemiColorTertiaryLightPointerover", "Tertiary Light Pointerover"),
-        new("SemiColorTertiaryLightActive", "Tertiary Light Active"),
-    };
+        new("SemiColorTertiaryLightActive", "Tertiary Light Active")
+    ];

-    public static IReadOnlyList<Tuple<string, string>> InformationTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> InformationTokens { get; } =
+    [
        new("SemiColorInformation", "Information"),
        new("SemiColorInformationPointerover", "Information Pointerover"),
        new("SemiColorInformationActive", "Information Active"),
        new("SemiColorInformationDisabled", "Information Disabled"),
        new("SemiColorInformationLight", "Information Light"),
        new("SemiColorInformationLightPointerover", "Information Light Pointerover"),
-        new("SemiColorInformationLightActive", "Information Light Active"),
-    };
+        new("SemiColorInformationLightActive", "Information Light Active")
+    ];

-    public static IReadOnlyList<Tuple<string, string>> SuccessTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> SuccessTokens { get; } =
+    [
        new("SemiColorSuccess", "Success"),
        new("SemiColorSuccessPointerover", "Success Pointerover"),
        new("SemiColorSuccessActive", "Success Active"),
        new("SemiColorSuccessDisabled", "Success Disabled"),
        new("SemiColorSuccessLight", "Success Light"),
        new("SemiColorSuccessLightPointerover", "Success Light Pointerover"),
-        new("SemiColorSuccessLightActive", "Success Light Active"),
-    };
+        new("SemiColorSuccessLightActive", "Success Light Active")
+    ];

-    public static IReadOnlyList<Tuple<string, string>> WarningTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> WarningTokens { get; } =
+    [
        new("SemiColorWarning", "Warning"),
        new("SemiColorWarningPointerover", "Warning Pointerover"),
        new("SemiColorWarningActive", "Warning Active"),
        new("SemiColorWarningLight", "Warning Light"),
        new("SemiColorWarningLightPointerover", "Warning Light Pointerover"),
-        new("SemiColorWarningLightActive", "Warning Light Active"),
-    };
+        new("SemiColorWarningLightActive", "Warning Light Active")
+    ];

-    public static IReadOnlyList<Tuple<string, string>> DangerTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> DangerTokens { get; } =
+    [
        new("SemiColorDanger", "Danger"),
        new("SemiColorDangerPointerover", "Danger Pointerover"),
        new("SemiColorDangerActive", "Danger Active"),
        new("SemiColorDangerLight", "Danger Light"),
        new("SemiColorDangerLightPointerover", "Danger Light Pointerover"),
-        new("SemiColorDangerLightActive", "Danger Light Active"),
-    };
+        new("SemiColorDangerLightActive", "Danger Light Active")
+    ];

-    public static IReadOnlyList<Tuple<string, string>> TextTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> AIGeneralTokens { get; } =
+    [
+        new("SemiColorAIGeneral", "AI General"),
+        new("SemiColorAIGeneralPointerover", "AI General Pointerover"),
+        new("SemiColorAIGeneralActive", "AI General Active"),
+        new("SemiColorAIGeneralDisabled", "AI General Disabled")
+    ];
+
+    public static IReadOnlyList<Tuple<string, string>> AIPurpleTokens { get; } =
+    [
+        new("SemiColorAIPurple", "AI Purple"),
+        new("SemiColorAIPurplePointerover", "AI Purple Pointerover"),
+        new("SemiColorAIPurpleActive", "AI Purple Active"),
+        new("SemiColorAIPurpleDisabled", "AI Purple Disabled")
+    ];
+
+    public static IReadOnlyList<Tuple<string, string>> AIBackgroundTokens { get; } =
+    [
+        new("SemiColorAIBackgroundBottom", "AI Bottom Background"),
+        new("SemiColorAIBackgroundBottomPointerover", "AI Bottom Background Pointerover"),
+        new("SemiColorAIBackgroundBottomActive", "AI Bottom Background Active"),
+        new("SemiColorAIBackgroundTop", "AI Top Background"),
+        new("SemiColorAIBackgroundTopPointerover", "AI Top Background Pointerover"),
+        new("SemiColorAIBackgroundTopActive", "AI Top Background Active"),
+    ];
+
+    public static IReadOnlyList<Tuple<string, string>> TextTokens { get; } =
+    [
        new("SemiColorText0", "Text 0"),
        new("SemiColorText1", "Text 1"),
        new("SemiColorText2", "Text 2"),
-        new("SemiColorText3", "Text 3"),
-    };
+        new("SemiColorText3", "Text 3")
+    ];

-    public static IReadOnlyList<Tuple<string, string>> LinkTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> LinkTokens { get; } =
+    [
        new("SemiColorLink", "Link"),
        new("SemiColorLinkPointerover", "Link Pointerover"),
        new("SemiColorLinkActive", "Link Active"),
-        new("SemiColorLinkVisited", "Link Visited"),
-    };
+        new("SemiColorLinkVisited", "Link Visited")
+    ];

-    public static IReadOnlyList<Tuple<string, string>> BackgroundTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> BackgroundTokens { get; } =
+    [
        new("SemiColorBackground0", "Background 0"),
        new("SemiColorBackground1", "Background 1"),
        new("SemiColorBackground2", "Background 2"),
        new("SemiColorBackground3", "Background 3"),
-        new("SemiColorBackground4", "Background 4"),
-    };
+        new("SemiColorBackground4", "Background 4")
+    ];

-    public static IReadOnlyList<Tuple<string, string>> FillTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> FillTokens { get; } =
+    [
        new("SemiColorFill0", "Fill 0"),
        new("SemiColorFill1", "Fill 1"),
-        new("SemiColorFill2", "Fill 2"),
-    };
+        new("SemiColorFill2", "Fill 2")
+    ];

-    public static IReadOnlyList<Tuple<string, string>> BorderTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> BorderTokens { get; } =
+    [
        new("SemiColorBorder", "Border"),
-        new("SemiColorFocusBorder", "Focus Border"),
-    };
+        new("SemiColorFocusBorder", "Focus Border")
+    ];

-    public static IReadOnlyList<Tuple<string, string>> DisabledTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> DisabledTokens { get; } =
+    [
        new("SemiColorDisabledText", "Disabled Text"),
        new("SemiColorDisabledBorder", "Disabled Border"),
        new("SemiColorDisabledBackground", "Disabled Background"),
-        new("SemiColorDisabledFill", "Disabled Fill"),
-    };
+        new("SemiColorDisabledFill", "Disabled Fill")
+    ];

-    public static IReadOnlyList<Tuple<string, string>> OtherTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> OtherTokens { get; } =
+    [
        new("SemiColorWhite", "White"),
        new("SemiColorBlack", "Black"),
        new("SemiColorNavBackground", "Navigation Background"),
        new("SemiColorOverlayBackground", "Overlay Background"),
        new("SemiColorHighlightBackground", "Highlight Background"),
-        new("SemiColorHighlight", "Highlight Text"),
-    };
+        new("SemiColorHighlight", "Highlight Text")
+    ];

-    public static IReadOnlyList<Tuple<string, string>> ShadowTokens { get; } = new List<Tuple<string, string>>
-    {
+    public static IReadOnlyList<Tuple<string, string>> ShadowTokens { get; } =
+    [
        new("SemiColorShadow", "Shadow"),
-        new("SemiShadowElevated", "Shadow Elevated"),
-    };
+        new("SemiShadowElevated", "Shadow Elevated")
+    ];
 }
@@ -3,6 +3,7 @@ using System.Threading.Tasks;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
+using Avalonia.Input.Platform;
 using Avalonia.Media;
 using Semi.Avalonia.Demo.Converters;

@@ -92,6 +93,12 @@ public class ColorDetailControl : TemplatedControl
            Hex2 = hex2 as string;
            OpacityNumber = brush.Opacity.ToString(CultureInfo.InvariantCulture);
        }
+        else
+        {
+            Hex = null;
+            Hex2 = null;
+            OpacityNumber = null;
+        }
    }

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

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

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

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

    </StackPanel>
@@ -1,9 +1,5 @@
-using System.Collections.ObjectModel;
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
-using System.Collections.Generic;
-using CommunityToolkit.Mvvm.ComponentModel;
+using Semi.Avalonia.Demo.ViewModels;

 namespace Semi.Avalonia.Demo.Pages;

@@ -14,86 +10,4 @@ public partial class AutoCompleteBoxDemo : UserControl
        InitializeComponent();
        this.DataContext = new AutoCompleteBoxDemoViewModel();
    }
-}
-
-public class AutoCompleteBoxDemoViewModel: ObservableObject
-{
-    public ObservableCollection<StateData> States { get; set; }
-
-    public AutoCompleteBoxDemoViewModel()
-    {
-        States = new ObservableCollection<StateData>(GetStates());
-        
-    }
-
-    private static List<StateData> GetStates()
-    {
-        return new List<StateData>
-        {
-            new StateData("Alabama", "AL", "Montgomery"),
-            new StateData("Alaska", "AK", "Juneau"),
-            new StateData("Arizona", "AZ", "Phoenix"),
-            new StateData("Arkansas", "AR", "Little Rock"),
-            new StateData("California", "CA", "Sacramento"),
-            new StateData("Colorado", "CO", "Denver"),
-            new StateData("Connecticut", "CT", "Hartford"),
-            new StateData("Delaware", "DE", "Dover"),
-            new StateData("Florida", "FL", "Tallahassee"),
-            new StateData("Georgia", "GA", "Atlanta"),
-            new StateData("Hawaii", "HI", "Honolulu"),
-            new StateData("Idaho", "ID", "Boise"),
-            new StateData("Illinois", "IL", "Springfield"),
-            new StateData("Indiana", "IN", "Indianapolis"),
-            new StateData("Iowa", "IA", "Des Moines"),
-            new StateData("Kansas", "KS", "Topeka"),
-            new StateData("Kentucky", "KY", "Frankfort"),
-            new StateData("Louisiana", "LA", "Baton Rouge"),
-            new StateData("Maine", "ME", "Augusta"),
-            new StateData("Maryland", "MD", "Annapolis"),
-            new StateData("Massachusetts", "MA", "Boston"),
-            new StateData("Michigan", "MI", "Lansing"),
-            new StateData("Minnesota", "MN", "St. Paul"),
-            new StateData("Mississippi", "MS", "Jackson"),
-            new StateData("Missouri", "MO", "Jefferson City"),
-            new StateData("Montana", "MT", "Helena"),
-            new StateData("Nebraska", "NE", "Lincoln"),
-            new StateData("Nevada", "NV", "Carson City"),
-            new StateData("New Hampshire", "NH", "Concord"),
-            new StateData("New Jersey", "NJ", "Trenton"),
-            new StateData("New Mexico", "NM", "Santa Fe"),
-            new StateData("New York", "NY", "Albany"),
-            new StateData("North Carolina", "NC", "Raleigh"),
-            new StateData("North Dakota", "ND", "Bismarck"),
-            new StateData("Ohio", "OH", "Columbus"),
-            new StateData("Oklahoma", "OK", "Oklahoma City"),
-            new StateData("Oregon", "OR", "Salem"),
-            new StateData("Pennsylvania", "PA", "Harrisburg"),
-            new StateData("Rhode Island", "RI", "Providence"),
-            new StateData("South Carolina", "SC", "Columbia"),
-            new StateData("South Dakota", "SD", "Pierre"),
-            new StateData("Tennessee", "TN", "Nashville"),
-            new StateData("Texas", "TX", "Austin"),
-            new StateData("Utah", "UT", "Salt Lake City"),
-            new StateData("Vermont", "VT", "Montpelier"),
-            new StateData("Virginia", "VA", "Richmond"),
-            new StateData("Washington", "WA", "Olympia"),
-            new StateData("West Virginia", "WV", "Charleston"),
-            new StateData("Wisconsin", "WI", "Madison"),
-            new StateData("Wyoming", "WY", "Cheyenne"),
-        };
-    }
-}
-
-public class StateData
-{
-    public string Name { get; private set; }
-    public string Abbreviation { get; private set; }
-    public string Capital { get; private set; }
-
-    public StateData(string name, string abbreviation, string capital)
-    {
-        Name = name;
-        Abbreviation = abbreviation;
-        Capital = capital;
-    }
 }
@@ -18,4 +18,4 @@
            <TextBlock>Shadow on Pointerover</TextBlock>
        </Border>
    </StackPanel>
-</UserControl>
+</UserControl>
@@ -1,6 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;

 namespace Semi.Avalonia.Demo.Pages;

@@ -6,174 +6,369 @@
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <ScrollViewer>
-        <StackPanel HorizontalAlignment="Left" Spacing="20">
+        <StackPanel HorizontalAlignment="Left" Spacing="8">
            <StackPanel.Styles>
-                <Style Selector="SplitButton">
-                    <Setter Property="Flyout">
-                        <MenuFlyout Placement="BottomEdgeAlignedRight">
-                            <MenuItem Header="Submit All" />
-                            <MenuItem Header="Submit Updated" />
-                        </MenuFlyout>
-                    </Setter>
-                </Style>
-                <Style Selector="DropDownButton">
-                    <Setter Property="Flyout">
-                        <MenuFlyout Placement="BottomEdgeAlignedRight">
-                            <MenuItem Header="Submit All" />
-                            <MenuItem Header="Submit Updated" />
-                        </MenuFlyout>
-                    </Setter>
-                </Style>
-                <Style Selector="ToggleSplitButton">
-                    <Setter Property="Flyout">
-                        <MenuFlyout Placement="BottomEdgeAlignedRight">
+                <Style Selector="SplitButton,DropDownButton,ToggleSplitButton">
+                    <Setter Property="Button.Flyout">
+                        <MenuFlyout>
                            <MenuItem Header="Submit All" />
                            <MenuItem Header="Submit Updated" />
                        </MenuFlyout>
                    </Setter>
                </Style>
            </StackPanel.Styles>
+            <HeaderedContentControl
+                Theme="{StaticResource GroupBox}">
+                <HeaderedContentControl.Header>
+                    <StackPanel Spacing="8">
+                        <TextBlock Text="Button/RepeatButton Theme" />
+                        <WrapPanel ItemSpacing="4">
+                            <TextBlock Text="Theme:" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue Solid" Content="Light" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue Solid" Content="Solid" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue Solid" Content="Outline" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue Solid" Content="Borderless" />
+                        </WrapPanel>
+                        <WrapPanel ItemSpacing="4">
+                            <TextBlock Text="Classes:" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Primary" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Secondary" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Tertiary" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Success" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Warning" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Danger" />
+                        </WrapPanel>
+                    </StackPanel>
+                </HeaderedContentControl.Header>
+                <StackPanel HorizontalAlignment="Left" Spacing="16">
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <Button Content="Default" />
+                        <Button Content="Primary" Classes="Primary" />
+                        <Button Content="Secondary" Classes="Secondary" />
+                        <Button Content="Tertiary" Classes="Tertiary" />
+                        <Button Content="Success" Classes="Success" />
+                        <Button Content="Warning" Classes="Warning" />
+                        <Button Content="Danger" Classes="Danger" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <Button Content="Default" Theme="{StaticResource SolidButton}" />
+                        <Button Content="Primary" Classes="Primary" Theme="{StaticResource SolidButton}" />
+                        <Button Content="Secondary" Classes="Secondary" Theme="{StaticResource SolidButton}" />
+                        <Button Content="Tertiary" Classes="Tertiary" Theme="{StaticResource SolidButton}" />
+                        <Button Content="Success" Classes="Success" Theme="{StaticResource SolidButton}" />
+                        <Button Content="Warning" Classes="Warning" Theme="{StaticResource SolidButton}" />
+                        <Button Content="Danger" Classes="Danger" Theme="{StaticResource SolidButton}" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <Button Content="Default" Theme="{StaticResource OutlineButton}" />
+                        <Button Content="Primary" Classes="Primary" Theme="{StaticResource OutlineButton}" />
+                        <Button Content="Secondary" Classes="Secondary" Theme="{StaticResource OutlineButton}" />
+                        <Button Content="Tertiary" Classes="Tertiary" Theme="{StaticResource OutlineButton}" />
+                        <Button Content="Success" Classes="Success" Theme="{StaticResource OutlineButton}" />
+                        <Button Content="Warning" Classes="Warning" Theme="{StaticResource OutlineButton}" />
+                        <Button Content="Danger" Classes="Danger" Theme="{StaticResource OutlineButton}" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <Button Content="Default" Theme="{StaticResource BorderlessButton}" />
+                        <Button Content="Primary" Classes="Primary" Theme="{StaticResource BorderlessButton}" />
+                        <Button Content="Secondary" Classes="Secondary" Theme="{StaticResource BorderlessButton}" />
+                        <Button Content="Tertiary" Classes="Tertiary" Theme="{StaticResource BorderlessButton}" />
+                        <Button Content="Success" Classes="Success" Theme="{StaticResource BorderlessButton}" />
+                        <Button Content="Warning" Classes="Warning" Theme="{StaticResource BorderlessButton}" />
+                        <Button Content="Danger" Classes="Danger" Theme="{StaticResource BorderlessButton}" />
+                    </WrapPanel>
+                </StackPanel>
+            </HeaderedContentControl>

-            <TextBlock>Light (Default)</TextBlock>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <Button Classes="Primary">Primary</Button>
-                <Button Classes="Secondary">Secondary</Button>
-                <Button Classes="Tertiary">Tertiary</Button>
-                <Button Classes="Success">Success</Button>
-                <Button Classes="Warning">Warning</Button>
-                <Button Classes="Danger">Danger</Button>
-                <Button Classes="Danger" IsEnabled="False">Disabled</Button>
-            </StackPanel>
-            <TextBlock>Solid</TextBlock>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
-                <Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
-                <Button Classes="Tertiary" Theme="{DynamicResource SolidButton}">Tertiary</Button>
-                <Button Classes="Success" Theme="{DynamicResource SolidButton}">Success</Button>
-                <Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
-                <Button Classes="Danger" Theme="{DynamicResource SolidButton}">Danger</Button>
-                <Button
-                    Classes="Danger"
-                    IsEnabled="False"
-                    Theme="{DynamicResource SolidButton}">
-                    Disabled
-                </Button>
-            </StackPanel>
-            <TextBlock>Outline</TextBlock>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <Button Classes="Primary" Theme="{DynamicResource OutlineButton}">Primary</Button>
-                <Button Classes="Secondary" Theme="{DynamicResource OutlineButton}">Secondary</Button>
-                <Button Classes="Tertiary" Theme="{DynamicResource OutlineButton}">Tertiary</Button>
-                <Button Classes="Success" Theme="{DynamicResource OutlineButton}">Success</Button>
-                <Button Classes="Warning" Theme="{DynamicResource OutlineButton}">Warning</Button>
-                <Button Classes="Danger" Theme="{DynamicResource OutlineButton}">Danger</Button>
-                <Button Classes="Danger" Theme="{DynamicResource OutlineButton}" IsEnabled="False">Disabled</Button>
-            </StackPanel>
-            <TextBlock>Borderless</TextBlock>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <Button Classes="Primary" Theme="{DynamicResource BorderlessButton}">Primary</Button>
-                <Button Classes="Secondary" Theme="{DynamicResource BorderlessButton}">Secondary</Button>
-                <Button Classes="Tertiary" Theme="{DynamicResource BorderlessButton}">Tertiary</Button>
-                <Button Classes="Success" Theme="{DynamicResource BorderlessButton}">Success</Button>
-                <Button Classes="Warning" Theme="{DynamicResource BorderlessButton}">Warning</Button>
-                <Button Classes="Danger" Theme="{DynamicResource BorderlessButton}">Danger</Button>
-                <Button
-                    Classes="Danger"
-                    IsEnabled="False"
-                    Theme="{DynamicResource BorderlessButton}">
-                    Disabled
-                </Button>
-            </StackPanel>
-            <TextBlock>Disabled</TextBlock>
-            <StackPanel Background="{DynamicResource SemiColorBackground1}" Orientation="Horizontal" Spacing="20">
-                <Button IsEnabled="False">Light</Button>
-                <Button IsEnabled="False" Theme="{DynamicResource SolidButton}">Solid</Button>
-                <Button IsEnabled="False" Theme="{DynamicResource OutlineButton}">Outline</Button>
-                <Button IsEnabled="False" Theme="{DynamicResource BorderlessButton}">Borderless</Button>
-            </StackPanel>
-            <TextBlock>Size Classes</TextBlock>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <Button Classes="Primary Small">Small</Button>
-                <Button Classes="Primary">Default</Button>
-                <Button Classes="Primary Large">Large</Button>
-            </StackPanel>
+            <HeaderedContentControl
+                Theme="{StaticResource GroupBox}"
+                Header="Prohibited Status">
+                <WrapPanel ItemSpacing="16" LineSpacing="16">
+                    <Button Content="Light" IsEnabled="False" />
+                    <Button Content="Solid" IsEnabled="False" Theme="{StaticResource SolidButton}" />
+                    <Button Content="Outline" IsEnabled="False" Theme="{StaticResource OutlineButton}" />
+                    <Button Content="Borderless" IsEnabled="False" Theme="{StaticResource BorderlessButton}" />
+                </WrapPanel>
+            </HeaderedContentControl>

-            <TextBlock>DropDownButton</TextBlock>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <DropDownButton Content="Primary" />
-                <DropDownButton Classes="Secondary" Content="Secondary" />
-                <DropDownButton Classes="Tertiary" Content="Tertiary" />
-                <DropDownButton Classes="Success" Content="Success" />
-                <DropDownButton Classes="Warning" Content="Warning" />
-                <DropDownButton Classes="Danger" Content="Danger" />
-                <DropDownButton
-                    Classes="Danger"
-                    Content="Disabled"
-                    IsEnabled="False" />
-            </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <DropDownButton Content="Default" Classes="Success"/>
-                <DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success"/>
-                <DropDownButton Content="Outline" Theme="{DynamicResource OutlineDropDownButton}" Classes="Success"/>
-                <DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success"/>
-                <DropDownButton Content="Default" Classes="Success" IsEnabled="False"/>
-                <DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success" IsEnabled="False"/>
-                <DropDownButton Content="Outline" Theme="{DynamicResource OutlineDropDownButton}" Classes="Success" IsEnabled="False"/>
-                <DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success" IsEnabled="False"/>
-            </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <DropDownButton Classes="Small" Content="Small" />
-                <DropDownButton Content="Default" />
-                <DropDownButton Classes="Large" Content="Large" />
-            </StackPanel>
+            <HeaderedContentControl
+                Theme="{StaticResource GroupBox}">
+                <HeaderedContentControl.Header>
+                    <StackPanel Spacing="8">
+                        <WrapPanel ItemSpacing="4">
+                            <TextBlock Text="Size Classes:" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Large" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Blue" Content="Small" />
+                        </WrapPanel>
+                    </StackPanel>
+                </HeaderedContentControl.Header>
+                <WrapPanel ItemSpacing="16" LineSpacing="16">
+                    <Button Content="Large" Classes="Large" />
+                    <Button Content="Default" />
+                    <Button Content="Small" Classes="Small" />
+                </WrapPanel>
+            </HeaderedContentControl>

-            <TextBlock>SplitButton</TextBlock>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <SplitButton Content="Primary" />
-                <SplitButton Classes="Secondary" Content="Secondary" />
-                <SplitButton Classes="Tertiary" Content="Tertiary" />
-                <SplitButton Classes="Success" Content="Success" />
-                <SplitButton Classes="Warning" Content="Warning" />
-                <SplitButton Classes="Danger" Content="Danger" />
-                <SplitButton Classes="Danger" Content="Disabled" IsEnabled="False" />
-            </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <SplitButton Content="Default" Classes="Success" />
-                <SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}"  Classes="Success" />
-                <SplitButton Content="Outline" Theme="{DynamicResource OutlineSplitButton}" Classes="Success" />
-                <SplitButton Content="Borderless" Theme="{DynamicResource BorderlessSplitButton}" Classes="Success" />
-                <SplitButton Content="Default" Classes="Success" IsEnabled="False" />
-                <SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}" Classes="Success" IsEnabled="False" />
-                <SplitButton Content="Outline" Theme="{DynamicResource OutlineSplitButton}" Classes="Success" IsEnabled="False" />
-                <SplitButton Content="Borderless" Theme="{DynamicResource BorderlessSplitButton}" Classes="Success" IsEnabled="False" />
-            </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <SplitButton Classes="Small" Content="Small" />
-                <SplitButton Content="Default" />
-                <SplitButton Classes="Large" Content="Large" />
-            </StackPanel>
+            <HeaderedContentControl
+                Theme="{StaticResource GroupBox}">
+                <HeaderedContentControl.Header>
+                    <StackPanel Spacing="8">
+                        <TextBlock Text="AI style - Colorful Button" />
+                        <WrapPanel ItemSpacing="4">
+                            <TextBlock Text="Theme:" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient Solid" Content="Light" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient Solid" Content="Solid" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient Solid" Content="Outline" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient Solid" Content="Borderless" />
+                        </WrapPanel>
+                        <WrapPanel ItemSpacing="4">
+                            <TextBlock Text="Classes:" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient" Content="Colorful Primary" />
+                            <Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient" Content="Colorful Tertiary" />
+                        </WrapPanel>
+                    </StackPanel>
+                </HeaderedContentControl.Header>
+                <StackPanel HorizontalAlignment="Left" Spacing="16">
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <Button Content="Primary" Classes="Colorful Primary" />
+                        <Button Content="Tertiary" Classes="Colorful Tertiary" />
+                        <Button Content="Disabled" Classes="Colorful Primary" IsEnabled="False" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <Button Content="Primary" Classes="Colorful Primary" Theme="{StaticResource SolidButton}" />
+                        <Button Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource SolidButton}" />
+                        <Button Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource SolidButton}" IsEnabled="False" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <Button Content="Primary" Classes="Colorful Primary" Theme="{StaticResource OutlineButton}" />
+                        <Button Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource OutlineButton}" />
+                        <Button Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource OutlineButton}" IsEnabled="False" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <Button Content="Primary" Classes="Colorful Primary" Theme="{StaticResource BorderlessButton}" />
+                        <Button Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource BorderlessButton}" />
+                        <Button Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource BorderlessButton}" IsEnabled="False" />
+                    </WrapPanel>
+                </StackPanel>
+            </HeaderedContentControl>

-            <TextBlock>ToggleSplitButton</TextBlock>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <ToggleSplitButton Content="Primary" />
-                <ToggleSplitButton Classes="Secondary" Content="Secondary" />
-                <ToggleSplitButton Classes="Tertiary" Content="Tertiary" />
-                <ToggleSplitButton Classes="Success" Content="Success" />
-                <ToggleSplitButton Classes="Warning" Content="Warning" />
-                <ToggleSplitButton Classes="Danger" Content="Danger" />
-                <ToggleSplitButton Classes="Danger" Content="Disabled" IsEnabled="False" />
-            </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <ToggleSplitButton Content="Default" Classes="Success" />
-                <ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True"  />
-                <ToggleSplitButton Content="Default" Classes="Success" IsEnabled="False" />
-                <ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True" IsEnabled="False" />
-            </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <ToggleSplitButton Classes="Small" Content="Small" />
-                <ToggleSplitButton Content="Default" />
-                <ToggleSplitButton Classes="Large" Content="Large" />
-            </StackPanel>
+            <HeaderedContentControl
+                Theme="{StaticResource GroupBox}" Header="DropDownButton">
+                <StackPanel HorizontalAlignment="Left" Spacing="16">
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <DropDownButton Content="Default" />
+                        <DropDownButton Content="Primary" Classes="Primary" />
+                        <DropDownButton Content="Secondary" Classes="Secondary" />
+                        <DropDownButton Content="Tertiary" Classes="Tertiary" />
+                        <DropDownButton Content="Success" Classes="Success" />
+                        <DropDownButton Content="Warning" Classes="Warning" />
+                        <DropDownButton Content="Danger" Classes="Danger" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <DropDownButton Content="Default" Theme="{StaticResource SolidDropDownButton}" />
+                        <DropDownButton Content="Primary" Classes="Primary" Theme="{StaticResource SolidDropDownButton}" />
+                        <DropDownButton Content="Secondary" Classes="Secondary" Theme="{StaticResource SolidDropDownButton}" />
+                        <DropDownButton Content="Tertiary" Classes="Tertiary" Theme="{StaticResource SolidDropDownButton}" />
+                        <DropDownButton Content="Success" Classes="Success" Theme="{StaticResource SolidDropDownButton}" />
+                        <DropDownButton Content="Warning" Classes="Warning" Theme="{StaticResource SolidDropDownButton}" />
+                        <DropDownButton Content="Danger" Classes="Danger" Theme="{StaticResource SolidDropDownButton}" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <DropDownButton Content="Default" Theme="{StaticResource OutlineDropDownButton}" />
+                        <DropDownButton Content="Primary" Classes="Primary" Theme="{StaticResource OutlineDropDownButton}" />
+                        <DropDownButton Content="Secondary" Classes="Secondary" Theme="{StaticResource OutlineDropDownButton}" />
+                        <DropDownButton Content="Tertiary" Classes="Tertiary" Theme="{StaticResource OutlineDropDownButton}" />
+                        <DropDownButton Content="Success" Classes="Success" Theme="{StaticResource OutlineDropDownButton}" />
+                        <DropDownButton Content="Warning" Classes="Warning" Theme="{StaticResource OutlineDropDownButton}" />
+                        <DropDownButton Content="Danger" Classes="Danger" Theme="{StaticResource OutlineDropDownButton}" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <DropDownButton Content="Default" Theme="{StaticResource BorderlessDropDownButton}" />
+                        <DropDownButton Content="Primary" Classes="Primary" Theme="{StaticResource BorderlessDropDownButton}" />
+                        <DropDownButton Content="Secondary" Classes="Secondary" Theme="{StaticResource BorderlessDropDownButton}" />
+                        <DropDownButton Content="Tertiary" Classes="Tertiary" Theme="{StaticResource BorderlessDropDownButton}" />
+                        <DropDownButton Content="Success" Classes="Success" Theme="{StaticResource BorderlessDropDownButton}" />
+                        <DropDownButton Content="Warning" Classes="Warning" Theme="{StaticResource BorderlessDropDownButton}" />
+                        <DropDownButton Content="Danger" Classes="Danger" Theme="{StaticResource BorderlessDropDownButton}" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <DropDownButton Content="Light" IsEnabled="False" />
+                        <DropDownButton Content="Solid" IsEnabled="False" Theme="{StaticResource SolidDropDownButton}" />
+                        <DropDownButton Content="Outline" IsEnabled="False" Theme="{StaticResource OutlineDropDownButton}" />
+                        <DropDownButton Content="Borderless" IsEnabled="False" Theme="{StaticResource BorderlessDropDownButton}" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <DropDownButton Content="Large" Classes="Large" />
+                        <DropDownButton Content="Default" />
+                        <DropDownButton Content="Small" Classes="Small" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <DropDownButton Content="Primary" Classes="Colorful Primary" />
+                        <DropDownButton Content="Tertiary" Classes="Colorful Tertiary" />
+                        <DropDownButton Content="Disabled" Classes="Colorful Primary" IsEnabled="False" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <DropDownButton Content="Primary" Classes="Colorful Primary" Theme="{StaticResource SolidDropDownButton}" />
+                        <DropDownButton Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource SolidDropDownButton}" />
+                        <DropDownButton Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource SolidDropDownButton}" IsEnabled="False" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <DropDownButton Content="Primary" Classes="Colorful Primary" Theme="{StaticResource OutlineDropDownButton}" />
+                        <DropDownButton Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource OutlineDropDownButton}" />
+                        <DropDownButton Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource OutlineDropDownButton}" IsEnabled="False" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <DropDownButton Content="Primary" Classes="Colorful Primary" Theme="{StaticResource BorderlessDropDownButton}" />
+                        <DropDownButton Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource BorderlessDropDownButton}" />
+                        <DropDownButton Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource BorderlessDropDownButton}" IsEnabled="False" />
+                    </WrapPanel>
+                </StackPanel>
+            </HeaderedContentControl>
+
+            <HeaderedContentControl
+                Theme="{StaticResource GroupBox}" Header="SplitButton">
+                <StackPanel HorizontalAlignment="Left" Spacing="16">
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <SplitButton Content="Default" />
+                        <SplitButton Content="Primary" Classes="Primary" />
+                        <SplitButton Content="Secondary" Classes="Secondary" />
+                        <SplitButton Content="Tertiary" Classes="Tertiary" />
+                        <SplitButton Content="Success" Classes="Success" />
+                        <SplitButton Content="Warning" Classes="Warning" />
+                        <SplitButton Content="Danger" Classes="Danger" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <SplitButton Content="Default" Theme="{StaticResource SolidSplitButton}" />
+                        <SplitButton Content="Primary" Classes="Primary" Theme="{StaticResource SolidSplitButton}" />
+                        <SplitButton Content="Secondary" Classes="Secondary" Theme="{StaticResource SolidSplitButton}" />
+                        <SplitButton Content="Tertiary" Classes="Tertiary" Theme="{StaticResource SolidSplitButton}" />
+                        <SplitButton Content="Success" Classes="Success" Theme="{StaticResource SolidSplitButton}" />
+                        <SplitButton Content="Warning" Classes="Warning" Theme="{StaticResource SolidSplitButton}" />
+                        <SplitButton Content="Danger" Classes="Danger" Theme="{StaticResource SolidSplitButton}" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <SplitButton Content="Default" Theme="{StaticResource OutlineSplitButton}" />
+                        <SplitButton Content="Primary" Classes="Primary" Theme="{StaticResource OutlineSplitButton}" />
+                        <SplitButton Content="Secondary" Classes="Secondary" Theme="{StaticResource OutlineSplitButton}" />
+                        <SplitButton Content="Tertiary" Classes="Tertiary" Theme="{StaticResource OutlineSplitButton}" />
+                        <SplitButton Content="Success" Classes="Success" Theme="{StaticResource OutlineSplitButton}" />
+                        <SplitButton Content="Warning" Classes="Warning" Theme="{StaticResource OutlineSplitButton}" />
+                        <SplitButton Content="Danger" Classes="Danger" Theme="{StaticResource OutlineSplitButton}" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <SplitButton Content="Default" Theme="{StaticResource BorderlessSplitButton}" />
+                        <SplitButton Content="Primary" Classes="Primary" Theme="{StaticResource BorderlessSplitButton}" />
+                        <SplitButton Content="Secondary" Classes="Secondary" Theme="{StaticResource BorderlessSplitButton}" />
+                        <SplitButton Content="Tertiary" Classes="Tertiary" Theme="{StaticResource BorderlessSplitButton}" />
+                        <SplitButton Content="Success" Classes="Success" Theme="{StaticResource BorderlessSplitButton}" />
+                        <SplitButton Content="Warning" Classes="Warning" Theme="{StaticResource BorderlessSplitButton}" />
+                        <SplitButton Content="Danger" Classes="Danger" Theme="{StaticResource BorderlessSplitButton}" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <SplitButton Content="Light" IsEnabled="False" />
+                        <SplitButton Content="Solid" IsEnabled="False" Theme="{StaticResource SolidSplitButton}" />
+                        <SplitButton Content="Outline" IsEnabled="False" Theme="{StaticResource OutlineSplitButton}" />
+                        <SplitButton Content="Borderless" IsEnabled="False" Theme="{StaticResource BorderlessSplitButton}" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <SplitButton Content="Large" Classes="Large" />
+                        <SplitButton Content="Default" />
+                        <SplitButton Content="Small" Classes="Small" />
+                    </WrapPanel>
+                </StackPanel>
+            </HeaderedContentControl>
+
+            <HeaderedContentControl
+                Theme="{StaticResource GroupBox}"
+                Header="ToggleSplitButton">
+                <StackPanel HorizontalAlignment="Left" Spacing="24">
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleSplitButton Content="Default" />
+                        <ToggleSplitButton Classes="Primary" Content="Primary" />
+                        <ToggleSplitButton Classes="Secondary" Content="Secondary" />
+                        <ToggleSplitButton Classes="Tertiary" Content="Tertiary" />
+                        <ToggleSplitButton Classes="Success" Content="Success" />
+                        <ToggleSplitButton Classes="Warning" Content="Warning" />
+                        <ToggleSplitButton Classes="Danger" Content="Danger" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleSplitButton Content="Default" IsChecked="True" />
+                        <ToggleSplitButton Classes="Primary" Content="Primary" IsChecked="True" />
+                        <ToggleSplitButton Classes="Secondary" Content="Secondary" IsChecked="True" />
+                        <ToggleSplitButton Classes="Tertiary" Content="Tertiary" IsChecked="True" />
+                        <ToggleSplitButton Classes="Success" Content="Success" IsChecked="True" />
+                        <ToggleSplitButton Classes="Warning" Content="Warning" IsChecked="True" />
+                        <ToggleSplitButton Classes="Danger" Content="Danger" IsChecked="True" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleSplitButton Content="Unchecked" Classes="Success" IsEnabled="False" />
+                        <ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True" IsEnabled="False" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleSplitButton Content="Large" Classes="Large" />
+                        <ToggleSplitButton Content="Default" />
+                        <ToggleSplitButton Content="Small" Classes="Small" />
+                    </WrapPanel>
+                </StackPanel>
+            </HeaderedContentControl>
+
+            <HeaderedContentControl
+                Theme="{StaticResource GroupBox}" Header="ToggleButton">
+                <StackPanel HorizontalAlignment="Left" Spacing="16">
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleButton Content="Default" />
+                        <ToggleButton Content="Primary" Classes="Primary" />
+                        <ToggleButton Content="Secondary" Classes="Secondary" />
+                        <ToggleButton Content="Tertiary" Classes="Tertiary" />
+                        <ToggleButton Content="Success" Classes="Success" />
+                        <ToggleButton Content="Warning" Classes="Warning" />
+                        <ToggleButton Content="Danger" Classes="Danger" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleButton Content="Default" IsChecked="True" />
+                        <ToggleButton Content="Primary" Classes="Primary" IsChecked="True" />
+                        <ToggleButton Content="Secondary" Classes="Secondary" IsChecked="True" />
+                        <ToggleButton Content="Tertiary" Classes="Tertiary" IsChecked="True" />
+                        <ToggleButton Content="Success" Classes="Success" IsChecked="True" />
+                        <ToggleButton Content="Warning" Classes="Warning" IsChecked="True" />
+                        <ToggleButton Content="Danger" Classes="Danger" IsChecked="True" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleButton Content="Default" IsChecked="{x:Null}" IsThreeState="True" />
+                        <ToggleButton Content="Primary" Classes="Primary" IsChecked="{x:Null}" IsThreeState="True" />
+                        <ToggleButton Content="Secondary" Classes="Secondary" IsChecked="{x:Null}" IsThreeState="True" />
+                        <ToggleButton Content="Tertiary" Classes="Tertiary" IsChecked="{x:Null}" IsThreeState="True" />
+                        <ToggleButton Content="Success" Classes="Success" IsChecked="{x:Null}" IsThreeState="True" />
+                        <ToggleButton Content="Warning" Classes="Warning" IsChecked="{x:Null}" IsThreeState="True" />
+                        <ToggleButton Content="Danger" Classes="Danger" IsChecked="{x:Null}" IsThreeState="True" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleButton Content="Unchecked" IsEnabled="False" />
+                        <ToggleButton Content="Checked" IsEnabled="False" IsChecked="True" />
+                        <ToggleButton Content="Indeterminate" IsEnabled="False" IsChecked="{x:Null}" IsThreeState="True" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleButton Content="Large" Classes="Large" />
+                        <ToggleButton Content="Default" />
+                        <ToggleButton Content="Small" Classes="Small" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleButton Content="Primary" Classes="Colorful Primary" />
+                        <ToggleButton Content="Tertiary" Classes="Colorful Tertiary" />
+                        <ToggleButton Content="Disabled" Classes="Colorful Primary" IsEnabled="False" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleButton Content="Primary" Classes="Colorful Primary" IsChecked="True" />
+                        <ToggleButton Content="Tertiary" Classes="Colorful Tertiary" IsChecked="True" />
+                        <ToggleButton Content="Disabled" Classes="Colorful Primary" IsChecked="True" IsEnabled="False" />
+                    </WrapPanel>
+                    <WrapPanel ItemSpacing="16" LineSpacing="16">
+                        <ToggleButton Content="Primary" Classes="Colorful Primary" IsChecked="{x:Null}" IsThreeState="True" />
+                        <ToggleButton Content="Tertiary" Classes="Colorful Tertiary" IsChecked="{x:Null}" IsThreeState="True" />
+                        <ToggleButton Content="Disabled" Classes="Colorful Primary" IsChecked="{x:Null}" IsThreeState="True" IsEnabled="False" />
+                    </WrapPanel>
+                </StackPanel>
+            </HeaderedContentControl>
        </StackPanel>
    </ScrollViewer>
 </UserControl>
@@ -1,6 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;

 namespace Semi.Avalonia.Demo.Pages;

@@ -8,6 +8,10 @@
    d:DesignWidth="800"
    mc:Ignorable="d">
    <StackPanel HorizontalAlignment="Left" Spacing="20">
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Name="showSpinCheck" IsChecked="True" Content="Show Button Spinner" />
+            <ToggleSwitch Name="allowSpinCheck" IsChecked="True" Content="Allow Spin" />
+        </StackPanel>
        <ButtonSpinner
            Height="30"
            AllowSpin="{Binding #allowSpinCheck.IsChecked}"
@@ -31,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>
+</UserControl>
@@ -1,7 +1,5 @@
 using System;
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;

 namespace Semi.Avalonia.Demo.Pages;

@@ -31,7 +29,6 @@ public partial class ButtonSpinnerDemo : UserControl

            txtBox.Text = _mountains[value];
        }
-
    }

    private readonly string[] _mountains = new[]
@@ -33,6 +33,6 @@
            Margin="0,0,0,8"
            CustomDateFormatString="ddd, MMM d"
            SelectedDateFormat="Custom" />
-        <CalendarDatePicker Margin="0,0,0,8" Watermark="Watermark" />
+        <CalendarDatePicker Margin="0,0,0,8" PlaceholderText="Placeholder" />
    </StackPanel>
 </UserControl>
@@ -1,6 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;

 namespace Semi.Avalonia.Demo.Pages;

@@ -11,4 +11,4 @@
        <Calendar />
        <Calendar SelectionMode="SingleRange" />
    </StackPanel>
-</UserControl>
+</UserControl>
@@ -1,6 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;

 namespace Semi.Avalonia.Demo.Pages;

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

 namespace Semi.Avalonia.Demo.Pages;

@@ -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}";
+    }
+}
@@ -1,6 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;

 namespace Semi.Avalonia.Demo.Pages;

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

 namespace Semi.Avalonia.Demo.Pages;

@@ -4,49 +4,54 @@
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
    d:DesignHeight="800"
    d:DesignWidth="800"
-    mc:Ignorable="d">
+    mc:Ignorable="d"
+    x:DataType="vm:ComboBoxDemoViewModel">
    <Design.DataContext>
-        <pages:ComboBoxDemoViewModel />
+        <vm:ComboBoxDemoViewModel />
    </Design.DataContext>
-    <StackPanel Spacing="20">
-        <StackPanel.Styles>
-            <Style Selector="ComboBox">
-                <Setter Property="Width" Value="300" />
-                <Setter Property="ItemsSource" Value="{Binding Items}" />
-            </Style>
-        </StackPanel.Styles>
+    <ScrollViewer>
+        <StackPanel Spacing="20">
+            <StackPanel.Styles>
+                <Style Selector="ComboBox">
+                    <Setter Property="Width" Value="300" />
+                    <Setter Property="ItemsSource" Value="{Binding Items}" />
+                </Style>
+            </StackPanel.Styles>

-        <ComboBox />
-        <ComboBox Classes="ClearButton" />
-        <ComboBox PlaceholderText="Please Select" />
-        <ComboBox IsEnabled="False" />
-        <ComboBox Classes="Large" IsEnabled="False" />
-        <ComboBox Classes="Small" />
-        <ComboBox Classes="Bordered" />
-        <ComboBox Classes="Bordered" IsEnabled="False" />
-        <ComboBox>
-          <ComboBox.SelectionBoxItemTemplate>
-            <DataTemplate DataType="x:String">
-              <ContentControl BorderThickness="1"
-                              BorderBrush="Gold"
-                              Content="{Binding}" />
-            </DataTemplate>
-          </ComboBox.SelectionBoxItemTemplate>
-        </ComboBox>
+            <ComboBox />
+            <ComboBox Classes="ClearButton" />
+            <ComboBox PlaceholderText="Please Select" />
+            <ComboBox IsEnabled="False" />
+            <ComboBox Classes="Large" IsEnabled="False" />
+            <ComboBox Classes="Small" />
+            <ComboBox Classes="Bordered" />
+            <ComboBox Classes="Bordered" IsEnabled="False" />
+            <ComboBox>
+                <ComboBox.SelectionBoxItemTemplate>
+                    <DataTemplate DataType="x:String">
+                        <ContentControl BorderThickness="1"
+                                        BorderBrush="Gold"
+                                        Content="{Binding}" />
+                    </DataTemplate>
+                </ComboBox.SelectionBoxItemTemplate>
+            </ComboBox>

-        <StackPanel Orientation="Horizontal">
-            <ComboBox Width="100" Classes="Large" PlaceholderText="Large" />
-            <ComboBox Width="100" PlaceholderText="Default" />
-            <ComboBox Width="100" Classes="Small" PlaceholderText="Small" />
+            <StackPanel Orientation="Horizontal">
+                <ComboBox Width="100" Classes="Large" PlaceholderText="Large" />
+                <ComboBox Width="100" PlaceholderText="Default" />
+                <ComboBox Width="100" Classes="Small" PlaceholderText="Small" />
+            </StackPanel>
+
+            <StackPanel Orientation="Horizontal">
+                <ComboBox Width="100" IsEnabled="False" PlaceholderText="Disabled" />
+                <ComboBox Width="100" Classes="Bordered" PlaceholderText="Bordered" />
+                <ComboBox Width="100" Classes="Bordered" IsEnabled="False" />
+            </StackPanel>
+            <ToggleSwitch Name="toggle" IsChecked="True" Content="IsEditable" />
+            <ComboBox IsEditable="{Binding #toggle.IsChecked}" />
        </StackPanel>
-
-        <StackPanel Orientation="Horizontal">
-            <ComboBox Width="100" IsEnabled="False" PlaceholderText="Disabled" />
-            <ComboBox Width="100" Classes="Bordered" PlaceholderText="Bordered" />
-            <ComboBox Width="100" Classes="Bordered" IsEnabled="False" />
-        </StackPanel>
-    </StackPanel>
-</UserControl>
+    </ScrollViewer>
+</UserControl>
@@ -1,6 +1,5 @@
-using System.Collections.ObjectModel;
 using Avalonia.Controls;
-using CommunityToolkit.Mvvm.ComponentModel;
+using Semi.Avalonia.Demo.ViewModels;

 namespace Semi.Avalonia.Demo.Pages;

@@ -11,9 +10,4 @@ public partial class ComboBoxDemo : UserControl
        InitializeComponent();
        this.DataContext = new ComboBoxDemoViewModel();
    }
-}
-
-public class ComboBoxDemoViewModel : ObservableObject
-{
-    public ObservableCollection<string> Items { get; set; } = ["Ding", "Otter", "Husky", "Mr.17", "Cass"];
 }
@@ -0,0 +1,94 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.CommandBarDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:collections="clr-namespace:Avalonia.Collections;assembly=Avalonia.Base"
+    d:DesignHeight="600"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <UserControl.Resources>
+        <collections:AvaloniaList x:TypeArguments="CommandBarDefaultLabelPosition" x:Key="LabelPositionList">
+            <CommandBarDefaultLabelPosition>Bottom</CommandBarDefaultLabelPosition>
+            <CommandBarDefaultLabelPosition>Collapsed</CommandBarDefaultLabelPosition>
+            <CommandBarDefaultLabelPosition>Right</CommandBarDefaultLabelPosition>
+        </collections:AvaloniaList>
+        <collections:AvaloniaList x:TypeArguments="CommandBarOverflowButtonVisibility" x:Key="VisibilityList">
+            <CommandBarOverflowButtonVisibility>Auto</CommandBarOverflowButtonVisibility>
+            <CommandBarOverflowButtonVisibility>Collapsed</CommandBarOverflowButtonVisibility>
+            <CommandBarOverflowButtonVisibility>Visible</CommandBarOverflowButtonVisibility>
+        </collections:AvaloniaList>
+    </UserControl.Resources>
+    <ScrollViewer>
+        <StackPanel Spacing="16">
+            <GroupBox>
+                <GroupBox.Header>
+                    <Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto">
+
+                        <TextBlock Grid.Row="0" Grid.Column="0" Text="DefaultLabelPosition" VerticalAlignment="Center" />
+                        <ComboBox Grid.Row="0" Grid.Column="1"
+                                  Name="lc"
+                                  ItemsSource="{DynamicResource LabelPositionList}"
+                                  SelectedValue="{x:Static CommandBarDefaultLabelPosition.Bottom}" />
+
+                        <TextBlock Grid.Row="1" Grid.Column="0" Text="OverflowButtonVisibility" VerticalAlignment="Center" />
+                        <ComboBox Grid.Row="1" Grid.Column="1"
+                                  Name="btvb"
+                                  ItemsSource="{DynamicResource VisibilityList}"
+                                  SelectedValue="{x:Static CommandBarOverflowButtonVisibility.Auto}" />
+
+                        <TextBlock Grid.Row="2" Grid.Column="0" Text="IsDynamicOverflowEnabled" VerticalAlignment="Center" />
+                        <ToggleSwitch Grid.Row="2" Grid.Column="1" Name="idfe" IsChecked="True" />
+
+                        <TextBlock Grid.Row="3" Grid.Column="0" Text="IsOpen" VerticalAlignment="Center" />
+                        <ToggleSwitch Grid.Row="3" Grid.Column="1" Name="isop" />
+
+                        <TextBlock Grid.Row="4" Grid.Column="0" Text="IsSticky" VerticalAlignment="Center" />
+                        <ToggleSwitch Grid.Row="4" Grid.Column="1" Name="isst" />
+
+                        <TextBlock Grid.Row="5" Grid.Column="0" Text="Width" VerticalAlignment="Center" />
+                        <Slider Grid.Row="5" Grid.Column="1" Name="ws" HorizontalAlignment="Left" Width="500" Minimum="0" Maximum="1000" Value="200" />
+                    </Grid>
+                </GroupBox.Header>
+                <CommandBar
+                    DefaultLabelPosition="{Binding #lc.SelectedValue}"
+                    OverflowButtonVisibility="{Binding #btvb.SelectedValue}"
+                    IsDynamicOverflowEnabled="{Binding #idfe.IsChecked}"
+                    IsOpen="{Binding #isop.IsChecked}"
+                    IsSticky="{Binding #isst.IsChecked}"
+                    Width="{Binding #ws.Value}">
+                    <CommandBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
+                    <CommandBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
+                    <CommandBarSeparator />
+                    <CommandBarToggleButton Label="Bold" Icon="{DynamicResource SemiIconBold}" />
+                    <CommandBarToggleButton Label="Italic" Icon="{DynamicResource SemiIconItalic}" />
+                    <CommandBarToggleButton IsChecked="True" IsEnabled="False" Label="Underline" Icon="{DynamicResource SemiIconUnderline}" />
+                    <CommandBarSeparator />
+                    <CommandBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
+                    <CommandBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
+                    <CommandBarButton Label="Print" Icon="{DynamicResource SemiIconPrint}" />
+                    <CommandBarSeparator />
+                    <CommandBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
+                </CommandBar>
+            </GroupBox>
+
+            <!--  With secondary commands (overflow)  -->
+            <GroupBox>
+                <GroupBox.Header>
+                    <TextBlock Text="CommandBar — With Secondary Commands (overflow)" />
+                </GroupBox.Header>
+                <CommandBar>
+                    <CommandBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
+                    <CommandBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
+                    <CommandBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
+                    <CommandBar.SecondaryCommands>
+                        <CommandBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
+                        <CommandBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
+                    </CommandBar.SecondaryCommands>
+                </CommandBar>
+            </GroupBox>
+
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>
@@ -0,0 +1,11 @@
+using Avalonia.Controls;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class CommandBarDemo : UserControl
+{
+    public CommandBarDemo()
+    {
+        InitializeComponent();
+    }
+}
@@ -0,0 +1,54 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.ContentPageDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="600"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <DockPanel>
+        <ScrollViewer DockPanel.Dock="Right" Width="260">
+            <StackPanel Margin="12" Spacing="8">
+                <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
+                           Foreground="{DynamicResource SemiColorText0}" />
+                <TextBlock Text="ContentPage is the fundamental page type. It hosts a single piece of content and integrates with NavigationPage, TabbedPage, and CarouselPage. The Header property sets the navigation bar title."
+                           FontSize="12" Opacity="0.7" TextWrapping="Wrap" />
+
+                <Separator />
+
+                <TextBlock Text="Navigation" FontWeight="SemiBold" />
+                <Button Content="Push Page" HorizontalAlignment="Stretch" Click="OnPush" />
+                <Button Content="Pop Page" HorizontalAlignment="Stretch" Click="OnPop" />
+                <Button Content="Pop to Root" HorizontalAlignment="Stretch" Click="OnPopToRoot" />
+
+                <Separator />
+
+                <TextBlock Text="Key Properties" FontWeight="SemiBold" />
+                <TextBlock Text="• Header: nav bar title (string or Control)" FontSize="12" Opacity="0.8" TextWrapping="Wrap" />
+                <TextBlock Text="• Content: any Avalonia control" FontSize="12" Opacity="0.8" TextWrapping="Wrap" />
+                <TextBlock Text="• Background: page background brush" FontSize="12" Opacity="0.8" TextWrapping="Wrap" />
+                <TextBlock Text="• HorizontalContentAlignment" FontSize="12" Opacity="0.8" />
+                <TextBlock Text="• VerticalContentAlignment" FontSize="12" Opacity="0.8" />
+                <TextBlock Text="• AutomaticallyApplySafeAreaPadding" FontSize="12" Opacity="0.8" />
+
+                <Separator />
+
+                <TextBlock Name="StatusText"
+                           Text="Depth: 1 | Current: Root Page"
+                           FontSize="11"
+                           Opacity="0.7" />
+            </StackPanel>
+        </ScrollViewer>
+
+        <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
+
+        <Border Margin="12"
+                BorderBrush="{DynamicResource SemiColorBorder}"
+                BorderThickness="1"
+                CornerRadius="6"
+                ClipToBounds="True">
+            <NavigationPage Name="DemoNav" />
+        </Border>
+    </DockPanel>
+</UserControl>
@@ -0,0 +1,93 @@
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Avalonia.Media;
+using Avalonia.Layout;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class ContentPageDemo : UserControl
+{
+    private static readonly Color[] PageColors =
+    [
+        Color.FromRgb(0xE3, 0xF2, 0xFD), // blue
+        Color.FromRgb(0xF3, 0xE5, 0xF5), // purple
+        Color.FromRgb(0xE8, 0xF5, 0xE9), // green
+        Color.FromRgb(0xFF, 0xF8, 0xE1), // amber
+        Color.FromRgb(0xFB, 0xE9, 0xE7), // deep orange
+    ];
+
+    private int _pageCount;
+
+    public ContentPageDemo()
+    {
+        InitializeComponent();
+        Loaded += OnLoaded;
+    }
+
+    private async void OnLoaded(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PushAsync(MakePage("Root Page", "ContentPage inside a NavigationPage.\nUse the options to navigate."));
+        UpdateStatus();
+    }
+
+    private async void OnPush(object? sender, RoutedEventArgs e)
+    {
+        _pageCount++;
+        await DemoNav.PushAsync(MakePage($"Page {_pageCount}", $"ContentPage #{_pageCount}.\nNavigate back using the back button."));
+        UpdateStatus();
+    }
+
+    private async void OnPop(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PopAsync();
+        UpdateStatus();
+    }
+
+    private async void OnPopToRoot(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PopToRootAsync();
+        _pageCount = 0;
+        UpdateStatus();
+    }
+
+    private void UpdateStatus()
+    {
+        StatusText.Text = $"Depth: {DemoNav.StackDepth} | Current: {DemoNav.CurrentPage?.Header}";
+    }
+
+    private ContentPage MakePage(string header, string body) =>
+        new ContentPage
+        {
+            Header = header,
+            Background = new SolidColorBrush(PageColors[_pageCount % PageColors.Length]),
+            Content = new StackPanel
+            {
+                HorizontalAlignment = HorizontalAlignment.Center,
+                VerticalAlignment = VerticalAlignment.Center,
+                Spacing = 10,
+                Children =
+                {
+                    new TextBlock
+                    {
+                        Text = header,
+                        FontSize = 20,
+                        FontWeight = FontWeight.SemiBold,
+                        HorizontalAlignment = HorizontalAlignment.Center,
+                        Foreground = Brushes.Black,
+                    },
+                    new TextBlock
+                    {
+                        Text = body,
+                        FontSize = 13,
+                        Opacity = 0.7,
+                        TextWrapping = TextWrapping.Wrap,
+                        TextAlignment = TextAlignment.Center,
+                        MaxWidth = 260,
+                        Foreground = Brushes.Black,
+                    }
+                }
+            },
+            HorizontalContentAlignment = HorizontalAlignment.Stretch,
+            VerticalContentAlignment = VerticalAlignment.Stretch
+        };
+}
@@ -7,59 +7,58 @@
    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels;assembly=Semi.Avalonia.Demo"
    d:DesignHeight="450"
    d:DesignWidth="800"
-    x:CompileBindings="True"
    x:DataType="vm:DataGridDemoViewModel"
    mc:Ignorable="d">
    <TabControl>
        <TabItem Header="DataGrid">
-           <Grid RowDefinitions="Auto, *">
-               <StackPanel Grid.Row="0" Orientation="Horizontal">
-                   <ToggleSwitch Content="Enable" Name="enable" IsChecked="True" />
-                   <ToggleSwitch Content="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>
+            <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>
+                </DataGrid>
+
+            </Grid>
        </TabItem>
        <TabItem Header="Grouping">
            <DataGrid
@@ -177,4 +176,4 @@
            </Grid>
        </TabItem>
    </TabControl>
-</UserControl>
+</UserControl>
@@ -1,18 +1,6 @@
-using System;
-using System.Collections;
-using System.Collections.Generic;
-using System.Collections.ObjectModel;
-using System.ComponentModel;
-using System.Linq;
 using Avalonia;
-using Avalonia.Collections;
 using Avalonia.Controls;
-using Avalonia.Controls.Primitives;
-using Avalonia.Data;
-using Avalonia.Input;
-using Avalonia.Input.Raw;
 using Avalonia.Markup.Xaml;
-using Avalonia.Threading;
 using Semi.Avalonia.Demo.ViewModels;

 namespace Semi.Avalonia.Demo.Pages;
@@ -80,4 +80,4 @@
            </TextBox>
        </StackPanel>
    </ScrollViewer>
-</UserControl>
+</UserControl>
@@ -1,6 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;

 namespace Semi.Avalonia.Demo.Pages;

@@ -10,9 +8,4 @@ public partial class DataValidationErrorsDemo : UserControl
    {
        InitializeComponent();
    }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }
@@ -26,4 +26,4 @@
        </StackPanel>

    </StackPanel>
-</UserControl>
+</UserControl>
@@ -1,7 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
-using Avalonia.Media;

 namespace Semi.Avalonia.Demo.Pages;

@@ -11,14 +8,4 @@ public partial class DatePickerDemo : UserControl
    {
        InitializeComponent();
    }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
-
-    public override void Render(DrawingContext context)
-    {
-        base.Render(context);
-    }
 }
@@ -0,0 +1,116 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.DrawerPageDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="700"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <DockPanel>
+        <ScrollViewer DockPanel.Dock="Right" Width="260">
+            <StackPanel Margin="12" Spacing="8">
+                <TextBlock
+                    Theme="{DynamicResource TitleTextBlock}"
+                    Classes="H4"
+                    Text="Configuration" />
+
+                <CheckBox Name="ToggleDrawerCheck"
+                          Content="Toggle Drawer" />
+
+                <CheckBox Name="GestureCheck"
+                          Content="Gesture Enabled"
+                          IsChecked="True" />
+
+                <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="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 SemiColorBorder}" />
+
+        <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>
@@ -0,0 +1,45 @@
+using System.Linq;
+using Avalonia.Controls;
+using Avalonia.Input.GestureRecognizers;
+using Avalonia.Layout;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class DrawerPageDemo : UserControl
+{
+    public DrawerPageDemo()
+    {
+        InitializeComponent();
+        EnableMouseSwipeGesture(DemoDrawer);
+    }
+
+    private void OnMenuSelectionChanged(object? sender, SelectionChangedEventArgs e)
+    {
+        if (DrawerMenu.SelectedItem is ListBoxItem item)
+        {
+            DemoDrawer.Content = new ContentPage
+            {
+                Header = item.Content?.ToString(),
+                Content = new TextBlock
+                {
+                    Text = $"{item.Content} page content",
+                    FontSize = 16,
+                    HorizontalAlignment = HorizontalAlignment.Center,
+                    VerticalAlignment = VerticalAlignment.Center,
+                },
+                HorizontalContentAlignment = HorizontalAlignment.Stretch,
+                VerticalContentAlignment = VerticalAlignment.Stretch
+            };
+            DemoDrawer.IsOpen = false;
+        }
+    }
+
+    private static void EnableMouseSwipeGesture(Control control)
+    {
+        var recognizer = control.GestureRecognizers
+            .OfType<SwipeGestureRecognizer>()
+            .FirstOrDefault();
+
+        recognizer?.IsMouseEnabled = true;
+    }
+}
@@ -1,6 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;

 namespace Semi.Avalonia.Demo.Pages;

@@ -1,7 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.LogicalTree;
-using Avalonia.Markup.Xaml;

 namespace Semi.Avalonia.Demo.Pages;

@@ -39,4 +39,4 @@
                CornerRadius="10" />
        </Grid>
    </StackPanel>
-</UserControl>
+</UserControl>
@@ -1,5 +1,4 @@
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;

 namespace Semi.Avalonia.Demo.Pages;

@@ -9,9 +8,4 @@ public partial class GridSplitterDemo : UserControl
    {
        InitializeComponent();
    }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }
@@ -36,10 +36,20 @@
                        <HyperlinkButton HorizontalAlignment="Right" Content="更多" />
                    </Panel>
                </HeaderedContentControl.Header>
-                <HeaderedContentControl.Content>
-                    <SelectableTextBlock Text="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。" />
-                </HeaderedContentControl.Content>
+                <SelectableTextBlock Text="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。" />
            </HeaderedContentControl>
+            <TextBlock>Real GroupBox</TextBlock>
+            <GroupBox
+                HorizontalAlignment="Left"
+                MaxWidth="360">
+                <HeaderedContentControl.Header>
+                    <Panel>
+                        <SelectableTextBlock Text="Semi Design" />
+                        <HyperlinkButton HorizontalAlignment="Right" Content="更多" />
+                    </Panel>
+                </HeaderedContentControl.Header>
+                <SelectableTextBlock Text="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。" />
+            </GroupBox>
        </StackPanel>
    </ScrollViewer>
 </UserControl>
@@ -1,4 +1,4 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
@@ -8,7 +8,6 @@
             xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
             mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="1450"
             x:DataType="vm:HighContrastDemoViewModel"
-             x:CompileBindings="True"
             x:Class="Semi.Avalonia.Demo.Pages.HighContrastDemo">
    <Design.DataContext>
        <vm:HighContrastDemoViewModel />
@@ -1,5 +1,6 @@
-using System.Threading.Tasks;
+using System.Threading.Tasks;
 using Avalonia.Controls;
+using Avalonia.Input.Platform;
 using Semi.Avalonia.Demo.ViewModels;

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

 namespace Semi.Avalonia.Demo.Pages;

@@ -16,80 +16,69 @@
            Margin="8"
            Classes="ClearButton"
            Text="{Binding SearchText}"
-            Watermark="Input Icon Name" />
+            PlaceholderText="Input Icon Name" />

-        <TabControl Grid.Row="1">
-            <TabItem Header="Filled Icons">
-                <ScrollViewer>
-                    <ItemsControl ItemsSource="{Binding FilteredFilledIcons}">
-                        <ItemsControl.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <WrapPanel />
-                            </ItemsPanelTemplate>
-                        </ItemsControl.ItemsPanel>
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate>
-                                <Button Theme="{DynamicResource OutlineButton}"
-                                        Classes="Tertiary"
-                                        Padding="0"
-                                        Margin="10"
-                                        Width="200"
-                                        Height="120"
-                                        Click="Button_Clicked">
-                                    <StackPanel Spacing="8">
-                                        <PathIcon
-                                            Theme="{DynamicResource InnerPathIcon}"
-                                            HorizontalAlignment="Center"
-                                            Classes="ExtraLarge"
-                                            Data="{Binding Geometry}" />
-                                        <TextBlock
-                                            HorizontalAlignment="Center"
-                                            FontSize="12"
-                                            FontWeight="Normal"
-                                            Text="{Binding ResourceKey}" />
-                                    </StackPanel>
-                                </Button>
-                            </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                    </ItemsControl>
-                </ScrollViewer>
-            </TabItem>
+        <TabControl
+            Grid.Row="1"
+            Theme="{StaticResource LineTabControl}"
+            ItemsSource="{Binding IconTabs}">
+            <TabControl.ItemTemplate>
+                <DataTemplate>
+                    <WrapPanel ItemSpacing="5">
+                        <TextBlock Text="{Binding Header}" />
+                        <Label 
+                            Theme="{StaticResource TagLabel}"
+                            Classes="Purple"
+                            IsVisible="{Binding Header, 
+                                Converter={x:Static ObjectConverters.Equal},
+                                ConverterParameter='AI Icons'}"
+                            Content="New" />
+                    </WrapPanel>
+                </DataTemplate>
+            </TabControl.ItemTemplate>

-            <TabItem Header="Stroked Icons">
-                <ScrollViewer>
-                    <ItemsControl ItemsSource="{Binding FilteredStrokedIcons}">
-                        <ItemsControl.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <WrapPanel />
-                            </ItemsPanelTemplate>
-                        </ItemsControl.ItemsPanel>
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate>
-                                <Button Theme="{DynamicResource OutlineButton}"
-                                        Classes="Tertiary"
-                                        Padding="0"
-                                        Margin="10"
-                                        Width="200"
-                                        Height="120"
-                                        Click="Button_Clicked">
-                                    <StackPanel Spacing="8">
-                                        <PathIcon
-                                            Theme="{DynamicResource InnerPathIcon}"
-                                            HorizontalAlignment="Center"
-                                            Classes="ExtraLarge"
-                                            Data="{Binding Geometry}" />
-                                        <TextBlock
-                                            HorizontalAlignment="Center"
-                                            FontSize="12"
-                                            FontWeight="Normal"
-                                            Text="{Binding ResourceKey}" />
-                                    </StackPanel>
-                                </Button>
-                            </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                    </ItemsControl>
-                </ScrollViewer>
-            </TabItem>
+            <TabControl.ContentTemplate>
+                <DataTemplate DataType="vm:IconTab">
+                    <ScrollViewer>
+                        <ItemsControl
+                            Margin="0 10"
+                            ItemsSource="{Binding IconItems}">
+                            <ItemsControl.ItemsPanel>
+                                <ItemsPanelTemplate>
+                                    <WrapPanel
+                                        ItemWidth="200"
+                                        ItemHeight="120"
+                                        ItemSpacing="10"
+                                        LineSpacing="10" />
+                                </ItemsPanelTemplate>
+                            </ItemsControl.ItemsPanel>
+                            <ItemsControl.ItemTemplate>
+                                <DataTemplate>
+                                    <Button Theme="{DynamicResource OutlineButton}"
+                                            Classes="Tertiary"
+                                            Padding="0"
+                                            HorizontalAlignment="Stretch"
+                                            VerticalAlignment="Stretch"
+                                            Click="Button_Clicked">
+                                        <StackPanel Spacing="8">
+                                            <PathIcon
+                                                Theme="{DynamicResource InnerPathIcon}"
+                                                HorizontalAlignment="Center"
+                                                Classes="ExtraLarge"
+                                                Data="{Binding Geometry}" />
+                                            <TextBlock
+                                                HorizontalAlignment="Center"
+                                                FontSize="12"
+                                                FontWeight="Normal"
+                                                Text="{Binding ResourceKey}" />
+                                        </StackPanel>
+                                    </Button>
+                                </DataTemplate>
+                            </ItemsControl.ItemTemplate>
+                        </ItemsControl>
+                    </ScrollViewer>
+                </DataTemplate>
+            </TabControl.ContentTemplate>
        </TabControl>
    </Grid>
 </UserControl>
@@ -8,14 +8,11 @@
    d:DesignWidth="800"
    mc:Ignorable="d">
    <ScrollViewer>
-        <StackPanel HorizontalAlignment="Left" Spacing="20">
+        <StackPanel>
            <StackPanel.Styles>
-                <Style Selector="Label">
-                    <Setter Property="Margin" Value="4" />
-                </Style>
-                <Style Selector="Grid > TextBlock">
-                    <Setter Property="VerticalAlignment" Value="Center" />
-                    <Setter Property="Margin" Value="4" />
+                <Style Selector="Grid > TextBlock,Grid > Label">
+                    <Setter Property="Layoutable.VerticalAlignment" Value="Center" />
+                    <Setter Property="Layoutable.Margin" Value="4" />
                </Style>
            </StackPanel.Styles>
            <ScrollViewer HorizontalScrollBarVisibility="Auto">
@@ -31,7 +28,7 @@
                            VerticalAlignment="Top"
                            ColumnDefinitions="Auto, *"
                            RowDefinitions="*,*,*,*,*,*,*,*,*,*,*">
-                            <TextBlock Grid.Row="0"  Grid.Column="0">Classes</TextBlock>
+                            <TextBlock Grid.Row="0" Grid.Column="0">Classes</TextBlock>
                            <TextBlock Grid.Row="1" Grid.Column="0">-</TextBlock>
                            <TextBlock Grid.Row="2" Grid.Column="0">Secondary</TextBlock>
                            <TextBlock Grid.Row="3" Grid.Column="0">Tertiary</TextBlock>
@@ -156,69 +153,89 @@
                    </HeaderedContentControl>
                </StackPanel>
            </ScrollViewer>
-            <WrapPanel>
-                <Label Theme="{StaticResource TagLabel}">Label</Label>
-                <Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
-                <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
-                <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
-            </WrapPanel>
-            <WrapPanel>
-                <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
-                <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
-                <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-                <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
-                <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-                <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-                <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-                <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-                <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
-                <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
-                <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-                <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-                <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
-                <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-                <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
-                <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-                <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
-            </WrapPanel>
-            <WrapPanel>
-                <Label Classes="Ghost Red" Theme="{StaticResource TagLabel}">Red</Label>
-                <Label Classes="Ghost Pink" Theme="{StaticResource TagLabel}">Pink</Label>
-                <Label Classes="Ghost Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-                <Label Classes="Ghost Violet" Theme="{StaticResource TagLabel}">Violet</Label>
-                <Label Classes="Ghost Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-                <Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-                <Label Classes="Ghost LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-                <Label Classes="Ghost Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-                <Label Classes="Ghost Teal" Theme="{StaticResource TagLabel}">Teal</Label>
-                <Label Classes="Ghost Green" Theme="{StaticResource TagLabel}">Green</Label>
-                <Label Classes="Ghost LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-                <Label Classes="Ghost Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-                <Label Classes="Ghost Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
-                <Label Classes="Ghost Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-                <Label Classes="Ghost Orange" Theme="{StaticResource TagLabel}">Orange</Label>
-                <Label Classes="Ghost Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-                <Label Classes="Ghost White" Theme="{StaticResource TagLabel}">White</Label>
-            </WrapPanel>
-            <WrapPanel>
-                <Label Classes="Solid Red" Theme="{StaticResource TagLabel}">Red</Label>
-                <Label Classes="Solid Pink" Theme="{StaticResource TagLabel}">Pink</Label>
-                <Label Classes="Solid Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-                <Label Classes="Solid Violet" Theme="{StaticResource TagLabel}">Violet</Label>
-                <Label Classes="Solid Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-                <Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-                <Label Classes="Solid LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-                <Label Classes="Solid Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-                <Label Classes="Solid Teal" Theme="{StaticResource TagLabel}">Teal</Label>
-                <Label Classes="Solid Green" Theme="{StaticResource TagLabel}">Green</Label>
-                <Label Classes="Solid LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-                <Label Classes="Solid Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-                <Label Classes="Solid Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
-                <Label Classes="Solid Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-                <Label Classes="Solid Orange" Theme="{StaticResource TagLabel}">Orange</Label>
-                <Label Classes="Solid Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-                <Label Classes="Solid White" Theme="{StaticResource TagLabel}">White</Label>
-            </WrapPanel>
+
+            <HeaderedContentControl
+                Margin="16"
+                Header="Theme: TagLabel"
+                Theme="{DynamicResource GroupBox}">
+                <ScrollViewer HorizontalScrollBarVisibility="Auto">
+                    <StackPanel Orientation="Horizontal" Spacing="8">
+                        <StackPanel Spacing="4">
+                            <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
+                            <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                            <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                            <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                            <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                            <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                            <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                            <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                            <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                            <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
+                            <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                            <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                            <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                            <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                            <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                            <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                            <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
+                        </StackPanel>
+                        <StackPanel Spacing="4">
+                            <Label Classes="Ghost Red" Theme="{StaticResource TagLabel}">Red</Label>
+                            <Label Classes="Ghost Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                            <Label Classes="Ghost Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                            <Label Classes="Ghost Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                            <Label Classes="Ghost Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                            <Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                            <Label Classes="Ghost LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                            <Label Classes="Ghost Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                            <Label Classes="Ghost Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                            <Label Classes="Ghost Green" Theme="{StaticResource TagLabel}">Green</Label>
+                            <Label Classes="Ghost LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                            <Label Classes="Ghost Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                            <Label Classes="Ghost Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                            <Label Classes="Ghost Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                            <Label Classes="Ghost Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                            <Label Classes="Ghost Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                            <Label Classes="Ghost White" Theme="{StaticResource TagLabel}">White</Label>
+                        </StackPanel>
+                        <StackPanel Spacing="4">
+                            <Label Classes="Solid Red" Theme="{StaticResource TagLabel}">Red</Label>
+                            <Label Classes="Solid Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                            <Label Classes="Solid Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                            <Label Classes="Solid Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                            <Label Classes="Solid Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                            <Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                            <Label Classes="Solid LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                            <Label Classes="Solid Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                            <Label Classes="Solid Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                            <Label Classes="Solid Green" Theme="{StaticResource TagLabel}">Green</Label>
+                            <Label Classes="Solid LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                            <Label Classes="Solid Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                            <Label Classes="Solid Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                            <Label Classes="Solid Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                            <Label Classes="Solid Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                            <Label Classes="Solid Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                            <Label Classes="Solid White" Theme="{StaticResource TagLabel}">White</Label>
+                        </StackPanel>
+                        <StackPanel Spacing="4">
+                            <Label Classes="Colorful Gradient" Theme="{DynamicResource TagLabel}">Light</Label>
+                            <Label Classes="Colorful Gradient Ghost" Theme="{DynamicResource TagLabel}">Ghost</Label>
+                            <Label Classes="Colorful Gradient Solid" Theme="{DynamicResource TagLabel}">Solid</Label>
+                        </StackPanel>
+                        <StackPanel Spacing="4">
+                            <Label Classes="Colorful" Theme="{DynamicResource TagLabel}">Light</Label>
+                            <Label Classes="Colorful Ghost" Theme="{DynamicResource TagLabel}">Ghost</Label>
+                            <Label Classes="Colorful Solid" Theme="{DynamicResource TagLabel}">Solid</Label>
+                        </StackPanel>
+                        <StackPanel Spacing="4">
+                            <Label Theme="{StaticResource TagLabel}">Label</Label>
+                            <Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
+                            <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
+                            <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
+                        </StackPanel>
+                    </StackPanel>
+                </ScrollViewer>
+            </HeaderedContentControl>
        </StackPanel>
    </ScrollViewer>
-</UserControl>
+</UserControl>
@@ -1,6 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;

 namespace Semi.Avalonia.Demo.Pages;

@@ -16,7 +16,7 @@
                Header="Default">
                <ScrollViewer>
                    <StackPanel Spacing="20">
-                        <TextBlock Text="Theme: Default"/>
+                        <TextBlock Text="Theme: Default" />
                        <ListBox ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
                        <ListBox IsEnabled="False">
                            <ListBoxItem IsSelected="True">Avalonia</ListBoxItem>
@@ -31,7 +31,7 @@
                Theme="{DynamicResource GroupBox}"
                Header="RadioGroupListBox">
                <StackPanel Spacing="20">
-                    <TextBlock Text="Theme: RadioGroupListBox"/>
+                    <TextBlock Text="Theme: RadioGroupListBox" />
                    <ListBox
                        Theme="{DynamicResource RadioGroupListBox}"
                        ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
@@ -40,7 +40,7 @@
                        <ListBoxItem IsSelected="True">WPF</ListBoxItem>
                    </ListBox>

-                    <TextBlock Text="Theme: ButtonRadioGroupListBox"/>
+                    <TextBlock Text="Theme: ButtonRadioGroupListBox" />
                    <StackPanel Orientation="Horizontal">
                        <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
                            <ListBox Theme="{DynamicResource ButtonRadioGroupListBox}">
@@ -93,7 +93,7 @@
                        </Border>
                    </StackPanel>

-                    <TextBlock Text="Theme: CardRadioGroupListBox"/>
+                    <TextBlock Text="Theme: CardRadioGroupListBox" />
                    <ListBox Theme="{DynamicResource CardRadioGroupListBox}"
                             ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
                    <ListBox Theme="{DynamicResource CardRadioGroupListBox}" IsEnabled="False">
@@ -101,7 +101,7 @@
                        <ListBoxItem>WPF</ListBoxItem>
                    </ListBox>

-                    <TextBlock Text="Theme: PureCardRadioGroupListBox"/>
+                    <TextBlock Text="Theme: PureCardRadioGroupListBox" />
                    <ListBox Theme="{DynamicResource PureCardRadioGroupListBox}"
                             ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
                    <ListBox Theme="{DynamicResource PureCardRadioGroupListBox}" IsEnabled="False">
@@ -117,7 +117,7 @@
                Header="CheckGroupListBox">
                <ScrollViewer>
                    <StackPanel Spacing="20">
-                        <TextBlock Text="Theme: CheckGroupListBox"/>
+                        <TextBlock Text="Theme: CheckGroupListBox" />
                        <ListBox
                            SelectionMode="Multiple,Toggle"
                            Theme="{DynamicResource CheckGroupListBox}"
@@ -129,7 +129,7 @@
                            <ListBoxItem>WPF</ListBoxItem>
                        </ListBox>

-                        <TextBlock Text="Theme: CardCheckGroupListBox"/>
+                        <TextBlock Text="Theme: CardCheckGroupListBox" />
                        <ListBox
                            SelectionMode="Multiple,Toggle"
                            Theme="{DynamicResource CardCheckGroupListBox}"
@@ -17,4 +17,4 @@
        <Button Name="SelectFolderButton" Content="Select Folder" />
        <Button Name="SaveFileButton" Content="Save File" />
    </StackPanel>
-</UserControl>
+</UserControl>
@@ -145,4 +145,4 @@
            <TextBlock Text="Right Click to show Context Flyout" />
        </Border>
    </StackPanel>
-</UserControl>
+</UserControl>
@@ -1,6 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;

 namespace Semi.Avalonia.Demo.Pages;

@@ -11,8 +9,4 @@ public partial class MenuDemo : UserControl
        InitializeComponent();
    }

-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }
@@ -0,0 +1,66 @@
+using Avalonia.Controls;
+using Avalonia.Layout;
+using Avalonia.Media;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+/// <summary>
+/// Shared helpers for ControlCatalog demo pages.
+/// </summary>
+internal static class NavigationDemoHelper
+{
+    /// <summary>
+    /// Pastel background brushes cycled by page index.
+    /// </summary>
+    internal static readonly IBrush[] PageBrushes =
+    [
+        new SolidColorBrush(Color.Parse("#BBDEFB")),
+        new SolidColorBrush(Color.Parse("#C8E6C9")),
+        new SolidColorBrush(Color.Parse("#FFE0B2")),
+        new SolidColorBrush(Color.Parse("#E1BEE7")),
+        new SolidColorBrush(Color.Parse("#FFCDD2")),
+        new SolidColorBrush(Color.Parse("#B2EBF2"))
+    ];
+
+    internal static IBrush GetPageBrush(int index) =>
+        PageBrushes[(index % PageBrushes.Length + PageBrushes.Length) % PageBrushes.Length];
+
+    /// <summary>
+    /// Creates a simple demo ContentPage with a centered title and subtitle.
+    /// </summary>
+    internal static ContentPage MakePage(string header, string body, int colorIndex) =>
+        new()
+        {
+            Header = header,
+            Background = GetPageBrush(colorIndex),
+            Content = new StackPanel
+            {
+                HorizontalAlignment = HorizontalAlignment.Center,
+                VerticalAlignment = VerticalAlignment.Center,
+                Spacing = 8,
+                Children =
+                {
+                    new TextBlock
+                    {
+                        Text = header,
+                        FontSize = 20,
+                        FontWeight = FontWeight.SemiBold,
+                        HorizontalAlignment = HorizontalAlignment.Center,
+                        Foreground = Brushes.Black,
+                    },
+                    new TextBlock
+                    {
+                        Text = body,
+                        FontSize = 13,
+                        Opacity = 0.7,
+                        TextWrapping = TextWrapping.Wrap,
+                        TextAlignment = TextAlignment.Center,
+                        MaxWidth = 260,
+                        Foreground = Brushes.Black,
+                    }
+                }
+            },
+            HorizontalContentAlignment = HorizontalAlignment.Stretch,
+            VerticalContentAlignment = VerticalAlignment.Stretch
+        };
+}
@@ -0,0 +1,100 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.NavigationPageDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="700"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <ScrollViewer>
+        <DockPanel>
+            <ScrollViewer DockPanel.Dock="Right" Width="260">
+                <StackPanel Margin="12" Spacing="8">
+                    <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16" />
+                    <TextBlock Text="Navigation" FontWeight="SemiBold" FontSize="14" />
+
+                    <Button Content="Push Page"
+                            HorizontalAlignment="Stretch"
+                            Click="OnPush" />
+                    <Button Content="Pop"
+                            HorizontalAlignment="Stretch"
+                            Click="OnPop" />
+                    <Button Content="Pop to Root"
+                            HorizontalAlignment="Stretch"
+                            Click="OnPopToRoot" />
+
+                    <Separator />
+
+                    <TextBlock Text="Modal Actions" FontWeight="SemiBold" FontSize="14" />
+                    <Button Name="PushModalButton"
+                            Content="Push Modal"
+                            HorizontalAlignment="Stretch"
+                            Click="OnPushModal" />
+                    <Button Name="PopModalButton"
+                            Content="Pop Modal"
+                            HorizontalAlignment="Stretch"
+                            Click="OnPopModal" />
+                    <Button Name="PopAllModalsButton"
+                            Content="Pop All Modals"
+                            HorizontalAlignment="Stretch"
+                            Click="OnPopAllModals" />
+
+                    <TextBlock Text="Options" FontWeight="SemiBold" FontSize="14" />
+
+                    <CheckBox Name="HasNavBarCheck"
+                              Content="Has Navigation Bar"
+                              IsChecked="True"
+                              IsCheckedChanged="OnHasNavBarChanged" />
+                    <CheckBox Name="HasBackButtonCheck"
+                              Content="Has Back Button"
+                              IsChecked="True"
+                              IsCheckedChanged="OnHasBackButtonChanged" />
+                    <CheckBox Name="HasShadowCheck"
+                              Content="Has Shadow"
+                              IsChecked="True"
+                              IsCheckedChanged="OnHasShadowChanged" />
+                    <CheckBox Name="large" Content="Large" />
+
+                    <Separator />
+
+                    <TextBlock Text="Modal Transition" FontWeight="SemiBold" FontSize="14" />
+                    <ComboBox Name="TransitionCombo"
+                              SelectedIndex="0"
+                              HorizontalAlignment="Stretch"
+                              SelectionChanged="OnTransitionChanged">
+                        <ComboBoxItem Content="Slide from Bottom" />
+                        <ComboBoxItem Content="CrossFade" />
+                        <ComboBoxItem Content="None" />
+                    </ComboBox>
+
+                    <Separator />
+
+                    <TextBlock Text="Status" FontWeight="SemiBold" FontSize="14" />
+                    <TextBlock Name="StatusText"
+                               Text="Depth: 1"
+                               TextWrapping="Wrap" />
+                    <TextBlock Name="HeaderText"
+                               Text="Current: Home"
+                               TextWrapping="Wrap" />
+                    <TextBlock Name="ModalText"
+                               Text="Modals: 0"
+                               TextWrapping="Wrap" />
+
+                </StackPanel>
+            </ScrollViewer>
+
+            <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
+
+            <Border Margin="12"
+                    BorderBrush="{DynamicResource SemiColorBorder}"
+                    BorderThickness="1"
+                    CornerRadius="6"
+                    ClipToBounds="True">
+                <NavigationPage
+                    Name="DemoNav"
+                    Classes.Large="{Binding #large.IsChecked}" />
+            </Border>
+        </DockPanel>
+    </ScrollViewer>
+</UserControl>
@@ -0,0 +1,111 @@
+using System;
+using Avalonia.Animation;
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class NavigationPageDemo : UserControl
+{
+    private int _pageCount;
+    private int _modalCount;
+
+    public NavigationPageDemo()
+    {
+        InitializeComponent();
+        Loaded += OnLoaded;
+    }
+
+    private async void OnLoaded(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PushAsync(NavigationDemoHelper.MakePage("Home", "Welcome!\nUse the buttons to push and pop pages/modals.", 0), null);
+        UpdateStatus();
+    }
+
+    private async void OnPush(object? sender, RoutedEventArgs e)
+    {
+        _pageCount++;
+        var page = NavigationDemoHelper.MakePage($"Page {_pageCount}", $"This is page {_pageCount}.", _pageCount);
+        NavigationPage.SetHasNavigationBar(page, HasNavBarCheck.IsChecked == true);
+        NavigationPage.SetHasBackButton(page, HasBackButtonCheck.IsChecked == true);
+        await DemoNav.PushAsync(page);
+        UpdateStatus();
+    }
+
+    private async void OnPop(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PopAsync();
+        UpdateStatus();
+    }
+
+    private async void OnPopToRoot(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PopToRootAsync();
+        _pageCount = 0;
+        UpdateStatus();
+    }
+
+    private async void OnPushModal(object? sender, RoutedEventArgs e)
+    {
+        _modalCount++;
+        var modal = NavigationDemoHelper.MakePage($"Modal {_modalCount}", "This page was presented modally.\nTap 'Pop Modal' to dismiss.", _modalCount);
+        await DemoNav.PushModalAsync(modal);
+        UpdateStatus();
+    }
+
+    private async void OnPopModal(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PopModalAsync();
+        UpdateStatus();
+    }
+
+    private async void OnPopAllModals(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PopAllModalsAsync();
+        _modalCount = 0;
+        UpdateStatus();
+    }
+
+    private void OnHasNavBarChanged(object? sender, RoutedEventArgs e)
+    {
+        if (DemoNav == null)
+            return;
+        if (DemoNav.CurrentPage != null)
+            NavigationPage.SetHasNavigationBar(DemoNav.CurrentPage, HasNavBarCheck.IsChecked == true);
+    }
+
+    private void OnHasBackButtonChanged(object? sender, RoutedEventArgs e)
+    {
+        if (DemoNav == null)
+            return;
+        if (DemoNav.CurrentPage != null)
+            NavigationPage.SetHasBackButton(DemoNav.CurrentPage, HasBackButtonCheck.IsChecked == true);
+    }
+
+    private void OnHasShadowChanged(object? sender, RoutedEventArgs e)
+    {
+        if (DemoNav == null)
+            return;
+        if (DemoNav.CurrentPage != null)
+            DemoNav.HasShadow = HasShadowCheck.IsChecked == true;
+    }
+
+    private void OnTransitionChanged(object? sender, SelectionChangedEventArgs e)
+    {
+        if (DemoNav == null)
+            return;
+        DemoNav.ModalTransition = TransitionCombo.SelectedIndex switch
+        {
+            1 => new CrossFade(TimeSpan.FromMilliseconds(250)),
+            2 => null,
+            _ => new PageSlide(TimeSpan.FromMilliseconds(300), PageSlide.SlideAxis.Vertical)
+        };
+    }
+
+    private void UpdateStatus()
+    {
+        StatusText.Text = $"Depth: {DemoNav.StackDepth}";
+        HeaderText.Text = $"Current: {DemoNav.CurrentPage?.Header ?? "(none)"}";
+        ModalText.Text = $"Modals: {DemoNav.ModalStack.Count}";
+    }
+}
@@ -27,7 +27,8 @@ public partial class NotificationDemo : UserControl
        if (sender is RadioButton b && b.Content is string s)
        {
            Enum.TryParse<NotificationPosition>(s, out var t);
-            _manager.Position = t;
+            if (_manager is not null)
+                _manager.Position = t;
        }
    }

@@ -28,15 +28,15 @@
            <NumericUpDown
                Width="100"
                Classes="Large"
-                Watermark="Large"
+                PlaceholderText="Large"
                ButtonSpinnerLocation="Left" />
            <NumericUpDown
                Width="100"
-                Watermark="Default"
+                PlaceholderText="Default"
                ShowButtonSpinner="False" />
            <NumericUpDown
                Width="100"
-                Watermark="Small"
+                PlaceholderText="Small"
                Classes="Small" />
        </StackPanel>

@@ -51,6 +51,11 @@
            <NumericUpDown Width="100" IsEnabled="False" />
            <NumericUpDown Width="100" ButtonSpinnerLocation="Left" />
        </StackPanel>
+        
+        <StackPanel>
+            <TextBlock Text="Split" />
+            <NumericUpDown Classes="Split" Width="300" />
+        </StackPanel>

    </StackPanel>
 </UserControl>
@@ -1,6 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;

 namespace Semi.Avalonia.Demo.Pages;

@@ -11,8 +9,4 @@ public partial class NumericUpDownDemo : UserControl
        InitializeComponent();
    }

-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }
@@ -348,17 +348,17 @@
                    Classes="H5"
                    Text="Start to install"
                    Theme="{DynamicResource TitleTextBlock}" />
-                <TabControl Padding="8">
+                <TabControl Theme="{StaticResource LineTabControl}">
                    <TabItem Header="Main">
                        <StackPanel>
                            <TextBlock Text="Install via nuget: " />
                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].MainInstall}" />
+                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].MainInstall}" />
                            </Border>
                            <TextBlock Text="Reference styles: " />
                            <Border Margin="0,16" Classes="CodeBlock">
                                <SelectableTextBlock
-                                    FontFamily="Consolas"
+                                    
                                    Text="{Binding $parent[local:Overview].MainStyle}"
                                    TextWrapping="Wrap" />
                            </Border>
@@ -368,12 +368,12 @@
                        <StackPanel>
                            <TextBlock Text="Install via nuget: " />
                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].ColorPickerInstall}" />
+                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].ColorPickerInstall}" />
                            </Border>
                            <TextBlock Text="Reference styles: " />
                            <Border Margin="0,16" Classes="CodeBlock">
                                <SelectableTextBlock
-                                    FontFamily="Consolas"
+                                    
                                    Text="{Binding $parent[local:Overview].ColorPickerStyle}"
                                    TextWrapping="Wrap" />
                            </Border>
@@ -383,12 +383,12 @@
                        <StackPanel>
                            <TextBlock Text="Install via nuget: " />
                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].DataGridInstall}" />
+                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].DataGridInstall}" />
                            </Border>
                            <TextBlock Text="Reference styles: " />
                            <Border Margin="0,16" Classes="CodeBlock">
                                <SelectableTextBlock
-                                    FontFamily="Consolas"
+                                    
                                    Text="{Binding $parent[local:Overview].DataGridStyle}"
                                    TextWrapping="Wrap" />
                            </Border>
@@ -398,17 +398,62 @@
                        <StackPanel>
                            <TextBlock Text="Install via nuget: " />
                            <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].TreeDataGridInstall}" />
+                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].TreeDataGridInstall}" />
                            </Border>
                            <TextBlock Text="Reference styles: " />
                            <Border Margin="0,16" Classes="CodeBlock">
                                <SelectableTextBlock
-                                    FontFamily="Consolas"
+                                    
                                    Text="{Binding $parent[local:Overview].TreeDataGridStyle}"
                                    TextWrapping="Wrap" />
                            </Border>
                        </StackPanel>
                    </TabItem>
+                    <TabItem Header="Dock">
+                        <StackPanel>
+                            <TextBlock Text="Install via nuget: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].DockInstall}" />
+                            </Border>
+                            <TextBlock Text="Reference styles: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock
+                                    
+                                    Text="{Binding $parent[local:Overview].DockStyle}"
+                                    TextWrapping="Wrap" />
+                            </Border>
+                        </StackPanel>
+                    </TabItem>
+                    <TabItem Header="Tabalonia">
+                        <StackPanel>
+                            <TextBlock Text="Install via nuget: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].TabaloniaInstall}" />
+                            </Border>
+                            <TextBlock Text="Reference styles: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock
+                                    
+                                    Text="{Binding $parent[local:Overview].TabaloniaStyle}"
+                                    TextWrapping="Wrap" />
+                            </Border>
+                        </StackPanel>
+                    </TabItem>
+                    <TabItem Header="AvaloniaEdit">
+                        <StackPanel>
+                            <TextBlock Text="Install via nuget: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].AvaloniaEditInstall}" />
+                            </Border>
+                            <TextBlock Text="Reference styles: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock
+                                    
+                                    Text="{Binding $parent[local:Overview].AvaloniaEditStyle}"
+                                    TextWrapping="Wrap" />
+                            </Border>
+                        </StackPanel>
+                    </TabItem>
                </TabControl>
            </StackPanel>
        </StackPanel>
@@ -9,7 +9,7 @@ public partial class Overview : UserControl
        InitializeComponent();
    }

-    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.2.1.7";
+    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia";

    public string MainStyle { get; set; } =
        """
@@ -18,7 +18,7 @@ public partial class Overview : UserControl
        </Application.Styles>
        """;

-    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.2.1.7";
+    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker";

    public string ColorPickerStyle { get; set; } =
        """
@@ -27,7 +27,7 @@ public partial class Overview : UserControl
        </Application.Styles>
        """;

-    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.2.1.7";
+    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid";

    public string DataGridStyle { get; set; } =
        """
@@ -36,7 +36,7 @@ public partial class Overview : UserControl
        </Application.Styles>
        """;

-    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.10.3";
+    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid";

    public string TreeDataGridStyle { get; set; } =
        """
@@ -44,4 +44,31 @@ public partial class Overview : UserControl
            <semi:TreeDataGridSemiTheme />
        </Application.Styles>
        """;
+
+    public string DockInstall { get; set; } = "dotnet add package Semi.Avalonia.Dock";
+
+    public string DockStyle { get; set; } =
+        """
+        <Application.Styles>
+            <semi:DockSemiTheme />
+        </Application.Styles>
+        """;
+
+    public string TabaloniaInstall { get; set; } = "dotnet add package Semi.Avalonia.Tabalonia";
+
+    public string TabaloniaStyle { get; set; } =
+        """
+        <Application.Styles>
+            <semi:TabaloniaSemiTheme />
+        </Application.Styles>
+        """;
+
+    public string AvaloniaEditInstall { get; set; } = "dotnet add package Semi.Avalonia.AvaloniaEdit";
+
+    public string AvaloniaEditStyle { get; set; } =
+        """
+        <Application.Styles>
+            <semi:AvaloniaEditSemiTheme />
+        </Application.Styles>
+        """;
 }
@@ -8,7 +8,6 @@
    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
    d:DesignHeight="450"
    d:DesignWidth="800"
-    x:CompileBindings="True"
    x:DataType="viewModels:PaletteDemoViewModel"
    mc:Ignorable="d">
    <Design.DataContext>
@@ -1,6 +1,7 @@
 using System.Threading.Tasks;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
+using Avalonia.Input.Platform;
 using Avalonia.Threading;
 using Semi.Avalonia.Demo.ViewModels;

@@ -11,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)
@@ -30,4 +33,4 @@ public partial class PaletteDemo : UserControl
            await c.SetTextAsync(o.ToString());
        }
    }
-}
+}
--- a/Show More
+++ b/Show More