misc: bump versions to 11.2.1.8 and 11.0.10.4.

Simplify Packages and CI files

.github/workflows/deploy.yml

@@ -24,9 +24,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
 

.github/workflows/pack-nightly.yml

@@ -45,29 +45,29 @@ jobs:
 
       - name: Pack Semi.Avalonia
         if: ${{ github.event.inputs.Semi_Avalonia == 'true' }}
-        run: dotnet pack ./src/Semi.Avalonia -o ./nugets /p:Version=${{ env.VERSION }}
+        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 }}
+        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 }}
+        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 }}
+        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
         with:
           name: nugets
-          path: ./nugets
+          path: nugets
         if: always()

.github/workflows/pack.yml

@@ -34,26 +34,26 @@ jobs:
 
       - name: Pack Semi.Avalonia
         if: ${{ github.event.inputs.Semi_Avalonia == 'true' }}
-        run: dotnet pack ./src/Semi.Avalonia -o ./nugets
+        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
+        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
+        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
+        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
+        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
         with:
           name: nugets
-          path: ./nugets
+          path: nugets
         if: always()

.github/workflows/publish.yml

@@ -13,13 +13,23 @@ on:
           - 'linux'
           - 'android'
           - 'all'
-      include_aot:
-        description: 'Include Windows AOT packaging'
+      win64:
+        description: 'Windows x64'
         required: true
         default: true
         type: boolean
-      include_drm:
-        description: 'Include Linux DRM packaging'
+      win64_aot:
+        description: 'Windows x64 AOT'
+        required: true
+        default: true
+        type: boolean
+      linux64:
+        description: 'Linux x64'
+        required: true
+        default: true
+        type: boolean
+      linux64_drm:
+        description: 'Linux x64 DRM'
         required: true
         default: true
         type: boolean
@@ -36,34 +46,36 @@ jobs:
         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
+        if: ${{ github.event.inputs.win64 == 'true' }}
+        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release -o publish/win64 --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
 
       - name: Zip win-x64
+        if: ${{ github.event.inputs.win64 == 'true' }}
         run: |
-          $files = Get-ChildItem -Path ./publish/win64/* -Recurse -Exclude *.pdb
-          Compress-Archive -Path $files.FullName -DestinationPath ./upload/Semi.Avalonia.Demo.Desktop.win-x64.zip
+          $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' }}
+        if: ${{ github.event.inputs.win64_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
+        if: ${{ github.event.inputs.win64_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' }}
+        if: ${{ github.event.inputs.win64_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
+          $files = Get-ChildItem -Path publish/win64-aot/* -Recurse -Exclude *.pdb
+          Compress-Archive -Path $files.FullName -DestinationPath upload/Semi.Avalonia.Demo.Desktop.win-x64.NativeAOT.zip
 
       - name: Upload a Build Artifact
         uses: actions/upload-artifact@v4.3.1
         with:
           name: windows
-          path: ./upload
+          path: upload
 
   linux:
     if: ${{ github.event.inputs.platform == 'linux' || github.event.inputs.platform == 'all' }}
@@ -76,24 +88,26 @@ jobs:
         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
+        if: ${{ github.event.inputs.linux64 == 'true' }}
+        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r linux-x64 -c Release -o publish/linux64 --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
 
       - name: Zip linux-x64
-        run: zip -j -r ./upload/Semi.Avalonia.Demo.Desktop.linux-x64.zip ./publish/linux64 -x "*.pdb"
+        if: ${{ github.event.inputs.linux64 == 'true' }}
+        run: zip -j -r upload/Semi.Avalonia.Demo.Desktop.linux-x64.zip publish/linux64 -x "*.pdb"
 
       - name: Publish linux-x64 DRM
-        if: ${{ github.event.inputs.include_drm == 'true' }}
-        run: dotnet publish demo/Semi.Avalonia.Demo.Drm -r linux-x64 -c Release --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true -o ./publish/drm
+        if: ${{ github.event.inputs.linux64_drm == 'true' }}
+        run: dotnet publish demo/Semi.Avalonia.Demo.Drm -r linux-x64 -c Release -o publish/drm --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
 
       - 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"
+        if: ${{ github.event.inputs.linux64_drm == 'true' }}
+        run: zip -j -r upload/Semi.Avalonia.Demo.Drm.linux-x64.zip publish/drm -x "*.pdb"
 
       - name: Upload a Build Artifact
         uses: actions/upload-artifact@v4.3.1
         with:
           name: linux
-          path: ./upload
+          path: upload
 
   android:
     if: ${{ github.event.inputs.platform == 'android' || github.event.inputs.platform == 'all' }}
@@ -103,16 +117,16 @@ jobs:
         uses: actions/checkout@v4.1.1
 
       - name: CD Android
-        run: cd ./demo/Semi.Avalonia.Demo.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
+        run: dotnet publish demo/Semi.Avalonia.Demo.Android -c Release -f net8.0-android --no-restore -o publish -p:RuntimeIdentifier=android-arm64
 
       - name: Upload a Build Artifact
         uses: actions/upload-artifact@v4.3.1
         with:
           name: android
-          path: ./publish/*Signed.apk
+          path: publish/*Signed.apk

.github/workflows/release-tag.yml

@@ -15,16 +15,16 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Pack Semi.Avalonia
-        run: dotnet pack ./src/Semi.Avalonia -o ./nugets
+        run: dotnet pack src/Semi.Avalonia -o nugets
 
       - name: Pack Semi.Avalonia.ColorPicker
-        run: dotnet pack ./src/Semi.Avalonia.ColorPicker -o ./nugets
+        run: dotnet pack src/Semi.Avalonia.ColorPicker -o nugets
 
       - name: Upload a Build Artifact
         uses: actions/upload-artifact@v4
         with:
           name: nugets
-          path: ./nugets
+          path: nugets
 
   publish-windows:
     runs-on: windows-latest
@@ -36,12 +36,12 @@ jobs:
         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
+        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release -o publish/win64 --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
 
       - 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
+          $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: |
@@ -49,18 +49,18 @@ jobs:
           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
+        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
+          $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
+          path: upload
 
   publish-linux:
     runs-on: ubuntu-latest
@@ -72,22 +72,22 @@ jobs:
         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
+        run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r linux-x64 -c Release -o publish/linux64 --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
 
       - name: Zip linux-x64
-        run: zip -j -r ./upload/Semi.Avalonia.Demo.Desktop.linux-x64.zip ./publish/linux64 -x "*.pdb"
+        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
+        run: dotnet publish demo/Semi.Avalonia.Demo.Drm -r linux-x64 -c Release -o publish/drm --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
 
       - name: Zip linux-x64 DRM
-        run: zip -j -r ./upload/Semi.Avalonia.Demo.Drm.linux-x64.zip ./publish/drm -x "*.pdb"
+        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
+          path: upload
 
   publish-android:
     runs-on: windows-latest
@@ -96,19 +96,19 @@ jobs:
         uses: actions/checkout@v4
 
       - name: CD Android
-        run: cd ./demo/Semi.Avalonia.Demo.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
+        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
+          path: publish/*Signed.apk
 
   draft-release:
     needs: [ pack, publish-windows, publish-linux, publish-android ]

LICENSE

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

README.md

@@ -48,9 +48,9 @@ dotnet add package Semi.Avalonia.TreeDataGrid
 
 ```xaml
 <Application.Styles>
-    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
-    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
-    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
+    <semi:ColorPickerSemiTheme />
+    <semi:DataGridSemiTheme />
+    <semi:TreeDataGridSemiTheme />
 </Application.Styles>
 ```
 

README_CN.md

@@ -48,9 +48,9 @@ dotnet add package Semi.Avalonia.TreeDataGrid
 
 ```xaml
 <Application.Styles>
-    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
-    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
-    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
+    <semi:ColorPickerSemiTheme />
+    <semi:DataGridSemiTheme />
+    <semi:TreeDataGridSemiTheme />
 </Application.Styles>
 ```
 

Semi.Avalonia.sln

@@ -39,8 +39,6 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.Demo.Drm", "d
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.TreeDataGrid", "src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj", "{398D2998-0835-41F5-99A3-608CAB8051E2}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.TreeDataGrid.Demo", "demo\Semi.Avalonia.TreeDataGrid.Demo\Semi.Avalonia.TreeDataGrid.Demo.csproj", "{6178B545-4BB6-458C-A27C-EE11F3885D38}"
-EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -84,10 +82,6 @@ Global
 		{398D2998-0835-41F5-99A3-608CAB8051E2}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{398D2998-0835-41F5-99A3-608CAB8051E2}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{398D2998-0835-41F5-99A3-608CAB8051E2}.Release|Any CPU.Build.0 = Release|Any CPU
-		{6178B545-4BB6-458C-A27C-EE11F3885D38}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{6178B545-4BB6-458C-A27C-EE11F3885D38}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{6178B545-4BB6-458C-A27C-EE11F3885D38}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{6178B545-4BB6-458C-A27C-EE11F3885D38}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -98,7 +92,6 @@ Global
 		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0} = {43091528-9509-43CB-A003-9C5C11E96DD6}
 		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F} = {43091528-9509-43CB-A003-9C5C11E96DD6}
 		{86D93406-412A-4429-93B2-92AAD0407784} = {43091528-9509-43CB-A003-9C5C11E96DD6}
-		{6178B545-4BB6-458C-A27C-EE11F3885D38} = {43091528-9509-43CB-A003-9C5C11E96DD6}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {7CA41ED3-2CED-40CC-AA21-28C3B42B1E86}

demo/Directory.Build.props

@@ -1,7 +1,7 @@
 <Project>
     <PropertyGroup>
-        <AvaloniaVersion>11.2.5</AvaloniaVersion>
-        <DataGridVersion>11.2.5</DataGridVersion>
+        <AvaloniaVersion>11.3.0</AvaloniaVersion>
+        <DataGridVersion>11.3.0</DataGridVersion>
         <CommunityToolkitVersion>8.4.0</CommunityToolkitVersion>
     </PropertyGroup>
 </Project>

demo/Semi.Avalonia.Demo/App.axaml

@@ -7,18 +7,16 @@
     xmlns:semi="https://irihi.tech/semi"
     xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels">
     <Application.Styles>
-        <!-- You can still reference in old way.  -->
-        <!-- <StyleInclude Source="avares://Semi.Avalonia/Index.axaml" /> -->
         <semi:SemiTheme Locale="zh-CN" />
         <semi:SemiPopupAnimations />
-        <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
-        <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+        <semi:ColorPickerSemiTheme />
+        <semi:DataGridSemiTheme />
+        <semi:TreeDataGridSemiTheme />
     </Application.Styles>
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude
-                    Source="Themes/_index.axaml" />
+                <ResourceInclude Source="Themes/_index.axaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Application.Resources>

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

@@ -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,130 @@ 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>> 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")
+    ];
 }

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

@@ -5,7 +5,7 @@ using Avalonia;
 using Avalonia.Data.Converters;
 using Avalonia.Metadata;
 
-namespace Semi.Avalonia.TreeDataGrid.Demo.Converters;
+namespace Semi.Avalonia.Demo.Converters;
 
 public class FileIconConverter : IMultiValueConverter
 {

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

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

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

@@ -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;
+        }
+    }
+}

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

@@ -3,15 +3,15 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:local="clr-namespace:Semi.Avalonia.Demo.Pages"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     d:DesignHeight="450"
     d:DesignWidth="800"
     x: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 +21,7 @@
                     <Binding Path="States" />
                 </Setter>
                 <Setter Property="ItemTemplate">
-                    <DataTemplate DataType="local:StateData">
+                    <DataTemplate DataType="vm:StateData">
                         <TextBlock Text="{Binding Name}" />
                     </DataTemplate>
                 </Setter>

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

@@ -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;
-    }
 }

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

@@ -18,4 +18,4 @@
             <TextBlock>Shadow on Pointerover</TextBlock>
         </Border>
     </StackPanel>
-</UserControl>
+</UserControl>

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

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

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

@@ -112,14 +112,14 @@
                     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"/>
+                <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" />
@@ -139,7 +139,7 @@
             </StackPanel>
             <StackPanel Orientation="Horizontal" Spacing="8">
                 <SplitButton Content="Default" Classes="Success" />
-                <SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}"  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" />
@@ -165,7 +165,7 @@
             </StackPanel>
             <StackPanel Orientation="Horizontal" Spacing="8">
                 <ToggleSplitButton Content="Default" Classes="Success" />
-                <ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True"  />
+                <ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True" />
                 <ToggleSplitButton Content="Default" Classes="Success" IsEnabled="False" />
                 <ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True" IsEnabled="False" />
             </StackPanel>

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

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

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

@@ -32,4 +32,4 @@
                 Text="A.S.I.A" />
         </ButtonSpinner>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -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[]

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

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

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

@@ -11,4 +11,4 @@
         <Calendar />
         <Calendar SelectionMode="SingleRange" />
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -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);
-    }
 }

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

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

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

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

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

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

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

@@ -4,12 +4,12 @@
     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">
     <Design.DataContext>
-        <pages:ComboBoxDemoViewModel />
+        <vm:ComboBoxDemoViewModel />
     </Design.DataContext>
     <StackPanel Spacing="20">
         <StackPanel.Styles>
@@ -28,13 +28,13 @@
         <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.SelectionBoxItemTemplate>
+                <DataTemplate DataType="x:String">
+                    <ContentControl BorderThickness="1"
+                                    BorderBrush="Gold"
+                                    Content="{Binding}" />
+                </DataTemplate>
+            </ComboBox.SelectionBoxItemTemplate>
         </ComboBox>
 
         <StackPanel Orientation="Horizontal">
@@ -49,4 +49,4 @@
             <ComboBox Width="100" Classes="Bordered" IsEnabled="False" />
         </StackPanel>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -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"];
 }

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

@@ -12,54 +12,54 @@
     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 +177,4 @@
             </Grid>
         </TabItem>
     </TabControl>
-</UserControl>
+</UserControl>

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

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

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

@@ -80,4 +80,4 @@
             </TextBox>
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>

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

@@ -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);
-    }
 }

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

@@ -26,4 +26,4 @@
         </StackPanel>
 
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -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);
-    }
 }

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

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

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

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

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

@@ -39,4 +39,4 @@
                 CornerRadius="10" />
         </Grid>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -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);
-    }
 }

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

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

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

@@ -31,7 +31,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>
@@ -221,4 +221,4 @@
             </WrapPanel>
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>

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

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

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

@@ -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}"

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

@@ -17,4 +17,4 @@
         <Button Name="SelectFolderButton" Content="Select Folder" />
         <Button Name="SaveFileButton" Content="Save File" />
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -145,4 +145,4 @@
             <TextBlock Text="Right Click to show Context Flyout" />
         </Border>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -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);
-    }
 }

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

@@ -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);
-    }
 }

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

@@ -9,41 +9,39 @@ public partial class Overview : UserControl
         InitializeComponent();
     }
 
-    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.2.1.6";
+    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.2.1.8";
 
     public string MainStyle { get; set; } =
         """
         <Application.Styles>
-        <!-- You can still reference in old way.  -->
-        <!-- <StyleInclude Source="avares://Semi.Avalonia/Index.axaml" /> -->
             <semi:SemiTheme Locale="zh-CN" />
         </Application.Styles>
         """;
 
-    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.2.1.6";
+    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.2.1.8";
 
     public string ColorPickerStyle { get; set; } =
         """
         <Application.Styles>
-            <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+            <semi:ColorPickerSemiTheme />
         </Application.Styles>
         """;
 
-    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.2.1.6";
+    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.2.1.8";
 
     public string DataGridStyle { get; set; } =
         """
         <Application.Styles>
-            <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+            <semi:DataGridSemiTheme />
         </Application.Styles>
         """;
 
-    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.10.2";
+    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.10.4";
 
     public string TreeDataGridStyle { get; set; } =
         """
         <Application.Styles>
-            <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
+            <semi:TreeDataGridSemiTheme />
         </Application.Styles>
         """;
 }

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

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

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

@@ -20,15 +20,16 @@
                     Minimum="{Binding #slider.Minimum}"
                     Theme="{DynamicResource ProgressRing}"
                     Value="{Binding #slider.Value}"
-                    ShowProgressText="True"/>
+                    ShowProgressText="True" />
                 <ProgressBar
                     Width="100"
                     Height="100"
                     IsIndeterminate="True"
+                    BorderThickness="16"
                     Maximum="{Binding #slider.Maximum}"
                     Minimum="{Binding #slider.Minimum}"
                     Theme="{DynamicResource ProgressRing}"
-                    ShowProgressText="True"/>
+                    ShowProgressText="True" />
             </StackPanel>
             <Slider
                 Name="slider"

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

@@ -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 ProgressBarDemo : UserControl
     {
         InitializeComponent();
     }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }

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

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

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

@@ -4,10 +4,10 @@
     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="450"
     d:DesignWidth="800"
-    x:DataType="pages:RefreshContainerDemoViewModel"
+    x:DataType="vm:RefreshContainerDemoViewModel"
     x:CompileBindings="True"
     mc:Ignorable="d">
     <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Top">
@@ -24,4 +24,4 @@
                      ItemsSource="{Binding Items}" />
         </RefreshContainer>
     </DockPanel>
-</UserControl>
+</UserControl>

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

@@ -1,8 +1,5 @@
-using System.Collections.ObjectModel;
-using System.Linq;
-using System.Threading.Tasks;
 using Avalonia.Controls;
-using CommunityToolkit.Mvvm.ComponentModel;
+using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -13,34 +10,14 @@ public partial class RefreshContainerDemo : UserControl
     public RefreshContainerDemo()
     {
         InitializeComponent();
-
         _viewModel = new RefreshContainerDemoViewModel();
-
         DataContext = _viewModel;
     }
 
     private async void RefreshContainerPage_RefreshRequested(object? sender, RefreshRequestedEventArgs e)
     {
         var deferral = e.GetDeferral();
-
         await _viewModel.AddToTop();
-
         deferral.Complete();
     }
-}
-
-public class RefreshContainerDemoViewModel : ObservableObject
-{
-    public ObservableCollection<string> Items { get; }
-
-    public RefreshContainerDemoViewModel()
-    {
-        Items = new ObservableCollection<string>(Enumerable.Range(1, 200).Select(i => $"Item {i}"));
-    }
-
-    public async Task AddToTop()
-    {
-        await Task.Delay(1000);
-        Items.Insert(0, $"Item {200 - Items.Count}");
-    }
 }

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

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

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

@@ -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 ScrollViewerDemo : UserControl
     {
         InitializeComponent();
     }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }

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

@@ -165,4 +165,4 @@
             </HeaderedContentControl>
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>

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

@@ -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 SelectableTextBlockDemo : UserControl
         InitializeComponent();
     }
 
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }

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

@@ -98,4 +98,4 @@
                 Value="30" />
         </StackPanel>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -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 SliderDemo : UserControl
         InitializeComponent();
     }
 
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }

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

@@ -4,12 +4,12 @@
     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="1000"
     d:DesignWidth="800"
     mc:Ignorable="d">
     <Design.DataContext>
-        <pages:SplitViewDemoViewModel />
+        <vm:SplitViewDemoViewModel />
     </Design.DataContext>
     <Border>
         <Grid ColumnDefinitions="*,400">
@@ -21,8 +21,7 @@
                         Content="IsPaneOpen" />
                     <ToggleSwitch
                         Grid.Row="0" Grid.Column="1"
-                        Name="PaneOpenButton"
-                        IsChecked="{Binding #SplitView.IsPaneOpen}" />
+                        Name="PaneOpenButton" />
 
                     <Label
                         Grid.Row="1" Grid.Column="0"
@@ -30,8 +29,7 @@
                         Content="UseLightDismissOverlayMode" />
                     <ToggleSwitch
                         Grid.Row="1" Grid.Column="1"
-                        Name="UseLightDismissOverlayModeButton"
-                        IsChecked="{Binding #SplitView.UseLightDismissOverlayMode}" />
+                        Name="UseLightDismissOverlayModeButton" />
 
                     <Label
                         Grid.Row="2" Grid.Column="0"
@@ -39,9 +37,9 @@
                         Content="Placement" />
                     <ToggleSwitch
                         Grid.Row="2" Grid.Column="1"
+                        Name="PanePlacementButton"
                         OffContent="Left"
-                        OnContent="Right"
-                        IsChecked="{Binding #SplitView.PanePlacement}" />
+                        OnContent="Right" />
 
                     <Label
                         Grid.Row="3" Grid.Column="0"
@@ -51,8 +49,8 @@
                         Grid.Row="3" Grid.Column="1"
                         Name="DisplayModeSelector"
                         HorizontalAlignment="Stretch"
-                        ItemsSource="{Binding DisplayModes}"
-                        SelectedIndex="{Binding #SplitView.DisplayMode}" />
+                        ItemsSource="{x:Static vm:SplitViewDemoViewModel.DisplayModes}"
+                        SelectedItem="{x:Static SplitViewDisplayMode.CompactInline}" />
 
                     <Label
                         Grid.Row="4" Grid.Column="0"
@@ -65,7 +63,7 @@
                         Minimum="0"
                         TickFrequency="1"
                         IsSnapToTickEnabled="True"
-                        Value="{Binding #SplitView.CompactPaneLength}" />
+                        Value="48" />
 
                     <Label
                         Grid.Row="5" Grid.Column="0"
@@ -78,105 +76,207 @@
                         Minimum="128"
                         TickFrequency="1"
                         IsSnapToTickEnabled="True"
-                        Value="{Binding #SplitView.OpenPaneLength}" />
+                        Value="256" />
                 </Grid>
             </Border>
-            <Border
-                Grid.Column="0"
-                BorderBrush="{DynamicResource SemiGrey1}"
-                BorderThickness="1">
-                <SplitView
-                    Name="SplitView"
-                    DisplayMode="CompactOverlay"
-                    CompactPaneLength="48"
-                    OpenPaneLength="256">
-                    <SplitView.Background>
-                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
-                            <GradientStop Color="#6b4c1b" Offset="0" />
-                            <GradientStop Color="#291e10" Offset="1" />
-                        </LinearGradientBrush>
-                    </SplitView.Background>
-                    <SplitView.Pane>
-                        <Grid RowDefinitions="Auto,*,Auto">
-                            <TextBlock
-                                Grid.Row="0"
-                                Name="PaneHeader"
-                                Margin="8,12"
-                                FontWeight="Bold"
-                                Text="Playlist" />
-                            <ListBox
-                                Grid.Row="1"
-                                ItemsSource="{Binding Songs}" />
-                            <ToggleSwitch
-                                Grid.Row="2"
-                                Theme="{DynamicResource IconBorderlessToggleSwitch}"
-                                Content="{StaticResource SemiIconSidebar}"
-                                HorizontalAlignment="Left"
-                                IsChecked="{Binding #SplitView.IsPaneOpen}">
-                            </ToggleSwitch>
-                        </Grid>
-                    </SplitView.Pane>
-
-                    <Panel>
-                        <Panel.Styles>
-                            <Style Selector="Image#AlbumCover">
-                                <Style.Animations>
-                                    <Animation IterationCount="Infinite" Duration="0:0:40">
-                                        <KeyFrame Cue="0%">
-                                            <Setter Property="RotateTransform.Angle" Value="0" />
-                                        </KeyFrame>
-                                        <KeyFrame Cue="100%">
-                                            <Setter Property="RotateTransform.Angle" Value="360" />
-                                        </KeyFrame>
-                                    </Animation>
-                                </Style.Animations>
-                            </Style>
-                        </Panel.Styles>
-                        <Image
-                            Source="/Assets/WORLD.png"
-                            Name="AlbumCover"
-                            Width="200"
-                            Height="200" />
-                        <Arc
-                            Width="290"
-                            Height="290"
-                            StartAngle="0"
-                            SweepAngle="360"
-                            StrokeJoin="Round"
-                            StrokeLineCap="Round"
-                            StrokeThickness="45">
-                            <Arc.Stroke>
-                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
-                                    <GradientStop Color="#010101" Offset="0" />
-                                    <GradientStop Color="#363636" Offset="0.5" />
-                                    <GradientStop Color="#010101" Offset="1" />
+            <TabControl Grid.Column="0">
+                <TabItem Header="Default">
+                    <Border
+                        BorderBrush="{DynamicResource SemiGrey1}"
+                        BorderThickness="1">
+                        <SplitView
+                            Name="SplitView"
+                            IsPaneOpen="{Binding #PaneOpenButton.IsChecked,Mode=TwoWay}"
+                            UseLightDismissOverlayMode="{Binding #UseLightDismissOverlayModeButton.IsChecked}"
+                            PanePlacement="{Binding #PanePlacementButton.IsChecked}"
+                            DisplayMode="{Binding #DisplayModeSelector.SelectedItem}"
+                            CompactPaneLength="{Binding #CompactPaneLengthSlider.Value}"
+                            OpenPaneLength="{Binding #OpenPaneLengthSlider.Value}">
+                            <SplitView.Background>
+                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                                    <GradientStop Color="#6b4c1b" Offset="0" />
+                                    <GradientStop Color="#291e10" Offset="1" />
                                 </LinearGradientBrush>
-                            </Arc.Stroke>
-                        </Arc>
-                        <Arc
-                            Width="294"
-                            Height="294"
-                            StartAngle="0"
-                            SweepAngle="360"
-                            StrokeJoin="Round"
-                            StrokeLineCap="Round"
-                            StrokeThickness="4"
-                            Stroke="Black" />
-                        <Arc
-                            Width="310"
-                            Height="310"
-                            StartAngle="0"
-                            SweepAngle="360"
-                            StrokeJoin="Round"
-                            StrokeLineCap="Round"
-                            StrokeThickness="10"
-                            Stroke="#C6CACD"
-                            Opacity="0.1" />
-                    </Panel>
+                            </SplitView.Background>
+                            <SplitView.Pane>
+                                <Grid RowDefinitions="Auto,*,Auto">
+                                    <TextBlock
+                                        Grid.Row="0"
+                                        Name="PaneHeader"
+                                        Margin="8,12"
+                                        FontWeight="Bold"
+                                        Text="Playlist" />
+                                    <ListBox
+                                        Grid.Row="1"
+                                        ItemsSource="{Binding Songs}" />
+                                    <ToggleSwitch
+                                        Grid.Row="2"
+                                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                                        Content="{StaticResource SemiIconSidebar}"
+                                        HorizontalAlignment="Left"
+                                        IsChecked="{Binding #SplitView.IsPaneOpen}" />
+                                </Grid>
+                            </SplitView.Pane>
 
-                </SplitView>
-            </Border>
+                            <Panel>
+                                <Panel.Styles>
+                                    <Style Selector="Image#AlbumCover">
+                                        <Style.Animations>
+                                            <Animation IterationCount="Infinite" Duration="0:0:40">
+                                                <KeyFrame Cue="0%">
+                                                    <Setter Property="RotateTransform.Angle" Value="0" />
+                                                </KeyFrame>
+                                                <KeyFrame Cue="100%">
+                                                    <Setter Property="RotateTransform.Angle" Value="360" />
+                                                </KeyFrame>
+                                            </Animation>
+                                        </Style.Animations>
+                                    </Style>
+                                </Panel.Styles>
+                                <Image
+                                    Source="/Assets/WORLD.png"
+                                    Name="AlbumCover"
+                                    Width="200"
+                                    Height="200" />
+                                <Arc
+                                    Width="290"
+                                    Height="290"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="45">
+                                    <Arc.Stroke>
+                                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
+                                            <GradientStop Color="#010101" Offset="0" />
+                                            <GradientStop Color="#363636" Offset="0.5" />
+                                            <GradientStop Color="#010101" Offset="1" />
+                                        </LinearGradientBrush>
+                                    </Arc.Stroke>
+                                </Arc>
+                                <Arc
+                                    Width="294"
+                                    Height="294"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="4"
+                                    Stroke="Black" />
+                                <Arc
+                                    Width="310"
+                                    Height="310"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="10"
+                                    Stroke="#C6CACD"
+                                    Opacity="0.1" />
+                            </Panel>
 
+                        </SplitView>
+                    </Border>
+                </TabItem>
+                <TabItem Header="VerticalSplitView">
+                    <Border
+                        BorderBrush="{DynamicResource SemiGrey1}"
+                        BorderThickness="1">
+                        <SplitView
+                            Name="SplitView2"
+                            Theme="{DynamicResource VerticalSplitView}"
+                            IsPaneOpen="{Binding #PaneOpenButton.IsChecked,Mode=TwoWay}"
+                            UseLightDismissOverlayMode="{Binding #UseLightDismissOverlayModeButton.IsChecked}"
+                            PanePlacement="{Binding #PanePlacementButton.IsChecked}"
+                            DisplayMode="{Binding #DisplayModeSelector.SelectedItem}"
+                            CompactPaneLength="{Binding #CompactPaneLengthSlider.Value}"
+                            OpenPaneLength="{Binding #OpenPaneLengthSlider.Value}">
+                            <SplitView.Background>
+                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                                    <GradientStop Color="#6b4c1b" Offset="0" />
+                                    <GradientStop Color="#291e10" Offset="1" />
+                                </LinearGradientBrush>
+                            </SplitView.Background>
+                            <SplitView.Pane>
+                                <Grid RowDefinitions="Auto,Auto,*">
+                                    <ToggleSwitch
+                                        Grid.Row="0"
+                                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                                        Content="{StaticResource SemiIconSidebar}"
+                                        HorizontalAlignment="Left"
+                                        IsChecked="{Binding #SplitView2.IsPaneOpen}" />
+                                    <TextBlock
+                                        Grid.Row="1"
+                                        Margin="8,12"
+                                        FontWeight="Bold"
+                                        Text="Playlist" />
+                                    <ListBox
+                                        Grid.Row="2"
+                                        ItemsSource="{Binding Songs}" />
+                                </Grid>
+                            </SplitView.Pane>
+
+                            <Panel>
+                                <Panel.Styles>
+                                    <Style Selector="Image#AlbumCover2">
+                                        <Style.Animations>
+                                            <Animation IterationCount="Infinite" Duration="0:0:40">
+                                                <KeyFrame Cue="0%">
+                                                    <Setter Property="RotateTransform.Angle" Value="0" />
+                                                </KeyFrame>
+                                                <KeyFrame Cue="100%">
+                                                    <Setter Property="RotateTransform.Angle" Value="360" />
+                                                </KeyFrame>
+                                            </Animation>
+                                        </Style.Animations>
+                                    </Style>
+                                </Panel.Styles>
+                                <Image
+                                    Source="/Assets/WORLD.png"
+                                    Name="AlbumCover2"
+                                    Width="200"
+                                    Height="200" />
+                                <Arc
+                                    Width="290"
+                                    Height="290"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="45">
+                                    <Arc.Stroke>
+                                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
+                                            <GradientStop Color="#010101" Offset="0" />
+                                            <GradientStop Color="#363636" Offset="0.5" />
+                                            <GradientStop Color="#010101" Offset="1" />
+                                        </LinearGradientBrush>
+                                    </Arc.Stroke>
+                                </Arc>
+                                <Arc
+                                    Width="294"
+                                    Height="294"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="4"
+                                    Stroke="Black" />
+                                <Arc
+                                    Width="310"
+                                    Height="310"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="10"
+                                    Stroke="#C6CACD"
+                                    Opacity="0.1" />
+                            </Panel>
+
+                        </SplitView>
+                    </Border>
+                </TabItem>
+            </TabControl>
         </Grid>
     </Border>
 </UserControl>

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

@@ -1,7 +1,5 @@
-using System.Collections.ObjectModel;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
-using CommunityToolkit.Mvvm.ComponentModel;
+using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -12,33 +10,4 @@ public partial class SplitViewDemo : UserControl
         InitializeComponent();
         this.DataContext = new SplitViewDemoViewModel();
     }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
-}
-
-public class SplitViewDemoViewModel : ObservableObject
-{
-    public ObservableCollection<string> Songs { get; set; } =
-    [
-        "320万年前",
-        "隐德来希",
-        "孔明",
-        "锦鲤卟噜噜",
-        "指鹿为马",
-        "热带季风Remix",
-        "加州梦境",
-        "渐近自由",
-        "世界所有的烂漫",
-    ];
-
-    public ObservableCollection<SplitViewDisplayMode> DisplayModes { get; set; } =
-    [
-        SplitViewDisplayMode.Inline,
-        SplitViewDisplayMode.CompactInline,
-        SplitViewDisplayMode.Overlay,
-        SplitViewDisplayMode.CompactOverlay,
-    ];
 }

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

@@ -11,85 +11,122 @@
     x:DataType="vm:TabControlDemoViewModel"
     mc:Ignorable="d">
     <ScrollViewer>
-        <StackPanel Spacing="20">
-            <Border Theme="{StaticResource CardBorder}">
-                <TabControl TabStripPlacement="Top">
-                    <TabItem Content="Hello 1" Header="Tab 1" />
-                    <TabItem Content="Hello 2" Header="Tab 2" />
-                    <TabItem Content="Hello 3" Header="Tab 3" />
-                    <TabItem Content="中文内容" Header="中文中文" />
-                    <TabItem
-                        Content="Hello 4"
-                        Header="Tab 4"
-                        IsEnabled="False" />
-                </TabControl>
-            </Border>
-            <Border Theme="{StaticResource CardBorder}">
-                <TabControl TabStripPlacement="Left">
-                    <TabItem Content="Hello 1" Header="Tab 1" />
-                    <TabItem Content="Hello 2" Header="Tab 2" />
-                    <TabItem Content="Hello 3" Header="Tab 3" />
-                    <TabItem Content="中文内容" Header="中文中文" />
-                    <TabItem
-                        Content="Hello 4"
-                        Header="Tab 4"
-                        IsEnabled="False" />
-                </TabControl>
-            </Border>
-            <Border Theme="{StaticResource CardBorder}">
-                <TabControl TabStripPlacement="Right">
-                    <TabItem Content="Hello 1" Header="Tab 1" />
-                    <TabItem Content="Hello 2" Header="Tab 2" />
-                    <TabItem Content="Hello 3" Header="Tab 3" />
-                    <TabItem Content="中文内容" Header="中文中文" />
-                    <TabItem
-                        Content="Hello 4"
-                        Header="Tab 4"
-                        IsEnabled="False" />
-                </TabControl>
-            </Border>
-            <Border Theme="{StaticResource CardBorder}">
-                <TabControl TabStripPlacement="Bottom">
-                    <TabItem Content="Hello 1" Header="Tab 1" />
-                    <TabItem Content="Hello 2" Header="Tab 2" />
-                    <TabItem Content="Hello 3" Header="Tab 3" />
-                    <TabItem Content="中文内容" Header="中文中文" />
-                    <TabItem
-                        Content="Hello 4"
-                        Header="Tab 4"
-                        IsEnabled="False" />
-                </TabControl>
-            </Border>
-            <Border Theme="{StaticResource CardBorder}">
-                <TabStrip>
-                    <TabStripItem>Tab 1</TabStripItem>
-                    <TabStripItem>Tab 2</TabStripItem>
-                </TabStrip>
-            </Border>
-            <Border Height="300" Theme="{DynamicResource CardBorder}">
-                <TabControl
-                    ItemsSource="{Binding Items}"
-                    TabStripPlacement="Top"
-                    Theme="{DynamicResource ScrollTabControl}" />
-            </Border>
-            <Border Height="300" Theme="{DynamicResource CardBorder}">
-                <TabControl
-                    ItemsSource="{Binding Items}"
-                    TabStripPlacement="Left"
-                    Theme="{DynamicResource ScrollTabControl}" />
-            </Border>
-            <Border Height="300" Theme="{DynamicResource CardBorder}">
-                <TabControl
-                    ItemsSource="{Binding Items}"
-                    TabStripPlacement="Bottom"
-                    Theme="{DynamicResource ScrollTabControl}" />
-            </Border>
-            <Border Height="300" Theme="{DynamicResource CardBorder}">
-                <TabControl
-                    ItemsSource="{Binding Items}"
-                    TabStripPlacement="Right"
-                    Theme="{DynamicResource ScrollTabControl}" />
+        <StackPanel>
+            <Border
+                Margin="8"
+                HorizontalAlignment="Left"
+                Theme="{StaticResource RadioButtonGroupBorder}">
+                <ListBox Name="place" Theme="{StaticResource ButtonRadioGroupListBox}">
+                    <Dock>Left</Dock>
+                    <Dock>Bottom</Dock>
+                    <Dock>Right</Dock>
+                    <Dock>Top</Dock>
+                </ListBox>
             </Border>
+            <TabControl Theme="{StaticResource LineTabControl}">
+                <TabItem Header="Default">
+                    <StackPanel>
+                        <StackPanel
+                            Margin="8"
+                            Orientation="Horizontal"
+                            Spacing="8">
+                            <TextBlock VerticalAlignment="Center" Text="ReverseSeparator" />
+                            <ToggleSwitch Name="reverse" Theme="{StaticResource SimpleToggleSwitch}" />
+                        </StackPanel>
+                        <Border MinHeight="150" Theme="{StaticResource CardBorder}">
+                            <TabControl Classes.ReverseSeparator="{Binding #reverse.IsChecked}" TabStripPlacement="{Binding #place.SelectedValue}">
+                                <TabItem Content="Hello 1" Header="Tab 1" />
+                                <TabItem Content="Hello 2" Header="Tab 2" />
+                                <TabItem Content="Hello 3" Header="Tab 3" />
+                                <TabItem Content="中文内容" Header="中文中文" />
+                                <TabItem
+                                    Content="Hello 4"
+                                    Header="Tab 4"
+                                    IsEnabled="False" />
+                            </TabControl>
+                        </Border>
+                        <Border Height="300" Theme="{StaticResource CardBorder}">
+                            <TabControl
+                                Classes.ReverseSeparator="{Binding #reverse.IsChecked}"
+                                ItemsSource="{Binding Items}"
+                                TabStripPlacement="{Binding #place.SelectedValue}"
+                                Theme="{StaticResource ScrollTabControl}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Line">
+                    <StackPanel>
+                        <Border MinHeight="150" Theme="{StaticResource CardBorder}">
+                            <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource LineTabControl}">
+                                <TabItem Content="Hello 1" Header="Tab 1" />
+                                <TabItem Content="Hello 2" Header="Tab 2" />
+                                <TabItem Content="Hello 3" Header="Tab 3" />
+                                <TabItem Content="中文内容" Header="中文中文" />
+                                <TabItem
+                                    Content="Hello 4"
+                                    Header="Tab 4"
+                                    IsEnabled="False" />
+                            </TabControl>
+                        </Border>
+                        <Border Height="300" Theme="{StaticResource CardBorder}">
+                            <TabControl
+                                ItemsSource="{Binding Items}"
+                                TabStripPlacement="{Binding #place.SelectedValue}"
+                                Theme="{StaticResource ScrollLineTabControl}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Card">
+                    <StackPanel>
+                        <Border
+                            MinHeight="150"
+                            Background="Transparent"
+                            Theme="{StaticResource CardBorder}">
+                            <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource CardTabControl}">
+                                <TabItem Content="Hello 1" Header="Tab 1" />
+                                <TabItem Content="Hello 2" Header="Tab 2" />
+                                <TabItem Content="Hello 3" Header="Tab 3" />
+                                <TabItem Content="中文内容" Header="中文中文" />
+                                <TabItem
+                                    Content="Hello 4"
+                                    Header="Tab 4"
+                                    IsEnabled="False" />
+                            </TabControl>
+                        </Border>
+                        <Border
+                            Height="300"
+                            Background="Transparent"
+                            Theme="{StaticResource CardBorder}">
+                            <TabControl
+                                ItemsSource="{Binding Items}"
+                                TabStripPlacement="{Binding #place.SelectedValue}"
+                                Theme="{StaticResource ScrollCardTabControl}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Button">
+                    <StackPanel>
+                        <Border MinHeight="150" Theme="{StaticResource CardBorder}">
+                            <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource ButtonTabControl}">
+                                <TabItem Content="Hello 1" Header="Tab 1" />
+                                <TabItem Content="Hello 2" Header="Tab 2" />
+                                <TabItem Content="Hello 3" Header="Tab 3" />
+                                <TabItem Content="中文内容" Header="中文中文" />
+                                <TabItem
+                                    Content="Hello 4"
+                                    Header="Tab 4"
+                                    IsEnabled="False" />
+                            </TabControl>
+                        </Border>
+                        <Border Height="300" Theme="{StaticResource CardBorder}">
+                            <TabControl
+                                ItemsSource="{Binding Items}"
+                                TabStripPlacement="{Binding #place.SelectedValue}"
+                                Theme="{StaticResource ScrollButtonTabControl}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+            </TabControl>
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>

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

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

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

@@ -0,0 +1,94 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Semi.Avalonia.Demo.Pages.TabStripDemo"
+             x:CompileBindings="True"
+             x:DataType="vm:TabStripDemoViewModel">
+    <Design.DataContext>
+        <vm:TabStripDemoViewModel />
+    </Design.DataContext>
+    <ScrollViewer>
+        <StackPanel>
+            <TabControl Theme="{StaticResource LineTabControl}">
+                <TabItem Header="Default">
+                    <StackPanel>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip>
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                                <TabStripItem Content="中文中文" />
+                                <TabStripItem Content="Tab 4" IsEnabled="False" />
+                            </TabStrip>
+                        </Border>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip
+                                ItemsSource="{Binding Items}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Line">
+                    <StackPanel>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip Theme="{StaticResource LineTabStrip}">
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                                <TabStripItem Content="中文中文" />
+                                <TabStripItem Content="Tab 4" IsEnabled="False" />
+                            </TabStrip>
+                        </Border>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip
+                                ItemsSource="{Binding Items}"
+                                Theme="{StaticResource LineTabStrip}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Card">
+                    <StackPanel>
+                        <Border
+                            Background="Transparent"
+                            Theme="{StaticResource CardBorder}">
+                            <TabStrip Theme="{StaticResource CardTabStrip}">
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                                <TabStripItem Content="中文中文" />
+                                <TabStripItem Content="Tab 4" IsEnabled="False" />
+                            </TabStrip>
+                        </Border>
+                        <Border
+                            Background="Transparent"
+                            Theme="{StaticResource CardBorder}">
+                            <TabStrip
+                                ItemsSource="{Binding Items}"
+                                Theme="{StaticResource CardTabStrip}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Button">
+                    <StackPanel>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip Theme="{StaticResource ButtonTabStrip}">
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                                <TabStripItem Content="中文中文" />
+                                <TabStripItem Content="Tab 4" IsEnabled="False" />
+                            </TabStrip>
+                        </Border>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip
+                                ItemsSource="{Binding Items}"
+                                Theme="{StaticResource ButtonTabStrip}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+            </TabControl>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>

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

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

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

@@ -159,4 +159,4 @@
             </HeaderedContentControl>
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>

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

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

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

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

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

@@ -17,9 +17,9 @@
         <TimePicker Classes="Large" />
         <TimePicker Classes="Small" />
         <StackPanel Orientation="Horizontal">
-            <TimePicker Classes="Large" ClockIdentifier="12HourClock"/>
-            <TimePicker ClockIdentifier="12HourClock"/>
-            <TimePicker Classes="Small" ClockIdentifier="12HourClock"/>
+            <TimePicker Classes="Large" ClockIdentifier="12HourClock" />
+            <TimePicker ClockIdentifier="12HourClock" />
+            <TimePicker Classes="Small" ClockIdentifier="12HourClock" />
         </StackPanel>
         <StackPanel Orientation="Horizontal">
             <TimePicker IsEnabled="False" />
@@ -28,4 +28,4 @@
         </StackPanel>
 
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -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 TimePickerDemo : UserControl
     {
         InitializeComponent();
     }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }

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

@@ -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 ToggleButtonDemo : UserControl
     {
         InitializeComponent();
     }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }

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

@@ -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 ToggleSwitchDemo : UserControl
     {
         InitializeComponent();
     }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }

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

@@ -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 ToolTipDemo : UserControl
     {
         InitializeComponent();
     }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }

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

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

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

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

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

@@ -79,4 +79,4 @@
 
     </Grid>
 
-</UserControl>
+</UserControl>

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

@@ -1,7 +1,5 @@
 using System.Collections.ObjectModel;
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
 using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
@@ -25,14 +23,16 @@ public class TreeViewVm : ObservableObject
     {
         Items = new ObservableCollection<TreeViewItemVm>()
         {
-            new TreeViewItemVm() {Name = "Item 1", Id = "1"},
-            new TreeViewItemVm() {Name = "Item 2", Id = "2"},
-            new TreeViewItemVm() {Name = "Item 3", Id = "3", Items = new ObservableCollection<TreeViewItemVm>()
+            new TreeViewItemVm() { Name = "Item 1", Id = "1" },
+            new TreeViewItemVm() { Name = "Item 2", Id = "2" },
+            new TreeViewItemVm()
             {
-                new TreeViewItemVm() {Name = "Item 3.1", Id = "3.1"},
-                new TreeViewItemVm() {Name = "Item 3.2", Id = "3.2"},
-                new TreeViewItemVm() {Name = "Item 3.3", Id = "3.3"},
-            },
+                Name = "Item 3", Id = "3", Items = new ObservableCollection<TreeViewItemVm>()
+                {
+                    new TreeViewItemVm() { Name = "Item 3.1", Id = "3.1" },
+                    new TreeViewItemVm() { Name = "Item 3.2", Id = "3.2" },
+                    new TreeViewItemVm() { Name = "Item 3.3", Id = "3.3" },
+                },
             },
         };
 
@@ -50,8 +50,10 @@ public class TreeViewVm : ObservableObject
                     ThirdItem thirdItem = new ThirdItem { Id = k, Name = $"ThirdItem {k}" };
                     secondItem.ThirdItemItems.Add(thirdItem);
                 }
+
                 firstItem.SecondItems.Add(secondItem);
             }
+
             MultipleLevelItems.Add(firstItem);
         }
     }
@@ -69,18 +71,17 @@ public class ItemBase
     public int Id { get; set; }
     public string? Name { get; set; }
 }
+
 public class FirstItem : ItemBase
 {
     public ObservableCollection<SecondItem>? SecondItems { get; set; }
 }
+
 public class SecondItem : ItemBase
 {
     public ObservableCollection<ThirdItem>? ThirdItemItems { get; set; }
-
 }
+
 public class ThirdItem : ItemBase
 {
-}
-
-
-
+}

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

@@ -1,6 +1,6 @@
 <Project Sdk="Microsoft.NET.Sdk">
     <PropertyGroup>
-        <TargetFramework>netstandard2.0</TargetFramework>
+        <TargetFramework>net8.0</TargetFramework>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
     </PropertyGroup>
@@ -19,11 +19,13 @@
             <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>
         </PackageReference>
         <PackageReference Include="CommunityToolkit.Mvvm" Version="$(CommunityToolkitVersion)"/>
+        <PackageReference Include="Irihi.Avalonia.Shared" Version="0.3.0" />
     </ItemGroup>
 
     <ItemGroup>
         <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj"/>
         <ProjectReference Include="..\..\src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj"/>
         <ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj"/>
+        <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj"/>
     </ItemGroup>
 </Project>

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

@@ -1,49 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <ControlTheme x:Key="NavigationTab" TargetType="TabControl">
-        <Setter Property="Template">
-            <ControlTemplate TargetType="TabControl">
-                <Border
-                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
-                    CornerRadius="{TemplateBinding CornerRadius}">
-                    <DockPanel>
-                        <ScrollViewer
-                            DockPanel.Dock="Left"
-                            Name="PART_ScrollViewer"
-                            VerticalScrollBarVisibility="Auto">
-                            <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
-                                <ItemsPresenter Name="PART_ItemsPresenter">
-                                    <ItemsPresenter.ItemsPanel>
-                                        <ItemsPanelTemplate>
-                                            <StackPanel />
-                                        </ItemsPanelTemplate>
-                                    </ItemsPresenter.ItemsPanel>
-                                </ItemsPresenter>
-                                <Border Name="PART_BorderSeparator"
-                                        Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
-                            </Panel>
-                        </ScrollViewer>
-                        <ContentPresenter
-                            Name="PART_SelectedContentHost"
-                            Margin="{TemplateBinding Padding}"
-                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                            Content="{TemplateBinding SelectedContent}"
-                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
-                    </DockPanel>
-                </Border>
-            </ControlTemplate>
-        </Setter>
-        <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
-            <Setter Property="Width" Value="1" />
-            <Setter Property="VerticalAlignment" Value="Stretch" />
-            <Setter Property="HorizontalAlignment" Value="Left" />
-        </Style>
-        <Style Selector="^.Dismiss /template/ ScrollViewer#PART_ScrollViewer">
-            <Setter Property="IsVisible" Value="False" />
-        </Style>
-    </ControlTheme>
-</ResourceDictionary>

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

@@ -4,7 +4,6 @@
         <ResourceInclude Source="ColorItemControl.axaml" />
         <ResourceInclude Source="FunctionalColorGroupControl.axaml" />
         <ResourceInclude Source="ShadowGroupControl.axaml" />
-        <ResourceInclude Source="TabMenu.axaml" />
         <ResourceInclude Source="ToggleSwitch.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

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

@@ -0,0 +1,37 @@
+using System;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using System.Windows.Input;
+using Avalonia.Platform.Storage;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public partial class AboutUsViewModel : ObservableObject
+{
+    public ICommand NavigateCommand { get; set; }
+
+    internal ILauncher? Launcher { get; set; }
+
+    public AboutUsViewModel()
+    {
+        NavigateCommand = new AsyncRelayCommand<string>(OnNavigateAsync);
+    }
+
+    private static readonly IReadOnlyDictionary<string, string> _keyToUrlMapping = new Dictionary<string, string>()
+    {
+        ["semi"] = "https://github.com/irihitech/Semi.Avalonia",
+        ["ursa"] = "https://github.com/irihitech/Ursa.Avalonia",
+        ["mantra"] = "https://www.bilibili.com/video/BV15pfKYbEEQ",
+        ["huska"] = "https://www.bilibili.com/video/BV1knj1zWE4A",
+    };
+
+    private async Task OnNavigateAsync(string? arg)
+    {
+        if (Launcher is not null && arg is not null && _keyToUrlMapping.TryGetValue(arg.ToLower(), out var uri))
+        {
+            await Launcher.LaunchUriAsync(new Uri(uri));
+        }
+    }
+}

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

@@ -2,11 +2,10 @@ using Avalonia;
 using Avalonia.Controls.ApplicationLifetimes;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Input;
-using Semi.Avalonia.Demo.Views;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
-public partial class ApplicationViewModel: ObservableObject
+public partial class ApplicationViewModel : ObservableObject
 {
     [RelayCommand]
     private void Exit()

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

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

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

@@ -0,0 +1,9 @@
+using System.Collections.ObjectModel;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class ComboBoxDemoViewModel : ObservableObject
+{
+    public ObservableCollection<string> Items { get; set; } = ["Ding", "Otter", "Husky", "Mr.17", "Cass"];
+}

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

@@ -59,6 +59,25 @@ public class Song
         Url = $"https://music.163.com/song?id={netEaseId}";
     }
 
+    public static List<string> Albums =>
+    [
+        "A.S.I.A",
+        "饕餮人间",
+        "七步咙咚呛",
+        "大惊小怪",
+        "The ONE",
+        "以梦为马 (壮志骄阳版)",
+        "emo了",
+        "一眼万年",
+        "冲刺吧",
+        "爱的赏味期限",
+        "COSMIC ANTHEM / 手紙",
+        "世界晚安",
+        "明年也要好好长大",
+        "320万年前",
+        "W.O.R.L.D."
+    ];
+
     public static List<Song> Songs =>
     [
         new("好肚有肚(feat.李玲玉)", "熊猫堂ProducePandas", 2, 50, "A.S.I.A", 730, 1487039339),

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

@@ -0,0 +1,22 @@
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Threading.Tasks;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class RefreshContainerDemoViewModel : ObservableObject
+{
+    public ObservableCollection<string> Items { get; }
+
+    public RefreshContainerDemoViewModel()
+    {
+        Items = new ObservableCollection<string>(Enumerable.Range(1, 200).Select(i => $"Item {i}"));
+    }
+
+    public async Task AddToTop()
+    {
+        await Task.Delay(1000);
+        Items.Insert(0, $"Item {200 - Items.Count}");
+    }
+}

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

@@ -0,0 +1,29 @@
+using System.Collections.ObjectModel;
+using Avalonia.Controls;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class SplitViewDemoViewModel : ObservableObject
+{
+    public ObservableCollection<string> Songs { get; set; } =
+    [
+        "320万年前",
+        "隐德来希",
+        "孔明",
+        "锦鲤卟噜噜",
+        "指鹿为马",
+        "热带季风Remix",
+        "加州梦境",
+        "渐近自由",
+        "世界所有的烂漫",
+    ];
+
+    public static ObservableCollection<SplitViewDisplayMode> DisplayModes { get; set; } =
+    [
+        SplitViewDisplayMode.Inline,
+        SplitViewDisplayMode.CompactInline,
+        SplitViewDisplayMode.Overlay,
+        SplitViewDisplayMode.CompactOverlay,
+    ];
+}

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

@@ -4,12 +4,7 @@ using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
-public class TabControlDemoViewModel: ObservableObject
+public class TabControlDemoViewModel : ObservableObject
 {
-    public ObservableCollection<string> Items { get; set; }
-
-    public TabControlDemoViewModel()
-    {
-        Items = new ObservableCollection<string>(Enumerable.Range(1, 200).Select(a => "Tab " + a));
-    }
+    public ObservableCollection<string> Items => new(Enumerable.Range(1, 200).Select(a => "Tab " + a));
 }

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

@@ -0,0 +1,10 @@
+using System.Collections.ObjectModel;
+using System.Linq;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class TabStripDemoViewModel : ObservableObject
+{
+    public ObservableCollection<string> Items => new(Enumerable.Range(1, 10).Select(a => "Tab " + a));
+}

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

@@ -2,6 +2,7 @@ using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.ComponentModel;
+using System.Diagnostics;
 using System.IO;
 using System.Linq;
 using System.Runtime.InteropServices;
@@ -11,43 +12,40 @@ using Avalonia.Controls.Selection;
 using Avalonia.Threading;
 using CommunityToolkit.Mvvm.ComponentModel;
 
-namespace Semi.Avalonia.TreeDataGrid.Demo.ViewModels;
+namespace Semi.Avalonia.Demo.ViewModels;
 
-public class FilesPageViewModel: ObservableObject
+public partial class FilesPageViewModel : ObservableObject
 {
     public IList<string> Drives { get; }
-    private string _selectedDrive;
-    private string? _selectedPath;
-    private FileNodeViewModel? _root;
-    public string SelectedDrive
+    public HierarchicalTreeDataGridSource<FileNodeViewModel> Source { get; }
+    [ObservableProperty] private string _selectedDrive;
+    [ObservableProperty] private string? _selectedPath;
+    [ObservableProperty] private FileNodeViewModel? _root;
+
+    partial void OnSelectedDriveChanged(string value)
     {
-        get => _selectedDrive;
-        set
+        Root = new FileNodeViewModel(value, true, true);
+        if (Source is not null)
         {
-            SetProperty(ref _selectedDrive, value);
-            _root = new FileNodeViewModel(_selectedDrive, isDirectory: true, isRoot: true);
-            Source.Items = new[] { _root };
+            Source.Items = [Root];
         }
     }
-    
-    public string? SelectedPath
+
+    partial void OnSelectedPathChanged(string? value)
     {
-        get => _selectedPath;
-        set => SetSelectedPath(value);
+        SetSelectedPath(value);
     }
-    
-    public HierarchicalTreeDataGridSource<FileNodeViewModel> Source { get; }
 
     public FilesPageViewModel()
     {
-        Drives= DriveInfo.GetDrives().Select(x => x.Name).ToList();
+        Drives = DriveInfo.GetDrives().Select(x => x.Name).ToList();
         if (RuntimeInformation.IsOSPlatform(OSPlatform.Windows))
         {
-            _selectedDrive = "C:\\";
+            SelectedDrive = @"C:\";
         }
         else
         {
-            _selectedDrive = Drives.FirstOrDefault() ?? "/";
+            SelectedDrive = Drives.FirstOrDefault() ?? "/";
         }
 
         Source = new HierarchicalTreeDataGridSource<FileNodeViewModel>(Array.Empty<FileNodeViewModel>())
@@ -58,7 +56,7 @@ public class FilesPageViewModel: ObservableObject
                     null,
                     x => x.IsChecked,
                     (o, v) => o.IsChecked = v,
-                    options: new()
+                    options: new CheckBoxColumnOptions<FileNodeViewModel>
                     {
                         CanUserResizeColumn = false,
                     }),
@@ -68,20 +66,20 @@ public class FilesPageViewModel: ObservableObject
                         "FileNameCell",
                         "FileNameEditCell",
                         new GridLength(1, GridUnitType.Star),
-                        new()
+                        new TemplateColumnOptions<FileNodeViewModel>
                         {
-                            CompareAscending = FileNodeViewModel.SortAscending(x => x.Name),
-                            CompareDescending = FileNodeViewModel.SortDescending(x => x.Name),
+                            CompareAscending = FileNodeViewModel.SortAscending(vm => vm.Name),
+                            CompareDescending = FileNodeViewModel.SortDescending(vm => vm.Name),
                             IsTextSearchEnabled = true,
-                            TextSearchValueSelector = x => x.Name
+                            TextSearchValueSelector = vm => vm.Name
                         }),
-                    x => x.Children,
-                    x => x.HasChildren,
-                    x => x.IsExpanded),
+                    vm => vm.Children,
+                    vm => vm.HasChildren,
+                    vm => vm.IsExpanded),
                 new TextColumn<FileNodeViewModel, long?>(
                     "Size",
-                    x => x.Size,
-                    options: new()
+                    vm => vm.Size,
+                    options: new TextColumnOptions<FileNodeViewModel>
                     {
                         CompareAscending = FileNodeViewModel.SortAscending(x => x.Size),
                         CompareDescending = FileNodeViewModel.SortDescending(x => x.Size),
@@ -89,7 +87,7 @@ public class FilesPageViewModel: ObservableObject
                 new TextColumn<FileNodeViewModel, DateTimeOffset?>(
                     "Modified",
                     x => x.Modified,
-                    options: new()
+                    options: new TextColumnOptions<FileNodeViewModel>
                     {
                         CompareAscending = FileNodeViewModel.SortAscending(x => x.Modified),
                         CompareDescending = FileNodeViewModel.SortDescending(x => x.Modified),
@@ -99,18 +97,18 @@ public class FilesPageViewModel: ObservableObject
         Source.RowSelection!.SingleSelect = false;
         Source.RowSelection.SelectionChanged += SelectionChanged;
     }
-    
+
     private void SelectionChanged(object? sender, TreeSelectionModelSelectionChangedEventArgs<FileNodeViewModel> e)
     {
         var selectedPath = Source.RowSelection?.SelectedItem?.Path;
         this.SetProperty(ref _selectedPath, selectedPath, nameof(SelectedPath));
 
         foreach (var i in e.DeselectedItems)
-            System.Diagnostics.Trace.WriteLine($"Deselected '{i?.Path}'");
+            Trace.WriteLine($"Deselected '{i?.Path}'");
         foreach (var i in e.SelectedItems)
-            System.Diagnostics.Trace.WriteLine($"Selected '{i?.Path}'");
+            Trace.WriteLine($"Selected '{i?.Path}'");
     }
-    
+
     private void SetSelectedPath(string? value)
     {
         if (string.IsNullOrEmpty(value))
@@ -164,27 +162,28 @@ public class FilesPageViewModel: ObservableObject
             }
         }
 
+        Source.Items = [Root];
         Source.RowSelection!.SelectedIndex = index;
     }
 }
 
-public class FileNodeViewModel: ObservableObject, IEditableObject
+public partial class FileNodeViewModel : ObservableObject, IEditableObject
 {
-    private string _path;
-    private string _name;
+    [ObservableProperty] private string _path;
+    [ObservableProperty] private string _name;
     private string? _undoName;
-    private long? _size;
-    private DateTimeOffset? _modified;
+    [ObservableProperty] private long? _size;
+    [ObservableProperty] private DateTimeOffset? _modified;
     private FileSystemWatcher? _watcher;
     private ObservableCollection<FileNodeViewModel>? _children;
-    private bool _hasChildren = true;
-    private bool _isExpanded;
+    [ObservableProperty] private bool _hasChildren = true;
+    [ObservableProperty] private bool _isExpanded;
 
-    public FileNodeViewModel( string path, bool isDirectory, bool isRoot = false)
+    public FileNodeViewModel(string path, bool isDirectory, bool isRoot = false)
     {
-        _path = path;
-        _name = isRoot ? path : System.IO.Path.GetFileName(Path);
-        _isExpanded = isRoot;
+        Path = path;
+        Name = isRoot ? path : System.IO.Path.GetFileName(Path);
+        IsExpanded = isRoot;
         IsDirectory = isDirectory;
         HasChildren = isDirectory;
 
@@ -196,42 +195,6 @@ public class FileNodeViewModel: ObservableObject, IEditableObject
         }
     }
 
-    public string Path 
-    {
-        get => _path;
-        private set => SetProperty(ref _path, value);
-    }
-
-    public string Name 
-    {
-        get => _name;
-        private set => SetProperty(ref _name, value);
-    }
-
-    public long? Size 
-    {
-        get => _size;
-        private set => SetProperty(ref _size, value);
-    }
-
-    public DateTimeOffset? Modified 
-    {
-        get => _modified;
-        private set => SetProperty(ref _modified, value);
-    }
-
-    public bool HasChildren
-    {
-        get => _hasChildren;
-        private set => SetProperty(ref _hasChildren, value);
-    }
-
-    public bool IsExpanded
-    {
-        get => _isExpanded;
-        set => SetProperty(ref _isExpanded, value);
-    }
-
     public bool IsChecked { get; set; }
     public bool IsDirectory { get; }
     public IReadOnlyList<FileNodeViewModel> Children => _children ??= LoadChildren();
@@ -332,6 +295,7 @@ public class FileNodeViewModel: ObservableObject, IEditableObject
                             child.Size = info.Length;
                             child.Modified = info.LastWriteTimeUtc;
                         }
+
                         break;
                     }
                 }
@@ -359,7 +323,7 @@ public class FileNodeViewModel: ObservableObject, IEditableObject
                 if (_children[i].Path == e.FullPath)
                 {
                     _children.RemoveAt(i);
-                    System.Diagnostics.Debug.WriteLine($"Removed {e.FullPath}");
+                    Debug.WriteLine($"Removed {e.FullPath}");
                     break;
                 }
             }
@@ -394,6 +358,7 @@ internal static class ListExtensions
                 return i;
             i++;
         }
+
         return -1;
     }
 }

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

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

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

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

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

@@ -11,6 +11,23 @@
     x:CompileBindings="True"
     x:DataType="views:MainViewModel"
     mc:Ignorable="d">
+    <UserControl.Resources>
+        <ControlTheme x:Key="CategoryTabItem" TargetType="TabItem">
+            <Setter Property="IsEnabled" Value="False" />
+            <Setter Property="Template">
+                <ControlTemplate TargetType="TabItem">
+                    <TextBlock
+                        FontWeight="Bold"
+                        FontSize="12"
+                        Margin="4"
+                        Text="{TemplateBinding Header}" />
+                </ControlTemplate>
+            </Setter>
+            <Style Selector="^:disabled /template/ TextBlock">
+                <Setter Property="Foreground" Value="{DynamicResource SemiColorText1}" />
+            </Style>
+        </ControlTheme>
+    </UserControl.Resources>
     <Grid RowDefinitions="Auto, *">
         <Border
             Grid.Row="0"
@@ -78,13 +95,28 @@
             Grid.Row="1"
             Margin="8"
             Padding="20,0,0,0"
-            HorizontalAlignment="Stretch"
             TabStripPlacement="Left"
             Classes.Dismiss="{Binding #ExpandButton.IsChecked}"
-            Theme="{DynamicResource NavigationTab}">
+            Theme="{DynamicResource ScrollLineTabControl}">
+            <TabControl.Styles>
+                <Style Selector=".Dismiss /template/ ScrollViewer#PART_ScrollViewer">
+                    <Setter Property="IsVisible" Value="False" />
+                </Style>
+            </TabControl.Styles>
+            <TabControl.ItemsPanel>
+                <ItemsPanelTemplate>
+                    <StackPanel />
+                </ItemsPanelTemplate>
+            </TabControl.ItemsPanel>
             <TabItem Header="Overview">
                 <pages:Overview />
             </TabItem>
+            <TabItem Header="About Us">
+                <pages:AboutUs />
+            </TabItem>
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Resource Browser" />
             <TabItem Header="Palette">
                 <pages:PaletteDemo />
             </TabItem>
@@ -97,133 +129,165 @@
             <TabItem Header="Icon">
                 <pages:IconDemo />
             </TabItem>
-            <TabItem Header="AutoCompleteBox">
-                <pages:AutoCompleteBoxDemo />
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Separate Pack" />
+            <TabItem Header="ColorPicker">
+                <pages:ColorPickerDemo />
+            </TabItem>
+            <TabItem Header="DataGrid">
+                <pages:DataGridDemo />
+            </TabItem>
+            <TabItem Header="TreeDataGrid">
+                <pages:TreeDataGridDemo />
+            </TabItem>
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Basic" />
+            <TabItem Header="TextBlock">
+                <pages:TextBlockDemo />
+            </TabItem>
+            <TabItem Header="SelectableTextBlock">
+                <pages:SelectableTextBlockDemo />
             </TabItem>
             <TabItem Header="Border">
                 <pages:BorderDemo />
             </TabItem>
+            <TabItem Header="PathIcon">
+                <pages:PathIconDemo />
+            </TabItem>
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Button" />
             <TabItem Header="Button">
                 <pages:ButtonDemo />
             </TabItem>
+            <TabItem Header="RepeatButton">
+                <pages:RepeatButtonDemo />
+            </TabItem>
+            <TabItem Header="HyperlinkButton">
+                <pages:HyperlinkButtonDemo />
+            </TabItem>
+            <TabItem Header="ToggleButton">
+                <pages:ToggleButtonDemo />
+            </TabItem>
+            <TabItem Header="CheckBox">
+                <pages:CheckBoxDemo />
+            </TabItem>
+            <TabItem Header="RadioButton">
+                <pages:RadioButtonDemo />
+            </TabItem>
+            <TabItem Header="ToggleSwitch">
+                <pages:ToggleSwitchDemo />
+            </TabItem>
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Input" />
+            <TabItem Header="TextBox">
+                <pages:TextBoxDemo />
+            </TabItem>
+            <TabItem Header="AutoCompleteBox">
+                <pages:AutoCompleteBoxDemo />
+            </TabItem>
+            <TabItem Header="ComboBox">
+                <pages:ComboBoxDemo />
+            </TabItem>
             <TabItem Header="ButtonSpinner">
                 <pages:ButtonSpinnerDemo />
             </TabItem>
+            <TabItem Header="NumericUpDown">
+                <pages:NumericUpDownDemo />
+            </TabItem>
+            <TabItem Header="Slider">
+                <pages:SliderDemo />
+            </TabItem>
+            <TabItem Header="ManagedFileChooser">
+                <pages:ManagedFileChooserDemo />
+            </TabItem>
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Date/Time" />
             <TabItem Header="Calendar">
                 <pages:CalendarDemo />
             </TabItem>
             <TabItem Header="CalendarDatePicker">
                 <pages:CalendarDatePickerDemo />
             </TabItem>
-            <TabItem Header="Carousel">
-                <pages:CarouselDemo />
-            </TabItem>
-            <TabItem Header="CheckBox">
-                <pages:CheckBoxDemo />
-            </TabItem>
-            <TabItem Header="ColorPicker">
-                <pages:ColorPickerDemo />
-            </TabItem>
-            <TabItem Header="ComboBox">
-                <pages:ComboBoxDemo />
-            </TabItem>
-            <TabItem Header="DataValidationErrors">
-                <pages:DataValidationErrorsDemo />
-            </TabItem>
-            <TabItem Header="DataGrid">
-                <pages:DataGridDemo />
-            </TabItem>
             <TabItem Header="DatePicker">
                 <pages:DatePickerDemo />
             </TabItem>
+            <TabItem Header="TimePicker">
+                <pages:TimePickerDemo />
+            </TabItem>
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Navigation" />
+            <TabItem Header="TabControl">
+                <pages:TabControlDemo />
+            </TabItem>
+            <TabItem Header="TabStrip">
+                <pages:TabStripDemo />
+            </TabItem>
+            <TabItem Header="TreeView">
+                <pages:TreeViewDemo />
+            </TabItem>
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Show" />
+            <TabItem Header="Carousel">
+                <pages:CarouselDemo />
+            </TabItem>
             <TabItem Header="Expander">
                 <pages:ExpanderDemo />
             </TabItem>
             <TabItem Header="Flyout">
                 <pages:FlyoutDemo />
             </TabItem>
-            <TabItem Header="GridSplitter">
-                <pages:GridSplitterDemo />
-            </TabItem>
             <TabItem Header="HeaderedContentControl">
                 <pages:HeaderedContentControlDemo />
             </TabItem>
-            <TabItem Header="HyperlinkButton">
-                <pages:HyperlinkButtonDemo />
-            </TabItem>
             <TabItem Header="Label">
                 <pages:LabelDemo />
             </TabItem>
             <TabItem Header="ListBox">
                 <pages:ListBoxDemo />
             </TabItem>
-            <TabItem Header="ManagedFileChooser">
-                <pages:ManagedFileChooserDemo />
-            </TabItem>
-            <TabItem Header="Menu">
-                <pages:MenuDemo />
-            </TabItem>
-            <TabItem Header="Notification">
-                <pages:NotificationDemo />
-            </TabItem>
-            <TabItem Header="NumericUpDown">
-                <pages:NumericUpDownDemo />
-            </TabItem>
-            <TabItem Header="PathIcon">
-                <pages:PathIconDemo />
-            </TabItem>
-            <TabItem Header="ProgressBar">
-                <pages:ProgressBarDemo />
-            </TabItem>
-            <TabItem Header="RadioButton">
-                <pages:RadioButtonDemo />
-            </TabItem>
-            <TabItem Header="RefreshContainer">
-                <pages:RefreshContainerDemo />
-            </TabItem>
-            <TabItem Header="RepeatButton">
-                <pages:RepeatButtonDemo />
-            </TabItem>
-            <TabItem Header="ScrollViewer">
-                <pages:ScrollViewerDemo />
-            </TabItem>
-            <TabItem Header="SelectableTextBlock">
-                <pages:SelectableTextBlockDemo />
-            </TabItem>
-            <TabItem Header="Slider">
-                <pages:SliderDemo />
-            </TabItem>
             <TabItem Header="SplitView">
                 <pages:SplitViewDemo />
             </TabItem>
-            <TabItem Header="TabControl">
-                <pages:TabControlDemo />
-            </TabItem>
-            <TabItem Header="TextBlock">
-                <pages:TextBlockDemo />
-            </TabItem>
-            <TabItem Header="TextBox">
-                <pages:TextBoxDemo />
-            </TabItem>
-            <TabItem Header="ThemeVariantScope">
-                <pages:ThemeVariantDemo />
-            </TabItem>
-            <TabItem Header="TimePicker">
-                <pages:TimePickerDemo />
-            </TabItem>
-            <TabItem Header="ToggleButton">
-                <pages:ToggleButtonDemo />
-            </TabItem>
-            <TabItem Header="ToggleSwitch">
-                <pages:ToggleSwitchDemo />
-            </TabItem>
             <TabItem Header="ToolTip">
                 <pages:ToolTipDemo />
             </TabItem>
-            <TabItem Header="TreeView">
-                <pages:TreeViewDemo />
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Feedback" />
+            <TabItem Header="DataValidationErrors">
+                <pages:DataValidationErrorsDemo />
+            </TabItem>
+            <TabItem Header="Notification">
+                <pages:NotificationDemo />
+            </TabItem>
+            <TabItem Header="ProgressBar">
+                <pages:ProgressBarDemo />
+            </TabItem>
+            <TabItem Header="RefreshContainer">
+                <pages:RefreshContainerDemo />
+            </TabItem>
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Other" />
+            <TabItem Header="GridSplitter">
+                <pages:GridSplitterDemo />
+            </TabItem>
+            <TabItem Header="Menu">
+                <pages:MenuDemo />
+            </TabItem>
+            <TabItem Header="ScrollViewer">
+                <pages:ScrollViewerDemo />
+            </TabItem>
+            <TabItem Header="ThemeVariantScope">
+                <pages:ThemeVariantDemo />
             </TabItem>
         </TabControl>
     </Grid>
-
 </UserControl>

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

@@ -120,6 +120,12 @@ public partial class MainViewModel : ObservableObject
                         Command = SelectLocaleCommand,
                         CommandParameter = new CultureInfo("es-es")
                     },
+                    new MenuItemViewModel
+                    {
+                        Header = "Polski",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("pl-pl")
+                    },
                 ]
             }
         ];

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

@@ -11,4 +11,4 @@
     Icon="/Assets/irihi.ico"
     mc:Ignorable="d">
     <views:MainView />
-</Window>
+</Window>

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

@@ -1,5 +1,4 @@
 using Avalonia.Controls;
-using Avalonia.Controls.Notifications;
 
 namespace Semi.Avalonia.Demo.Views;
 

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

@@ -1,11 +0,0 @@
-<Application
-    x:Class="Semi.Avalonia.TreeDataGrid.Demo.App"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:semi="https://irihi.tech/semi">
-
-    <Application.Styles>
-        <semi:SemiTheme Locale="zh-CN" />
-        <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
-    </Application.Styles>
-</Application>