Merge pull request #436 from irihitech/11.0.7.7

Upgrade to 11.0.7.7

.github/workflows/Pack.yml

@@ -1,58 +0,0 @@
-name: Pack
-
-on:
-  push:
-    branches: [ "release" ]
-  pull_request:
-    branches: [ "release" ]
-
-jobs:
-  nuget_desktop:
-    runs-on: windows-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Nuget Semi.Avalonia
-        run: dotnet pack ./src/Semi.Avalonia -o ./nugets
-
-      - name: Nuget Semi.Avalonia.ColorPicker
-        run: dotnet pack ./src/Semi.Avalonia.ColorPicker  -o ./nugets
-
-      - name: Nuget Semi.Avalonia.DataGrid
-        run: dotnet pack ./src/Semi.Avalonia.DataGrid  -o ./nugets
-
-      - name: Nuget Semi.Avalonia.TreeDataGrid
-        run: dotnet pack ./src/Semi.Avalonia.TreeDataGrid  -o ./nugets
-
-      - name: Desktop
-        run: dotnet publish ./demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true --self-contained true
-
-      - name: Upload
-        uses: actions/upload-artifact@v3.1.2
-        with:
-          name: nuget_desktop
-          path: |
-            ./nugets
-            ./**/publish/*.exe
-
-  android:
-    runs-on: windows-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: CD Android
-        run: cd ./demo/Semi.Avalonia.Demo.Android
-
-      - name: Restore Dependencies
-        run: dotnet restore
-
-      - name: Build
-        run: dotnet publish ./demo/Semi.Avalonia.Demo.Android -c Release -f net7.0-android --no-restore
-
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v3.1.2
-        with:
-          name: android
-          path: ./**/publish/*Signed.apk

.github/workflows/deploy.yml

@@ -1,50 +1,44 @@
 name: Deploy to GitHub Pages
 
 env:
-    PROJECT_PATH: demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj
+  PROJECT_PATH: demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj
-    OUTPUT_PATH: demo/Semi.Avalonia.Demo.Web/bin/Debug/net7.0/browser-wasm/AppBundle
+  OUTPUT_PATH: demo/Semi.Avalonia.Demo.Web/bin/Release/net8.0-browser/publish/wwwroot
 on:
   push:
-    branches: [ "deploy" ]
+    branches: [ "action/deploy" ]
   pull_request:
-    branches: [ "deploy" ]
+    branches: [ "action/deploy" ]
 
 jobs:
   deploy-to-github-pages:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+      - name: Checkout
+        uses: actions/checkout@v4.1.1
 
-    - name: Setup .NET Core SDK
+      - name: Setup .NET 8
-      uses: actions/setup-dotnet@v1.9.0
+        uses: actions/setup-dotnet@v4
+        with:
+          dotnet-version: 8.0.x
 
-    - name: Install wasm-tools
+      - name: Install wasm-tools
-      run: dotnet workload install wasm-tools wasm-experimental
+        run: dotnet workload install wasm-tools
 
-    - name: Install DotNetCompress
+      - name: Publish .NET Project
-      run: dotnet tool install --global DotNetCompress --version 2.0.0 --no-cache
+        run: dotnet publish $PROJECT_PATH -c Release --nologo
 
-    - name: Publish .NET Project
+      - name: Change base-tag in index.html
-      run: dotnet publish $PROJECT_PATH -c Debug -o debug --nologo
+        run: sed -i 's/<base href="\/" \/>/<base href="\/Semi.Avalonia\/" \/>/g' $OUTPUT_PATH/index.html
 
-    - name: Change base-tag in index.html
+      - name: copy index.html to 404.html
-      run: sed -i 's/<base href="\/" \/>/<base href="\/Semi.Avalonia\/" \/>/g' $OUTPUT_PATH/index.html
+        run: cp $OUTPUT_PATH/index.html $OUTPUT_PATH/404.html
 
-    - name: copy index.html to 404.html
+      - name: Add .nojekyll file
-      run: cp $OUTPUT_PATH/index.html $OUTPUT_PATH/404.html
+        run: touch $OUTPUT_PATH/.nojekyll
 
-    - name: Compress Output using Brotli
+      - name: Commit wwwroot to GitHub Pages
-      run: DotNetCompress -d $OUTPUT_PATH -p "*.dll" "*.js" "*.wasm" --format br --threads 4
+        uses: JamesIves/github-pages-deploy-action@v4.5.0
-
+        with:
-    - name: Compress Output using GZip
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      run: DotNetCompress -d $OUTPUT_PATH -p "*.dll" "*.js" "*.wasm" --format gz --threads 4
+          BRANCH: gh-pages
-
+          FOLDER: ${{ env.OUTPUT_PATH }}
-    - name: Add .nojekyll file
-      run: touch $OUTPUT_PATH/.nojekyll
-
-    - name: Commit wwwroot to GitHub Pages
-      uses: JamesIves/github-pages-deploy-action@4.1.7
-      with:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        BRANCH: gh-pages
-        FOLDER: ${{ env.OUTPUT_PATH }}

.github/workflows/pack.yml

@@ -0,0 +1,32 @@
+name: Pack Nuget
+
+on:
+  push:
+    branches: [ "action/pack" ]
+  pull_request:
+    branches: [ "action/pack" ]
+
+jobs:
+  nuget:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4.1.1
+
+      - name: Nuget Semi.Avalonia
+        run: dotnet pack ./src/Semi.Avalonia -o ./nugets
+
+      - name: Nuget Semi.Avalonia.ColorPicker
+        run: dotnet pack ./src/Semi.Avalonia.ColorPicker  -o ./nugets
+
+      - name: Nuget Semi.Avalonia.DataGrid
+        run: dotnet pack ./src/Semi.Avalonia.DataGrid  -o ./nugets
+
+      - name: Nuget Semi.Avalonia.TreeDataGrid
+        run: dotnet pack ./src/Semi.Avalonia.TreeDataGrid  -o ./nugets
+
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v4.3.1
+        with:
+          name: nugets
+          path: ./nugets

.github/workflows/publish.yml

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

.run/SC-Single.run.xml

@@ -1,6 +1,6 @@
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="SC-Single" type="DotNetFolderPublish" factoryName="Publish to folder">
-    <riderPublish configuration="Release" include_native_libs_for_self_extract="true" platform="Any CPU" produce_single_file="true" runtime="win-x64" self_contained="true" target_folder="$PROJECT_DIR$/demo/Semi.Avalonia.Demo.Desktop/bin/Release/net7.0/win-x64/publish" target_framework="net7.0" uuid_high="3088527218258560748" uuid_low="-8649338673481336678" />
+    <riderPublish configuration="Release" include_native_libs_for_self_extract="true" platform="Any CPU" produce_single_file="true" runtime="win-x64" self_contained="true" target_folder="$PROJECT_DIR$/demo/Semi.Avalonia.Demo.Desktop/bin/Release/net8.0/win-x64/publish" target_framework="net8.0" uuid_high="3088527218258560748" uuid_low="-8649338673481336678" />
     <method v="2" />
   </configuration>
 </component>

README.md

@@ -9,7 +9,7 @@ Avalonia Theme inspired by Semi Design
 
 ## Installation
 ```bash
-dotnet add package Semi.Avalonia --version 11.0.1
+dotnet add package Semi.Avalonia
 ```
 Include Semi Design Styles in application:
 
@@ -23,9 +23,9 @@ That's all.
 
 ColorPicker, DataGrid and TreeDataGrid are distributed in separated packages. Please install if you need. 
 ```bash
-dotnet add package Semi.Avalonia.ColorPicker --version 11.0.1
+dotnet add package Semi.Avalonia.ColorPicker
-dotnet add package Semi.Avalonia.DataGrid --version 11.0.1
+dotnet add package Semi.Avalonia.DataGrid
-dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.1
+dotnet add package Semi.Avalonia.TreeDataGrid
 ```
 ```xaml
 <Application.Styles>
@@ -44,7 +44,8 @@ https://github.com/irihitech/Semi.Avalonia/releases
 
 | Semi Design Version | Avalonia Version |
 |:--------------------|:-----------------|
-| 11.0.x              | 11.0.x           |
+| 11.0.7              | 11.0.7           |
+| 11.0.1              | <=11.0.6         |
 
 ## TODO
 * FocusAdorner

demo/Directory.Build.props

@@ -1,6 +1,6 @@
 <Project>
   <PropertyGroup>
     <Nullable>enable</Nullable>
-    <AvaloniaVersion>11.0.0</AvaloniaVersion>
+    <AvaloniaVersion>11.0.7</AvaloniaVersion>
   </PropertyGroup>
 </Project>

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

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
     <PropertyGroup>
         <OutputType>Exe</OutputType>
-        <TargetFramework>net7.0-android</TargetFramework>
+        <TargetFramework>net8.0-android</TargetFramework>
         <SupportedOSPlatformVersion>21</SupportedOSPlatformVersion>
         <ApplicationId>com.irihitech.Semi.Avalonia</ApplicationId>
         <ApplicationVersion>1</ApplicationVersion>
@@ -15,11 +15,11 @@
     <Import Project="../Directory.Build.props" />
 
     <ItemGroup>
-      <PackageReference Include="Avalonia.Android" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia.Android" Version="$(AvaloniaVersion)" />
     </ItemGroup>
 
     <ItemGroup>
-      <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
+        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
     </ItemGroup>
-    
+
 </Project>

demo/Semi.Avalonia.Demo.Desktop/Roots.xml

@@ -0,0 +1,3 @@
+<linker>
+    <assembly fullname="Semi.Avalonia.Demo" preserve="All"/>
+</linker>

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

@@ -1,22 +1,25 @@
 <Project Sdk="Microsoft.NET.Sdk">
     <PropertyGroup>
         <OutputType>WinExe</OutputType>
-        <TargetFramework>net7.0</TargetFramework>
+        <TargetFramework>net8.0</TargetFramework>
         <Nullable>enable</Nullable>
         <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
         <!-- Uncomment below to enable Native AOT compilation-->
-        <!--
+        <!--<PublishAot>true</PublishAot>-->
-        <PublishAot>true</PublishAot>
+        <!--<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>-->
-        <IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>
+    </PropertyGroup>
-        -->
+
+    <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
+        <IsTrimmable>true</IsTrimmable>
+        <PublishTrimmed>true</PublishTrimmed>
     </PropertyGroup>
 
     <PropertyGroup>
         <ApplicationManifest>app.manifest</ApplicationManifest>
     </PropertyGroup>
-    
+
     <ItemGroup>
-        <RdXmlFile Include="rd.xml" />
+        <TrimmerRootDescriptor Include="Roots.xml" />
     </ItemGroup>
 
     <ItemGroup>

demo/Semi.Avalonia.Demo.Desktop/rd.xml

@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<Directives>
-    <!--
-        This file is part of RdXmlLibrary project.
-        Visit https://github.com/kant2002/rdxmllibrary for latest version.
-        If you have modifications specific to this Nuget package,
-        please contribute back.
-    -->
-    <Application>
-        <Assembly Name="Avalonia.Markup.Xaml" Dynamic="Required All"/>
-        <Assembly Name="Semi.Avalonia" Dynamic="Required All"/>
-        <Assembly Name="Semi.Avalonia.DataGrid" Dynamic="Required All"/>
-        <Assembly Name="Semi.Avalonia.ColorPicker" Dynamic="Required All"/>
-        <Assembly Name="Semi.Avalonia.Demo" Dynamic="Required All"/>
-    </Application>
-</Directives>

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

@@ -1,59 +1,56 @@
-using Avalonia;
+using System;
-using Avalonia.Dialogs;
+using System.Globalization;
-using Avalonia.Media;
-using System;
 using System.Linq;
 using System.Threading;
+using Avalonia;
+using Avalonia.Dialogs;
 
-namespace Semi.Avalonia.Demo.Drm
+namespace Semi.Avalonia.Demo.Drm;
+
+class Program
 {
-    internal class Program
+    // Initialization code. Don't use any Avalonia, third-party APIs or any
+    // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
+    // yet and stuff might break.
+    [STAThread]
+    public static int Main(string[] args)
     {
-        // Initialization code. Don't use any Avalonia, third-party APIs or any
+        var builder = BuildAvaloniaApp();
-        // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
+
-        // yet and stuff might break.
+        double GetScaling()
-        [STAThread]
-        public static void Main(string[] args)
         {
-            var builder = BuildAvaloniaApp();
+            var idx = Array.IndexOf(args, "--scaling");
-            builder.With(new FontManagerOptions
+            if (idx != 0 && args.Length > idx + 1 &&
-            {
+                double.TryParse(args[idx + 1], NumberStyles.Any, CultureInfo.InvariantCulture, out var scaling))
-                FontFallbacks = new[]
+                return scaling;
-                {
+            return 1;
-                new FontFallback
-                {
-                    FontFamily = new FontFamily("Microsoft YaHei")
-                }
-            }
-            });
-            if (args.Contains("--drm"))
-            {
-                SilenceConsole();
-                builder.StartLinuxDrm(args: args, card: "/dev/dri/card0", scaling: 1);
-            }
-            else
-            {
-                builder.StartWithClassicDesktopLifetime(args);
-            }
         }
 
-        // Avalonia configuration, don't remove; also used by visual designer.
+        if (args.Contains("--drm"))
-        public static AppBuilder BuildAvaloniaApp()
-            => AppBuilder.Configure<App>()
-                .UseManagedSystemDialogs()
-                .UsePlatformDetect()
-                .With(new Win32PlatformOptions())
-                .LogToTrace();
-
-        private static void SilenceConsole()
         {
-            new Thread(() =>
+            SilenceConsole();
+            return builder.StartLinuxDrm(args, scaling: GetScaling());
+        }
+
+        return builder.StartWithClassicDesktopLifetime(args);
+    }
+
+    // Avalonia configuration, don't remove; also used by visual designer.
+    public static AppBuilder BuildAvaloniaApp()
+        => AppBuilder.Configure<App>()
+            .UseManagedSystemDialogs()
+            .UsePlatformDetect()
+            .With(new Win32PlatformOptions())
+            .LogToTrace();
+
+    private static void SilenceConsole()
+    {
+        new Thread(() =>
             {
                 Console.CursorVisible = false;
                 while (true)
                     Console.ReadKey(true);
             })
             { IsBackground = true }.Start();
-        }
     }
 }

demo/Semi.Avalonia.Demo.Drm/README.md

@@ -0,0 +1,162 @@
+# DRM Start Steps
+
+[中文](README_CN.md)
+
+(Ubuntu 20.04 live server linux-x64 Virtual Machine Test Success)  
+(Orange Pi Zero2 Ubuntu20.04-arm64 Test Success)
+
+[Avalonia Official Reference Document](https://docs.avaloniaui.net/docs/next/guides/platforms/rpi/running-on-raspbian-lite-via-drm)
+
+## Setup Running Environment
+
+1. Run the following commands on the Linux side
+```bash
+sudo apt update
+sudo apt upgrade
+sudo reboot
+sudo apt-get install libgbm1 libgl1-mesa-dri libegl1-mesa libinput10
+```
+
+2. Install the test tool (if a colored cube appears, the environment is installed)
+```bash
+sudo apt-get install kmscube
+sudo kmscube
+```
+
+3. [Install .NET Runtime](https://learn.microsoft.com/dotnet/core/install/linux?WT.mc_id=dotnet-35129-website)
+
+4. Add the Avalonia.LinuxFramebuffer package in NuGet
+
+```bash
+dotnet add package Avalonia.LinuxFramebuffer
+```
+
+5. Add StartLinuxDrm code
+
+```csharp
+public static int Main(string[] args)
+{
+    var builder = BuildAvaloniaApp();
+    if (args.Contains("--drm"))
+    {
+        SilenceConsole();
+        // By default, Avalonia will try to detect output card automatically.
+        // But you can specify one, for example "/dev/dri/card1".
+        return builder.StartLinuxDrm(args: args, card: null, scaling: 1.0);
+    }
+
+    return builder.StartWithClassicDesktopLifetime(args);
+}
+
+private static void SilenceConsole()
+{
+    new Thread(() =>
+        {
+            Console.CursorVisible = false;
+            while (true)
+                Console.ReadKey(true);
+        })
+        { IsBackground = true }.Start();
+}
+```
+
+6. Publish the app to Linux
+
+```bash
+dotnet publish demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj -c Release -r linux-x64 --sc -p:PublishSingleFile=true -p:IncludeNativeLibrariesForSelfExtract=true
+```
+
+Add the following code to the csproj file for AOT publishing
+
+```xml
+<PropertyGroup>
+    <PublishAot>true</PublishAot>
+    <IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>
+</PropertyGroup>
+```
+
+```bash
+dotnet publish demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj -c Release -r linu-x64
+```
+
+7. Run the program
+
+```bash
+sudo ./Semi.Avalonia.Demo.Drm --drm
+```
+
+## Troubleshooting
+
+1. Error message
+
+> Unhandled exception. Avalonia.Markup.Xaml.XamlLoadException: No precompiled XAML found for avares://Semi.Avalonia/Themes/Light/Light.axaml (baseUri: avares://Semi.Avalonia/Themes/Index.axaml), make sure to specify x:Class and include your XAML file as AvaloniaResource
+
+Solution:
+
+If you use the Semi release file, do not trim it, otherwise an error will occur.
+
+24.8.18 update: This issue has been fixed.
+
+2. Error message
+
+> Unhandled exception. System.TypeInitializationException: The type initializer for 'SkiaSharp.SKImageInfo' threw an exception.**
+    **--->System.DllNotFoundException: Unable to load shared library 'libSkiaSharp' or one of its dependencies.In order to help diagnose loading problems, consider setting the LD_DEBUG environment variable: liblibSkiaSharp: cannot open shared object file: No such file or directory
+    at SkiaSharp.SkiaApi.sk_colortype_get_default_8888()
+    at SkiaSharp.SKImageInfo..cctor()
+
+Solution:
+
+Linux CLI installation
+
+```bash
+sudo apt-get install -y libfontconfig1  
+```
+[Reference](https://github.com/mono/SkiaSharp/issues/509)
+
+3. Error message
+
+> Permission denied
+
+Solution:
+
+add permission
+
+```bash
+sudo chmod +x ./Semi.Avalonia.Demo.Drm
+```
+
+4. Error message
+
+> Unhandled exception. System.ComponentModel.Win32Exception (95): drmModeGetResources failed
+at Avalonia.LinuxFramebuffer.Output.DrmResources..ctor(Int32 fd, Boolean connectorsForceProbe) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 91
+at Avalonia.LinuxFramebuffer.Output.DrmCard.GetResources(Boolean connectorsForceProbe) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 171
+at Avalonia.LinuxFramebuffer.Output.DrmOutput..ctor(String path, Boolean connectorsForceProbe, DrmOutputOptions options) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmOutput.cs:line 60
+at LinuxFramebufferPlatformExtensions.StartLinuxDrm(AppBuilder builder, String[] args, String card, Double scaling, IInputBackend inputBackend) in /_/src/Linux/Avalonia.LinuxFramebuffer/LinuxFramebufferPlatform.cs:line 166
+at Semi.Avalonia.Demo.Drm.Program.Main(String[] args)
+
+Solution:
+
+The `program.cs` graphics card path is incorrect, it may not be `dev/dri/card1`, see if there are other graphics cards in the `dev/dri` directory such as `card0`.
+
+24.8.18 update: Avalonia will now automatically detect the graphics card path, so you don't need to specify the graphics card path.
+
+```csharp
+return builder.StartLinuxDrm(args: args, card: null, scaling: 1.0);
+```
+
+5. Error message
+>Unhandled exception. System.ComponentModel.Win32Exception (2): Couldn't open /dev/dri/card1
+at Avalonia.LinuxFramebuffer.Output.DrmCard..ctor(String ) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 167
+at Avalonia.LinuxFramebuffer.Output.DrmOutput..ctor(String , Boolean , DrmOutputOptions ) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmOutput.cs:line 58
+at LinuxFramebufferPlatformExtensions.StartLinuxDrm(AppBuilder, String[], String , Double , IInputBackend ) in /_/src/Linux/Avalonia.LinuxFramebuffer/LinuxFramebufferPlatform.cs:line 166
+at Semi.Avalonia.Demo.Drm.Program.Main(String[])
+
+Solution:
+
+Unable to open `/dev/dri/card1`, may be the graphics card is mounted to another folder.
+
+24.8.18 update: Avalonia will now automatically detect the graphics card path, so you don't need to specify the graphics card path.
+
+```csharp
+return builder.StartLinuxDrm(args: args, card: null, scaling: 1.0);
+```

demo/Semi.Avalonia.Demo.Drm/README_CN.md

@@ -0,0 +1,162 @@
+# DRM启动步骤
+
+[English](README.md)
+
+(Ubuntu 20.04 live server linux-x64 虚拟机测试成功)  
+(Orange Pi Zero2 Ubuntu20.04-arm64 测试成功)
+
+[Avalonia 官方参考文档](https://docs.avaloniaui.net/docs/next/guides/platforms/rpi/running-on-raspbian-lite-via-drm)
+
+## 搭建运行环境
+
+1. Linux端运行命令
+```bash
+sudo apt update
+sudo apt upgrade
+sudo reboot
+sudo apt-get install libgbm1 libgl1-mesa-dri libegl1-mesa libinput10
+```
+
+2. 安装测试工具(出现一个彩色立方体说明环境安装完成)  
+```bash
+sudo apt-get install kmscube
+sudo kmscube
+```
+
+3. [安装.net运行时](https://learn.microsoft.com/dotnet/core/install/linux?WT.mc_id=dotnet-35129-website)
+
+4. NuGet里面添加Avalonia.LinuxFramebuffer包
+
+```bash
+dotnet add package Avalonia.LinuxFramebuffer
+```
+
+5. 添加StartLinuxDrm代码
+
+```csharp
+public static int Main(string[] args)
+{
+    var builder = BuildAvaloniaApp();
+    if (args.Contains("--drm"))
+    {
+        SilenceConsole();
+        // By default, Avalonia will try to detect output card automatically.
+        // But you can specify one, for example "/dev/dri/card1".
+        return builder.StartLinuxDrm(args: args, card: null, scaling: 1.0);
+    }
+
+    return builder.StartWithClassicDesktopLifetime(args);
+}
+
+private static void SilenceConsole()
+{
+    new Thread(() =>
+        {
+            Console.CursorVisible = false;
+            while (true)
+                Console.ReadKey(true);
+        })
+        { IsBackground = true }.Start();
+}
+```
+
+6. 发布程序到Linux
+
+```bash
+dotnet publish demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj -c Release -r linux-x64 --sc -p:PublishSingleFile=true -p:IncludeNativeLibrariesForSelfExtract=true
+```
+
+AOT发布需要在csproj文件中添加以下代码
+
+```xml
+<PropertyGroup>
+    <PublishAot>true</PublishAot>
+    <IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>
+</PropertyGroup>
+```
+
+```bash
+dotnet publish demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj -c Release -r linu-x64
+```
+
+7. 运行程序
+
+```bash
+sudo ./Semi.Avalonia.Demo.Drm --drm
+```
+
+## 报错处理
+
+1. 报错内容
+
+> Unhandled exception. Avalonia.Markup.Xaml.XamlLoadException: No precompiled XAML found for avares://Semi.Avalonia/Themes/Light/Light.axaml (baseUri: avares://Semi.Avalonia/Themes/Index.axaml), make sure to specify x:Class and include your XAML file as AvaloniaResource
+
+解决方法：
+
+如果使用Semi发布文件不要裁剪，如果裁剪会报错。
+
+24.8.18更新：现在已经修复了这个问题。
+
+2. 报错内容
+
+> Unhandled exception. System.TypeInitializationException: The type initializer for 'SkiaSharp.SKImageInfo' threw an exception.**
+    **--->System.DllNotFoundException: Unable to load shared library 'libSkiaSharp' or one of its dependencies.In order to help diagnose loading problems, consider setting the LD_DEBUG environment variable: liblibSkiaSharp: cannot open shared object file: No such file or directory
+    at SkiaSharp.SkiaApi.sk_colortype_get_default_8888()
+    at SkiaSharp.SKImageInfo..cctor()
+
+解决方法：
+
+Linux 命令行安装
+
+```bash
+sudo apt-get install -y libfontconfig1  
+```
+
+[参考网址](https://github.com/mono/SkiaSharp/issues/509)
+
+3. 报错内容
+
+> Permission denied
+
+解决方法：
+
+添加执行权限
+```bash
+sudo chmod +x ./Semi.Avalonia.Demo.Drm
+```
+
+4. 报错内容
+
+> Unhandled exception. System.ComponentModel.Win32Exception (95): drmModeGetResources failed
+at Avalonia.LinuxFramebuffer.Output.DrmResources..ctor(Int32 fd, Boolean connectorsForceProbe) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 91
+at Avalonia.LinuxFramebuffer.Output.DrmCard.GetResources(Boolean connectorsForceProbe) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 171
+at Avalonia.LinuxFramebuffer.Output.DrmOutput..ctor(String path, Boolean connectorsForceProbe, DrmOutputOptions options) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmOutput.cs:line 60
+at LinuxFramebufferPlatformExtensions.StartLinuxDrm(AppBuilder builder, String[] args, String card, Double scaling, IInputBackend inputBackend) in /_/src/Linux/Avalonia.LinuxFramebuffer/LinuxFramebufferPlatform.cs:line 166
+at Semi.Avalonia.Demo.Drm.Program.Main(String[] args)
+
+解决方法：
+
+`program.cs`的显卡路径错误，可能不是`dev/dri/card1`，看在`dev/dri`目录下有无其他的显卡如`card0`。
+
+24.8.18更新：现在Avalonia会自动检测显卡路径，所以不需要指定显卡路径。
+
+```csharp
+return builder.StartLinuxDrm(args: args, card: null, scaling: 1.0);
+```
+
+5. 报错内容
+>Unhandled exception. System.ComponentModel.Win32Exception (2): Couldn't open /dev/dri/card1
+at Avalonia.LinuxFramebuffer.Output.DrmCard..ctor(String ) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 167
+at Avalonia.LinuxFramebuffer.Output.DrmOutput..ctor(String , Boolean , DrmOutputOptions ) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmOutput.cs:line 58
+at LinuxFramebufferPlatformExtensions.StartLinuxDrm(AppBuilder, String[], String , Double , IInputBackend ) in /_/src/Linux/Avalonia.LinuxFramebuffer/LinuxFramebufferPlatform.cs:line 166
+at Semi.Avalonia.Demo.Drm.Program.Main(String[])
+
+解决办法：
+
+找不到显卡路径`dev/dri/card1`，可能是显卡挂载到别的文件夹下了。
+
+24.8.18更新：现在Avalonia会自动检测显卡路径，所以不需要指定显卡路径。
+
+```csharp
+return builder.StartLinuxDrm(args: args, card: null, scaling: 1.0);
+```

demo/Semi.Avalonia.Demo.Drm/Roots.xml

@@ -0,0 +1,3 @@
+<linker>
+    <assembly fullname="Semi.Avalonia.Demo" preserve="All"/>
+</linker>

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

@@ -1,22 +1,35 @@
 <Project Sdk="Microsoft.NET.Sdk">
-  <PropertyGroup>
+    <PropertyGroup>
-    <OutputType>WinExe</OutputType>
+        <OutputType>WinExe</OutputType>
-    <TargetFramework>net7.0</TargetFramework>
+        <TargetFramework>net8.0</TargetFramework>
-    <Nullable>enable</Nullable>
+        <Nullable>enable</Nullable>
-    <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
+        <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
-    <ApplicationManifest>app.manifest</ApplicationManifest>
+        <!-- Uncomment below to enable Native AOT compilation-->
-  </PropertyGroup>
+        <!--<PublishAot>true</PublishAot>-->
+        <!--<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>-->
+    </PropertyGroup>
 
+    <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
+        <IsTrimmable>true</IsTrimmable>
+        <PublishTrimmed>true</PublishTrimmed>
+    </PropertyGroup>
 
-  <ItemGroup>
+    <PropertyGroup>
-    <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
+        <ApplicationManifest>app.manifest</ApplicationManifest>
-    <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
+    </PropertyGroup>
-    <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
-    <PackageReference Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)" />
-  </ItemGroup>
 
+    <ItemGroup>
+        <TrimmerRootDescriptor Include="Roots.xml" />
+    </ItemGroup>
 
-  <ItemGroup>
+    <ItemGroup>
-    <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
+        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
-  </ItemGroup>
+        <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)" />
+    </ItemGroup>
+
+    <ItemGroup>
+        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
+    </ItemGroup>
 </Project>

demo/Semi.Avalonia.Demo.Drm/使用方法.md

@@ -1,51 +0,0 @@
-# DRM启动步骤
-
-(Ubuntu18.04Server版本 虚拟机测试OK)
-
-Avalonia官方参考文档：https://docs.avaloniaui.net/docs/next/guides/platforms/rpi/running-on-raspbian-lite-via-drm
-
-1.Linux端运行命令
- sudo apt update
- sudo apt upgrade
- sudo reboot
- sudo apt - get install libgbm1 libgl1 - mesa - dri libegl1 - mesa libinput10
-
-2.安装测试工具测试(出现一个彩色立方体说明环境安装完成)
- sudo apt-get install kmscube
- sudo kmscube
-
-3.安装.net运行时(参考网址：https://learn.microsoft.com/zh-cn/dotnet/core/install/linux?WT.mc_id=dotnet-35129-website)
-
-4.新建一个Avalonia项目，nuget里面添加Avalonia.LinuxFramebuffer包
-
-5.添加StartLinuxDrm代码(不知道怎么添加看Semi.Avalonia.Demo.Drm项目代码)
-
-6.发布程序到Linux(安装.net，怎么运行这些省略)
-            
-7.运行 ./Semi.Avalonia.Demo.Drm --drm
-
-## 报错处理：
-
-1. 报错内容
-
->Unhandled exception. Avalonia.Markup.Xaml.XamlLoadException: No precompiled XAML found for avares://Semi.Avalonia/Themes/Light/Light.axaml (baseUri: avares://Semi.Avalonia/Themes/Index.axaml), make sure to specify x:Class and include your XAML file as AvaloniaResource
-
- 解决方法：
-    如果使用Semi发布文件不要裁剪，如果裁剪会报错
-         
-
-2. 报错内容
->Unhandled exception. System.TypeInitializationException: The type initializer for 'SkiaSharp.SKImageInfo' threw an exception.**
-    **--->System.DllNotFoundException: Unable to load shared library 'libSkiaSharp' or one of its dependencies.In order to help diagnose loading problems, consider setting the LD_DEBUG environment variable: liblibSkiaSharp: cannot open shared object file: No such file or directory
-    at SkiaSharp.SkiaApi.sk_colortype_get_default_8888()
-    at SkiaSharp.SKImageInfo..cctor()
-
-解决方法：
-    Linux命令行安装一下 apt-get install -y libfontconfig1
-    参考网址：https://github.com/mono/SkiaSharp/issues/509
-
-3. 报错内容
->Permission denied
-
-解决方法：
-    sudo chmod +x ./Semi.Avalonia.Demo.Drm

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

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

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

@@ -7,9 +7,10 @@ using Avalonia.Browser;
 
 namespace Semi.Avalonia.Demo.Web;
 
-internal partial class Program
+internal sealed partial class Program
 {
-    private static async Task Main(string[] args) => await BuildAvaloniaApp()
+    private static Task Main(string[] args) => BuildAvaloniaApp()
+        .WithSourceHanSansCNFont()
         .StartBrowserAppAsync("out");
 
     public static AppBuilder BuildAvaloniaApp()

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

@@ -1,20 +1,18 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk.WebAssembly">
     <PropertyGroup>
-        <TargetFramework>net7.0</TargetFramework>
-        <RuntimeIdentifier>browser-wasm</RuntimeIdentifier>
-        <WasmMainJSPath>AppBundle\main.js</WasmMainJSPath>
         <OutputType>Exe</OutputType>
+        <TargetFramework>net8.0-browser</TargetFramework>
     </PropertyGroup>
 
     <ItemGroup>
-        <WasmExtraFilesToDeploy Include="AppBundle\**" />
+        <AvaloniaResource Include="Assets\**"/>
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Browser" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia.Browser" Version="$(AvaloniaVersion)"/>
     </ItemGroup>
 
     <ItemGroup>
-        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
+        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj"/>
     </ItemGroup>
 </Project>

demo/Semi.Avalonia.Demo.Web/wwwroot/index.html

@@ -7,8 +7,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <base href="/" />
     <link rel="modulepreload" href="./main.js" />
-    <link rel="modulepreload" href="./dotnet.js" />
+    <link rel="modulepreload" href="./_framework/dotnet.js" />
-    <link rel="modulepreload" href="./avalonia.js" />
+    <link rel="modulepreload" href="./_framework/avalonia.js" />
     <link rel="stylesheet" href="./app.css" />
 </head>
 

demo/Semi.Avalonia.Demo.Web/wwwroot/main.js

@@ -1,4 +1,4 @@
-import { dotnet } from './dotnet.js'
+import { dotnet } from './_framework/dotnet.js'
 
 const is_browser = typeof window != "undefined";
 if (!is_browser) throw new Error(`Expected to be running in a browser`);
@@ -10,4 +10,4 @@ const dotnetRuntime = await dotnet
 
 const config = dotnetRuntime.getConfig();
 
-await dotnetRuntime.runMainAndExit(config.mainAssemblyName, [window.location.search]);
+await dotnetRuntime.runMain(config.mainAssemblyName, [window.location.search]);

demo/Semi.Avalonia.Demo/App.axaml

@@ -1,9 +1,13 @@
 <Application
     x:Class="Semi.Avalonia.Demo.App"
     xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:semi="https://irihi.tech/semi">
     <Application.Styles>
+        <!-- You can still reference in old way. 
         <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
+         -->
+        <semi:SemiTheme Locale="zh-CN"/>
         <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
         <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
     </Application.Styles>

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

@@ -5,7 +5,7 @@
     xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     x:CompileBindings="True"
     x:DataType="viewModels:ColorItemViewModel">
-    <PathGeometry x:Key="CopyIcon">M5 7C3.89543 7 3 7.89543 3 9V19C3 20.1046 3.89543 21 5 21H15C16.1046 21 17 20.1046 17 19V9C17 7.89543 16.1046 7 15 7H5Z,M7 4C7 2.89543 7.89543 2 9 2H20C21.1046 2 22 2.89543 22 4V15C22 16.1046 21.1046 17 20 17H19V8C19 6 18 5 16 5H7V4Z</PathGeometry>
+    <StreamGeometry x:Key="CopyIcon">M5 7C3.89543 7 3 7.89543 3 9V19C3 20.1046 3.89543 21 5 21H15C16.1046 21 17 20.1046 17 19V9C17 7.89543 16.1046 7 15 7H5Z,M7 4C7 2.89543 7.89543 2 9 2H20C21.1046 2 22 2.89543 22 4V15C22 16.1046 21.1046 17 20 17H19V8C19 6 18 5 16 5H7V4Z</StreamGeometry>
     <ControlTheme x:Key="{x:Type controls:ColorDetailControl}" TargetType="controls:ColorDetailControl">
         <!--  Add Resources Here  -->
         <Setter Property="controls:ColorDetailControl.Template">

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

@@ -4,114 +4,176 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    d:DesignHeight="450"
-    d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel HorizontalAlignment="Left" Spacing="20">
+    <ScrollViewer>
-        <TextBlock>Light (Default)</TextBlock>
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
-        <StackPanel Orientation="Horizontal" Spacing="20">
+            <StackPanel.Styles>
-            <Button Classes="Primary">Primary</Button>
+                <Style Selector="SplitButton">
-            <Button Classes="Secondary">Secondary</Button>
+                    <Setter Property="Flyout">
-            <Button Classes="Tertiary">Tertiary</Button>
+                        <MenuFlyout Placement="BottomEdgeAlignedRight">
-            <Button Classes="Success">Success</Button>
+                            <MenuItem Header="Submit All" />
-            <Button Classes="Warning">Warning</Button>
+                            <MenuItem Header="Submit Updated" />
-            <Button Classes="Danger">Danger</Button>
+                        </MenuFlyout>
-            <Button Classes="Primary" IsEnabled="False">Danger</Button>
+                    </Setter>
+                </Style>
+                <Style Selector="DropDownButton">
+                    <Setter Property="Flyout">
+                        <MenuFlyout Placement="BottomEdgeAlignedRight">
+                            <MenuItem Header="Submit All" />
+                            <MenuItem Header="Submit Updated" />
+                        </MenuFlyout>
+                    </Setter>
+                </Style>
+                <Style Selector="ToggleSplitButton">
+                    <Setter Property="Flyout">
+                        <MenuFlyout Placement="BottomEdgeAlignedRight">
+                            <MenuItem Header="Submit All" />
+                            <MenuItem Header="Submit Updated" />
+                        </MenuFlyout>
+                    </Setter>
+                </Style>
+            </StackPanel.Styles>
+
+            <TextBlock>Light (Default)</TextBlock>
+            <StackPanel Orientation="Horizontal" Spacing="20">
+                <Button Classes="Primary">Primary</Button>
+                <Button Classes="Secondary">Secondary</Button>
+                <Button Classes="Tertiary">Tertiary</Button>
+                <Button Classes="Success">Success</Button>
+                <Button Classes="Warning">Warning</Button>
+                <Button Classes="Danger">Danger</Button>
+                <Button Classes="Danger" IsEnabled="False">Disabled</Button>
+            </StackPanel>
+            <TextBlock>Solid</TextBlock>
+            <StackPanel Orientation="Horizontal" Spacing="20">
+                <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
+                <Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
+                <Button Classes="Tertiary" Theme="{DynamicResource SolidButton}">Tertiary</Button>
+                <Button Classes="Success" Theme="{DynamicResource SolidButton}">Success</Button>
+                <Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
+                <Button Classes="Danger" Theme="{DynamicResource SolidButton}">Danger</Button>
+                <Button
+                    Classes="Danger"
+                    IsEnabled="False"
+                    Theme="{DynamicResource SolidButton}">
+                    Disabled
+                </Button>
+            </StackPanel>
+            <TextBlock>Outline</TextBlock>
+            <StackPanel Orientation="Horizontal" Spacing="20">
+                <Button Classes="Primary" Theme="{DynamicResource OutlineButton}">Primary</Button>
+                <Button Classes="Secondary" Theme="{DynamicResource OutlineButton}">Secondary</Button>
+                <Button Classes="Tertiary" Theme="{DynamicResource OutlineButton}">Tertiary</Button>
+                <Button Classes="Success" Theme="{DynamicResource OutlineButton}">Success</Button>
+                <Button Classes="Warning" Theme="{DynamicResource OutlineButton}">Warning</Button>
+                <Button Classes="Danger" Theme="{DynamicResource OutlineButton}">Danger</Button>
+                <Button Classes="Danger" Theme="{DynamicResource OutlineButton}" IsEnabled="False">Disabled</Button>
+            </StackPanel>
+            <TextBlock>Borderless</TextBlock>
+            <StackPanel Orientation="Horizontal" Spacing="20">
+                <Button Classes="Primary" Theme="{DynamicResource BorderlessButton}">Primary</Button>
+                <Button Classes="Secondary" Theme="{DynamicResource BorderlessButton}">Secondary</Button>
+                <Button Classes="Tertiary" Theme="{DynamicResource BorderlessButton}">Tertiary</Button>
+                <Button Classes="Success" Theme="{DynamicResource BorderlessButton}">Success</Button>
+                <Button Classes="Warning" Theme="{DynamicResource BorderlessButton}">Warning</Button>
+                <Button Classes="Danger" Theme="{DynamicResource BorderlessButton}">Danger</Button>
+                <Button
+                    Classes="Danger"
+                    IsEnabled="False"
+                    Theme="{DynamicResource BorderlessButton}">
+                    Disabled
+                </Button>
+            </StackPanel>
+            <TextBlock>Disabled</TextBlock>
+            <StackPanel Background="{DynamicResource SemiColorBackground1}" Orientation="Horizontal" Spacing="20">
+                <Button IsEnabled="False">Light</Button>
+                <Button IsEnabled="False" Theme="{DynamicResource SolidButton}">Solid</Button>
+                <Button IsEnabled="False" Theme="{DynamicResource OutlineButton}">Outline</Button>
+                <Button IsEnabled="False" Theme="{DynamicResource BorderlessButton}">Borderless</Button>
+            </StackPanel>
+            <TextBlock>Size Classes</TextBlock>
+            <StackPanel Orientation="Horizontal" Spacing="20">
+                <Button Classes="Primary Small">Small</Button>
+                <Button Classes="Primary">Default</Button>
+                <Button Classes="Primary Large">Large</Button>
+            </StackPanel>
+
+            <TextBlock>DropDownButton</TextBlock>
+            <StackPanel Orientation="Horizontal" Spacing="8">
+                <DropDownButton Content="Primary" />
+                <DropDownButton Classes="Secondary" Content="Secondary" />
+                <DropDownButton Classes="Tertiary" Content="Tertiary" />
+                <DropDownButton Classes="Success" Content="Success" />
+                <DropDownButton Classes="Warning" Content="Warning" />
+                <DropDownButton Classes="Danger" Content="Danger" />
+                <DropDownButton
+                    Classes="Danger"
+                    Content="Disabled"
+                    IsEnabled="False" />
+            </StackPanel>
+            <StackPanel Orientation="Horizontal" Spacing="8">
+                <DropDownButton Content="Default" Classes="Success"/>
+                <DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success"/>
+                <DropDownButton Content="Outline" Theme="{DynamicResource OutlineDropDownButton}" Classes="Success"/>
+                <DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success"/>
+                <DropDownButton Content="Default" Classes="Success" IsEnabled="False"/>
+                <DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success" IsEnabled="False"/>
+                <DropDownButton Content="Outline" Theme="{DynamicResource OutlineDropDownButton}" Classes="Success" IsEnabled="False"/>
+                <DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success" IsEnabled="False"/>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal" Spacing="8">
+                <DropDownButton Classes="Small" Content="Small" />
+                <DropDownButton Content="Default" />
+                <DropDownButton Classes="Large" Content="Large" />
+            </StackPanel>
+
+            <TextBlock>SplitButton</TextBlock>
+            <StackPanel Orientation="Horizontal" Spacing="8">
+                <SplitButton Content="Primary" />
+                <SplitButton Classes="Secondary" Content="Secondary" />
+                <SplitButton Classes="Tertiary" Content="Tertiary" />
+                <SplitButton Classes="Success" Content="Success" />
+                <SplitButton Classes="Warning" Content="Warning" />
+                <SplitButton Classes="Danger" Content="Danger" />
+                <SplitButton Classes="Danger" Content="Disabled" IsEnabled="False" />
+            </StackPanel>
+            <StackPanel Orientation="Horizontal" Spacing="8">
+                <SplitButton Content="Default" Classes="Success" />
+                <SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}"  Classes="Success" />
+                <SplitButton Content="Outline" Theme="{DynamicResource OutlineSplitButton}" Classes="Success" />
+                <SplitButton Content="Borderless" Theme="{DynamicResource BorderlessSplitButton}" Classes="Success" />
+                <SplitButton Content="Default" Classes="Success" IsEnabled="False" />
+                <SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}" Classes="Success" IsEnabled="False" />
+                <SplitButton Content="Outline" Theme="{DynamicResource OutlineSplitButton}" Classes="Success" IsEnabled="False" />
+                <SplitButton Content="Borderless" Theme="{DynamicResource BorderlessSplitButton}" Classes="Success" IsEnabled="False" />
+            </StackPanel>
+            <StackPanel Orientation="Horizontal" Spacing="8">
+                <SplitButton Classes="Small" Content="Small" />
+                <SplitButton Content="Default" />
+                <SplitButton Classes="Large" Content="Large" />
+            </StackPanel>
+
+            <TextBlock>ToggleSplitButton</TextBlock>
+            <StackPanel Orientation="Horizontal" Spacing="8">
+                <ToggleSplitButton Content="Primary" />
+                <ToggleSplitButton Classes="Secondary" Content="Secondary" />
+                <ToggleSplitButton Classes="Tertiary" Content="Tertiary" />
+                <ToggleSplitButton Classes="Success" Content="Success" />
+                <ToggleSplitButton Classes="Warning" Content="Warning" />
+                <ToggleSplitButton Classes="Danger" Content="Danger" />
+                <ToggleSplitButton Classes="Danger" Content="Disabled" IsEnabled="False" />
+            </StackPanel>
+            <StackPanel Orientation="Horizontal" Spacing="8">
+                <ToggleSplitButton Content="Default" Classes="Success" />
+                <ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True"  />
+                <ToggleSplitButton Content="Default" Classes="Success" IsEnabled="False" />
+                <ToggleSplitButton Content="Checked" Classes="Success" IsChecked="True" IsEnabled="False" />
+            </StackPanel>
+            <StackPanel Orientation="Horizontal" Spacing="8">
+                <ToggleSplitButton Classes="Small" Content="Small" />
+                <ToggleSplitButton Content="Default" />
+                <ToggleSplitButton Classes="Large" Content="Large" />
+            </StackPanel>
         </StackPanel>
-        <TextBlock>Solid</TextBlock>
+    </ScrollViewer>
-        <StackPanel Orientation="Horizontal" Spacing="20">
+</UserControl>
-            <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
-            <Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
-            <Button Classes="Tertiary" Theme="{DynamicResource SolidButton}">Tertiary</Button>
-            <Button Classes="Success" Theme="{DynamicResource SolidButton}">Success</Button>
-            <Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
-            <Button Classes="Danger" Theme="{DynamicResource SolidButton}">Danger</Button>
-            <Button
-                Classes="Primary"
-                IsEnabled="False"
-                Theme="{DynamicResource SolidButton}">
-                Danger
-            </Button>
-        </StackPanel>
-        <TextBlock>Borderless</TextBlock>
-        <StackPanel Orientation="Horizontal" Spacing="20">
-            <Button Classes="Primary" Theme="{DynamicResource BorderlessButton}">Primary</Button>
-            <Button Classes="Secondary" Theme="{DynamicResource BorderlessButton}">Secondary</Button>
-            <Button Classes="Tertiary" Theme="{DynamicResource BorderlessButton}">Tertiary</Button>
-            <Button Classes="Success" Theme="{DynamicResource BorderlessButton}">Success</Button>
-            <Button Classes="Warning" Theme="{DynamicResource BorderlessButton}">Warning</Button>
-            <Button Classes="Danger" Theme="{DynamicResource BorderlessButton}">Danger</Button>
-            <Button
-                Classes="Primary"
-                IsEnabled="False"
-                Theme="{DynamicResource BorderlessButton}">
-                Danger
-            </Button>
-        </StackPanel>
-        <TextBlock>DropDownButton</TextBlock>
-        <StackPanel Orientation="Horizontal" Spacing="8">
-            <DropDownButton Content="Submit">
-                <DropDownButton.Flyout>
-                    <MenuFlyout Placement="BottomEdgeAlignedRight">
-                        <MenuItem Header="Submit All" />
-                        <MenuItem Header="Submit Updated" />
-                    </MenuFlyout>
-                </DropDownButton.Flyout>
-            </DropDownButton>
-            <DropDownButton Content="Submit" Theme="{DynamicResource SolidDropDownButton}">
-                <DropDownButton.Flyout>
-                    <MenuFlyout Placement="BottomEdgeAlignedRight">
-                        <MenuItem Header="Submit All" />
-                        <MenuItem Header="Submit Updated" />
-                    </MenuFlyout>
-                </DropDownButton.Flyout>
-            </DropDownButton>
-            <DropDownButton Content="Submit" Theme="{DynamicResource BorderlessDropDownButton}">
-                <DropDownButton.Flyout>
-                    <MenuFlyout Placement="BottomEdgeAlignedRight">
-                        <MenuItem Header="Submit All" />
-                        <MenuItem Header="Submit Updated" />
-                    </MenuFlyout>
-                </DropDownButton.Flyout>
-            </DropDownButton>
-        </StackPanel>
-        <StackPanel Orientation="Horizontal" Spacing="8">
-            <SplitButton Content="Submit">
-                <SplitButton.Flyout>
-                    <MenuFlyout Placement="BottomEdgeAlignedRight">
-                        <MenuItem Header="Submit All" />
-                        <MenuItem Header="Submit Updated" />
-                    </MenuFlyout>
-                </SplitButton.Flyout>
-            </SplitButton>
-            <SplitButton Classes="Secondary" Content="Submit" />
-            <SplitButton Classes="Tertiary" Content="Submit" />
-            <SplitButton Classes="Success" Content="Submit" />
-            <SplitButton Classes="Warning" Content="Submit" />
-            <SplitButton Classes="Danger" Content="Submit" />
-            <SplitButton
-                Classes="Danger"
-                Content="Submit"
-                IsEnabled="False" />
-        </StackPanel>
-        <StackPanel Orientation="Horizontal" Spacing="8">
-            <ToggleSplitButton Content="Submit">
-                <ToggleSplitButton.Flyout>
-                    <MenuFlyout Placement="BottomEdgeAlignedRight">
-                        <MenuItem Header="Submit All" />
-                        <MenuItem Header="Submit Updated" />
-                    </MenuFlyout>
-                </ToggleSplitButton.Flyout>
-            </ToggleSplitButton>
-            <ToggleSplitButton Classes="Secondary" Content="Submit" />
-            <ToggleSplitButton Classes="Tertiary" Content="Submit" />
-            <ToggleSplitButton Classes="Success" Content="Submit" />
-            <ToggleSplitButton Classes="Warning" Content="Submit" />
-            <ToggleSplitButton Classes="Danger" Content="Submit" />
-            <ToggleSplitButton
-                Classes="Danger"
-                Content="Submit"
-                IsEnabled="False" />
-        </StackPanel>
-    </StackPanel>
-</UserControl>

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

@@ -8,10 +8,22 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <StackPanel HorizontalAlignment="Left" Spacing="20">
-        <CalendarDatePicker />
+        <StackPanel Orientation="Horizontal">
+            <CalendarDatePicker Classes="Large" />
+            <CalendarDatePicker />
+            <CalendarDatePicker Classes="Small" />
+        </StackPanel>
+
+        <StackPanel Orientation="Horizontal">
+            <CalendarDatePicker IsEnabled="False" />
+            <CalendarDatePicker Classes="Bordered" />
+            <CalendarDatePicker Classes="Bordered" IsEnabled="False" />
+        </StackPanel>
+
         <CalendarDatePicker Width="500" />
-        <CalendarDatePicker Classes="Large" />
+
-        <CalendarDatePicker Classes="Small" />
+        <CalendarDatePicker Classes="ClearButton" Width="200" />
+
         <CalendarDatePicker
             Name="DatePicker2"
             Margin="0,0,0,8"
@@ -22,9 +34,5 @@
             CustomDateFormatString="ddd, MMM d"
             SelectedDateFormat="Custom" />
         <CalendarDatePicker Margin="0,0,0,8" Watermark="Watermark" />
-
-        <CalendarDatePicker IsEnabled="False" />
-        <CalendarDatePicker Classes="Bordered" />
-        <CalendarDatePicker Classes="Bordered" IsEnabled="False" />
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -52,5 +52,22 @@
                 <TextBlock Text="Text 4" />
             </Border>
         </Carousel>
+        <Carousel Classes="Columnar Left" Theme="{DynamicResource FullCarousel}">
+            <Carousel.PageTransition>
+                <PageSlide Orientation="Horizontal" Duration="0.25" />
+            </Carousel.PageTransition>
+            <Border Background="#EAF5FF">
+                <TextBlock Text="Text 1" />
+            </Border>
+            <Border Background="#F9F9F9">
+                <TextBlock Text="Text 2" />
+            </Border>
+            <Border Background="#FFF8EA">
+                <TextBlock Text="Text 3" />
+            </Border>
+            <Border Background="#FEF2ED">
+                <TextBlock Text="Text 4" />
+            </Border>
+        </Carousel>
     </StackPanel>
 </UserControl>

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

@@ -4,64 +4,40 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    d:DesignHeight="450"
+    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+    d:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
+    <Design.DataContext>
+        <pages:ComboBoxDemoViewModel />
+    </Design.DataContext>
     <StackPanel Spacing="20">
-        <ComboBox Width="150">
+        <StackPanel.Styles>
-            <ComboBoxItem>Ding</ComboBoxItem>
+            <Style Selector="ComboBox">
-            <ComboBoxItem>Otter</ComboBoxItem>
+                <Setter Property="Width" Value="300" />
-            <ComboBoxItem>Husky</ComboBoxItem>
+                <Setter Property="ItemsSource" Value="{Binding Items}" />
-            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            </Style>
-            <ComboBoxItem>Cass</ComboBoxItem>
+        </StackPanel.Styles>
-        </ComboBox>
+
-        <ComboBox Width="150" PlaceholderText="Please Select">
+        <ComboBox />
-            <ComboBoxItem>Ding</ComboBoxItem>
+        <ComboBox Classes="ClearButton" />
-            <ComboBoxItem>Otter</ComboBoxItem>
+        <ComboBox PlaceholderText="Please Select" />
-            <ComboBoxItem>Husky</ComboBoxItem>
+        <ComboBox IsEnabled="False" />
-            <ComboBoxItem>Mr. 17</ComboBoxItem>
+        <ComboBox Classes="Large" IsEnabled="False" />
-            <ComboBoxItem>Cass</ComboBoxItem>
+        <ComboBox Classes="Small" />
-        </ComboBox>
+        <ComboBox Classes="Bordered" />
-        <ComboBox Width="150" IsEnabled="False">
+        <ComboBox Classes="Bordered" IsEnabled="False" />
-            <ComboBoxItem>Ding</ComboBoxItem>
+
-            <ComboBoxItem>Otter</ComboBoxItem>
+        <StackPanel Orientation="Horizontal">
-            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBox Width="100" Classes="Large" PlaceholderText="Large" />
-            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBox Width="100" PlaceholderText="Default" />
-            <ComboBoxItem>Cass</ComboBoxItem>
+            <ComboBox Width="100" Classes="Small" PlaceholderText="Small" />
-        </ComboBox>
+        </StackPanel>
-        <ComboBox
+
-            Width="150"
+        <StackPanel Orientation="Horizontal">
-            Classes="Large"
+            <ComboBox Width="100" IsEnabled="False" PlaceholderText="Disabled" />
-            IsEnabled="False">
+            <ComboBox Width="100" Classes="Bordered" PlaceholderText="Bordered" />
-            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBox Width="100" Classes="Bordered" IsEnabled="False" />
-            <ComboBoxItem>Otter</ComboBoxItem>
+        </StackPanel>
-            <ComboBoxItem>Husky</ComboBoxItem>
-            <ComboBoxItem>Mr. 17</ComboBoxItem>
-            <ComboBoxItem>Cass</ComboBoxItem>
-        </ComboBox>
-        <ComboBox Width="150" Classes="Small">
-            <ComboBoxItem>Ding</ComboBoxItem>
-            <ComboBoxItem>Otter</ComboBoxItem>
-            <ComboBoxItem>Husky</ComboBoxItem>
-            <ComboBoxItem>Mr. 17</ComboBoxItem>
-            <ComboBoxItem>Cass</ComboBoxItem>
-        </ComboBox>
-        <ComboBox Width="150" Classes="Bordered">
-            <ComboBoxItem>Ding</ComboBoxItem>
-            <ComboBoxItem>Otter</ComboBoxItem>
-            <ComboBoxItem>Husky</ComboBoxItem>
-            <ComboBoxItem>Mr. 17</ComboBoxItem>
-            <ComboBoxItem>Cass</ComboBoxItem>
-        </ComboBox>
-        <ComboBox
-            Width="150"
-            Classes="Bordered"
-            IsEnabled="False">
-            <ComboBoxItem>Ding</ComboBoxItem>
-            <ComboBoxItem>Otter</ComboBoxItem>
-            <ComboBoxItem>Husky</ComboBoxItem>
-            <ComboBoxItem>Mr. 17</ComboBoxItem>
-            <ComboBoxItem>Cass</ComboBoxItem>
-        </ComboBox>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -1,6 +1,6 @@
-using Avalonia;
+using System.Collections.ObjectModel;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
+using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -9,5 +9,11 @@ public partial class ComboBoxDemo : UserControl
     public ComboBoxDemo()
     {
         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

@@ -13,43 +13,52 @@
     mc:Ignorable="d">
     <TabControl>
         <TabItem Header="DataGrid">
-            <DataGrid
+           <Grid RowDefinitions="Auto, *">
-                Margin="8"
+               <StackPanel Grid.Row="0" Orientation="Horizontal">
-                CanUserReorderColumns="True"
+                   <ToggleSwitch Content="Disable" Name="DisableToggle" />
-                CanUserResizeColumns="True"
+                   <ToggleSwitch Content="ScrollViewerHide" Name="ScrollViewerHide" />
-                CanUserSortColumns="True"
+               </StackPanel>
-                HeadersVisibility="All"
+               <DataGrid Grid.Row="1"
-                IsReadOnly="True"
+                         Margin="8"
-                ItemsSource="{Binding GridData1}">
+                         CanUserReorderColumns="True"
-                <DataGrid.Columns>
+                         CanUserResizeColumns="True"
-                    <DataGridTextColumn
+                         CanUserSortColumns="True"
-                        Width="6*"
+                         HeadersVisibility="All"
-                        x:DataType="vm:Song"
+                         IsReadOnly="True"
-                        Binding="{Binding Title}"
+                         ScrollViewer.AllowAutoHide="{Binding #ScrollViewerHide.IsChecked}"
-                        Header="Title" />
+                         IsEnabled="{Binding #DisableToggle.IsChecked}"
-                    <DataGridTextColumn
+                         ItemsSource="{Binding GridData1}">
-                        Width="6*"
+                   <DataGrid.Columns>
-                        x:DataType="vm:Song"
+                       <DataGridTextColumn
-                        Binding="{Binding Artist}"
+                           Width="6*"
-                        Header="Artist" />
+                           x:DataType="vm:Song"
-                    <DataGridTextColumn
+                           Binding="{Binding Title}"
-                        Width="6*"
+                           Header="Title" />
-                        x:DataType="vm:Song"
+                       <DataGridTextColumn
-                        Binding="{Binding Album}"
+                           Width="6*"
-                        Header="Album" />
+                           x:DataType="vm:Song"
-                    <DataGridTemplateColumn Header="Duration" SortMemberPath="Duration">
+                           Binding="{Binding Artist}"
-                        <DataGridTemplateColumn.CellTemplate>
+                           Header="Artist" />
-                            <DataTemplate>
+                       <DataGridTextColumn
-                                <TextBlock
+                           Width="6*"
-                                    Margin="8,0,0,0"
+                           x:DataType="vm:Song"
-                                    VerticalAlignment="Center"
+                           Binding="{Binding Album}"
-                                    Text="{Binding Duration}" />
+                           Header="Album" />
-                            </DataTemplate>
+                       <DataGridTemplateColumn Header="Duration" SortMemberPath="Duration">
-                        </DataGridTemplateColumn.CellTemplate>
+                           <DataGridTemplateColumn.CellTemplate>
-                    </DataGridTemplateColumn>
+                               <DataTemplate>
-                </DataGrid.Columns>
+                                   <TextBlock
+                                       Margin="8,0,0,0"
+                                       VerticalAlignment="Center"
+                                       Text="{Binding Duration}" />
+                               </DataTemplate>
+                           </DataGridTemplateColumn.CellTemplate>
+                       </DataGridTemplateColumn>
+                   </DataGrid.Columns>
 
-            </DataGrid>
+               </DataGrid>
+               
+           </Grid>
         </TabItem>
         <TabItem Header="Grouping">
             <DataGrid
@@ -162,6 +171,7 @@
                     Grid.Row="2"
                     Margin="12,0,12,12"
                     HorizontalAlignment="Right"
+                    Command="{Binding AddCommand}"
                     Content="Add" />
             </Grid>
         </TabItem>

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

@@ -9,6 +9,7 @@
     mc:Ignorable="d">
     <StackPanel Spacing="20">
         <DatePicker />
+        <DatePicker Classes="ClearButton" />
         <DatePicker DayFormat="d (ddd)" YearVisible="False" />
         <DatePicker IsEnabled="False" />
         <DatePicker Classes="Large" />

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

@@ -6,7 +6,32 @@
              x:Class="Semi.Avalonia.Demo.Pages.HeaderedContentControlDemo">
     <ScrollViewer>
         <StackPanel HorizontalAlignment="Left" Spacing="20">
-            <HeaderedContentControl Theme="{DynamicResource GroupBox}" Header="Semi Design" Width="400" Height="200">
+            <TextBlock>Default Theme</TextBlock>
+            <WrapPanel ItemWidth="400">
+                <HeaderedContentControl
+                    Header="This is the text header!"
+                    BorderBrush="Gray"
+                    BorderThickness="1"
+                    CornerRadius="4">
+                    <TextBlock Text="Some content" />
+                </HeaderedContentControl>
+                <HeaderedContentControl Header="This is the image header!">
+                    <Image Source="/Assets/WORLD.png" />
+                </HeaderedContentControl>
+                <HeaderedContentControl>
+                    <HeaderedContentControl.Header>
+                        <Image Source="/Assets/WORLD.png" />
+                    </HeaderedContentControl.Header>
+                    <TextBlock Text="This is the content. But the header can also be non textual" />
+                </HeaderedContentControl>
+            </WrapPanel>
+            <TextBlock>GroupBox Theme</TextBlock>
+            <HeaderedContentControl
+                HorizontalAlignment="Left"
+                Theme="{DynamicResource GroupBox}"
+                Header="Semi Design"
+                Width="400"
+                Height="200">
                 <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</TextBlock>
             </HeaderedContentControl>
         </StackPanel>

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

@@ -38,9 +38,9 @@
                             <TextBlock Grid.Row="3" Grid.Column="0">Secondary</TextBlock>
                             <TextBlock Grid.Row="4" Grid.Column="0">Tertiary</TextBlock>
                             <TextBlock Grid.Row="5" Grid.Column="0">Quaternary</TextBlock>
-                            <TextBlock Grid.Row="6" Grid.Column="0">Warning</TextBlock>
+                            <TextBlock Grid.Row="6" Grid.Column="0">Success</TextBlock>
-                            <TextBlock Grid.Row="7" Grid.Column="0">Danger</TextBlock>
+                            <TextBlock Grid.Row="7" Grid.Column="0">Warning</TextBlock>
-                            <TextBlock Grid.Row="8" Grid.Column="0">Success</TextBlock>
+                            <TextBlock Grid.Row="8" Grid.Column="0">Danger</TextBlock>
                             <TextBlock Grid.Row="9" Grid.Column="0">Mark</TextBlock>
                             <TextBlock Grid.Row="10" Grid.Column="0">Code</TextBlock>
                             <Label Grid.Row="2" Grid.Column="1">Text</Label>
@@ -65,20 +65,20 @@
                             <Label
                                 Grid.Row="6"
                                 Grid.Column="1"
-                                Classes="Warning">
+                                Classes="Success">
-                                Warning
+                                Success
                             </Label>
                             <Label
                                 Grid.Row="7"
                                 Grid.Column="1"
-                                Classes="Danger">
+                                Classes="Warning">
-                                Danger
+                                Warning
                             </Label>
                             <Label
                                 Grid.Row="8"
                                 Grid.Column="1"
-                                Classes="Success">
+                                Classes="Danger">
-                                Success
+                                Danger
                             </Label>
                             <Label
                                 Grid.Row="9"

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

@@ -78,8 +78,8 @@
                     <StackPanel Orientation="Horizontal">
                         <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
                             <ListBox Theme="{DynamicResource ButtonRadioGroupListBox}">
-                                <ListBoxItem Classes="Large" IsSelected="True">Small 1</ListBoxItem>
+                                <ListBoxItem Classes="Large" IsSelected="True">Large 1</ListBoxItem>
-                                <ListBoxItem Classes="Large">Small 2</ListBoxItem>
+                                <ListBoxItem Classes="Large">Large 2</ListBoxItem>
                             </ListBox>
                         </Border>
                         <Border
@@ -87,8 +87,8 @@
                             HorizontalAlignment="Left"
                             Theme="{StaticResource RadioButtonGroupBorder}">
                             <ListBox Theme="{DynamicResource ButtonRadioGroupListBox}" IsEnabled="False">
-                                <ListBoxItem Classes="Large" IsSelected="True">Small 1</ListBoxItem>
+                                <ListBoxItem Classes="Large" IsSelected="True">Large 1</ListBoxItem>
-                                <ListBoxItem Classes="Large">Small 2</ListBoxItem>
+                                <ListBoxItem Classes="Large">Large 2</ListBoxItem>
                             </ListBox>
                         </Border>
                     </StackPanel>

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

@@ -8,8 +8,13 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <StackPanel HorizontalAlignment="Left" Spacing="10">
-        <Button Name="openFileDialog">Open File</Button>
+        <StackPanel.Styles>
-        <Button Name="selectFolderDialog">Select Folder</Button>
+            <Style Selector="Button">
-        <Button Name="saveFileDialog">Save File</Button>
+                <Setter Property="HorizontalAlignment" Value="Stretch" />
+            </Style>
+        </StackPanel.Styles>
+        <Button Name="OpenFileButton" Content="Open File" />
+        <Button Name="SelectFolderButton" Content="Select Folder" />
+        <Button Name="SaveFileButton" Content="Save File" />
     </StackPanel>
 </UserControl>

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

@@ -1,10 +1,6 @@
-using System;
 using System.Collections.Generic;
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Dialogs;
 using Avalonia.Interactivity;
-using Avalonia.Markup.Xaml;
 using Avalonia.Platform.Storage;
 
 namespace Semi.Avalonia.Demo.Pages;
@@ -14,14 +10,14 @@ public partial class ManagedFileChooserDemo : UserControl
     public ManagedFileChooserDemo()
     {
         InitializeComponent();
-        openFileDialog.Click += OpenFileDialog;
+        OpenFileButton.Click += OpenFileDialog;
-        selectFolderDialog.Click += SelectFolderDialog;
+        SelectFolderButton.Click += SelectFolderDialog;
-        saveFileDialog.Click += SaveFileDialog;
+        SaveFileButton.Click += SaveFileDialog;
     }
 
-    private async void OpenFileDialog(object sender, RoutedEventArgs args)
+    private async void OpenFileDialog(object? sender, RoutedEventArgs args)
     {
-        IStorageProvider? sp = GetStorageProvider();
+        var sp = GetStorageProvider();
         if (sp is null) return;
         var result = await sp.OpenFilePickerAsync(new FilePickerOpenOptions()
         {
@@ -30,9 +26,10 @@ public partial class ManagedFileChooserDemo : UserControl
             AllowMultiple = true,
         });
     }
-    private async void SelectFolderDialog(object sender, RoutedEventArgs args)
+
+    private async void SelectFolderDialog(object? sender, RoutedEventArgs args)
     {
-        IStorageProvider? sp = GetStorageProvider();
+        var sp = GetStorageProvider();
         if (sp is null) return;
         var result = await sp.OpenFolderPickerAsync(new FolderPickerOpenOptions()
         {
@@ -40,16 +37,17 @@ public partial class ManagedFileChooserDemo : UserControl
             AllowMultiple = true,
         });
     }
-    private async void SaveFileDialog(object sender, RoutedEventArgs args)
+
+    private async void SaveFileDialog(object? sender, RoutedEventArgs args)
     {
-        IStorageProvider? sp = GetStorageProvider();
+        var sp = GetStorageProvider();
         if (sp is null) return;
         var result = await sp.SaveFilePickerAsync(new FilePickerSaveOptions()
         {
-            Title = "Open File",
+            Title = "Save File",
         });
     }
-    
+
     private IStorageProvider? GetStorageProvider()
     {
         var topLevel = TopLevel.GetTopLevel(this);
@@ -58,10 +56,10 @@ public partial class ManagedFileChooserDemo : UserControl
 
     List<FilePickerFileType>? GetFileTypes()
     {
-        return new List<FilePickerFileType>
+        return
-        {
+        [
             FilePickerFileTypes.All,
             FilePickerFileTypes.TextPlain
-        };
+        ];
     }
 }

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

@@ -7,10 +7,23 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel HorizontalAlignment="Left" Spacing="20">
+    <StackPanel Spacing="20">
-        <Button Click="InfoButton_OnClick" Content="Information" />
+        <UniformGrid Rows="2" Columns="2" Width="500" HorizontalAlignment="Left">
-        <Button Click="InfoButton_OnClick" Content="Success" />
+            <UniformGrid.Styles>
-        <Button Click="InfoButton_OnClick" Content="Warning" />
+                <Style Selector="RadioButton">
-        <Button Click="InfoButton_OnClick" Content="Error" />
+                    <Setter Property="Theme" Value="{DynamicResource PureCardRadioButton}" />
+                </Style>
+            </UniformGrid.Styles>
+            <RadioButton Click="PositionButton_OnClick" Content="TopLeft" />
+            <RadioButton Click="PositionButton_OnClick" Content="TopRight" IsChecked="True" />
+            <RadioButton Click="PositionButton_OnClick" Content="BottomLeft" />
+            <RadioButton Click="PositionButton_OnClick" Content="BottomRight" />
+        </UniformGrid>
+        <StackPanel Orientation="Horizontal" Spacing="20">
+            <Button Click="NormalButton_OnClick" Content="Information" />
+            <Button Click="NormalButton_OnClick" Content="Success" Classes="Success" />
+            <Button Click="NormalButton_OnClick" Content="Warning" Classes="Warning" />
+            <Button Click="NormalButton_OnClick" Content="Error" Classes="Danger" />
+        </StackPanel>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -2,17 +2,14 @@ using System;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Notifications;
-using Avalonia.Controls.Presenters;
 using Avalonia.Interactivity;
-using Avalonia.Markup.Xaml;
-using Avalonia.VisualTree;
-using Semi.Avalonia.Demo.Views;
 
 namespace Semi.Avalonia.Demo.Pages;
 
 public partial class NotificationDemo : UserControl
 {
     private WindowNotificationManager? _manager;
+
     public NotificationDemo()
     {
         InitializeComponent();
@@ -22,14 +19,25 @@ public partial class NotificationDemo : UserControl
     {
         base.OnAttachedToVisualTree(e);
         var topLevel = TopLevel.GetTopLevel(this);
-        _manager = new WindowNotificationManager(topLevel){ MaxItems = 3};
+        _manager = new WindowNotificationManager(topLevel) { MaxItems = 3 };
     }
 
-    private void InfoButton_OnClick(object? sender, RoutedEventArgs e)
+    private void NormalButton_OnClick(object? sender, RoutedEventArgs e)
     {
-        if (sender is Button b && b.Content is string s && Enum.TryParse<NotificationType>(s, out NotificationType t))
+        if (sender is Button b && b.Content is string s)
         {
-            _manager?.Show(new Notification(t.ToString(), "This is message", t));
+            _manager?.Show(Enum.TryParse<NotificationType>(s, out var t)
+                ? new Notification(t.ToString(), "This is message", t)
+                : new Notification(s, "This is message"));
+        }
+    }
+
+    private void PositionButton_OnClick(object? sender, RoutedEventArgs e)
+    {
+        if (sender is RadioButton b && b.Content is string s)
+        {
+            Enum.TryParse<NotificationPosition>(s, out var t);
+            _manager.Position = t;
         }
     }
 }

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

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

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

@@ -0,0 +1,22 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.PathIconDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel HorizontalAlignment="Left" >
+        <TextBlock Text="Size"></TextBlock>
+        <Slider Name="width" Minimum="0" Maximum="100" Value="20" Width="300"></Slider>
+        <ToggleSwitch Name="active" Content="Active"></ToggleSwitch>
+        <PathIcon
+            Classes.Active="{Binding ElementName=active, Path=IsChecked}"
+            BorderBrush="{DynamicResource SemiRed6}"
+            Width="{Binding #width.Value}"
+            Height="{Binding #width.Value}"
+            Data="M12 3L2 12H5V20H19V12H22L12 3M13 18H11V16H13V18M13 14H11V8H13V14Z"
+            Foreground="{DynamicResource SemiBlue6}" />
+    </StackPanel>
+</UserControl>

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

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

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

@@ -155,7 +155,7 @@
                 Value="60" />
             <ProgressBar
                 Width="200"
-                Classes="Error"
+                Classes="Danger"
                 Maximum="100"
                 Minimum="0"
                 ShowProgressText="True"

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

@@ -16,7 +16,7 @@
             <RepeatButton Classes="Success">Success</RepeatButton>
             <RepeatButton Classes="Warning">Warning</RepeatButton>
             <RepeatButton Classes="Danger">Danger</RepeatButton>
-            <RepeatButton Classes="Primary" IsEnabled="False">Danger</RepeatButton>
+            <RepeatButton Classes="Danger" IsEnabled="False">Disabled</RepeatButton>
         </StackPanel>
         <TextBlock>Solid</TextBlock>
         <StackPanel Orientation="Horizontal" Spacing="20">
@@ -27,10 +27,25 @@
             <RepeatButton Classes="Warning" Theme="{DynamicResource SolidRepeatButton}">Warning</RepeatButton>
             <RepeatButton Classes="Danger" Theme="{DynamicResource SolidRepeatButton}">Danger</RepeatButton>
             <RepeatButton
-                Classes="Primary"
+                Classes="Danger"
                 IsEnabled="False"
                 Theme="{DynamicResource SolidRepeatButton}">
-                Danger
+                Disabled
+            </RepeatButton>
+        </StackPanel>
+        <TextBlock>Outline</TextBlock>
+        <StackPanel Orientation="Horizontal" Spacing="20">
+            <RepeatButton Classes="Primary" Theme="{DynamicResource OutlineRepeatButton}">Primary</RepeatButton>
+            <RepeatButton Classes="Secondary" Theme="{DynamicResource OutlineRepeatButton}">Secondary</RepeatButton>
+            <RepeatButton Classes="Tertiary" Theme="{DynamicResource OutlineRepeatButton}">Tertiary</RepeatButton>
+            <RepeatButton Classes="Success" Theme="{DynamicResource OutlineRepeatButton}">Success</RepeatButton>
+            <RepeatButton Classes="Warning" Theme="{DynamicResource OutlineRepeatButton}">Warning</RepeatButton>
+            <RepeatButton Classes="Danger" Theme="{DynamicResource OutlineRepeatButton}">Danger</RepeatButton>
+            <RepeatButton
+                Classes="Danger"
+                IsEnabled="False"
+                Theme="{DynamicResource OutlineRepeatButton}">
+                Disabled
             </RepeatButton>
         </StackPanel>
         <TextBlock>Borderless</TextBlock>
@@ -42,11 +57,24 @@
             <RepeatButton Classes="Warning" Theme="{DynamicResource BorderlessRepeatButton}">Warning</RepeatButton>
             <RepeatButton Classes="Danger" Theme="{DynamicResource BorderlessRepeatButton}">Danger</RepeatButton>
             <RepeatButton
-                Classes="Primary"
+                Classes="Danger"
                 IsEnabled="False"
                 Theme="{DynamicResource BorderlessRepeatButton}">
-                Danger
+                Disabled
             </RepeatButton>
         </StackPanel>
+        <TextBlock>Disabled</TextBlock>
+        <StackPanel Background="{DynamicResource SemiColorBackground1}" Orientation="Horizontal" Spacing="20">
+            <Button IsEnabled="False">Light</Button>
+            <Button IsEnabled="False" Theme="{DynamicResource SolidButton}">Solid</Button>
+            <Button IsEnabled="False" Theme="{DynamicResource OutlineButton}">Outline</Button>
+            <Button IsEnabled="False" Theme="{DynamicResource BorderlessButton}">Borderless</Button>
+        </StackPanel>
+        <TextBlock>Size Classes</TextBlock>
+        <StackPanel Orientation="Horizontal" Spacing="20">
+            <RepeatButton Classes="Small">Small</RepeatButton>
+            <RepeatButton>Default</RepeatButton>
+            <RepeatButton Classes="Large">Large</RepeatButton>
+        </StackPanel>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -31,9 +31,9 @@
                     <SelectableTextBlock Grid.Row="3" Grid.Column="0">Secondary</SelectableTextBlock>
                     <SelectableTextBlock Grid.Row="4" Grid.Column="0">Tertiary</SelectableTextBlock>
                     <SelectableTextBlock Grid.Row="5" Grid.Column="0">Quaternary</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">Warning</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">Success</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">Danger</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">Warning</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="8" Grid.Column="0">Success</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="8" Grid.Column="0">Danger</SelectableTextBlock>
                     <SelectableTextBlock Grid.Row="9" Grid.Column="0">Mark</SelectableTextBlock>
                     <SelectableTextBlock Grid.Row="10" Grid.Column="0">Underline</SelectableTextBlock>
                     <SelectableTextBlock Grid.Row="11" Grid.Column="0">Delete</SelectableTextBlock>
@@ -60,20 +60,20 @@
                     <SelectableTextBlock
                         Grid.Row="6"
                         Grid.Column="1"
-                        Classes="Warning">
+                        Classes="Success">
-                        Warning
+                        Success
                     </SelectableTextBlock>
                     <SelectableTextBlock
                         Grid.Row="7"
                         Grid.Column="1"
-                        Classes="Danger">
+                        Classes="Warning">
-                        Danger
+                        Warning
                     </SelectableTextBlock>
                     <SelectableTextBlock
                         Grid.Row="8"
                         Grid.Column="1"
-                        Classes="Success">
+                        Classes="Danger">
-                        Success
+                        Danger
                     </SelectableTextBlock>
                     <SelectableTextBlock
                         Grid.Row="9"

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

@@ -4,147 +4,194 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    d:DesignHeight="450"
+    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+    d:DesignHeight="1000"
     d:DesignWidth="800"
     mc:Ignorable="d">
+    <Design.DataContext>
+        <pages:SplitViewDemoViewModel />
+    </Design.DataContext>
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <StreamGeometry x:Key="NavigationMenuExpandIconGlyph">M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z</StreamGeometry>
+        </ResourceDictionary>
+    </UserControl.Resources>
     <Border>
         <Grid ColumnDefinitions="*,400">
-            <StackPanel
+            <Border Grid.Column="1" VerticalAlignment="Top" Margin="10 0 0 0">
-                Grid.Column="1"
+                <Grid RowDefinitions="*, *, *, *, *, *" ColumnDefinitions="Auto, *">
-                Orientation="Vertical"
+                    <Label
-                Spacing="4">
+                        Grid.Row="0" Grid.Column="0"
-                <ToggleButton
+                        VerticalAlignment="Center"
-                    Name="PaneOpenButton"
+                        Content="IsPaneOpen" />
-                    Content="IsPaneOpen"
+                    <ToggleSwitch
-                    IsChecked="{Binding IsPaneOpen, ElementName=SplitView}" />
+                        Grid.Row="0" Grid.Column="1"
+                        Name="PaneOpenButton"
+                        IsChecked="{Binding #SplitView.IsPaneOpen}" />
 
-                <ToggleButton
+                    <Label
-                    Name="UseLightDismissOverlayModeButton"
+                        Grid.Row="1" Grid.Column="0"
-                    Content="UseLightDismissOverlayMode"
+                        VerticalAlignment="Center"
-                    IsChecked="{Binding UseLightDismissOverlayMode, ElementName=SplitView}" />
+                        Content="UseLightDismissOverlayMode" />
+                    <ToggleSwitch
+                        Grid.Row="1" Grid.Column="1"
+                        Name="UseLightDismissOverlayModeButton"
+                        IsChecked="{Binding #SplitView.UseLightDismissOverlayMode}" />
 
-                <ToggleSwitch
+                    <Label
-                    Content="Placement"
+                        Grid.Row="2" Grid.Column="0"
-                    OffContent="Left"
+                        VerticalAlignment="Center"
-                    OnContent="Right" />
+                        Content="Placement" />
+                    <ToggleSwitch
+                        Grid.Row="2" Grid.Column="1"
+                        OffContent="Left"
+                        OnContent="Right"
+                        IsChecked="{Binding #SplitView.PanePlacement, Mode=OneWayToSource}" />
 
-                <TextBlock Text="DisplayMode" />
+                    <Label
-                <ComboBox
+                        Grid.Row="3" Grid.Column="0"
-                    Name="DisplayModeSelector"
+                        VerticalAlignment="Center"
-                    Width="170"
+                        Content="DisplayMode" />
-                    Margin="10"
+                    <ComboBox
-                    SelectedIndex="{Binding DisplayMode}">
+                        Grid.Row="3" Grid.Column="1"
-                    <ComboBoxItem>Inline</ComboBoxItem>
+                        Name="DisplayModeSelector"
-                    <ComboBoxItem>CompactInline</ComboBoxItem>
+                        HorizontalAlignment="Stretch"
-                    <ComboBoxItem>Overlay</ComboBoxItem>
+                        ItemsSource="{Binding DisplayModes}"
-                    <ComboBoxItem>CompactOverlay</ComboBoxItem>
+                        SelectedIndex="{Binding #SplitView.DisplayMode}" />
-                </ComboBox>
 
-                <TextBlock Text="PaneBackground" />
+                    <Label
-                <ComboBox
+                        Grid.Row="4" Grid.Column="0"
-                    Name="PaneBackgroundSelector"
+                        VerticalAlignment="Center"
-                    Width="170"
+                        Content="{Binding #CompactPaneLengthSlider.Value, StringFormat='{}CompactPaneLength: {0}'}" />
-                    Margin="10"
+                    <Slider
-                    SelectedIndex="0">
+                        Grid.Row="4" Grid.Column="1"
-                    <ComboBoxItem Tag="White">White</ComboBoxItem>
+                        Name="CompactPaneLengthSlider"
-                    <ComboBoxItem Tag="Red">Red</ComboBoxItem>
+                        Maximum="128"
-                    <ComboBoxItem Tag="Blue">Blue</ComboBoxItem>
+                        Minimum="0"
-                    <ComboBoxItem Tag="Green">Green</ComboBoxItem>
+                        TickFrequency="1"
-                </ComboBox>
+                        IsSnapToTickEnabled="True"
+                        Value="{Binding #SplitView.CompactPaneLength}" />
 
-                <TextBlock Text="{Binding Value, ElementName=OpenPaneLengthSlider, StringFormat='{}OpenPaneLength: {0}'}" />
+                    <Label
-                <Slider
+                        Grid.Row="5" Grid.Column="0"
-                    Name="OpenPaneLengthSlider"
+                        VerticalAlignment="Center"
-                    Width="150"
+                        Content="{Binding #OpenPaneLengthSlider.Value,StringFormat='{}OpenPaneLength: {0}'}" />
-                    Maximum="500"
+                    <Slider
-                    Minimum="128"
+                        Grid.Row="5" Grid.Column="1"
-                    Value="256" />
+                        Name="OpenPaneLengthSlider"
-
+                        Maximum="500"
-                <TextBlock Text="{Binding Value, ElementName=CompactPaneLengthSlider, StringFormat='{}CompactPaneLength: {0}'}" />
+                        Minimum="128"
-                <Slider
+                        TickFrequency="1"
-                    Name="CompactPaneLengthSlider"
+                        IsSnapToTickEnabled="True"
-                    Width="150"
+                        Value="{Binding #SplitView.OpenPaneLength}" />
-                    Maximum="128"
+                </Grid>
-                    Minimum="24"
+            </Border>
-                    Value="48" />
+            <Border
-            </StackPanel>
+                Grid.Column="0"
-            <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}" BorderThickness="1">
+                BorderBrush="{DynamicResource SemiGrey1}"
-                <!--  {Binding SelectedItem.Tag, ElementName=PaneBackgroundSelector}  -->
+                BorderThickness="1">
                 <SplitView
                     Name="SplitView"
-                    CompactPaneLength="{Binding Value, ElementName=CompactPaneLengthSlider}"
                     DisplayMode="CompactOverlay"
-                    OpenPaneLength="{Binding Value, ElementName=OpenPaneLengthSlider}"
+                    CompactPaneLength="48"
-                    PaneBackground="{Binding SelectedItem.Tag, ElementName=PaneBackgroundSelector}"
+                    OpenPaneLength="256">
-                    PanePlacement="{Binding PanePlacement}">
+                    <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,*,Auto">
+                        <Grid RowDefinitions="Auto,*,Auto">
                             <TextBlock
+                                Grid.Row="0"
                                 Name="PaneHeader"
-                                Margin="5,12,0,0"
+                                Margin="8,12"
                                 FontWeight="Bold"
-                                Text="PANE CONTENT" />
+                                Text="Playlist" />
-                            <ComboBox Grid.Row="1" Width="150">
+                            <ListBox
-                                <ComboBoxItem Content="Item1" />
+                                Grid.Row="1"
-                                <ComboBoxItem Content="Item2" />
+                                ItemsSource="{Binding Songs}" />
-                                <ComboBoxItem Content="Item3" />
+                            <ToggleSwitch
-                            </ComboBox>
-                            <ListBoxItem
                                 Grid.Row="2"
-                                Margin="0,10"
+                                Theme="{DynamicResource ButtonToggleSwitch}"
-                                VerticalAlignment="Top">
+                                IsChecked="{Binding #SplitView.IsPaneOpen}">
-                                <StackPanel Orientation="Horizontal">
+                                <ToggleSwitch.OnContent>
-                                    <!--  Path glyph from materialdesignicons.com  -->
+                                    <PathIcon
-                                    <Border Width="48">
+                                        Width="16"
-                                        <Viewbox
+                                        Height="16"
-                                            Width="24"
+                                        Data="{StaticResource NavigationMenuExpandIconGlyph}" />
-                                            Height="24"
+                                </ToggleSwitch.OnContent>
-                                            HorizontalAlignment="Left">
+                                <ToggleSwitch.OffContent>
-                                            <Canvas Width="24" Height="24">
+                                    <PathIcon
-                                                <Path Data="M16 17V19H2V17S2 13 9 13 16 17 16 17M12.5 7.5A3.5 3.5 0 1 0 9 11A3.5 3.5 0 0 0 12.5 7.5M15.94 13A5.32 5.32 0 0 1 18 17V19H22V17S22 13.37 15.94 13M15 4A3.39 3.39 0 0 0 13.07 4.59A5 5 0 0 1 13.07 10.41A3.39 3.39 0 0 0 15 11A3.5 3.5 0 0 0 15 4Z" Fill="{DynamicResource SystemControlForegroundBaseHighBrush}" />
+                                        Width="16"
-                                            </Canvas>
+                                        Height="16"
-                                        </Viewbox>
+                                        Data="{StaticResource NavigationMenuExpandIconGlyph}" />
-                                    </Border>
+                                </ToggleSwitch.OffContent>
-                                    <TextBlock VerticalAlignment="Center" Text="People" />
+                            </ToggleSwitch>
-                                </StackPanel>
-                            </ListBoxItem>
-                            <TextBlock
-                                Grid.Row="3"
-                                Margin="60,12"
-                                Text="Item at bottom" />
                         </Grid>
                     </SplitView.Pane>
 
-                    <Grid>
+                    <Panel>
-                        <Grid.Styles>
+                        <Panel.Styles>
-                            <Style Selector="TextBlock">
+                            <Style Selector="Image#AlbumCover">
-                                <Setter Property="FontSize" Value="14" />
+                                <Style.Animations>
-                                <Setter Property="FontWeight" Value="700" />
+                                    <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>
-                        </Grid.Styles>
+                        </Panel.Styles>
-                        <TextBlock
+                        <Image
-                            HorizontalAlignment="Center"
+                            Source="/Assets/WORLD.png"
-                            VerticalAlignment="Center"
+                            Name="AlbumCover"
-                            Text="SplitViewContent" />
+                            Width="200"
-                        <TextBlock Text="SplitViewContent" TextAlignment="Left" />
+                            Height="200" />
-                        <TextBlock
+                        <Arc
-                            HorizontalAlignment="Right"
+                            Width="290"
-                            Text="SplitViewContent"
+                            Height="290"
-                            TextAlignment="Left" />
+                            StartAngle="0"
-                        <TextBlock
+                            SweepAngle="360"
-                            VerticalAlignment="Bottom"
+                            StrokeJoin="Round"
-                            Text="SplitViewContent"
+                            StrokeLineCap="Round"
-                            TextAlignment="Left" />
+                            StrokeThickness="45">
-                        <TextBlock
+                            <Arc.Stroke>
-                            HorizontalAlignment="Right"
+                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
-                            VerticalAlignment="Bottom"
+                                    <GradientStop Color="#010101" Offset="0" />
-                            Text="SplitViewContent"
+                                    <GradientStop Color="#363636" Offset="0.5" />
-                            TextAlignment="Left" />
+                                    <GradientStop Color="#010101" Offset="1" />
-                    </Grid>
+                                </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>
 
         </Grid>
     </Border>
-</UserControl>
+</UserControl>

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

@@ -1,6 +1,7 @@
-using Avalonia;
+using System.Collections.ObjectModel;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
+using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -9,10 +10,35 @@ public partial class SplitViewDemo : UserControl
     public SplitViewDemo()
     {
         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

@@ -4,63 +4,92 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels;assembly=Semi.Avalonia.Demo"
     d:DesignHeight="450"
     d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:TabControlDemoViewModel"
     mc:Ignorable="d">
-    <StackPanel Spacing="20">
+    <ScrollViewer>
-        <Border Theme="{StaticResource CardBorder}">
+        <StackPanel Spacing="20">
-            <TabControl TabStripPlacement="Top">
+            <Border Theme="{StaticResource CardBorder}">
-                <TabItem Content="Hello 1" Header="Tab 1" />
+                <TabControl TabStripPlacement="Top">
-                <TabItem Content="Hello 2" Header="Tab 2" />
+                    <TabItem Content="Hello 1" Header="Tab 1" />
-                <TabItem Content="Hello 3" Header="Tab 3" />
+                    <TabItem Content="Hello 2" Header="Tab 2" />
-                <TabItem Content="中文内容" Header="中文中文" />
+                    <TabItem Content="Hello 3" Header="Tab 3" />
-                <TabItem
+                    <TabItem Content="中文内容" Header="中文中文" />
-                    Content="Hello 4"
+                    <TabItem
-                    Header="Tab 4"
+                        Content="Hello 4"
-                    IsEnabled="False" />
+                        Header="Tab 4"
-            </TabControl>
+                        IsEnabled="False" />
-        </Border>
+                </TabControl>
-        <Border Theme="{StaticResource CardBorder}">
+            </Border>
-            <TabControl TabStripPlacement="Left">
+            <Border Theme="{StaticResource CardBorder}">
-                <TabItem Content="Hello 1" Header="Tab 1" />
+                <TabControl TabStripPlacement="Left">
-                <TabItem Content="Hello 2" Header="Tab 2" />
+                    <TabItem Content="Hello 1" Header="Tab 1" />
-                <TabItem Content="Hello 3" Header="Tab 3" />
+                    <TabItem Content="Hello 2" Header="Tab 2" />
-                <TabItem Content="中文内容" Header="中文中文" />
+                    <TabItem Content="Hello 3" Header="Tab 3" />
-                <TabItem
+                    <TabItem Content="中文内容" Header="中文中文" />
-                    Content="Hello 4"
+                    <TabItem
-                    Header="Tab 4"
+                        Content="Hello 4"
-                    IsEnabled="False" />
+                        Header="Tab 4"
-            </TabControl>
+                        IsEnabled="False" />
-        </Border>
+                </TabControl>
-        <Border Theme="{StaticResource CardBorder}">
+            </Border>
-            <TabControl TabStripPlacement="Right">
+            <Border Theme="{StaticResource CardBorder}">
-                <TabItem Content="Hello 1" Header="Tab 1" />
+                <TabControl TabStripPlacement="Right">
-                <TabItem Content="Hello 2" Header="Tab 2" />
+                    <TabItem Content="Hello 1" Header="Tab 1" />
-                <TabItem Content="Hello 3" Header="Tab 3" />
+                    <TabItem Content="Hello 2" Header="Tab 2" />
-                <TabItem Content="中文内容" Header="中文中文" />
+                    <TabItem Content="Hello 3" Header="Tab 3" />
-                <TabItem
+                    <TabItem Content="中文内容" Header="中文中文" />
-                    Content="Hello 4"
+                    <TabItem
-                    Header="Tab 4"
+                        Content="Hello 4"
-                    IsEnabled="False" />
+                        Header="Tab 4"
-            </TabControl>
+                        IsEnabled="False" />
-        </Border>
+                </TabControl>
-        <Border Theme="{StaticResource CardBorder}">
+            </Border>
-            <TabControl TabStripPlacement="Bottom">
+            <Border Theme="{StaticResource CardBorder}">
-                <TabItem Content="Hello 1" Header="Tab 1" />
+                <TabControl TabStripPlacement="Bottom">
-                <TabItem Content="Hello 2" Header="Tab 2" />
+                    <TabItem Content="Hello 1" Header="Tab 1" />
-                <TabItem Content="Hello 3" Header="Tab 3" />
+                    <TabItem Content="Hello 2" Header="Tab 2" />
-                <TabItem Content="中文内容" Header="中文中文" />
+                    <TabItem Content="Hello 3" Header="Tab 3" />
-                <TabItem
+                    <TabItem Content="中文内容" Header="中文中文" />
-                    Content="Hello 4"
+                    <TabItem
-                    Header="Tab 4"
+                        Content="Hello 4"
-                    IsEnabled="False" />
+                        Header="Tab 4"
-            </TabControl>
+                        IsEnabled="False" />
-        </Border>
+                </TabControl>
-        <Border Theme="{StaticResource CardBorder}">
+            </Border>
-            <TabStrip>
+            <Border Theme="{StaticResource CardBorder}">
-                <TabStripItem>Tab 1</TabStripItem>
+                <TabStrip>
-                <TabStripItem>Tab 2</TabStripItem>
+                    <TabStripItem>Tab 1</TabStripItem>
-            </TabStrip>
+                    <TabStripItem>Tab 2</TabStripItem>
-        </Border>
+                </TabStrip>
-    </StackPanel>
+            </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}" />
+            </Border>
+        </StackPanel>
+    </ScrollViewer>
 </UserControl>

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

@@ -1,6 +1,7 @@
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
+using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -9,5 +10,6 @@ public partial class TabControlDemo : UserControl
     public TabControlDemo()
     {
         InitializeComponent();
+        this.DataContext = new TabControlDemoViewModel();
     }
 }

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

@@ -31,9 +31,9 @@
                     <TextBlock Grid.Row="3" Grid.Column="0">Secondary</TextBlock>
                     <TextBlock Grid.Row="4" Grid.Column="0">Tertiary</TextBlock>
                     <TextBlock Grid.Row="5" Grid.Column="0">Quaternary</TextBlock>
-                    <TextBlock Grid.Row="6" Grid.Column="0">Warning</TextBlock>
+                    <TextBlock Grid.Row="6" Grid.Column="0">Success</TextBlock>
-                    <TextBlock Grid.Row="7" Grid.Column="0">Danger</TextBlock>
+                    <TextBlock Grid.Row="7" Grid.Column="0">Warning</TextBlock>
-                    <TextBlock Grid.Row="8" Grid.Column="0">Success</TextBlock>
+                    <TextBlock Grid.Row="8" Grid.Column="0">Danger</TextBlock>
                     <TextBlock Grid.Row="9" Grid.Column="0">Mark</TextBlock>
                     <TextBlock Grid.Row="10" Grid.Column="0">Underline</TextBlock>
                     <TextBlock Grid.Row="11" Grid.Column="0">Delete</TextBlock>
@@ -60,20 +60,20 @@
                     <TextBlock
                         Grid.Row="6"
                         Grid.Column="1"
-                        Classes="Warning">
+                        Classes="Success">
-                        Warning
+                        Success
                     </TextBlock>
                     <TextBlock
                         Grid.Row="7"
                         Grid.Column="1"
-                        Classes="Danger">
+                        Classes="Warning">
-                        Danger
+                        Warning
                     </TextBlock>
                     <TextBlock
                         Grid.Row="8"
                         Grid.Column="1"
-                        Classes="Success">
+                        Classes="Danger">
-                        Success
+                        Danger
                     </TextBlock>
                     <TextBlock
                         Grid.Row="9"

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

@@ -24,8 +24,9 @@
             <TextBox Width="300" PasswordChar="*" />
             <TextBox
                 Width="300"
-                Classes="revealPasswordButton"
+                Classes="ClearButton RevealPasswordButton"
-                PasswordChar="*" />
+                PasswordChar="*"
+                Text="123456" />
             <TextBox
                 Width="500"
                 InnerLeftContent="http://"
@@ -42,6 +43,7 @@
                 InnerLeftContent="http://"
                 InnerRightContent=".com"
                 IsEnabled="False" />
+            <TextBox Width="300" Classes="TextArea" />
         </StackPanel>
     </ScrollViewer>
 </UserControl>

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

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

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

@@ -17,7 +17,7 @@
             <ToggleButton Classes="Success">Success</ToggleButton>
             <ToggleButton Classes="Warning">Warning</ToggleButton>
             <ToggleButton Classes="Danger">Danger</ToggleButton>
-            <ToggleButton Classes="Danger" IsEnabled="False">Danger</ToggleButton>
+            <ToggleButton Classes="Danger" IsEnabled="False">Disabled</ToggleButton>
         </StackPanel>
         <TextBlock Text="Toggle Button Checked State" />
         <StackPanel Orientation="Horizontal" Spacing="20">
@@ -28,18 +28,71 @@
             <ToggleButton Classes="Success" IsChecked="True">Success</ToggleButton>
             <ToggleButton Classes="Warning" IsChecked="True">Warning</ToggleButton>
             <ToggleButton Classes="Danger" IsChecked="True">Danger</ToggleButton>
-            <ToggleButton Classes="Danger" IsChecked="True" IsEnabled="False">Danger</ToggleButton>
+            <ToggleButton
+                Classes="Danger"
+                IsChecked="True"
+                IsEnabled="False">
+                Disabled
+            </ToggleButton>
         </StackPanel>
         <TextBlock Text="Toggle Button Three State" />
         <StackPanel Orientation="Horizontal" Spacing="20">
-            <ToggleButton IsThreeState="True" IsChecked="{x:Null}">Default</ToggleButton>
+            <ToggleButton IsChecked="{x:Null}" IsThreeState="True">Default</ToggleButton>
-            <ToggleButton Classes="Primary" IsThreeState="True" IsChecked="{x:Null}">Primary</ToggleButton>
+            <ToggleButton
-            <ToggleButton Classes="Secondary" IsThreeState="True" IsChecked="{x:Null}">Secondary</ToggleButton>
+                Classes="Primary"
-            <ToggleButton Classes="Tertiary" IsThreeState="True" IsChecked="{x:Null}">Tertiary</ToggleButton>
+                IsChecked="{x:Null}"
-            <ToggleButton Classes="Success" IsThreeState="True" IsChecked="{x:Null}">Success</ToggleButton>
+                IsThreeState="True">
-            <ToggleButton Classes="Warning" IsThreeState="True" IsChecked="{x:Null}">Warning</ToggleButton>
+                Primary
-            <ToggleButton Classes="Danger" IsThreeState="True" IsChecked="{x:Null}">Danger</ToggleButton>
+            </ToggleButton>
-            <ToggleButton Classes="Danger" IsThreeState="True" IsChecked="{x:Null}" IsEnabled="False">Danger</ToggleButton>
+            <ToggleButton
+                Classes="Secondary"
+                IsChecked="{x:Null}"
+                IsThreeState="True">
+                Secondary
+            </ToggleButton>
+            <ToggleButton
+                Classes="Tertiary"
+                IsChecked="{x:Null}"
+                IsThreeState="True">
+                Tertiary
+            </ToggleButton>
+            <ToggleButton
+                Classes="Success"
+                IsChecked="{x:Null}"
+                IsThreeState="True">
+                Success
+            </ToggleButton>
+            <ToggleButton
+                Classes="Warning"
+                IsChecked="{x:Null}"
+                IsThreeState="True">
+                Warning
+            </ToggleButton>
+            <ToggleButton
+                Classes="Danger"
+                IsChecked="{x:Null}"
+                IsThreeState="True">
+                Danger
+            </ToggleButton>
+            <ToggleButton
+                Classes="Danger"
+                IsChecked="{x:Null}"
+                IsEnabled="False"
+                IsThreeState="True">
+                Disabled
+            </ToggleButton>
+        </StackPanel>
+        <TextBlock Text="Toggle Button Disabled State" />
+        <StackPanel Background="{DynamicResource SemiColorBackground1}" Orientation="Horizontal" Spacing="20">
+            <ToggleButton IsThreeState="True" IsEnabled="False">Default</ToggleButton>
+            <ToggleButton IsThreeState="True" IsEnabled="False" IsChecked="True">Checked</ToggleButton>
+            <ToggleButton IsThreeState="True" IsEnabled="False" IsChecked="{x:Null}">Indeterminate</ToggleButton>
+        </StackPanel>
+        <TextBlock Text="Toggle Button Size" />
+        <StackPanel Orientation="Horizontal" Spacing="20">
+            <ToggleButton Classes="Small" IsThreeState="True">Small</ToggleButton>
+            <ToggleButton IsThreeState="True">Default</ToggleButton>
+            <ToggleButton Classes="Large" IsThreeState="True">Large</ToggleButton>
         </StackPanel>
     </StackPanel>
 </UserControl>

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

@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Spacing="20">
+    <StackPanel Spacing="8" Margin="20">
         <ToggleSwitch
             Content="Content"
             OffContent="OffContent"
@@ -24,11 +24,42 @@
             IsEnabled="False"
             OffContent="OffContent"
             OnContent="OnContent" />
-        <ToggleSwitch
+        <StackPanel Orientation="Horizontal">
-            Theme="{DynamicResource SimpleToggleSwitch}"
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" />
-            Content="Content"
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" IsChecked="True" />
-            OffContent="OffContent"
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small Loading" />
-            OnContent="OnContent" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small Loading" IsChecked="True" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" IsChecked="True" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Loading" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Loading" IsChecked="True" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large" IsChecked="True" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large Loading" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large Loading" IsChecked="True" />
+        </StackPanel>
+
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开"/>
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜"/>
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" IsChecked="True" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" IsChecked="True" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" Classes="Large" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" Classes="Large" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" Classes="Large" IsChecked="True" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" Classes="Large" IsChecked="True" />
+        </StackPanel>
+
         <ToggleSwitch Theme="{DynamicResource ButtonToggleSwitch}">
             <ToggleSwitch.OnContent>
                 <PathIcon

demo/Semi.Avalonia.Demo/Roots.xml

@@ -1,5 +0,0 @@
-<linker>
-  <!-- Can be removed if CompiledBinding and no reflection are used -->
-  <assembly fullname="Semi.Avalonia.Demo" preserve="All" />
-  <assembly fullname="Avalonia.Themes.Fluent" preserve="All" />
-</linker>

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

@@ -4,10 +4,9 @@
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
     </PropertyGroup>
-    
+
     <ItemGroup>
         <AvaloniaResource Include="Assets\**" />
-        <TrimmerRootDescriptor Include="Roots.xml" />
     </ItemGroup>
 
     <ItemGroup>
@@ -19,8 +18,8 @@
     </ItemGroup>
 
     <ItemGroup>
-      <ProjectReference Include="..\..\src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj" />
+        <ProjectReference Include="..\..\src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj" />
-      <ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj" />
+        <ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj" />
-      <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj" />
+        <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj" />
     </ItemGroup>
 </Project>

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

@@ -36,9 +36,9 @@
             </ControlTemplate>
         </Setter>
         <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
-            <Setter Property="Border.Width" Value="1" />
+            <Setter Property="Width" Value="1" />
-            <Setter Property="Border.VerticalAlignment" Value="Stretch" />
+            <Setter Property="VerticalAlignment" Value="Stretch" />
-            <Setter Property="Border.HorizontalAlignment" Value="Left" />
+            <Setter Property="HorizontalAlignment" Value="Left" />
         </Style>
     </ControlTheme>
 </ResourceDictionary>

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

@@ -4,6 +4,7 @@ using System.Collections.ObjectModel;
 using System.Linq;
 using Avalonia.Collections;
 using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
@@ -14,6 +15,8 @@ public class DataGridDemoViewModel: ObservableObject
     public DataGridCollectionView GridData2 { get; set; }
     
     public ObservableCollection<SongViewModel> GridData3 { get; set; }
+    
+    public RelayCommand AddCommand { get; set; }
 
     public DataGridDemoViewModel()
     {
@@ -28,6 +31,12 @@ public class DataGridDemoViewModel: ObservableObject
             CountOfComment = a.CountOfComment,
             IsSelected = false
         }));
+        AddCommand = new RelayCommand(Add);
+    }
+
+    private void Add()
+    {
+        GridData3.Add(new SongViewModel());
     }
 }
 
@@ -112,7 +121,7 @@ public class Song
         new("指鹿为马", "熊猫堂ProducePandas", 3, 12, "W.O.R.L.D.", 74, 2063175272),
         new("热带季风Remix", "熊猫堂ProducePandas", 3, 22, "W.O.R.L.D.", 23, 2063173319),
         new("加州梦境", "熊猫堂ProducePandas", 2, 56, "W.O.R.L.D.", 1662, 2063173324),
-        new("渐进自由", "熊猫堂ProducePandas", 4, 19, "W.O.R.L.D.", 124, 2063173321),
+        new("渐近自由", "熊猫堂ProducePandas", 4, 19, "W.O.R.L.D.", 124, 2063173321),
         new("世界所有的烂漫", "熊猫堂ProducePandas", 3, 30, "W.O.R.L.D.", 335, 2053388775),
     };
 }

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

@@ -47,8 +47,8 @@ public class PaletteDemoViewModel: ObservableObject
 
     public PaletteDemoViewModel()
     {
-        _lightResourceDictionary = AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Light/Palette.axaml")) as ResourceDictionary;
+        _lightResourceDictionary  = new Light.Palette();
-        _darkResourceDictionary = AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Dark/Palette.axaml")) as ResourceDictionary;
+        _darkResourceDictionary = new Dark.Palette();
         WeakReferenceMessenger.Default.Register<PaletteDemoViewModel, ColorItemViewModel>(this, OnClickColorItem);
     }
 
@@ -251,7 +251,7 @@ public static class ColorTokens
     {
         new ("SemiColorPrimary", "Primary"),
         new ("SemiColorPrimaryPointerover", "Primary Pointerover"),
-        new ("SemiColorPrimaryPressed", "Primary Pressed"),
+        new ("SemiColorPrimaryActive", "Primary Active"),
         new ("SemiColorPrimaryDisabled", "Primary Disabled"),
         new ("SemiColorPrimaryLight", "Primary Light"),
         new ("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
@@ -262,7 +262,7 @@ public static class ColorTokens
     {
         new ("SemiColorSecondary", "Secondary"),
         new ("SemiColorSecondaryPointerover", "Secondary Pointerover"),
-        new ("SemiColorSecondaryPressed", "Secondary Pressed"),
+        new ("SemiColorSecondaryActive", "Secondary Active"),
         new ("SemiColorSecondaryDisabled", "Secondary Disabled"),
         new ("SemiColorSecondaryLight", "Secondary Light"),
         new ("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"),
@@ -273,7 +273,7 @@ public static class ColorTokens
     {
         new ("SemiColorTertiary", "Tertiary"),
         new ("SemiColorTertiaryPointerover", "Tertiary Pointerover"),
-        new ("SemiColorTertiaryPressed", "Tertiary Pressed"),
+        new ("SemiColorTertiaryActive", "Tertiary Active"),
         new ("SemiColorTertiaryLight", "Tertiary Light"),
         new ("SemiColorTertiaryLightPointerover", "Tertiary Light Pointerover"),
         new ("SemiColorTertiaryLightActive", "Tertiary Light Active"),
@@ -283,7 +283,7 @@ public static class ColorTokens
     {
         new ("SemiColorInformation", "Information"),
         new ("SemiColorInformationPointerover", "Information Pointerover"),
-        new ("SemiColorInformationPressed", "Information Pressed"),
+        new ("SemiColorInformationActive", "Information Active"),
         new ("SemiColorInformationDisabled", "Information Disabled"),
         new ("SemiColorInformationLight", "Information Light"),
         new ("SemiColorInformationLightPointerover", "Information Light Pointerover"),
@@ -294,7 +294,7 @@ public static class ColorTokens
     {
         new ("SemiColorSuccess", "Success"),
         new ("SemiColorSuccessPointerover", "Success Pointerover"),
-        new ("SemiColorSuccessPressed", "Success Pressed"),
+        new ("SemiColorSuccessActive", "Success Active"),
         new ("SemiColorSuccessDisabled", "Success Disabled"),
         new ("SemiColorSuccessLight", "Success Light"),
         new ("SemiColorSuccessLightPointerover", "Success Light Pointerover"),
@@ -305,7 +305,7 @@ public static class ColorTokens
     {
         new ("SemiColorWarning", "Warning"),
         new ("SemiColorWarningPointerover", "Warning Pointerover"),
-        new ("SemiColorWarningPressed", "Warning Pressed"),
+        new ("SemiColorWarningActive", "Warning Active"),
         new ("SemiColorWarningLight", "Warning Light"),
         new ("SemiColorWarningLightPointerover", "Warning Light Pointerover"),
         new ("SemiColorWarningLightActive", "Warning Light Active"),
@@ -315,7 +315,7 @@ public static class ColorTokens
     {
         new ("SemiColorDanger", "Danger"),
         new ("SemiColorDangerPointerover", "Danger Pointerover"),
-        new ("SemiColorDangerPressed", "Danger Pressed"),
+        new ("SemiColorDangerActive", "Danger Active"),
         new ("SemiColorDangerLight", "Danger Light"),
         new ("SemiColorDangerLightPointerover", "Danger Light Pointerover"),
         new ("SemiColorDangerLightActive", "Danger Light Active"),

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

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

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

@@ -144,6 +144,9 @@
             <TabItem Header="NumericUpDown">
                 <pages:NumericUpDownDemo />
             </TabItem>
+            <TabItem Header="PathIcon">
+                <pages:PathIconDemo/>
+            </TabItem>
             <TabItem Header="ProgressBar">
                 <pages:ProgressBarDemo />
             </TabItem>

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

@@ -8,14 +8,15 @@
         <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
     </PropertyGroup>
 
-
+    <Import Project="../Directory.Build.props" />
+    
     <ItemGroup>
-        <PackageReference Include="Avalonia" Version="11.0.0" />
+        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.Desktop" Version="11.0.0" />
+        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.Themes.Fluent" Version="11.0.0" />
+        <PackageReference Include="Avalonia.Themes.Fluent" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.Fonts.Inter" Version="11.0.0" />
+        <PackageReference Include="Avalonia.Fonts.Inter" Version="$(AvaloniaVersion)" />
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.0" />
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
         <PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.1" />
     </ItemGroup>
 

demo/global.json

@@ -1,5 +1,5 @@
 {
     "sdk": {
-        "version": "7.0"
+        "version": "8.0"
     }
 }

global.json

@@ -0,0 +1,7 @@
+{
+  "sdk": {
+    "version": "8.0.0",
+    "rollForward": "latestMajor",
+    "allowPrerelease": true
+  }
+}

src/Package.props

@@ -1,13 +1,19 @@
 <Project>
     <PropertyGroup>
-        <TargetFrameworks>net6.0;netstandard2.0</TargetFrameworks>
+        <TargetFrameworks>net6.0;net8.0;netstandard2.0</TargetFrameworks>
         <Nullable>enable</Nullable>
-        <LangVersion>11</LangVersion>
+        <LangVersion>latest</LangVersion>
-        <Version>11.0.1</Version>
+        <Version>11.0.7.7</Version>
-        <Authors>IRIHI Technology</Authors>
+        <Authors>IRIHI Technology Co., Ltd.</Authors>
         <Description>Avalonia Theme inspired by Semi Design.</Description>
-        <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
+        <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>
-        <AvaloniaVersion>11.0.0</AvaloniaVersion>
         <PackageLicenseExpression>MIT</PackageLicenseExpression>
+        <PackageIcon>irihi.png</PackageIcon>
+        <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
+        <AvaloniaVersion>11.0.7</AvaloniaVersion>
     </PropertyGroup>
+
+    <ItemGroup>
+        <None Include="irihi.png" Pack="true" PackagePath=""/>
+    </ItemGroup>
 </Project>

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

@@ -61,7 +61,7 @@
                         </Panel>
                     </DropDownButton.Content>
                     <DropDownButton.Flyout>
-                        <Flyout FlyoutPresenterClasses="nopadding" Placement="AnchorAndGravity">
+                        <Flyout FlyoutPresenterClasses="nopadding" Placement="{DynamicResource ColorPickerFlyoutPlacement}">
 
                             <!--
                                 The following is copy-pasted from the ColorView's control template.
@@ -238,30 +238,30 @@
                                                 </Style>
                                                 <Style Selector="Grid[Tag=Rgba]">
                                                     <Style Selector="^ NumericUpDown#Component1NumericUpDown">
-                                                        <Setter Property="NumericUpDown.Tag" Value="R" />
+                                                        <Setter Property="Tag" Value="R" />
                                                     </Style>
                                                     <Style Selector="^ NumericUpDown#Component2NumericUpDown">
-                                                        <Setter Property="NumericUpDown.Tag" Value="G" />
+                                                        <Setter Property="Tag" Value="G" />
                                                     </Style>
                                                     <Style Selector="^ NumericUpDown#Component3NumericUpDown">
-                                                        <Setter Property="NumericUpDown.Tag" Value="B" />
+                                                        <Setter Property="Tag" Value="B" />
                                                     </Style>
                                                     <Style Selector="^ NumericUpDown#AlphaComponentNumericUpDown">
-                                                        <Setter Property="NumericUpDown.Tag" Value="A" />
+                                                        <Setter Property="Tag" Value="A" />
                                                     </Style>
                                                 </Style>
                                                 <Style Selector="Grid[Tag=Hsva]">
                                                     <Style Selector="^ NumericUpDown#Component1NumericUpDown">
-                                                        <Setter Property="NumericUpDown.Tag" Value="H" />
+                                                        <Setter Property="Tag" Value="H" />
                                                     </Style>
                                                     <Style Selector="^ NumericUpDown#Component2NumericUpDown">
-                                                        <Setter Property="NumericUpDown.Tag" Value="S" />
+                                                        <Setter Property="Tag" Value="S" />
                                                     </Style>
                                                     <Style Selector="^ NumericUpDown#Component3NumericUpDown">
-                                                        <Setter Property="NumericUpDown.Tag" Value="V" />
+                                                        <Setter Property="Tag" Value="V" />
                                                     </Style>
                                                     <Style Selector="^ NumericUpDown#AlphaComponentNumericUpDown">
-                                                        <Setter Property="NumericUpDown.Tag" Value="A" />
+                                                        <Setter Property="Tag" Value="A" />
                                                     </Style>
                                                 </Style>
                                             </Grid.Styles>

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

@@ -54,6 +54,7 @@
                         AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
                         HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
                         IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
+                        IsDeferredScrollingEnabled="{TemplateBinding (ScrollViewer.IsDeferredScrollingEnabled)}"
                         VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
                         <ItemsPresenter
                             Name="PART_ItemsPresenter"
@@ -137,21 +138,21 @@
             </ControlTemplate>
         </Setter>
         <Style Selector="^:checked">
-            <Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonCheckedBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ColorViewRadioButtonCheckedBackground}" />
-            <Setter Property="RadioButton.Foreground" Value="{DynamicResource ColorViewRadioButtonCheckedForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ColorViewRadioButtonCheckedForeground}" />
             <Style Selector="^:pointerover">
-                <Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonCheckedPointeroverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ColorViewRadioButtonCheckedPointeroverBackground}" />
             </Style>
             <Style Selector="^:pressed">
-                <Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonCheckedPressedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ColorViewRadioButtonCheckedPressedBackground}" />
             </Style>
         </Style>
         <Style Selector="^:unchecked">
             <Style Selector="^:pointerover">
-                <Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonPointeroverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ColorViewRadioButtonPointeroverBackground}" />
             </Style>
             <Style Selector="^:pressed">
-                <Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonPressedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ColorViewRadioButtonPressedBackground}" />
             </Style>
         </Style>
     </ControlTheme>
@@ -532,30 +533,30 @@
         </Setter>
         <Style Selector="^[ColorModel=Rgba]">
             <Style Selector="^ /template/ NumericUpDown#Component1NumericUpDown">
-                <Setter Property="NumericUpDown.Tag" Value="R" />
+                <Setter Property="Tag" Value="R" />
             </Style>
             <Style Selector="^ /template/ NumericUpDown#Component2NumericUpDown">
-                <Setter Property="NumericUpDown.Tag" Value="G" />
+                <Setter Property="Tag" Value="G" />
             </Style>
             <Style Selector="^ /template/ NumericUpDown#Component3NumericUpDown">
-                <Setter Property="NumericUpDown.Tag" Value="B" />
+                <Setter Property="Tag" Value="B" />
             </Style>
             <Style Selector="^ /template/ NumericUpDown#AlphaComponentNumericUpDown">
-                <Setter Property="NumericUpDown.Tag" Value="A" />
+                <Setter Property="Tag" Value="A" />
             </Style>
         </Style>
         <Style Selector="^[ColorModel=Hsva]">
             <Style Selector="^ /template/ NumericUpDown#Component1NumericUpDown">
-                <Setter Property="NumericUpDown.Tag" Value="H" />
+                <Setter Property="Tag" Value="H" />
             </Style>
             <Style Selector="^ /template/ NumericUpDown#Component2NumericUpDown">
-                <Setter Property="NumericUpDown.Tag" Value="S" />
+                <Setter Property="Tag" Value="S" />
             </Style>
             <Style Selector="^ /template/ NumericUpDown#Component3NumericUpDown">
-                <Setter Property="NumericUpDown.Tag" Value="V" />
+                <Setter Property="Tag" Value="V" />
             </Style>
             <Style Selector="^ /template/ NumericUpDown#AlphaComponentNumericUpDown">
-                <Setter Property="NumericUpDown.Tag" Value="A" />
+                <Setter Property="Tag" Value="A" />
             </Style>
         </Style>
     </ControlTheme>

src/Semi.Avalonia.ColorPicker/Index.axaml

@@ -2,8 +2,8 @@
     <Styles.Resources>
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
-                <MergeResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.ColorPicker/Light.axaml" />
+                <ResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.ColorPicker/Light.axaml" />
-                <MergeResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.ColorPicker/Dark.axaml" />
+                <ResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.ColorPicker/Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml" />

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

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

src/Semi.Avalonia.ColorPicker/Shared.axaml

@@ -6,15 +6,15 @@
     <Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness>
     <x:Double x:Key="ColorViewNumericUpDownWidth">70</x:Double>
 
-    <PathGeometry x:Key="ColorViewSpectrumIconGlyph">
+    <StreamGeometry x:Key="ColorViewSpectrumIconGlyph">
         M6.92,19L5,17.08L13.06,9L15,10.94M20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L13.84,6.41L11.91,4.5L10.5,5.91L11.92,7.33L3,16.25V21H7.75L16.67,12.08L18.09,13.5L19.5,12.09L17.58,10.17L20.7,7.05C21.1,6.65 21.1,6 20.71,5.63Z
-    </PathGeometry>
+    </StreamGeometry>
-    <PathGeometry x:Key="ColorViewPaletteIconGlyph">
+    <StreamGeometry x:Key="ColorViewPaletteIconGlyph">
         M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z
-    </PathGeometry>
+    </StreamGeometry>
-    <PathGeometry x:Key="ColorViewComponentsIconGlyph">
+    <StreamGeometry x:Key="ColorViewComponentsIconGlyph">
         M4 6.5C5.10457 6.5 6 5.60457 6 4.5C6 3.39543 5.10457 2.5 4 2.5C2.89543 2.5 2 3.39543 2 4.5C2 5.60457 2.89543 6.5 4 6.5ZM9.5 3C8.67157 3 8 3.67157 8 4.5C8 5.32843 8.67157 6 9.5 6H20.5C21.3284 6 22 5.32843 22 4.5C22 3.67157 21.3284 3 20.5 3H9.5ZM8 11.5C8 10.6716 8.67157 10 9.5 10H20.5C21.3284 10 22 10.6716 22 11.5C22 12.3284 21.3284 13 20.5 13H9.5C8.67157 13 8 12.3284 8 11.5ZM8 18.5C8 17.6716 8.67157 17 9.5 17H20.5C21.3284 17 22 17.6716 22 18.5C22 19.3284 21.3284 20 20.5 20H9.5C8.67157 20 8 19.3284 8 18.5ZM6 11.5C6 12.6046 5.10457 13.5 4 13.5C2.89543 13.5 2 12.6046 2 11.5C2 10.3954 2.89543 9.5 4 9.5C5.10457 9.5 6 10.3954 6 11.5ZM4 20.5C5.10457 20.5 6 19.6046 6 18.5C6 17.3954 5.10457 16.5 4 16.5C2.89543 16.5 2 17.3954 2 18.5C2 19.6046 2.89543 20.5 4 20.5Z
-    </PathGeometry>
+    </StreamGeometry>
 
     <x:Double x:Key="ColorSliderWidth">16</x:Double>
     <CornerRadius x:Key="ColorSliderCornerRadius">6</CornerRadius>
@@ -27,4 +27,6 @@
     <CornerRadius x:Key="ColorPreviewerCornerRadius">3</CornerRadius>
 
     <colorPicker:SemiColorDarkPalette x:Key="SemiColorPalette" />
+    
+    <PlacementMode x:Key="ColorPickerFlyoutPlacement">AnchorAndGravity</PlacementMode>
 </ResourceDictionary>

src/Semi.Avalonia.DataGrid/Dark.axaml

@@ -26,5 +26,5 @@
 
     <SolidColorBrush x:Key="DataGridRowGroupHeaderCurrentBorderBrush" Opacity="0.08" Color="White" />
 
-    <SolidColorBrush x:Key="DataGridDisabledBackground" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="DataGridDisabledBackground" Color="#E6E8EA" Opacity="0.04" />
 </ResourceDictionary>

src/Semi.Avalonia.DataGrid/DataGrid.axaml

@@ -19,7 +19,7 @@
             <Setter Property="MinHeight" Value="20" />
         </Style>
         <Style Selector="^:error:focus /template/ Border#PART_ContentPresenterBorder">
-            <Setter Property="Border.BorderBrush" Value="Transparent" />
+            <Setter Property="BorderBrush" Value="Transparent" />
         </Style>
         <Style Selector="^ /template/ DataValidationErrors">
             <Setter Property="Theme" Value="{DynamicResource TooltipDataValidationErrors}" />
@@ -292,7 +292,7 @@
                             Name="BackgroundBorder"
                             Grid.RowSpan="2"
                             Grid.ColumnSpan="2"
-                            Margin="2"
+                            Margin="{DynamicResource DataGridRowMargin}"
                             Background="{DynamicResource DataGridRowBackground}"
                             CornerRadius="3" />
                         <Rectangle
@@ -369,7 +369,7 @@
             </ControlTemplate>
         </Setter>
         <Style Selector="^:checked /template/ PathIcon">
-            <Setter Property="PathIcon.RenderTransform" Value="rotate(90deg)" />
+            <Setter Property="RenderTransform" Value="rotate(90deg)" />
         </Style>
     </ControlTheme>
 
@@ -471,6 +471,7 @@
         <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
         <Setter Property="SelectionMode" Value="Extended" />
         <Setter Property="GridLinesVisibility" Value="None" />
+        <Setter Property="ScrollViewer.AllowAutoHide" Value="True" />
         <Setter Property="HorizontalGridLinesBrush" Value="{DynamicResource DataGridLineBrush}" />
         <Setter Property="VerticalGridLinesBrush" Value="{DynamicResource DataGridLineBrush}" />
         <Setter Property="DropLocationIndicatorTemplate">
@@ -511,9 +512,13 @@
                             Grid.Row="1"
                             Grid.RowSpan="2"
                             Grid.Column="0"
-                            Grid.ColumnSpan="3">
+                            Grid.ColumnSpan="3"
+                            ScrollViewer.IsScrollInertiaEnabled="{TemplateBinding IsScrollInertiaEnabled}">
                             <DataGridRowsPresenter.GestureRecognizers>
-                                <ScrollGestureRecognizer CanHorizontallyScroll="True" CanVerticallyScroll="True" />
+                                <ScrollGestureRecognizer
+                                    CanHorizontallyScroll="True"
+                                    CanVerticallyScroll="True"
+                                    IsScrollInertiaEnabled="{Binding (ScrollViewer.IsScrollInertiaEnabled), ElementName=PART_RowsPresenter}" />
                             </DataGridRowsPresenter.GestureRecognizers>
                         </DataGridRowsPresenter>
                         <Rectangle
@@ -566,5 +571,15 @@
                 <Setter Property="IsVisible" Value="False" />
             </Style>
         </Style>
+
+        <Style Selector="^[(ScrollViewer.AllowAutoHide)=False]">
+            <Style Selector="^ /template/ DataGridRowsPresenter#PART_RowsPresenter">
+                <Setter Property="Grid.RowSpan" Value="1" />
+                <Setter Property="Grid.ColumnSpan" Value="2" />
+            </Style>
+            <Style Selector="^ /template/ DataGridColumnHeadersPresenter#PART_ColumnHeadersPresenter">
+                <Setter Property="Grid.ColumnSpan" Value="1" />
+            </Style>
+        </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia.DataGrid/Index.axaml

@@ -2,8 +2,8 @@
     <Styles.Resources>
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
-                <MergeResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.DataGrid/Light.axaml" />
+                <ResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.DataGrid/Light.axaml" />
-                <MergeResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.DataGrid/Dark.axaml" />
+                <ResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.DataGrid/Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceInclude Source="avares://Semi.Avalonia.DataGrid/DataGrid.axaml" />

src/Semi.Avalonia.DataGrid/Light.axaml

@@ -20,11 +20,10 @@
     <SolidColorBrush x:Key="DataGridRowPointeroverBackground" Opacity="0.09" Color="#2E3238" />
     <SolidColorBrush x:Key="DataGridRowSelectedBackground" Color="#EAF5FF" />
     <SolidColorBrush x:Key="DataGridRowSelectedPointeroverBackground" Color="#CBE7FE" />
-
     <SolidColorBrush x:Key="DataGridRowGroupHeaderExpandIconForeground" Opacity="0.62" Color="#1C1F23" />
     <SolidColorBrush x:Key="DataGridRowGroupHeaderBackground" Opacity="0.05" Color="#2E3238" />
 
     <SolidColorBrush x:Key="DataGridRowGroupHeaderCurrentBorderBrush" Opacity="0.08" Color="#1C1F23" />
 
-    <SolidColorBrush x:Key="DataGridDisabledBackground" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="DataGridDisabledBackground" Color="#2E3238" Opacity="0.02" />
 </ResourceDictionary>

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

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

src/Semi.Avalonia.DataGrid/Shared.axaml

@@ -8,12 +8,13 @@
     <Thickness x:Key="DataGridColumnHeaderPadding">12 0 0 0</Thickness>
     <x:Double x:Key="DataGridColumnHeaderMinHeight">32</x:Double>
 
-    <PathGeometry x:Key="DataGridColumnHeaderAscendingGlyph">M6.45096 8.34102L11.247 2.86102C11.3408 2.75361 11.4566 2.66753 11.5865 2.60854C11.7163 2.54956 11.8573 2.51904 12 2.51904C12.1426 2.51904 12.2836 2.54956 12.4135 2.60854C12.5433 2.66753 12.6591 2.75361 12.753 2.86102L17.549 8.34102C18.115 8.98802 17.655 10 16.796 10H7.20396C6.34396 10 5.88496 8.98802 6.45096 8.34102Z</PathGeometry>
+    <StreamGeometry x:Key="DataGridColumnHeaderAscendingGlyph">M6.45096 8.34102L11.247 2.86102C11.3408 2.75361 11.4566 2.66753 11.5865 2.60854C11.7163 2.54956 11.8573 2.51904 12 2.51904C12.1426 2.51904 12.2836 2.54956 12.4135 2.60854C12.5433 2.66753 12.6591 2.75361 12.753 2.86102L17.549 8.34102C18.115 8.98802 17.655 10 16.796 10H7.20396C6.34396 10 5.88496 8.98802 6.45096 8.34102Z</StreamGeometry>
-    <PathGeometry x:Key="DataGridColumnHeaderDescendingGlyph">M17.549 15.659L12.753 21.139C12.6591 21.2464 12.5434 21.3325 12.4135 21.3915C12.2836 21.4505 12.1427 21.481 12 21.481C11.8574 21.481 11.7164 21.4505 11.5865 21.3915C11.4566 21.3325 11.3409 21.2464 11.247 21.139L6.45101 15.659C5.88501 15.011 6.34501 14 7.20401 14H16.796C17.656 14 18.115 15.012 17.549 15.659Z</PathGeometry>
+    <StreamGeometry x:Key="DataGridColumnHeaderDescendingGlyph">M17.549 15.659L12.753 21.139C12.6591 21.2464 12.5434 21.3325 12.4135 21.3915C12.2836 21.4505 12.1427 21.481 12 21.481C11.8574 21.481 11.7164 21.4505 11.5865 21.3915C11.4566 21.3325 11.3409 21.2464 11.247 21.139L6.45101 15.659C5.88501 15.011 6.34501 14 7.20401 14H16.796C17.656 14 18.115 15.012 17.549 15.659Z</StreamGeometry>
 
     <Thickness x:Key="DataGridRowHeaderMargin">8 0</Thickness>
+    <Thickness x:Key="DataGridRowMargin">2</Thickness>
 
-    <PathGeometry x:Key="DataGridRowGroupHeaderExpandIconGlyph">M7.43934 19.7957C6.85355 19.2099 6.85355 18.2601 7.43934 17.6744L13.0962 12.0175L7.43934 6.36065C6.85355 5.77486 6.85355 4.82511 7.43934 4.23933C8.02513 3.65354 8.97487 3.65354 9.56066 4.23933L16.2782 10.9568C16.864 11.5426 16.864 12.4924 16.2782 13.0782L9.56066 19.7957C8.97487 20.3815 8.02513 20.3815 7.43934 19.7957Z</PathGeometry>
+    <StreamGeometry x:Key="DataGridRowGroupHeaderExpandIconGlyph">M7.43934 19.7957C6.85355 19.2099 6.85355 18.2601 7.43934 17.6744L13.0962 12.0175L7.43934 6.36065C6.85355 5.77486 6.85355 4.82511 7.43934 4.23933C8.02513 3.65354 8.97487 3.65354 9.56066 4.23933L16.2782 10.9568C16.864 11.5426 16.864 12.4924 16.2782 13.0782L9.56066 19.7957C8.97487 20.3815 8.02513 20.3815 7.43934 19.7957Z</StreamGeometry>
 
     <x:Double x:Key="DataGridRowGroupHeaderVisualStrokeThickness">1</x:Double>
 </ResourceDictionary>

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

@@ -3,17 +3,24 @@
     <PropertyGroup>
         <TargetFramework>net6.0</TargetFramework>
         <Nullable>enable</Nullable>
-        <LangVersion>11</LangVersion>
+        <LangVersion>latest</LangVersion>
-        <Version>11.0.1</Version>
+        <Version>11.0.10</Version>
-        <Authors>IRIHI Technology</Authors>
+        <Authors>IRIHI Technology Co., Ltd.</Authors>
         <Description>Avalonia Theme inspired by Semi Design.</Description>
-        <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
+        <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>
-        <AvaloniaVersion>11.0.0</AvaloniaVersion>
         <PackageLicenseExpression>MIT</PackageLicenseExpression>
+        <PackageIcon>irihi.png</PackageIcon>
+        <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
+        <AvaloniaVersion>11.0.10</AvaloniaVersion>
+    </PropertyGroup>
+
+    <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
+        <IsAotCompatible>true</IsAotCompatible>
     </PropertyGroup>
 
     <ItemGroup>
         <PackageReference Include="Avalonia.Controls.TreeDataGrid" Version="$(AvaloniaVersion)"/>
+        <None Include="irihi.png" Pack="true" PackagePath=""/>
     </ItemGroup>
 
 </Project>

src/Semi.Avalonia.TreeDataGrid/Shared.axaml

@@ -5,4 +5,5 @@
     </StreamGeometry>
     <StreamGeometry x:Key="TreeDataGridSortIconAscendingPath">M6.45096 8.34102L11.247 2.86102C11.3408 2.75361 11.4566 2.66753 11.5865 2.60854C11.7163 2.54956 11.8573 2.51904 12 2.51904C12.1426 2.51904 12.2836 2.54956 12.4135 2.60854C12.5433 2.66753 12.6591 2.75361 12.753 2.86102L17.549 8.34102C18.115 8.98802 17.655 10 16.796 10H7.20396C6.34396 10 5.88496 8.98802 6.45096 8.34102Z</StreamGeometry>
     <StreamGeometry x:Key="TreeDataGridItemCollapsedChevronPathData">M9.65618 3.44015L18.6322 11.2454C19.0906 11.644 19.0906 12.356 18.6322 12.7546L9.65618 20.5598C9.00895 21.1226 8 20.6629 8 19.8052V4.19475C8 3.33705 9.00895 2.87734 9.65618 3.44015Z</StreamGeometry>
+    <Thickness x:Key="TreeDataGridRowMargin">2</Thickness>
 </ResourceDictionary>

src/Semi.Avalonia.TreeDataGrid/TreeDataGrid.axaml

@@ -149,7 +149,7 @@
                 <Panel>
                     <Border
                         Name="RowBorder"
-                        Margin="2"
+                        Margin="{DynamicResource TreeDataGridRowMargin}"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         Background="{TemplateBinding Background}"
@@ -183,8 +183,7 @@
                     <CheckBox
                         HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                         VerticalAlignment="Center"
-                        IsChecked="{TemplateBinding Value,
+                        IsChecked="{TemplateBinding Value, Mode=TwoWay}"
-                                                    Mode=TwoWay}"
                         IsEnabled="{Binding !IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}"
                         IsThreeState="{TemplateBinding IsThreeState}"
                         Theme="{DynamicResource SimpleCheckBox}" />
@@ -216,7 +215,7 @@
             </ControlTemplate>
         </Setter>
         <Style Selector="^:checked /template/ PathIcon#ChevronPath">
-            <Setter Property="PathIcon.RenderTransform" Value="rotate(90deg)" />
+            <Setter Property="RenderTransform" Value="rotate(90deg)" />
         </Style>
     </ControlTheme>
 
@@ -239,8 +238,7 @@
                             DockPanel.Dock="Left">
                             <ToggleButton
                                 Focusable="False"
-                                IsChecked="{TemplateBinding IsExpanded,
+                                IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}"
-                                                            Mode=TwoWay}"
                                 IsVisible="{TemplateBinding ShowExpander}"
                                 Theme="{StaticResource TreeDataGridExpandCollapseChevron}" />
                         </Border>
@@ -287,8 +285,7 @@
                         <TextBox
                             Name="PART_Edit"
                             Classes="Small"
-                            Text="{TemplateBinding Value,
+                            Text="{TemplateBinding Value, Mode=TwoWay}" />
-                                                   Mode=TwoWay}" />
                     </Border>
                 </ControlTemplate>
             </Setter>

src/Semi.Avalonia/AssemblyInfo.cs

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

src/Semi.Avalonia/Controls/AdornerLayer.axaml

@@ -0,0 +1,13 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    x:ClassModifier="internal">
+    <ControlTheme x:Key="{x:Type AdornerLayer}" TargetType="AdornerLayer">
+        <Setter Property="DefaultFocusAdorner">
+            <FocusAdornerTemplate>
+                <Border BorderThickness="{DynamicResource AdornerLayerBorderThickness}"
+                        BorderBrush="{DynamicResource AdornerLayerStroke}" />
+            </FocusAdornerTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/AutoCompleteBox.axaml

@@ -84,10 +84,10 @@
             </Setter>
         </Style>
         <Style Selector="^.Large /template/ TextBox">
-            <Setter Property="TextBox.MinHeight" Value="{DynamicResource AutoCompleteBoxLargeHeight}" />
+            <Setter Property="MinHeight" Value="{DynamicResource AutoCompleteBoxLargeHeight}" />
         </Style>
         <Style Selector="^.Small /template/ TextBox">
-            <Setter Property="TextBox.MinHeight" Value="{DynamicResource AutoCompleteBoxSmallHeight}" />
+            <Setter Property="MinHeight" Value="{DynamicResource AutoCompleteBoxSmallHeight}" />
         </Style>
     </ControlTheme>
 

src/Semi.Avalonia/Controls/Border.axaml

@@ -29,10 +29,10 @@
         <Setter Property="Border.BorderThickness" Value="{DynamicResource ThicknessCardBorderThickness}" />
         <Setter Property="Border.Margin" Value="{DynamicResource ThicknessCardMargin}" />
         <Style Selector="^.Shadow">
-            <Setter Property="Border.BoxShadow" Value="{DynamicResource BorderCardBoxShadow}" />
+            <Setter Property="BoxShadow" Value="{DynamicResource BorderCardBoxShadow}" />
         </Style>
         <Style Selector="^.Hover:pointerover">
-            <Setter Property="Border.BoxShadow" Value="{DynamicResource BorderCardBoxShadow}" />
+            <Setter Property="BoxShadow" Value="{DynamicResource BorderCardBoxShadow}" />
         </Style>
 
     </ControlTheme>

src/Semi.Avalonia/Controls/Button.axaml

@@ -2,9 +2,9 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
-    <!--  Button Theme Key: Solid Light Border Borderless; Default is Light  -->
+    <!--  Button Theme Key: Light, Solid, Outline, Borderless; Default is Light  -->
-    <!--  Button Default Classes: Primary Secondary, Tertiary, Warning, Danger; Default is Primary  -->
+    <!--  Button Default Classes: Primary, Secondary, Tertiary, Success, Warning, Danger; Default is Primary  -->
-    <!--  State： default pointerover pressed disabled  -->
+    <!--  State: default, pointerover, pressed, disabled  -->
 
     <!--  Button Light  -->
     <ControlTheme x:Key="{x:Type Button}" TargetType="Button">
@@ -46,45 +46,44 @@
         </Style>
 
         <Style Selector="^.Primary">
-            <Setter Property="Button.Foreground" Value="{DynamicResource ButtonDefaultPrimaryForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultPrimaryForeground}" />
         </Style>
         <Style Selector="^.Secondary">
-            <Setter Property="Button.Foreground" Value="{DynamicResource ButtonDefaultSecondaryForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultSecondaryForeground}" />
         </Style>
         <Style Selector="^.Tertiary">
-            <Setter Property="Button.Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
         </Style>
         <Style Selector="^.Success">
-            <Setter Property="Button.Foreground" Value="{DynamicResource ButtonDefaultSuccessForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultSuccessForeground}" />
         </Style>
         <Style Selector="^.Warning">
-            <Setter Property="Button.Foreground" Value="{DynamicResource ButtonDefaultWarningForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultWarningForeground}" />
         </Style>
         <Style Selector="^.Danger">
-            <Setter Property="Button.Foreground" Value="{DynamicResource ButtonDefaultDangerForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDangerForeground}" />
         </Style>
 
         <Style Selector="^:pointerover">
-            <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonDefaultPointeroverBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPointeroverBorderBrush}" />
-            <Setter Property="Button.Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
         </Style>
 
         <Style Selector="^:pressed">
-            <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonDefaultPressedBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPressedBorderBrush}" />
-            <Setter Property="Button.Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
         </Style>
 
         <Style Selector="^:disabled">
-            <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
-            <Setter Property="Button.Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
-            <Setter Property="Button.Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
         </Style>
 
         <Style Selector="^.Large">
-            <Setter Property="Button.Padding" Value="{DynamicResource ButtonLargePadding}" />
+            <Setter Property="Padding" Value="{DynamicResource ButtonLargePadding}" />
         </Style>
         <Style Selector="^.Small">
-            <Setter Property="Button.Padding" Value="{DynamicResource ButtonSmallPadding}" />
+            <Setter Property="Padding" Value="{DynamicResource ButtonSmallPadding}" />
         </Style>
     </ControlTheme>
 
@@ -97,97 +96,127 @@
         <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidPrimaryBorderBrush}" />
 
         <Style Selector="^:pointerover">
-            <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
-            <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPointeroverBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPointeroverBorderBrush}" />
         </Style>
         <Style Selector="^:pressed">
-            <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
-            <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPressedBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPressedBorderBrush}" />
         </Style>
 
         <Style Selector="^.Primary">
-            <Setter Property="Button.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-            <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
-            <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidPrimaryBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryBorderBrush}" />
             <Style Selector="^:pointerover">
-                <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
-                <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPointeroverBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:pressed">
-                <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
-                <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPressedBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPressedBorderBrush}" />
             </Style>
         </Style>
         <Style Selector="^.Secondary">
-            <Setter Property="Button.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-            <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidSecondaryBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidSecondaryBackground}" />
-            <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidSecondaryBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidSecondaryBorderBrush}" />
             <Style Selector="^:pointerover">
-                <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidSecondaryPointeroverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidSecondaryPointeroverBackground}" />
-                <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidSecondaryPointeroverBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidSecondaryPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:pressed">
-                <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidSecondaryPressedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidSecondaryPressedBackground}" />
-                <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidSecondaryPressedBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidSecondaryPressedBorderBrush}" />
             </Style>
         </Style>
         <Style Selector="^.Tertiary">
-            <Setter Property="Button.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-            <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidTertiaryBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidTertiaryBackground}" />
-            <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidTertiaryBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidTertiaryBorderBrush}" />
             <Style Selector="^:pointerover">
-                <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidTertiaryPointeroverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidTertiaryPointeroverBackground}" />
-                <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidTertiaryPointeroverBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidTertiaryPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:pressed">
-                <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidTertiaryPressedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidTertiaryPressedBackground}" />
-                <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidTertiaryPressedBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidTertiaryPressedBorderBrush}" />
             </Style>
         </Style>
         <Style Selector="^.Success">
-            <Setter Property="Button.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-            <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidSuccessBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidSuccessBackground}" />
-            <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidSuccessBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidSuccessBorderBrush}" />
             <Style Selector="^:pointerover">
-                <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidSuccessPointeroverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidSuccessPointeroverBackground}" />
-                <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidSuccessPointeroverBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidSuccessPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:pressed">
-                <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidSuccessPressedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidSuccessPressedBackground}" />
-                <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidSuccessPressedBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidSuccessPressedBorderBrush}" />
             </Style>
         </Style>
         <Style Selector="^.Warning">
-            <Setter Property="Button.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-            <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidWarningBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidWarningBackground}" />
-            <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidWarningBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidWarningBorderBrush}" />
             <Style Selector="^:pointerover">
-                <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidWarningPointeroverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidWarningPointeroverBackground}" />
-                <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidWarningPointeroverBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidWarningPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:pressed">
-                <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidWarningPressedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidWarningPressedBackground}" />
-                <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidWarningPressedBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidWarningPressedBorderBrush}" />
             </Style>
         </Style>
         <Style Selector="^.Danger">
-            <Setter Property="Button.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-            <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidDangerBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidDangerBackground}" />
-            <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidDangerBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidDangerBorderBrush}" />
             <Style Selector="^:pointerover">
-                <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidDangerPointeroverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidDangerPointeroverBackground}" />
-                <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidDangerPointeroverBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidDangerPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:pressed">
-                <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidDangerPressedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidDangerPressedBackground}" />
-                <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidDangerPressedBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidDangerPressedBorderBrush}" />
             </Style>
         </Style>
 
         <Style Selector="^:disabled">
-            <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
-            <Setter Property="Button.Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidDisabledBackground}" />
-            <Setter Property="Button.Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="OutlineButton"
+        BasedOn="{StaticResource {x:Type Button}}"
+        TargetType="Button">
+        <Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        <Style Selector="^:pointerover">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlinePointeroverBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^:pressed">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlinePressedBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^.Success">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineSuccessBorderBrush}" />
+        </Style>
+        <Style Selector="^.Warning">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineWarningBorderBrush}" />
+        </Style>
+        <Style Selector="^.Danger">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" />
+        </Style>
+        <Style Selector="^:disabled">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
         </Style>
     </ControlTheme>
 
@@ -198,10 +227,33 @@
         <Setter Property="Button.Background" Value="Transparent" />
         <Setter Property="Button.BorderBrush" Value="Transparent" />
         <Style Selector="^:disabled">
-            <Setter Property="Button.BorderBrush" Value="Transparent" />
+            <Setter Property="BorderBrush" Value="Transparent" />
-            <Setter Property="Button.Background" Value="Transparent" />
+            <Setter Property="Background" Value="Transparent" />
-            <Setter Property="Button.Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
         </Style>
 
     </ControlTheme>
+
+    <ControlTheme x:Key="InnerIconButton" TargetType="Button">
+        <Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerForeground}" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="Button">
+                <ContentControl Background="Transparent">
+                    <PathIcon
+                        Width="16"
+                        Height="16"
+                        Margin="{TemplateBinding Padding}"
+                        Data="{TemplateBinding Content}"
+                        Foreground="{TemplateBinding Foreground}" />
+                </ContentControl>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover">
+            <Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerPointeroverForeground}" />
+        </Style>
+        <Style Selector="^:pressed">
+            <Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerPressedForeground}" />
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/ButtonSpinner.axaml

@@ -34,7 +34,6 @@
 
         <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
             <Setter Property="Background" Value="{DynamicResource ButtonSpinnerRepeatButtonDisabledBackground}" />
-            <Setter Property="Foreground" Value="{DynamicResource ButtonSpinnerRepeatButtonDisabledForeground}" />
         </Style>
     </ControlTheme>
 
@@ -42,7 +41,6 @@
         <Setter Property="ButtonSpinner.BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}" />
         <Setter Property="ButtonSpinner.BorderThickness" Value="0" />
         <Setter Property="ButtonSpinner.MinWidth" Value="300" />
-        <!--  Add Resource  -->
         <Setter Property="ButtonSpinner.Template">
             <ControlTemplate TargetType="ButtonSpinner">
                 <Grid ColumnDefinitions="Auto, *, Auto">
@@ -50,8 +48,7 @@
                         Grid.Column="1"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
-                        UseLayoutRounding="False">
                         <ContentPresenter
                             Name="PART_ContentPresenter"
                             Padding="{TemplateBinding Padding}"
@@ -98,7 +95,7 @@
         </Setter>
         <Style Selector="^[ButtonSpinnerLocation=Left] /template/ Border#ButtonGroup">
             <Setter Property="Grid.Column" Value="0" />
-            <Setter Property="Border.Margin" Value="0 0 4 0" />
+            <Setter Property="Margin" Value="0 0 4 0" />
         </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/Calendar.axaml

@@ -31,6 +31,7 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type CalendarItem}" TargetType="CalendarItem">
+        <Setter Property="CalendarItem.MinWidth" Value="{DynamicResource CalendarMinWidth}" />
         <Setter Property="CalendarItem.MinHeight" Value="{DynamicResource CalendarMinHeight}" />
         <Setter Property="CalendarItem.DayTitleTemplate">
             <Template>
@@ -53,7 +54,7 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <Grid
-                        MinWidth="{DynamicResource CalendarMinWidth}"
+                        MinWidth="{TemplateBinding MinWidth}"
                         MinHeight="{TemplateBinding MinHeight}"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
@@ -170,18 +171,18 @@
         </Setter>
 
         <Style Selector="^:pointerover /template/ ContentControl">
-            <Setter Property="ContentControl.Background" Value="{DynamicResource CalendarItemCalendarButtonPointeroverBackground}" />
+            <Setter Property="Background" Value="{DynamicResource CalendarItemCalendarButtonPointeroverBackground}" />
         </Style>
 
         <Style Selector="^:pressed /template/ ContentControl">
-            <Setter Property="ContentControl.Background" Value="{DynamicResource CalendarItemCalendarButtonPressedBackground}" />
+            <Setter Property="Background" Value="{DynamicResource CalendarItemCalendarButtonPressedBackground}" />
         </Style>
 
         <Style Selector="^:selected">
             <Style Selector="^ /template/ ContentControl">
-                <Setter Property="ContentControl.Background" Value="{DynamicResource CalendarItemCalendarButtonSelectedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource CalendarItemCalendarButtonSelectedBackground}" />
-                <Setter Property="ContentControl.Foreground" Value="{DynamicResource CalendarItemCalendarButtonSelectedForeground}" />
+                <Setter Property="Foreground" Value="{DynamicResource CalendarItemCalendarButtonSelectedForeground}" />
-                <Setter Property="ContentControl.FontWeight" Value="{DynamicResource CalendarItemCalendarButtonSelectedFontWeight}" />
+                <Setter Property="FontWeight" Value="{DynamicResource CalendarItemCalendarButtonSelectedFontWeight}" />
             </Style>
         </Style>
 
@@ -232,25 +233,25 @@
         </Setter>
 
         <Style Selector="^:pointerover /template/ ContentControl">
-            <Setter Property="ContentControl.Background" Value="{DynamicResource CalendarItemCalendarDayButtonPointeroverBackground}" />
+            <Setter Property="Background" Value="{DynamicResource CalendarItemCalendarDayButtonPointeroverBackground}" />
         </Style>
 
         <Style Selector="^:pressed /template/ ContentControl">
-            <Setter Property="ContentControl.Background" Value="{DynamicResource CalendarItemCalendarDayButtonPressedBackground}" />
+            <Setter Property="Background" Value="{DynamicResource CalendarItemCalendarDayButtonPressedBackground}" />
         </Style>
 
         <Style Selector="^:today /template/ ContentControl">
-            <Setter Property="ContentControl.Background" Value="{DynamicResource CalendarItemCalendarDayButtonTodayBackground}" />
+            <Setter Property="Background" Value="{DynamicResource CalendarItemCalendarDayButtonTodayBackground}" />
-            <Setter Property="ContentControl.Foreground" Value="{DynamicResource CalendarItemCalendarDayButtonTodayForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource CalendarItemCalendarDayButtonTodayForeground}" />
         </Style>
 
         <Style Selector="^:selected /template/ ContentControl">
-            <Setter Property="ContentControl.Background" Value="{DynamicResource CalendarItemCalendarDayButtonSelectedBackground}" />
+            <Setter Property="Background" Value="{DynamicResource CalendarItemCalendarDayButtonSelectedBackground}" />
-            <Setter Property="ContentControl.Foreground" Value="{DynamicResource CalendarItemCalendarDayButtonSelectedForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource CalendarItemCalendarDayButtonSelectedForeground}" />
         </Style>
 
         <Style Selector="^:inactive /template/ ContentControl">
-            <Setter Property="ContentControl.Foreground" Value="{DynamicResource CalendarItemCalendarDayButtonInactiveForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource CalendarItemCalendarDayButtonInactiveForeground}" />
         </Style>
 
         <Style Selector="^:blackout /template/ ContentControl">

src/Semi.Avalonia/Controls/CalendarDatePicker.axaml

@@ -3,33 +3,13 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
     <!--  Add Resources Here  -->
-    <ControlTheme x:Key="CalendarDatePickerButton" TargetType="Button">
-        <Setter Property="Button.Foreground" Value="{DynamicResource CalendarDatePickerIconForeground}" />
-        <Setter Property="Button.Template">
-            <ControlTemplate TargetType="Button">
-                <Grid Margin="{TemplateBinding Padding}" Background="Transparent">
-                    <PathIcon
-                        Width="16"
-                        Height="16"
-                        Data="{DynamicResource CalendarDatePickerIconGlyph}"
-                        Foreground="{TemplateBinding Foreground}" />
-                </Grid>
-            </ControlTemplate>
-        </Setter>
-        <Style Selector="^:pointerover /template/ PathIcon">
-            <Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerIconPointeroverForeground}" />
-        </Style>
-        <Style Selector="^:pressed /template/ PathIcon">
-            <Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerIconPointeroverForeground}" />
-        </Style>
-    </ControlTheme>
     <ControlTheme x:Key="{x:Type CalendarDatePicker}" TargetType="CalendarDatePicker">
         <Setter Property="Background" Value="{DynamicResource CalendarDatePickerBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerForeground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerBorderBrush}" />
         <Setter Property="BorderThickness" Value="{DynamicResource CalendarDatePickerBorderThickness}" />
         <Setter Property="CornerRadius" Value="{DynamicResource CalendarDatePickerCornerRadius}" />
-        <Setter Property="CalendarDatePicker.IsTodayHighlighted" Value="True" />
+        <Setter Property="IsTodayHighlighted" Value="True" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
@@ -47,82 +27,91 @@
                             Background="{TemplateBinding Background}"
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}"
-                            CornerRadius="{TemplateBinding CornerRadius}">
+                            CornerRadius="{TemplateBinding CornerRadius}"/>
-                            <Grid
+                        <Grid
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            ColumnDefinitions="*, Auto">
+                            <TextBox
+                                Name="PART_TextBox"
+                                Grid.Column="0"
+                                MinHeight="{DynamicResource CalendarDatePickerDefaultHeight}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Center"
-                                ColumnDefinitions="*,Auto">
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                <TextBox
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                    Name="PART_TextBox"
+                                Background="Transparent"
-                                    Grid.Column="0"
+                                BorderBrush="Transparent"
-                                    MinHeight="{DynamicResource CalendarDatePickerDefaultHeight}"
+                                BorderThickness="0"
-                                    HorizontalAlignment="Stretch"
+                                CornerRadius="{TemplateBinding CornerRadius}"
-                                    VerticalAlignment="Center"
+                                Foreground="{TemplateBinding Foreground}"
-                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                Theme="{DynamicResource NonErrorTextBox}"
-                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                UseFloatingWatermark="{TemplateBinding UseFloatingWatermark}"
+                                Watermark="{TemplateBinding Watermark}">
+                                <TextBox.Styles>
+                                    <Style Selector="TextBox#PART_TextBox:pointerover /template/ Border#PART_ContentPresenterBorder">
+                                        <!--  By default the TextBox has its own focused state, override this to disable it here  -->
+                                        <Setter Property="Background" Value="Transparent" />
+                                        <Setter Property="BorderBrush" Value="Transparent" />
+                                        <Setter Property="BorderThickness" Value="0" />
+                                    </Style>
+                                    <Style Selector="TextBox#PART_TextBox:focus /template/ Border#PART_ContentPresenterBorder">
+                                        <!--  By default the TextBox has its own focused state, override this to disable it here  -->
+                                        <Setter Property="Background" Value="Transparent" />
+                                        <Setter Property="BorderBrush" Value="Transparent" />
+                                        <Setter Property="BorderThickness" Value="0" />
+                                    </Style>
+                                    <Style Selector="TextBox#PART_TextBox:disabled">
+                                        <Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
+                                            <!--  By default the TextBox has its own disabled state, override this to make the border background show through  -->
+                                            <Setter Property="Background" Value="Transparent" />
+                                            <Setter Property="BorderBrush" Value="Transparent" />
+                                        </Style>
+                                    </Style>
+                                </TextBox.Styles>
+                            </TextBox>
+                            <Button
+                                Name="ClearButton"
+                                Grid.Column="1"
+                                Padding="0,0,8,0"
+                                Content="{DynamicResource IconButtonClearData}"
+                                Command="{Binding $parent[CalendarDatePicker].Clear}"
+                                Focusable="False"
+                                IsVisible="False"
+                                Theme="{DynamicResource InnerIconButton}" />
+                            <Button
+                                Name="PART_Button"
+                                Grid.Column="1"
+                                Padding="0,0,8,0"
+                                Content="{DynamicResource CalendarDatePickerIconGlyph}"
+                                Focusable="False"
+                                Theme="{DynamicResource InnerIconButton}" />
+                            <Popup
+                                Name="PART_Popup"
+                                Grid.Column="0"
+                                HorizontalOffset="-8"
+                                IsLightDismissEnabled="True"
+                                PlacementTarget="{TemplateBinding}"
+                                VerticalOffset="-4">
+                                <Border
+                                    Margin="8"
                                     Background="Transparent"
-                                    BorderBrush="Transparent"
+                                    BoxShadow="{DynamicResource CalendarDatePickerPopupBoxShadows}"
-                                    BorderThickness="0"
+                                    CornerRadius="{DynamicResource CalendarCornerRadius}">
-                                    CornerRadius="{TemplateBinding CornerRadius}"
+                                    <Calendar
-                                    Foreground="{TemplateBinding Foreground}"
+                                        Name="PART_Calendar"
-                                    Theme="{DynamicResource NonErrorTextBox}"
+                                        BorderThickness="0"
-                                    UseFloatingWatermark="{TemplateBinding UseFloatingWatermark}"
+                                        CornerRadius="{Binding $parent[Border].CornerRadius}"
-                                    Watermark="{TemplateBinding Watermark}">
+                                        DisplayDate="{TemplateBinding DisplayDate}"
-                                    <TextBox.Styles>
+                                        DisplayDateEnd="{TemplateBinding DisplayDateEnd}"
-                                        <Style Selector="TextBox#PART_TextBox:pointerover /template/ Border#PART_ContentPresenterBorder">
+                                        DisplayDateStart="{TemplateBinding DisplayDateStart}"
-                                            <!--  By default the TextBox has its own focused state, override this to disable it here  -->
+                                        FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
-                                            <Setter Property="Background" Value="Transparent" />
+                                        IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
-                                            <Setter Property="BorderBrush" Value="Transparent" />
+                                        SelectedDate="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedDate, Mode=TwoWay}">
-                                            <Setter Property="BorderThickness" Value="0" />
+                                    </Calendar>
-                                        </Style>
+                                </Border>
-                                        <Style Selector="TextBox#PART_TextBox:focus /template/ Border#PART_ContentPresenterBorder">
+                            </Popup>
-                                            <!--  By default the TextBox has its own focused state, override this to disable it here  -->
+                        </Grid>
-                                            <Setter Property="Background" Value="Transparent" />
-                                            <Setter Property="BorderBrush" Value="Transparent" />
-                                            <Setter Property="BorderThickness" Value="0" />
-                                        </Style>
-                                        <Style Selector="TextBox#PART_TextBox:disabled">
-                                            <Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
-                                                <!--  By default the TextBox has its own disabled state, override this to make the border background show through  -->
-                                                <Setter Property="Background" Value="Transparent" />
-                                                <Setter Property="BorderBrush" Value="Transparent" />
-                                            </Style>
-                                        </Style>
-                                    </TextBox.Styles>
-                                </TextBox>
-                                <Button
-                                    Name="PART_Button"
-                                    Grid.Column="1"
-                                    Padding="0,0,8,0"
-                                    Cursor="Hand"
-                                    Focusable="False"
-                                    Theme="{DynamicResource CalendarDatePickerButton}" />
-                                <Popup
-                                    Name="PART_Popup"
-                                    HorizontalOffset="-8"
-                                    IsLightDismissEnabled="True"
-                                    PlacementTarget="{TemplateBinding}"
-                                    VerticalOffset="-4">
-                                    <Border
-                                        Margin="8"
-                                        Background="Transparent"
-                                        BoxShadow="{DynamicResource CalendarDatePickerPopupBoxShadows}"
-                                        CornerRadius="{DynamicResource CalendarCornerRadius}">
-                                        <Calendar
-                                            Name="PART_Calendar"
-                                            BorderThickness="0"
-                                            CornerRadius="{Binding $parent[Border].CornerRadius}"
-                                            DisplayDate="{TemplateBinding DisplayDate}"
-                                            DisplayDateEnd="{TemplateBinding DisplayDateEnd}"
-                                            DisplayDateStart="{TemplateBinding DisplayDateStart}"
-                                            FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
-                                            IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
-                                            SelectedDate="{TemplateBinding SelectedDate,
-                                                                           Mode=TwoWay}" />
-                                    </Border>
-                                </Popup>
-                            </Grid>
-                        </Border>
 
                     </Panel>
                 </DataValidationErrors>
@@ -130,15 +119,20 @@
             </ControlTemplate>
         </Setter>
 
-        <Style Selector="^.Large">
+        <Style Selector="^.clearButton, ^.ClearButton">
-            <Style Selector="^ /template/ TextBox#PART_TextBox">
+            <Style Selector="^:pointerover /template/ Button#ClearButton">
-                <Setter Property="TextBox.MinHeight" Value="{DynamicResource CalendarDatePickerInnerLargeHeight}" />
+                <Setter Property="IsVisible" Value="{Binding $parent[CalendarDatePicker].SelectedDate, Converter={x:Static ObjectConverters.IsNotNull}}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Button#PART_Button">
+                <Setter Property="IsVisible" Value="{Binding $parent[CalendarDatePicker].SelectedDate, Converter={x:Static ObjectConverters.IsNull}}" />
             </Style>
         </Style>
-        <Style Selector="^.Small">
+
-            <Style Selector="^ /template/ TextBox#PART_TextBox">
+        <Style Selector="^.Large /template/ TextBox#PART_TextBox">
-                <Setter Property="TextBox.MinHeight" Value="{DynamicResource CalendarDatePickerInnerSmallHeight}" />
+            <Setter Property="MinHeight" Value="{DynamicResource CalendarDatePickerInnerLargeHeight}" />
-            </Style>
+        </Style>
+        <Style Selector="^.Small /template/ TextBox#PART_TextBox">
+            <Setter Property="MinHeight" Value="{DynamicResource CalendarDatePickerInnerSmallHeight}" />
         </Style>
 
         <Style Selector="^:pointerover">
@@ -188,21 +182,21 @@
 
         <Style Selector="^.Bordered">
             <Style Selector="^ Border#Background">
-                <Setter Property="Border.Background" Value="{DynamicResource CalendarDatePickerBorderedDefaultBackground}" />
+                <Setter Property="Background" Value="{DynamicResource CalendarDatePickerBorderedDefaultBackground}" />
-                <Setter Property="Border.BorderBrush" Value="{DynamicResource CalendarDatePickerBorderedDefaultBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerBorderedDefaultBorderBrush}" />
             </Style>
             <Style Selector="^:pointerover /template/ Border#Background">
-                <Setter Property="Border.Background" Value="{DynamicResource CalendarDatePickerBorderedPointeroverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource CalendarDatePickerBorderedPointeroverBackground}" />
-                <Setter Property="Border.BorderBrush" Value="{DynamicResource CalendarDatePickerBorderedPointeroverBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerBorderedPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:focus-within /template/ Border#Background">
-                <Setter Property="Border.Background" Value="{DynamicResource CalendarDatePickerBorderedPointeroverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource CalendarDatePickerBorderedPointeroverBackground}" />
-                <Setter Property="Border.BorderBrush" Value="{DynamicResource CalendarDatePickerBorderedPointeroverBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerBorderedPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:disabled">
                 <Style Selector="^ /template/ Border#Background">
                     <Setter Property="Background" Value="{DynamicResource CalendarDatePickerDisabledBackground}" />
-                    <Setter Property="Border.BorderBrush" Value="Transparent" />
+                    <Setter Property="BorderBrush" Value="Transparent" />
                 </Style>
 
                 <Style Selector="^ /template/ Button#PART_Button">
@@ -215,16 +209,16 @@
                     <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsBorderBrush}" />
                 </Style>
                 <Style Selector="^:pointerover /template/ Border#Background">
-                    <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
-                    <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsPointerOverBorderBrush}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsPointerOverBorderBrush}" />
                 </Style>
                 <Style Selector="^:pressed /template/ Border#Background">
-                    <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
+                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
-                    <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsPressedBorderBrush}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsPressedBorderBrush}" />
                 </Style>
                 <Style Selector="^:focus-within /template/ Border#Background">
-                    <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
-                    <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
                 </Style>
             </Style>
         </Style>

src/Semi.Avalonia/Controls/Carousel.axaml

@@ -34,8 +34,8 @@
                     <Border Padding="4" Background="Transparent">
                         <Ellipse
                             Name="Container"
-                            Width="{DynamicResource CarouselIndicatorSelectedHeight}"
+                            Width="{DynamicResource CarouselIndicatorWidth}"
-                            Height="{DynamicResource CarouselIndicatorSelectedHeight}"
+                            Height="{DynamicResource CarouselIndicatorHeight}"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center"
                             Fill="{TemplateBinding Foreground}" />
@@ -61,18 +61,12 @@
         <Setter Property="ListBoxItem.Template">
             <ControlTemplate TargetType="ListBoxItem">
                 <Panel Background="Transparent">
-                    <Border Padding="4,0" Background="Transparent">
+                    <Border Padding="2,0" Background="Transparent">
                         <Border
                             Name="Container"
-                            Width="{DynamicResource CarouselIndicatorSelectedHeight}"
+                            Width="{DynamicResource CarouselIndicatorLineWidth}"
-                            Height="{DynamicResource CarouselIndicatorSelectedHeight}"
+                            Height="{DynamicResource CarouselIndicatorLineHeight}"
-                            Background="{TemplateBinding Background}"
+                            Background="{TemplateBinding Background}">
-                            CornerRadius="99">
-                            <Border.Transitions>
-                                <Transitions>
-                                    <DoubleTransition Property="Width" Duration="0:0:0.2" />
-                                </Transitions>
-                            </Border.Transitions>
                         </Border>
                     </Border>
                 </Panel>
@@ -86,7 +80,44 @@
         </Style>
         <Style Selector="^:selected /template/ Border#Container">
             <Setter Property="Background" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
-            <Setter Property="Width" Value="{DynamicResource CarouselIndicatorLineSelectedWidth}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="CarouselIndicatorColumnarListBoxItem" TargetType="ListBoxItem">
+        <Setter Property="ListBoxItem.Cursor" Value="Hand" />
+        <Setter Property="ListBoxItem.Background" Value="{DynamicResource CarouselIndicatorForeground}" />
+        <Setter Property="ListBoxItem.Template">
+            <ControlTemplate TargetType="ListBoxItem">
+                <Panel Background="Transparent">
+                    <Border Padding="2,0" Background="Transparent">
+                        <Border Width="{DynamicResource CarouselIndicatorColumnarWidth}"
+                                Height="{DynamicResource CarouselIndicatorColumnarSelectedHeight}">
+                            <Rectangle
+                                Name="Container"
+                                Width="{DynamicResource CarouselIndicatorColumnarWidth}"
+                                Height="{DynamicResource CarouselIndicatorColumnarHeight}"
+                                VerticalAlignment="Bottom"
+                                Fill="{TemplateBinding Background}">
+                                <Rectangle.Transitions>
+                                    <Transitions>
+                                        <DoubleTransition Property="Height" Duration="0:0:0.2"></DoubleTransition>
+                                    </Transitions>
+                                </Rectangle.Transitions>
+                            </Rectangle>
+                        </Border>
+                    </Border>
+                </Panel>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover /template/ Rectangle#Container">
+            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" />
+        </Style>
+        <Style Selector="^:pressed /template/ Rectangle#Container">
+            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
+        </Style>
+        <Style Selector="^:selected /template/ Rectangle#Container">
+            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
+            <Setter Property="Height" Value="{DynamicResource CarouselIndicatorColumnarSelectedHeight}" />
         </Style>
     </ControlTheme>
 
@@ -136,7 +167,7 @@
                         Name="PART_ItemsPresenter2"
                         Grid.Row="1"
                         Grid.Column="1"
-                        MaxHeight="20"
+                        MaxHeight="30"
                         Margin="0,8"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
@@ -178,7 +209,19 @@
             </ControlTemplate>
         </Setter>
         <Style Selector="^.Line /template/ ListBox#PART_ItemsPresenter2">
-            <Setter Property="ListBox.ItemContainerTheme" Value="{DynamicResource CarouselIndicatorLineListBoxItem}" />
+            <Setter Property="ItemContainerTheme" Value="{DynamicResource CarouselIndicatorLineListBoxItem}" />
+        </Style>
+        <Style Selector="^.Columnar /template/ ListBox#PART_ItemsPresenter2">
+            <Setter Property="ItemContainerTheme" Value="{DynamicResource CarouselIndicatorColumnarListBoxItem}" />
+        </Style>
+        <Style Selector="^.Left /template/ ListBox#PART_ItemsPresenter2">
+            <Setter Property="HorizontalAlignment" Value="Left" />
+        </Style>
+        <Style Selector="^.Center /template/ ListBox#PART_ItemsPresenter2">
+            <Setter Property="HorizontalAlignment" Value="Center" />
+        </Style>
+        <Style Selector="^.Right /template/ ListBox#PART_ItemsPresenter2">
+            <Setter Property="HorizontalAlignment" Value="Right" />
         </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/CheckBox.axaml

@@ -26,6 +26,7 @@
                     <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
                         <Grid
                             Grid.Column="0"
+                            TemplatedControl.IsTemplateFocusTarget="True"
                             Margin="0,0,0,0"
                             VerticalAlignment="Center">
                             <Border
@@ -123,8 +124,8 @@
                     <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
                 </Style>
 
-                <Style Selector="^ /template/ Path#CheckGlyph">
+                <Style Selector="^ /template/ PathIcon#CheckGlyph">
-                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
                 </Style>
             </Style>
         </Style>
@@ -166,8 +167,8 @@
                     <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
                 </Style>
 
-                <Style Selector="^ /template/ Path#CheckGlyph">
+                <Style Selector="^ /template/ PathIcon#CheckGlyph">
-                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
                 </Style>
             </Style>
         </Style>
@@ -275,8 +276,8 @@
                     <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
                 </Style>
 
-                <Style Selector="^ /template/ Path#CheckGlyph">
+                <Style Selector="^ /template/ PathIcon#CheckGlyph">
-                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
                 </Style>
             </Style>
         </Style>
@@ -315,8 +316,8 @@
                     <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
                 </Style>
 
-                <Style Selector="^ /template/ Path#CheckGlyph">
+                <Style Selector="^ /template/ PathIcon#CheckGlyph">
-                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
                 </Style>
             </Style>
         </Style>
@@ -457,8 +458,8 @@
                     <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
                 </Style>
 
-                <Style Selector="^ /template/ Path#CheckGlyph">
+                <Style Selector="^ /template/ PathIcon#CheckGlyph">
-                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
                 </Style>
             </Style>
         </Style>
@@ -512,8 +513,8 @@
                     <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
                 </Style>
 
-                <Style Selector="^ /template/ Path#CheckGlyph">
+                <Style Selector="^ /template/ PathIcon#CheckGlyph">
-                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
                 </Style>
             </Style>
         </Style>

src/Semi.Avalonia/Controls/ComboBox.axaml

@@ -33,6 +33,7 @@
         <Setter Property="MaxDropDownHeight" Value="504" />
         <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorBackground}" />
         <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="CornerRadius" Value="{DynamicResource ComboBoxSelectorCornerRadius}" />
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
         <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
@@ -40,26 +41,27 @@
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Top" />
+        <Setter Property="MinHeight" Value="{DynamicResource ComboBoxDefaultHeight}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ComboBox">
                 <DataValidationErrors>
-                    <Grid ColumnDefinitions="*,32">
+                    <Grid ColumnDefinitions="*, Auto">
                         <Border
                             x:Name="Background"
                             Grid.Column="0"
                             Grid.ColumnSpan="2"
-                            MinWidth="{DynamicResource ComboBoxThemeMinWidth}"
-                            MinHeight="{DynamicResource ComboBoxDefaultHeight}"
                             Background="{TemplateBinding Background}"
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}"
-                            CornerRadius="{TemplateBinding CornerRadius}" />
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            MinHeight="{TemplateBinding MinHeight}" />
                         <TextBlock
                             x:Name="PlaceholderTextBlock"
                             Grid.Column="0"
                             Margin="{TemplateBinding Padding}"
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            TextTrimming="CharacterEllipsis"
                             Foreground="{TemplateBinding Foreground}"
                             IsVisible="{TemplateBinding SelectionBoxItem,
                                                         Converter={x:Static ObjectConverters.IsNull}}"
@@ -73,7 +75,15 @@
                             VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                             Content="{TemplateBinding SelectionBoxItem}"
                             ContentTemplate="{TemplateBinding ItemTemplate}" />
-
+                        <Button
+                            Name="ClearButton"
+                            Grid.Column="1"
+                            Margin="0,0,8,0"
+                            Command="{Binding $parent[ComboBox].Clear}"
+                            Content="{DynamicResource IconButtonClearData}"
+                            Focusable="False"
+                            IsVisible="False"
+                            Theme="{DynamicResource InnerIconButton}" />
                         <Border
                             x:Name="DropDownOverlay"
                             Grid.Column="1"
@@ -88,9 +98,7 @@
                             Grid.Column="1"
                             Width="12"
                             Height="12"
-                            Margin="0,0,10,0"
+                            Margin="0,0,12,0"
-                            HorizontalAlignment="Right"
-                            VerticalAlignment="Center"
                             Data="{DynamicResource ComboBoxIcon}"
                             Foreground="{DynamicResource ComboBoxIconDefaultForeground}"
                             IsHitTestVisible="False"
@@ -118,7 +126,10 @@
                                 BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
                                 ClipToBounds="True"
                                 CornerRadius="6">
-                                <ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                                <ScrollViewer
+                                    HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                                    IsDeferredScrollingEnabled="{TemplateBinding (ScrollViewer.IsDeferredScrollingEnabled)}"
+                                    VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                                     <ItemsPresenter
                                         Name="PART_ItemsPresenter"
                                         Margin="{DynamicResource ComboBoxDropdownContentMargin}"
@@ -131,20 +142,38 @@
             </ControlTemplate>
         </Setter>
 
-        <Style Selector="^.Large /template/ Border#Background">
+        <Style Selector="^.clearButton, ^.ClearButton">
-            <Setter Property="ComboBox.MinHeight" Value="{DynamicResource ComboBoxLargeHeight}" />
+            <Style Selector="^:pointerover /template/ Button#ClearButton">
+                <Setter Property="IsVisible" Value="{Binding $parent[ComboBox].SelectionBoxItem, Converter={x:Static ObjectConverters.IsNotNull}}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ PathIcon#DropDownGlyph">
+                <Setter Property="IsVisible" Value="{Binding $parent[ComboBox].SelectionBoxItem, Converter={x:Static ObjectConverters.IsNull}}"/>
+            </Style>
         </Style>
-        <Style Selector="^.Small /template/ Border#Background">
+
-            <Setter Property="ComboBox.MinHeight" Value="{DynamicResource ComboBoxSmallHeight}" />
+        <Style Selector="^.Large">
+            <Setter Property="MinHeight" Value="{DynamicResource ComboBoxLargeHeight}" />
+        </Style>
+        <Style Selector="^.Small">
+            <Setter Property="MinHeight" Value="{DynamicResource ComboBoxSmallHeight}" />
         </Style>
 
         <!--  Pointerover State  -->
         <Style Selector="^:pointerover">
             <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorPointeroverBackground}" />
             <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorPointeroverBorderBrush}" />
+            <Style Selector="^ /template/ PathIcon#DropDownGlyph">
+                <Setter Property="Foreground" Value="{DynamicResource ComboBoxIconPointeroverForeground}" />
+            </Style>
         </Style>
-        <Style Selector="^:pointerover /template/ PathIcon#DropDownGlyph">
+
-            <Setter Property="Foreground" Value="{DynamicResource ComboBoxIconPointeroverForeground}" />
+        <!--  Focus State  -->
+        <Style Selector="^:focus">
+            <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorFocusBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorFocusBorderBrush}" />
+            <Style Selector="^ /template/ PathIcon#DropDownGlyph">
+                <Setter Property="Foreground" Value="{DynamicResource ComboBoxIconFocusForeground}" />
+            </Style>
         </Style>
 
         <!--  Pressed State  -->
@@ -205,10 +234,14 @@
                 <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorBorderedPressedBackground}" />
                 <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorBorderedPressedBorderBrush}" />
             </Style>
+            <Style Selector="^:focus /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorBorderedFocusBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorBorderedFocusBorderBrush}" />
+            </Style>
             <Style Selector="^:disabled">
                 <Style Selector="^ /template/ Border#Background">
-                    <Setter Property="Border.Background" Value="{DynamicResource ComboBoxSelectorDisabledBackground}" />
+                    <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorDisabledBackground}" />
-                    <Setter Property="Border.BorderBrush" Value="{DynamicResource ComboBoxSelectorBorderBrush}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorBorderBrush}" />
                 </Style>
                 <Style Selector="^ /template/ ContentControl#ContentPresenter">
                     <Setter Property="Foreground" Value="{DynamicResource ComboBoxDisabledForeground}" />
@@ -267,6 +300,10 @@
             <Setter Property="Background" Value="{DynamicResource ComboBoxItemPointeroverBackground}" />
         </Style>
 
+        <Style Selector="^:focus /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource ComboBoxItemFocusBackground}" />
+        </Style>
+
         <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
             <Setter Property="Background" Value="{DynamicResource ComboBoxItemDisabledBackground}" />
         </Style>
@@ -286,5 +323,6 @@
                 <Setter Property="Background" Value="{DynamicResource ComboBoxItemSelectedPointeroverBackground}" />
             </Style>
         </Style>
+
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/ContextMenu.axaml

@@ -26,7 +26,7 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     BoxShadow="{DynamicResource MenuFlyoutBorderBoxShadow}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <ScrollViewer Theme="{DynamicResource MenuScrollViewer}">
+                    <ScrollViewer Theme="{DynamicResource MenuScrollViewer}" CornerRadius="{TemplateBinding CornerRadius}">
                         <ItemsPresenter
                             Name="PART_ItemsPresenter"
                             Grid.IsSharedSizeScope="True"

src/Semi.Avalonia/Controls/DatePicker.axaml

@@ -135,11 +135,17 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="DatePicker">
                 <DataValidationErrors>
-                    <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
+                    <Grid
+                        Name="LayoutRoot"
+                        Margin="{TemplateBinding Padding}"
+                        ColumnDefinitions="*, Auto">
                         <Button
                             Name="PART_FlyoutButton"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
                             Width="298"
                             MinWidth="298"
+                            MinHeight="{DynamicResource DateTimePickerButtonDefaultHeight}"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Background="{TemplateBinding Background}"
@@ -150,7 +156,6 @@
                             DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
                             Foreground="{TemplateBinding Foreground}"
                             IsEnabled="{TemplateBinding IsEnabled}"
-                            MinHeight="{DynamicResource DateTimePickerButtonDefaultHeight}"
                             Theme="{StaticResource DateTimePickerFlyoutButton}">
                             <Grid ColumnDefinitions="*, Auto">
                                 <Grid
@@ -165,8 +170,7 @@
                                         VerticalAlignment="Center"
                                         FontFamily="{TemplateBinding FontFamily}"
                                         FontSize="{TemplateBinding FontSize}"
-                                        FontWeight="{TemplateBinding FontWeight}"
+                                        FontWeight="{TemplateBinding FontWeight}" />
-                                        Text="day" />
                                     <TextBlock
                                         Name="PART_MonthTextBlock"
                                         Padding="12,4"
@@ -174,7 +178,6 @@
                                         FontFamily="{TemplateBinding FontFamily}"
                                         FontSize="{TemplateBinding FontSize}"
                                         FontWeight="{TemplateBinding FontWeight}"
-                                        Text="month"
                                         TextAlignment="Left" />
                                     <TextBlock
                                         Name="PART_YearTextBlock"
@@ -183,8 +186,7 @@
                                         VerticalAlignment="Center"
                                         FontFamily="{TemplateBinding FontFamily}"
                                         FontSize="{TemplateBinding FontSize}"
-                                        FontWeight="{TemplateBinding FontWeight}"
+                                        FontWeight="{TemplateBinding FontWeight}" />
-                                        Text="year" />
                                     <Rectangle
                                         x:Name="PART_FirstSpacer"
                                         Grid.Column="1"
@@ -210,21 +212,38 @@
                                     Foreground="{DynamicResource DateTimePickerIconForeground}" />
                             </Grid>
                         </Button>
-
                         <Popup
                             Name="PART_Popup"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
                             IsLightDismissEnabled="True"
                             Placement="Bottom"
                             PlacementTarget="{TemplateBinding}"
                             WindowManagerAddShadowHint="False">
                             <DatePickerPresenter Name="PART_PickerPresenter" />
                         </Popup>
-
+                        <Button
+                            Name="ClearButton"
+                            Grid.Column="1"
+                            Margin="0,0,8,0"
+                            Command="{Binding $parent[DatePicker].Clear}"
+                            Content="{DynamicResource IconButtonClearData}"
+                            IsVisible="False"
+                            Theme="{DynamicResource InnerIconButton}" />
                     </Grid>
                 </DataValidationErrors>
             </ControlTemplate>
         </Setter>
 
+        <Style Selector="^.clearButton:pointerover, ^.ClearButton:pointerover">
+            <Style Selector="^:not(:hasnodate) /template/ Button#ClearButton">
+                <Setter Property="IsVisible" Value="True" />
+            </Style>
+            <Style Selector="^:not(:hasnodate) /template/ PathIcon#PART_Icon">
+                <Setter Property="Opacity" Value="0" />
+            </Style>
+        </Style>
+
         <Style Selector="^:disabled /template/ PathIcon#PART_Icon">
             <Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonDisabledIconForeground}" />
         </Style>

src/Semi.Avalonia/Controls/DropDownButton.axaml

@@ -58,45 +58,44 @@
         </Style>
 
         <Style Selector="^.Primary">
-            <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonDefaultPrimaryForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultPrimaryForeground}" />
         </Style>
         <Style Selector="^.Secondary">
-            <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonDefaultSecondaryForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultSecondaryForeground}" />
         </Style>
         <Style Selector="^.Tertiary">
-            <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
         </Style>
         <Style Selector="^.Success">
-            <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonDefaultSuccessForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultSuccessForeground}" />
         </Style>
         <Style Selector="^.Warning">
-            <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonDefaultWarningForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultWarningForeground}" />
         </Style>
         <Style Selector="^.Danger">
-            <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonDefaultDangerForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDangerForeground}" />
         </Style>
 
         <Style Selector="^:pointerover">
-            <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonDefaultPointeroverBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPointeroverBorderBrush}" />
-            <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
         </Style>
 
         <Style Selector="^:pressed">
-            <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonDefaultPressedBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPressedBorderBrush}" />
-            <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
         </Style>
 
         <Style Selector="^:disabled">
-            <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
-            <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
-            <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
         </Style>
 
         <Style Selector="^.Large">
-            <Setter Property="DropDownButton.Padding" Value="{DynamicResource ButtonLargePadding}" />
+            <Setter Property="Padding" Value="{DynamicResource ButtonLargePadding}" />
         </Style>
         <Style Selector="^.Small">
-            <Setter Property="DropDownButton.Padding" Value="{DynamicResource ButtonSmallPadding}" />
+            <Setter Property="Padding" Value="{DynamicResource ButtonSmallPadding}" />
         </Style>
     </ControlTheme>
 
@@ -155,88 +154,118 @@
         </Style>
 
         <Style Selector="^.Primary">
-            <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-            <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
-            <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidPrimaryBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryBorderBrush}" />
             <Style Selector="^:pointerover">
-                <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
-                <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPointeroverBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:pressed">
-                <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
-                <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPressedBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPressedBorderBrush}" />
             </Style>
         </Style>
         <Style Selector="^.Secondary">
-            <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-            <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidSecondaryBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidSecondaryBackground}" />
-            <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidSecondaryBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidSecondaryBorderBrush}" />
             <Style Selector="^:pointerover">
-                <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidSecondaryPointeroverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidSecondaryPointeroverBackground}" />
-                <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidSecondaryPointeroverBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidSecondaryPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:pressed">
-                <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidSecondaryPressedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidSecondaryPressedBackground}" />
-                <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidSecondaryPressedBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidSecondaryPressedBorderBrush}" />
             </Style>
         </Style>
         <Style Selector="^.Tertiary">
-            <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-            <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidTertiaryBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidTertiaryBackground}" />
-            <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidTertiaryBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidTertiaryBorderBrush}" />
             <Style Selector="^:pointerover">
-                <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidTertiaryPointeroverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidTertiaryPointeroverBackground}" />
-                <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidTertiaryPointeroverBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidTertiaryPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:pressed">
-                <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidTertiaryPressedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidTertiaryPressedBackground}" />
-                <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidTertiaryPressedBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidTertiaryPressedBorderBrush}" />
             </Style>
         </Style>
         <Style Selector="^.Success">
-            <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-            <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidSuccessBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidSuccessBackground}" />
-            <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidSuccessBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidSuccessBorderBrush}" />
             <Style Selector="^:pointerover">
-                <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidSuccessPointeroverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidSuccessPointeroverBackground}" />
-                <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidSuccessPointeroverBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidSuccessPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:pressed">
-                <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidSuccessPressedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidSuccessPressedBackground}" />
-                <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidSuccessPressedBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidSuccessPressedBorderBrush}" />
             </Style>
         </Style>
         <Style Selector="^.Warning">
-            <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-            <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidWarningBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidWarningBackground}" />
-            <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidWarningBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidWarningBorderBrush}" />
             <Style Selector="^:pointerover">
-                <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidWarningPointeroverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidWarningPointeroverBackground}" />
-                <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidWarningPointeroverBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidWarningPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:pressed">
-                <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidWarningPressedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidWarningPressedBackground}" />
-                <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidWarningPressedBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidWarningPressedBorderBrush}" />
             </Style>
         </Style>
         <Style Selector="^.Danger">
-            <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-            <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidDangerBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidDangerBackground}" />
-            <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidDangerBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidDangerBorderBrush}" />
             <Style Selector="^:pointerover">
-                <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidDangerPointeroverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidDangerPointeroverBackground}" />
-                <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidDangerPointeroverBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidDangerPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:pressed">
-                <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidDangerPressedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidDangerPressedBackground}" />
-                <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidDangerPressedBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidDangerPressedBorderBrush}" />
             </Style>
         </Style>
 
         <Style Selector="^:disabled">
-            <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
-            <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidDisabledBackground}" />
-            <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="OutlineDropDownButton"
+        BasedOn="{StaticResource {x:Type DropDownButton}}"
+        TargetType="DropDownButton">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        <Style Selector="^:pointerover">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlinePointeroverBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^:pressed">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlinePressedBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^.Success">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineSuccessBorderBrush}" />
+        </Style>
+        <Style Selector="^.Warning">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineWarningBorderBrush}" />
+        </Style>
+        <Style Selector="^.Danger">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" />
+        </Style>
+        <Style Selector="^:disabled">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
         </Style>
     </ControlTheme>
 
@@ -247,9 +276,9 @@
         <Setter Property="DropDownButton.Background" Value="Transparent" />
         <Setter Property="DropDownButton.BorderBrush" Value="Transparent" />
         <Style Selector="^:disabled">
-            <Setter Property="DropDownButton.BorderBrush" Value="Transparent" />
+            <Setter Property="BorderBrush" Value="Transparent" />
-            <Setter Property="DropDownButton.Background" Value="Transparent" />
+            <Setter Property="Background" Value="Transparent" />
-            <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
         </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/Expander.axaml

@@ -86,29 +86,29 @@
         </Setter>
 
         <Style Selector="^:expanded /template/ PathIcon#PART_PathIcon">
-            <Setter Property="PathIcon.RenderTransform" Value="rotate(180deg)" />
+            <Setter Property="RenderTransform" Value="rotate(180deg)" />
         </Style>
 
         <Style Selector="^:right">
             <Style Selector="^ /template/ LayoutTransformControl#ExpanderHeaderLayoutContainer">
-                <Setter Property="LayoutTransformControl.LayoutTransform">
+                <Setter Property="LayoutTransform">
                     <RotateTransform Angle="-90" />
                 </Setter>
                 <Setter Property="VerticalAlignment" Value="Stretch" />
             </Style>
-            <Setter Property="Expander.HorizontalAlignment" Value="Left" />
+            <Setter Property="HorizontalAlignment" Value="Left" />
-            <Setter Property="Expander.VerticalAlignment" Value="Stretch" />
+            <Setter Property="VerticalAlignment" Value="Stretch" />
         </Style>
 
         <Style Selector="^:left">
             <Style Selector="^ /template/ LayoutTransformControl#ExpanderHeaderLayoutContainer">
-                <Setter Property="LayoutTransformControl.LayoutTransform">
+                <Setter Property="LayoutTransform">
                     <RotateTransform Angle="90" />
                 </Setter>
                 <Setter Property="VerticalAlignment" Value="Stretch" />
             </Style>
-            <Setter Property="Expander.HorizontalAlignment" Value="Stretch" />
+            <Setter Property="HorizontalAlignment" Value="Stretch" />
-            <Setter Property="Expander.VerticalAlignment" Value="Stretch" />
+            <Setter Property="VerticalAlignment" Value="Stretch" />
         </Style>
 
         <Style Selector="^:left /template/ LayoutTransformControl#ExpanderHeaderLayoutContainer">
@@ -125,30 +125,30 @@
         </Style>
 
         <Style Selector="^:left /template/ Border#ExpanderContent">
-            <Setter Property="Border.MinWidth" Value="2" />
+            <Setter Property="MinWidth" Value="2" />
-            <Setter Property="Border.BorderThickness" Value="{DynamicResource ExpanderLeftContentBorderThickness}" />
+            <Setter Property="BorderThickness" Value="{DynamicResource ExpanderLeftContentBorderThickness}" />
         </Style>
         <Style Selector="^:up /template/ Border#ExpanderContent">
-            <Setter Property="Border.MinHeight" Value="2" />
+            <Setter Property="MinHeight" Value="2" />
-            <Setter Property="Border.BorderThickness" Value="{DynamicResource ExpanderUpContentBorderThickness}" />
+            <Setter Property="BorderThickness" Value="{DynamicResource ExpanderUpContentBorderThickness}" />
         </Style>
         <Style Selector="^:right /template/ Border#ExpanderContent">
-            <Setter Property="Border.MinWidth" Value="2" />
+            <Setter Property="MinWidth" Value="2" />
-            <Setter Property="Border.BorderThickness" Value="{DynamicResource ExpanderRightContentBorderThickness}" />
+            <Setter Property="BorderThickness" Value="{DynamicResource ExpanderRightContentBorderThickness}" />
         </Style>
         <Style Selector="^:down /template/ Border#ExpanderContent">
-            <Setter Property="Border.MinHeight" Value="2" />
+            <Setter Property="MinHeight" Value="2" />
-            <Setter Property="Border.BorderThickness" Value="{DynamicResource ExpanderDownContentBorderThickness}" />
+            <Setter Property="BorderThickness" Value="{DynamicResource ExpanderDownContentBorderThickness}" />
         </Style>
 
         <Style Selector="^ /template/ ToggleButton#ExpanderHeader:pointerover">
-            <Setter Property="ToggleButton.Background" Value="{DynamicResource ExpanderHeaderHoverBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ExpanderHeaderHoverBackground}" />
         </Style>
         <Style Selector="^ /template/ ToggleButton#ExpanderHeader:pressed">
-            <Setter Property="ToggleButton.Background" Value="{DynamicResource ExpanderHeaderPressedBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ExpanderHeaderPressedBackground}" />
         </Style>
         <Style Selector="^ /template/ ToggleButton#ExpanderHeader:disabled">
-            <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ExpanderHeaderDisabledForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ExpanderHeaderDisabledForeground}" />
         </Style>
     </ControlTheme>
 </ResourceDictionary>