misc: add Version markup to TreeDataGrid.csproj.

Add `BoxShadows` Tokens to Palette and Fix Related Issues

.github/workflows/pack-tree.yml

@@ -0,0 +1,26 @@
+name: Pack TreeDataGrid Nuget
+
+on:
+  push:
+    branches: [ "action/pack-tree" ]
+  pull_request:
+    branches: [ "action/pack-tree" ]
+
+jobs:
+  nuget:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4.1.1
+
+      - name: Nuget Semi.Avalonia.TreeDataGrid
+        run: dotnet pack ./src/Semi.Avalonia.TreeDataGrid  -o ./nugets
+
+      - name: Publish NuGet package
+        run: dotnet nuget push "./nugets/*.nupkg" --api-key ${{ secrets.NUGET_ORG_API_KEY }} --source https://api.nuget.org/v3/index.json --skip-duplicate
+
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v4.3.1
+        with:
+          name: nugets
+          path: ./nugets

.github/workflows/pack.yml

@@ -1,4 +1,4 @@
-name: Pack
+name: Pack Nuget
 
 on:
   push:
@@ -7,8 +7,8 @@ on:
     branches: [ "action/pack" ]
 
 jobs:
-  nuget_desktop:
-    runs-on: windows-latest
+  nuget:
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4.1.1
@@ -22,37 +22,11 @@ jobs:
       - 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: Publish NuGet package
+        run: dotnet nuget push "./nugets/*.nupkg" --api-key ${{ secrets.NUGET_ORG_API_KEY }} --source https://api.nuget.org/v3/index.json --skip-duplicate
 
       - name: Upload a Build Artifact
         uses: actions/upload-artifact@v4.3.1
         with:
-          name: nuget_desktop
-          path: |
-            ./nugets
-            ./**/publish/*.exe
-
-  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: Build
-        run: dotnet publish ./demo/Semi.Avalonia.Demo.Android -c Release -f net8.0-android --no-restore
-
-      - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.3.1
-        with:
-          name: android
-          path: ./**/publish/*Signed.apk
+          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

README.md

@@ -26,11 +26,13 @@ dotnet add package Semi.Avalonia
 Include Semi Design Styles in application:
 
 ```xaml
-<Application.Styles>
-<!-- You can still reference in old way.  -->
-<!-- <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" /> -->
-    <semi:SemiTheme Locale="zh-cn" />
-</Application.Styles>
+<Application
+    ...
+    xmlns:semi="https://irihi.tech/semi">
+    <Application.Styles>
+        <semi:SemiTheme Locale="zh-CN" />
+    </Application.Styles>
+</Application>
 ```
 
 That's all.
@@ -66,6 +68,8 @@ We offer limited free community support for Semi Avalonia and Ursa. If you have
 
 | Semi Design Version | Avalonia Version |
 |:--------------------|:-----------------|
+| 11.2.1              | 11.2.1           |
+| 11.2.0              | 11.2.0           |
 | 11.1.0              | >=11.1.0         |
 | 11.0.7              | >=11.0.7         |
 | 11.0.1              | <=11.0.6         |

README_CN.md

@@ -26,11 +26,13 @@ dotnet add package Semi.Avalonia
 在样式中引用 Semi 主题：
 
 ```xaml
-<Application.Styles>
-<!-- 您仍然可以使用旧版方式引用  -->
-<!-- <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" /> -->
-    <semi:SemiTheme Locale="zh-cn" />
-</Application.Styles>
+<Application
+    ...
+    xmlns:semi="https://irihi.tech/semi">
+    <Application.Styles>
+        <semi:SemiTheme Locale="zh-CN" />
+    </Application.Styles>
+</Application>
 ```
 
 这样就可以了。
@@ -54,7 +56,6 @@ dotnet add package Semi.Avalonia.TreeDataGrid
 ## 示例
 
 您可以从 Semi Avalonia 的 release 页下载并试用 Semi Avalonia 的展示应用。
-
 <https://github.com/irihitech/Semi.Avalonia/releases>
 
 ## 社区支持
@@ -63,11 +64,12 @@ dotnet add package Semi.Avalonia.TreeDataGrid
 
 ![FeiShu](./docs/community-support.png)
 
-
 ## 版本兼容性
 
 | Semi Design Version | Avalonia Version |
 |:--------------------|:-----------------|
+| 11.2.1              | 11.2.1           |
+| 11.2.0              | 11.2.0           |
 | 11.1.0              | >=11.1.0         |
 | 11.0.7              | >=11.0.7         |
 | 11.0.1              | <=11.0.6         |

Semi.Avalonia.sln

@@ -12,6 +12,14 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Files", "Solution
 		src\Package.props = src\Package.props
 	EndProjectSection
 EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "GitHub Action", "GitHub Action", "{318534A1-1CC3-40FB-B4AE-736F94465232}"
+	ProjectSection(SolutionItems) = preProject
+		.github\workflows\deploy.yml = .github\workflows\deploy.yml
+		.github\workflows\pack.yml = .github\workflows\pack.yml
+		.github\workflows\pack-tree.yml = .github\workflows\pack-tree.yml
+		.github\workflows\publish.yml = .github\workflows\publish.yml
+	EndProjectSection
+EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Demo", "Demo", "{43091528-9509-43CB-A003-9C5C11E96DD6}"
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.Demo.Desktop", "demo\Semi.Avalonia.Demo.Desktop\Semi.Avalonia.Demo.Desktop.csproj", "{2ADCA724-2B6D-46EC-87F7-604D7918B89A}"

demo/Directory.Build.props

@@ -1,6 +1,7 @@
 <Project>
   <PropertyGroup>
     <Nullable>enable</Nullable>
-    <AvaloniaVersion>11.1.0</AvaloniaVersion>
+    <AvaloniaVersion>11.2.1</AvaloniaVersion>
+    <CommunityToolkitVersion>8.3.2</CommunityToolkitVersion>
   </PropertyGroup>
 </Project>

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

@@ -16,13 +16,13 @@ class Program
     public static void Main(string[] args) => BuildAvaloniaApp()
         .With(new FontManagerOptions
         {
-            FontFallbacks = new[]
-            {
+            FontFallbacks =
+            [
                 new FontFallback
                 {
                     FontFamily = new FontFamily("Microsoft YaHei")
                 }
-            }
+            ]
         })
         .StartWithClassicDesktopLifetime(args);
 

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

@@ -5,10 +5,8 @@
         <Nullable>enable</Nullable>
         <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
         <!-- Uncomment below to enable Native AOT compilation-->
-        <!--
-        <PublishAot>true</PublishAot>
-        <IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>
-        -->
+        <!--<PublishAot>true</PublishAot>-->
+        <!--<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>-->
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">

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

@@ -3,6 +3,7 @@ using System.Globalization;
 using System.Linq;
 using System.Threading;
 using Avalonia;
+using Avalonia.Dialogs;
 
 namespace Semi.Avalonia.Demo.Drm;
 
@@ -28,7 +29,7 @@ class Program
         if (args.Contains("--drm"))
         {
             SilenceConsole();
-            return builder.StartLinuxDrm(args: args, card: "/dev/dri/card1", scaling: GetScaling());
+            return builder.StartLinuxDrm(args, scaling: GetScaling());
         }
 
         return builder.StartWithClassicDesktopLifetime(args);
@@ -37,7 +38,9 @@ class Program
     // 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()

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>
-    <OutputType>WinExe</OutputType>
-    <TargetFramework>net7.0</TargetFramework>
-    <Nullable>enable</Nullable>
-    <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
-    <ApplicationManifest>app.manifest</ApplicationManifest>
-  </PropertyGroup>
+    <PropertyGroup>
+        <OutputType>WinExe</OutputType>
+        <TargetFramework>net8.0</TargetFramework>
+        <Nullable>enable</Nullable>
+        <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
+        <!-- Uncomment below to enable Native AOT compilation-->
+        <!--<PublishAot>true</PublishAot>-->
+        <!--<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>-->
+    </PropertyGroup>
 
+    <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
+        <IsTrimmable>true</IsTrimmable>
+        <PublishTrimmed>true</PublishTrimmed>
+    </PropertyGroup>
 
-  <ItemGroup>
-    <PackageReference Include="Avalonia.Desktop" 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="$(AvaloniaVersion)" />
-    <PackageReference Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)" />
-  </ItemGroup>
+    <PropertyGroup>
+        <ApplicationManifest>app.manifest</ApplicationManifest>
+    </PropertyGroup>
 
+    <ItemGroup>
+        <TrimmerRootDescriptor Include="Roots.xml" />
+    </ItemGroup>
 
-  <ItemGroup>
-    <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
-  </ItemGroup>
+    <ItemGroup>
+        <PackageReference Include="Avalonia.Desktop" 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="$(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,77 +0,0 @@
-# DRM启动步骤
-
-(Ubuntu18.04Server版本 虚拟机测试OK)  
-(Orange Pi Zero2 Ubuntu20.04-arm64 测试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
-
-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`。
-
-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`，可能是显卡挂载到别的文件夹下了，待解决。

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

@@ -11,6 +11,6 @@ public static class AvaloniaAppBuilderExtensions
         builder.With(new FontManagerOptions
         {
             DefaultFamilyName = DefaultFontFamily,
-            FontFallbacks = new[] { new FontFallback { FontFamily = new FontFamily(DefaultFontFamily) } }
+            FontFallbacks = [new FontFallback { FontFamily = new FontFamily(DefaultFontFamily) }]
         });
 }

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

@@ -7,7 +7,6 @@
     x:DataType="viewModels:ColorItemViewModel">
     <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">
             <ControlTemplate TargetType="controls:ColorDetailControl">
                 <StackPanel>

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

@@ -5,18 +5,16 @@
     xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     x:CompileBindings="True"
     x:DataType="viewModels:FunctionalColorGroupViewModel">
-    <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type controls:FunctionalColorGroupControl}" TargetType="controls:FunctionalColorGroupControl">
-        <!--  Add Resources Here  -->
-        <Setter Property="controls:FunctionalColorGroupControl.Template">
-            <ControlTemplate x:DataType="viewModels:FunctionalColorGroupViewModel" TargetType="controls:FunctionalColorGroupControl">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="controls:FunctionalColorGroupControl">
                 <Grid RowDefinitions="Auto, *">
-                    <TextBlock
+                    <SelectableTextBlock
                         Grid.Row="0"
                         Margin="0,16,0,0"
                         Classes="H3"
                         Text="{TemplateBinding Title}"
-                        Theme="{DynamicResource TitleTextBlock}" />
+                        Theme="{DynamicResource TitleSelectableTextBlock}" />
                     <TabControl Grid.Row="1">
                         <TabItem Header="Light">
                             <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightColors}">
@@ -131,4 +129,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

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

@@ -4,33 +4,38 @@ using Avalonia.Controls.Primitives;
 
 namespace Semi.Avalonia.Demo.Controls;
 
-public class FunctionalColorGroupControl: TemplatedControl
+public class FunctionalColorGroupControl : TemplatedControl
 {
-    public static readonly StyledProperty<string?> TitleProperty = AvaloniaProperty.Register<FunctionalColorGroupControl, string?>(
-        nameof(Title));
+    public static readonly StyledProperty<string?> TitleProperty =
+        AvaloniaProperty.Register<FunctionalColorGroupControl, string?>(nameof(Title));
+
     public string? Title
     {
         get => GetValue(TitleProperty);
         set => SetValue(TitleProperty, value);
     }
-    
-    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> LightColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(
-        nameof(LightColors), o => o.LightColors, (o, v) => o.LightColors = v);
+
+    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> LightColorsProperty =
+        AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(nameof(LightColors),
+            o => o.LightColors, (o, v) => o.LightColors = v);
+
     private IEnumerable? _lightColors;
+
     public IEnumerable? LightColors
     {
         get => _lightColors;
         set => SetAndRaise(LightColorsProperty, ref _lightColors, value);
     }
-    
-    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> DarkColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(
-        nameof(DarkColors), o => o.DarkColors, (o, v) => o.DarkColors = v);
+
+    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> DarkColorsProperty =
+        AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(nameof(DarkColors),
+            o => o.DarkColors, (o, v) => o.DarkColors = v);
+
     private IEnumerable? _darkColors;
+
     public IEnumerable? DarkColors
     {
         get => _darkColors;
         set => SetAndRaise(DarkColorsProperty, ref _darkColors, value);
     }
-    
-    
 }

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

@@ -0,0 +1,88 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    x:CompileBindings="True"
+    x:DataType="viewModels:ShadowGroupViewModel">
+    <ControlTheme x:Key="{x:Type controls:ShadowGroupControl}" TargetType="controls:ShadowGroupControl">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="controls:ShadowGroupControl">
+                <Grid RowDefinitions="Auto, *">
+                    <SelectableTextBlock
+                        Grid.Row="0"
+                        Margin="0,16,0,0"
+                        Classes="H3"
+                        Text="{TemplateBinding Title}"
+                        Theme="{DynamicResource TitleSelectableTextBlock}" />
+                    <TabControl Grid.Row="1">
+                        <TabItem Header="Light">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightShadows}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ShadowItemViewModel"
+                                        Binding="{Binding ShadowDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Name" />
+                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding BoxShadowValue}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                        <TabItem Header="Dark">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkShadows}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ShadowItemViewModel"
+                                        Binding="{Binding ShadowDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Name" />
+                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding BoxShadowValue}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                    </TabControl>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

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

@@ -0,0 +1,41 @@
+using System.Collections;
+using Avalonia;
+using Avalonia.Controls.Primitives;
+
+namespace Semi.Avalonia.Demo.Controls;
+
+public class ShadowGroupControl : TemplatedControl
+{
+    public static readonly StyledProperty<string?> TitleProperty =
+        AvaloniaProperty.Register<ShadowGroupControl, string?>(nameof(Title));
+
+    public string? Title
+    {
+        get => GetValue(TitleProperty);
+        set => SetValue(TitleProperty, value);
+    }
+
+    private IEnumerable? _lightShadows;
+
+    public static readonly DirectProperty<ShadowGroupControl, IEnumerable?> LightShadowsProperty =
+        AvaloniaProperty.RegisterDirect<ShadowGroupControl, IEnumerable?>(nameof(LightShadows),
+            o => o.LightShadows, (o, v) => o.LightShadows = v);
+
+    public IEnumerable? LightShadows
+    {
+        get => _lightShadows;
+        set => SetAndRaise(LightShadowsProperty, ref _lightShadows, value);
+    }
+
+    private IEnumerable? _darkShadows;
+
+    public static readonly DirectProperty<ShadowGroupControl, IEnumerable?> DarkShadowsProperty =
+        AvaloniaProperty.RegisterDirect<ShadowGroupControl, IEnumerable?>(nameof(DarkShadows),
+            o => o.DarkShadows, (o, v) => o.DarkShadows = v);
+
+    public IEnumerable? DarkShadows
+    {
+        get => _darkShadows;
+        set => SetAndRaise(DarkShadowsProperty, ref _darkShadows, value);
+    }
+}

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

@@ -6,35 +6,88 @@
     xmlns:controls="using:Avalonia.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    d:DesignHeight="450"
+    d:DesignHeight="1450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Spacing="20">
-        <StackPanel
-            VerticalAlignment="Top"
-            Orientation="Horizontal"
-            Spacing="20">
-            <ColorView ColorSpectrumShape="Ring" />
-            <ColorView ColorSpectrumShape="Box" />
-            <ColorView Palette="{DynamicResource SemiColorPalette}" />
+    <ScrollViewer>
+        <StackPanel Spacing="20">
+            <StackPanel
+                VerticalAlignment="Top"
+                Orientation="Horizontal"
+                Spacing="20">
+                <ColorView Name="Test" ColorSpectrumShape="Ring" />
+                <ColorView ColorSpectrumShape="Box" />
+                <ColorView Palette="{DynamicResource SemiColorPalette}" />
+            </StackPanel>
+            <StackPanel VerticalAlignment="Top" Orientation="Horizontal">
+                <ColorView
+                    Name="SimpleColorViewTest"
+                    HsvColor="hsv(120,11%,10%)"
+                    IsAlphaVisible="True"
+                    Theme="{StaticResource SimpleColorView}" />
+                <StackPanel>
+                    <TextBlock Text="{Binding #SimpleColorViewTest.HsvColor}" />
+                    <TextBlock Text="{Binding #SimpleColorViewTest.Color}" />
+                </StackPanel>
+            </StackPanel>
+            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
+                <ColorPicker Margin="8" ColorSpectrumShape="Ring">
+                    <ColorPicker.Palette>
+                        <controls:FlatHalfColorPalette />
+                    </ColorPicker.Palette>
+                </ColorPicker>
+                <ColorPicker Margin="8" ColorSpectrumShape="Box">
+                    <ColorPicker.Palette>
+                        <colorPicker:SemiColorLightPalette />
+                    </ColorPicker.Palette>
+                </ColorPicker>
+
+                <ColorPicker
+                    Margin="8"
+                    ColorSpectrumShape="Box"
+                    Theme="{DynamicResource HexColorPicker}">
+                    <ColorPicker.Palette>
+                        <colorPicker:SemiColorLightPalette />
+                    </ColorPicker.Palette>
+                </ColorPicker>
+            </StackPanel>
+            <StackPanel HorizontalAlignment="Left" >
+                <TextBlock Text="Use Style to customize button"></TextBlock>
+                <ColorPicker
+                    Margin="8"
+                    Width="32"
+                    HsvColor="hsv(120,11%,10%)"
+                    >
+                    <ColorPicker.Content>
+                        <Border
+                            Margin="1"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Background="{Binding $parent[ColorPicker].HsvColor, 
+                                                     Converter={StaticResource ToBrushConverter}}"
+                            CornerRadius="1" />
+                    </ColorPicker.Content>
+                    <ColorPicker.Styles>
+                        <Style Selector="DropDownButton">
+                            <Setter Property="Padding" Value="0"/>
+                            <Style Selector="^ /template/ PathIcon">
+                                <Setter Property="IsVisible" Value="False"/>
+                            </Style>
+                        </Style>
+                    </ColorPicker.Styles>
+                </ColorPicker>
+
+            </StackPanel>
+            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
+                <ColorPicker
+                    Margin="8"
+                    HsvColor="hsv(120,11%,10%)"
+                    Theme="{StaticResource SimpleColorPicker}" />
+                <ColorPicker
+                    Margin="8"
+                    HsvColor="hsv(120,11%,10%)"
+                    Theme="{StaticResource HexSimpleColorPicker}" />
+            </StackPanel>
         </StackPanel>
-        <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
-            <ColorPicker ColorSpectrumShape="Ring">
-                <ColorPicker.Palette>
-                    <controls:FlatHalfColorPalette />
-                </ColorPicker.Palette>
-            </ColorPicker>
-            <ColorPicker ColorSpectrumShape="Box">
-                <ColorPicker.Palette>
-                    <colorPicker:SemiColorLightPalette />
-                </ColorPicker.Palette>
-            </ColorPicker>
-            
-            <ColorPicker ColorSpectrumShape="Box" Theme="{DynamicResource HexColorPicker}">
-                <ColorPicker.Palette>
-                    <colorPicker:SemiColorLightPalette />
-                </ColorPicker.Palette>
-            </ColorPicker>
-        </StackPanel>
-    </StackPanel>
-</UserControl>
+    </ScrollViewer>
+</UserControl>

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

@@ -14,7 +14,10 @@
     <TabControl>
         <TabItem Header="DataGrid">
            <Grid RowDefinitions="Auto, *">
-               <ToggleSwitch Grid.Row="0" Content="Disable" Name="DisableToggle"></ToggleSwitch>
+               <StackPanel Grid.Row="0" Orientation="Horizontal">
+                   <ToggleSwitch Content="Disable" Name="DisableToggle" />
+                   <ToggleSwitch Content="ScrollViewerHide" Name="ScrollViewerHide" />
+               </StackPanel>
                <DataGrid Grid.Row="1"
                          Margin="8"
                          CanUserReorderColumns="True"
@@ -22,6 +25,7 @@
                          CanUserSortColumns="True"
                          HeadersVisibility="All"
                          IsReadOnly="True"
+                         ScrollViewer.AllowAutoHide="{Binding #ScrollViewerHide.IsChecked}"
                          IsEnabled="{Binding #DisableToggle.IsChecked}"
                          ItemsSource="{Binding GridData1}">
                    <DataGrid.Columns>
@@ -97,7 +101,7 @@
                 </DataGrid.Columns>
             </DataGrid>
         </TabItem>
-        <TabItem x:Name="EditableTab" Header="Editable">
+        <TabItem Name="EditableTab" Header="Editable">
             <Grid Margin="8" RowDefinitions="Auto,*,Auto">
                 <StackPanel
                     Grid.Row="0"
@@ -105,14 +109,14 @@
                     Spacing="4">
                     <TextBlock VerticalAlignment="Center" Text="FontSize:" />
                     <Slider
-                        x:Name="FontSizeSlider"
+                        Name="FontSizeSlider"
                         Width="100"
                         VerticalAlignment="Center"
                         Maximum="30"
                         Minimum="5"
                         Value="14" />
                     <CheckBox
-                        x:Name="IsThreeStateCheckBox"
+                        Name="IsThreeStateCheckBox"
                         Content="IsThreeState"
                         IsChecked="False" />
                 </StackPanel>

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

@@ -36,4 +36,4 @@
             </Expander>
         </Grid>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -2,7 +2,7 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="1450"
              x:Class="Semi.Avalonia.Demo.Pages.HeaderedContentControlDemo">
     <ScrollViewer>
         <StackPanel HorizontalAlignment="Left" Spacing="20">
@@ -27,12 +27,18 @@
             </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>
+                HorizontalAlignment="Left"
+                MaxWidth="360">
+                <HeaderedContentControl.Header>
+                    <Panel>
+                        <SelectableTextBlock Text="Semi Design" />
+                        <HyperlinkButton HorizontalAlignment="Right" Content="更多" />
+                    </Panel>
+                </HeaderedContentControl.Header>
+                <HeaderedContentControl.Content>
+                    <SelectableTextBlock Text="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。" />
+                </HeaderedContentControl.Content>
             </HeaderedContentControl>
         </StackPanel>
     </ScrollViewer>

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

@@ -8,36 +8,22 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <StackPanel HorizontalAlignment="Left" Spacing="20">
+        <HyperlinkButton
+            NavigateUri="https://www.irihi.tech/"
+            Content="IRIHI Homepage" />
+        <HyperlinkButton
+            Classes="Underline"
+            IsEnabled="False"
+            NavigateUri="https://www.irihi.tech/"
+            Content="Not Enabled" />
+        <HyperlinkButton
+            Classes="WithIcon Underline"
+            Height="20"
+            NavigateUri="https://www.irihi.tech/"
+            Content="带下划线的网页链接" />
         <StackPanel Orientation="Horizontal">
-            <HyperlinkButton Height="20" NavigateUri="http://www.irihi.tech/">
-                <TextBlock
-                    HorizontalAlignment="Center"
-                    Text="iRihi Homepage"
-                    TextDecorations="Underline"
-                    VerticalAlignment="Center" />
-            </HyperlinkButton>
-        </StackPanel>
-        <StackPanel Orientation="Horizontal">
-            <HyperlinkButton Height="20" IsEnabled="False">
-                <TextBlock
-                    HorizontalAlignment="Center"
-                    Text="Not Enabled"
-                    TextDecorations="Underline"
-                    VerticalAlignment="Center" />
-            </HyperlinkButton>
-        </StackPanel>
-        <StackPanel Orientation="Horizontal">
-            <HyperlinkButton
-                BorderThickness="1"
-                Classes="WithIcon"
-                Height="20"
-                NavigateUri="http://www.irihi.tech/">
-                <TextBlock
-                    HorizontalAlignment="Center"
-                    Text="Link with Icon"
-                    TextDecorations="Underline"
-                    VerticalAlignment="Center" />
-            </HyperlinkButton>
+            <HyperlinkButton Classes="OnlyIcon" NavigateUri="https://www.irihi.tech/" />
+            <HyperlinkButton Classes="OnlyIcon" NavigateUri="https://www.irihi.tech/" />
         </StackPanel>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -4,7 +4,7 @@
     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:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
     <ScrollViewer>
@@ -13,15 +13,13 @@
                 <Style Selector="Label">
                     <Setter Property="Margin" Value="4" />
                 </Style>
+                <Style Selector="Grid > TextBlock">
+                    <Setter Property="VerticalAlignment" Value="Center" />
+                    <Setter Property="Margin" Value="4" />
+                </Style>
             </StackPanel.Styles>
             <ScrollViewer HorizontalScrollBarVisibility="Auto">
                 <StackPanel Orientation="Horizontal">
-                    <StackPanel.Styles>
-                        <Style Selector="Label, TextBlock">
-                            <Setter Property="VerticalAlignment" Value="Center" />
-                            <Setter Property="Margin" Value="4" />
-                        </Style>
-                    </StackPanel.Styles>
                     <HeaderedContentControl
                         Width="400"
                         Height="400"
@@ -32,62 +30,62 @@
                         <Grid
                             VerticalAlignment="Top"
                             ColumnDefinitions="Auto, *"
-                            RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
-                            <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
-                            <TextBlock Grid.Row="2" Grid.Column="0">-</TextBlock>
-                            <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">Success</TextBlock>
-                            <TextBlock Grid.Row="7" Grid.Column="0">Warning</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>
+                            RowDefinitions="*,*,*,*,*,*,*,*,*,*,*">
+                            <TextBlock Grid.Row="0"  Grid.Column="0">Classes</TextBlock>
+                            <TextBlock Grid.Row="1" Grid.Column="0">-</TextBlock>
+                            <TextBlock Grid.Row="2" Grid.Column="0">Secondary</TextBlock>
+                            <TextBlock Grid.Row="3" Grid.Column="0">Tertiary</TextBlock>
+                            <TextBlock Grid.Row="4" Grid.Column="0">Quaternary</TextBlock>
+                            <TextBlock Grid.Row="5" Grid.Column="0">Success</TextBlock>
+                            <TextBlock Grid.Row="6" Grid.Column="0">Warning</TextBlock>
+                            <TextBlock Grid.Row="7" Grid.Column="0">Danger</TextBlock>
+                            <TextBlock Grid.Row="8" Grid.Column="0">Mark</TextBlock>
+                            <TextBlock Grid.Row="9" Grid.Column="0">Code</TextBlock>
+                            <Label Grid.Row="1" Grid.Column="1">Text</Label>
                             <Label
-                                Grid.Row="3"
+                                Grid.Row="2"
                                 Grid.Column="1"
                                 Classes="Secondary">
                                 Secondary
                             </Label>
                             <Label
-                                Grid.Row="4"
+                                Grid.Row="3"
                                 Grid.Column="1"
                                 Classes="Tertiary">
                                 Tertiary
                             </Label>
                             <Label
-                                Grid.Row="5"
+                                Grid.Row="4"
                                 Grid.Column="1"
                                 Classes="Quaternary">
                                 Quaternary
                             </Label>
                             <Label
-                                Grid.Row="6"
+                                Grid.Row="5"
                                 Grid.Column="1"
                                 Classes="Success">
                                 Success
                             </Label>
                             <Label
-                                Grid.Row="7"
+                                Grid.Row="6"
                                 Grid.Column="1"
                                 Classes="Warning">
                                 Warning
                             </Label>
                             <Label
-                                Grid.Row="8"
+                                Grid.Row="7"
                                 Grid.Column="1"
                                 Classes="Danger">
                                 Danger
                             </Label>
                             <Label
-                                Grid.Row="9"
+                                Grid.Row="8"
                                 Grid.Column="1"
                                 Classes="Mark">
                                 Default Mark
                             </Label>
                             <Label
-                                Grid.Row="10"
+                                Grid.Row="9"
                                 Grid.Column="1"
                                 Classes="Code">
                                 Code
@@ -104,51 +102,51 @@
                         <Grid
                             VerticalAlignment="Top"
                             ColumnDefinitions="Auto, *"
-                            RowDefinitions="*,*,*,*,*,*,*,*">
-                            <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
-                            <TextBlock Grid.Row="2" Grid.Column="0">H1</TextBlock>
-                            <TextBlock Grid.Row="3" Grid.Column="0">H2</TextBlock>
-                            <TextBlock Grid.Row="4" Grid.Column="0">H3</TextBlock>
-                            <TextBlock Grid.Row="5" Grid.Column="0">H4</TextBlock>
-                            <TextBlock Grid.Row="6" Grid.Column="0">H5</TextBlock>
-                            <TextBlock Grid.Row="7" Grid.Column="0">H6</TextBlock>
+                            RowDefinitions="*,*,*,*,*,*,*">
+                            <TextBlock Grid.Row="0" Grid.Column="0">Classes</TextBlock>
+                            <TextBlock Grid.Row="1" Grid.Column="0">H1</TextBlock>
+                            <TextBlock Grid.Row="2" Grid.Column="0">H2</TextBlock>
+                            <TextBlock Grid.Row="3" Grid.Column="0">H3</TextBlock>
+                            <TextBlock Grid.Row="4" Grid.Column="0">H4</TextBlock>
+                            <TextBlock Grid.Row="5" Grid.Column="0">H5</TextBlock>
+                            <TextBlock Grid.Row="6" Grid.Column="0">H6</TextBlock>
                             <Label
-                                Grid.Row="2"
+                                Grid.Row="1"
                                 Grid.Column="1"
                                 Classes="H1"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 1
                             </Label>
                             <Label
-                                Grid.Row="3"
+                                Grid.Row="2"
                                 Grid.Column="1"
                                 Classes="H2"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 2
                             </Label>
                             <Label
-                                Grid.Row="4"
+                                Grid.Row="3"
                                 Grid.Column="1"
                                 Classes="H3"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 3
                             </Label>
                             <Label
-                                Grid.Row="5"
+                                Grid.Row="4"
                                 Grid.Column="1"
                                 Classes="H4"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 4
                             </Label>
                             <Label
-                                Grid.Row="6"
+                                Grid.Row="5"
                                 Grid.Column="1"
                                 Classes="H5"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 5
                             </Label>
                             <Label
-                                Grid.Row="7"
+                                Grid.Row="6"
                                 Grid.Column="1"
                                 Classes="H6"
                                 Theme="{StaticResource TitleLabel}">

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

@@ -13,8 +13,8 @@
                 <Setter Property="HorizontalAlignment" Value="Stretch" />
             </Style>
         </StackPanel.Styles>
-        <Button Name="openFileDialog">Open File</Button>
-        <Button Name="selectFolderDialog">Select Folder</Button>
-        <Button Name="saveFileDialog">Save File</Button>
+        <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;
-        selectFolderDialog.Click += SelectFolderDialog;
-        saveFileDialog.Click += SaveFileDialog;
+        OpenFileButton.Click += OpenFileDialog;
+        SelectFolderButton.Click += SelectFolderDialog;
+        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,18 +7,36 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel HorizontalAlignment="Left" Spacing="20">
-        <StackPanel.Styles>
-            <Style Selector="Button">
-                <Setter Property="Theme" Value="{DynamicResource SolidButton}" />
-                <Setter Property="HorizontalAlignment" Value="Stretch" />
-            </Style>
-        </StackPanel.Styles>
-
-        <Button Click="InfoButton_OnClick" Content="Default" />
-        <Button Click="InfoButton_OnClick" Content="Information" />
-        <Button Click="InfoButton_OnClick" Content="Success" Classes="Success" />
-        <Button Click="InfoButton_OnClick" Content="Warning" Classes="Warning" />
-        <Button Click="InfoButton_OnClick" Content="Error" Classes="Danger" />
+    <StackPanel Spacing="20">
+        <UniformGrid Rows="2" Columns="3" Width="500" HorizontalAlignment="Left">
+            <UniformGrid.Styles>
+                <Style Selector="RadioButton">
+                    <Setter Property="Theme" Value="{DynamicResource PureCardRadioButton}" />
+                </Style>
+            </UniformGrid.Styles>
+            <RadioButton Click="PositionButton_OnClick" Content="TopLeft" />
+            <RadioButton Click="PositionButton_OnClick" Content="TopCenter" />
+            <RadioButton Click="PositionButton_OnClick" Content="TopRight" IsChecked="True" />
+            <RadioButton Click="PositionButton_OnClick" Content="BottomLeft" />
+            <RadioButton Click="PositionButton_OnClick" Content="BottomCenter" />
+            <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 Orientation="Horizontal" Spacing="20">
+            <StackPanel.Styles>
+                <Style Selector="Button">
+                    <Setter Property="Theme" Value="{DynamicResource SolidButton}" />
+                </Style>
+            </StackPanel.Styles>
+            <Button Click="LightButton_OnClick" Content="Information" />
+            <Button Click="LightButton_OnClick" Content="Success" Classes="Success" />
+            <Button Click="LightButton_OnClick" Content="Warning" Classes="Warning" />
+            <Button Click="LightButton_OnClick" Content="Error" Classes="Danger" />
+        </StackPanel>
     </StackPanel>
 </UserControl>

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

@@ -22,13 +22,34 @@ public partial class NotificationDemo : UserControl
         _manager = new WindowNotificationManager(topLevel) { MaxItems = 3 };
     }
 
-    private void InfoButton_OnClick(object? sender, RoutedEventArgs e)
+    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;
+        }
+    }
+
+    private void NormalButton_OnClick(object? sender, RoutedEventArgs e)
     {
         if (sender is Button b && b.Content is string s)
         {
-            _manager?.Show(Enum.TryParse<NotificationType>(s, out NotificationType 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 LightButton_OnClick(object? sender, RoutedEventArgs e)
+    {
+        if (sender is Button b && b.Content is string s)
+        {
+            Enum.TryParse<NotificationType>(s, out var notificationType);
+            _manager?.Show(
+                new Notification(notificationType.ToString(), "This is message"),
+                type: notificationType,
+                classes: ["Light"]);
+        }
+    }
 }

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

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

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

@@ -21,6 +21,7 @@
                 <ResourceInclude Source="../Controls/ColorItemControl.axaml" />
                 <ResourceInclude Source="../Controls/ColorDetailControl.axaml" />
                 <ResourceInclude Source="../Controls/FunctionalColorGroupControl.axaml" />
+                <ResourceInclude Source="../Controls/ShadowGroupControl.axaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </UserControl.Resources>
@@ -115,7 +116,6 @@
                     <ItemsControl ItemsSource="{Binding FunctionalColors}">
                         <ItemsControl.ItemTemplate>
                             <DataTemplate>
-                                <!--    -->
                                 <controls:FunctionalColorGroupControl
                                     Title="{Binding Title}"
                                     DarkColors="{Binding DarkColors}"
@@ -123,8 +123,20 @@
                             </DataTemplate>
                         </ItemsControl.ItemTemplate>
                     </ItemsControl>
+
+                    <ItemsControl ItemsSource="{Binding Shadows}">
+                        <ItemsControl.ItemTemplate>
+                            <DataTemplate>
+                                <controls:ShadowGroupControl
+                                    Title="{Binding Title}"
+                                    DarkShadows="{Binding DarkShadows}"
+                                    LightShadows="{Binding LightShadows}" />
+                            </DataTemplate>
+                        </ItemsControl.ItemTemplate>
+                    </ItemsControl>
+
                 </StackPanel>
             </ScrollViewer>
         </SplitView.Content>
     </SplitView>
-</UserControl>
+</UserControl>

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

@@ -13,17 +13,16 @@ public partial class PaletteDemo : UserControl
     public PaletteDemo()
     {
         InitializeComponent();
-        
+        this.DataContext = new PaletteDemoViewModel();
     }
 
     protected override async  void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
         base.OnApplyTemplate(e);
-        PaletteDemoViewModel? vm = new PaletteDemoViewModel();
+        PaletteDemoViewModel? vm = this.DataContext as PaletteDemoViewModel;
         await Dispatcher.UIThread.InvokeAsync(() =>
         {
-            vm.InitializeResources();
+            vm?.InitializeResources();
         });
-        DataContext = vm;
     }
 }

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

@@ -4,13 +4,13 @@
     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:DesignHeight="600"
     d:DesignWidth="800"
     mc:Ignorable="d">
     <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
         <StackPanel Orientation="Horizontal">
             <StackPanel.Styles>
-                <Style Selector="SelectableTextBlock">
+                <Style Selector="Grid > SelectableTextBlock">
                     <Setter Property="VerticalAlignment" Value="Center" />
                     <Setter Property="Margin" Value="4" />
                 </Style>
@@ -25,70 +25,76 @@
                 <Grid
                     VerticalAlignment="Top"
                     ColumnDefinitions="Auto, *"
-                    RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
-                    <SelectableTextBlock Grid.Row="1" Grid.Column="0">Classes</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="2" Grid.Column="0">-</SelectableTextBlock>
-                    <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">Success</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">Warning</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>
+                    RowDefinitions="*,*,*,*,*,*,*,*,*,*,*">
+                    <Grid.Styles>
+                        <Style Selector="SelectableTextBlock">
+                            <Setter Property="VerticalAlignment" Value="Center" />
+                            <Setter Property="Margin" Value="4" />
+                        </Style>
+                    </Grid.Styles>
+                    <SelectableTextBlock Grid.Row="0" Grid.Column="0">Classes</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="1" Grid.Column="0">-</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="2" Grid.Column="0">Secondary</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="3" Grid.Column="0">Tertiary</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="4" Grid.Column="0">Quaternary</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="5" Grid.Column="0">Success</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">Warning</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">Danger</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="8" Grid.Column="0">Mark</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="9" Grid.Column="0">Underline</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="10" Grid.Column="0">Delete</SelectableTextBlock>
 
-                    <SelectableTextBlock Grid.Row="2" Grid.Column="1">Text</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="1" Grid.Column="1">Text</SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="3"
+                        Grid.Row="2"
                         Grid.Column="1"
                         Classes="Secondary">
                         Secondary
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="4"
+                        Grid.Row="3"
                         Grid.Column="1"
                         Classes="Tertiary">
                         Tertiary
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="5"
+                        Grid.Row="4"
                         Grid.Column="1"
                         Classes="Quaternary">
                         Quaternary
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="6"
+                        Grid.Row="5"
                         Grid.Column="1"
                         Classes="Success">
                         Success
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="7"
+                        Grid.Row="6"
                         Grid.Column="1"
                         Classes="Warning">
                         Warning
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="8"
+                        Grid.Row="7"
                         Grid.Column="1"
                         Classes="Danger">
                         Danger
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="9"
+                        Grid.Row="8"
                         Grid.Column="1"
                         Classes="Mark">
                         Default Mark
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="10"
+                        Grid.Row="9"
                         Grid.Column="1"
                         Classes="Underline">
                         Underline
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="11"
+                        Grid.Row="10"
                         Grid.Column="1"
                         Classes="Delete">
                         Delete
@@ -104,53 +110,52 @@
                 Theme="{DynamicResource GroupBox}">
                 <Grid
                     VerticalAlignment="Top"
-                    Background="{Binding}"
                     ColumnDefinitions="Auto, *"
-                    RowDefinitions="*,*,*,*,*,*,*,*">
-                    <SelectableTextBlock Grid.Row="1" Grid.Column="0">Classes</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="2" Grid.Column="0">H1</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="3" Grid.Column="0">H2</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="4" Grid.Column="0">H3</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="5" Grid.Column="0">H4</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">H5</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">H6</SelectableTextBlock>
+                    RowDefinitions="*,*,*,*,*,*,*">
+                    <SelectableTextBlock Grid.Row="0" Grid.Column="0">Classes</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="1" Grid.Column="0">H1</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="2" Grid.Column="0">H2</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="3" Grid.Column="0">H3</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="4" Grid.Column="0">H4</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="5" Grid.Column="0">H5</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">H6</SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="2"
+                        Grid.Row="1"
                         Grid.Column="1"
                         Classes="H1"
                         Theme="{StaticResource TitleSelectableTextBlock}">
                         Header 1
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="3"
+                        Grid.Row="2"
                         Grid.Column="1"
                         Classes="H2"
                         Theme="{StaticResource TitleSelectableTextBlock}">
                         Header 2
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="4"
+                        Grid.Row="3"
                         Grid.Column="1"
                         Classes="H3"
                         Theme="{StaticResource TitleSelectableTextBlock}">
                         Header 3
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="5"
+                        Grid.Row="4"
                         Grid.Column="1"
                         Classes="H4"
                         Theme="{StaticResource TitleSelectableTextBlock}">
                         Header 4
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="6"
+                        Grid.Row="5"
                         Grid.Column="1"
                         Classes="H5"
                         Theme="{StaticResource TitleSelectableTextBlock}">
                         Header 5
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="7"
+                        Grid.Row="6"
                         Grid.Column="1"
                         Classes="H6"
                         Theme="{StaticResource TitleSelectableTextBlock}">

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

@@ -10,7 +10,7 @@
     <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
         <StackPanel Orientation="Horizontal">
             <StackPanel.Styles>
-                <Style Selector="TextBlock">
+                <Style Selector="Grid > TextBlock">
                     <Setter Property="VerticalAlignment" Value="Center" />
                     <Setter Property="Margin" Value="4" />
                 </Style>
@@ -25,70 +25,70 @@
                 <Grid
                     VerticalAlignment="Top"
                     ColumnDefinitions="Auto, *"
-                    RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
-                    <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
-                    <TextBlock Grid.Row="2" Grid.Column="0">-</TextBlock>
-                    <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">Success</TextBlock>
-                    <TextBlock Grid.Row="7" Grid.Column="0">Warning</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>
+                    RowDefinitions="*,*,*,*,*,*,*,*,*,*,*">
+                    <TextBlock Grid.Row="0" Grid.Column="0">Classes</TextBlock>
+                    <TextBlock Grid.Row="1" Grid.Column="0">-</TextBlock>
+                    <TextBlock Grid.Row="2" Grid.Column="0">Secondary</TextBlock>
+                    <TextBlock Grid.Row="3" Grid.Column="0">Tertiary</TextBlock>
+                    <TextBlock Grid.Row="4" Grid.Column="0">Quaternary</TextBlock>
+                    <TextBlock Grid.Row="5" Grid.Column="0">Success</TextBlock>
+                    <TextBlock Grid.Row="6" Grid.Column="0">Warning</TextBlock>
+                    <TextBlock Grid.Row="7" Grid.Column="0">Danger</TextBlock>
+                    <TextBlock Grid.Row="8" Grid.Column="0">Mark</TextBlock>
+                    <TextBlock Grid.Row="9" Grid.Column="0">Underline</TextBlock>
+                    <TextBlock Grid.Row="10" Grid.Column="0">Delete</TextBlock>
 
-                    <TextBlock Grid.Row="2" Grid.Column="1">Text</TextBlock>
+                    <TextBlock Grid.Row="1" Grid.Column="1">Text</TextBlock>
                     <TextBlock
-                        Grid.Row="3"
+                        Grid.Row="2"
                         Grid.Column="1"
                         Classes="Secondary">
                         Secondary
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="4"
+                        Grid.Row="3"
                         Grid.Column="1"
                         Classes="Tertiary">
                         Tertiary
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="5"
+                        Grid.Row="4"
                         Grid.Column="1"
                         Classes="Quaternary">
                         Quaternary
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="6"
+                        Grid.Row="5"
                         Grid.Column="1"
                         Classes="Success">
                         Success
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="7"
+                        Grid.Row="6"
                         Grid.Column="1"
                         Classes="Warning">
                         Warning
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="8"
+                        Grid.Row="7"
                         Grid.Column="1"
                         Classes="Danger">
                         Danger
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="9"
+                        Grid.Row="8"
                         Grid.Column="1"
                         Classes="Mark">
                         Default Mark
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="10"
+                        Grid.Row="9"
                         Grid.Column="1"
                         Classes="Underline">
                         Underline
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="11"
+                        Grid.Row="10"
                         Grid.Column="1"
                         Classes="Delete">
                         Delete
@@ -105,58 +105,57 @@
                 <Grid
                     VerticalAlignment="Top"
                     ColumnDefinitions="Auto, *"
-                    RowDefinitions="*,*,*,*,*,*,*,*">
-                    <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
-                    <TextBlock Grid.Row="2" Grid.Column="0">H1</TextBlock>
-                    <TextBlock Grid.Row="3" Grid.Column="0">H2</TextBlock>
-                    <TextBlock Grid.Row="4" Grid.Column="0">H3</TextBlock>
-                    <TextBlock Grid.Row="5" Grid.Column="0">H4</TextBlock>
-                    <TextBlock Grid.Row="6" Grid.Column="0">H5</TextBlock>
-                    <TextBlock Grid.Row="7" Grid.Column="0">H6</TextBlock>
+                    RowDefinitions="*,*,*,*,*,*,*">
+                    <TextBlock Grid.Row="0" Grid.Column="0">Classes</TextBlock>
+                    <TextBlock Grid.Row="1" Grid.Column="0">H1</TextBlock>
+                    <TextBlock Grid.Row="2" Grid.Column="0">H2</TextBlock>
+                    <TextBlock Grid.Row="3" Grid.Column="0">H3</TextBlock>
+                    <TextBlock Grid.Row="4" Grid.Column="0">H4</TextBlock>
+                    <TextBlock Grid.Row="5" Grid.Column="0">H5</TextBlock>
+                    <TextBlock Grid.Row="6" Grid.Column="0">H6</TextBlock>
                     <TextBlock
-                        Grid.Row="2"
+                        Grid.Row="1"
                         Grid.Column="1"
                         Classes="H1"
                         Theme="{StaticResource TitleTextBlock}">
                         Header 1
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="3"
+                        Grid.Row="2"
                         Grid.Column="1"
                         Classes="H2"
                         Theme="{StaticResource TitleTextBlock}">
                         Header 2
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="4"
+                        Grid.Row="3"
                         Grid.Column="1"
                         Classes="H3"
                         Theme="{StaticResource TitleTextBlock}">
                         Header 3
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="5"
+                        Grid.Row="4"
                         Grid.Column="1"
                         Classes="H4"
                         Theme="{StaticResource TitleTextBlock}">
                         Header 4
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="6"
+                        Grid.Row="5"
                         Grid.Column="1"
                         Classes="H5"
                         Theme="{StaticResource TitleTextBlock}">
                         Header 5
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="7"
+                        Grid.Row="6"
                         Grid.Column="1"
                         Classes="H6"
                         Theme="{StaticResource TitleTextBlock}">
                         Header 6
                     </TextBlock>
                 </Grid>
-
             </HeaderedContentControl>
         </StackPanel>
     </ScrollViewer>

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

@@ -24,8 +24,9 @@
             <TextBox Width="300" PasswordChar="*" />
             <TextBox
                 Width="300"
-                Classes="revealPasswordButton"
-                PasswordChar="*" />
+                Classes="ClearButton RevealPasswordButton"
+                PasswordChar="*"
+                Text="123456" />
             <TextBox
                 Width="500"
                 InnerLeftContent="http://"

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

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

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

@@ -26,15 +26,38 @@
             OnContent="OnContent" />
         <StackPanel Orientation="Horizontal">
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" />
-            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" IsChecked="True"/>
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" IsChecked="True" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small Loading" />
+            <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" 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}">

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

@@ -14,7 +14,7 @@
         <PackageReference Include="Avalonia.Controls.DataGrid" 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="$(AvaloniaVersion)" />
-        <PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2" />
+        <PackageReference Include="CommunityToolkit.Mvvm" Version="$(CommunityToolkitVersion)" />
     </ItemGroup>
 
     <ItemGroup>

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

@@ -1,8 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
     <ControlTheme x:Key="NavigationTab" TargetType="TabControl">
         <Setter Property="TabControl.Template">
-            <!--    -->
             <ControlTemplate TargetType="TabControl">
                 <Border
                     HorizontalAlignment="{TemplateBinding HorizontalAlignment}"

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

@@ -1,5 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
     <ControlTheme x:Key="SplitViewToggleButton" TargetType="ToggleButton">
         <Setter Property="ToggleButton.Template">
             <ControlTemplate TargetType="ToggleButton">

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

@@ -2,25 +2,25 @@ using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
 using Avalonia.Media;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Messaging;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
-public class PaletteDemoViewModel: ObservableObject
+public class PaletteDemoViewModel : ObservableObject
 {
     private readonly string[] _predefinedColorNames =
-    {
+    [
         "Red", "Pink", "Purple", "Violet", "Indigo",
         "Blue", "LightBlue", "Cyan", "Teal", "Green",
         "LightGreen", "Lime", "Yellow", "Amber", "Orange",
         "Grey"
-    };
+    ];
+
     private readonly IResourceDictionary? _lightResourceDictionary;
     private readonly IResourceDictionary? _darkResourceDictionary;
-    
+
     private ColorItemViewModel _selectedColor = null!;
 
     public ColorItemViewModel SelectedColor
@@ -28,26 +28,30 @@ public class PaletteDemoViewModel: ObservableObject
         get => _selectedColor;
         set => SetProperty(ref _selectedColor, value);
     }
-    
-    
+
+
     private ObservableCollection<ColorListViewModel>? _lightLists;
+
     public ObservableCollection<ColorListViewModel>? LightLists
     {
         get => _lightLists;
         set => SetProperty(ref _lightLists, value);
     }
+
     private ObservableCollection<ColorListViewModel>? _darkLists;
+
     public ObservableCollection<ColorListViewModel>? DarkLists
     {
         get => _darkLists;
         set => SetProperty(ref _darkLists, value);
     }
 
-    public ObservableCollection<FunctionalColorGroupViewModel> FunctionalColors { get; set; } = new();
+    public ObservableCollection<FunctionalColorGroupViewModel> FunctionalColors { get; set; } = [];
+    public ObservableCollection<ShadowGroupViewModel> Shadows { get; set; } = [];
 
     public PaletteDemoViewModel()
     {
-        _lightResourceDictionary  = new Light.Palette();
+        _lightResourceDictionary = new Light.Palette();
         _darkResourceDictionary = new Dark.Palette();
         WeakReferenceMessenger.Default.Register<PaletteDemoViewModel, ColorItemViewModel>(this, OnClickColorItem);
     }
@@ -56,18 +60,20 @@ public class PaletteDemoViewModel: ObservableObject
     {
         InitializePalette();
         InitializeFunctionalColors();
+        InitializeShadows();
     }
 
     private void InitializePalette()
     {
-        LightLists = new ObservableCollection<ColorListViewModel>();
+        LightLists = [];
         foreach (var color in _predefinedColorNames)
         {
             ColorListViewModel s = new ColorListViewModel();
             s.Initialize(_lightResourceDictionary, color, true);
             LightLists.Add(s);
         }
-        DarkLists = new ObservableCollection<ColorListViewModel>();
+
+        DarkLists = [];
         foreach (var color in _predefinedColorNames)
         {
             ColorListViewModel s = new ColorListViewModel();
@@ -92,13 +98,19 @@ public class PaletteDemoViewModel: ObservableObject
         FunctionalColors.Add(new FunctionalColorGroupViewModel("Border", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BorderTokens));
         FunctionalColors.Add(new FunctionalColorGroupViewModel("Disabled", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DisabledTokens));
     }
+
+    private void InitializeShadows()
+    {
+        Shadows.Add(new ShadowGroupViewModel("Shadow", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.ShadowTokens));
+    }
+
     private void OnClickColorItem(PaletteDemoViewModel vm, ColorItemViewModel item)
     {
         SelectedColor = item;
     }
 }
 
-public class ColorListViewModel: ObservableObject
+public class ColorListViewModel : ObservableObject
 {
     private ObservableCollection<ColorItemViewModel>? _colors;
 
@@ -115,17 +127,18 @@ public class ColorListViewModel: ObservableObject
         get => _seriesName;
         set => SetProperty(ref _seriesName, value);
     }
-    
+
     internal void Initialize(IResourceDictionary? resourceDictionary, string color, bool light)
     {
         if (resourceDictionary is null)
         {
             return;
         }
+
         SeriesName = color;
-        Color = new ObservableCollection<ColorItemViewModel>();
-        
-        for (int i = 0; i < 10; i++)
+        Color = [];
+
+        for (var i = 0; i < 10; i++)
         {
             var key = "Semi" + color + i;
             if (resourceDictionary.TryGetValue(key, out var value))
@@ -136,7 +149,7 @@ public class ColorListViewModel: ObservableObject
                     var item = new ColorItemViewModel(name, brush, key, light, i);
                     item.ColorResourceKey = item.ResourceKey + "Color";
                     Color.Add(item);
-                } 
+                }
             }
         }
     }
@@ -144,15 +157,16 @@ public class ColorListViewModel: ObservableObject
 
 public class ColorItemViewModel : ObservableObject
 {
-
     private IBrush _brush = null!;
+
     public IBrush Brush
     {
         get => _brush;
         set => SetProperty(ref _brush, value);
     }
-    
+
     private IBrush _textBrush = null!;
+
     public IBrush TextBrush
     {
         get => _textBrush;
@@ -160,6 +174,7 @@ public class ColorItemViewModel : ObservableObject
     }
 
     private string _colorDisplayName = null!;
+
     public string ColorDisplayName
     {
         get => _colorDisplayName;
@@ -189,8 +204,9 @@ public class ColorItemViewModel : ObservableObject
         get => _hex;
         set => SetProperty(ref _hex, value);
     }
-    
-    public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light, int index)
+
+    public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light,
+        int index)
     {
         ColorDisplayName = colorDisplayName;
         Brush = brush;
@@ -210,22 +226,22 @@ public class ColorItemViewModel : ObservableObject
 public class FunctionalColorGroupViewModel : ObservableObject
 {
     private string _title = null!;
+
     public string Title
     {
         get => _title;
         set => SetProperty(ref _title, value);
     }
 
-    public ObservableCollection<ColorItemViewModel> LightColors { get; set; } = new();
-    public ObservableCollection<ColorItemViewModel> DarkColors { get; set; } = new();
+    public ObservableCollection<ColorItemViewModel> LightColors { get; set; } = [];
+    public ObservableCollection<ColorItemViewModel> DarkColors { get; set; } = [];
 
-    public FunctionalColorGroupViewModel(string title, IResourceDictionary? lightDictionary, IResourceDictionary? darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
+    public FunctionalColorGroupViewModel(string title, IResourceDictionary? lightDictionary,
+        IResourceDictionary? darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
     {
         Title = title;
-        foreach (var token in tokens)
+        foreach (var (key, name) in tokens)
         {
-            string key = token.Item1;
-            string name = token.Item2;
             if (lightDictionary?.TryGetValue(key, out var lightValue) ?? false)
             {
                 if (lightValue is ISolidColorBrush lightBrush)
@@ -245,125 +261,203 @@ public class FunctionalColorGroupViewModel : ObservableObject
     }
 }
 
+public class ShadowItemViewModel : ObservableObject
+{
+    private string _shadowDisplayName = null!;
+
+    public string ShadowDisplayName
+    {
+        get => _shadowDisplayName;
+        set => SetProperty(ref _shadowDisplayName, value);
+    }
+
+    private string _resourceKey = null!;
+
+    public string ResourceKey
+    {
+        get => _resourceKey;
+        set => SetProperty(ref _resourceKey, value);
+    }
+
+    private string _boxShadowValue = null!;
+
+    public string BoxShadowValue
+    {
+        get => _boxShadowValue;
+        set => SetProperty(ref _boxShadowValue, value);
+    }
+
+    public ShadowItemViewModel(string shadowDisplayName, BoxShadows boxShadows, string resourceKey)
+    {
+        ShadowDisplayName = shadowDisplayName;
+        ResourceKey = resourceKey;
+        BoxShadowValue = boxShadows.ToString();
+    }
+}
+
+public class ShadowGroupViewModel : ObservableObject
+{
+    private string _title = null!;
+
+    public string Title
+    {
+        get => _title;
+        set => SetProperty(ref _title, value);
+    }
+
+    public ObservableCollection<ShadowItemViewModel> LightShadows { get; set; } = [];
+    public ObservableCollection<ShadowItemViewModel> DarkShadows { get; set; } = [];
+
+
+    public ShadowGroupViewModel(string title, IResourceDictionary? lightDictionary,
+        IResourceDictionary? darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
+    {
+        Title = title;
+        foreach (var (key, name) in tokens)
+        {
+            if (lightDictionary?.TryGetValue(key, out var lightValue) ?? false)
+            {
+                if (lightValue is BoxShadows lightShadow)
+                {
+                    LightShadows.Add(new ShadowItemViewModel(name, lightShadow, key));
+                }
+            }
+
+            if (darkDictionary?.TryGetValue(key, out var darkValue) ?? false)
+            {
+                if (darkValue is BoxShadows darkShadow)
+                {
+                    DarkShadows.Add(new ShadowItemViewModel(name, darkShadow, key));
+                }
+            }
+        }
+    }
+}
+
 public static class ColorTokens
 {
     public static IReadOnlyList<Tuple<string, string>> PrimaryTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorPrimary", "Primary"),
-        new ("SemiColorPrimaryPointerover", "Primary Pointerover"),
-        new ("SemiColorPrimaryActive", "Primary Active"),
-        new ("SemiColorPrimaryDisabled", "Primary Disabled"),
-        new ("SemiColorPrimaryLight", "Primary Light"),
-        new ("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
-        new ("SemiColorPrimaryLightActive", "Primary Light Active"),
+        new("SemiColorPrimary", "Primary"),
+        new("SemiColorPrimaryPointerover", "Primary Pointerover"),
+        new("SemiColorPrimaryActive", "Primary Active"),
+        new("SemiColorPrimaryDisabled", "Primary Disabled"),
+        new("SemiColorPrimaryLight", "Primary Light"),
+        new("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
+        new("SemiColorPrimaryLightActive", "Primary Light Active"),
     };
 
     public static IReadOnlyList<Tuple<string, string>> SecondaryTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorSecondary", "Secondary"),
-        new ("SemiColorSecondaryPointerover", "Secondary Pointerover"),
-        new ("SemiColorSecondaryActive", "Secondary Active"),
-        new ("SemiColorSecondaryDisabled", "Secondary Disabled"),
-        new ("SemiColorSecondaryLight", "Secondary Light"),
-        new ("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"),
-        new ("SemiColorSecondaryLightActive", "Secondary Light Active"),
+        new("SemiColorSecondary", "Secondary"),
+        new("SemiColorSecondaryPointerover", "Secondary Pointerover"),
+        new("SemiColorSecondaryActive", "Secondary Active"),
+        new("SemiColorSecondaryDisabled", "Secondary Disabled"),
+        new("SemiColorSecondaryLight", "Secondary Light"),
+        new("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"),
+        new("SemiColorSecondaryLightActive", "Secondary Light Active"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> TertiaryTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorTertiary", "Tertiary"),
-        new ("SemiColorTertiaryPointerover", "Tertiary Pointerover"),
-        new ("SemiColorTertiaryActive", "Tertiary Active"),
-        new ("SemiColorTertiaryLight", "Tertiary Light"),
-        new ("SemiColorTertiaryLightPointerover", "Tertiary Light Pointerover"),
-        new ("SemiColorTertiaryLightActive", "Tertiary Light Active"),
+        new("SemiColorTertiary", "Tertiary"),
+        new("SemiColorTertiaryPointerover", "Tertiary Pointerover"),
+        new("SemiColorTertiaryActive", "Tertiary Active"),
+        new("SemiColorTertiaryLight", "Tertiary Light"),
+        new("SemiColorTertiaryLightPointerover", "Tertiary Light Pointerover"),
+        new("SemiColorTertiaryLightActive", "Tertiary Light Active"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> InformationTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorInformation", "Information"),
-        new ("SemiColorInformationPointerover", "Information Pointerover"),
-        new ("SemiColorInformationActive", "Information Active"),
-        new ("SemiColorInformationDisabled", "Information Disabled"),
-        new ("SemiColorInformationLight", "Information Light"),
-        new ("SemiColorInformationLightPointerover", "Information Light Pointerover"),
-        new ("SemiColorInformationLightActive", "Information Light Active"),
+        new("SemiColorInformation", "Information"),
+        new("SemiColorInformationPointerover", "Information Pointerover"),
+        new("SemiColorInformationActive", "Information Active"),
+        new("SemiColorInformationDisabled", "Information Disabled"),
+        new("SemiColorInformationLight", "Information Light"),
+        new("SemiColorInformationLightPointerover", "Information Light Pointerover"),
+        new("SemiColorInformationLightActive", "Information Light Active"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> SuccessTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorSuccess", "Success"),
-        new ("SemiColorSuccessPointerover", "Success Pointerover"),
-        new ("SemiColorSuccessActive", "Success Active"),
-        new ("SemiColorSuccessDisabled", "Success Disabled"),
-        new ("SemiColorSuccessLight", "Success Light"),
-        new ("SemiColorSuccessLightPointerover", "Success Light Pointerover"),
-        new ("SemiColorSuccessLightActive", "Success Light Active"),
+        new("SemiColorSuccess", "Success"),
+        new("SemiColorSuccessPointerover", "Success Pointerover"),
+        new("SemiColorSuccessActive", "Success Active"),
+        new("SemiColorSuccessDisabled", "Success Disabled"),
+        new("SemiColorSuccessLight", "Success Light"),
+        new("SemiColorSuccessLightPointerover", "Success Light Pointerover"),
+        new("SemiColorSuccessLightActive", "Success Light Active"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> WarningTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorWarning", "Warning"),
-        new ("SemiColorWarningPointerover", "Warning Pointerover"),
-        new ("SemiColorWarningActive", "Warning Active"),
-        new ("SemiColorWarningLight", "Warning Light"),
-        new ("SemiColorWarningLightPointerover", "Warning Light Pointerover"),
-        new ("SemiColorWarningLightActive", "Warning Light Active"),
+        new("SemiColorWarning", "Warning"),
+        new("SemiColorWarningPointerover", "Warning Pointerover"),
+        new("SemiColorWarningActive", "Warning Active"),
+        new("SemiColorWarningLight", "Warning Light"),
+        new("SemiColorWarningLightPointerover", "Warning Light Pointerover"),
+        new("SemiColorWarningLightActive", "Warning Light Active"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> DangerTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorDanger", "Danger"),
-        new ("SemiColorDangerPointerover", "Danger Pointerover"),
-        new ("SemiColorDangerActive", "Danger Active"),
-        new ("SemiColorDangerLight", "Danger Light"),
-        new ("SemiColorDangerLightPointerover", "Danger Light Pointerover"),
-        new ("SemiColorDangerLightActive", "Danger Light Active"),
+        new("SemiColorDanger", "Danger"),
+        new("SemiColorDangerPointerover", "Danger Pointerover"),
+        new("SemiColorDangerActive", "Danger Active"),
+        new("SemiColorDangerLight", "Danger Light"),
+        new("SemiColorDangerLightPointerover", "Danger Light Pointerover"),
+        new("SemiColorDangerLightActive", "Danger Light Active"),
     };
 
     public static IReadOnlyList<Tuple<string, string>> TextTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorText0", "Text 0"),
-        new ("SemiColorText1", "Text 1"),
-        new ("SemiColorText2", "Text 2"),
-        new ("SemiColorText3", "Text 3"),
+        new("SemiColorText0", "Text 0"),
+        new("SemiColorText1", "Text 1"),
+        new("SemiColorText2", "Text 2"),
+        new("SemiColorText3", "Text 3"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> LinkTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorLink", "Link"),
-        new ("SemiColorLinkPointerover", "Link Pointerover"),
-        new ("SemiColorLinkActive", "Link Active"),
-        new ("SemiColorLinkVisited", "Link Visited"),
+        new("SemiColorLink", "Link"),
+        new("SemiColorLinkPointerover", "Link Pointerover"),
+        new("SemiColorLinkActive", "Link Active"),
+        new("SemiColorLinkVisited", "Link Visited"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> BackgroundTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorBackground0", "Background 0"),
-        new ("SemiColorBackground1", "Background 1"),
-        new ("SemiColorBackground2", "Background 2"),
-        new ("SemiColorBackground3", "Background 3"),
-        new ("SemiColorBackground4", "Background 4"),
+        new("SemiColorBackground0", "Background 0"),
+        new("SemiColorBackground1", "Background 1"),
+        new("SemiColorBackground2", "Background 2"),
+        new("SemiColorBackground3", "Background 3"),
+        new("SemiColorBackground4", "Background 4"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> FillTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorFill0", "Fill 0"),
-        new ("SemiColorFill1", "Fill 1"),
-        new ("SemiColorFill2", "Fill 2"),
+        new("SemiColorFill0", "Fill 0"),
+        new("SemiColorFill1", "Fill 1"),
+        new("SemiColorFill2", "Fill 2"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> BorderTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorBorder", "Border"),
+        new("SemiColorBorder", "Border"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> DisabledTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorDisabledText", "Disabled Text"),
-        new ("SemiColorDisabledBorder", "Disabled Border"),
-        new ("SemiColorDisabledBackground", "Disabled Background"),
-        new ("SemiColorDisabledFill", "Disabled Fill"),
+        new("SemiColorDisabledText", "Disabled Text"),
+        new("SemiColorDisabledBorder", "Disabled Border"),
+        new("SemiColorDisabledBackground", "Disabled Background"),
+        new("SemiColorDisabledFill", "Disabled Fill"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> ShadowTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorShadow", "Shadow"),
+        new("SemiShadowElevated", "Shadow Elevated"),
     };
-    
 }

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

@@ -5,8 +5,11 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:pages="using:Semi.Avalonia.Demo.Pages"
+    xmlns:views="clr-namespace:Semi.Avalonia.Demo.Views"
     d:DesignHeight="450"
     d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="views:MainViewModel"
     mc:Ignorable="d">
     <UserControl.Resources>
         <ResourceDictionary>
@@ -36,43 +39,29 @@
                         Margin="8,0"
                         VerticalAlignment="Center"
                         Classes="Secondary"
-                        Text="{Binding #tab.SelectedItem.Header}" />
+                        Text="{ReflectionBinding #tab.SelectedItem.Header}" />
                 </StackPanel>
                 <StackPanel Grid.Column="1" Orientation="Horizontal">
-                    <Button Theme="{DynamicResource BorderlessButton}" Click="OpenDocumentation">
+                    <Button Click="OpenDocumentation" Theme="{DynamicResource BorderlessButton}">
                         <PathIcon
                             Width="16"
                             Height="16"
                             Data="M12 21.5C10.65 20.65 8.2 20 6.5 20C4.85 20 3.15 20.3 1.75 21.05C1.65 21.1 1.6 21.1 1.5 21.1C1.25 21.1 1 20.85 1 20.6V6C1.6 5.55 2.25 5.25 3 5C4.11 4.65 5.33 4.5 6.5 4.5C8.45 4.5 10.55 4.9 12 6C13.45 4.9 15.55 4.5 17.5 4.5C18.67 4.5 19.89 4.65 21 5C21.75 5.25 22.4 5.55 23 6V20.6C23 20.85 22.75 21.1 22.5 21.1C22.4 21.1 22.35 21.1 22.25 21.05C20.85 20.3 19.15 20 17.5 20C15.8 20 13.35 20.65 12 21.5M12 8V19.5C13.35 18.65 15.8 18 17.5 18C18.7 18 19.9 18.15 21 18.5V7C19.9 6.65 18.7 6.5 17.5 6.5C15.8 6.5 13.35 7.15 12 8M13 11.5C14.11 10.82 15.6 10.5 17.5 10.5C18.41 10.5 19.26 10.59 20 10.78V9.23C19.13 9.08 18.29 9 17.5 9C15.73 9 14.23 9.28 13 9.84V11.5M17.5 11.67C15.79 11.67 14.29 11.93 13 12.46V14.15C14.11 13.5 15.6 13.16 17.5 13.16C18.54 13.16 19.38 13.24 20 13.4V11.9C19.13 11.74 18.29 11.67 17.5 11.67M20 14.57C19.13 14.41 18.29 14.33 17.5 14.33C15.67 14.33 14.17 14.6 13 15.13V16.82C14.11 16.16 15.6 15.83 17.5 15.83C18.54 15.83 19.38 15.91 20 16.07V14.57Z"
                             Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
                     </Button>
-                    <Button Theme="{DynamicResource BorderlessButton}" Click="OpenRepository">
+                    <Button Click="OpenRepository" Theme="{DynamicResource BorderlessButton}">
                         <PathIcon
                             Width="16"
                             Height="16"
                             Data="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
                             Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
                     </Button>
-                    <ToggleSwitch
-                        Grid.Column="1"
-                        Padding="4"
-                        IsCheckedChanged="ToggleButton_OnIsCheckedChanged"
-                        Theme="{DynamicResource ButtonToggleSwitch}">
-                        <ToggleSwitch.OnContent>
-                            <PathIcon
-                                Width="16"
-                                Height="16"
-                                Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z"
-                                Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                        </ToggleSwitch.OnContent>
-                        <ToggleSwitch.OffContent>
-                            <PathIcon
-                                Width="16"
-                                Height="16"
-                                Data="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13"
-                                Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                        </ToggleSwitch.OffContent>
-                    </ToggleSwitch>
+                    <ComboBox
+                        MinWidth="100"
+                        PlaceholderText="Select a theme"
+                        DisplayMemberBinding="{Binding Name}"
+                        ItemsSource="{Binding Themes}"
+                        SelectedItem="{Binding SelectedTheme}" />
                 </StackPanel>
             </Grid>
 

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

@@ -1,8 +1,10 @@
 using System;
+using System.Collections.ObjectModel;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Interactivity;
 using Avalonia.Styling;
+using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Views;
 
@@ -11,6 +13,7 @@ public partial class MainView : UserControl
     public MainView()
     {
         InitializeComponent();
+        this.DataContext = new MainViewModel();
     }
 
     private void ToggleButton_OnIsCheckedChanged(object sender, RoutedEventArgs e)
@@ -38,4 +41,36 @@ public partial class MainView : UserControl
         var launcher = top.Launcher;
         await launcher.LaunchUriAsync(new Uri("https://docs.irihi.tech/semi"));
     }
+}
+
+public partial class MainViewModel : ObservableObject
+{
+    public ObservableCollection<ThemeItem> Themes { get; } =
+    [
+        new("Default", ThemeVariant.Default),
+        new("Light", ThemeVariant.Light),
+        new("Dark", ThemeVariant.Dark),
+        new("Aquatic", SemiTheme.Aquatic),
+        new("Desert", SemiTheme.Desert),
+        new("Dust", SemiTheme.Dust),
+        new("NightSky", SemiTheme.NightSky)
+    ];
+
+    [ObservableProperty] private ThemeItem? _selectedTheme;
+
+    partial void OnSelectedThemeChanged(ThemeItem? oldValue, ThemeItem? newValue)
+    {
+        if (newValue is null) return;
+        var app = Application.Current;
+        if (app is not null)
+        {
+            app.RequestedThemeVariant = newValue.Theme;
+        }
+    }
+}
+
+public class ThemeItem(string name, ThemeVariant theme)
+{
+    public string Name { get; set; } = name;
+    public ThemeVariant Theme { get; set; } = theme;
 }

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

@@ -1,5 +1,6 @@
 using Avalonia;
 using System;
+using Avalonia.Media;
 
 namespace Semi.Avalonia.TreeDataGrid.Demo;
 
@@ -10,12 +11,21 @@ class Program
     // yet and stuff might break.
     [STAThread]
     public static void Main(string[] args) => BuildAvaloniaApp()
+        .With(new FontManagerOptions
+        {
+            FontFallbacks =
+            [
+                new FontFallback
+                {
+                    FontFamily = new FontFamily("Microsoft YaHei")
+                }
+            ]
+        })
         .StartWithClassicDesktopLifetime(args);
 
     // Avalonia configuration, don't remove; also used by visual designer.
     public static AppBuilder BuildAvaloniaApp()
         => AppBuilder.Configure<App>()
             .UsePlatformDetect()
-            .WithInterFont()
             .LogToTrace();
 }

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

@@ -1,28 +1,29 @@
 <Project Sdk="Microsoft.NET.Sdk">
     <PropertyGroup>
         <OutputType>WinExe</OutputType>
-        <TargetFramework>net6.0</TargetFramework>
+        <TargetFramework>net8.0</TargetFramework>
         <Nullable>enable</Nullable>
         <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
+        <LangVersion>latest</LangVersion>
         <ApplicationManifest>app.manifest</ApplicationManifest>
         <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
+        <!-- Uncomment below to enable Native AOT compilation-->
+        <!--<PublishAot>true</PublishAot>-->
+        <!--<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>-->
     </PropertyGroup>
 
     <Import Project="../Directory.Build.props" />
-    
+
     <ItemGroup>
         <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
         <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.Themes.Fluent" Version="$(AvaloniaVersion)" />
-        <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="$(AvaloniaVersion)" />
-        <PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.1" />
+        <PackageReference Include="CommunityToolkit.Mvvm" Version="$(CommunityToolkitVersion)" />
     </ItemGroup>
 
-
     <ItemGroup>
-      <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj" />
-      <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj" />
+        <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj" />
+        <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj" />
     </ItemGroup>
 </Project>

src/Package.props

@@ -3,14 +3,14 @@
         <TargetFrameworks>net6.0;net8.0;netstandard2.0</TargetFrameworks>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <Version>11.1.0.1</Version>
+        <Version>11.2.1</Version>
         <Authors>IRIHI Technology Co., Ltd.</Authors>
         <Description>Avalonia Theme inspired by Semi Design.</Description>
         <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>
         <PackageLicenseExpression>MIT</PackageLicenseExpression>
         <PackageIcon>irihi.png</PackageIcon>
         <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
-        <AvaloniaVersion>11.1.0</AvaloniaVersion>
+        <AvaloniaVersion>11.2.1</AvaloniaVersion>
     </PropertyGroup>
 
     <ItemGroup>

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

@@ -5,7 +5,6 @@
     xmlns:converters="using:Avalonia.Controls.Converters"
     xmlns:primitives="using:Avalonia.Controls.Primitives"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
     <ResourceDictionary.MergedDictionaries>
         <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml" />
@@ -52,7 +51,6 @@
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    Padding="0,0,10,0"
                     HorizontalContentAlignment="Stretch"
                     VerticalContentAlignment="Stretch"
                     ClipToBounds="True"
@@ -82,7 +80,7 @@
                                 <!--  Backgrounds  -->
                                 <!--  TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}"  -->
                                 <Border
-                                    x:Name="ContentBackgroundBorder"
+                                    Name="ContentBackgroundBorder"
                                     Grid.Row="0"
                                     Grid.RowSpan="2"
                                     Height="{TemplateBinding Height}"
@@ -94,7 +92,7 @@
                                     CornerRadius="{TemplateBinding CornerRadius}" />
 
                                 <TabControl
-                                    x:Name="PART_TabControl"
+                                    Name="PART_TabControl"
                                     Grid.Row="0"
                                     Padding="0"
                                     VerticalAlignment="Stretch"
@@ -131,7 +129,7 @@
                                                 <ColumnDefinition Width="Auto" MinWidth="32" />
                                             </Grid.ColumnDefinitions>
                                             <primitives:ColorSlider
-                                                x:Name="ColorSpectrumThirdComponentSlider"
+                                                Name="ColorSpectrumThirdComponentSlider"
                                                 Grid.Column="0"
                                                 Margin="0,0,12,0"
                                                 HorizontalAlignment="Center"
@@ -145,7 +143,7 @@
                                                 IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                                 Orientation="Vertical" />
                                             <primitives:ColorSpectrum
-                                                x:Name="ColorSpectrum"
+                                                Name="ColorSpectrum"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Stretch"
@@ -159,7 +157,7 @@
                                                 MinValue="{TemplateBinding MinValue}"
                                                 Shape="{TemplateBinding ColorSpectrumShape}" />
                                             <primitives:ColorSlider
-                                                x:Name="ColorSpectrumAlphaSlider"
+                                                Name="ColorSpectrumAlphaSlider"
                                                 Grid.Column="2"
                                                 Margin="12,0,0,0"
                                                 HorizontalAlignment="Center"
@@ -234,7 +232,7 @@
                                             RowDefinitions="Auto,24,1*,1*,1*,1*,12"
                                             Tag="{TemplateBinding ColorModel}">
                                             <Grid.Styles>
-                                                <Style Selector="NumericUpDown /template/ TextBox">
+                                                <Style Selector="NumericUpDown">
                                                     <Setter Property="InnerLeftContent">
                                                         <Template>
                                                             <TextBlock Width="12" Text="{Binding $parent[NumericUpDown].Tag}" />
@@ -283,7 +281,7 @@
                                                     CornerRadius="3">
                                                     <Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
                                                         <RadioButton
-                                                            x:Name="RgbRadioButton"
+                                                            Name="RgbRadioButton"
                                                             Grid.Column="0"
                                                             HorizontalContentAlignment="Center"
                                                             VerticalContentAlignment="Center"
@@ -295,7 +293,7 @@
                                                                                         Mode=TwoWay}"
                                                             Theme="{DynamicResource ColorViewRadioButton}" />
                                                         <RadioButton
-                                                            x:Name="HsvRadioButton"
+                                                            Name="HsvRadioButton"
                                                             Grid.Column="1"
                                                             HorizontalContentAlignment="Center"
                                                             VerticalContentAlignment="Center"
@@ -309,7 +307,7 @@
                                                     </Grid>
                                                 </Border>
                                                 <TextBox
-                                                    x:Name="PART_HexTextBox"
+                                                    Name="PART_HexTextBox"
                                                     Grid.Column="2"
                                                     Height="32"
                                                     HorizontalAlignment="Stretch"
@@ -321,7 +319,7 @@
                                             <!--  Color component editing controls  -->
                                             <!--  Component 1 RGB:Red HSV:Hue  -->
                                             <NumericUpDown
-                                                x:Name="Component1NumericUpDown"
+                                                Name="Component1NumericUpDown"
                                                 Grid.Row="2"
                                                 Grid.Column="0"
                                                 Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -336,7 +334,7 @@
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component1Slider}" />
                                             <primitives:ColorSlider
-                                                x:Name="Component1Slider"
+                                                Name="Component1Slider"
                                                 Grid.Row="2"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
@@ -352,7 +350,7 @@
                                                 TickFrequency="1" />
                                             <!--  Component 2 RGB:Green HSV:Saturation  -->
                                             <NumericUpDown
-                                                x:Name="Component2NumericUpDown"
+                                                Name="Component2NumericUpDown"
                                                 Grid.Row="3"
                                                 Grid.Column="0"
                                                 Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -367,7 +365,7 @@
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component2Slider}" />
                                             <primitives:ColorSlider
-                                                x:Name="Component2Slider"
+                                                Name="Component2Slider"
                                                 Grid.Row="3"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
@@ -383,7 +381,7 @@
                                                 TickFrequency="1" />
                                             <!--  Component 3 RGB:Blue HSV:Value  -->
                                             <NumericUpDown
-                                                x:Name="Component3NumericUpDown"
+                                                Name="Component3NumericUpDown"
                                                 Grid.Row="4"
                                                 Grid.Column="0"
                                                 Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -398,7 +396,7 @@
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component3Slider}" />
                                             <primitives:ColorSlider
-                                                x:Name="Component3Slider"
+                                                Name="Component3Slider"
                                                 Grid.Row="4"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
@@ -414,7 +412,7 @@
                                                 TickFrequency="1" />
                                             <!--  Alpha Component  -->
                                             <NumericUpDown
-                                                x:Name="AlphaComponentNumericUpDown"
+                                                Name="AlphaComponentNumericUpDown"
                                                 Grid.Row="5"
                                                 Grid.Column="0"
                                                 Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -436,7 +434,7 @@
                                                 </NumericUpDown.IsVisible>
                                             </NumericUpDown>
                                             <primitives:ColorSlider
-                                                x:Name="AlphaComponentSlider"
+                                                Name="AlphaComponentSlider"
                                                 Grid.Row="5"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
@@ -474,6 +472,10 @@
                 </DropDownButton>
             </ControlTemplate>
         </Setter>
+        
+        <Style Selector="^ /template/ DropDownButton">
+            <Setter Property="Padding" Value="0 0 10 0"></Setter>
+        </Style>
     </ControlTheme>
 
     <ControlTheme
@@ -514,4 +516,198 @@
         </Setter>
     </ControlTheme>
 
+    <ControlTheme
+        x:Key="SimpleColorPicker"
+        BasedOn="{StaticResource {x:Type ColorPicker}}"
+        TargetType="ColorPicker">
+        <Setter Property="ColorSpectrumComponents" Value="SaturationValue" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="{x:Type ColorPicker}">
+                <DropDownButton
+                    Width="{TemplateBinding Width}"
+                    Height="{TemplateBinding Height}"
+                    HorizontalContentAlignment="Stretch"
+                    VerticalContentAlignment="Stretch"
+                    ClipToBounds="True"
+                    Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    UseLayoutRounding="False">
+                    <DropDownButton.Styles>
+                        <Style Selector="FlyoutPresenter.nopadding">
+                            <Setter Property="Padding" Value="0" />
+                        </Style>
+                    </DropDownButton.Styles>
+                    <DropDownButton.Flyout>
+                        <Flyout FlyoutPresenterClasses="nopadding" Placement="{DynamicResource SimpleColorPickerFlyoutPlacement}">
+
+                            <!--
+                                The following is copy-pasted from the ColorView's control template.
+                                It MUST always be kept in sync with the ColorView (which is master).
+                                Note the only changes are resources specific to the ColorPicker.
+                            -->
+                            <Grid Width="280">
+                                <Grid.RowDefinitions>
+                                    <RowDefinition Height="*" MinHeight="280" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                </Grid.RowDefinitions>
+                                <!--  Spectrum Tab  -->
+                                <Border
+                                    Grid.Row="0"
+                                    CornerRadius="8 8 0 0"
+                                    ClipToBounds="True">
+                                    <primitives:ColorSpectrum
+                                        Name="ColorSpectrum"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        Components="{TemplateBinding ColorSpectrumComponents}"
+                                        HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                                        MaxHue="{TemplateBinding MaxHue}"
+                                        MaxSaturation="{TemplateBinding MaxSaturation}"
+                                        MaxValue="{TemplateBinding MaxValue}"
+                                        MinHue="{TemplateBinding MinHue}"
+                                        MinSaturation="{TemplateBinding MinSaturation}"
+                                        MinValue="{TemplateBinding MinValue}"
+                                        Shape="{TemplateBinding ColorSpectrumShape}" />
+                                </Border>
+                                <primitives:ColorSlider
+                                    Name="ColorSpectrumThirdComponentSlider"
+                                    Grid.Row="1"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    AutomationProperties.Name="Third Component"
+                                    ColorComponent="{Binding #ColorSpectrum.ThirdComponent}"
+                                    ColorModel="Hsva"
+                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                                    IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
+                                    Orientation="Horizontal" />
+
+                                <primitives:ColorSlider
+                                    Name="ColorSpectrumAlphaSlider"
+                                    Grid.Row="2"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    AutomationProperties.Name="Alpha Component"
+                                    ColorComponent="Alpha"
+                                    ColorModel="Hsva"
+                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                                    IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                                    IsVisible="{TemplateBinding IsAlphaVisible}"
+                                    IsRoundingEnabled="True"
+                                    IsSnapToTickEnabled="True"
+                                    TickFrequency="1"
+                                    Orientation="Horizontal">
+                                </primitives:ColorSlider>
+                                <StackPanel
+                                    Grid.Row="3"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    Orientation="Horizontal"
+                                    Margin="0 8 0 0">
+                                    <Border
+                                        Background="{TemplateBinding Color, Converter={StaticResource ToBrushConverter}}"
+                                        Width="20"
+                                        Height="20"
+                                        CornerRadius="4" />
+                                    <Panel
+                                        Name="PART_TextBoxPanel"
+                                        Width="106"
+                                        Margin="4 0 0 0"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Center">
+                                        <TextBox
+                                            Name="PART_HexTextBox"
+                                            Classes="Small"
+                                            InnerLeftContent="#"
+                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
+                                            Text="{TemplateBinding Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
+                                            MaxLength="8" />
+                                        <TextBox
+                                            Name="PART_RgbaTextBox"
+                                            Classes="Small"
+                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Rgba}"
+                                            Text="{TemplateBinding Color, Converter={StaticResource ColorToTextConverter}, Mode=TwoWay}" />
+                                        <TextBox
+                                            Name="PART_HsvaTextBox"
+                                            Classes="Small"
+                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
+                                            Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
+                                    </Panel>
+
+                                    <NumericUpDown
+                                        Name="AlphaComponentNumericUpDown"
+                                        Width="70"
+                                        HorizontalAlignment="Right"
+                                        VerticalAlignment="Center"
+                                        AllowSpin="True"
+                                        Classes="Small"
+                                        IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                                        Maximum="{Binding #ColorSpectrumAlphaSlider.Maximum}"
+                                        Minimum="{Binding #ColorSpectrumAlphaSlider.Minimum}"
+                                        NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                        ShowButtonSpinner="False"
+                                        InnerRightContent="%"
+                                        IsVisible="{TemplateBinding IsAlphaVisible}"
+                                        Value="{Binding #ColorSpectrumAlphaSlider.Value}" />
+                                    <ComboBox
+                                        Name="ColorModelComboBox"
+                                        Width="80"
+                                        VerticalAlignment="Center"
+                                        Classes="Small"
+                                        SelectedValue="Hex">
+                                        Hex<ColorModel>Rgba</ColorModel>
+                                        <ColorModel>Hsva</ColorModel>
+                                    </ComboBox>
+                                </StackPanel>
+                            </Grid>
+                        </Flyout>
+                    </DropDownButton.Flyout>
+                </DropDownButton>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^[IsAlphaVisible=False] /template/ Panel#PART_TextBoxPanel">
+            <Setter Property="Width" Value="176" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="HexSimpleColorPicker"
+        BasedOn="{StaticResource SimpleColorPicker}"
+        TargetType="ColorPicker">
+        <Setter Property="Width" Value="200" />
+        <Setter Property="Content">
+            <Template>
+                <Grid ColumnDefinitions="Auto, *">
+                    <Border
+                        Grid.Column="0"
+                        Width="{Binding $self.Bounds.Height}"
+                        Margin="1,1,0,1"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                    <Border
+                        Grid.Column="0"
+                        Width="{Binding $self.Bounds.Height}"
+                        Margin="1,1,0,1"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{TemplateBinding HsvColor,
+                                                     Converter={StaticResource ToBrushConverter}}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                    <TextBlock
+                        Grid.Column="1"
+                        Margin="8,0,0,0"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Center"
+                        FontWeight="Regular"
+                        Foreground="{DynamicResource TextBlockDefaultForeground}"
+                        Text="{Binding $parent[ColorPicker].Color}" />
+                </Grid>
+            </Template>
+        </Setter>
+    </ControlTheme>
+
 </ResourceDictionary>

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

@@ -4,7 +4,6 @@
     xmlns:converters="using:Avalonia.Controls.Converters"
     xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
     <pc:AccentColorConverter x:Key="AccentColorConverter" />
     <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
     <converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight" />
@@ -31,7 +30,7 @@
                                 VerticalAlignment="Stretch"
                                 Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" />
                             <Border
-                                x:Name="PART_AccentDecrement2Border"
+                                Name="PART_AccentDecrement2Border"
                                 Grid.Column="0"
                                 Background="{TemplateBinding HsvColor,
                                                              Converter={StaticResource AccentColorConverter},
@@ -40,7 +39,7 @@
                                                                Converter={StaticResource LeftCornerRadiusFilterConverter}}"
                                 Tag="-2" />
                             <Border
-                                x:Name="PART_AccentDecrement1Border"
+                                Name="PART_AccentDecrement1Border"
                                 Grid.Column="1"
                                 Background="{TemplateBinding HsvColor,
                                                              Converter={StaticResource AccentColorConverter},
@@ -61,14 +60,14 @@
                                 VerticalAlignment="Stretch"
                                 Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" />
                             <Border
-                                x:Name="PART_AccentIncrement1Border"
+                                Name="PART_AccentIncrement1Border"
                                 Grid.Column="0"
                                 Background="{TemplateBinding HsvColor,
                                                              Converter={StaticResource AccentColorConverter},
                                                              ConverterParameter='1'}"
                                 Tag="1" />
                             <Border
-                                x:Name="PART_AccentIncrement2Border"
+                                Name="PART_AccentIncrement2Border"
                                 Grid.Column="1"
                                 Background="{TemplateBinding HsvColor,
                                                              Converter={StaticResource AccentColorConverter},

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

@@ -3,8 +3,6 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:converters="using:Avalonia.Controls.Converters"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
-
     <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
     <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
 

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

@@ -4,7 +4,6 @@
     xmlns:controls="using:Avalonia.Controls"
     xmlns:converters="using:Avalonia.Controls.Converters"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
     <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
     <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
     <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
@@ -16,16 +15,16 @@
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type ColorSpectrum}">
                     <Panel
-                        x:Name="PART_LayoutRoot"
+                        Name="PART_LayoutRoot"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch">
                         <Panel
-                            x:Name="PART_SizingPanel"
+                            Name="PART_SizingPanel"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center"
                             ClipToBounds="True">
                             <Rectangle
-                                x:Name="PART_SpectrumRectangle"
+                                Name="PART_SpectrumRectangle"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"
@@ -37,7 +36,7 @@
                                 RadiusY="{TemplateBinding CornerRadius,
                                                           Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Rectangle
-                                x:Name="PART_SpectrumOverlayRectangle"
+                                Name="PART_SpectrumOverlayRectangle"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"
@@ -49,7 +48,7 @@
                                 RadiusY="{TemplateBinding CornerRadius,
                                                           Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Ellipse
-                                x:Name="PART_SpectrumEllipse"
+                                Name="PART_SpectrumEllipse"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"
@@ -57,7 +56,7 @@
                                                             Converter={StaticResource EnumToBoolConverter},
                                                             ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
                             <Ellipse
-                                x:Name="PART_SpectrumOverlayEllipse"
+                                Name="PART_SpectrumOverlayEllipse"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"
@@ -65,24 +64,24 @@
                                                             Converter={StaticResource EnumToBoolConverter},
                                                             ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
                             <Canvas
-                                x:Name="PART_InputTarget"
+                                Name="PART_InputTarget"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Background="Transparent">
                                 <!--  Note: ToolTip.VerticalOffset is for touch devices to keep the tip above fingers  -->
                                 <Panel
-                                    x:Name="PART_SelectionEllipsePanel"
+                                    Name="PART_SelectionEllipsePanel"
                                     ToolTip.Placement="Top"
                                     ToolTip.VerticalOffset="-10">
                                     <Ellipse
-                                        x:Name="FocusEllipse"
+                                        Name="FocusEllipse"
                                         Margin="-2"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
                                         IsHitTestVisible="False"
                                         StrokeThickness="2" />
                                     <Ellipse
-                                        x:Name="SelectionEllipse"
+                                        Name="SelectionEllipse"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
                                         IsHitTestVisible="False"
@@ -93,7 +92,7 @@
                                 </Panel>
                             </Canvas>
                             <Rectangle
-                                x:Name="BorderRectangle"
+                                Name="BorderRectangle"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"
@@ -105,7 +104,7 @@
                                 RadiusY="{TemplateBinding CornerRadius,
                                                           Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Ellipse
-                                x:Name="BorderEllipse"
+                                Name="BorderEllipse"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"

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

@@ -6,13 +6,17 @@
     xmlns:globalization="using:System.Globalization"
     xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
     xmlns:primitives="using:Avalonia.Controls.Primitives"
+    xmlns:cvts="clr-namespace:Semi.Avalonia.ColorPicker.Converters"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
     <pc:ContrastBrushConverter x:Key="ContrastBrushConverter" />
     <converters:ColorToDisplayNameConverter x:Key="ColorToDisplayNameConverter" />
     <converters:ColorToHexConverter x:Key="ColorToHexConverter" />
     <converters:DoNothingForNullConverter x:Key="DoNothingForNullConverter" />
     <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
+    <converters:ToBrushConverter x:Key="ToBrushConverter" />
+    <cvts:HsvColorToTextConverter x:Key="HsvColorToTextConverter" />
+    <cvts:ColorToTextConverter x:Key="ColorToTextConverter" />
+    <cvts:ToColorModel x:Key="ToColorModel" />
     <globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
 
     <VisualBrush
@@ -86,7 +90,7 @@
                         ContentTemplate="{TemplateBinding ContentTemplate}"
                         CornerRadius="{TemplateBinding CornerRadius}" />
                     <Rectangle
-                        x:Name="BorderRectangle"
+                        Name="BorderRectangle"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         IsHitTestVisible="False"
@@ -120,7 +124,7 @@
         <Setter Property="RadioButton.Template">
             <ControlTemplate TargetType="RadioButton">
                 <ContentPresenter
-                    x:Name="PART_ContentPresenter"
+                    Name="PART_ContentPresenter"
                     Margin="{TemplateBinding Margin}"
                     Padding="{TemplateBinding Padding}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -170,7 +174,7 @@
                     <!--  Backgrounds  -->
                     <!--  TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}"  -->
                     <Border
-                        x:Name="ContentBackgroundBorder"
+                        Name="ContentBackgroundBorder"
                         Grid.Row="0"
                         Grid.RowSpan="2"
                         Height="{TemplateBinding Height}"
@@ -182,7 +186,7 @@
                         CornerRadius="{TemplateBinding CornerRadius}" />
 
                     <TabControl
-                        x:Name="PART_TabControl"
+                        Name="PART_TabControl"
                         Grid.Row="0"
                         Padding="0"
                         VerticalAlignment="Stretch"
@@ -219,7 +223,7 @@
                                     <ColumnDefinition Width="Auto" MinWidth="32" />
                                 </Grid.ColumnDefinitions>
                                 <primitives:ColorSlider
-                                    x:Name="ColorSpectrumThirdComponentSlider"
+                                    Name="ColorSpectrumThirdComponentSlider"
                                     Grid.Column="0"
                                     Margin="0,0,12,0"
                                     HorizontalAlignment="Center"
@@ -233,7 +237,7 @@
                                     IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                     Orientation="Vertical" />
                                 <primitives:ColorSpectrum
-                                    x:Name="ColorSpectrum"
+                                    Name="ColorSpectrum"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Stretch"
@@ -247,7 +251,7 @@
                                     MinValue="{TemplateBinding MinValue}"
                                     Shape="{TemplateBinding ColorSpectrumShape}" />
                                 <primitives:ColorSlider
-                                    x:Name="ColorSpectrumAlphaSlider"
+                                    Name="ColorSpectrumAlphaSlider"
                                     Grid.Column="2"
                                     Margin="12,0,0,0"
                                     HorizontalAlignment="Center"
@@ -322,7 +326,7 @@
                                 RowDefinitions="Auto,24,1*,1*,1*,1*,12"
                                 UseLayoutRounding="False">
                                 <Grid.Styles>
-                                    <Style Selector="NumericUpDown /template/ TextBox">
+                                    <Style Selector="NumericUpDown">
                                         <Setter Property="InnerLeftContent">
                                             <Template>
                                                 <TextBlock Width="12" Text="{Binding $parent[NumericUpDown].Tag}" />
@@ -343,7 +347,7 @@
                                         CornerRadius="3">
                                         <Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
                                             <RadioButton
-                                                x:Name="RgbRadioButton"
+                                                Name="RgbRadioButton"
                                                 Grid.Column="0"
                                                 HorizontalContentAlignment="Center"
                                                 VerticalContentAlignment="Center"
@@ -355,7 +359,7 @@
                                                                             Mode=TwoWay}"
                                                 Theme="{DynamicResource ColorViewRadioButton}" />
                                             <RadioButton
-                                                x:Name="HsvRadioButton"
+                                                Name="HsvRadioButton"
                                                 Grid.Column="1"
                                                 HorizontalContentAlignment="Center"
                                                 VerticalContentAlignment="Center"
@@ -369,19 +373,19 @@
                                         </Grid>
                                     </Border>
                                     <TextBox
-                                        x:Name="PART_HexTextBox"
+                                        Name="PART_HexTextBox"
                                         Grid.Column="2"
                                         Height="32"
                                         HorizontalAlignment="Stretch"
                                         AutomationProperties.Name="Hexadecimal Color"
                                         InnerLeftContent="#"
                                         IsVisible="{TemplateBinding IsHexInputVisible}"
-                                        MaxLength="9" />
+                                        MaxLength="8" />
                                 </Grid>
                                 <!--  Color component editing controls  -->
                                 <!--  Component 1 RGB:Red HSV:Hue  -->
                                 <NumericUpDown
-                                    x:Name="Component1NumericUpDown"
+                                    Name="Component1NumericUpDown"
                                     Grid.Row="2"
                                     Grid.Column="0"
                                     Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -396,7 +400,7 @@
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component1Slider}" />
                                 <primitives:ColorSlider
-                                    x:Name="Component1Slider"
+                                    Name="Component1Slider"
                                     Grid.Row="2"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
@@ -412,7 +416,7 @@
                                     TickFrequency="1" />
                                 <!--  Component 2 RGB:Green HSV:Saturation  -->
                                 <NumericUpDown
-                                    x:Name="Component2NumericUpDown"
+                                    Name="Component2NumericUpDown"
                                     Grid.Row="3"
                                     Grid.Column="0"
                                     Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -427,7 +431,7 @@
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component2Slider}" />
                                 <primitives:ColorSlider
-                                    x:Name="Component2Slider"
+                                    Name="Component2Slider"
                                     Grid.Row="3"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
@@ -443,7 +447,7 @@
                                     TickFrequency="1" />
                                 <!--  Component 3 RGB:Blue HSV:Value  -->
                                 <NumericUpDown
-                                    x:Name="Component3NumericUpDown"
+                                    Name="Component3NumericUpDown"
                                     Grid.Row="4"
                                     Grid.Column="0"
                                     Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -458,7 +462,7 @@
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component3Slider}" />
                                 <primitives:ColorSlider
-                                    x:Name="Component3Slider"
+                                    Name="Component3Slider"
                                     Grid.Row="4"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
@@ -474,7 +478,7 @@
                                     TickFrequency="1" />
                                 <!--  Alpha Component  -->
                                 <NumericUpDown
-                                    x:Name="AlphaComponentNumericUpDown"
+                                    Name="AlphaComponentNumericUpDown"
                                     Grid.Row="5"
                                     Grid.Column="0"
                                     Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -496,7 +500,7 @@
                                     </NumericUpDown.IsVisible>
                                 </NumericUpDown>
                                 <primitives:ColorSlider
-                                    x:Name="AlphaComponentSlider"
+                                    Name="AlphaComponentSlider"
                                     Grid.Row="5"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
@@ -560,4 +564,142 @@
             </Style>
         </Style>
     </ControlTheme>
+
+    <ControlTheme x:Key="SimpleColorView" TargetType="ColorView">
+        <Setter Property="Width" Value="280" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="ColorSpectrumComponents" Value="SaturationValue" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="{x:Type ColorView}">
+                <Grid>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="*" MinHeight="280" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                    </Grid.RowDefinitions>
+                    <!--  Spectrum Tab  -->
+                    <Border
+                        Grid.Row="0"
+                        CornerRadius="8 8 0 0"
+                        ClipToBounds="True">
+                        <primitives:ColorSpectrum
+                            Name="ColorSpectrum"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Components="{TemplateBinding ColorSpectrumComponents}"
+                            HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                            MaxHue="{TemplateBinding MaxHue}"
+                            MaxSaturation="{TemplateBinding MaxSaturation}"
+                            MaxValue="{TemplateBinding MaxValue}"
+                            MinHue="{TemplateBinding MinHue}"
+                            MinSaturation="{TemplateBinding MinSaturation}"
+                            MinValue="{TemplateBinding MinValue}"
+                            Shape="{TemplateBinding ColorSpectrumShape}" />
+                    </Border>
+                    <primitives:ColorSlider
+                        Name="ColorSpectrumThirdComponentSlider"
+                        Grid.Row="1"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Center"
+                        AutomationProperties.Name="Third Component"
+                        ColorComponent="{Binding #ColorSpectrum.ThirdComponent}"
+                        ColorModel="Hsva"
+                        HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                        IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
+                        Orientation="Horizontal" />
+
+                    <primitives:ColorSlider
+                        Name="ColorSpectrumAlphaSlider"
+                        Grid.Row="2"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Center"
+                        AutomationProperties.Name="Alpha Component"
+                        ColorComponent="Alpha"
+                        ColorModel="Hsva"
+                        HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                        IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                        IsVisible="{TemplateBinding IsAlphaVisible}"
+                        IsRoundingEnabled="True"
+                        IsSnapToTickEnabled="True"
+                        TickFrequency="1"
+                        Orientation="Horizontal">
+                    </primitives:ColorSlider>
+                    <StackPanel
+                        Grid.Row="3"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Center"
+                        Orientation="Horizontal"
+                        Margin="0 8 0 0">
+                        <Border
+                            Background="{TemplateBinding Color, Converter={StaticResource ToBrushConverter}}"
+                            Width="20"
+                            Height="20"
+                            CornerRadius="4" />
+                        <Panel
+                            Name="PART_TextBoxPanel"
+                            Width="106"
+                            Margin="4 0 0 0"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Center">
+                            <TextBox
+                                Name="PART_HexTextBox"
+                                Classes="Small"
+                                InnerLeftContent="#"
+                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
+                                Text="{TemplateBinding Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
+                                MaxLength="8" />
+                            <TextBox
+                                Name="PART_RgbaTextBox"
+                                Classes="Small"
+                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Rgba}"
+                                Text="{TemplateBinding Color, Converter={StaticResource ColorToTextConverter}, Mode=TwoWay}" />
+                            <TextBox
+                                Name="PART_HsvaTextBox"
+                                Classes="Small"
+                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
+                                Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
+                        </Panel>
+
+                        <NumericUpDown
+                            Name="AlphaComponentNumericUpDown"
+                            Width="70"
+                            HorizontalAlignment="Right"
+                            VerticalAlignment="Center"
+                            AllowSpin="True"
+                            Classes="Small"
+                            IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                            Maximum="{Binding #ColorSpectrumAlphaSlider.Maximum}"
+                            Minimum="{Binding #ColorSpectrumAlphaSlider.Minimum}"
+                            NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                            ShowButtonSpinner="False"
+                            InnerRightContent="%"
+                            IsVisible="{TemplateBinding IsAlphaVisible}"
+                            Value="{Binding #ColorSpectrumAlphaSlider.Value}" />
+                        <ComboBox
+                            Name="ColorModelComboBox"
+                            Width="80"
+                            VerticalAlignment="Center"
+                            Classes="Small"
+                            SelectedValue="Hex">
+                            Hex<ColorModel>Rgba</ColorModel>
+                            <ColorModel>Hsva</ColorModel>
+                        </ComboBox>
+                    </StackPanel>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^[IsAlphaVisible=False] /template/ Panel#PART_TextBoxPanel">
+            <Setter Property="Width" Value="176" />
+        </Style>
+    </ControlTheme>
+
+    <Design.PreviewWith>
+        <ColorView
+            Theme="{StaticResource SimpleColorView}"
+            IsAlphaVisible="True"
+            IsAlphaEnabled="True"
+            ColorModel="Hsva"
+            HsvColor="hsv(120,7%,90%)" />
+    </Design.PreviewWith>
 </ResourceDictionary>

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

@@ -0,0 +1,34 @@
+using System;
+using System.Globalization;
+using System.Linq;
+using Avalonia;
+using Avalonia.Data;
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+
+namespace Semi.Avalonia.ColorPicker.Converters;
+
+public class ColorToTextConverter : IValueConverter
+{
+    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        return value is Color color ? $"{color.R},{color.G},{color.B},{color.A}" : AvaloniaProperty.UnsetValue;
+    }
+
+    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is not string str) return BindingOperations.DoNothing;
+        var parts = str.Split(',');
+        if (parts.Length != 4 || parts.Any(string.IsNullOrWhiteSpace)) return BindingOperations.DoNothing;
+
+        if (byte.TryParse(parts[0], NumberStyles.Integer, CultureInfo.InvariantCulture, out var r) &&
+            byte.TryParse(parts[1], NumberStyles.Integer, CultureInfo.InvariantCulture, out var g) &&
+            byte.TryParse(parts[2], NumberStyles.Integer, CultureInfo.InvariantCulture, out var b) &&
+            byte.TryParse(parts[3], NumberStyles.Integer, CultureInfo.InvariantCulture, out var a))
+        {
+            return new Color(a, r, g, b);
+        }
+
+        return BindingOperations.DoNothing;
+    }
+}

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

@@ -0,0 +1,36 @@
+using System;
+using System.Globalization;
+using System.Linq;
+using Avalonia;
+using Avalonia.Data;
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+
+namespace Semi.Avalonia.ColorPicker.Converters;
+
+public class HsvColorToTextConverter : IValueConverter
+{
+    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        return value is HsvColor hsvColor
+            ? $"{Math.Round(hsvColor.H)},{Math.Round(hsvColor.S * 100)},{Math.Round(hsvColor.V * 100)},{Math.Round(hsvColor.A * 100)}"
+            : AvaloniaProperty.UnsetValue;
+    }
+
+    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is not string str) return BindingOperations.DoNothing;
+        var parts = str.Split(',');
+        if (parts.Length != 4 || parts.Any(string.IsNullOrWhiteSpace)) return BindingOperations.DoNothing;
+
+        if (double.TryParse(parts[0], NumberStyles.Float, CultureInfo.InvariantCulture, out var h) &&
+            double.TryParse(parts[1], NumberStyles.Float, CultureInfo.InvariantCulture, out var s) &&
+            double.TryParse(parts[2], NumberStyles.Float, CultureInfo.InvariantCulture, out var v) &&
+            double.TryParse(parts[3], NumberStyles.Float, CultureInfo.InvariantCulture, out var a))
+        {
+            return new HsvColor(a / 100, h, s / 100, v / 100);
+        }
+
+        return BindingOperations.DoNothing;
+    }
+}

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

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

src/Semi.Avalonia.ColorPicker/Dark.axaml

@@ -17,5 +17,5 @@
 
     <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
 
-    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1AFFFFFF</BoxShadows>
+    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">inset 0 0 0 1 #1AFFFFFF, 0 4 14 #40000000</BoxShadows>
 </ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Light.axaml

@@ -17,5 +17,5 @@
 
     <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
 
-    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1A000000</BoxShadows>
+    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 1 #4A000000, 0 4 14 #1A000000</BoxShadows>
 </ResourceDictionary>

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

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

src/Semi.Avalonia.ColorPicker/Shared.axaml

@@ -29,4 +29,5 @@
     <colorPicker:SemiColorDarkPalette x:Key="SemiColorPalette" />
     
     <PlacementMode x:Key="ColorPickerFlyoutPlacement">AnchorAndGravity</PlacementMode>
+    <PlacementMode x:Key="SimpleColorPickerFlyoutPlacement">BottomEdgeAlignedLeft</PlacementMode>
 </ResourceDictionary>

src/Semi.Avalonia.DataGrid/DataGrid.axaml

@@ -3,7 +3,6 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:collections="using:Avalonia.Collections"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
     <ControlTheme x:Key="DataGridCellTextBlockTheme" TargetType="TextBlock">
         <Setter Property="Margin" Value="{DynamicResource DataGridCellTextBlockDefaultMargin}" />
         <Setter Property="VerticalAlignment" Value="Center" />
@@ -35,14 +34,14 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
-                    x:Name="CellBorder"
+                    Name="CellBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid x:Name="PART_CellRoot" ColumnDefinitions="*,Auto">
+                    <Grid Name="PART_CellRoot" ColumnDefinitions="*,Auto">
                         <Rectangle
-                            x:Name="CurrencyVisual"
+                            Name="CurrencyVisual"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Fill="Transparent"
@@ -51,7 +50,7 @@
                             Stroke="{DynamicResource DataGridCellCurrentBorderBrush}"
                             StrokeThickness="{DynamicResource DataGridCellVisualStrokeThickness}" />
                         <Panel
-                            x:Name="FocusVisual"
+                            Name="FocusVisual"
                             Grid.Column="0"
                             IsHitTestVisible="False"
                             IsVisible="False">
@@ -75,7 +74,7 @@
                             Foreground="{TemplateBinding Foreground}" />
 
                         <Rectangle
-                            x:Name="InvalidVisualElement"
+                            Name="InvalidVisualElement"
                             Grid.Column="0"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
@@ -117,7 +116,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="DataGridColumnHeader">
                 <Border
-                    x:Name="HeaderBorder"
+                    Name="HeaderBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -153,7 +152,7 @@
                             Fill="{TemplateBinding SeparatorBrush}"
                             IsVisible="{TemplateBinding AreSeparatorsVisible}" />
                         <Panel
-                            x:Name="FocusVisual"
+                            Name="FocusVisual"
                             Grid.Column="0"
                             IsHitTestVisible="False"
                             IsVisible="False">
@@ -204,7 +203,7 @@
         TargetType="DataGridColumnHeader">
         <Setter Property="Template">
             <ControlTemplate>
-                <Grid x:Name="TopLeftHeaderRoot" RowDefinitions="*,*,Auto">
+                <Grid Name="TopLeftHeaderRoot" RowDefinitions="*,*,Auto">
                     <Border
                         Grid.RowSpan="2"
                         BorderBrush="{DynamicResource DataGridLineBrush}"
@@ -228,7 +227,7 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Grid
-                    x:Name="PART_Root"
+                    Name="PART_Root"
                     ColumnDefinitions="Auto,*"
                     RowDefinitions="*,*,Auto">
                     <Border
@@ -238,18 +237,18 @@
                         BorderThickness="0,0,1,0">
                         <Grid Background="{TemplateBinding Background}">
                             <Rectangle
-                                x:Name="RowInvalidVisualElement"
+                                Name="RowInvalidVisualElement"
                                 Fill="{DynamicResource DataGridCellErrorBrush}"
                                 Opacity="0"
                                 Stretch="Fill" />
                             <Rectangle
-                                x:Name="BackgroundRectangle"
+                                Name="BackgroundRectangle"
                                 Fill="{DynamicResource DataGridRowBackground}"
                                 Stretch="Fill" />
                         </Grid>
                     </Border>
                     <Rectangle
-                        x:Name="HorizontalSeparator"
+                        Name="HorizontalSeparator"
                         Grid.Row="2"
                         Grid.Column="0"
                         Grid.ColumnSpan="2"
@@ -278,7 +277,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="DataGridRow">
                 <Border
-                    x:Name="RowBorder"
+                    Name="RowBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -296,7 +295,7 @@
                             Background="{DynamicResource DataGridRowBackground}"
                             CornerRadius="3" />
                         <Rectangle
-                            x:Name="InvalidVisualElement"
+                            Name="InvalidVisualElement"
                             Grid.ColumnSpan="2"
                             Fill="{DynamicResource DataGridRowErrorBackground}"
                             Opacity="0" />
@@ -407,10 +406,11 @@
                             Margin="4,0,0,0"
                             Foreground="{TemplateBinding Foreground}"
                             IsVisible="{TemplateBinding IsPropertyNameVisible}" />
-                        <TextBlock
+                        <ContentControl
+                            Name="PART_GroupKeyContentControl"
                             Margin="4,0,0,0"
                             Foreground="{TemplateBinding Foreground}"
-                            Text="{Binding Key}" />
+                            Content="{Binding Key}" />
                         <TextBlock
                             Name="PART_ItemCountElement"
                             Margin="4,0,0,0"
@@ -419,7 +419,7 @@
                     </StackPanel>
 
                     <Rectangle
-                        x:Name="CurrencyVisual"
+                        Name="CurrencyVisual"
                         Grid.Row="0"
                         Grid.Column="0"
                         HorizontalAlignment="Stretch"
@@ -430,7 +430,7 @@
                         Stroke="{DynamicResource DataGridRowGroupHeaderCurrentBorderBrush}"
                         StrokeThickness="{DynamicResource DataGridRowGroupHeaderVisualStrokeThickness}" />
                     <Panel
-                        x:Name="FocusVisual"
+                        Name="FocusVisual"
                         Grid.Row="0"
                         Grid.Column="0"
                         IsHitTestVisible="False"
@@ -453,7 +453,7 @@
                         DataGridFrozenGrid.IsFrozen="True" />
 
                     <Rectangle
-                        x:Name="PART_BottomGridLine"
+                        Name="PART_BottomGridLine"
                         Grid.Row="1"
                         Grid.Column="0"
                         Grid.ColumnSpan="5"
@@ -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">
@@ -481,7 +482,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="DataGrid">
                 <Border
-                    x:Name="DataGridBorder"
+                    Name="DataGridBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -543,7 +544,7 @@
                                 Orientation="Horizontal" />
                         </Grid>
                         <Border
-                            x:Name="PART_DisabledVisualElement"
+                            Name="PART_DisabledVisualElement"
                             Grid.Row="0"
                             Grid.RowSpan="4"
                             Grid.Column="0"
@@ -570,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/Light.axaml

@@ -18,8 +18,8 @@
     <SolidColorBrush x:Key="DataGridDetailsPresenterBackground" Color="Transparent" />
 
     <SolidColorBrush x:Key="DataGridRowPointeroverBackground" Opacity="0.09" Color="#2E3238" />
-    <SolidColorBrush x:Key="DataGridRowSelectedBackground" Opacity="0.2" Color="#EAF5FF" />
-    <SolidColorBrush x:Key="DataGridRowSelectedPointeroverBackground" Opacity="0.3" Color="#CBE7FE" />
+    <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" />
 

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

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

src/Semi.Avalonia.TreeDataGrid/Dark.axaml

@@ -1,5 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
     <SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Opacity="0.08" Color="White" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBackground" Opacity="0.16" Color="White" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPressedBackground" Opacity="0.20" Color="White" />

src/Semi.Avalonia.TreeDataGrid/Index.axaml

@@ -1,10 +1,9 @@
 <Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
     <Styles.Resources>
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
-                <MergeResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.TreeDataGrid/Light.axaml" />
-                <MergeResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.TreeDataGrid/Dark.axaml" />
+                <ResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.TreeDataGrid/Light.axaml" />
+                <ResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.TreeDataGrid/Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceInclude Source="avares://Semi.Avalonia.TreeDataGrid/TreeDataGrid.axaml" />

src/Semi.Avalonia.TreeDataGrid/Light.axaml

@@ -1,5 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
     <SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Opacity="0.08" Color="#1C1F23" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBackground" Opacity="0.09" Color="#2E3238" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPressedBackground" Opacity="0.13" Color="#2E3238" />

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

@@ -4,14 +4,14 @@
         <TargetFramework>net6.0</TargetFramework>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <PackageReleaseNotes>Update to Avalonia 11.1-rc1</PackageReleaseNotes>
+        <Version>11.0.10.1</Version>
+        <PackageReleaseNotes>Update to 11.0.10.1</PackageReleaseNotes>
         <Authors>IRIHI Technology Co., Ltd.</Authors>
         <Description>Avalonia Theme inspired by Semi Design.</Description>
         <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>
         <PackageLicenseExpression>MIT</PackageLicenseExpression>
         <PackageIcon>irihi.png</PackageIcon>
         <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
-        <AvaloniaVersion>11.0.0</AvaloniaVersion>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
@@ -19,7 +19,7 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Controls.TreeDataGrid" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Controls.TreeDataGrid" Version="11.0.10"/>
         <None Include="irihi.png" Pack="true" PackagePath=""/>
     </ItemGroup>
 

src/Semi.Avalonia.TreeDataGrid/Shared.axaml

@@ -1,5 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
     <StreamGeometry x:Key="TreeDataGridSortIconDescendingPath">
         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>

src/Semi.Avalonia.TreeDataGrid/TreeDataGrid.axaml

@@ -2,7 +2,6 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:conv="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls.TreeDataGrid">
-    <!--  Add Resources Here  -->
     <Design.PreviewWith>
         <StackPanel Margin="20">
             <TreeDataGridColumnHeader Header="123" />
@@ -12,7 +11,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="TreeDataGrid">
                 <Border
-                    x:Name="RootBorder"
+                    Name="RootBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -24,7 +23,7 @@
                             HorizontalScrollBarVisibility="Hidden"
                             IsVisible="{TemplateBinding ShowColumnHeaders}"
                             VerticalScrollBarVisibility="Disabled">
-                            <Border x:Name="ColumnHeadersPresenterBorder">
+                            <Border Name="ColumnHeadersPresenterBorder">
                                 <TreeDataGridColumnHeadersPresenter
                                     Name="PART_ColumnHeadersPresenter"
                                     ElementFactory="{TemplateBinding ElementFactory}"
@@ -174,7 +173,7 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
-                    x:Name="CellBorder"
+                    Name="CellBorder"
                     Padding="{TemplateBinding Padding}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
@@ -206,7 +205,7 @@
                     VerticalAlignment="Center"
                     Background="Transparent">
                     <PathIcon
-                        x:Name="ChevronPath"
+                        Name="ChevronPath"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         Data="{DynamicResource TreeDataGridItemCollapsedChevronPathData}"
@@ -223,7 +222,7 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
-                    x:Name="CellBorder"
+                    Name="CellBorder"
                     Padding="{TemplateBinding Indent,
                                               Converter={x:Static conv:IndentConverter.Instance}}"
                     Background="{TemplateBinding Background}"
@@ -254,7 +253,7 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
-                    x:Name="CellBorder"
+                    Name="CellBorder"
                     Padding="{TemplateBinding Padding}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
@@ -276,7 +275,7 @@
             <Setter Property="Template">
                 <ControlTemplate>
                     <Border
-                        x:Name="CellBorder"
+                        Name="CellBorder"
                         Padding="{TemplateBinding Padding}"
                         Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"

src/Semi.Avalonia/Controls/AdornerLayer.axaml

@@ -5,12 +5,17 @@
     <ControlTheme x:Key="{x:Type AdornerLayer}" TargetType="AdornerLayer">
         <Setter Property="DefaultFocusAdorner">
             <FocusAdornerTemplate>
-                <Rectangle
-                    Margin="{DynamicResource AdornerLayerMargin}"
-                    Stroke="{DynamicResource AdornerLayerBackground}"
-                    StrokeDashArray="1,2"
-                    StrokeThickness="{DynamicResource AdornerLayerThickness}" />
+                <Border Theme="{DynamicResource AdornerLayerBorder}" />
             </FocusAdornerTemplate>
         </Setter>
     </ControlTheme>
+
+    <ControlTheme x:Key="AdornerLayerBorder" TargetType="Border">
+        <Setter Property="BorderThickness" Value="{DynamicResource AdornerLayerBorderThickness}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource AdornerLayerBorderBrush}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource AdornerLayerCornerRadius}" />
+        <Style Selector="^.Solid">
+            <Setter Property="BorderBrush" Value="{DynamicResource AdornerLayerSolidBorderBrush}" />
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/AutoCompleteBox.axaml

@@ -9,9 +9,9 @@
         </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type AutoCompleteBox}" TargetType="AutoCompleteBox">
-        <Setter Property="AutoCompleteBox.VerticalAlignment" Value="Center" />
-        <Setter Property="AutoCompleteBox.MinHeight" Value="{DynamicResource AutoCompleteBoxDefaultHeight}" />
-        <Setter Property="AutoCompleteBox.MaxDropDownHeight" Value="{DynamicResource AutoCompleteMaxDropdownHeight}" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="MinHeight" Value="{DynamicResource AutoCompleteBoxDefaultHeight}" />
+        <Setter Property="MaxDropDownHeight" Value="{DynamicResource AutoCompleteMaxDropdownHeight}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="AutoCompleteBox">
                 <DataValidationErrors>
@@ -39,12 +39,16 @@
                                 BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
                                 BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
                                 CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
-                                <ListBox
-                                    Name="PART_SelectingItemsControl"
-                                    Foreground="{TemplateBinding Foreground}"
-                                    ItemTemplate="{TemplateBinding ItemTemplate}"
-                                    ScrollViewer.HorizontalScrollBarVisibility="Auto"
-                                    ScrollViewer.VerticalScrollBarVisibility="Auto" />
+                                <Border
+                                    CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}"
+                                    ClipToBounds="True">
+                                    <ListBox
+                                        Name="PART_SelectingItemsControl"
+                                        Foreground="{TemplateBinding Foreground}"
+                                        ItemTemplate="{TemplateBinding ItemTemplate}"
+                                        ScrollViewer.HorizontalScrollBarVisibility="Auto"
+                                        ScrollViewer.VerticalScrollBarVisibility="Auto" />
+                                </Border>
                             </Border>
                         </Popup>
                     </Panel>
@@ -77,12 +81,16 @@
                                 BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
                                 BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
                                 CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
-                                <ListBox
-                                    Name="PART_SelectingItemsControl"
-                                    Foreground="{TemplateBinding Foreground}"
-                                    ItemTemplate="{TemplateBinding ItemTemplate}"
-                                    ScrollViewer.HorizontalScrollBarVisibility="Auto"
-                                    ScrollViewer.VerticalScrollBarVisibility="Auto" />
+                                <Border
+                                    CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}"
+                                    ClipToBounds="True">
+                                    <ListBox
+                                        Name="PART_SelectingItemsControl"
+                                        Foreground="{TemplateBinding Foreground}"
+                                        ItemTemplate="{TemplateBinding ItemTemplate}"
+                                        ScrollViewer.HorizontalScrollBarVisibility="Auto"
+                                        ScrollViewer.VerticalScrollBarVisibility="Auto" />
+                                </Border>
                             </Border>
                         </Popup>
                     </Panel>

src/Semi.Avalonia/Controls/Border.axaml

@@ -16,18 +16,13 @@
         </StackPanel>
     </Design.PreviewWith>
 
-    <ControlTheme x:Key="RadioButtonGroupBorder" TargetType="Border">
-        <Setter Property="Border.CornerRadius" Value="{DynamicResource RadioButtonGroupCornerRadius}" />
-        <Setter Property="Border.Background" Value="{DynamicResource RadioButtonGroupBackground}" />
-    </ControlTheme>
-
     <ControlTheme x:Key="CardBorder" TargetType="Border">
-        <Setter Property="Border.Padding" Value="{DynamicResource ThicknessCardPadding}" />
-        <Setter Property="Border.BorderBrush" Value="{DynamicResource BorderCardBorderBrush}" />
-        <Setter Property="Border.CornerRadius" Value="{DynamicResource RadiusCardCornerRadius}" />
-        <Setter Property="Border.Background" Value="{DynamicResource BorderCardBackground}" />
-        <Setter Property="Border.BorderThickness" Value="{DynamicResource ThicknessCardBorderThickness}" />
-        <Setter Property="Border.Margin" Value="{DynamicResource ThicknessCardMargin}" />
+        <Setter Property="Padding" Value="{DynamicResource ThicknessCardPadding}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource BorderCardBorderBrush}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource RadiusCardCornerRadius}" />
+        <Setter Property="Background" Value="{DynamicResource BorderCardBackground}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource ThicknessCardBorderThickness}" />
+        <Setter Property="Margin" Value="{DynamicResource ThicknessCardMargin}" />
         <Style Selector="^.Shadow">
             <Setter Property="BoxShadow" Value="{DynamicResource BorderCardBoxShadow}" />
         </Style>

src/Semi.Avalonia/Controls/Button.axaml

@@ -27,7 +27,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="Button">
                 <ContentPresenter
-                    x:Name="PART_ContentPresenter"
+                    Name="PART_ContentPresenter"
                     Padding="{TemplateBinding Padding}"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
@@ -102,6 +102,12 @@
         x:Key="SolidButton"
         BasedOn="{StaticResource {x:Type Button}}"
         TargetType="Button">
+        <Setter Property="FocusAdorner">
+            <FocusAdornerTemplate>
+                <Border Theme="{DynamicResource AdornerLayerBorder}"
+                        Classes="Solid" />
+            </FocusAdornerTemplate>
+        </Setter>
         <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
             <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
@@ -113,6 +119,7 @@
             <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPointeroverBorderBrush}" />
         </Style>
         <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidPrimaryPressedForeground}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
             <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPressedBorderBrush}" />
         </Style>
@@ -128,6 +135,7 @@
                 <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource ButtonSolidPrimaryPressedForeground}" />
                 <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
                 <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPressedBorderBrush}" />
             </Style>
@@ -209,9 +217,9 @@
         </Style>
 
         <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidDisabledForeground}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidDisabledBackground}" />
-            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidDisabledBorderBrush}" />
         </Style>
     </ControlTheme>
 
@@ -252,12 +260,12 @@
         BasedOn="{StaticResource {x:Type Button}}"
         TargetType="Button">
         <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Background" Value="Transparent" />
-            <Setter Property="BorderBrush" Value="Transparent" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
         </Style>
         <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="BorderBrush" Value="Transparent" />
-            <Setter Property="Background" Value="Transparent" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
             <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
         </Style>
 

src/Semi.Avalonia/Controls/ButtonSpinner.axaml

@@ -8,12 +8,12 @@
         </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="ButtonSpinnerRepeatButton" TargetType="RepeatButton">
-        <Setter Property="RepeatButton.Background" Value="{DynamicResource ButtonSpinnerRepeatButtonBackground}" />
-        <Setter Property="RepeatButton.Cursor" Value="Hand" />
-        <Setter Property="RepeatButton.Template">
+        <Setter Property="Background" Value="{DynamicResource ButtonSpinnerRepeatButtonBackground}" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Template">
             <ControlTemplate>
                 <ContentPresenter
-                    x:Name="PART_ContentPresenter"
+                    Name="PART_ContentPresenter"
                     Padding="{TemplateBinding Padding}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                     VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
@@ -38,10 +38,10 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type ButtonSpinner}" TargetType="ButtonSpinner">
-        <Setter Property="ButtonSpinner.BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}" />
-        <Setter Property="ButtonSpinner.BorderThickness" Value="0" />
-        <Setter Property="ButtonSpinner.MinWidth" Value="300" />
-        <Setter Property="ButtonSpinner.Template">
+        <Setter Property="BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}" />
+        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="MinWidth" Value="300" />
+        <Setter Property="Template">
             <ControlTemplate TargetType="ButtonSpinner">
                 <Grid ColumnDefinitions="Auto, *, Auto">
                     <Border
@@ -97,5 +97,8 @@
             <Setter Property="Grid.Column" Value="0" />
             <Setter Property="Margin" Value="0 0 4 0" />
         </Style>
+        <Style Selector="^:pointerover /template/ Border#ButtonGroup">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonPointeroverBorderBrush}"/>
+        </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/Calendar.axaml

@@ -2,14 +2,12 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
-
     <ControlTheme x:Key="{x:Type Calendar}" TargetType="Calendar">
         <Setter Property="Foreground" Value="{DynamicResource CalendarForeground}" />
         <Setter Property="Background" Value="{DynamicResource CalendarBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource CalendarBorderBrush}" />
         <Setter Property="BorderThickness" Value="{DynamicResource CalendarBorderThickness}" />
-        <Setter Property="Calendar.CornerRadius" Value="{DynamicResource CalendarCornerRadius}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CalendarCornerRadius}" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="Template">
@@ -31,9 +29,9 @@
     </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">
+        <Setter Property="MinWidth" Value="{DynamicResource CalendarMinWidth}" />
+        <Setter Property="MinHeight" Value="{DynamicResource CalendarMinHeight}" />
+        <Setter Property="DayTitleTemplate">
             <Template>
                 <TextBlock
                     HorizontalAlignment="Center"
@@ -45,7 +43,7 @@
             </Template>
         </Setter>
 
-        <Setter Property="CalendarItem.Template">
+        <Setter Property="Template">
             <ControlTemplate TargetType="CalendarItem">
                 <Border
                     Padding="16"
@@ -146,13 +144,13 @@
         <Setter Property="Foreground" Value="{DynamicResource CalendarItemCalendarButtonForeground}" />
         <Setter Property="Background" Value="{DynamicResource CalendarItemCalendarButtonBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource CalendarItemCalendarButtonBorderBrush}" />
-        <Setter Property="CalendarButton.CornerRadius" Value="{DynamicResource CalendarItemCalendarButtonCornerRadius}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CalendarItemCalendarButtonCornerRadius}" />
         <Setter Property="BorderThickness" Value="0" />
         <Setter Property="ClipToBounds" Value="False" />
-        <Setter Property="CalendarButton.HorizontalContentAlignment" Value="Center" />
-        <Setter Property="CalendarButton.VerticalContentAlignment" Value="Center" />
-        <Setter Property="CalendarButton.HorizontalAlignment" Value="Stretch" />
-        <Setter Property="CalendarButton.VerticalAlignment" Value="Stretch" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="VerticalAlignment" Value="Stretch" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CalendarButton">
                 <ContentControl

src/Semi.Avalonia/Controls/CalendarDatePicker.axaml

@@ -2,7 +2,6 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type CalendarDatePicker}" TargetType="CalendarDatePicker">
         <Setter Property="Background" Value="{DynamicResource CalendarDatePickerBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerForeground}" />
@@ -21,11 +20,11 @@
             <ControlTemplate TargetType="CalendarDatePicker">
                 <DataValidationErrors>
                     <Panel
-                        x:Name="LayoutRoot"
+                        Name="LayoutRoot"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch">
                         <Border
-                            x:Name="Background"
+                            Name="Background"
                             BackgroundSizing="{TemplateBinding BackgroundSizing}"
                             Background="{TemplateBinding Background}"
                             BorderBrush="{TemplateBinding BorderBrush}"
@@ -34,11 +33,10 @@
                         <Grid
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
-                            ColumnDefinitions="*, Auto, Auto">
+                            ColumnDefinitions="*, Auto">
                             <TextBox
                                 Name="PART_TextBox"
                                 Grid.Column="0"
-                                Grid.ColumnSpan="2"
                                 MinHeight="{TemplateBinding MinHeight}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
@@ -85,7 +83,7 @@
                                 Theme="{DynamicResource InnerIconButton}" />
                             <Button
                                 Name="PART_Button"
-                                Grid.Column="2"
+                                Grid.Column="1"
                                 Padding="0,0,8,0"
                                 Content="{DynamicResource CalendarDatePickerIconGlyph}"
                                 Focusable="False"
@@ -104,7 +102,6 @@
                                     CornerRadius="{DynamicResource CalendarCornerRadius}">
                                     <Calendar
                                         Name="PART_Calendar"
-                                        BorderThickness="0"
                                         CornerRadius="{Binding $parent[Border].CornerRadius}"
                                         DisplayDate="{TemplateBinding DisplayDate}"
                                         DisplayDateEnd="{TemplateBinding DisplayDateEnd}"
@@ -122,10 +119,13 @@
 
             </ControlTemplate>
         </Setter>
-        
+
         <Style Selector="^.clearButton, ^.ClearButton">
             <Style Selector="^:pointerover /template/ Button#ClearButton">
-                <Setter Property="IsVisible" Value="{Binding $parent[CalendarDatePicker].SelectedDate, Converter={x:Static ObjectConverters.IsNotNull}}"></Setter>
+                <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>
 
@@ -139,6 +139,7 @@
         <Style Selector="^:pointerover">
             <Style Selector="^ /template/ Border#Background">
                 <Setter Property="Background" Value="{DynamicResource CalendarDatePickerPointeroverBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerPointeroverBorderBrush}" />
             </Style>
         </Style>
 

src/Semi.Avalonia/Controls/CaptionButtons.axaml

@@ -2,8 +2,6 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
-
     <ControlTheme x:Key="CaptionButton" TargetType="Button">
         <Setter Property="Background" Value="{DynamicResource CaptionButtonPointeroverBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource CaptionButtonPressedBackground}" />
@@ -45,7 +43,7 @@
                     Orientation="Horizontal"
                     Spacing="2"
                     TextElement.FontSize="10">
-                    <Button x:Name="PART_FullScreenButton" Theme="{StaticResource CaptionButton}">
+                    <Button Name="PART_FullScreenButton" Theme="{StaticResource CaptionButton}">
                         <PathIcon
                             Name="PART_FullScreenButtonIcon"
                             Width="12"
@@ -53,14 +51,14 @@
                             Data="{DynamicResource WindowExpandGlyph}"
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>
-                    <Button x:Name="PART_MinimizeButton" Theme="{StaticResource CaptionButton}">
+                    <Button Name="PART_MinimizeButton" Theme="{StaticResource CaptionButton}">
                         <PathIcon
                             Width="12"
                             Height="12"
                             Data="{DynamicResource WindowMinimizeGlyph}"
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>
-                    <Button x:Name="PART_RestoreButton" Theme="{StaticResource CaptionButton}">
+                    <Button Name="PART_RestoreButton" Theme="{StaticResource CaptionButton}">
                         <PathIcon
                             Name="PART_RestoreButtonIcon"
                             Width="12"
@@ -69,7 +67,7 @@
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>
                     <Button
-                        x:Name="PART_CloseButton"
+                        Name="PART_CloseButton"
                         Background="{DynamicResource CaptionButtonClosePointeroverBackground}"
                         BorderBrush="{DynamicResource CaptionButtonClosePressedBackground}"
                         Theme="{StaticResource CaptionButton}">

src/Semi.Avalonia/Controls/Carousel.axaml

@@ -3,7 +3,6 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:converters="clr-namespace:Semi.Avalonia.Converters"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
     <converters:ItemToObjectConverter x:Key="ItemsConverter" />
     <ControlTheme x:Key="{x:Type Carousel}" TargetType="Carousel">
         <Setter Property="Template">
@@ -13,6 +12,7 @@
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
+                    BringIntoViewOnFocusChange="True"
                     HorizontalScrollBarVisibility="Hidden"
                     VerticalScrollBarVisibility="Hidden">
                     <ItemsPresenter
@@ -26,9 +26,9 @@
 
     <ControlTheme x:Key="CarouselIndicatorDotListBoxItem" TargetType="ListBoxItem">
         <!--  Use fit in different color themes, Use Foreground to normal, Background to hover, BorderBrush to Selected  -->
-        <Setter Property="ListBoxItem.Cursor" Value="Hand" />
-        <Setter Property="ListBoxItem.Foreground" Value="{DynamicResource CarouselIndicatorForeground}" />
-        <Setter Property="ListBoxItem.Template">
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorForeground}" />
+        <Setter Property="Template">
             <ControlTemplate TargetType="ListBoxItem">
                 <Panel>
                     <Border Padding="4" Background="Transparent">
@@ -56,9 +56,9 @@
 
     <ControlTheme x:Key="CarouselIndicatorLineListBoxItem" TargetType="ListBoxItem">
         <!--  Use fit in different color themes, Use Foreground to normal, Background to hover, BorderBrush to Selected  -->
-        <Setter Property="ListBoxItem.Cursor" Value="Hand" />
-        <Setter Property="ListBoxItem.Background" Value="{DynamicResource CarouselIndicatorForeground}" />
-        <Setter Property="ListBoxItem.Template">
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Background" Value="{DynamicResource CarouselIndicatorForeground}" />
+        <Setter Property="Template">
             <ControlTemplate TargetType="ListBoxItem">
                 <Panel Background="Transparent">
                     <Border Padding="2,0" Background="Transparent">
@@ -66,8 +66,7 @@
                             Name="Container"
                             Width="{DynamicResource CarouselIndicatorLineWidth}"
                             Height="{DynamicResource CarouselIndicatorLineHeight}"
-                            Background="{TemplateBinding Background}">
-                        </Border>
+                            Background="{TemplateBinding Background}" />
                     </Border>
                 </Panel>
             </ControlTemplate>
@@ -84,14 +83,13 @@
     </ControlTheme>
 
     <ControlTheme x:Key="CarouselIndicatorColumnarListBoxItem" TargetType="ListBoxItem">
-        <Setter Property="ListBoxItem.Cursor" Value="Hand" />
-        <Setter Property="ListBoxItem.Background" Value="{DynamicResource CarouselIndicatorForeground}" />
-        <Setter Property="ListBoxItem.Template">
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Background" Value="{DynamicResource CarouselIndicatorForeground}" />
+        <Setter Property="Template">
             <ControlTemplate TargetType="ListBoxItem">
                 <Panel Background="Transparent">
                     <Border Padding="2,0" Background="Transparent">
-                        <Border Width="{DynamicResource CarouselIndicatorColumnarWidth}"
-                                Height="{DynamicResource CarouselIndicatorColumnarSelectedHeight}">
+                        <Border Width="{DynamicResource CarouselIndicatorColumnarWidth}" Height="{DynamicResource CarouselIndicatorColumnarSelectedHeight}">
                             <Rectangle
                                 Name="Container"
                                 Width="{DynamicResource CarouselIndicatorColumnarWidth}"
@@ -100,7 +98,7 @@
                                 Fill="{TemplateBinding Background}">
                                 <Rectangle.Transitions>
                                     <Transitions>
-                                        <DoubleTransition Property="Height" Duration="0:0:0.2"></DoubleTransition>
+                                        <DoubleTransition Property="Height" Duration="0:0:0.2" />
                                     </Transitions>
                                 </Rectangle.Transitions>
                             </Rectangle>
@@ -122,9 +120,9 @@
     </ControlTheme>
 
     <ControlTheme x:Key="CarouselButton" TargetType="Button">
-        <Setter Property="Button.Cursor" Value="Hand" />
-        <Setter Property="Button.Foreground" Value="{DynamicResource CarouselButtonForeground}" />
-        <Setter Property="Button.Template">
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Foreground" Value="{DynamicResource CarouselButtonForeground}" />
+        <Setter Property="Template">
             <ControlTemplate TargetType="Button">
                 <Grid Background="Transparent">
                     <PathIcon

src/Semi.Avalonia/Controls/CheckBox.axaml

@@ -2,34 +2,42 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
+    <Design.PreviewWith>
+        <ThemeVariantScope RequestedThemeVariant="Dark">
+            <StackPanel Background="{DynamicResource SemiBackground0Color}">
+                <CheckBox>Hello</CheckBox>
+                <CheckBox>Hello</CheckBox>
+                <CheckBox Theme="{DynamicResource CardCheckBox}">Hello</CheckBox>
+                <CheckBox Theme="{DynamicResource PureCardCheckBox}">Hello</CheckBox>
+            </StackPanel>
+        </ThemeVariantScope>
+    </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type CheckBox}" TargetType="CheckBox">
-        <Setter Property="Padding" Value="8,0,0,0" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Top" />
-        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="FontSize" Value="{DynamicResource CheckBoxFontSize}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxBoxCornerRadius}" />
-        <Setter Property="MinHeight" Value="32" />
         <Setter Property="Foreground" Value="{DynamicResource CheckBoxForeground}" />
         <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultBorderBrush}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxBoxCornerRadius}" />
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CheckBox">
                 <Border
-                    x:Name="RootBorder"
+                    Name="RootBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
-                        <Grid
+                    <Grid ColumnDefinitions="Auto,*">
+                        <Panel
                             Grid.Column="0"
-                            Margin="0,0,0,0"
-                            VerticalAlignment="Center">
+                            TemplatedControl.IsTemplateFocusTarget="True"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                             <Border
-                                x:Name="NormalRectangle"
+                                Name="NormalRectangle"
                                 Width="{DynamicResource CheckBoxBoxWidth}"
                                 Height="{DynamicResource CheckBoxBoxHeight}"
                                 Background="{DynamicResource CheckBoxDefaultBackground}"
@@ -42,16 +50,17 @@
                                 Width="{DynamicResource CheckBoxBoxGlyphWidth}"
                                 Height="{DynamicResource CheckBoxBoxGlyphHeight}"
                                 Foreground="{DynamicResource CheckBoxGlyphFill}" />
-                        </Grid>
+                        </Panel>
                         <ContentPresenter
-                            x:Name="ContentPresenter"
+                            Name="PART_ContentPresenter"
                             Grid.Column="1"
-                            Margin="{TemplateBinding Padding}"
+                            Margin="{DynamicResource CheckBoxContentMargin}"
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalAlignment="Center"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
                             IsVisible="{TemplateBinding Content,Converter={x:Static ObjectConverters.IsNotNull}}"
+                            FontSize="{TemplateBinding FontSize}"
                             RecognizesAccessKey="True"
                             TextWrapping="Wrap" />
                     </Grid>
@@ -77,7 +86,7 @@
 
         <!--  Unchecked Disabled state  -->
         <Style Selector="^:disabled">
-            <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
             </Style>
             <Style Selector="^ /template/ Border#NormalRectangle">
@@ -115,7 +124,7 @@
 
             <!--  Checked Disabled State  -->
             <Style Selector="^:disabled">
-                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                     <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
                 </Style>
                 <Style Selector="^ /template/ Border#NormalRectangle">
@@ -158,7 +167,7 @@
 
             <!--  Checked Disabled State  -->
             <Style Selector="^:disabled">
-                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                     <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
                 </Style>
                 <Style Selector="^ /template/ Border#NormalRectangle">
@@ -176,29 +185,29 @@
     <ControlTheme x:Key="SimpleCheckBox" TargetType="CheckBox">
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Top" />
-        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="FontSize" Value="{DynamicResource CheckBoxFontSize}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxBoxCornerRadius}" />
         <Setter Property="Foreground" Value="{DynamicResource CheckBoxForeground}" />
         <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultBorderBrush}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxBoxCornerRadius}" />
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CheckBox">
                 <Border
-                    x:Name="RootBorder"
+                    Name="RootBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
-                        <Grid
+                    <Grid ColumnDefinitions="Auto,*">
+                        <Panel
                             Grid.Column="0"
-                            Margin="0,0,0,0"
-                            VerticalAlignment="Center">
+                            TemplatedControl.IsTemplateFocusTarget="True"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                             <Border
-                                x:Name="NormalRectangle"
+                                Name="NormalRectangle"
                                 Width="{DynamicResource CheckBoxBoxWidth}"
                                 Height="{DynamicResource CheckBoxBoxHeight}"
                                 Background="{DynamicResource CheckBoxDefaultBackground}"
@@ -211,7 +220,7 @@
                                 Width="{DynamicResource CheckBoxBoxGlyphWidth}"
                                 Height="{DynamicResource CheckBoxBoxGlyphHeight}"
                                 Foreground="{DynamicResource CheckBoxGlyphFill}" />
-                        </Grid>
+                        </Panel>
                     </Grid>
                 </Border>
             </ControlTemplate>
@@ -323,13 +332,15 @@
     </ControlTheme>
 
     <ControlTheme x:Key="CardCheckBox" TargetType="CheckBox">
-        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="Padding" Value="{DynamicResource CheckBoxCardPadding}" />
-        <Setter Property="BorderThickness" Value="{DynamicResource CheckBoxCardBorderThickness}" />
+        <Setter Property="FontSize" Value="{DynamicResource CheckBoxFontSize}" />
         <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxCardCornerRadius}" />
         <Setter Property="Background" Value="Transparent" />
-        <Setter Property="CheckBox.Template">
+        <Setter Property="BorderThickness" Value="{DynamicResource CheckBoxCardBorderThickness}" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Template">
             <ControlTemplate TargetType="CheckBox">
                 <Border
                     Name="RootBorder"
@@ -339,13 +350,15 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <Grid
-                        x:Name="RootGrid"
                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                         ColumnDefinitions="Auto,*">
-                        <Grid Grid.Column="0" VerticalAlignment="Top">
+                        <Panel
+                            Grid.Column="0"
+                            VerticalAlignment="Top"
+                            Margin="{DynamicResource CheckBoxBoxMargin}">
                             <Border
-                                x:Name="NormalRectangle"
+                                Name="NormalRectangle"
                                 Width="{DynamicResource CheckBoxBoxWidth}"
                                 Height="{DynamicResource CheckBoxBoxHeight}"
                                 Background="{DynamicResource CheckBoxDefaultBackground}"
@@ -358,17 +371,19 @@
                                 Width="{DynamicResource CheckBoxBoxGlyphWidth}"
                                 Height="{DynamicResource CheckBoxBoxGlyphHeight}"
                                 Foreground="{DynamicResource CheckBoxGlyphFill}" />
+                        </Panel>
 
-                        </Grid>
                         <ContentPresenter
-                            x:Name="ContentPresenter"
+                            Name="PART_ContentPresenter"
                             Grid.Column="1"
-                            Margin="8,0,0,0"
-                            VerticalAlignment="Center"
+                            Margin="{DynamicResource CheckBoxContentMargin}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
-                            IsVisible="{TemplateBinding Content,
-                                                        Converter={x:Static ObjectConverters.IsNotNull}}"
+                            Foreground="{TemplateBinding Foreground}"
+                            IsVisible="{TemplateBinding Content,Converter={x:Static ObjectConverters.IsNotNull}}"
+                            FontSize="{TemplateBinding FontSize}"
                             RecognizesAccessKey="True"
                             TextWrapping="Wrap" />
                     </Grid>
@@ -398,7 +413,7 @@
 
         <!--  Unchecked Disabled state  -->
         <Style Selector="^:disabled">
-            <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
             </Style>
             <Style Selector="^ /template/ Border#NormalRectangle">
@@ -449,7 +464,7 @@
                 <Style Selector="^ /template/ Border#RootBorder">
                     <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
                 </Style>
-                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                     <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
                 </Style>
                 <Style Selector="^ /template/ Border#NormalRectangle">
@@ -504,7 +519,7 @@
                 <Style Selector="^ /template/ Border#RootBorder">
                     <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
                 </Style>
-                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                     <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
                 </Style>
                 <Style Selector="^ /template/ Border#NormalRectangle">
@@ -520,20 +535,22 @@
     </ControlTheme>
 
     <ControlTheme x:Key="PureCardCheckBox" TargetType="CheckBox">
-        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="HorizontalContentAlignment" Value="Left" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="Padding" Value="{DynamicResource CheckBoxCardPadding}" />
-        <Setter Property="BorderThickness" Value="{DynamicResource CheckBoxCardBorderThickness}" />
+        <Setter Property="FontSize" Value="{DynamicResource CheckBoxFontSize}" />
         <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxCardCornerRadius}" />
-        <Setter Property="CheckBox.VerticalContentAlignment" Value="Center" />
         <Setter Property="Background" Value="Transparent" />
-        <Setter Property="CheckBox.Template">
+        <Setter Property="BorderThickness" Value="{DynamicResource CheckBoxCardBorderThickness}" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Template">
             <ControlTemplate TargetType="CheckBox">
                 <ContentPresenter
-                    x:Name="PART_ContentPresenter"
-                    Margin="{TemplateBinding Margin}"
+                    Name="PART_ContentPresenter"
                     Padding="{TemplateBinding Padding}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                     VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                    Foreground="{TemplateBinding Foreground}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -541,7 +558,8 @@
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}"
                     RecognizesAccessKey="True"
-                    UseLayoutRounding="False" />
+                    UseLayoutRounding="False"
+                    TextWrapping="Wrap" />
             </ControlTemplate>
         </Setter>
 

src/Semi.Avalonia/Controls/ComboBox.axaml

@@ -30,10 +30,11 @@
     <ControlTheme x:Key="{x:Type ComboBox}" TargetType="ComboBox">
         <Setter Property="Padding" Value="{DynamicResource ComboBoxSelectorDefaultPadding}" />
         <Setter Property="FocusAdorner" Value="{x:Null}" />
-        <Setter Property="MaxDropDownHeight" Value="504" />
+        <Setter Property="MaxDropDownHeight" Value="{DynamicResource ComboBoxPopupMaxDropDownHeight}" />
         <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorBorderBrush}" />
         <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
-        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="BorderThickness" Value="{DynamicResource ComboBoxSelectorThickness}" />
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="CornerRadius" Value="{DynamicResource ComboBoxSelectorCornerRadius}" />
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
@@ -46,11 +47,11 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="ComboBox">
                 <DataValidationErrors>
-                    <Grid ColumnDefinitions="*, Auto, 32">
+                    <Grid ColumnDefinitions="*, Auto">
                         <Border
-                            x:Name="Background"
+                            Name="Background"
                             Grid.Column="0"
-                            Grid.ColumnSpan="3"
+                            Grid.ColumnSpan="2"
                             Background="{TemplateBinding Background}"
                             BackgroundSizing="{TemplateBinding BackgroundSizing}"
                             BorderBrush="{TemplateBinding BorderBrush}"
@@ -58,19 +59,18 @@
                             CornerRadius="{TemplateBinding CornerRadius}"
                             MinHeight="{TemplateBinding MinHeight}" />
                         <TextBlock
-                            x:Name="PlaceholderTextBlock"
+                            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}}"
+                            IsVisible="{TemplateBinding SelectionBoxItem,Converter={x:Static ObjectConverters.IsNull}}"
                             Opacity="0.3"
                             Text="{TemplateBinding PlaceholderText}" />
                         <ContentPresenter
-                            x:Name="ContentPresenter"
+                            Name="ContentPresenter"
                             Grid.Column="0"
                             Margin="{TemplateBinding Padding}"
                             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -80,27 +80,19 @@
                         <Button
                             Name="ClearButton"
                             Grid.Column="1"
+                            Margin="{DynamicResource ComboBoxClearButtonMargin}"
                             Command="{Binding $parent[ComboBox].Clear}"
                             Content="{DynamicResource IconButtonClearData}"
+                            Focusable="False"
                             IsVisible="False"
                             Theme="{DynamicResource InnerIconButton}" />
-                        <Border
-                            x:Name="DropDownOverlay"
-                            Grid.Column="2"
-                            Width="30"
-                            Margin="0,1,1,1"
-                            HorizontalAlignment="Right"
-                            Background="Transparent"
-                            IsVisible="False" />
 
                         <PathIcon
-                            x:Name="DropDownGlyph"
-                            Grid.Column="2"
-                            Width="12"
-                            Height="12"
-                            Margin="0,0,10,0"
-                            HorizontalAlignment="Right"
-                            VerticalAlignment="Center"
+                            Name="DropDownGlyph"
+                            Grid.Column="1"
+                            Width="{DynamicResource ComboBoxIconWidth}"
+                            Height="{DynamicResource ComboBoxIconHeight}"
+                            Margin="{DynamicResource ComboBoxIconMargin}"
                             Data="{DynamicResource ComboBoxIcon}"
                             Foreground="{DynamicResource ComboBoxIconDefaultForeground}"
                             IsHitTestVisible="False"
@@ -114,29 +106,30 @@
                             ClipToBounds="False"
                             InheritsTransform="True"
                             IsLightDismissEnabled="True"
-                            IsOpen="{TemplateBinding IsDropDownOpen,
-                                                     Mode=TwoWay}"
+                            IsOpen="{TemplateBinding IsDropDownOpen, Mode=TwoWay}"
                             PlacementTarget="Background"
                             WindowManagerAddShadowHint="False">
                             <Border
-                                x:Name="PopupBorder"
-                                Margin="0,4"
+                                Name="PopupBorder"
                                 HorizontalAlignment="Stretch"
+                                Margin="{DynamicResource ComboBoxPopupBorderMargin}"
                                 Background="{DynamicResource ComboBoxPopupBackground}"
                                 BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
                                 BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}"
                                 BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
-                                ClipToBounds="True"
-                                CornerRadius="6">
-                                <ScrollViewer
-                                    HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
-                                    IsDeferredScrollingEnabled="{TemplateBinding (ScrollViewer.IsDeferredScrollingEnabled)}"
-                                    VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
-                                    <ItemsPresenter
-                                        Name="PART_ItemsPresenter"
-                                        Margin="{DynamicResource ComboBoxDropdownContentMargin}"
-                                        ItemsPanel="{TemplateBinding ItemsPanel}" />
-                                </ScrollViewer>
+                                CornerRadius="{DynamicResource ComboBoxPopupBoxCornerRadius}">
+                                <Border
+                                    CornerRadius="{DynamicResource ComboBoxPopupBoxCornerRadius}"
+                                    ClipToBounds="True">
+                                    <ScrollViewer
+                                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                                        IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
+                                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                                        <ItemsPresenter
+                                            Name="PART_ItemsPresenter"
+                                            ItemsPanel="{TemplateBinding ItemsPanel}" />
+                                    </ScrollViewer>
+                                </Border>
                             </Border>
                         </Popup>
                     </Grid>
@@ -148,6 +141,9 @@
             <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="^.Large">
@@ -191,6 +187,7 @@
         <!--  Disabled State  -->
         <Style Selector="^:disabled">
             <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorDisabledBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorDisabledBorderBrush}" />
             <Style Selector="^ /template/ ContentControl#ContentPresenter">
                 <Setter Property="Foreground" Value="{DynamicResource ComboBoxDisabledForeground}" />
             </Style>
@@ -296,10 +293,12 @@
         </Setter>
 
         <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemPointeroverForeground}" />
             <Setter Property="Background" Value="{DynamicResource ComboBoxItemPointeroverBackground}" />
         </Style>
 
         <Style Selector="^:focus /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemFocusForeground}" />
             <Setter Property="Background" Value="{DynamicResource ComboBoxItemFocusBackground}" />
         </Style>
 
@@ -308,10 +307,12 @@
         </Style>
 
         <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemPressedForeground}" />
             <Setter Property="Background" Value="{DynamicResource ComboBoxItemPressedBackground}" />
         </Style>
 
         <Style Selector="^:selected">
+            <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemSelectedForeground}" />
             <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="Background" Value="{DynamicResource ComboBoxItemSelectedBackground}" />
             </Style>

src/Semi.Avalonia/Controls/ContextMenu.axaml

@@ -3,17 +3,18 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
     <ControlTheme x:Key="{x:Type ContextMenu}" TargetType="ContextMenu">
-        <Setter Property="ContextMenu.Background" Value="{DynamicResource MenuFlyoutBackground}" />
-        <Setter Property="ContextMenu.BorderBrush" Value="{DynamicResource MenuFlyoutBorderBrush}" />
-        <Setter Property="ContextMenu.BorderThickness" Value="{DynamicResource MenuFlyoutBorderThickness}" />
-        <Setter Property="ContextMenu.CornerRadius" Value="{DynamicResource MenuFlyoutCornerRadius}" />
-        <Setter Property="ContextMenu.MaxWidth" Value="{DynamicResource MenuFlyoutMaxWidth}" />
-        <Setter Property="ContextMenu.MinHeight" Value="{DynamicResource MenuFlyoutMinHeight}" />
-        <Setter Property="ContextMenu.Padding" Value="{DynamicResource MenuFlyoutPadding}" />
-        <Setter Property="ContextMenu.HorizontalAlignment" Value="Stretch" />
-        <Setter Property="TextBlock.FontWeight" Value="Normal" />
-        <Setter Property="ContextMenu.WindowManagerAddShadowHint" Value="False" />
-        <Setter Property="ContextMenu.Template">
+        <Setter Property="Background" Value="{DynamicResource MenuFlyoutBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource MenuFlyoutBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource MenuFlyoutBorderThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource MenuFlyoutCornerRadius}" />
+        <Setter Property="MaxWidth" Value="{DynamicResource MenuFlyoutMaxWidth}" />
+        <Setter Property="MinHeight" Value="{DynamicResource MenuFlyoutMinHeight}" />
+        <Setter Property="Padding" Value="{DynamicResource MenuFlyoutPadding}" />
+        <Setter Property="Focusable" Value="True"></Setter>
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="WindowManagerAddShadowHint" Value="False" />
+        <Setter Property="Template">
             <ControlTemplate TargetType="ContextMenu">
                 <Border
                     MinHeight="{TemplateBinding MinHeight}"
@@ -26,7 +27,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/DataValidationErrors.axaml

@@ -2,13 +2,12 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:collections="clr-namespace:System.Collections;assembly=netstandard">
-    <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type DataValidationErrors}" TargetType="DataValidationErrors">
         <Setter Property="Template">
             <ControlTemplate TargetType="DataValidationErrors">
                 <DockPanel LastChildFill="True">
                     <ContentControl
-                        x:Name="InlineDataValidationContentControl"
+                        Name="InlineDataValidationContentControl"
                         Margin="0,4,0,0"
                         Content="{Binding (DataValidationErrors.Errors)}"
                         ContentTemplate="{TemplateBinding ErrorTemplate}"

src/Semi.Avalonia/Controls/DatePicker.axaml

@@ -2,13 +2,14 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type DatePickerPresenter}" TargetType="DatePickerPresenter">
         <Setter Property="Width" Value="296" />
         <Setter Property="MinWidth" Value="296" />
         <Setter Property="MaxHeight" Value="300" />
         <Setter Property="FontWeight" Value="Normal" />
         <Setter Property="Background" Value="{DynamicResource DateTimePickerPopupBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerPopupBorderBrush}" />
+        <Setter Property="BorderThickness" Value="1" />
         <Setter Property="CornerRadius" Value="6" />
         <Setter Property="Template">
             <ControlTemplate TargetType="DatePickerPresenter">
@@ -22,97 +23,106 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     BoxShadow="{DynamicResource DateTimePickerFlyoutBoxShadow}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid Name="ContentPanel" RowDefinitions="*,Auto">
-                        <Grid Name="PART_PickerContainer">
-                            <Grid.Styles>
-                                <Style Selector="DateTimePickerPanel &gt; ListBoxItem">
-                                    <Setter Property="Theme" Value="{StaticResource DateTimePickerItem}" />
-                                </Style>
-                            </Grid.Styles>
-                            <!--  Column Definitions set in code, ignore here  -->
-                            <Panel Name="PART_MonthHost">
-                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
-                                    <DateTimePickerPanel
-                                        Name="PART_MonthSelector"
-                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
-                                        PanelType="Month"
-                                        ShouldLoop="True" />
-                                </ScrollViewer>
-                                <RepeatButton Name="PART_MonthUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
-                                <RepeatButton Name="PART_MonthDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
-                            </Panel>
-                            <Panel Name="PART_DayHost">
-                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
-                                    <DateTimePickerPanel
-                                        Name="PART_DaySelector"
-                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
-                                        PanelType="Day"
-                                        ShouldLoop="True" />
-                                </ScrollViewer>
-                                <RepeatButton Name="PART_DayUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
-                                <RepeatButton Name="PART_DayDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
-                            </Panel>
-                            <Panel Name="PART_YearHost">
-                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
-                                    <DateTimePickerPanel
-                                        Name="PART_YearSelector"
-                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
-                                        PanelType="Year"
-                                        ShouldLoop="False" />
-                                </ScrollViewer>
-                                <RepeatButton Name="PART_YearUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
-                                <RepeatButton Name="PART_YearDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
-                            </Panel>
-                            <Rectangle
-                                Name="PART_FirstSpacer"
-                                Grid.Column="1"
-                                Width="1"
-                                Margin="0,4"
-                                HorizontalAlignment="Center"
-                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
-                            <Rectangle
-                                Name="PART_SecondSpacer"
-                                Grid.Column="3"
-                                Width="1"
-                                Margin="0,4"
-                                HorizontalAlignment="Center"
-                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
-                        </Grid>
+                    <Border
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        ClipToBounds="True">
+                        <Grid Name="ContentPanel" RowDefinitions="*,Auto">
+                            <Grid Name="PART_PickerContainer">
+                                <Grid.Styles>
+                                    <Style Selector="DateTimePickerPanel > ListBoxItem">
+                                        <Setter Property="Theme" Value="{StaticResource DateTimePickerItem}" />
+                                    </Style>
+                                </Grid.Styles>
+                                <!--  Column Definitions set in code, ignore here  -->
+                                <Panel Name="PART_MonthHost">
+                                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                        <DateTimePickerPanel
+                                            Name="PART_MonthSelector"
+                                            ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                            PanelType="Month"
+                                            ShouldLoop="True" />
+                                    </ScrollViewer>
+                                    <RepeatButton Name="PART_MonthUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                                    <RepeatButton Name="PART_MonthDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
+                                </Panel>
+                                <Panel Name="PART_DayHost">
+                                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                        <DateTimePickerPanel
+                                            Name="PART_DaySelector"
+                                            ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                            PanelType="Day"
+                                            ShouldLoop="True" />
+                                    </ScrollViewer>
+                                    <RepeatButton Name="PART_DayUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                                    <RepeatButton Name="PART_DayDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
+                                </Panel>
+                                <Panel Name="PART_YearHost">
+                                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                        <DateTimePickerPanel
+                                            Name="PART_YearSelector"
+                                            ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                            PanelType="Year"
+                                            ShouldLoop="False" />
+                                    </ScrollViewer>
+                                    <RepeatButton Name="PART_YearUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                                    <RepeatButton Name="PART_YearDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
+                                </Panel>
+                                <Rectangle
+                                    Name="PART_FirstSpacer"
+                                    Grid.Column="1"
+                                    Width="1"
+                                    Margin="0,4"
+                                    HorizontalAlignment="Center"
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                <Rectangle
+                                    Name="PART_SecondSpacer"
+                                    Grid.Column="3"
+                                    Width="1"
+                                    Margin="0,4"
+                                    HorizontalAlignment="Center"
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                            </Grid>
 
-                        <Grid
-                            Name="AcceptDismissGrid"
-                            Grid.Row="1"
-                            ColumnDefinitions="*,*">
-                            <Button
-                                Name="PART_AcceptButton"
-                                Grid.Column="0"
-                                HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                Theme="{StaticResource DateTimePickerButton}">
-                                <PathIcon
-                                    Width="12"
-                                    Height="12"
-                                    Data="{DynamicResource DateTimePickerAcceptGlyph}" />
-                            </Button>
-                            <Button
-                                Name="PART_DismissButton"
-                                Grid.Column="1"
-                                HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                FontSize="16"
-                                Theme="{StaticResource DateTimePickerButton}">
-                                <PathIcon
-                                    Width="12"
-                                    Height="12"
-                                    Data="{DynamicResource DateTimePickerDismissGlyph}" />
-                            </Button>
-                            <Rectangle
-                                Grid.ColumnSpan="2"
-                                Height="1"
-                                VerticalAlignment="Top"
-                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                            <Grid
+                                Name="AcceptDismissGrid"
+                                Grid.Row="1"
+                                ColumnDefinitions="*,Auto,*">
+                                <Button
+                                    Name="PART_AcceptButton"
+                                    Grid.Column="0"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
+                                    Theme="{StaticResource DateTimePickerButton}">
+                                    <PathIcon
+                                        Width="12"
+                                        Height="12"
+                                        Data="{DynamicResource DateTimePickerAcceptGlyph}" />
+                                </Button>
+                                <Rectangle
+                                    Grid.Column="1"
+                                    Width="1"
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                <Button
+                                    Name="PART_DismissButton"
+                                    Grid.Column="2"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
+                                    FontSize="16"
+                                    Theme="{StaticResource DateTimePickerButton}">
+                                    <PathIcon
+                                        Width="12"
+                                        Height="12"
+                                        Data="{DynamicResource DateTimePickerDismissGlyph}" />
+                                </Button>
+                                <Rectangle
+                                    Grid.Column="0"
+                                    Grid.ColumnSpan="3"
+                                    Height="1"
+                                    VerticalAlignment="Top"
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                            </Grid>
                         </Grid>
-                    </Grid>
+                    </Border>
                 </Border>
             </ControlTemplate>
         </Setter>
@@ -176,6 +186,7 @@
                                     <TextBlock
                                         Name="PART_MonthTextBlock"
                                         Padding="12,0"
+                                        HorizontalAlignment="Center"
                                         VerticalAlignment="Center"
                                         FontFamily="{TemplateBinding FontFamily}"
                                         FontSize="{TemplateBinding FontSize}"
@@ -192,7 +203,7 @@
                                         FontWeight="{TemplateBinding FontWeight}"
                                         Text="{DynamicResource STRING_DATEPICKER_YEAR_TEXT}" />
                                     <Rectangle
-                                        x:Name="PART_FirstSpacer"
+                                        Name="PART_FirstSpacer"
                                         Grid.Column="1"
                                         Width="1"
                                         Height="{TemplateBinding Height}"
@@ -200,7 +211,7 @@
                                         HorizontalAlignment="Center"
                                         Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                                     <Rectangle
-                                        x:Name="PART_SecondSpacer"
+                                        Name="PART_SecondSpacer"
                                         Grid.Column="3"
                                         Width="1"
                                         Height="{TemplateBinding Height}"

src/Semi.Avalonia/Controls/DateTimePickerShared.axaml

@@ -2,8 +2,6 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
-
     <ControlTheme x:Key="DateTimePickerFlyoutButton" TargetType="Button">
         <Setter Property="RenderTransform" Value="none" />
         <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
@@ -26,6 +24,7 @@
 
         <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
             <Setter Property="Background" Value="{DynamicResource DateTimePickerButtonPointeroverBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerButtonPointeroverBorderBrush}" />
         </Style>
 
         <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
@@ -58,7 +57,7 @@
         x:Key="DateTimePickerItem"
         BasedOn="{StaticResource {x:Type ListBoxItem}}"
         TargetType="ListBoxItem">
-        <Setter Property="ListBoxItem.CornerRadius" Value="0" />
+        <Setter Property="CornerRadius" Value="0" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="HorizontalContentAlignment" Value="Center" />
         <Setter Property="Background" Value="{DynamicResource DateTimePickerListItemBackground}" />
@@ -66,10 +65,6 @@
         <Style Selector="^:selected">
             <Setter Property="IsHitTestVisible" Value="False" />
         </Style>
-        <Style Selector="^.MonthItem">
-            <Setter Property="Padding" Value="{DynamicResource DatePickerFlyoutPresenterMonthPadding}" />
-            <Setter Property="HorizontalContentAlignment" Value="Left" />
-        </Style>
     </ControlTheme>
 
     <!--  This is used for both the accept/dismiss & buttons in the presenter  -->
@@ -84,7 +79,7 @@
             <ControlTemplate TargetType="Button">
                 <Border Background="{TemplateBinding Background}">
                     <ContentPresenter
-                        x:Name="ContentPresenter"
+                        Name="ContentPresenter"
                         Padding="{TemplateBinding Padding}"
                         HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                         VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"

src/Semi.Avalonia/Controls/DropDownButton.axaml

@@ -2,7 +2,6 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type DropDownButton}" TargetType="DropDownButton">
         <Setter Property="Background" Value="{DynamicResource ButtonDefaultBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultPrimaryForeground}" />
@@ -23,16 +22,16 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="DropDownButton">
                 <Border
-                    x:Name="RootBorder"
+                    Name="RootBorder"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
                     BackgroundSizing="{TemplateBinding BackgroundSizing}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     ClipToBounds="True"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid x:Name="InnerGrid" ColumnDefinitions="*,Auto">
+                    <Grid Name="InnerGrid" ColumnDefinitions="*,Auto">
                         <ContentPresenter
-                            x:Name="PART_ContentPresenter"
+                            Name="PART_ContentPresenter"
                             Grid.Column="0"
                             Padding="{TemplateBinding Padding}"
                             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -42,7 +41,7 @@
                             Foreground="{TemplateBinding Foreground}"
                             RecognizesAccessKey="True" />
                         <PathIcon
-                            x:Name="DropDownGlyph"
+                            Name="DropDownGlyph"
                             Grid.Column="1"
                             Width="12"
                             Height="12"
@@ -126,6 +125,12 @@
         x:Key="SolidDropDownButton"
         BasedOn="{StaticResource {x:Type DropDownButton}}"
         TargetType="DropDownButton">
+        <Setter Property="FocusAdorner">
+            <FocusAdornerTemplate>
+                <Border Theme="{DynamicResource AdornerLayerBorder}"
+                        Classes="Solid" />
+            </FocusAdornerTemplate>
+        </Setter>
         <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
         <Style Selector="^ /template/ Border#RootBorder">
             <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
@@ -230,11 +235,11 @@
             </Style>
         </Style>
         <Style Selector="^:disabled /template/ Border#RootBorder">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidDisabledBorderBrush}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidDisabledBackground}" />
         </Style>
         <Style Selector="^:disabled">
-            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidDisabledForeground}" />
         </Style>
     </ControlTheme>
 

src/Semi.Avalonia/Controls/EmbeddableControlRoot.axaml

@@ -1,6 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
-
     <ControlTheme x:Key="{x:Type EmbeddableControlRoot}" TargetType="EmbeddableControlRoot">
         <Setter Property="Background" Value="{DynamicResource WindowDefaultBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource WindowDefaultForeground}" />

src/Semi.Avalonia/Controls/Expander.axaml

@@ -9,7 +9,7 @@
         </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="ExpanderHeaderToggleButtonTheme" TargetType="ToggleButton">
-        <Setter Property="ToggleButton.Template">
+        <Setter Property="Template">
             <ControlTemplate TargetType="ToggleButton">
                 <ContentPresenter
                     Padding="{TemplateBinding Padding}"
@@ -19,26 +19,25 @@
         </Setter>
     </ControlTheme>
     <ControlTheme x:Key="{x:Type Expander}" TargetType="Expander">
-        <Setter Property="Expander.BorderThickness" Value="1" />
-        <Setter Property="Expander.BorderBrush" Value="{DynamicResource ExpanderSeparatorBorderBrush}" />
-        <Setter Property="Expander.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
-        <Setter Property="Expander.HorizontalAlignment" Value="Stretch" />
-        <Setter Property="Expander.HorizontalContentAlignment" Value="Left" />
-        <Setter Property="Expander.VerticalContentAlignment" Value="Stretch" />
-        <Setter Property="Expander.Template">
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ExpanderSeparatorBorderBrush}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="Template">
             <ControlTemplate TargetType="Expander">
                 <DockPanel>
-                    <LayoutTransformControl x:Name="ExpanderHeaderLayoutContainer" Margin="{DynamicResource ExpanderHeaderMargin}">
+                    <LayoutTransformControl Name="ExpanderHeaderLayoutContainer" Margin="{DynamicResource ExpanderHeaderMargin}">
                         <ToggleButton
-                            x:Name="ExpanderHeader"
+                            Name="ExpanderHeader"
                             Padding="{DynamicResource ExpanderHeaderPadding}"
                             HorizontalAlignment="Stretch"
                             HorizontalContentAlignment="Stretch"
                             Background="{DynamicResource ExpanderHeaderDefaultBackground}"
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}"
-                            IsChecked="{TemplateBinding IsExpanded,
-                                                        Mode=TwoWay}"
+                            IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}"
                             IsEnabled="{TemplateBinding IsEnabled}"
                             TextElement.FontWeight="{DynamicResource ExpanderHeaderFontWeight}"
                             TextElement.Foreground="{DynamicResource ExpanderHeaderForeground}"
@@ -65,20 +64,19 @@
                     </LayoutTransformControl>
                     <LayoutTransformControl Name="ExpanderContentLayoutContainer" MinHeight="1">
                         <Border
-                            x:Name="ExpanderContent"
+                            Name="ExpanderContent"
                             MinHeight="2"
                             BorderBrush="{DynamicResource ExpanderSeparatorBorderBrush}"
                             BorderThickness="0,0,0,1">
                             <ContentPresenter
-                                x:Name="PART_ContentPresenter"
+                                Name="PART_ContentPresenter"
                                 Margin="{DynamicResource ExpanderContentMargin}"
                                 HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                 VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                 Content="{TemplateBinding Content}"
                                 ContentTemplate="{TemplateBinding ContentTemplate}"
                                 Foreground="{DynamicResource ExpanderContentForeground}"
-                                IsVisible="{TemplateBinding IsExpanded,
-                                                            Mode=TwoWay}" />
+                                IsVisible="{TemplateBinding IsExpanded, Mode=TwoWay}" />
                         </Border>
                     </LayoutTransformControl>
                 </DockPanel>

src/Semi.Avalonia/Controls/FlyoutPresenter.axaml

@@ -3,24 +3,24 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
     <ControlTheme x:Key="{x:Type FlyoutPresenter}" TargetType="FlyoutPresenter">
-        <Setter Property="FlyoutPresenter.HorizontalContentAlignment" Value="Stretch" />
-        <Setter Property="FlyoutPresenter.VerticalContentAlignment" Value="Stretch" />
-        <Setter Property="FlyoutPresenter.UseLayoutRounding" Value="False" />
-        <Setter Property="FlyoutPresenter.FontWeight" Value="{DynamicResource FlyoutFontWeight}" />
-        <Setter Property="FlyoutPresenter.Background" Value="{DynamicResource FlyoutBackground}" />
-        <Setter Property="FlyoutPresenter.BorderBrush" Value="{DynamicResource FlyoutBorderBrush}" />
-        <Setter Property="FlyoutPresenter.BorderThickness" Value="{DynamicResource FlyoutBorderThickness}" />
-        <Setter Property="FlyoutPresenter.Padding" Value="{DynamicResource FlyoutPadding}" />
-        <Setter Property="FlyoutPresenter.MinWidth" Value="{DynamicResource FlyoutMinWidth}" />
-        <Setter Property="FlyoutPresenter.MaxWidth" Value="{DynamicResource FlyoutMaxWidth}" />
-        <Setter Property="FlyoutPresenter.MinHeight" Value="{DynamicResource FlyoutMinHeight}" />
-        <Setter Property="FlyoutPresenter.MaxHeight" Value="{DynamicResource FlyoutMaxHeight}" />
-        <Setter Property="FlyoutPresenter.Foreground" Value="{DynamicResource FlyoutForeground}" />
-        <Setter Property="FlyoutPresenter.ClipToBounds" Value="False" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="UseLayoutRounding" Value="False" />
+        <Setter Property="FontWeight" Value="{DynamicResource FlyoutFontWeight}" />
+        <Setter Property="Background" Value="{DynamicResource FlyoutBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource FlyoutBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource FlyoutBorderThickness}" />
+        <Setter Property="Padding" Value="{DynamicResource FlyoutPadding}" />
+        <Setter Property="MinWidth" Value="{DynamicResource FlyoutMinWidth}" />
+        <Setter Property="MaxWidth" Value="{DynamicResource FlyoutMaxWidth}" />
+        <Setter Property="MinHeight" Value="{DynamicResource FlyoutMinHeight}" />
+        <Setter Property="MaxHeight" Value="{DynamicResource FlyoutMaxHeight}" />
+        <Setter Property="Foreground" Value="{DynamicResource FlyoutForeground}" />
+        <Setter Property="ClipToBounds" Value="False" />
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
         <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
-        <Setter Property="FlyoutPresenter.CornerRadius" Value="{DynamicResource FlyoutCornerRadius}" />
-        <Setter Property="FlyoutPresenter.Template">
+        <Setter Property="CornerRadius" Value="{DynamicResource FlyoutCornerRadius}" />
+        <Setter Property="Template">
             <ControlTemplate TargetType="FlyoutPresenter">
                 <Border
                     Name="LayoutRoot"
@@ -48,25 +48,25 @@
     </ControlTheme>
 
     <ControlTheme x:Key="LightFlyout" TargetType="FlyoutPresenter">
-        <Setter Property="FlyoutPresenter.HorizontalContentAlignment" Value="Stretch" />
-        <Setter Property="FlyoutPresenter.VerticalContentAlignment" Value="Stretch" />
-        <Setter Property="FlyoutPresenter.UseLayoutRounding" Value="False" />
-        <Setter Property="FlyoutPresenter.FontWeight" Value="{DynamicResource FlyoutFontWeight}" />
-        <Setter Property="FlyoutPresenter.Background" Value="Transparent" />
-        <Setter Property="FlyoutPresenter.BorderBrush" Value="Transparent" />
-        <Setter Property="FlyoutPresenter.BorderThickness" Value="0" />
-        <Setter Property="FlyoutPresenter.Padding" Value="{DynamicResource FlyoutPadding}" />
-        <Setter Property="FlyoutPresenter.MinWidth" Value="{DynamicResource FlyoutMinWidth}" />
-        <Setter Property="FlyoutPresenter.MaxWidth" Value="{DynamicResource FlyoutMaxWidth}" />
-        <Setter Property="FlyoutPresenter.MinHeight" Value="{DynamicResource FlyoutMinHeight}" />
-        <Setter Property="FlyoutPresenter.MaxHeight" Value="{DynamicResource FlyoutMaxHeight}" />
-        <Setter Property="FlyoutPresenter.Foreground" Value="{DynamicResource FlyoutForeground}" />
-        <Setter Property="FlyoutPresenter.ClipToBounds" Value="False" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="UseLayoutRounding" Value="False" />
+        <Setter Property="FontWeight" Value="{DynamicResource FlyoutFontWeight}" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderBrush" Value="Transparent" />
+        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="Padding" Value="{DynamicResource FlyoutPadding}" />
+        <Setter Property="MinWidth" Value="{DynamicResource FlyoutMinWidth}" />
+        <Setter Property="MaxWidth" Value="{DynamicResource FlyoutMaxWidth}" />
+        <Setter Property="MinHeight" Value="{DynamicResource FlyoutMinHeight}" />
+        <Setter Property="MaxHeight" Value="{DynamicResource FlyoutMaxHeight}" />
+        <Setter Property="Foreground" Value="{DynamicResource FlyoutForeground}" />
+        <Setter Property="ClipToBounds" Value="False" />
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
         <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
-        <Setter Property="FlyoutPresenter.CornerRadius" Value="{DynamicResource FlyoutCornerRadius}" />
-        <Setter Property="FlyoutPresenter.Margin" Value="4" />
-        <Setter Property="FlyoutPresenter.Template">
+        <Setter Property="CornerRadius" Value="{DynamicResource FlyoutCornerRadius}" />
+        <Setter Property="Margin" Value="4" />
+        <Setter Property="Template">
             <ControlTemplate TargetType="FlyoutPresenter">
                 <Border
                     Name="LayoutRoot"

src/Semi.Avalonia/Controls/GridSplitter.axaml

@@ -6,8 +6,8 @@
         <Setter Property="Focusable" Value="True" />
         <Setter Property="MinWidth" Value="6" />
         <Setter Property="MinHeight" Value="6" />
-        <Setter Property="GridSplitter.ClipToBounds" Value="False" />
-        <Setter Property="GridSplitter.Padding" Value="2" />
+        <Setter Property="ClipToBounds" Value="False" />
+        <Setter Property="Padding" Value="2" />
         <Setter Property="Background" Value="{DynamicResource GridSplitterBackground}" />
         <Setter Property="PreviewContent">
             <Template>

src/Semi.Avalonia/Controls/HeaderedContentControl.axaml

@@ -1,7 +1,31 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls"
     x:CompileBindings="True">
+    <Design.PreviewWith>
+        <StackPanel Spacing="20">
+            <HeaderedContentControl
+                Theme="{DynamicResource GroupBox}"
+                Header="Header" />
+            <HeaderedContentControl
+                Theme="{DynamicResource GroupBox}"
+                Content="Content" />
+            <HeaderedContentControl
+                Theme="{DynamicResource GroupBox}"
+                MaxWidth="360"
+                Content="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。">
+                <HeaderedContentControl.Header>
+                    <Panel>
+                        <SelectableTextBlock Text="Semi Design" />
+                        <HyperlinkButton HorizontalAlignment="Right" Content="更多" />
+                    </Panel>
+                </HeaderedContentControl.Header>
+            </HeaderedContentControl>
+        </StackPanel>
+    </Design.PreviewWith>
+    <converters:MarginMultiplierConverter x:Key="SeparatorBorderMultiplier" Top="True" Indent="1" />
+
     <ControlTheme x:Key="{x:Type HeaderedContentControl}" TargetType="HeaderedContentControl">
         <Setter Property="Padding" Value="3" />
         <Setter Property="Template">
@@ -12,31 +36,31 @@
                     CornerRadius="{TemplateBinding CornerRadius}"
                     Background="{TemplateBinding Background}"
                     Padding="{TemplateBinding Padding}">
-                    <Grid RowDefinitions="auto *">
+                    <Grid RowDefinitions="Auto,*">
                         <ContentPresenter
                             Name="PART_HeaderPresenter"
+                            Grid.Row="0"
                             Content="{TemplateBinding Header}"
-                            RecognizesAccessKey="True"
                             ContentTemplate="{TemplateBinding HeaderTemplate}"
+                            RecognizesAccessKey="True"
                             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                             FontSize="{TemplateBinding FontSize}"
                             FontWeight="{TemplateBinding FontWeight}"
                             FontFamily="{TemplateBinding FontFamily}"
-                            FontStyle="{TemplateBinding FontStyle}"
-                            Grid.Row="0" />
+                            FontStyle="{TemplateBinding FontStyle}" />
                         <ContentPresenter
                             Name="PART_ContentPresenter"
+                            Grid.Row="1"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
                             Content="{TemplateBinding Content}"
                             RecognizesAccessKey="True"
-                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                             FontSize="{TemplateBinding FontSize}"
                             FontWeight="{TemplateBinding FontWeight}"
                             FontFamily="{TemplateBinding FontFamily}"
-                            FontStyle="{TemplateBinding FontStyle}"
-                            Grid.Row="1" />
+                            FontStyle="{TemplateBinding FontStyle}" />
                     </Grid>
                 </Border>
             </ControlTemplate>
@@ -44,42 +68,46 @@
     </ControlTheme>
 
     <ControlTheme x:Key="GroupBox" TargetType="HeaderedContentControl">
-        <Setter Property="Background" Value="{DynamicResource HeaderedContentControlDefaultBackground}" />
-        <Setter Property="BorderThickness" Value="1" />
-        <Setter Property="BorderBrush" Value="{DynamicResource HeaderedContentControlDefaultBorderBrush}" />
+        <Setter Property="Background" Value="{DynamicResource HeaderedContentControlBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource HeaderedContentControlBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource HeaderedContentControlBorderThickness}" />
         <Setter Property="CornerRadius" Value="{DynamicResource HeaderedContentControlCornerRadius}" />
-        <Setter Property="HorizontalAlignment" Value="Stretch" />
-        <Setter Property="HorizontalContentAlignment" Value="Left" />
-        <Setter Property="VerticalContentAlignment" Value="Stretch" />
         <Setter Property="Template">
             <ControlTemplate TargetType="HeaderedContentControl">
                 <Border
-                    HorizontalAlignment="Stretch"
-                    VerticalAlignment="Stretch"
-                    Width="{TemplateBinding Width}"
-                    Height="{TemplateBinding Height}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
-                    CornerRadius="{TemplateBinding CornerRadius}"
-                    BorderThickness="{TemplateBinding BorderThickness}">
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
                     <Grid RowDefinitions="Auto,Auto,Auto">
                         <ContentPresenter
+                            Name="PART_HeaderPresenter"
                             Grid.Row="0"
-                            FontWeight="Bold"
-                            HorizontalAlignment="Left"
-                            VerticalAlignment="Stretch"
+                            Padding="{DynamicResource HeaderedContentControlHeaderPadding}"
+                            FontWeight="{DynamicResource HeaderedContentControlHeaderFontWeight}"
+                            IsVisible="{TemplateBinding Header,Converter={x:Static ObjectConverters.IsNotNull}}"
                             Content="{TemplateBinding Header}"
-                            ContentTemplate="{TemplateBinding HeaderTemplate}"
-                            Margin="16" />
-                        <Rectangle
+                            ContentTemplate="{TemplateBinding HeaderTemplate}" />
+                        <Border
+                            Name="SeparatorBorder"
                             Grid.Row="1"
-                            Fill="{TemplateBinding BorderBrush}"
-                            Height="1" />
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness, Converter={StaticResource SeparatorBorderMultiplier}}">
+                            <Border.IsVisible>
+                                <MultiBinding Converter="{x:Static BoolConverters.And}">
+                                    <TemplateBinding Property="Header" Converter="{x:Static ObjectConverters.IsNotNull}" />
+                                    <TemplateBinding Property="Content" Converter="{x:Static ObjectConverters.IsNotNull}" />
+                                </MultiBinding>
+                            </Border.IsVisible>
+                        </Border>
                         <ContentPresenter
+                            Name="PART_ContentPresenter"
                             Grid.Row="2"
+                            IsVisible="{TemplateBinding Content,Converter={x:Static ObjectConverters.IsNotNull}}"
+                            Padding="{DynamicResource HeaderedContentControlContentPadding}"
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
-                            Margin="16" />
+                            TextWrapping="Wrap" />
                     </Grid>
                 </Border>
             </ControlTemplate>

src/Semi.Avalonia/Controls/HyperlinkButton.axaml

@@ -1,118 +1,100 @@
 <ResourceDictionary
-    x:CompileBindings="True"
     xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    x:CompileBindings="True">
+    <Design.PreviewWith>
+        <StackPanel>
+            <HyperlinkButton NavigateUri="http://www.irihi.tech/">
+                链接文本
+            </HyperlinkButton>
+            <HyperlinkButton NavigateUri="http://www.irihi.tech/" Classes="WithIcon Underline">
+                网页链接
+            </HyperlinkButton>
+            <HyperlinkButton NavigateUri="http://www.irihi.tech/" Classes="OnlyIcon">
+                OnlyIcon
+            </HyperlinkButton>
+        </StackPanel>
+    </Design.PreviewWith>
     <ControlTheme TargetType="HyperlinkButton" x:Key="{x:Type HyperlinkButton}">
-        <Setter Property="Padding" Value="0,0,0,0" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Top" />
-        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="FontSize" Value="{DynamicResource HyperlinkButtonFontSize}" />
-        <Setter Property="MinHeight" Value="32" />
+        <Setter Property="FontWeight" Value="{DynamicResource HyperlinkButtonFontWeight}" />
         <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonForeground}" />
-        <Setter Property="Background" Value="{DynamicResource HyperlinkButtonDefaultBackground}" />
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="HyperlinkButton">
-                <Grid ColumnDefinitions="Auto,*" x:Name="RootGrid">
-                    <Grid
-                        Grid.Column="0"
+                <DockPanel>
+                    <PathIcon
+                        Name="PART_LinkGlyph"
+                        Margin="{DynamicResource HyperlinkButtonLinkGlyphMargin}"
                         IsVisible="False"
-                        Margin="0,0,8,0"
-                        VerticalAlignment="Center"
-                        x:Name="IconGrid">
-                        <Border
-                            Background="{DynamicResource HyperlinkButtonDefaultBackground}"
-                            Height="{DynamicResource HyperlinkButtonIconHeight}"
-                            Opacity="0"
-                            UseLayoutRounding="False"
-                            Width="{DynamicResource HyperlinkButtonIconWidth}"
-                            x:Name="BackgroundRectangle" />
-                        <PathIcon
-                            Data="{DynamicResource HyperlinkButtonLinkGlyph}"
-                            Foreground="{DynamicResource HyperlinkButtonForeground}"
-                            Height="{DynamicResource HyperlinkButtonLinkGlyphHeight}"
-                            Name="LinkGlyph"
-                            VerticalAlignment="Center"
-                            Width="{DynamicResource HyperlinkButtonLinkGlyphWidth}" />
-                    </Grid>
+                        Data="{DynamicResource HyperlinkButtonLinkGlyph}"
+                        Foreground="{TemplateBinding Foreground}"
+                        Width="{DynamicResource HyperlinkButtonLinkGlyphWidth}"
+                        Height="{DynamicResource HyperlinkButtonLinkGlyphHeight}" />
                     <ContentPresenter
+                        Name="PART_ContentPresenter"
                         Content="{TemplateBinding Content}"
                         ContentTemplate="{TemplateBinding ContentTemplate}"
-                        Cursor="{TemplateBinding Cursor}"
-                        Grid.Column="1"
                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        Padding="0,0,0,0"
-                        RecognizesAccessKey="True"
-                        VerticalAlignment="Center"
-                        x:Name="ContentPresenter" />
-                </Grid>
+                        RecognizesAccessKey="True" />
+                </DockPanel>
             </ControlTemplate>
         </Setter>
 
         <Style Selector="^:pointerover">
-            <Style Selector="^ /template/ PathIcon#LinkGlyph">
-                <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonOverForeground}" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonOverForeground}" />
-            </Style>
+            <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonPointeroverForeground}" />
         </Style>
 
-        <!--  Unvisited Pressed State  -->
         <Style Selector="^:pressed">
+            <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonPressedForeground}" />
             <Setter Property="RenderTransform" Value="scale(0.98)" />
         </Style>
 
-        <!--  Unvisited Disabled state  -->
         <Style Selector="^:disabled">
-            <Style Selector="^ /template/ PathIcon#LinkGlyph">
-                <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonDisabledForeground}" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonDisabledForeground}" />
-            </Style>
+            <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonDisabledForeground}" />
         </Style>
 
         <Style Selector="^:visited">
-            <Style Selector="^ /template/ PathIcon#LinkGlyph">
-                <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonVisitedForeground}" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonVisitedForeground}" />
-            </Style>
+            <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonVisitedForeground}" />
 
-            <!--  Visited Pointerover State  -->
             <Style Selector="^:pointerover">
-                <Style Selector="^ /template/ PathIcon#LinkGlyph">
-                    <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonOverForeground}" />
-                </Style>
-                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                    <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonOverForeground}" />
-                </Style>
+                <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonPointeroverForeground}" />
             </Style>
 
-            <!--  Visited Pressed State  -->
             <Style Selector="^:pressed">
+                <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonPressedForeground}" />
                 <Setter Property="RenderTransform" Value="scale(0.98)" />
             </Style>
 
-            <!--  Visited Disabled State  -->
             <Style Selector="^:disabled">
-                <Style Selector="^ /template/ PathIcon#LinkGlyph">
-                    <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonDisabledForeground}" />
-                </Style>
-                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                    <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonDisabledForeground}" />
-                </Style>
+                <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonDisabledForeground}" />
             </Style>
         </Style>
 
         <Style Selector="^.WithIcon">
-            <Style Selector="^ /template/ Grid#IconGrid">
+            <Style Selector="^ /template/ PathIcon#PART_LinkGlyph">
                 <Setter Property="IsVisible" Value="True" />
             </Style>
         </Style>
+
+        <Style Selector="^.Underline">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="TextBlock.TextDecorations" Value="Underline" />
+            </Style>
+        </Style>
+
+        <Style Selector="^.OnlyIcon">
+            <Style Selector="^ /template/ PathIcon#PART_LinkGlyph">
+                <Setter Property="Margin" Value="0" />
+                <Setter Property="IsVisible" Value="True" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+        </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/Label.axaml

@@ -80,8 +80,8 @@
         </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type Label}" TargetType="Label">
-        <Setter Property="Label.Foreground" Value="{DynamicResource TextBlockDefaultForeground}" />
-        <Setter Property="Label.FontSize" Value="{DynamicResource TextBlockFontSize}" />
+        <Setter Property="Foreground" Value="{DynamicResource TextBlockDefaultForeground}" />
+        <Setter Property="FontSize" Value="{DynamicResource TextBlockFontSize}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="Label">
                 <ContentPresenter
@@ -138,7 +138,7 @@
         x:Key="TitleLabel"
         BasedOn="{StaticResource {x:Type Label}}"
         TargetType="Label">
-        <Setter Property="Label.FontWeight" Value="{DynamicResource TextBlockTitleFontWeight}" />
+        <Setter Property="FontWeight" Value="{DynamicResource TextBlockTitleFontWeight}" />
         <Style Selector="^.H1">
             <Setter Property="FontSize" Value="{DynamicResource TextBlockTitleH1FontSize}" />
         </Style>
@@ -164,14 +164,14 @@
     <!--  Size: Small, Large. Default is Small  -->
     <!--  Color: Red, Pink, Purple, Violet, Indigo, Blue, LightBlue, Cyan, Teal, Green, LightGreen, Lime, Yellow, Amber, Orange, Grey, White. Default is Grey  -->
     <ControlTheme x:Key="TagLabel" TargetType="Label">
-        <Setter Property="Label.BorderThickness" Value="{DynamicResource LabelTagBorderThickness}" />
-        <Setter Property="Label.MinHeight" Value="{DynamicResource LabelTagSmallHeight}" />
-        <Setter Property="Label.CornerRadius" Value="{DynamicResource LabelTagSquareCornerRadius}" />
-        <Setter Property="Label.HorizontalAlignment" Value="Left" />
-        <Setter Property="Label.UseLayoutRounding" Value="False" />
-        <Setter Property="Label.VerticalAlignment" Value="Center" />
-        <Setter Property="Label.Padding" Value="{DynamicResource LabelTagSmallPadding}" />
-        <Setter Property="Label.FontSize" Value="{DynamicResource LabelTagFontSize}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource LabelTagBorderThickness}" />
+        <Setter Property="MinHeight" Value="{DynamicResource LabelTagSmallHeight}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource LabelTagSquareCornerRadius}" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="UseLayoutRounding" Value="False" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="Padding" Value="{DynamicResource LabelTagSmallPadding}" />
+        <Setter Property="FontSize" Value="{DynamicResource LabelTagFontSize}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="Label">
                 <ContentPresenter

src/Semi.Avalonia/Controls/ManagedFileChooser.axaml

@@ -4,8 +4,8 @@
     xmlns:converters="using:Semi.Avalonia.Converters"
     xmlns:dialogs="clr-namespace:Avalonia.Dialogs;assembly=Avalonia.Dialogs"
     xmlns:internal="clr-namespace:Avalonia.Dialogs.Internal;assembly=Avalonia.Dialogs"
+    xmlns:cvt="using:Avalonia.Controls.Converters"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
     <Design.PreviewWith>
         <Border
             Width="800"
@@ -21,7 +21,7 @@
         <StreamGeometry x:Key="Icon_Volume">M6,2H18A2,2 0 0,1 20,4V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2M12,4A6,6 0 0,0 6,10C6,13.31 8.69,16 12.1,16L11.22,13.77C10.95,13.29 11.11,12.68 11.59,12.4L12.45,11.9C12.93,11.63 13.54,11.79 13.82,12.27L15.74,14.69C17.12,13.59 18,11.9 18,10A6,6 0 0,0 12,4M12,9A1,1 0 0,1 13,10A1,1 0 0,1 12,11A1,1 0 0,1 11,10A1,1 0 0,1 12,9M7,18A1,1 0 0,0 6,19A1,1 0 0,0 7,20A1,1 0 0,0 8,19A1,1 0 0,0 7,18M12.09,13.27L14.58,19.58L17.17,18.08L12.95,12.77L12.09,13.27Z</StreamGeometry>
     </converters:KeyToPathConverter>
     <ControlTheme x:Key="{x:Type dialogs:ManagedFileChooser}" TargetType="dialogs:ManagedFileChooser">
-        <Setter Property="dialogs:ManagedFileChooser.Template">
+        <Setter Property="Template">
             <ControlTemplate x:DataType="internal:ManagedFileChooserViewModel" TargetType="dialogs:ManagedFileChooser">
                 <DockPanel>
                     <Border
@@ -30,7 +30,7 @@
                         DockPanel.Dock="Left"
                         Theme="{DynamicResource CardBorder}">
                         <ListBox
-                            x:Name="PART_QuickLinks"
+                            Name="PART_QuickLinks"
                             Focusable="False"
                             ItemsSource="{Binding QuickLinks}"
                             SelectedIndex="{Binding QuickLinksSelectedIndex}">
@@ -49,7 +49,7 @@
                         </ListBox>
                     </Border>
                     <DockPanel
-                        x:Name="NavBar"
+                        Name="NavBar"
                         Margin="8,8,8,0"
                         VerticalAlignment="Center"
                         DockPanel.Dock="Top">
@@ -63,7 +63,7 @@
                                 Data="{DynamicResource ManagedFileChooserUpButtonGlyph}"
                                 Foreground="{DynamicResource ManagedFileChooserIconForeground}" />
                         </Button>
-                        <TextBox x:Name="Location" Text="{Binding Location}">
+                        <TextBox Name="Location" Text="{Binding Location}">
                             <TextBox.KeyBindings>
                                 <KeyBinding Command="{Binding EnterPressed}" Gesture="Enter" />
                             </TextBox.KeyBindings>
@@ -88,7 +88,7 @@
                             DockPanel.Dock="Left"
                             IsChecked="{Binding ShowHiddenFiles}" />
                         <UniformGrid
-                            x:Name="Finalize"
+                            Name="Finalize"
                             HorizontalAlignment="Right"
                             Rows="1">
                             <Button
@@ -194,4 +194,46 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type dialogs:ManagedFileChooserOverwritePrompt}"
+                  TargetType="dialogs:ManagedFileChooserOverwritePrompt">
+        <Setter Property="MaxWidth" Value="400" />
+        <Setter Property="Padding" Value="10"/>
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        Padding="{TemplateBinding Padding}">
+                    <StackPanel Spacing="10">
+                        <TextBlock TextWrapping="Wrap">
+                            <TextBlock.Text>
+                                <MultiBinding>
+                                    <MultiBinding.Converter>
+                                        <cvt:StringFormatConverter />
+                                    </MultiBinding.Converter>
+                                    <DynamicResource ResourceKey="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS" />
+                                    <TemplateBinding Property="FileName" />
+                                </MultiBinding>
+                            </TextBlock.Text>
+                        </TextBlock>
+                        <StackPanel HorizontalAlignment="Right"
+                                    Spacing="10"
+                                    Orientation="Horizontal">
+                            <Button Theme="{StaticResource SolidButton}"
+                                    Content="{DynamicResource STRING_CHOOSER_DIALOG_OK}"
+                                    HorizontalContentAlignment="Center"
+                                    IsDefault="True"
+                                    Command="{Binding Confirm, RelativeSource={RelativeSource TemplatedParent}}" />
+                            <Button Content="{DynamicResource STRING_CHOOSER_DIALOG_CANCEL}"
+                                    IsCancel="True"
+                                    HorizontalContentAlignment="Center"
+                                    Command="{Binding Cancel, RelativeSource={RelativeSource TemplatedParent}}" />
+                        </StackPanel>
+                    </StackPanel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/Menu.axaml

@@ -10,84 +10,94 @@
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ScrollViewer">
-                <DockPanel>
-                    <DockPanel.Styles>
-                        <Style Selector="RepeatButton:pressed">
-                            <Setter Property="RenderTransform" Value="{x:Null}" />
-                        </Style>
-                    </DockPanel.Styles>
-                    <RepeatButton
-                        HorizontalAlignment="Stretch"
-                        HorizontalContentAlignment="Center"
-                        Background="Transparent"
-                        BorderThickness="0"
-                        Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}"
-                        CornerRadius="0"
-                        DockPanel.Dock="Top"
-                        RenderTransform="{x:Null}">
-                        <RepeatButton.IsVisible>
-                            <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}" ConverterParameter="0">
-                                <Binding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                            </MultiBinding>
-                        </RepeatButton.IsVisible>
-                        <PathIcon
-                            Width="8"
-                            Height="8"
-                            Data="{DynamicResource MenuScrollViewerUpButtonGlyph}"
-                            Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
-                    </RepeatButton>
-                    <RepeatButton
-                        HorizontalAlignment="Stretch"
-                        HorizontalContentAlignment="Center"
-                        Background="Transparent"
-                        BorderThickness="0"
-                        Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}"
-                        CornerRadius="0"
-                        DockPanel.Dock="Bottom"
-                        RenderTransform="{x:Null}">
-                        <RepeatButton.IsVisible>
-                            <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}" ConverterParameter="100">
-                                <Binding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                            </MultiBinding>
-                        </RepeatButton.IsVisible>
-                        <PathIcon
-                            Width="8"
-                            Height="8"
-                            Data="{DynamicResource MenuScrollViewerDownButtonGlyph}"
-                            Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
-                    </RepeatButton>
-                    <ScrollContentPresenter
-                        Name="PART_ContentPresenter"
-                        Margin="{TemplateBinding Padding}"
-                        HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
-                        HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
-                        VerticalSnapPointsAlignment="{TemplateBinding VerticalSnapPointsAlignment}"
-                        VerticalSnapPointsType="{TemplateBinding VerticalSnapPointsType}">
-                        <ScrollContentPresenter.GestureRecognizers>
-                            <ScrollGestureRecognizer
-                                CanHorizontallyScroll="{Binding CanHorizontallyScroll, ElementName=PART_ContentPresenter}"
-                                CanVerticallyScroll="{Binding CanVerticallyScroll, ElementName=PART_ContentPresenter}"
-                                IsScrollInertiaEnabled="{Binding IsScrollInertiaEnabled, RelativeSource={RelativeSource TemplatedParent}}" />
-                        </ScrollContentPresenter.GestureRecognizers>
-                    </ScrollContentPresenter>
-                </DockPanel>
+                <Border 
+                    ClipToBounds="True"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <DockPanel>
+                        <DockPanel.Styles>
+                            <Style Selector="RepeatButton:pressed">
+                                <Setter Property="RenderTransform" Value="{x:Null}" />
+                            </Style>
+                        </DockPanel.Styles>
+                        <RepeatButton
+                            HorizontalAlignment="Stretch"
+                            HorizontalContentAlignment="Center"
+                            Background="Transparent"
+                            BorderThickness="0"
+                            Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}"
+                            CornerRadius="0"
+                            DockPanel.Dock="Top"
+                            RenderTransform="{x:Null}">
+                            <RepeatButton.IsVisible>
+                                <MultiBinding
+                                    Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
+                                    ConverterParameter="0">
+                                    <Binding Path="VerticalScrollBarVisibility"
+                                             RelativeSource="{RelativeSource TemplatedParent}" />
+                                    <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                    <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                    <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                </MultiBinding>
+                            </RepeatButton.IsVisible>
+                            <PathIcon
+                                Width="8"
+                                Height="8"
+                                Data="{DynamicResource MenuScrollViewerUpButtonGlyph}"
+                                Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
+                        </RepeatButton>
+                        <RepeatButton
+                            HorizontalAlignment="Stretch"
+                            HorizontalContentAlignment="Center"
+                            Background="Transparent"
+                            BorderThickness="0"
+                            Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}"
+                            CornerRadius="0"
+                            DockPanel.Dock="Bottom"
+                            RenderTransform="{x:Null}">
+                            <RepeatButton.IsVisible>
+                                <MultiBinding
+                                    Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
+                                    ConverterParameter="100">
+                                    <Binding Path="VerticalScrollBarVisibility"
+                                             RelativeSource="{RelativeSource TemplatedParent}" />
+                                    <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                    <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                    <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                </MultiBinding>
+                            </RepeatButton.IsVisible>
+                            <PathIcon
+                                Width="8"
+                                Height="8"
+                                Data="{DynamicResource MenuScrollViewerDownButtonGlyph}"
+                                Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
+                        </RepeatButton>
+                        <ScrollContentPresenter
+                            Name="PART_ContentPresenter"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
+                            HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
+                            VerticalSnapPointsAlignment="{TemplateBinding VerticalSnapPointsAlignment}"
+                            VerticalSnapPointsType="{TemplateBinding VerticalSnapPointsType}">
+                            <ScrollContentPresenter.GestureRecognizers>
+                                <ScrollGestureRecognizer
+                                    CanHorizontallyScroll="{Binding CanHorizontallyScroll, ElementName=PART_ContentPresenter}"
+                                    CanVerticallyScroll="{Binding CanVerticallyScroll, ElementName=PART_ContentPresenter}"
+                                    IsScrollInertiaEnabled="{Binding IsScrollInertiaEnabled, RelativeSource={RelativeSource TemplatedParent}}" />
+                            </ScrollContentPresenter.GestureRecognizers>
+                        </ScrollContentPresenter>
+                    </DockPanel>
+                </Border>
             </ControlTemplate>
         </Setter>
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type Separator}" TargetType="Separator">
-        <Setter Property="Separator.Background" Value="{DynamicResource MenuItemSeparatorBackground}" />
-        <Setter Property="Separator.Focusable" Value="False" />
-        <Setter Property="Separator.Height" Value="{DynamicResource MenuItemSeparatorHeight}" />
-        <Setter Property="Separator.HorizontalAlignment" Value="Stretch" />
-        <Setter Property="Separator.Margin" Value="{DynamicResource MenuItemSeparatorMargin}" />
-        <Setter Property="Separator.Template">
+        <Setter Property="Background" Value="{DynamicResource MenuItemSeparatorBackground}" />
+        <Setter Property="Focusable" Value="False" />
+        <Setter Property="Height" Value="{DynamicResource MenuItemSeparatorHeight}" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="Margin" Value="{DynamicResource MenuItemSeparatorMargin}" />
+        <Setter Property="Template">
             <ControlTemplate TargetType="Separator">
                 <Border
                     Height="{TemplateBinding Height}"
@@ -105,7 +115,8 @@
     <ControlTheme x:Key="{x:Type MenuItem}" TargetType="MenuItem">
         <Setter Property="Background" Value="{DynamicResource MenuItemBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource MenuItemForeground}" />
-        <Setter Property="MenuItem.Cursor" Value="Hand" />
+        <Setter Property="CornerRadius" Value="{DynamicResource MenuItemCornerRadius}" />
+        <Setter Property="Cursor" Value="Hand" />
         <!--  Narrow padding should be used for mouse input, when non-narrow one should be used for touch input in future.  -->
         <Setter Property="Padding" Value="{DynamicResource MenuItemPadding}" />
         <Setter Property="Template">
@@ -162,7 +173,7 @@
                                 ContentTemplate="{TemplateBinding HeaderTemplate}"
                                 RecognizesAccessKey="True" />
                             <TextBlock
-                                x:Name="PART_InputGestureText"
+                                Name="PART_InputGestureText"
                                 Grid.Column="3"
                                 Margin="{DynamicResource MenuItemInputGestureTextMargin}"
                                 HorizontalAlignment="Right"
@@ -203,7 +214,7 @@
                             BorderThickness="{DynamicResource MenuFlyoutBorderThickness}"
                             BoxShadow="{DynamicResource MenuFlyoutBorderBoxShadow}"
                             CornerRadius="{DynamicResource MenuFlyoutCornerRadius}">
-                            <ScrollViewer Theme="{StaticResource MenuScrollViewer}">
+                            <ScrollViewer Theme="{StaticResource MenuScrollViewer}" CornerRadius="{DynamicResource MenuFlyoutCornerRadius}">
                                 <ItemsPresenter
                                     Name="PART_ItemsPresenter"
                                     Grid.IsSharedSizeScope="True"
@@ -223,6 +234,15 @@
             <Style Selector="^ /template/ Border#PART_LayoutRoot">
                 <Setter Property="Background" Value="{DynamicResource MenuItemPointeroverBackground}" />
             </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource MenuItemPointeroverForeground}" />
+            </Style>
+            <Style Selector="^ /template/ TextBlock#PART_InputGestureText">
+                <Setter Property="Foreground" Value="{DynamicResource MenuItemPointeroverForeground}" />
+            </Style>
+            <Style Selector="^ /template/ PathIcon#PART_ExpandIcon">
+                <Setter Property="Foreground" Value="{DynamicResource MenuItemPointeroverForeground}" />
+            </Style>
         </Style>
 
         <!--  Listen for PART_LayoutRoot:pointerover, so it will not be triggered when subitem is pressed  -->
@@ -283,7 +303,8 @@
     <ControlTheme x:Key="TopLevelMenuItem" TargetType="MenuItem">
         <Setter Property="Background" Value="{DynamicResource MenuItemBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource MenuItemForeground}" />
-        <Setter Property="MenuItem.Cursor" Value="Hand" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="CornerRadius" Value="{DynamicResource MenuItemCornerRadius}"/>
         <!--  Narrow padding should be used for mouse input, when non-narrow one should be used for touch input in future.  -->
         <Setter Property="Padding" Value="{DynamicResource MenuItemPadding}" />
         <Setter Property="Template">
@@ -327,7 +348,7 @@
                                 BorderThickness="{DynamicResource MenuFlyoutBorderThickness}"
                                 BoxShadow="{DynamicResource MenuFlyoutBorderBoxShadow}"
                                 CornerRadius="{DynamicResource MenuFlyoutCornerRadius}">
-                                <ScrollViewer Theme="{StaticResource MenuScrollViewer}">
+                                <ScrollViewer Theme="{StaticResource MenuScrollViewer}" CornerRadius="{DynamicResource MenuFlyoutCornerRadius}">
                                     <ItemsPresenter
                                         Name="PART_ItemsPresenter"
                                         Grid.IsSharedSizeScope="True"
@@ -344,6 +365,9 @@
             <Style Selector="^ /template/ Border#PART_LayoutRoot">
                 <Setter Property="Background" Value="{DynamicResource MenuItemPointeroverBackground}" />
             </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource MenuItemPointeroverForeground}" />
+            </Style>
         </Style>
 
         <!--  Listen for PART_LayoutRoot:pointerover, so it will not be triggered when subitem is pressed  -->
@@ -359,8 +383,8 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type Menu}" TargetType="Menu">
-        <Setter Property="Background" Value="Transparent" />
-        <Setter Property="Menu.ItemContainerTheme" Value="{StaticResource TopLevelMenuItem}" />
+        <Setter Property="Background" Value="{DynamicResource MenuBackground}" />
+        <Setter Property="ItemContainerTheme" Value="{StaticResource TopLevelMenuItem}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="Menu">
                 <Border

src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml

@@ -2,19 +2,33 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
+    <Design.PreviewWith>
+        <ThemeVariantScope RequestedThemeVariant="Dark">
+            <MenuFlyoutPresenter>
+                <MenuFlyoutPresenter.Items>
+                    <MenuItem Header="Menu Item 1" />
+                    <MenuItem Header="Menu Item 2" />
+                    <MenuItem Header="Menu Item 3" />
+                    <MenuItem Header="Menu Item 4" />
+                    <MenuItem Header="Menu Item 5" />
+                    <MenuItem Header="Menu Item 6" />
+                </MenuFlyoutPresenter.Items>
+            </MenuFlyoutPresenter>
+        </ThemeVariantScope>
+    </Design.PreviewWith>
+
     <ControlTheme x:Key="{x:Type MenuFlyoutPresenter}" TargetType="MenuFlyoutPresenter">
-        <Setter Property="MenuFlyoutPresenter.Background" Value="{DynamicResource MenuFlyoutBackground}" />
-        <Setter Property="MenuFlyoutPresenter.BorderBrush" Value="{DynamicResource MenuFlyoutBorderBrush}" />
-        <Setter Property="MenuFlyoutPresenter.BorderThickness" Value="{DynamicResource MenuFlyoutBorderThickness}" />
-        <Setter Property="MenuFlyoutPresenter.Padding" Value="{DynamicResource MenuFlyoutPadding}" />
-        <Setter Property="MenuFlyoutPresenter.FontSize" Value="{DynamicResource TextBlockFontSize}" />
-        <Setter Property="MenuFlyoutPresenter.FontWeight" Value="{DynamicResource TextBlockFontWeight}" />
-        <Setter Property="MenuFlyoutPresenter.Foreground" Value="{DynamicResource TextBlockDefaultForeground}" />
+        <Setter Property="Background" Value="{DynamicResource MenuFlyoutBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource MenuFlyoutBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource MenuFlyoutBorderThickness}" />
+        <Setter Property="Padding" Value="{DynamicResource MenuFlyoutPadding}" />
+        <Setter Property="FontSize" Value="{DynamicResource TextBlockFontSize}" />
+        <Setter Property="FontWeight" Value="{DynamicResource TextBlockFontWeight}" />
+        <Setter Property="Foreground" Value="{DynamicResource TextBlockDefaultForeground}" />
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
         <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
-        <Setter Property="MenuFlyoutPresenter.CornerRadius" Value="{DynamicResource MenuFlyoutCornerRadius}" />
-        <Setter Property="MenuFlyoutPresenter.Template">
+        <Setter Property="CornerRadius" Value="{DynamicResource MenuFlyoutCornerRadius}" />
+        <Setter Property="Template">
             <ControlTemplate TargetType="MenuFlyoutPresenter">
                 <Border
                     Name="LayoutRoot"
@@ -23,12 +37,12 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     BoxShadow="{DynamicResource MenuFlyoutBorderBoxShadow}"
-                    ClipToBounds="False"
                     CornerRadius="{TemplateBinding CornerRadius}"
                     UseLayoutRounding="False">
                     <ScrollViewer
-                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                         Theme="{StaticResource MenuScrollViewer}"
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                         VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                         <ItemsPresenter
                             Name="PART_ItemsPresenter"

src/Semi.Avalonia/Controls/NotificationCard.axaml

@@ -3,65 +3,78 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
     <Design.PreviewWith>
-        <NotificationCard>
-            <TextBlock Text="Hello World" />
-        </NotificationCard>
+        <ThemeVariantScope RequestedThemeVariant="Dark">
+            <StackPanel>
+                <NotificationCard />
+                <NotificationCard>
+                    Hello, Semi.Avalonia!
+                </NotificationCard>
+                <NotificationCard NotificationType="Success">
+                    <Notification Title="Welcome" Message="Hello, Semi.Avalonia!" />
+                </NotificationCard>
+                <NotificationCard NotificationType="Warning" Classes="Light">
+                    <Notification Title="Welcome" />
+                </NotificationCard>
+                <NotificationCard NotificationType="Error" Classes="Light">
+                    <Notification Message="Hello, Semi.Avalonia!" />
+                </NotificationCard>
+            </StackPanel>
+        </ThemeVariantScope>
     </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type NotificationCard}" TargetType="NotificationCard">
         <Setter Property="UseLayoutRounding" Value="True" />
-        <Setter Property="MinWidth" Value="{DynamicResource NotificationCardWidth}" />
-        <Setter Property="FontSize" Value="14" />
-        <Setter Property="Foreground" Value="{DynamicResource NotificationCardForeground}" />
-        <Setter Property="RenderTransformOrigin" Value="50%,75%" />
         <Setter Property="BorderThickness" Value="{DynamicResource NotificationCardBorderThickness}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource NotificationCardBorderBrush}" />
         <Setter Property="Background" Value="{DynamicResource NotificationCardBackground}" />
         <Setter Property="CornerRadius" Value="{DynamicResource NotificationCardCornerRadius}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="NotificationCard">
                 <LayoutTransformControl Name="PART_LayoutTransformControl" UseRenderTransform="True">
                     <Border
-                        Margin="8"
-                        BoxShadow="{DynamicResource NotificationCardBoxShadows}"
+                        Margin="{DynamicResource NotificationCardMargin}"
+                        Background="{TemplateBinding Background}"
                         CornerRadius="{TemplateBinding CornerRadius}">
                         <Border
-                            Background="{TemplateBinding Background}"
+                            Name="PART_RootBorder"
+                            Padding="{DynamicResource NotificationCardPadding}"
+                            BoxShadow="{DynamicResource NotificationCardBoxShadows}"
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}"
-                            ClipToBounds="True"
                             CornerRadius="{TemplateBinding CornerRadius}">
-                            <DockPanel>
+                            <DockPanel MinWidth="{DynamicResource NotificationCardMinWidth}">
                                 <PathIcon
                                     Name="NotificationIcon"
-                                    Width="16"
-                                    Height="16"
-                                    Margin="16,16,12,0"
+                                    Width="{DynamicResource NotificationCardIconWidth}"
+                                    Height="{DynamicResource NotificationCardIconHeight}"
+                                    Margin="{DynamicResource NotificationCardIconMargin}"
                                     VerticalAlignment="Top"
                                     IsVisible="False"
-                                    Data="{DynamicResource NotificationCardInformationIconPathData}"/>
+                                    Data="{DynamicResource NotificationCardInformationIconPathData}" />
                                 <ContentControl
                                     Name="PART_Content"
-                                    MinHeight="64"
                                     Content="{TemplateBinding Content}">
                                     <ContentControl.DataTemplates>
                                         <DataTemplate DataType="INotification">
-                                            <StackPanel Margin="0,8,8,8" Spacing="8">
-                                                <TextBlock
-                                                    FontSize="16"
-                                                    FontWeight="600"
+                                            <StackPanel Spacing="{DynamicResource NotificationCardTitleSpacing}">
+                                                <SelectableTextBlock
+                                                    Foreground="{DynamicResource NotificationCardTitleForeground}"
+                                                    FontSize="{DynamicResource NotificationCardTitleFontSize}"
+                                                    FontWeight="{DynamicResource NotificationCardTitleFontWeight}"
+                                                    IsVisible="{Binding Title, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
                                                     Text="{Binding Title}" />
-                                                <TextBlock
-                                                    MaxHeight="80"
-                                                    Margin="0,0,8,0"
-                                                    FontSize="14"
-                                                    FontWeight="400"
+                                                <SelectableTextBlock
+                                                    Foreground="{DynamicResource NotificationCardMessageForeground}"
+                                                    FontSize="{DynamicResource NotificationCardMessageFontSize}"
+                                                    FontWeight="{DynamicResource NotificationCardMessageFontWeight}"
+                                                    IsVisible="{Binding Message, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
                                                     Text="{Binding Message}"
                                                     TextWrapping="Wrap" />
                                             </StackPanel>
                                         </DataTemplate>
                                         <DataTemplate DataType="x:String">
-                                            <TextBlock
-                                                Margin="12"
+                                            <SelectableTextBlock
+                                                Foreground="{DynamicResource NotificationCardMessageForeground}"
+                                                FontSize="{DynamicResource NotificationCardMessageFontSize}"
+                                                FontWeight="{DynamicResource NotificationCardMessageFontWeight}"
                                                 Text="{Binding}"
                                                 TextWrapping="Wrap" />
                                         </DataTemplate>
@@ -153,5 +166,25 @@
             <Setter Property="Foreground" Value="{DynamicResource NotificationCardErrorIconForeground}" />
             <Setter Property="Data" Value="{DynamicResource NotificationCardErrorIconPathData}" />
         </Style>
+
+        <Style Selector="^.Light">
+            <Setter Property="Background" Value="{DynamicResource NotificationCardLightBackground}" />
+            <Style Selector="^:information /template/ Border#PART_RootBorder">
+                <Setter Property="BorderBrush" Value="{DynamicResource NotificationCardLightInformationBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource NotificationCardLightInformationBackground}"/>
+            </Style>
+            <Style Selector="^:success /template/ Border#PART_RootBorder">
+                <Setter Property="BorderBrush" Value="{DynamicResource NotificationCardLightSuccessBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource NotificationCardLightSuccessBackground}" />
+            </Style>
+            <Style Selector="^:warning /template/ Border#PART_RootBorder">
+                <Setter Property="BorderBrush" Value="{DynamicResource NotificationCardLightWarningBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource NotificationCardLightWarningBackground}" />
+            </Style>
+            <Style Selector="^:error /template/ Border#PART_RootBorder">
+                <Setter Property="BorderBrush" Value="{DynamicResource NotificationCardLightErrorBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource NotificationCardLightErrorBackground}" />
+            </Style>
+        </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/NumericUpDown.axaml

@@ -2,13 +2,12 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type NumericUpDown}" TargetType="NumericUpDown">
-        <Setter Property="NumericUpDown.VerticalAlignment" Value="Center" />
-        <Setter Property="NumericUpDown.VerticalContentAlignment" Value="Center" />
-        <Setter Property="NumericUpDown.CornerRadius" Value="{DynamicResource NumericUpDownCornerRadius}" />
-        <Setter Property="NumericUpDown.MinHeight" Value="{DynamicResource NumericUpDownDefaultHeight}" />
-        <Setter Property="NumericUpDown.Template">
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="CornerRadius" Value="{DynamicResource NumericUpDownCornerRadius}" />
+        <Setter Property="MinHeight" Value="{DynamicResource NumericUpDownDefaultHeight}" />
+        <Setter Property="Template">
             <ControlTemplate TargetType="NumericUpDown">
                 <DataValidationErrors>
                     <ButtonSpinner