Merge pull request #169 from irihitech/nightly

Update to Avalonia preview 7

.github/workflows/Pack.yml

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

.run/SC-Single.run.xml

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

README.md

@@ -11,7 +11,7 @@ Avalonia Theme inspired by Semi Design
 
 ## Installation
 ```bash
-dotnet add package Semi.Avalonia --version 0.1.0-preview5.2
+dotnet add package Semi.Avalonia --version 0.1.0-preview7
 ```
 Include Semi Design Styles in application:
 
@@ -25,8 +25,8 @@ That's all.
 
 DataGrid and ColorPicker are distributed in separated packages. Please install if you need. 
 ```bash
-dotnet add package Semi.Avalonia.ColorPicker --version 0.1.0-preview5.2
-dotnet add package Semi.Avalonia.DataGrid --version 0.1.0-preview5.2
+dotnet add package Semi.Avalonia.ColorPicker --version 0.1.0-preview7
+dotnet add package Semi.Avalonia.DataGrid --version 0.1.0-preview7
 ```
 ```xaml
 <Application.Styles>
@@ -42,15 +42,34 @@ https://github.com/irihitech/Semi.Avalonia/releases
 
 ## Version compatibility
 
-| Semi Design Version | Avalonia Version|
-|:--------------------|:---|
-| 0.1.0-preview3      |11.0-preview4|
-| 0.1.0-preview5.x    |11.0-preview5|
+| Semi Design Version | Avalonia Version |
+|:--------------------|:-----------------|
+| 0.1.0-preview3      | 11.0-preview4    |
+| 0.1.0-preview5.x    | 11.0-preview5    |
+| 0.1.0-preview6.x    | 11.0-preview6    |
+| 0.1.0-preview7.x    | 11.0-preview7    |
+
+**NOTE**
+
+Semi Avalonia theme is moving forward together with Avalonia preview versions now. So new feature/fixes are not backported to previous preview versions. If you need a feature/fix for outdated avalonia preview version, please raise an issue so we can do that for you. 
+
 
 ## TODO
 * DataValidationErrors
 * FocusAdorner
 
+## Credits
+
+[Semi Design](https://semi.design/)
+
+[Avalonia](https://github.com/AvaloniaUI/Avalonia)
+
+[FluentAvalonia](https://github.com/amwx/FluentAvalonia)
+
+[Material Design Icons](https://pictogrammers.com/library/mdi/)
+
+[CommunityToolKit](https://github.com/CommunityToolkit/dotnet)
+
 ## Screenshot
 
 Light Mode

Semi.Avalonia.sln

@@ -20,9 +20,11 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.Demo.Web", "d
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.Demo", "demo\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj", "{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.DataGrid", "src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj", "{8A90C292-8761-4F70-8E1F-EFC097FEADB3}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.DataGrid", "src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj", "{8A90C292-8761-4F70-8E1F-EFC097FEADB3}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.ColorPicker", "src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj", "{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.ColorPicker", "src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj", "{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.Demo.Android", "demo\Semi.Avalonia.Demo.Android\Semi.Avalonia.Demo.Android.csproj", "{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
@@ -54,6 +56,11 @@ Global
 		{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}.Release|Any CPU.Build.0 = Release|Any CPU
+		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -62,6 +69,7 @@ Global
 		{2ADCA724-2B6D-46EC-87F7-604D7918B89A} = {43091528-9509-43CB-A003-9C5C11E96DD6}
 		{69A2C77D-6DB7-4AE4-B179-D1F5CF5E2DF0} = {43091528-9509-43CB-A003-9C5C11E96DD6}
 		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0} = {43091528-9509-43CB-A003-9C5C11E96DD6}
+		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F} = {43091528-9509-43CB-A003-9C5C11E96DD6}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {7CA41ED3-2CED-40CC-AA21-28C3B42B1E86}

demo/Directory.Build.props

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

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

@@ -0,0 +1,11 @@
+<Application
+    x:Class="Semi.Avalonia.Demo.Android.App"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Semi.Avalonia.Demo.Android">
+    <Application.Styles>
+        <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
+        <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+        <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+    </Application.Styles>
+</Application>

demo/Semi.Avalonia.Demo.Android/App.axaml.cs

@@ -0,0 +1,27 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.ApplicationLifetimes;
+using Avalonia.Markup.Xaml;
+using Semi.Avalonia.Demo.Views;
+
+namespace Semi.Avalonia.Demo.Android;
+
+public partial class App : Application
+{
+    public override void Initialize()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+
+    public override void OnFrameworkInitializationCompleted()
+    {
+        if (ApplicationLifetime is ISingleViewApplicationLifetime single)
+        {
+            single.MainView = new MainView()
+            {
+
+            };
+        }
+        base.OnFrameworkInitializationCompleted();
+    }
+}

demo/Semi.Avalonia.Demo.Android/MainActivity.cs

@@ -0,0 +1,12 @@
+using Android.App;
+using Android.Content.PM;
+using Avalonia.Android;
+
+namespace Semi.Avalonia.Demo.Android;
+
+[Activity(Label = "Semi.Avalonia.Demo.Android", Icon = "@drawable/Icon", Theme = "@style/MyTheme.NoActionBar",
+    LaunchMode = LaunchMode.SingleTop, ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.ScreenSize)]
+public class MainActivity : AvaloniaMainActivity
+{
+    
+}

demo/Semi.Avalonia.Demo.Android/Properties/AndroidManifest.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:installLocation="auto">
+	<uses-permission android:name="android.permission.INTERNET" />
+	<application android:label="Semi.Avalonia" android:icon="@drawable/Icon" />
+</manifest>

demo/Semi.Avalonia.Demo.Android/Resources/drawable/splash_screen.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+  <item>
+    <color android:color="@color/splash_background"/>
+  </item>
+
+  <item android:drawable="@drawable/Icon"
+        android:width="120dp"
+        android:height="120dp"
+        android:gravity="center" />
+
+</layer-list>

demo/Semi.Avalonia.Demo.Android/Resources/values/colors.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <color name="splash_background">#FFFFFF</color>
+</resources>

demo/Semi.Avalonia.Demo.Android/Resources/values/styles.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<resources>
+
+  <style name="MyTheme">
+  </style>
+
+  <style name="MyTheme.NoActionBar" parent="@style/Theme.AppCompat.NoActionBar">
+    <item name="android:windowActionBar">false</item>
+    <item name="android:windowNoTitle">true</item>
+  </style>
+
+  <style name="MyTheme.Splash" parent ="MyTheme.NoActionBar">
+    <item name="android:windowBackground">@drawable/splash_screen</item>
+    <item name="android:windowContentOverlay">@null</item>
+  </style>
+
+</resources>

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

@@ -0,0 +1,25 @@
+<Project Sdk="Microsoft.NET.Sdk">
+    <PropertyGroup>
+        <OutputType>Exe</OutputType>
+        <TargetFramework>net7.0-android</TargetFramework>
+        <SupportedOSPlatformVersion>21</SupportedOSPlatformVersion>
+        <ApplicationId>com.irihitech.Semi.Avalonia</ApplicationId>
+        <ApplicationVersion>1</ApplicationVersion>
+        <ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
+        <AndroidPackageFormat>apk</AndroidPackageFormat>
+        <AndroidEnableProfiledAot>False</AndroidEnableProfiledAot>
+        <EmbedAssembliesIntoApk>true</EmbedAssembliesIntoApk>
+        <RootNamespace>Semi.Avalonia.Demo.Android</RootNamespace>
+    </PropertyGroup>
+
+    <Import Project="../Directory.Build.props" />
+
+    <ItemGroup>
+      <PackageReference Include="Avalonia.Android" Version="$(AvaloniaVersion)" />
+    </ItemGroup>
+
+    <ItemGroup>
+      <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
+    </ItemGroup>
+    
+</Project>

demo/Semi.Avalonia.Demo.Android/SplashActivity.cs

@@ -0,0 +1,22 @@
+using Android.App;
+using Android.Content;
+using Avalonia;
+using Avalonia.Android;
+using Application = Android.App.Application;
+
+namespace Semi.Avalonia.Demo.Android;
+
+[Activity(Theme = "@style/MyTheme.Splash", MainLauncher = true, NoHistory = true)]
+public class SplashActivity: AvaloniaSplashActivity<App>
+{
+    protected override AppBuilder CustomizeAppBuilder(AppBuilder builder)
+    {
+        return base.CustomizeAppBuilder(builder);
+    }
+
+    protected override void OnResume()
+    {
+        base.OnResume();
+        StartActivity(new Intent(Application.Context, typeof(MainActivity)));
+    }
+}

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

@@ -0,0 +1,11 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Android.Views.MainView"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    Welcome to Avalonia!
+</UserControl>

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

@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Android.Views;
+
+public partial class MainView : UserControl
+{
+    public MainView()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}

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

@@ -16,13 +16,13 @@
     </PropertyGroup>
     
     <ItemGroup>
-        <RdXmlFile Include="rd.xml"/>
+        <RdXmlFile Include="rd.xml" />
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Desktop" Version="11.0.0-preview5" />
+        <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="11.0.0-preview5" />
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
     </ItemGroup>
 
     <ItemGroup>

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

@@ -10,7 +10,7 @@ internal partial class Program
 {
     private static void Main(string[] args)
     {
-        BuildAvaloniaApp().SetupBrowserApp("out");
+        BuildAvaloniaApp(); //.SetupBrowserApp("out");
     }
 
     public static AppBuilder BuildAvaloniaApp()

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

@@ -19,8 +19,8 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Browser" Version="11.0.0-preview5" />
-        <PackageReference Include="Avalonia.Themes.Fluent" Version="11.0.0-preview5" />
+        <PackageReference Include="Avalonia.Browser" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia.Themes.Fluent" Version="$(AvaloniaVersion)" />
     </ItemGroup>
 
     <ItemGroup>

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

@@ -21,8 +21,8 @@
                         HorizontalAlignment="Stretch"
                         Background="{TemplateBinding Background}"
                         CornerRadius="6" />
-                    <Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *, *, *, *, *">
-                        <!--  Row 0-1 ResourceKey  -->
+                    <Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *, *, *, *, *, *">
+                        <!--  Row 0-1-2 ResourceKey  -->
                         <TextBlock
                             Grid.Column="0"
                             Grid.ColumnSpan="2"
@@ -48,23 +48,43 @@
                                 Data="{StaticResource CopyIcon}"
                                 Foreground="{Binding $parent[Button].Foreground}" />
                         </Button>
-
-                        <!--  Row 2-3 HEX  -->
-                        <TextBlock
+                        <SelectableTextBlock
                             Grid.Row="2"
                             Grid.Column="0"
+                            VerticalAlignment="Center"
+                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            Text="{TemplateBinding ColorResourceKey}" />
+                        <Button
+                            Grid.Row="2"
+                            Grid.Column="1"
+                            Classes="Tertiary"
+                            Command="{Binding $parent[controls:ColorDetailControl].Copy}"
+                            CommandParameter="{x:Static controls:ColorDetailControl.KEY_ColorResourceKey}"
+                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            Theme="{DynamicResource BorderlessButton}">
+                            <PathIcon
+                                Width="12"
+                                Height="12"
+                                Data="{StaticResource CopyIcon}"
+                                Foreground="{Binding $parent[Button].Foreground}" />
+                        </Button>
+
+                        <!--  Row 3-4 HEX  -->
+                        <TextBlock
+                            Grid.Row="3"
+                            Grid.Column="0"
                             Grid.ColumnSpan="2"
                             Margin="4,8,0,0"
                             VerticalAlignment="Center"
                             Classes="Tertiary"
                             Text="ARGB" />
                         <SelectableTextBlock
-                            Grid.Row="3"
+                            Grid.Row="4"
                             Grid.Column="0"
                             VerticalAlignment="Center"
                             Text="{TemplateBinding Hex}" />
                         <Button
-                            Grid.Row="3"
+                            Grid.Row="4"
                             Grid.Column="1"
                             Classes="Tertiary"
                             Command="{Binding $parent[controls:ColorDetailControl].Copy}"
@@ -77,9 +97,9 @@
                                 Foreground="{Binding $parent[Button].Foreground}" />
                         </Button>
 
-                        <!--  Row 4-5 Opacity  -->
+                        <!--  Row 5-6 Opacity  -->
                         <TextBlock
-                            Grid.Row="4"
+                            Grid.Row="5"
                             Grid.Column="0"
                             Grid.ColumnSpan="2"
                             Margin="4,8,0,0"
@@ -87,12 +107,12 @@
                             Classes="Tertiary"
                             Text="Opacity" />
                         <SelectableTextBlock
-                            Grid.Row="5"
+                            Grid.Row="6"
                             Grid.Column="0"
                             VerticalAlignment="Center"
                             Text="{TemplateBinding OpacityNumber}" />
                         <Button
-                            Grid.Row="5"
+                            Grid.Row="6"
                             Grid.Column="1"
                             Classes="Tertiary"
                             Command="{Binding $parent[controls:ColorDetailControl].Copy}"

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

@@ -1,5 +1,6 @@
 using System.Globalization;
 using Avalonia;
+using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
 using Avalonia.Input.Platform;
 using Avalonia.Media;
@@ -12,6 +13,7 @@ public class ColorDetailControl: TemplatedControl
     public const string KEY_ResourceKey = "ResourceKey";
     public const string KEY_Hex = "Hex";
     public const string KEY_Opacity = "Opacity";
+    public const string KEY_ColorResourceKey = "ColorResourceKey";
     
     public static readonly StyledProperty<string?> ResourceKeyProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
         nameof(ResourceKey));
@@ -30,6 +32,15 @@ public class ColorDetailControl: TemplatedControl
         set => SetValue(ResourceNameProperty, value);
     }
 
+    public static readonly StyledProperty<string?> ColorResourceKeyProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
+        nameof(ColorResourceKey));
+
+    public string? ColorResourceKey
+    {
+        get => GetValue(ColorResourceKeyProperty);
+        set => SetValue(ColorResourceKeyProperty, value);
+    }
+
     public static readonly DirectProperty<ColorDetailControl, string?> HexProperty = AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(
         nameof(Hex), o => o.Hex);
     private string? _hex;
@@ -49,6 +60,8 @@ public class ColorDetailControl: TemplatedControl
     }
     
     
+    
+    
     static ColorDetailControl()
     {
         BackgroundProperty.Changed.AddClassHandler<ColorDetailControl>((o, e) => o.OnBackgroundChanged(e));
@@ -77,15 +90,18 @@ public class ColorDetailControl: TemplatedControl
                     break;
                 case KEY_Opacity: text = OpacityNumber;
                     break;
+                case KEY_ColorResourceKey: text = ColorResourceKey;
+                    break;
                 default: text = string.Empty; break;
             }
         }
 
-        if (Application.Current is { Clipboard: { } c })
+        var toplevel = TopLevel.GetTopLevel(this);
+        if (toplevel?.Clipboard is { } c)
         {
             await c.SetTextAsync(text??string.Empty);
         }
-        
+
     }
     
 }

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

@@ -19,7 +19,7 @@
                         Theme="{DynamicResource TitleTextBlock}" />
                     <TabControl Grid.Row="1">
                         <TabItem Header="Light">
-                            <DataGrid IsReadOnly="True" Items="{TemplateBinding LightColors}">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightColors}">
                                 <DataGrid.Columns>
                                     <DataGridTemplateColumn Width="70" Header="Color">
                                         <DataGridTemplateColumn.CellTemplate>
@@ -77,7 +77,7 @@
                             </DataGrid>
                         </TabItem>
                         <TabItem Header="Dark">
-                            <DataGrid IsReadOnly="True" Items="{TemplateBinding DarkColors}">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkColors}">
                                 <DataGrid.Columns>
                                     <DataGridTemplateColumn Width="70" Header="Color">
                                         <DataGridTemplateColumn.CellTemplate>

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

@@ -14,19 +14,19 @@ public class FunctionalColorGroupControl: TemplatedControl
         set => SetValue(TitleProperty, value);
     }
     
-    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable> LightColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable>(
+    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
+    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>(
+    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
+    private IEnumerable? _darkColors;
+    public IEnumerable? DarkColors
     {
         get => _darkColors;
         set => SetAndRaise(DarkColorsProperty, ref _darkColors, value);

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

@@ -20,7 +20,7 @@
             </Style>
         </StackPanel.Styles>
         <AutoCompleteBox
-            Items="{Binding States}"
+            ItemsSource="{Binding States}"
             ValueMemberBinding="{Binding Name}"
             Watermark="Please select a State">
             <AutoCompleteBox.ItemTemplate>
@@ -31,7 +31,7 @@
         </AutoCompleteBox>
         <AutoCompleteBox
             Classes="Large"
-            Items="{Binding States}"
+            ItemsSource="{Binding States}"
             ValueMemberBinding="{ReflectionBinding Name}">
             <AutoCompleteBox.ItemTemplate>
                 <DataTemplate DataType="local:StateData">
@@ -41,7 +41,7 @@
         </AutoCompleteBox>
         <AutoCompleteBox
             Classes="Small"
-            Items="{Binding States}"
+            ItemsSource="{Binding States}"
             ValueMemberBinding="{ReflectionBinding Name}">
             <AutoCompleteBox.ItemTemplate>
                 <DataTemplate DataType="local:StateData">
@@ -51,7 +51,7 @@
         </AutoCompleteBox>
         <AutoCompleteBox
             Classes="Bordered"
-            Items="{Binding States}"
+            ItemsSource="{Binding States}"
             ValueMemberBinding="{ReflectionBinding Name}">
             <AutoCompleteBox.ItemTemplate>
                 <DataTemplate DataType="local:StateData">
@@ -61,7 +61,7 @@
         </AutoCompleteBox>
         <AutoCompleteBox
             IsEnabled="False"
-            Items="{Binding States}"
+            ItemsSource="{Binding States}"
             ValueMemberBinding="{ReflectionBinding Name}"
             Watermark="Disabled">
             <AutoCompleteBox.ItemTemplate>

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

@@ -45,7 +45,7 @@
                 Danger
             </Button>
         </StackPanel>
-        <TextBlock>DropdownButton</TextBlock>
+        <TextBlock>DropDownButton</TextBlock>
         <StackPanel Orientation="Horizontal" Spacing="8">
             <DropDownButton Content="Submit">
                 <DropDownButton.Flyout>
@@ -55,7 +55,7 @@
                     </MenuFlyout>
                 </DropDownButton.Flyout>
             </DropDownButton>
-            <DropDownButton Content="Submit" Theme="{DynamicResource SolidDropdownButton}">
+            <DropDownButton Content="Submit" Theme="{DynamicResource SolidDropDownButton}">
                 <DropDownButton.Flyout>
                     <MenuFlyout Placement="BottomEdgeAlignedRight">
                         <MenuItem Header="Submit All" />
@@ -63,7 +63,7 @@
                     </MenuFlyout>
                 </DropDownButton.Flyout>
             </DropDownButton>
-            <DropDownButton Content="Submit" Theme="{DynamicResource BorderlessDropdownButton}">
+            <DropDownButton Content="Submit" Theme="{DynamicResource BorderlessDropDownButton}">
                 <DropDownButton.Flyout>
                     <MenuFlyout Placement="BottomEdgeAlignedRight">
                         <MenuItem Header="Submit All" />

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

@@ -9,6 +9,7 @@
     mc:Ignorable="d">
     <StackPanel HorizontalAlignment="Left" Spacing="20">
         <CalendarDatePicker />
+        <CalendarDatePicker Width="500" />
         <CalendarDatePicker Classes="Large" />
         <CalendarDatePicker Classes="Small" />
         <CalendarDatePicker

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

@@ -14,6 +14,7 @@
         <Style Selector="TextBlock">
             <Setter Property="HorizontalAlignment" Value="Center" />
             <Setter Property="VerticalAlignment" Value="Center" />
+            <Setter Property="Foreground" Value="#1C1F23" />
         </Style>
     </UserControl.Styles>
     <StackPanel Spacing="20">

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

@@ -7,18 +7,146 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Spacing="20">
-        <CheckBox>Unchecked</CheckBox>
-        <CheckBox IsEnabled="False">Unchecked</CheckBox>
-        <CheckBox IsChecked="True">Checked</CheckBox>
-        <CheckBox IsChecked="True" IsEnabled="False">Checked</CheckBox>
-        <CheckBox IsChecked="{x:Null}" IsThreeState="True">Indeterminate</CheckBox>
-        <CheckBox
-            IsChecked="{x:Null}"
-            IsEnabled="False"
-            IsThreeState="True">
-            Indeterminate
-        </CheckBox>
-        <CheckBox Width="120">Checkbox should wrap its text</CheckBox>
-    </StackPanel>
-</UserControl>
+    <ScrollViewer HorizontalScrollBarVisibility="Auto">
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
+            <TextBlock Text="CheckBox" />
+            <StackPanel Orientation="Horizontal">
+                <CheckBox>Unchecked</CheckBox>
+                <CheckBox IsChecked="True">Checked</CheckBox>
+                <CheckBox IsChecked="{x:Null}" IsThreeState="True">Indeterminate</CheckBox>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <CheckBox IsEnabled="False">Unchecked</CheckBox>
+                <CheckBox IsChecked="True" IsEnabled="False">Checked</CheckBox>
+                <CheckBox
+                    IsChecked="{x:Null}"
+                    IsEnabled="False"
+                    IsThreeState="True">
+                    Indeterminate
+                </CheckBox>
+            </StackPanel>
+            <CheckBox Width="120" HorizontalAlignment="Left">Checkbox should wrap its text</CheckBox>
+            <TextBlock Margin="0,16" Text="CardCheckBox" />
+            <StackPanel Orientation="Horizontal">
+                <CheckBox Width="300" Theme="{DynamicResource CardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="True"
+                    Theme="{DynamicResource CardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="{x:Null}"
+                    IsThreeState="True"
+                    Theme="{DynamicResource CardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <CheckBox
+                    Width="300"
+                    IsEnabled="False"
+                    Theme="{DynamicResource CardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="True"
+                    IsEnabled="False"
+                    Theme="{DynamicResource CardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="{x:Null}"
+                    IsEnabled="False"
+                    IsThreeState="True"
+                    Theme="{DynamicResource CardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+            </StackPanel>
+            <TextBlock Margin="0,16" Text="PureCardCheckBox" />
+            <StackPanel Orientation="Horizontal">
+                <CheckBox Width="300" Theme="{DynamicResource PureCardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="True"
+                    Theme="{DynamicResource PureCardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="{x:Null}"
+                    IsEnabled="True"
+                    IsThreeState="True"
+                    Theme="{DynamicResource PureCardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <CheckBox
+                    Width="300"
+                    IsEnabled="False"
+                    Theme="{DynamicResource PureCardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="True"
+                    IsEnabled="False"
+                    Theme="{DynamicResource PureCardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="{x:Null}"
+                    IsEnabled="False"
+                    IsThreeState="True"
+                    Theme="{DynamicResource PureCardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+            </StackPanel>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>

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

@@ -2,6 +2,7 @@
     x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker;assembly=Semi.Avalonia.ColorPicker"
     xmlns:controls="using:Avalonia.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
@@ -15,11 +16,7 @@
             Spacing="20">
             <ColorView ColorSpectrumShape="Ring" />
             <ColorView ColorSpectrumShape="Box" />
-            <ColorView>
-                <ColorView.Palette>
-                    <controls:MaterialColorPalette />
-                </ColorView.Palette>
-            </ColorView>
+            <ColorView Palette="{DynamicResource SemiColorPalette}" />
         </StackPanel>
         <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
             <ColorPicker ColorSpectrumShape="Ring">
@@ -29,7 +26,7 @@
             </ColorPicker>
             <ColorPicker ColorSpectrumShape="Box">
                 <ColorPicker.Palette>
-                    <controls:MaterialColorPalette />
+                    <colorPicker:SemiColorLightPalette />
                 </ColorPicker.Palette>
             </ColorPicker>
         </StackPanel>

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

@@ -143,7 +143,7 @@
                     Name="dataGridEdit"
                     Grid.Row="1"
                     Margin="12"
-                    Items="{Binding DataGrid3Source}">
+                    ItemsSource="{Binding DataGrid3Source}">
                     <DataGrid.Columns>
                         <DataGridTextColumn
                             Width="2*"

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

@@ -38,7 +38,7 @@ public partial class DataGridDemo : UserControl
                 collectionView1.SortDescriptions.Add(dataGridSortDescription);
             }
         };
-        dg1.Items = collectionView1;
+        dg1.ItemsSource = collectionView1;
 
         var dg2 = this.Get<DataGrid>("dataGridGrouping");
         dg2.IsReadOnly = true;
@@ -46,7 +46,7 @@ public partial class DataGridDemo : UserControl
         var collectionView2 = new DataGridCollectionView(Countries.All);
         collectionView2.GroupDescriptions.Add(new DataGridPathGroupDescription("Region"));
 
-        dg2.Items = collectionView2;
+        dg2.ItemsSource = collectionView2;
 
         var dg3 = this.Get<DataGrid>("dataGridEdit");
         dg3.IsReadOnly = false;

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

@@ -19,7 +19,7 @@
                 <Button Content="Hello Avalonia World!" />
             </Expander>
         </StackPanel>
-        <Grid ColumnDefinitions="* *">
+        <Grid ColumnDefinitions="*, *">
             <Expander
                 Height="200"
                 ExpandDirection="Right"

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

@@ -15,8 +15,8 @@
     <Grid
         HorizontalAlignment="Center"
         VerticalAlignment="Center"
-        ColumnDefinitions="* * * * *"
-        RowDefinitions="* * * * *">
+        ColumnDefinitions="*, *, *, *, *"
+        RowDefinitions="*, *, *, *, *">
         <Button
             Grid.Row="0"
             Grid.Column="1"

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

@@ -27,5 +27,15 @@
             Maximum="100"
             Minimum="0"
             ShowButtonSpinner="False" />
+        <NumericUpDown
+            Width="200"
+            Classes="Large"
+            Maximum="100"
+            Minimum="0" />
+        <NumericUpDown
+            Width="200"
+            Classes="Small"
+            Maximum="100"
+            Minimum="0" />
     </StackPanel>
 </UserControl>

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

@@ -47,27 +47,101 @@
                         <RadioButton Theme="{StaticResource ButtonRadioButton}">选项 2</RadioButton>
                     </StackPanel>
                 </Border>
-                <RadioButton Margin="4" Theme="{StaticResource CardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">Option 1</TextBlock>
-                        <TextBlock Classes="Tertiary">Description 1</TextBlock>
-                    </StackPanel>
-                </RadioButton>
-                <RadioButton
-                    Margin="4"
-                    IsChecked="True"
-                    Theme="{StaticResource CardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">Option 2</TextBlock>
-                        <TextBlock Classes="Tertiary">Description 2</TextBlock>
-                    </StackPanel>
-                </RadioButton>
+                <StackPanel Orientation="Horizontal">
+                    <RadioButton Margin="4" Theme="{StaticResource CardRadioButton}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 1</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 1</TextBlock>
+                        </StackPanel>
+                    </RadioButton>
+                    <RadioButton
+                        Margin="4"
+                        IsChecked="True"
+                        Theme="{StaticResource CardRadioButton}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 2</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 2</TextBlock>
+                        </StackPanel>
+                    </RadioButton>
+                </StackPanel>
+                <StackPanel Orientation="Horizontal">
+                    <RadioButton Margin="4" Theme="{StaticResource PureCardRadioButton}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 1</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 1</TextBlock>
+                        </StackPanel>
+                    </RadioButton>
+                    <RadioButton
+                        Margin="4"
+                        IsChecked="True"
+                        Theme="{StaticResource PureCardRadioButton}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 2</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 2</TextBlock>
+                        </StackPanel>
+                    </RadioButton>
+                </StackPanel>
             </StackPanel>
-            <StackPanel Orientation="Horizontal" />
             <StackPanel Orientation="Horizontal">
-                <CheckBox Margin="0,0,8,0">Avalonia</CheckBox>
-                <CheckBox Margin="0,0,8,0" IsChecked="True">WPF</CheckBox>
-                <CheckBox IsChecked="{x:Null}" IsThreeState="True">UWP</CheckBox>
+                <StackPanel Orientation="Horizontal">
+                    <CheckBox Margin="0,0,8,0">Avalonia</CheckBox>
+                    <CheckBox Margin="0,0,8,0" IsChecked="True">WPF</CheckBox>
+                    <CheckBox IsChecked="{x:Null}" IsThreeState="True">UWP</CheckBox>
+                </StackPanel>
+                <StackPanel Orientation="Horizontal">
+                    <CheckBox Margin="4" Theme="{StaticResource CardCheckBox}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 1</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 1</TextBlock>
+                        </StackPanel>
+                    </CheckBox>
+                    <CheckBox
+                        Margin="4"
+                        IsChecked="True"
+                        Theme="{StaticResource CardCheckBox}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 2</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 2</TextBlock>
+                        </StackPanel>
+                    </CheckBox>
+                    <CheckBox
+                        Margin="4"
+                        IsChecked="{x:Null}"
+                        IsThreeState="True"
+                        Theme="{StaticResource CardCheckBox}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 3</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 3</TextBlock>
+                        </StackPanel>
+                    </CheckBox>
+                </StackPanel>
+                <StackPanel Orientation="Horizontal">
+                    <CheckBox Margin="4" Theme="{StaticResource PureCardCheckBox}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 1</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 1</TextBlock>
+                        </StackPanel>
+                    </CheckBox>
+                    <CheckBox
+                        Margin="4"
+                        IsChecked="True"
+                        Theme="{StaticResource PureCardCheckBox}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 2</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 2</TextBlock>
+                        </StackPanel>
+                    </CheckBox>
+                    <CheckBox
+                        Margin="4"
+                        IsChecked="{x:Null}"
+                        IsThreeState="True"
+                        Theme="{StaticResource PureCardCheckBox}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 3</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 3</TextBlock>
+                        </StackPanel>
+                    </CheckBox>
+                </StackPanel>
             </StackPanel>
             <StackPanel Orientation="Horizontal">
                 <ToggleSwitch
@@ -96,12 +170,16 @@
                 </TabItem>
             </TabControl>
             <StackPanel Orientation="Horizontal" Spacing="20">
-                <ComboBox Width="200" PlaceholderText="Please Select" />
+                <ComboBox Width="200" PlaceholderText="Please Select">
+                    <ComboBoxItem>Item 1</ComboBoxItem>
+                    <ComboBoxItem>Item 2</ComboBoxItem>
+                    <ComboBoxItem>Item 3</ComboBoxItem>
+                </ComboBox>
                 <DatePicker />
                 <TimePicker />
                 <CalendarDatePicker />
             </StackPanel>
-            <Grid ColumnDefinitions="* * *">
+            <Grid ColumnDefinitions="*, *, *">
                 <Border Theme="{StaticResource CardBorder}">
                     <TextBlock>Card</TextBlock>
                 </Border>
@@ -153,4 +231,4 @@
             </StackPanel>
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>

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

@@ -46,6 +46,7 @@
                             TextWrapping="Wrap" />
                         <controls:ColorDetailControl
                             Background="{Binding SelectedColor.Brush}"
+                            ColorResourceKey="{Binding SelectedColor.ColorResourceKey}"
                             IsVisible="{Binding SelectedColor, Converter={x:Static ObjectConverters.IsNotNull}}"
                             ResourceKey="{Binding SelectedColor.ResourceKey}"
                             ResourceName="{Binding SelectedColor.ColorDisplayName}" />
@@ -62,7 +63,7 @@
                         Theme="{DynamicResource TitleTextBlock}" />
                     <TabControl>
                         <TabItem Header="Light">
-                            <ItemsControl Margin="16" Items="{Binding LightLists}">
+                            <ItemsControl Margin="16" ItemsSource="{Binding LightLists}">
                                 <ItemsControl.ItemsPanel>
                                     <ItemsPanelTemplate>
                                         <WrapPanel Orientation="Horizontal" />
@@ -70,7 +71,7 @@
                                 </ItemsControl.ItemsPanel>
                                 <ItemsControl.ItemTemplate>
                                     <DataTemplate x:DataType="viewModels:ColorListViewModel">
-                                        <ItemsControl Margin="4,0" Items="{Binding Color}">
+                                        <ItemsControl Margin="4,0" ItemsSource="{Binding Color}">
                                             <ItemsControl.ItemTemplate>
                                                 <DataTemplate x:DataType="viewModels:ColorItemViewModel">
                                                     <controls:ColorItemControl
@@ -86,7 +87,7 @@
                             </ItemsControl>
                         </TabItem>
                         <TabItem Header="Dark">
-                            <ItemsControl Margin="16" Items="{Binding DarkLists}">
+                            <ItemsControl Margin="16" ItemsSource="{Binding DarkLists}">
                                 <ItemsControl.ItemsPanel>
                                     <ItemsPanelTemplate>
                                         <WrapPanel Orientation="Horizontal" />
@@ -94,7 +95,7 @@
                                 </ItemsControl.ItemsPanel>
                                 <ItemsControl.ItemTemplate>
                                     <DataTemplate x:DataType="viewModels:ColorListViewModel">
-                                        <ItemsControl Margin="4,0" Items="{Binding Color}">
+                                        <ItemsControl Margin="4,0" ItemsSource="{Binding Color}">
                                             <ItemsControl.ItemTemplate>
                                                 <DataTemplate x:DataType="viewModels:ColorItemViewModel">
                                                     <controls:ColorItemControl
@@ -111,7 +112,7 @@
                         </TabItem>
                     </TabControl>
 
-                    <ItemsControl Items="{Binding FunctionalColors}">
+                    <ItemsControl ItemsSource="{Binding FunctionalColors}">
                         <ItemsControl.ItemTemplate>
                             <DataTemplate>
                                 <!--    -->

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

@@ -5,73 +5,163 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
-    <StackPanel HorizontalAlignment="Left" Spacing="20">
-        <TextBlock Text="Radio Buttons" />
-        <StackPanel>
-            <RadioButton>111</RadioButton>
-            <RadioButton>222</RadioButton>
-            <RadioButton>333</RadioButton>
-        </StackPanel>
-        <TextBlock Text="Radio Button as Button" />
-        <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+    <ScrollViewer>
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
+            <TextBlock Text="Radio Buttons" />
             <StackPanel Orientation="Horizontal">
-                <RadioButton Classes="Small" Theme="{DynamicResource ButtonRadioButton}">小1</RadioButton>
-                <RadioButton Classes="Small" Theme="{DynamicResource ButtonRadioButton}">小2</RadioButton>
+                <RadioButton>Unchecked</RadioButton>
+                <RadioButton IsChecked="True">Checked</RadioButton>
             </StackPanel>
-        </Border>
-        <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
             <StackPanel Orientation="Horizontal">
-                <RadioButton Theme="{DynamicResource ButtonRadioButton}">默认1</RadioButton>
-                <RadioButton Theme="{DynamicResource ButtonRadioButton}">默认2</RadioButton>
+                <RadioButton IsEnabled="False">Unchecked</RadioButton>
+                <RadioButton IsChecked="True" IsEnabled="False">Checked</RadioButton>
             </StackPanel>
-        </Border>
-        <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+            <TextBlock Text="Radio Button as Button" />
             <StackPanel Orientation="Horizontal">
-                <RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大1</RadioButton>
-                <RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大2</RadioButton>
+                <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                    <StackPanel Orientation="Horizontal">
+                        <RadioButton Classes="Small" Theme="{DynamicResource ButtonRadioButton}">小1</RadioButton>
+                        <RadioButton
+                            Classes="Small"
+                            Theme="{DynamicResource ButtonRadioButton}"
+                            IsChecked="True">
+                            小2
+                        </RadioButton>
+                    </StackPanel>
+                </Border>
+                <Border Margin="8 0" HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                    <StackPanel Orientation="Horizontal">
+                        <RadioButton
+                            Classes="Small"
+                            Theme="{DynamicResource ButtonRadioButton}"
+                            IsEnabled="False">
+                            小1
+                        </RadioButton>
+                        <RadioButton
+                            Classes="Small"
+                            Theme="{DynamicResource ButtonRadioButton}"
+                            IsChecked="True"
+                            IsEnabled="False">
+                            小2
+                        </RadioButton>
+                    </StackPanel>
+                </Border>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                    <StackPanel Orientation="Horizontal">
+                        <RadioButton Theme="{DynamicResource ButtonRadioButton}">默认1</RadioButton>
+                        <RadioButton Theme="{DynamicResource ButtonRadioButton}" IsChecked="True">默认2</RadioButton>
+                    </StackPanel>
+                </Border>
+                <Border Margin="8 0" HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                    <StackPanel Orientation="Horizontal">
+                        <RadioButton Theme="{DynamicResource ButtonRadioButton}" IsEnabled="False">默认1</RadioButton>
+                        <RadioButton
+                            Theme="{DynamicResource ButtonRadioButton}"
+                            IsEnabled="False"
+                            IsChecked="True">
+                            默认2
+                        </RadioButton>
+                    </StackPanel>
+                </Border>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                    <StackPanel Orientation="Horizontal">
+                        <RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大1</RadioButton>
+                        <RadioButton
+                            Classes="Large"
+                            Theme="{DynamicResource ButtonRadioButton}"
+                            IsChecked="True">
+                            大2
+                        </RadioButton>
+                    </StackPanel>
+                </Border>
+                <Border Margin="8 0" HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                    <StackPanel Orientation="Horizontal">
+                        <RadioButton
+                            Classes="Large"
+                            Theme="{DynamicResource ButtonRadioButton}"
+                            IsEnabled="False">
+                            大1
+                        </RadioButton>
+                        <RadioButton
+                            Classes="Large"
+                            Theme="{DynamicResource ButtonRadioButton}"
+                            IsChecked="True"
+                            IsEnabled="False">
+                            大2
+                        </RadioButton>
+                    </StackPanel>
+                </Border>
+            </StackPanel>
+            <TextBlock Text="Radio Button as Card" />
+            <StackPanel Orientation="Horizontal">
+                <RadioButton Width="300" Theme="{DynamicResource CardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </RadioButton>
+                <RadioButton IsChecked="True" Width="300" Theme="{DynamicResource CardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </RadioButton>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <RadioButton IsEnabled="False" Width="300" Theme="{DynamicResource CardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </RadioButton>
+                <RadioButton 
+                    IsChecked="True"
+                    IsEnabled="False"
+                    Width="300"
+                    Theme="{DynamicResource CardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </RadioButton>
+            </StackPanel>
+            <TextBlock Text="Radio Button as Pure Card" />
+            <StackPanel Orientation="Horizontal">
+                <RadioButton Width="300" Theme="{DynamicResource PureCardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </RadioButton>
+                <RadioButton IsChecked="True" Width="300" Theme="{DynamicResource PureCardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </RadioButton>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <RadioButton IsEnabled="False" Width="300" Theme="{DynamicResource PureCardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </RadioButton>
+                <RadioButton
+                    IsChecked="True"
+                    IsEnabled="False"
+                    Width="300"
+                    Theme="{DynamicResource PureCardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </RadioButton>
             </StackPanel>
-        </Border>
-        <TextBlock Text="Radio Button as Card" />
-        <StackPanel Orientation="Horizontal">
-            <RadioButton Width="300" Theme="{DynamicResource CardRadioButton}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </RadioButton>
-            <RadioButton Width="300" Theme="{DynamicResource CardRadioButton}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </RadioButton>
-            <RadioButton Width="300" Theme="{DynamicResource CardRadioButton}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </RadioButton>
         </StackPanel>
-        <TextBlock Text="Radio Button as Pure Card" />
-        <StackPanel Orientation="Horizontal">
-            <RadioButton Width="300" Theme="{DynamicResource PureCardRadioButton}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </RadioButton>
-            <RadioButton Width="300" Theme="{DynamicResource PureCardRadioButton}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </RadioButton>
-            <RadioButton Width="300" Theme="{DynamicResource PureCardRadioButton}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </RadioButton>
-        </StackPanel>
-    </StackPanel>
-</UserControl>
+    </ScrollViewer>
+</UserControl>

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

@@ -62,6 +62,15 @@
                 TickFrequency="10"
                 TickPlacement="TopLeft"
                 Value="0" />
+            <Slider
+                Height="300"
+                IsSnapToTickEnabled="True"
+                Maximum="100"
+                Minimum="0"
+                Orientation="Vertical"
+                TickFrequency="10"
+                TickPlacement="Outside"
+                Value="0" />
             <Slider
                 Height="300"
                 Classes="ToolTip"
@@ -71,6 +80,22 @@
                 TickFrequency="10"
                 TickPlacement="TopLeft"
                 Value="0" />
+            <Slider
+                Height="300"
+                IsDirectionReversed="True"
+                Maximum="100"
+                Minimum="0"
+                Orientation="Vertical"
+                TickFrequency="10"
+                Value="0" />
+            <Slider
+                Height="300"
+                IsEnabled="False"
+                Maximum="100"
+                Minimum="0"
+                Orientation="Vertical"
+                TickFrequency="10"
+                Value="30" />
         </StackPanel>
     </StackPanel>
 </UserControl>

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

@@ -1,11 +1,16 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.TextBlockDemo" xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="600"
-    d:DesignWidth="800" mc:Ignorable="d">
+    x:Class="Semi.Avalonia.Demo.Pages.TextBlockDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="600"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
     <StackPanel Orientation="Horizontal">
         <StackPanel
-            Margin="20" HorizontalAlignment="Left"
+            Margin="20"
+            HorizontalAlignment="Left"
             Spacing="5">
             <TextBlock>Styles for TextBlock</TextBlock>
             <TextBlock Classes="H1" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
@@ -20,15 +25,18 @@
             <TextBlock Classes="Tertiary">Tertiary</TextBlock>
             <TextBlock Classes="Quaternary">Quaternary</TextBlock>
             <TextBlock Classes="Warning">Warning</TextBlock>
+            <TextBlock Classes="Warning" IsEnabled="False">Warning disabled</TextBlock>
             <TextBlock Classes="Danger">Danger</TextBlock>
             <TextBlock Classes="Success">Success</TextBlock>
             <TextBlock IsEnabled="False">Disabled</TextBlock>
             <TextBlock Classes="Mark">Default Mark</TextBlock>
             <TextBlock Classes="Underline">Underline</TextBlock>
             <TextBlock Classes="Delete">Delete</TextBlock>
+            <TextBlock Classes="Underline Delete">Underline and Delete</TextBlock>
         </StackPanel>
         <StackPanel
-            Margin="20" HorizontalAlignment="Left"
+            Margin="20"
+            HorizontalAlignment="Left"
             Spacing="5">
             <TextBlock>Styles for SelectableTextBlock</TextBlock>
             <SelectableTextBlock Classes="H1" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
@@ -43,15 +51,18 @@
             <SelectableTextBlock Classes="Tertiary">Tertiary</SelectableTextBlock>
             <SelectableTextBlock Classes="Quaternary">Quaternary</SelectableTextBlock>
             <SelectableTextBlock Classes="Warning">Warning</SelectableTextBlock>
+            <SelectableTextBlock Classes="Warning" IsEnabled="False">Warning disabled</SelectableTextBlock>
             <SelectableTextBlock Classes="Danger">Danger</SelectableTextBlock>
             <SelectableTextBlock Classes="Success">Success</SelectableTextBlock>
             <SelectableTextBlock IsEnabled="False">Disabled</SelectableTextBlock>
             <SelectableTextBlock Classes="Mark">Default Mark</SelectableTextBlock>
             <SelectableTextBlock Classes="Underline">Underline</SelectableTextBlock>
             <SelectableTextBlock Classes="Delete">Delete</SelectableTextBlock>
+            <SelectableTextBlock Classes="Underline Delete">Underline and Delete</SelectableTextBlock>
         </StackPanel>
         <StackPanel
-            Margin="20" HorizontalAlignment="Left"
+            Margin="20"
+            HorizontalAlignment="Left"
             Spacing="5">
             <TextBlock>Styles for Label</TextBlock>
             <Label Classes="H1" Theme="{StaticResource TitleLabel}">Header 1</Label>
@@ -66,6 +77,7 @@
             <Label Classes="Tertiary">Tertiary</Label>
             <Label Classes="Quaternary">Quaternary</Label>
             <Label Classes="Warning">Warning</Label>
+            <Label Classes="Warning" IsEnabled="False">Warning disabled</Label>
             <Label Classes="Danger">Danger</Label>
             <Label Classes="Success">Success</Label>
             <Label IsEnabled="False">Disabled</Label>

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

@@ -8,7 +8,6 @@ namespace Semi.Avalonia.Demo.Pages;
 
 public partial class ThemeVariantDemo : UserControl
 {
-    private ThemeVariant _variant = ThemeVariant.Default;
     public ThemeVariantDemo()
     {
         InitializeComponent();
@@ -16,15 +15,6 @@ public partial class ThemeVariantDemo : UserControl
 
     private void Switch_OnIsCheckedChanged(object sender, RoutedEventArgs e)
     {
-        if (_variant == ThemeVariant.Dark)
-        {
-            scope.RequestedThemeVariant = ThemeVariant.Default;
-            _variant = ThemeVariant.Default;
-        }
-        else
-        {
-            scope.RequestedThemeVariant = ThemeVariant.Dark;
-            _variant = ThemeVariant.Dark;
-        }
+        scope.RequestedThemeVariant = scope.ActualThemeVariant == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
     }
 }

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

@@ -7,23 +7,36 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel>
-        <TextBlock Text="Toggle Button" />
+    <StackPanel Spacing="20">
+        <TextBlock Text="Toggle Button (Default)" />
         <StackPanel Orientation="Horizontal" Spacing="20">
-            <ToggleButton>Primary</ToggleButton>
+            <ToggleButton>Default</ToggleButton>
+            <ToggleButton Classes="Primary">Primary</ToggleButton>
             <ToggleButton Classes="Secondary">Secondary</ToggleButton>
             <ToggleButton Classes="Tertiary">Tertiary</ToggleButton>
             <ToggleButton Classes="Warning">Warning</ToggleButton>
-            <ToggleButton Classes="Error">Error</ToggleButton>
+            <ToggleButton Classes="Danger">Danger</ToggleButton>
+            <ToggleButton Classes="Danger" IsEnabled="False">Danger</ToggleButton>
         </StackPanel>
-
-        <TextBlock Margin="0,20,0,0" Text="Toggle Button Three State" />
+        <TextBlock Text="Toggle Button Checked State" />
         <StackPanel Orientation="Horizontal" Spacing="20">
-            <ToggleButton Name="button" IsThreeState="True">Primary</ToggleButton>
-            <ToggleButton Classes="Secondary" IsThreeState="True">Secondary</ToggleButton>
-            <ToggleButton Classes="Tertiary" IsThreeState="True">Tertiary</ToggleButton>
-            <ToggleButton Classes="Warning" IsThreeState="True">Warning</ToggleButton>
-            <ToggleButton Classes="Error" IsThreeState="True">Error</ToggleButton>
+            <ToggleButton IsChecked="True">Default</ToggleButton>
+            <ToggleButton Classes="Primary" IsChecked="True">Primary</ToggleButton>
+            <ToggleButton Classes="Secondary" IsChecked="True">Secondary</ToggleButton>
+            <ToggleButton Classes="Tertiary" IsChecked="True">Tertiary</ToggleButton>
+            <ToggleButton Classes="Warning" IsChecked="True">Warning</ToggleButton>
+            <ToggleButton Classes="Danger" IsChecked="True">Danger</ToggleButton>
+            <ToggleButton Classes="Danger" IsChecked="True" IsEnabled="False">Danger</ToggleButton>
+        </StackPanel>
+        <TextBlock Text="Toggle Button Three State" />
+        <StackPanel Orientation="Horizontal" Spacing="20">
+            <ToggleButton IsThreeState="True" IsChecked="{x:Null}">Default</ToggleButton>
+            <ToggleButton Classes="Primary" IsThreeState="True" IsChecked="{x:Null}">Primary</ToggleButton>
+            <ToggleButton Classes="Secondary" IsThreeState="True" IsChecked="{x:Null}">Secondary</ToggleButton>
+            <ToggleButton Classes="Tertiary" IsThreeState="True" IsChecked="{x:Null}">Tertiary</ToggleButton>
+            <ToggleButton Classes="Warning" IsThreeState="True" IsChecked="{x:Null}">Warning</ToggleButton>
+            <ToggleButton Classes="Danger" IsThreeState="True" IsChecked="{x:Null}">Danger</ToggleButton>
+            <ToggleButton Classes="Danger" IsThreeState="True" IsChecked="{x:Null}" IsEnabled="False">Danger</ToggleButton>
         </StackPanel>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -24,5 +24,26 @@
             IsEnabled="False"
             OffContent="OffContent"
             OnContent="OnContent" />
+        <ToggleSwitch
+            Theme="{DynamicResource SimpleToggleSwitch}"
+            Content="Content"
+            OffContent="OffContent"
+            OnContent="OnContent" />
+        <ToggleSwitch Theme="{DynamicResource ButtonToggleSwitch}">
+            <ToggleSwitch.OnContent>
+                <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.OnContent>
+            <ToggleSwitch.OffContent>
+                <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.OffContent>
+        </ToggleSwitch>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -11,7 +11,8 @@
         <Border
             Margin="5"
             Padding="50,10"
-            Background="Yellow"
+            Classes="Hover"
+            Theme="{StaticResource CardBorder}"
             ToolTip.Tip="This is a ToolTip">
             <TextBlock>Hover Here</TextBlock>
         </Border>
@@ -23,7 +24,8 @@
             Name="Border"
             Margin="5"
             Padding="50,10"
-            Background="Yellow"
+            Classes="Hover"
+            Theme="{StaticResource CardBorder}"
             ToolTip.Placement="Bottom">
             <ToolTip.Tip>
                 <StackPanel>
@@ -36,7 +38,8 @@
         <Border
             Margin="5"
             Padding="50,10"
-            Background="Yellow"
+            Classes="Hover"
+            Theme="{StaticResource CardBorder}"
             ToolTip.Placement="Top"
             ToolTip.Tip="Hello">
             <Border.Styles>
@@ -60,7 +63,8 @@
         <Border
             Margin="5"
             Padding="50,10"
-            Background="Yellow"
+            Classes="Hover"
+            Theme="{StaticResource CardBorder}"
             ToolTip.Placement="Top"
             ToolTip.Tip="Hello">
             <TextBlock>Top</TextBlock>
@@ -68,7 +72,8 @@
         <Border
             Margin="5"
             Padding="50,10"
-            Background="Yellow"
+            Classes="Hover"
+            Theme="{StaticResource CardBorder}"
             ToolTip.Placement="Left"
             ToolTip.Tip="Hello">
             <TextBlock>Left</TextBlock>
@@ -76,7 +81,8 @@
         <Border
             Margin="5"
             Padding="50,10"
-            Background="Yellow"
+            Classes="Hover"
+            Theme="{StaticResource CardBorder}"
             ToolTip.Placement="Right"
             ToolTip.Tip="Hello">
             <TextBlock>Right</TextBlock>
@@ -84,10 +90,11 @@
         <Border
             Margin="5"
             Padding="50,10"
-            Background="Yellow"
+            Classes="Hover"
+            Theme="{StaticResource CardBorder}"
             ToolTip.Placement="Bottom"
             ToolTip.Tip="Hello">
             <TextBlock>Bottom</TextBlock>
         </Border>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -1,9 +1,13 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.TreeViewDemo" xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="450"
-    d:DesignWidth="800" mc:Ignorable="d">
-    <Panel>
+    x:Class="Semi.Avalonia.Demo.Pages.TreeViewDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <Panel HorizontalAlignment="Left">
         <TreeView>
             <TreeViewItem Header="Level 1">
                 <TreeViewItem Header="Level 2" />

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

@@ -4,19 +4,18 @@
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
     </PropertyGroup>
-
+    
     <ItemGroup>
         <AvaloniaResource Include="Assets\**" />
         <TrimmerRootDescriptor Include="Roots.xml" />
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia" Version="11.0.0-preview5" />
-        <PackageReference Include="Avalonia.Controls.DataGrid" Version="11.0.0-preview5" />
+        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
+        <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="11.0.0-preview5" />
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
         <PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.0" />
-        <PackageReference Include="XamlNameReferenceGenerator" Version="1.5.1" />
     </ItemGroup>
 
     <ItemGroup>

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

@@ -1,35 +1,5 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Add Resources Here  -->
-    <ControlTheme x:Key="ThemeToggleButton" TargetType="ToggleButton">
-        <Setter Property="ToggleButton.Template">
-            <ControlTemplate TargetType="ToggleButton">
-                <Border
-                    Name="Background"
-                    Padding="8"
-                    Background="{TemplateBinding Background}"
-                    CornerRadius="3">
-                    <PathIcon
-                        Name="Icon"
-                        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}" />
-                </Border>
-            </ControlTemplate>
-        </Setter>
-        <Style Selector="^:pointerover">
-            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
-        </Style>
-        <Style Selector="^:pressed">
-            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
-        </Style>
-        <Style Selector="^:checked">
-            <Style Selector="^ /template/ PathIcon">
-                <Setter Property="PathIcon.Data" Value="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" />
-            </Style>
-        </Style>
-    </ControlTheme>
-
     <ControlTheme x:Key="SplitViewToggleButton" TargetType="ToggleButton">
         <Setter Property="ToggleButton.Template">
             <ControlTemplate TargetType="ToggleButton">

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

@@ -11,11 +11,17 @@ namespace Semi.Avalonia.Demo.ViewModels;
 
 public class PaletteDemoViewModel: ObservableObject
 {
-    private readonly string[] _predefinedColorNames = { "Amber","Blue","Cyan","Green","Grey","Indigo","LightBlue","LightGreen","Lime","Orange","Pink","Purple","Red","Teal","Violet","Yellow" };
-    private IResourceDictionary _lightResourceDictionary;
-    private IResourceDictionary _darkResourceDictionary;
+    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;
+    private ColorItemViewModel _selectedColor = null!;
 
     public ColorItemViewModel SelectedColor
     {
@@ -24,14 +30,14 @@ public class PaletteDemoViewModel: ObservableObject
     }
     
     
-    private ObservableCollection<ColorListViewModel> _lightLists;
-    public ObservableCollection<ColorListViewModel> LightLists
+    private ObservableCollection<ColorListViewModel>? _lightLists;
+    public ObservableCollection<ColorListViewModel>? LightLists
     {
         get => _lightLists;
         set => SetProperty(ref _lightLists, value);
     }
-    private ObservableCollection<ColorListViewModel> _darkLists;
-    public ObservableCollection<ColorListViewModel> DarkLists
+    private ObservableCollection<ColorListViewModel>? _darkLists;
+    public ObservableCollection<ColorListViewModel>? DarkLists
     {
         get => _darkLists;
         set => SetProperty(ref _darkLists, value);
@@ -41,8 +47,8 @@ public class PaletteDemoViewModel: ObservableObject
 
     public PaletteDemoViewModel()
     {
-        _lightResourceDictionary = (ResourceDictionary)AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Light/Palette.axaml"));
-        _darkResourceDictionary = (ResourceDictionary)AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Dark/Palette.axaml"));
+        _lightResourceDictionary = AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Light/Palette.axaml")) as ResourceDictionary;
+        _darkResourceDictionary = AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Dark/Palette.axaml")) as ResourceDictionary;
         WeakReferenceMessenger.Default.Register<PaletteDemoViewModel, ColorItemViewModel>(this, OnClickColorItem);
     }
 
@@ -110,8 +116,12 @@ public class ColorListViewModel: ObservableObject
         set => SetProperty(ref _seriesName, value);
     }
     
-    internal void Initialize(IResourceDictionary resourceDictionary, string color, bool light)
+    internal void Initialize(IResourceDictionary? resourceDictionary, string color, bool light)
     {
+        if (resourceDictionary is null)
+        {
+            return;
+        }
         SeriesName = color;
         Color = new ObservableCollection<ColorItemViewModel>();
         
@@ -124,6 +134,7 @@ public class ColorListViewModel: ObservableObject
                 {
                     string name = color + " " + i;
                     var item = new ColorItemViewModel(name, brush, key, light, i);
+                    item.ColorResourceKey = item.ResourceKey + "Color";
                     Color.Add(item);
                 } 
             }
@@ -134,28 +145,28 @@ public class ColorListViewModel: ObservableObject
 public class ColorItemViewModel : ObservableObject
 {
 
-    private IBrush _brush;
+    private IBrush _brush = null!;
     public IBrush Brush
     {
         get => _brush;
         set => SetProperty(ref _brush, value);
     }
     
-    private IBrush _textBrush;
+    private IBrush _textBrush = null!;
     public IBrush TextBrush
     {
         get => _textBrush;
         set => SetProperty(ref _textBrush, value);
     }
 
-    private string _colorDisplayName;
+    private string _colorDisplayName = null!;
     public string ColorDisplayName
     {
         get => _colorDisplayName;
         set => SetProperty(ref _colorDisplayName, value);
     }
 
-    private string _resourceKey;
+    private string _resourceKey = null!;
 
     public string ResourceKey
     {
@@ -163,7 +174,15 @@ public class ColorItemViewModel : ObservableObject
         set => SetProperty(ref _resourceKey, value);
     }
 
-    private string _hex;
+    private string _colorResourceKey = null!;
+
+    public string ColorResourceKey
+    {
+        get => _colorResourceKey;
+        set => SetProperty(ref _colorResourceKey, value);
+    }
+
+    private string _hex = null!;
 
     public string Hex
     {
@@ -177,7 +196,7 @@ public class ColorItemViewModel : ObservableObject
         Brush = brush;
         ResourceKey = resourceKey;
         Hex = brush.ToString().ToUpperInvariant();
-        if ((light && index < 5) || (!light && index > 5))
+        if ((light && index < 5) || (!light && index >= 5))
         {
             TextBrush = Brushes.Black;
         }
@@ -190,7 +209,7 @@ public class ColorItemViewModel : ObservableObject
 
 public class FunctionalColorGroupViewModel : ObservableObject
 {
-    private string _title;
+    private string _title = null!;
     public string Title
     {
         get => _title;
@@ -200,21 +219,22 @@ public class FunctionalColorGroupViewModel : ObservableObject
     public ObservableCollection<ColorItemViewModel> LightColors { get; set; } = new();
     public ObservableCollection<ColorItemViewModel> DarkColors { get; set; } = new();
 
-    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)
         {
             string key = token.Item1;
             string name = token.Item2;
-            if (lightDictionary.TryGetValue(key, out var lightValue))
+            if (lightDictionary?.TryGetValue(key, out var lightValue) ?? false)
             {
                 if (lightValue is ISolidColorBrush lightBrush)
                 {
                     LightColors.Add(new ColorItemViewModel(name, lightBrush, key, true, 0));
                 }
             }
-            if (darkDictionary.TryGetValue(key, out var darkValue))
+
+            if (darkDictionary?.TryGetValue(key, out var darkValue) ?? false)
             {
                 if (darkValue is ISolidColorBrush darkBrush)
                 {

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

@@ -38,10 +38,26 @@
                         Classes="Secondary"
                         Text="{Binding #tab.SelectedItem.Header}" />
                 </StackPanel>
-                <ToggleButton
+                <ToggleSwitch
                     Grid.Column="1"
+                    Padding="4"
                     IsCheckedChanged="ToggleButton_OnIsCheckedChanged"
-                    Theme="{DynamicResource ThemeToggleButton}" />
+                    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>
             </Grid>
 
         </Border>

src/Package.props

@@ -3,10 +3,11 @@
         <TargetFrameworks>net6.0;netstandard2.0</TargetFrameworks>
         <Nullable>enable</Nullable>
         <LangVersion>10</LangVersion>
-        <Version>0.1.0-preview5.2</Version>
+        <Version>0.1.0-preview7</Version>
         <Authors>IRIHI Technology</Authors>
         <Description>Avalonia Theme inspired by Semi Design. </Description>
         <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
-        <AvaloniaVersion>11.0.0-preview5</AvaloniaVersion>
+        <AvaloniaVersion>11.0.0-preview7</AvaloniaVersion>
+        <PackageLicenseExpression>MIT</PackageLicenseExpression>
     </PropertyGroup>
 </Project>

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

@@ -61,7 +61,7 @@
                         </Panel>
                     </DropDownButton.Content>
                     <DropDownButton.Flyout>
-                        <Flyout FlyoutPresenterClasses="nopadding" Placement="Auto">
+                        <Flyout FlyoutPresenterClasses="nopadding" Placement="AnchorAndGravity">
 
                             <!--
                                 The following is copy-pasted from the ColorView's control template.
@@ -188,7 +188,7 @@
                                             Margin="12"
                                             VerticalAlignment="Stretch"
                                             ItemContainerTheme="{DynamicResource ColorViewPaletteListBoxItemTheme}"
-                                            Items="{TemplateBinding PaletteColors}"
+                                            ItemsSource="{TemplateBinding PaletteColors}"
                                             SelectedItem="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DoNothingForNullConverter}, Mode=TwoWay}"
                                             Theme="{DynamicResource ColorViewPaletteListBoxTheme}"
                                             UseLayoutRounding="False">

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

@@ -10,6 +10,7 @@
 
     <ControlTheme x:Key="ColorSliderThumbTheme" TargetType="Thumb">
         <Setter Property="Background" Value="Transparent" />
+        <Setter Property="UseLayoutRounding" Value="False" />
         <Setter Property="BorderBrush" Value="{DynamicResource ColorSliderDefaultBorderBrush}" />
         <Setter Property="BorderThickness" Value="{DynamicResource ColorSliderThumbBorderBrush}" />
         <Setter Property="CornerRadius" Value="999" />
@@ -17,9 +18,11 @@
             <Setter.Value>
                 <ControlTemplate>
                     <Border
+                        Margin="1"
                         Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
+                        BoxShadow="{DynamicResource ColorSliderBoxShadow}"
                         CornerRadius="{TemplateBinding CornerRadius}" />
                 </ControlTemplate>
             </Setter.Value>
@@ -39,6 +42,8 @@
                         CornerRadius="{TemplateBinding CornerRadius}">
                         <Grid Margin="{TemplateBinding Padding}">
                             <Rectangle
+                                Width="{Binding #PART_Track.Bounds.Width}"
+                                Height="{Binding #PART_Track.Bounds.Height}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
@@ -47,6 +52,8 @@
                                 RadiusY="{TemplateBinding CornerRadius,
                                                           Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Rectangle
+                                Width="{Binding #PART_Track.Bounds.Width}"
+                                Height="{Binding #PART_Track.Bounds.Height}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{TemplateBinding Background}"
@@ -56,6 +63,7 @@
                                                           Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Track
                                 Name="PART_Track"
+                                Height="12"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
@@ -125,6 +133,8 @@
                         CornerRadius="{TemplateBinding CornerRadius}">
                         <Grid Margin="{TemplateBinding Padding}">
                             <Rectangle
+                                Width="{Binding #PART_Track.Bounds.Width}"
+                                Height="{Binding #PART_Track.Bounds.Height}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
@@ -133,6 +143,8 @@
                                 RadiusY="{TemplateBinding CornerRadius,
                                                           Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Rectangle
+                                Width="{Binding #PART_Track.Bounds.Width}"
+                                Height="{Binding #PART_Track.Bounds.Height}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{TemplateBinding Background}"
@@ -142,6 +154,7 @@
                                                           Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Track
                                 Name="PART_Track"
+                                Width="12"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
@@ -212,9 +225,11 @@
 
         <Style Selector="^:dark-selector /template/ Thumb#ColorSliderThumb">
             <Setter Property="BorderBrush" Value="{DynamicResource ColorSliderDarkBorderBrush}" />
+            <Setter Property="Foreground" Value="{DynamicResource ColorSliderLightBorderBrush}" />
         </Style>
         <Style Selector="^:light-selector /template/ Thumb#ColorSliderThumb">
             <Setter Property="BorderBrush" Value="{DynamicResource ColorSliderLightBorderBrush}" />
+            <Setter Property="Foreground" Value="{DynamicResource ColorSliderDarkBorderBrush}" />
         </Style>
 
     </ControlTheme>

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

@@ -280,7 +280,7 @@
                                 Margin="12"
                                 VerticalAlignment="Stretch"
                                 ItemContainerTheme="{StaticResource ColorViewPaletteListBoxItemTheme}"
-                                Items="{TemplateBinding PaletteColors}"
+                                ItemsSource="{TemplateBinding PaletteColors}"
                                 SelectedItem="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DoNothingForNullConverter}, Mode=TwoWay}"
                                 Theme="{StaticResource ColorViewPaletteListBoxTheme}"
                                 UseLayoutRounding="False">

src/Semi.Avalonia.ColorPicker/Dark.axaml

@@ -1,4 +1,7 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker">
     <!--  Add Resources Here  -->
     <SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#54A9FF" />
     <SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="#1C1F23" />
@@ -29,8 +32,9 @@
     <SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />
 
     <x:Double x:Key="ColorSliderWidth">16</x:Double>
-    <CornerRadius x:Key="ColorSliderCornerRadius">8</CornerRadius>
+    <CornerRadius x:Key="ColorSliderCornerRadius">6</CornerRadius>
     <Thickness x:Key="ColorSliderThumbBorderBrush">2</Thickness>
+    <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows>
 
     <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
 
@@ -40,4 +44,6 @@
     <CornerRadius x:Key="ColorPreviewerCornerRadius">3</CornerRadius>
 
     <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1AFFFFFF</BoxShadows>
+
+    <colorPicker:SemiColorDarkPalette x:Key="SemiColorPalette" />
 </ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Index.axaml

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

src/Semi.Avalonia.ColorPicker/Light.axaml

@@ -1,4 +1,7 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker">
     <!--  Add Resources Here  -->
     <SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#0077FA" />
     <SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="White" />
@@ -29,8 +32,9 @@
     <SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />
 
     <x:Double x:Key="ColorSliderWidth">16</x:Double>
-    <CornerRadius x:Key="ColorSliderCornerRadius">8</CornerRadius>
+    <CornerRadius x:Key="ColorSliderCornerRadius">6</CornerRadius>
     <Thickness x:Key="ColorSliderThumbBorderBrush">2</Thickness>
+    <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #1A000000</BoxShadows>
 
     <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
 
@@ -40,4 +44,5 @@
     <CornerRadius x:Key="ColorPreviewerCornerRadius">3</CornerRadius>
 
     <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1A000000</BoxShadows>
+    <colorPicker:SemiColorLightPalette x:Key="SemiColorPalette" />
 </ResourceDictionary>

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

@@ -1,10 +1,10 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
-    <Import Project="../Package.props"/>
+    <Import Project="../Package.props" />
 
     <PropertyGroup>
         <Title>Semi.Avalonia.ColorPicker</Title>
-        <PackageReleaseNotes>Add Native AOT support.</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Avalonia 11.0.0-preview7</PackageReleaseNotes>
     </PropertyGroup>
 
     <ItemGroup>

src/Semi.Avalonia.ColorPicker/SemiColorDarkPalette.cs

@@ -0,0 +1,231 @@
+using Avalonia.Controls;
+using Avalonia.Media;
+using Avalonia.Utilities;
+
+namespace Semi.Avalonia.ColorPicker;
+
+public class SemiColorDarkPalette: IColorPalette
+{
+    private static readonly Color[,] Colors = new Color[,]
+    {
+        {
+            //Red
+            Color.FromUInt32(0xFF6C090B),
+            Color.FromUInt32(0xFF901110),
+            Color.FromUInt32(0xFFB42019),
+            Color.FromUInt32(0xFFD73324),
+            Color.FromUInt32(0xFFFB4932),
+            Color.FromUInt32(0xFFFC725A),
+            Color.FromUInt32(0xFFFD9983),
+            Color.FromUInt32(0xFFFDBEAC),
+            Color.FromUInt32(0xFFFEE0D5),
+            Color.FromUInt32(0xFFFFF3EF),
+        },
+        {
+            //Pink
+            Color.FromUInt32(0xFF5C0730),
+            Color.FromUInt32(0xFF800E41),
+            Color.FromUInt32(0xFFA41751),
+            Color.FromUInt32(0xFFC72261),
+            Color.FromUInt32(0xFFEB2F71),
+            Color.FromUInt32(0xFFEF5686),
+            Color.FromUInt32(0xFFF37E9F),
+            Color.FromUInt32(0xFFF7A8BC),
+            Color.FromUInt32(0xFFFBD3DC),
+            Color.FromUInt32(0xFFFDEEF1),
+        },
+        {
+            //Purple
+            Color.FromUInt32(0xFF4A1061),
+            Color.FromUInt32(0xFF5E1776),
+            Color.FromUInt32(0xFF731F8A),
+            Color.FromUInt32(0xFF89289F),
+            Color.FromUInt32(0xFFA033B3),
+            Color.FromUInt32(0xFFB553C2),
+            Color.FromUInt32(0xFFCA78D1),
+            Color.FromUInt32(0xFFDDA0E1),
+            Color.FromUInt32(0xFFEFCEF0),
+            Color.FromUInt32(0xFFF7EBF7),
+        },
+        {
+            //Violet
+            Color.FromUInt32(0xFF401B77),
+            Color.FromUInt32(0xFF4C248C),
+            Color.FromUInt32(0xFF582EA0),
+            Color.FromUInt32(0xFF6439B5),
+            Color.FromUInt32(0xFF7246C9),
+            Color.FromUInt32(0xFF8865D4),
+            Color.FromUInt32(0xFFA288DF),
+            Color.FromUInt32(0xFFBEADE9),
+            Color.FromUInt32(0xFFDDD4F4),
+            Color.FromUInt32(0xFFF1EEFA),
+        },
+        {
+            //Indigo
+            Color.FromUInt32(0xFF171E65),
+            Color.FromUInt32(0xFF20297A),
+            Color.FromUInt32(0xFF29368E),
+            Color.FromUInt32(0xFF3444A3),
+            Color.FromUInt32(0xFF4053B7),
+            Color.FromUInt32(0xFF5F71C5),
+            Color.FromUInt32(0xFF8191D4),
+            Color.FromUInt32(0xFFA7B4E2),
+            Color.FromUInt32(0xFFD1D8F1),
+            Color.FromUInt32(0xFFEDEFF8),
+        },
+        {
+            //Blue
+            Color.FromUInt32(0xFF053170),
+            Color.FromUInt32(0xFF0A4694),
+            Color.FromUInt32(0xFF135CB8),
+            Color.FromUInt32(0xFF1D75DB),
+            Color.FromUInt32(0xFF2990FF),
+            Color.FromUInt32(0xFF54A9FF),
+            Color.FromUInt32(0xFF7FC1FF),
+            Color.FromUInt32(0xFFA9D7FF),
+            Color.FromUInt32(0xFFD4ECFF),
+            Color.FromUInt32(0xFFEFF8FF),
+        },
+        {
+            //LightBlue
+            Color.FromUInt32(0xFF003761),
+            Color.FromUInt32(0xFF004D85),
+            Color.FromUInt32(0xFF0366A9),
+            Color.FromUInt32(0xFF0A81CC),
+            Color.FromUInt32(0xFF139FF0),
+            Color.FromUInt32(0xFF40B4F3),
+            Color.FromUInt32(0xFF6EC8F6),
+            Color.FromUInt32(0xFF9DDCF9),
+            Color.FromUInt32(0xFFCEEEFC),
+            Color.FromUInt32(0xFFEBF8FE),
+        },
+        {
+            //Cyan
+            Color.FromUInt32(0xFF04343D),
+            Color.FromUInt32(0xFF074F5C),
+            Color.FromUInt32(0xFF0A6C7B),
+            Color.FromUInt32(0xFF0E8999),
+            Color.FromUInt32(0xFF13A8B8),
+            Color.FromUInt32(0xFF38BBC6),
+            Color.FromUInt32(0xFF62CDD4),
+            Color.FromUInt32(0xFF91DFE3),
+            Color.FromUInt32(0xFFC6EFF1),
+            Color.FromUInt32(0xFFE7F7F8),
+        },
+        {
+            //Teal
+            Color.FromUInt32(0xFF023C39),
+            Color.FromUInt32(0xFF045A55),
+            Color.FromUInt32(0xFF07776F),
+            Color.FromUInt32(0xFF0A9588),
+            Color.FromUInt32(0xFF0EB3A1),
+            Color.FromUInt32(0xFF33C2B0),
+            Color.FromUInt32(0xFF5ED1C1),
+            Color.FromUInt32(0xFF8EE1D3),
+            Color.FromUInt32(0xFFC4F0E8),
+            Color.FromUInt32(0xFFE6F7F4),
+        },
+        {
+            //Green
+            Color.FromUInt32(0xFF123C19),
+            Color.FromUInt32(0xFF1C5A25),
+            Color.FromUInt32(0xFF277731),
+            Color.FromUInt32(0xFF32953D),
+            Color.FromUInt32(0xFF3EB349),
+            Color.FromUInt32(0xFF5DC264),
+            Color.FromUInt32(0xFF7FD184),
+            Color.FromUInt32(0xFFA6E1A8),
+            Color.FromUInt32(0xFFD0F0D1),
+            Color.FromUInt32(0xFFECF7EC),
+        },
+        {
+            //LightGreen
+            Color.FromUInt32(0xFF263D13),
+            Color.FromUInt32(0xFF3B5C1D),
+            Color.FromUInt32(0xFF517B28),
+            Color.FromUInt32(0xFF679934),
+            Color.FromUInt32(0xFF7FB840),
+            Color.FromUInt32(0xFF97C65F),
+            Color.FromUInt32(0xFFB0D481),
+            Color.FromUInt32(0xFFC9E3A7),
+            Color.FromUInt32(0xFFE4F1D1),
+            Color.FromUInt32(0xFFF3F8ED),
+        },
+        {
+            //Lime
+            Color.FromUInt32(0xFF314603),
+            Color.FromUInt32(0xFF4B6905),
+            Color.FromUInt32(0xFF678D09),
+            Color.FromUInt32(0xFF84B00C),
+            Color.FromUInt32(0xFFA2D311),
+            Color.FromUInt32(0xFFAEDC3A),
+            Color.FromUInt32(0xFFBDE566),
+            Color.FromUInt32(0xFFCFED96),
+            Color.FromUInt32(0xFFE5F6C9),
+            Color.FromUInt32(0xFFF3FBE9),
+        },
+        {
+            //Yellow
+            Color.FromUInt32(0xFF544903),
+            Color.FromUInt32(0xFF7E6C06),
+            Color.FromUInt32(0xFFA88E0A),
+            Color.FromUInt32(0xFFD2AF0F),
+            Color.FromUInt32(0xFFFCCE14),
+            Color.FromUInt32(0xFFFDDE43),
+            Color.FromUInt32(0xFFFDEB71),
+            Color.FromUInt32(0xFFFEF5A0),
+            Color.FromUInt32(0xFFFEFBD0),
+            Color.FromUInt32(0xFFFFFEEC),
+        },
+        {
+            //Amber
+            Color.FromUInt32(0xFF512E09),
+            Color.FromUInt32(0xFF794B0F),
+            Color.FromUInt32(0xFFA16B16),
+            Color.FromUInt32(0xFFCA8F1E),
+            Color.FromUInt32(0xFFF2B726),
+            Color.FromUInt32(0xFFF5CA50),
+            Color.FromUInt32(0xFFF7DB7A),
+            Color.FromUInt32(0xFFFAEAA6),
+            Color.FromUInt32(0xFFFCF6D2),
+            Color.FromUInt32(0xFFFEFBED),
+        },
+        {
+            //Orange
+            Color.FromUInt32(0xFF551F03),
+            Color.FromUInt32(0xFF803506),
+            Color.FromUInt32(0xFFAA500A),
+            Color.FromUInt32(0xFFD56F0F),
+            Color.FromUInt32(0xFFFF9214),
+            Color.FromUInt32(0xFFFFAE43),
+            Color.FromUInt32(0xFFFFC772),
+            Color.FromUInt32(0xFFFFDDA1),
+            Color.FromUInt32(0xFFFFEFD0),
+            Color.FromUInt32(0xFFFFF9ED),
+        },
+        {
+            //Grey
+            Color.FromUInt32(0xFF1C1F23),
+            Color.FromUInt32(0xFF2E3238),
+            Color.FromUInt32(0xFF41464C),
+            Color.FromUInt32(0xFF555B61),
+            Color.FromUInt32(0xFF6B7075),
+            Color.FromUInt32(0xFF888D92),
+            Color.FromUInt32(0xFFA7ABB0),
+            Color.FromUInt32(0xFFC6CACD),
+            Color.FromUInt32(0xFFE6E8EA),
+            Color.FromUInt32(0xFFF9F9F9),
+        },
+    };
+    public Color GetColor(int colorIndex, int shadeIndex)
+    {
+        return Colors[
+            MathUtilities.Clamp(colorIndex, 0, ColorCount - 1),
+            MathUtilities.Clamp(shadeIndex, 0, ShadeCount - 1)
+        ];
+    }
+
+    public int ColorCount => Colors.GetLength(0);
+
+    public int ShadeCount => Colors.GetLength(1);
+}

src/Semi.Avalonia.ColorPicker/SemiColorLightPalette.cs

@@ -0,0 +1,231 @@
+using Avalonia.Controls;
+using Avalonia.Media;
+using Avalonia.Utilities;
+
+namespace Semi.Avalonia.ColorPicker;
+
+public class SemiColorLightPalette: IColorPalette
+{
+    private static readonly Color[,] Colors = new Color[,]
+    {
+        {
+            //Red
+            Color.FromUInt32(0xFFFEF2ED),
+            Color.FromUInt32(0xFFFEDDD2),
+            Color.FromUInt32(0xFFFDB7A5),
+            Color.FromUInt32(0xFFFB9078),
+            Color.FromUInt32(0xFFFA664C),
+            Color.FromUInt32(0xFFF93920),
+            Color.FromUInt32(0xFFD52515),
+            Color.FromUInt32(0xFFB2140C),
+            Color.FromUInt32(0xFF8E0805),
+            Color.FromUInt32(0xFF6A0103),
+        },
+        {
+            //Pink
+            Color.FromUInt32(0xFFFDECEF),
+            Color.FromUInt32(0xFFFBCFD8),
+            Color.FromUInt32(0xFFF6A0B5),
+            Color.FromUInt32(0xFFF27396),
+            Color.FromUInt32(0xFFED487B),
+            Color.FromUInt32(0xFFE91E63),
+            Color.FromUInt32(0xFFC51356),
+            Color.FromUInt32(0xFFA20B48),
+            Color.FromUInt32(0xFF7E053A),
+            Color.FromUInt32(0xFF5A012B),
+        },
+        {
+            //Purple
+            Color.FromUInt32(0xFFF7E9F7),
+            Color.FromUInt32(0xFFEFCAF0),
+            Color.FromUInt32(0xFFDD9BE0),
+            Color.FromUInt32(0xFFC96FD1),
+            Color.FromUInt32(0xFFB449C2),
+            Color.FromUInt32(0xFF9E28B3),
+            Color.FromUInt32(0xFF871E9E),
+            Color.FromUInt32(0xFF71168A),
+            Color.FromUInt32(0xFF5C0F75),
+            Color.FromUInt32(0xFF490A61),
+        },
+        {
+            //Violet
+            Color.FromUInt32(0xFFF3EDF9),
+            Color.FromUInt32(0xFFE2D1F4),
+            Color.FromUInt32(0xFFC4A7E9),
+            Color.FromUInt32(0xFFA67FDD),
+            Color.FromUInt32(0xFF885BD2),
+            Color.FromUInt32(0xFF6A3AC7),
+            Color.FromUInt32(0xFF572FB3),
+            Color.FromUInt32(0xFF46259E),
+            Color.FromUInt32(0xFF361C8A),
+            Color.FromUInt32(0xFF281475),
+        },
+        {
+            //Indigo
+            Color.FromUInt32(0xFFECEFF8),
+            Color.FromUInt32(0xFFD1D8F0),
+            Color.FromUInt32(0xFFA7B3E1),
+            Color.FromUInt32(0xFF8090D3),
+            Color.FromUInt32(0xFF5E6FC4),
+            Color.FromUInt32(0xFF3F51B5),
+            Color.FromUInt32(0xFF3342A1),
+            Color.FromUInt32(0xFF28348C),
+            Color.FromUInt32(0xFF1F2878),
+            Color.FromUInt32(0xFF171D63),
+        },
+        {
+            //Blue
+            Color.FromUInt32(0xFFEAF5FF),
+            Color.FromUInt32(0xFFCBE7FE),
+            Color.FromUInt32(0xFF98CDFD),
+            Color.FromUInt32(0xFF65B2FC),
+            Color.FromUInt32(0xFF3295FB),
+            Color.FromUInt32(0xFF0077FA),
+            Color.FromUInt32(0xFF0062D6),
+            Color.FromUInt32(0xFF004FB3),
+            Color.FromUInt32(0xFF003D8F),
+            Color.FromUInt32(0xFF002C6B),
+        },
+        {
+            //LightBlue
+            Color.FromUInt32(0xFFE9F7FD),
+            Color.FromUInt32(0xFFC9ECFC),
+            Color.FromUInt32(0xFF95D8F8),
+            Color.FromUInt32(0xFF62C3F5),
+            Color.FromUInt32(0xFF30ACF1),
+            Color.FromUInt32(0xFF0095EE),
+            Color.FromUInt32(0xFF007BCA),
+            Color.FromUInt32(0xFF0063A7),
+            Color.FromUInt32(0xFF004B83),
+            Color.FromUInt32(0xFF00355F),
+        },
+        {
+            //Cyan
+            Color.FromUInt32(0xFFE5F7F8),
+            Color.FromUInt32(0xFFC2EFF0),
+            Color.FromUInt32(0xFF8ADDE2),
+            Color.FromUInt32(0xFF58CBD3),
+            Color.FromUInt32(0xFF2CB8C5),
+            Color.FromUInt32(0xFF05A4B6),
+            Color.FromUInt32(0xFF038698),
+            Color.FromUInt32(0xFF016979),
+            Color.FromUInt32(0xFF004D5B),
+            Color.FromUInt32(0xFF00323D),
+        },
+        {
+            //Teal
+            Color.FromUInt32(0xFFE4F7F4),
+            Color.FromUInt32(0xFFC0F0E8),
+            Color.FromUInt32(0xFF87E0D3),
+            Color.FromUInt32(0xFF54D1C1),
+            Color.FromUInt32(0xFF27C2B0),
+            Color.FromUInt32(0xFF00B3A1),
+            Color.FromUInt32(0xFF009589),
+            Color.FromUInt32(0xFF00776F),
+            Color.FromUInt32(0xFF005955),
+            Color.FromUInt32(0xFF003C3A),
+        },
+        {
+            //Green
+            Color.FromUInt32(0xFFECF7EC),
+            Color.FromUInt32(0xFFD0F0D1),
+            Color.FromUInt32(0xFFA4E0A7),
+            Color.FromUInt32(0xFF7DD182),
+            Color.FromUInt32(0xFF5AC262),
+            Color.FromUInt32(0xFF3BB346),
+            Color.FromUInt32(0xFF30953B),
+            Color.FromUInt32(0xFF25772F),
+            Color.FromUInt32(0xFF1B5924),
+            Color.FromUInt32(0xFF113C18),
+        },
+        {
+            //LightGreen
+            Color.FromUInt32(0xFFF3F8EC),
+            Color.FromUInt32(0xFFE3F0D0),
+            Color.FromUInt32(0xFFC8E2A5),
+            Color.FromUInt32(0xFFADD37E),
+            Color.FromUInt32(0xFF93C55B),
+            Color.FromUInt32(0xFF7BB63C),
+            Color.FromUInt32(0xFF649830),
+            Color.FromUInt32(0xFF4E7926),
+            Color.FromUInt32(0xFF395B1B),
+            Color.FromUInt32(0xFF253D12),
+        },
+        {
+            //Lime
+            Color.FromUInt32(0xFFF2FAE6),
+            Color.FromUInt32(0xFFE3F6C5),
+            Color.FromUInt32(0xFFCBED8E),
+            Color.FromUInt32(0xFFB7E35B),
+            Color.FromUInt32(0xFFA7DA2C),
+            Color.FromUInt32(0xFF9BD100),
+            Color.FromUInt32(0xFF7EAE00),
+            Color.FromUInt32(0xFF638B00),
+            Color.FromUInt32(0xFF486800),
+            Color.FromUInt32(0xFF2F4600),
+        },
+        {
+            //Yellow
+            Color.FromUInt32(0xFFFFFDEA),
+            Color.FromUInt32(0xFFFEFBCB),
+            Color.FromUInt32(0xFFFDF398),
+            Color.FromUInt32(0xFFFCE865),
+            Color.FromUInt32(0xFFFBDA32),
+            Color.FromUInt32(0xFFFAC800),
+            Color.FromUInt32(0xFFD0AA00),
+            Color.FromUInt32(0xFFA78B00),
+            Color.FromUInt32(0xFF7D6A00),
+            Color.FromUInt32(0xFF534800),
+        },
+        {
+            //Amber
+            Color.FromUInt32(0xFFFEFBEB),
+            Color.FromUInt32(0xFFFCF5CE),
+            Color.FromUInt32(0xFFF9E89E),
+            Color.FromUInt32(0xFFF6D86F),
+            Color.FromUInt32(0xFFF3C641),
+            Color.FromUInt32(0xFFF0B114),
+            Color.FromUInt32(0xFFC88A0F),
+            Color.FromUInt32(0xFFA0660A),
+            Color.FromUInt32(0xFF784606),
+            Color.FromUInt32(0xFF502B03),
+        },
+        {
+            //Orange
+            Color.FromUInt32(0xFFFFF8EA),
+            Color.FromUInt32(0xFFFEEECC),
+            Color.FromUInt32(0xFFFED998),
+            Color.FromUInt32(0xFFFDC165),
+            Color.FromUInt32(0xFFFDA633),
+            Color.FromUInt32(0xFFFC8800),
+            Color.FromUInt32(0xFFD26700),
+            Color.FromUInt32(0xFFA84A00),
+            Color.FromUInt32(0xFF7E3100),
+            Color.FromUInt32(0xFF541D00),
+        },
+        {
+            //Grey
+            Color.FromUInt32(0xFFF9F9F9),
+            Color.FromUInt32(0xFFE6E8EA),
+            Color.FromUInt32(0xFFC6CACD),
+            Color.FromUInt32(0xFFA7ABB0),
+            Color.FromUInt32(0xFF888D92),
+            Color.FromUInt32(0xFF6B7075),
+            Color.FromUInt32(0xFF555B61),
+            Color.FromUInt32(0xFF41464C),
+            Color.FromUInt32(0xFF2E3238),
+            Color.FromUInt32(0xFF1C1F23),
+        },
+    };
+    public Color GetColor(int colorIndex, int shadeIndex)
+    {
+        return Colors[
+            MathUtilities.Clamp(colorIndex, 0, ColorCount - 1),
+            MathUtilities.Clamp(shadeIndex, 0, ShadeCount - 1)
+        ];
+    }
+
+    public int ColorCount => Colors.GetLength(0);
+
+    public int ShadeCount => Colors.GetLength(1);
+}

src/Semi.Avalonia.DataGrid/Index.axaml

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

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

@@ -1,10 +1,10 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
-    <Import Project="../Package.props"/>
+    <Import Project="../Package.props" />
     
     <PropertyGroup>
         <Title>Semi.Avalonia.DataGrid</Title>
-        <PackageReleaseNotes>Add Native AOT support.</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Avalonia 11.0.0-preview7</PackageReleaseNotes>
     </PropertyGroup>
 
     <ItemGroup>

src/Semi.Avalonia/Controls/Button.axaml

@@ -20,6 +20,7 @@
         <Setter Property="Button.HorizontalContentAlignment" Value="Center" />
         <Setter Property="Button.VerticalContentAlignment" Value="Center" />
         <Setter Property="Button.MinHeight" Value="12" />
+        <Setter Property="Button.Cursor" Value="Hand" />
         <Setter Property="Button.Template">
             <ControlTemplate TargetType="Button">
                 <ContentPresenter

src/Semi.Avalonia/Controls/Calendar.axaml

@@ -31,6 +31,7 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type CalendarItem}" TargetType="CalendarItem">
+        <Setter Property="CalendarItem.MinHeight" Value="{DynamicResource CalendarMinHeight}" />
         <Setter Property="CalendarItem.DayTitleTemplate">
             <Template>
                 <TextBlock
@@ -51,25 +52,19 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <!--
-                        To keep calendar from resizing when switching DisplayMode
-                        In WinUI Min-Width from TemplateSettings
-                        basically...MinWidth of DayItem = 40, 40 * 7 = 280 + margins/padding = ~294
-                        Viewport height is set from # of rows displayed (2-8) in Month mode, = ~290 for 6 weeks (+ day names)
-                    -->
                     <Grid
                         MinWidth="{DynamicResource CalendarMinWidth}"
+                        MinHeight="{TemplateBinding MinHeight}"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         RowDefinitions="Auto,*">
-                        <Grid ColumnDefinitions="Auto,*,Auto">
+                        <Grid Grid.Row="0" ColumnDefinitions="Auto,*,Auto">
                             <Button
                                 Name="PART_PreviousButton"
                                 Grid.Column="0"
                                 HorizontalContentAlignment="Left"
                                 Foreground="{TemplateBinding Foreground}"
                                 Theme="{DynamicResource BorderlessButton}">
-                                <!--  Path mimics Segoe MDL2 Assets font glyph used in WinUI  -->
                                 <PathIcon
                                     Width="12"
                                     Height="12"
@@ -90,7 +85,6 @@
                                 HorizontalContentAlignment="Left"
                                 Foreground="{TemplateBinding Foreground}"
                                 Theme="{DynamicResource BorderlessButton}">
-                                <!--  Path mimics Segoe MDL2 Assets font glyph used in WinUI  -->
                                 <PathIcon
                                     Width="12"
                                     Height="12"
@@ -98,15 +92,12 @@
                                     Foreground="{DynamicResource CalendarItemIconForeground}" />
                             </Button>
                         </Grid>
-                        <!--  Border below is used only for MonthView but it can't be moved inside of Grid because CalendarItem expects it to be empty and it will cause side-effects  -->
                         <Grid
                             Name="PART_MonthView"
                             Grid.Row="1"
-                            MinHeight="200"
                             HorizontalAlignment="Stretch"
                             IsVisible="False">
                             <Grid.RowDefinitions>
-                                <!--  This should always be the week day names??  -->
                                 <RowDefinition Height="{DynamicResource CalendarItemWeekDayNameHeight}" />
                                 <RowDefinition Height="*" />
                                 <RowDefinition Height="*" />
@@ -128,7 +119,6 @@
                         <Grid
                             Name="PART_YearView"
                             Grid.Row="1"
-                            MinHeight="200"
                             Background="{TemplateBinding Background}"
                             IsVisible="False">
                             <Grid.RowDefinitions>
@@ -152,7 +142,6 @@
     <ControlTheme x:Key="{x:Type CalendarButton}" TargetType="CalendarButton">
         <Setter Property="ClickMode" Value="Release" />
         <Setter Property="Margin" Value="2" />
-        <!--  These are actually set on the CalendarView in WinUI  -->
         <Setter Property="Foreground" Value="{DynamicResource CalendarItemCalendarButtonForeground}" />
         <Setter Property="Background" Value="{DynamicResource CalendarItemCalendarButtonBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource CalendarItemCalendarButtonBorderBrush}" />
@@ -188,7 +177,6 @@
             <Setter Property="ContentControl.Background" Value="{DynamicResource CalendarItemCalendarButtonPressedBackground}" />
         </Style>
 
-        <!--  Adjusted :selected to look like :today from DayItem  -->
         <Style Selector="^:selected">
             <Style Selector="^ /template/ ContentControl">
                 <Setter Property="ContentControl.Background" Value="{DynamicResource CalendarItemCalendarButtonSelectedBackground}" />

src/Semi.Avalonia/Controls/CalendarDatePicker.axaml

@@ -49,7 +49,7 @@
                         BorderThickness="{TemplateBinding BorderThickness}"
                         CornerRadius="{TemplateBinding CornerRadius}">
                         <Grid
-                            HorizontalAlignment="Left"
+                            HorizontalAlignment="Stretch"
                             VerticalAlignment="Center"
                             ColumnDefinitions="*,Auto">
                             <TextBox
@@ -86,9 +86,6 @@
                                             <Setter Property="Background" Value="Transparent" />
                                             <Setter Property="BorderBrush" Value="Transparent" />
                                         </Style>
-                                        <Style Selector="^ /template/ TextBlock#PART_Watermark">
-                                            <Setter Property="TextElement.Foreground" Value="{DynamicResource CalendarDatePickerTextForegroundDisabled}" />
-                                        </Style>
                                     </Style>
                                 </TextBox.Styles>
                             </TextBox>
@@ -105,9 +102,15 @@
                                 IsLightDismissEnabled="True"
                                 PlacementTarget="{TemplateBinding}"
                                 VerticalOffset="-4">
-                                <Border Margin="8" BoxShadow="{DynamicResource CalendarDatePickerPopupBoxShadows}">
+                                <Border
+                                    Margin="8"
+                                    Background="Transparent"
+                                    BoxShadow="{DynamicResource CalendarDatePickerPopupBoxShadows}"
+                                    CornerRadius="{DynamicResource CalendarCornerRadius}">
                                     <Calendar
                                         Name="PART_Calendar"
+                                        BorderThickness="0"
+                                        CornerRadius="{Binding $parent[Border].CornerRadius}"
                                         DisplayDate="{TemplateBinding DisplayDate}"
                                         DisplayDateEnd="{TemplateBinding DisplayDateEnd}"
                                         DisplayDateStart="{TemplateBinding DisplayDateStart}"

src/Semi.Avalonia/Controls/CaptionButtons.axaml

@@ -9,10 +9,11 @@
         <Setter Property="BorderBrush" Value="{DynamicResource CaptionButtonPressedBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource CaptionButtonForeground}" />
         <Setter Property="CornerRadius" Value="6" />
-        <Setter Property="Margin" Value="4" />
+        <Setter Property="Margin" Value="0, 4" />
         <Setter Property="Padding" Value="4" />
         <Setter Property="Height" Value="28" />
         <Setter Property="Width" Value="28" />
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="VerticalAlignment" Value="Stretch" />
         <Setter Property="Template">
             <ControlTemplate TargetType="Button">
@@ -36,6 +37,7 @@
 
     <ControlTheme x:Key="{x:Type CaptionButtons}" TargetType="CaptionButtons">
         <Setter Property="Foreground" Value="{DynamicResource CaptionButtonForeground}" />
+        <Setter Property="Margin" Value="0 0 4 0" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CaptionButtons">
                 <StackPanel

src/Semi.Avalonia/Controls/Carousel.axaml

@@ -141,8 +141,8 @@
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         ItemContainerTheme="{DynamicResource CarouselIndicatorDotListBoxItem}"
-                        Items="{TemplateBinding Items,
-                                                Converter={StaticResource ItemsConverter}}"
+                        ItemsSource="{TemplateBinding ItemsSource,
+                                                      Converter={StaticResource ItemsConverter}}"
                         SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
                         <ListBox.ItemsPanel>
                             <ItemsPanelTemplate>

src/Semi.Avalonia/Controls/CheckBox.axaml

@@ -4,16 +4,17 @@
     x:CompileBindings="True">
     <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="Center" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="FontSize" Value="{DynamicResource CheckboxFontSize}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource CheckboxBoxCornerRadius}" />
+        <Setter Property="Cursor" Value="Hand" />
+        <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="Foreground" Value="{DynamicResource CheckBoxForeground}" />
+        <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultBorderBrush}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CheckBox">
                 <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
@@ -21,6 +22,7 @@
                         x:Name="PART_Border"
                         Grid.Column="0"
                         Grid.ColumnSpan="2"
+                        HorizontalAlignment="Center"
                         Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
@@ -32,18 +34,18 @@
                         VerticalAlignment="Center">
                         <Border
                             x:Name="NormalRectangle"
-                            Width="{DynamicResource CheckboxBoxWidth}"
-                            Height="{DynamicResource CheckboxBoxHeight}"
-                            Background="{DynamicResource CheckboxDefaultBackground}"
-                            BorderBrush="{DynamicResource CheckboxDefaultBorderBrush}"
-                            BorderThickness="{DynamicResource CheckboxBoxBorderThickness}"
+                            Width="{DynamicResource CheckBoxBoxWidth}"
+                            Height="{DynamicResource CheckBoxBoxHeight}"
+                            Background="{DynamicResource CheckBoxDefaultBackground}"
+                            BorderBrush="{DynamicResource CheckBoxDefaultBorderBrush}"
+                            BorderThickness="{DynamicResource CheckBoxBoxBorderThickness}"
                             CornerRadius="{TemplateBinding CornerRadius}"
                             UseLayoutRounding="False" />
                         <PathIcon
                             Name="CheckGlyph"
-                            Width="{DynamicResource CheckboxBoxGlyphWidth}"
-                            Height="{DynamicResource CheckboxBoxGlyphHeight}"
-                            Foreground="{DynamicResource CheckboxGlyphFill}" />
+                            Width="{DynamicResource CheckBoxBoxGlyphWidth}"
+                            Height="{DynamicResource CheckBoxBoxGlyphHeight}"
+                            Foreground="{DynamicResource CheckBoxGlyphFill}" />
 
                     </Grid>
                     <ContentPresenter
@@ -62,37 +64,37 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  Unchecked PointerOver State  -->
+        <!--  Unchecked Pointerover State  -->
         <Style Selector="^:pointerover">
             <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxPointOverBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckboxPointOverBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointeroverBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxPointeroverBackground}" />
             </Style>
         </Style>
 
         <!--  Unchecked Pressed State  -->
         <Style Selector="^:pressed">
             <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxPressedBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckboxPressedBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPressedBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxPressedBackground}" />
             </Style>
         </Style>
 
         <!--  Unchecked Disabled state  -->
         <Style Selector="^:disabled">
             <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
+                <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
             </Style>
             <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxDefaultDisabledBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckboxDefaultDisabledBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultDisabledBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultDisabledBackground}" />
             </Style>
         </Style>
 
         <Style Selector="^:checked">
             <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDefaultBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDefaultBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
             </Style>
 
             <Style Selector="^ /template/ PathIcon#CheckGlyph">
@@ -100,42 +102,42 @@
                 <Setter Property="Opacity" Value="1" />
             </Style>
 
-            <!--  Checked PointerOver State  -->
+            <!--  Checked Pointerover State  -->
             <Style Selector="^:pointerover">
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedPointOverBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedPointOverBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
                 </Style>
             </Style>
 
             <!--  Checked Pressed State  -->
             <Style Selector="^:pressed">
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedPressedBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedPressedBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
                 </Style>
             </Style>
 
             <!--  Checked Disabled State  -->
             <Style Selector="^:disabled">
                 <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                    <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
                 </Style>
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDisabledBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDisabledBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
                 </Style>
 
                 <Style Selector="^ /template/ Path#CheckGlyph">
-                    <Setter Property="Fill" Value="{DynamicResource CheckboxGlyphDisabledFill}" />
+                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
                 </Style>
             </Style>
         </Style>
 
         <Style Selector="^:indeterminate">
             <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDefaultBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDefaultBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
             </Style>
 
             <Style Selector="^ /template/ PathIcon#CheckGlyph">
@@ -143,34 +145,318 @@
                 <Setter Property="Opacity" Value="1" />
             </Style>
 
-            <!--  Checked PointerOver State  -->
+            <!--  Checked Pointerover State  -->
             <Style Selector="^:pointerover">
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedPointOverBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedPointOverBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
                 </Style>
             </Style>
 
             <!--  Checked Pressed State  -->
             <Style Selector="^:pressed">
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedPressedBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedPressedBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
                 </Style>
             </Style>
 
             <!--  Checked Disabled State  -->
             <Style Selector="^:disabled">
                 <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                    <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
                 </Style>
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDisabledBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDisabledBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
                 </Style>
 
                 <Style Selector="^ /template/ Path#CheckGlyph">
-                    <Setter Property="Fill" Value="{DynamicResource CheckboxGlyphDisabledFill}" />
+                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
+                </Style>
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="CardCheckBox" TargetType="CheckBox">
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Padding" Value="{DynamicResource CheckBoxCardPadding}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource CheckBoxCardBorderThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxCardCornerRadius}" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="CheckBox.Template">
+            <ControlTemplate TargetType="CheckBox">
+                <Border
+                    Name="RootBorder"
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid
+                        x:Name="RootGrid"
+                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                        ColumnDefinitions="Auto,*">
+                        <Grid Grid.Column="0" VerticalAlignment="Top">
+                            <Border
+                                x:Name="NormalRectangle"
+                                Width="{DynamicResource CheckBoxBoxWidth}"
+                                Height="{DynamicResource CheckBoxBoxHeight}"
+                                Background="{DynamicResource CheckBoxDefaultBackground}"
+                                BorderBrush="{DynamicResource CheckBoxDefaultBorderBrush}"
+                                BorderThickness="{DynamicResource CheckBoxBoxBorderThickness}"
+                                CornerRadius="{DynamicResource CheckBoxBoxCornerRadius}"
+                                UseLayoutRounding="False" />
+                            <PathIcon
+                                Name="CheckGlyph"
+                                Width="{DynamicResource CheckBoxBoxGlyphWidth}"
+                                Height="{DynamicResource CheckBoxBoxGlyphHeight}"
+                                Foreground="{DynamicResource CheckBoxGlyphFill}" />
+
+                        </Grid>
+                        <ContentPresenter
+                            x:Name="ContentPresenter"
+                            Grid.Column="1"
+                            Margin="8,0,0,0"
+                            VerticalAlignment="Center"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            IsVisible="{TemplateBinding Content,
+                                                        Converter={x:Static ObjectConverters.IsNotNull}}"
+                            RecognizesAccessKey="True"
+                            TextWrapping="Wrap" />
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <!--  Unchecked Pointerover State  -->
+        <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCardPointeroverBackground}" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Pressed State  -->
+        <Style Selector="^:pressed">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPressedBorderBrush}" />
+            </Style>
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCardPressedBackground}" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Disabled state  -->
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
+            </Style>
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultDisabledBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultDisabledBackground}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:checked">
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCardCheckedBackground}" />
+            </Style>
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
+            </Style>
+
+            <Style Selector="^ /template/ PathIcon#CheckGlyph">
+                <Setter Property="Data" Value="{DynamicResource CheckBoxCheckGlyph}" />
+                <Setter Property="Opacity" Value="1" />
+            </Style>
+
+            <!--  Checked Pointerover State  -->
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Pressed State  -->
+            <Style Selector="^:pressed">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPressedBorderBrush}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Disabled State  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
+                </Style>
+
+                <Style Selector="^ /template/ Path#CheckGlyph">
+                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^:indeterminate">
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
+            </Style>
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
+            </Style>
+
+            <Style Selector="^ /template/ PathIcon#CheckGlyph">
+                <Setter Property="Data" Value="{DynamicResource CheckBoxIndeterminateGlyph}" />
+                <Setter Property="Opacity" Value="1" />
+            </Style>
+
+            <!--  Checked Pointerover State  -->
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Pressed State  -->
+            <Style Selector="^:pressed">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPressedBorderBrush}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Disabled State  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
+                </Style>
+
+                <Style Selector="^ /template/ Path#CheckGlyph">
+                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
+                </Style>
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="PureCardCheckBox" TargetType="CheckBox">
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Padding" Value="{DynamicResource CheckBoxCardPadding}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource CheckBoxCardBorderThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxCardCornerRadius}" />
+        <Setter Property="CheckBox.VerticalContentAlignment" Value="Center" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="CheckBox.Template">
+            <ControlTemplate TargetType="CheckBox">
+                <ContentPresenter
+                    x:Name="PART_ContentPresenter"
+                    Margin="{TemplateBinding Margin}"
+                    Padding="{TemplateBinding Padding}"
+                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    RecognizesAccessKey="True"
+                    UseLayoutRounding="False" />
+            </ControlTemplate>
+        </Setter>
+
+        <!--  Unchecked Pointerover State  -->
+        <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCardPointeroverBackground}" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Pressed State  -->
+        <Style Selector="^:pressed">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCardPressedBackground}" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Disabled state  -->
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:checked">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCardCheckedBackground}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPressedBorderBrush}" />
+            </Style>
+            <!--  Checked Disabled State  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^:indeterminate">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPressedBorderBrush}" />
+            </Style>
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
                 </Style>
             </Style>
         </Style>

src/Semi.Avalonia/Controls/ComboBox.axaml

@@ -31,9 +31,7 @@
         <Setter Property="Padding" Value="{DynamicResource ComboBoxSelectorDefaultPadding}" />
         <Setter Property="FocusAdorner" Value="{x:Null}" />
         <Setter Property="MaxDropDownHeight" Value="504" />
-        <Setter Property="Foreground" Value="{DynamicResource ComboBoxForeground}" />
         <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorBackground}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBorderBrush}" />
         <Setter Property="BorderThickness" Value="1" />
         <Setter Property="CornerRadius" Value="{DynamicResource ComboBoxSelectorCornerRadius}" />
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
@@ -63,6 +61,7 @@
                         Margin="{TemplateBinding Padding}"
                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                        Foreground="{TemplateBinding Foreground}"
                         IsVisible="{TemplateBinding SelectionBoxItem,
                                                     Converter={x:Static ObjectConverters.IsNull}}"
                         Opacity="0.3"
@@ -139,13 +138,13 @@
             <Setter Property="ComboBox.MinHeight" Value="{DynamicResource ComboBoxSmallHeight}" />
         </Style>
 
-        <!--  PointerOver State  -->
+        <!--  Pointerover State  -->
         <Style Selector="^:pointerover">
-            <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorPointerOverBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorPointerOverBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorPointeroverBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorPointeroverBorderBrush}" />
         </Style>
         <Style Selector="^:pointerover /template/ PathIcon#DropDownGlyph">
-            <Setter Property="Foreground" Value="{DynamicResource ComboBoxIconPointerOverForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ComboBoxIconPointeroverForeground}" />
         </Style>
 
         <!--  Pressed State  -->
@@ -228,7 +227,7 @@
         </Setter>
 
         <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Background" Value="{DynamicResource ComboBoxItemPointerOverBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ComboBoxItemPointeroverBackground}" />
         </Style>
 
         <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
@@ -247,7 +246,7 @@
                 <Setter Property="Background" Value="{DynamicResource ComboBoxItemSelectedDisabledBackground}" />
             </Style>
             <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Background" Value="{DynamicResource ComboBoxItemSelectedPointerOverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ComboBoxItemSelectedPointeroverBackground}" />
             </Style>
         </Style>
     </ControlTheme>

src/Semi.Avalonia/Controls/Controls.axaml

@@ -18,7 +18,8 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ContextMenu.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/DatePicker.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/DateTimePickerShared.axaml" />
-        <ResourceInclude Source="avares://Semi.Avalonia/Controls/DropdownButton.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/DropDownButton.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/EmbeddableControlRoot.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Expander.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/FlyoutPresenter.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/GridSplitter.axaml" />

src/Semi.Avalonia/Controls/DatePicker.axaml

@@ -92,8 +92,7 @@
                                 <PathIcon
                                     Width="12"
                                     Height="12"
-                                    Data="{DynamicResource DateTimePickerAcceptGlyph}"
-                                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
+                                    Data="{DynamicResource DateTimePickerAcceptGlyph}" />
                             </Button>
                             <Button
                                 Name="PART_DismissButton"
@@ -105,8 +104,7 @@
                                 <PathIcon
                                     Width="12"
                                     Height="12"
-                                    Data="{DynamicResource DateTimePickerDismissGlyph}"
-                                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
+                                    Data="{DynamicResource DateTimePickerDismissGlyph}" />
                             </Button>
                             <Rectangle
                                 Grid.ColumnSpan="2"
@@ -214,7 +212,7 @@
                     <Popup
                         Name="PART_Popup"
                         IsLightDismissEnabled="True"
-                        PlacementMode="Bottom"
+                        Placement="Bottom"
                         PlacementTarget="{TemplateBinding}"
                         WindowManagerAddShadowHint="False">
                         <DatePickerPresenter Name="PART_PickerPresenter" />

src/Semi.Avalonia/Controls/DateTimePickerShared.axaml

@@ -103,8 +103,7 @@
                     Height="8"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
-                    Data="{DynamicResource DateTimePickerButtonUpGlyph}"
-                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
+                    Data="{DynamicResource DateTimePickerButtonUpGlyph}" />
             </Template>
         </Setter>
     </ControlTheme>
@@ -125,8 +124,7 @@
                     Height="8"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
-                    Data="{DynamicResource DateTimePickerButtonDownGlyph}"
-                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
+                    Data="{DynamicResource DateTimePickerButtonDownGlyph}" />
             </Template>
         </Setter>
     </ControlTheme>

src/Semi.Avalonia/Controls/DropDownButton.axaml

@@ -16,6 +16,7 @@
         <Setter Property="DropDownButton.HorizontalContentAlignment" Value="Center" />
         <Setter Property="DropDownButton.VerticalContentAlignment" Value="Center" />
         <Setter Property="DropDownButton.MinHeight" Value="12" />
+        <Setter Property="DropDownButton.Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="DropDownButton">
                 <Border
@@ -43,8 +44,8 @@
                             Margin="0,0,8,0"
                             HorizontalAlignment="Right"
                             VerticalAlignment="Center"
-                            Data="{DynamicResource DropdownButtonIconGlyph}"
-                            Foreground="{DynamicResource ComboBoxDropDownGlyphForeground}"
+                            Data="{DynamicResource DropDownButtonIconGlyph}"
+                            Foreground="{TemplateBinding Foreground}"
                             IsHitTestVisible="False"
                             UseLayoutRounding="False" />
                     </Grid>
@@ -96,7 +97,7 @@
         </Style>
     </ControlTheme>
 
-    <ControlTheme x:Key="SolidDropdownButton" TargetType="DropDownButton">
+    <ControlTheme x:Key="SolidDropDownButton" TargetType="DropDownButton">
         <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
         <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
         <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidPrimaryBorderBrush}" />
@@ -109,6 +110,7 @@
         <Setter Property="DropDownButton.HorizontalContentAlignment" Value="Center" />
         <Setter Property="DropDownButton.VerticalContentAlignment" Value="Center" />
         <Setter Property="DropDownButton.MinHeight" Value="12" />
+        <Setter Property="DropDownButton.Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="DropDownButton">
                 <Border
@@ -136,8 +138,8 @@
                             Margin="0,0,8,0"
                             HorizontalAlignment="Right"
                             VerticalAlignment="Center"
-                            Data="{DynamicResource DropdownButtonIconGlyph}"
-                            Foreground="{DynamicResource ComboBoxDropDownGlyphForeground}"
+                            Data="{DynamicResource DropDownButtonIconGlyph}"
+                            Foreground="{TemplateBinding Foreground}"
                             IsHitTestVisible="False"
                             UseLayoutRounding="False" />
                     </Grid>
@@ -223,7 +225,7 @@
     </ControlTheme>
 
     <ControlTheme
-        x:Key="BorderlessDropdownButton"
+        x:Key="BorderlessDropDownButton"
         BasedOn="{StaticResource {x:Type DropDownButton}}"
         TargetType="DropDownButton">
         <Setter Property="DropDownButton.Background" Value="Transparent" />

src/Semi.Avalonia/Controls/EmbeddableControlRoot.axaml

@@ -0,0 +1,26 @@
+<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}" />
+        <Setter Property="FontSize" Value="{DynamicResource DefaultFontSize}" />
+        <Setter Property="FontFamily" Value="{DynamicResource DefaultFontFamily}" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Panel>
+                    <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
+                    <Border Background="{TemplateBinding Background}">
+                        <VisualLayerManager>
+                            <ContentPresenter
+                                Name="PART_ContentPresenter"
+                                Margin="{TemplateBinding Padding}"
+                                Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}" />
+                        </VisualLayerManager>
+                    </Border>
+                </Panel>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/GridSplitter.axaml

@@ -6,6 +6,7 @@
         <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="Background" Value="{DynamicResource GridSplitterBackground}" />
         <Setter Property="PreviewContent">

src/Semi.Avalonia/Controls/Label.axaml

@@ -99,9 +99,6 @@
                     RecognizesAccessKey="True" />
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:disabled">
-            <Setter Property="Label.Foreground" Value="{DynamicResource TextBlockDisabledForeground}" />
-        </Style>
         <Style Selector="^.Secondary">
             <Setter Property="Label.Foreground" Value="{DynamicResource TextBlockSecondaryForeground}" />
         </Style>
@@ -133,6 +130,9 @@
             <Setter Property="Label.FontFamily" Value="{DynamicResource CodeFontFamily}" />
             <Setter Property="Label.FontSize" Value="{DynamicResource TextBlockCodeFontSize}" />
         </Style>
+        <Style Selector="^:disabled">
+            <Setter Property="Label.Foreground" Value="{DynamicResource TextBlockDisabledForeground}" />
+        </Style>
     </ControlTheme>
     <ControlTheme
         x:Key="TitleLabel"

src/Semi.Avalonia/Controls/ListBox.axaml

@@ -70,9 +70,9 @@
             </Style>
         </Style>
 
-        <!--  PointerOver State  -->
+        <!--  Pointerover State  -->
         <Style Selector="^:pointerover">
-            <Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemPointerOverBackground}" />
+            <Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemPointeroverBackground}" />
         </Style>
 
         <!--  Pressed State  -->

src/Semi.Avalonia/Controls/ManagedFileChooser.axaml

@@ -31,7 +31,7 @@
                         <ListBox
                             x:Name="PART_QuickLinks"
                             Focusable="False"
-                            Items="{Binding QuickLinks}"
+                            ItemsSource="{Binding QuickLinks}"
                             SelectedIndex="{Binding QuickLinksSelectedIndex}">
                             <ListBox.ItemTemplate>
                                 <DataTemplate>
@@ -74,7 +74,7 @@
                                 Margin="8,0,0,0"
                                 DockPanel.Dock="Right"
                                 IsVisible="{Binding ShowFilters}"
-                                Items="{Binding Filters}"
+                                ItemsSource="{Binding Filters}"
                                 SelectedItem="{Binding SelectedFilter}" />
                             <TextBox
                                 IsVisible="{Binding !SelectingFolder}"
@@ -142,7 +142,7 @@
                             </Grid>
                             <ListBox
                                 Name="PART_Files"
-                                Items="{Binding Items}"
+                                ItemsSource="{Binding Items}"
                                 SelectedItems="{Binding SelectedItems}"
                                 SelectionMode="{Binding SelectionMode}">
                                 <ListBox.ItemTemplate>

src/Semi.Avalonia/Controls/Menu.axaml

@@ -65,25 +65,20 @@
                     <ScrollContentPresenter
                         Name="PART_ContentPresenter"
                         Margin="{TemplateBinding Padding}"
-                        CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
-                        CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
-                        Content="{TemplateBinding Content}"
-                        Extent="{TemplateBinding Extent,
-                                                 Mode=TwoWay}"
-                        Viewport="{TemplateBinding Viewport,
-                                                   Mode=TwoWay}"
-                        Offset="{TemplateBinding Offset,
-                                                 Mode=TwoWay}">
+                        HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
+                        HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
+                        VerticalSnapPointsAlignment="{TemplateBinding VerticalSnapPointsAlignment}"
+                        VerticalSnapPointsType="{TemplateBinding VerticalSnapPointsType}">
                         <ScrollContentPresenter.GestureRecognizers>
-                            <ScrollGestureRecognizer CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}" CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" />
+                            <ScrollGestureRecognizer
+                                CanHorizontallyScroll="{Binding CanHorizontallyScroll, ElementName=PART_ContentPresenter}"
+                                CanVerticallyScroll="{Binding CanVerticallyScroll, ElementName=PART_ContentPresenter}"
+                                IsScrollInertiaEnabled="{Binding IsScrollInertiaEnabled, RelativeSource={RelativeSource TemplatedParent}}" />
                         </ScrollContentPresenter.GestureRecognizers>
                     </ScrollContentPresenter>
                 </DockPanel>
             </ControlTemplate>
         </Setter>
-        <Style Selector="^ /template/ RepeatButton:pointerover &gt; PathIcon">
-            <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonArrowForegroundPointerOver}" />
-        </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type Separator}" TargetType="Separator">
@@ -179,7 +174,7 @@
                         IsLightDismissEnabled="False"
                         IsOpen="{TemplateBinding IsSubMenuOpen,
                                                  Mode=TwoWay}"
-                        PlacementMode="Right"
+                        Placement="RightEdgeAlignedTop"
                         VerticalOffset="-4"
                         WindowManagerAddShadowHint="False">
                         <Border
@@ -235,7 +230,7 @@
         </Style>
 
         <Style Selector="^:open /template/ PathIcon#PART_ExpandIcon">
-            <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutSubItemChevronSubMenuOpened}" />
+            <Setter Property="Foreground" Value="{DynamicResource MenuItemExpandIconOpenForeground}" />
         </Style>
 
         <Style Selector="^:empty /template/ PathIcon#PART_ExpandIcon">
@@ -281,6 +276,7 @@
                             IsOpen="{TemplateBinding IsSubMenuOpen,
                                                      Mode=TwoWay}"
                             OverlayInputPassThroughElement="{Binding $parent[Menu]}"
+                            Placement="BottomEdgeAlignedLeft"
                             VerticalOffset="-4"
                             WindowManagerAddShadowHint="False">
                             <Border

src/Semi.Avalonia/Controls/NumericUpDown.axaml

@@ -5,6 +5,7 @@
     <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type NumericUpDown}" TargetType="NumericUpDown">
         <Setter Property="NumericUpDown.VerticalContentAlignment" Value="Center" />
+        <Setter Property="NumericUpDown.MinHeight" Value="{DynamicResource NumericUpDownWrapperDefaultHeight}" />
         <Setter Property="NumericUpDown.CornerRadius" Value="{DynamicResource NumericUpDownCornerRadius}" />
         <Setter Property="NumericUpDown.Template">
             <ControlTemplate TargetType="NumericUpDown">
@@ -21,6 +22,8 @@
                     ShowButtonSpinner="{TemplateBinding ShowButtonSpinner}">
                     <TextBox
                         Name="PART_TextBox"
+                        Height="{TemplateBinding Height}"
+                        MinHeight="{TemplateBinding MinHeight}"
                         HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                         VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                         AcceptsReturn="False"
@@ -34,6 +37,13 @@
                 </ButtonSpinner>
             </ControlTemplate>
         </Setter>
+
+        <Style Selector="^.Large">
+            <Setter Property="MinHeight" Value="{DynamicResource NumericUpDownWrapperLargeHeight}" />
+        </Style>
+        <Style Selector="^.Small">
+            <Setter Property="MinHeight" Value="{DynamicResource NumericUpDownWrapperSmallHeight}" />
+        </Style>
     </ControlTheme>
 
 </ResourceDictionary>

src/Semi.Avalonia/Controls/RadioButton.axaml

@@ -35,7 +35,7 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <Grid ColumnDefinitions="Auto,*">
-                        <Grid Margin="{DynamicResource RadioButtonIconMargin}" VerticalAlignment="Top">
+                        <Grid Margin="{DynamicResource RadioButtonIconMargin}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                             <Ellipse
                                 Name="OuterEllipse"
                                 Width="{DynamicResource RadioButtonIconRadius}"
@@ -72,37 +72,7 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  PointerOver State  -->
-        <Style Selector="^:checked">
-            <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDefaultBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDefaultBackground}" />
-            </Style>
-            <Style Selector="^ /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="1" />
-            </Style>
-            <Style Selector="^:disabled /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDisabledBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
-            </Style>
-            <Style Selector="^:disabled /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="1" />
-            </Style>
-            <Style Selector="^:pointerover /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointOverBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointOverBackground}" />
-            </Style>
-            <Style Selector="^:pointerover /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="1" />
-            </Style>
-            <Style Selector="^:pressed /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPressedBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPressedBackground}" />
-            </Style>
-            <Style Selector="^:pressed /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="1" />
-            </Style>
-        </Style>
+        <!--  Unchecked State  -->
         <Style Selector="^:unchecked">
             <Style Selector="^ /template/ Ellipse#OuterEllipse">
                 <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" />
@@ -111,32 +81,95 @@
             <Style Selector="^ /template/ Ellipse#CheckGlyph">
                 <Setter Property="Ellipse.Opacity" Value="0" />
             </Style>
-            <Style Selector="^:disabled /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDisabledBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDisabledBackground}" />
+
+            <!--  Unchecked Pointerover State  -->
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointeroverBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPointeroverBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="0" />
+                </Style>
             </Style>
-            <Style Selector="^:disabled /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="0" />
+
+            <!--  Unchecked Pressed State  -->
+            <Style Selector="^:pressed">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPressedBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="0" />
+                </Style>
             </Style>
-            <Style Selector="^:pointerover /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointOverBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPointOverBackground}" />
+
+            <!--  Unchecked Disabled state  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDisabledBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDisabledBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="0" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
+                </Style>
             </Style>
-            <Style Selector="^:pointerover /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="0" />
+        </Style>
+
+        <!--  Checked State  -->
+        <Style Selector="^:checked">
+            <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDefaultBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDefaultBackground}" />
             </Style>
-            <Style Selector="^:pressed /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPressedBackground}" />
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="1" />
             </Style>
-            <Style Selector="^:pressed /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="0" />
+
+            <!--  Checked Pointerover State  -->
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="1" />
+                </Style>
+            </Style>
+
+            <!--  Checked Pressed State  -->
+            <Style Selector="^:pressed">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPressedBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPressedBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="1" />
+                </Style>
+            </Style>
+
+            <!--  Checked Disabled State  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDisabledBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="1" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
+                </Style>
             </Style>
         </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="ButtonRadioButton" TargetType="RadioButton">
         <Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonButtonCornerRadius}" />
+        <Setter Property="RadioButton.VerticalContentAlignment" Value="Center" />
         <Setter Property="RadioButton.Margin" Value="2" />
         <Setter Property="RadioButton.Cursor" Value="Hand" />
         <Setter Property="RadioButton.FontWeight" Value="{DynamicResource RadioButtonButtonFontWeight}" />
@@ -163,15 +196,21 @@
                     UseLayoutRounding="False" />
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:checked">
-            <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonButtonCheckedBackground}" />
-            <Setter Property="RadioButton.Foreground" Value="{DynamicResource RadioButtonButtonCheckedForeground}" />
-        </Style>
         <Style Selector="^:unchecked">
             <Setter Property="RadioButton.Background" Value="Transparent" />
             <Style Selector="^:pointerover">
                 <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonButtonUncheckedPointeroverBackground}" />
             </Style>
+            <Style Selector="^:disabled">
+                <Setter Property="RadioButton.Foreground" Value="{DynamicResource RadioButtonButtonUncheckedDisabledForeground}" />
+            </Style>
+        </Style>
+        <Style Selector="^:checked">
+            <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonButtonCheckedBackground}" />
+            <Setter Property="RadioButton.Foreground" Value="{DynamicResource RadioButtonButtonCheckedForeground}" />
+            <Style Selector="^:disabled">
+                <Setter Property="RadioButton.Foreground" Value="{DynamicResource RadioButtonButtonCheckedDisabledForeground}" />
+            </Style>
         </Style>
         <Style Selector="^.Small">
             <Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonButtonSmallFontSize}" />
@@ -189,7 +228,7 @@
         <Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonCardCornerRadius}" />
         <Setter Property="RadioButton.Cursor" Value="Hand" />
         <Setter Property="RadioButton.HorizontalAlignment" Value="Left" />
-        <Setter Property="RadioButton.VerticalAlignment" Value="Top" />
+        <Setter Property="RadioButton.VerticalAlignment" Value="Center" />
         <Setter Property="RadioButton.HorizontalContentAlignment" Value="Left" />
         <Setter Property="RadioButton.VerticalContentAlignment" Value="Center" />
         <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardDefaultBackground}" />
@@ -204,7 +243,10 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid ColumnDefinitions="Auto,*">
+                    <Grid
+                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                        ColumnDefinitions="Auto,*">
                         <Grid Margin="{DynamicResource RadioButtonIconMargin}" VerticalAlignment="Top">
                             <Ellipse
                                 Name="OuterEllipse"
@@ -229,7 +271,6 @@
                         <ContentPresenter
                             Name="PART_ContentPresenter"
                             Grid.Column="1"
-                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
@@ -242,7 +283,54 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  PointerOver State  -->
+        <!--  Unchecked State  -->
+        <Style Selector="^:unchecked">
+            <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDefaultBackground}" />
+            </Style>
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="0" />
+            </Style>
+
+            <!--  Unchecked Pointerover State  -->
+            <Style Selector="^:pointerover">
+                <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPointeroverBackground}" />
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointeroverBorderBrush}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="0" />
+                </Style>
+            </Style>
+
+            <!--  Unchecked Pressed State  -->
+            <Style Selector="^:pressed">
+                <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPressedBackground}" />
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="0" />
+                </Style>
+            </Style>
+
+            <!--  Unchecked Disabled state  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDisabledBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDisabledBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="0" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
+                </Style>
+            </Style>
+        </Style>
+
+        <!--  Checked State  -->
         <Style Selector="^:checked">
             <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
             <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
@@ -253,27 +341,24 @@
             <Style Selector="^ /template/ Ellipse#CheckGlyph">
                 <Setter Property="Ellipse.Opacity" Value="1" />
             </Style>
-            <Style Selector="^:disabled /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDisabledBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
-            </Style>
-            <Style Selector="^:disabled /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="1" />
-            </Style>
+
+            <!--  Checked Pointerover State  -->
             <Style Selector="^:pointerover">
-                <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPointOverBorderBrush}" />
+                <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPointeroverBorderBrush}" />
                 <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointOverBorderBrush}" />
-                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointOverBackground}" />
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
                 </Style>
                 <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointOverBorderBrush}" />
-                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointOverBackground}" />
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
                 </Style>
                 <Style Selector="^ /template/ Ellipse#CheckGlyph">
                     <Setter Property="Ellipse.Opacity" Value="1" />
                 </Style>
             </Style>
+
+            <!--  Checked Pressed State  -->
             <Style Selector="^:pressed">
                 <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPressedBorderBrush}" />
                 <Style Selector="^ /template/ Ellipse#OuterEllipse">
@@ -284,38 +369,22 @@
                     <Setter Property="Ellipse.Opacity" Value="1" />
                 </Style>
             </Style>
-        </Style>
-        <Style Selector="^:unchecked">
-            <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDefaultBackground}" />
-            </Style>
-            <Style Selector="^ /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="0" />
-            </Style>
-            <Style Selector="^:disabled /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDisabledBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDisabledBackground}" />
-            </Style>
-            <Style Selector="^:disabled /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="0" />
-            </Style>
-            <Style Selector="^:pointerover">
-                <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPointOverBackground}" />
+
+            <!--  Checked Disabled State  -->
+            <Style Selector="^:disabled">
                 <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointOverBorderBrush}" />
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDisabledBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
                 </Style>
                 <Style Selector="^ /template/ Ellipse#CheckGlyph">
-                    <Setter Property="Ellipse.Opacity" Value="0" />
+                    <Setter Property="Ellipse.Opacity" Value="1" />
                 </Style>
-            </Style>
-            <Style Selector="^:pressed">
-                <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPressedBackground}" />
-                <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
+                    <Setter Property="Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
                 </Style>
-                <Style Selector="^ /template/ Ellipse#CheckGlyph">
-                    <Setter Property="Ellipse.Opacity" Value="0" />
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
                 </Style>
             </Style>
         </Style>
@@ -324,10 +393,10 @@
     <ControlTheme x:Key="PureCardRadioButton" TargetType="RadioButton">
         <Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonCardCornerRadius}" />
         <Setter Property="RadioButton.Cursor" Value="Hand" />
+        <Setter Property="RadioButton.VerticalContentAlignment" Value="Center" />
         <Setter Property="RadioButton.BorderThickness" Value="1" />
         <Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonFontSize}" />
         <Setter Property="RadioButton.Padding" Value="{DynamicResource RadioButtonCardPadding}" />
-        <Setter Property="RadioButton.Foreground" Value="{DynamicResource RadioButtonButtonUncheckedForeground}" />
         <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardDefaultBackground}" />
         <Setter Property="RadioButton.Template">
             <ControlTemplate TargetType="RadioButton">
@@ -344,29 +413,40 @@
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}"
                     RecognizesAccessKey="True"
-                    TextElement.FontSize="{TemplateBinding FontSize}"
-                    TextElement.FontWeight="{TemplateBinding FontWeight}"
                     UseLayoutRounding="False" />
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:checked">
-            <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
-            <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
-            <Style Selector="^:pointerover">
-                <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPointOverBorderBrush}" />
-            </Style>
-            <Style Selector="^:pressed">
-                <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPressedBorderBrush}" />
-            </Style>
-        </Style>
         <Style Selector="^:unchecked">
             <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardDefaultBorderBrush}" />
             <Style Selector="^:pointerover">
-                <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPointOverBackground}" />
+                <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPointeroverBackground}" />
             </Style>
             <Style Selector="^:pressed">
                 <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPressedBackground}" />
             </Style>
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
+                </Style>
+            </Style>
         </Style>
+        <Style Selector="^:checked">
+            <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
+            <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPressedBorderBrush}" />
+            </Style>
+            <Style Selector="^:disabled">
+                <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
+                <Setter Property="Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
+                </Style>
+            </Style>
+        </Style>
+
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/RepeatButton.axaml

@@ -15,6 +15,7 @@
         <Setter Property="RepeatButton.HorizontalContentAlignment" Value="Center" />
         <Setter Property="RepeatButton.VerticalContentAlignment" Value="Center" />
         <Setter Property="RepeatButton.MinHeight" Value="12" />
+        <Setter Property="RepeatButton.Cursor" Value="Hand" />
         <Setter Property="RepeatButton.Template">
             <ControlTemplate TargetType="RepeatButton">
                 <ContentPresenter

src/Semi.Avalonia/Controls/ScrollViewer.axaml

@@ -197,7 +197,7 @@
             <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
         </Style>
         <Style Selector="^ /template/ RepeatButton:pointerover &gt; Path">
-            <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonPointerOverForeground}" />
+            <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonPointeroverForeground}" />
         </Style>
 
     </ControlTheme>
@@ -210,48 +210,27 @@
                         Name="PART_ContentPresenter"
                         Padding="{TemplateBinding Padding}"
                         Background="{TemplateBinding Background}"
-                        CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
-                        CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
-                        Content="{TemplateBinding Content}"
-                        Extent="{TemplateBinding Extent,
-                                                 Mode=TwoWay}"
-                        IsScrollChainingEnabled="{TemplateBinding IsScrollChainingEnabled}"
-                        Viewport="{TemplateBinding Viewport,
-                                                   Mode=TwoWay}"
-                        Offset="{TemplateBinding Offset,
-                                                 Mode=TwoWay}">
+                        HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
+                        HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
+                        VerticalSnapPointsAlignment="{TemplateBinding VerticalSnapPointsAlignment}"
+                        VerticalSnapPointsType="{TemplateBinding VerticalSnapPointsType}">
                         <ScrollContentPresenter.GestureRecognizers>
-                            <ScrollGestureRecognizer CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}" CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" />
+                            <ScrollGestureRecognizer
+                                CanHorizontallyScroll="{Binding CanHorizontallyScroll, ElementName=PART_ContentPresenter}"
+                                CanVerticallyScroll="{Binding CanVerticallyScroll, ElementName=PART_ContentPresenter}"
+                                IsScrollInertiaEnabled="{Binding IsScrollInertiaEnabled, RelativeSource={RelativeSource TemplatedParent}}" />
                         </ScrollContentPresenter.GestureRecognizers>
                     </ScrollContentPresenter>
                     <ScrollBar
-                        Name="horizontalScrollBar"
+                        Name="PART_HorizontalScrollBar"
                         Grid.Row="1"
                         Grid.Column="0"
-                        Focusable="False"
-                        LargeChange="{Binding LargeChange.Width, RelativeSource={RelativeSource TemplatedParent}}"
-                        Maximum="{TemplateBinding HorizontalScrollBarMaximum}"
-                        Opacity="0"
-                        Orientation="Horizontal"
-                        SmallChange="{Binding SmallChange.Width, RelativeSource={RelativeSource TemplatedParent}}"
-                        ViewportSize="{TemplateBinding HorizontalScrollBarViewportSize}"
-                        Visibility="{TemplateBinding HorizontalScrollBarVisibility}"
-                        Value="{TemplateBinding HorizontalScrollBarValue,
-                                                Mode=TwoWay}" />
+                        Orientation="Horizontal" />
                     <ScrollBar
-                        Name="verticalScrollBar"
+                        Name="PART_VerticalScrollBar"
                         Grid.Row="0"
                         Grid.Column="1"
-                        Focusable="False"
-                        LargeChange="{Binding LargeChange.Height, RelativeSource={RelativeSource TemplatedParent}}"
-                        Maximum="{TemplateBinding VerticalScrollBarMaximum}"
-                        Opacity="0"
-                        Orientation="Vertical"
-                        SmallChange="{Binding SmallChange.Height, RelativeSource={RelativeSource TemplatedParent}}"
-                        ViewportSize="{TemplateBinding VerticalScrollBarViewportSize}"
-                        Visibility="{TemplateBinding VerticalScrollBarVisibility}"
-                        Value="{TemplateBinding VerticalScrollBarValue,
-                                                Mode=TwoWay}" />
+                        Orientation="Vertical" />
                     <Panel
                         Grid.Row="1"
                         Grid.Column="1"
@@ -304,18 +283,7 @@
                         </RepeatButton.IsVisible>
                         <Path Data="M 0 0 L 4 4 L 8 0 Z" />
                     </RepeatButton>
-                    <ScrollContentPresenter
-                        Name="PART_ContentPresenter"
-                        Margin="{TemplateBinding Padding}"
-                        CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
-                        CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
-                        Content="{TemplateBinding Content}"
-                        Extent="{TemplateBinding Extent,
-                                                 Mode=TwoWay}"
-                        Viewport="{TemplateBinding Viewport,
-                                                   Mode=TwoWay}"
-                        Offset="{TemplateBinding Offset,
-                                                 Mode=TwoWay}" />
+                    <ScrollContentPresenter Name="PART_ContentPresenter" Margin="{TemplateBinding Padding}" />
                 </DockPanel>
             </ControlTemplate>
         </Setter>
@@ -324,7 +292,7 @@
         </Style>
 
         <Style Selector="^ /template/ RepeatButton:pointerover &gt; Path">
-            <Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonPointerOverForeground}" />
+            <Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonPointeroverForeground}" />
         </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/SelectableTextBlock.axaml

@@ -17,9 +17,6 @@
         <Setter Property="SelectableTextBlock.FontSize" Value="{DynamicResource TextBlockFontSize}" />
         <Setter Property="SelectableTextBlock.Cursor" Value="Ibeam" />
         <Setter Property="SelectableTextBlock.SelectionBrush" Value="{DynamicResource TextBlockSelectionBackground}" />
-        <Style Selector="^:disabled">
-            <Setter Property="SelectableTextBlock.Foreground" Value="{DynamicResource TextBlockDisabledForeground}" />
-        </Style>
         <Style Selector="^.Secondary">
             <Setter Property="SelectableTextBlock.Foreground" Value="{DynamicResource TextBlockSecondaryForeground}" />
         </Style>
@@ -47,8 +44,18 @@
         <Style Selector="^.Delete">
             <Setter Property="SelectableTextBlock.TextDecorations" Value="StrikeThrough" />
         </Style>
+        <Style Selector="^.Underline.Delete">
+            <Setter Property="TextBlock.TextDecorations">
+                <TextDecorationCollection>
+                    <TextDecoration Location="Underline" />
+                    <TextDecoration Location="Strikethrough" />
+                </TextDecorationCollection>
+            </Setter>
+        </Style>
+        <Style Selector="^:disabled">
+            <Setter Property="SelectableTextBlock.Foreground" Value="{DynamicResource TextBlockDisabledForeground}" />
+        </Style>
         <Style Selector="^[IsEnabled=True]">
-            <Setter Property="Cursor" Value="IBeam" />
             <Setter Property="ContextFlyout" Value="{StaticResource SelectableTextBlockContextFlyout}" />
         </Style>
     </ControlTheme>
@@ -75,5 +82,8 @@
         <Style Selector="^.H6">
             <Setter Property="SelectableTextBlock.FontSize" Value="{DynamicResource TextBlockTitleH6FontSize}" />
         </Style>
+        <Style Selector="^:disabled">
+            <Setter Property="SelectableTextBlock.Foreground" Value="{DynamicResource TextBlockDisabledForeground}" />
+        </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/Slider.axaml

@@ -88,12 +88,7 @@
                                     <Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
                                 </Style>
                             </Grid.Styles>
-                            <Grid x:Name="HorizontalTemplate" MinHeight="50">
-                                <Grid.RowDefinitions>
-                                    <RowDefinition Height="15" />
-                                    <RowDefinition Height="Auto" />
-                                    <RowDefinition Height="15" />
-                                </Grid.RowDefinitions>
+                            <Grid x:Name="HorizontalTemplate" RowDefinitions="Auto,Auto,Auto">
                                 <TickBar
                                     Name="TopTickBar"
                                     Grid.Row="0"
@@ -177,15 +172,10 @@
                             <Grid
                                 x:Name="VerticalTemplate"
                                 MinWidth="{DynamicResource SliderVerticalWidth}"
-                                RowDefinitions="*,Auto,Auto">
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="{DynamicResource SliderPreContentMargin}" />
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="{DynamicResource SliderPostContentMargin}" />
-                                </Grid.ColumnDefinitions>
+                                ColumnDefinitions="Auto,Auto,Auto">
                                 <TickBar
                                     Name="LeftTickBar"
-                                    Grid.RowSpan="3"
+                                    Grid.Column="0"
                                     Width="{DynamicResource SliderTickVerticalWidth}"
                                     Margin="0,0,4,0"
                                     HorizontalAlignment="Right"
@@ -199,7 +189,6 @@
                                     Ticks="{TemplateBinding Ticks}" />
                                 <TickBar
                                     Name="RightTickBar"
-                                    Grid.RowSpan="3"
                                     Grid.Column="2"
                                     Width="{DynamicResource SliderTickVerticalWidth}"
                                     Margin="4,0,0,0"
@@ -214,9 +203,7 @@
                                     Ticks="{TemplateBinding Ticks}" />
                                 <Track
                                     Name="PART_Track"
-                                    Grid.RowSpan="3"
                                     Grid.Column="1"
-                                    Grid.ColumnSpan="1"
                                     IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
                                     Maximum="{TemplateBinding Maximum}"
                                     Minimum="{TemplateBinding Minimum}"

src/Semi.Avalonia/Controls/SplitButton.axaml

@@ -110,10 +110,100 @@
                 <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
             </Style>
         </Style>
-
+        <Style Selector="^.Large /template/ Button">
+            <Setter Property="Padding" Value="{DynamicResource ButtonLargePadding}" />
+        </Style>
+        <Style Selector="^.Small /template/ Button">
+            <Setter Property="Padding" Value="{DynamicResource ButtonSmallPadding}" />
+        </Style>
         <Style Selector="^:disabled /template/ Button">
             <Setter Property="Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
             <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
         </Style>
     </ControlTheme>
+
+    <ControlTheme
+        x:Key="SolidSplitButton"
+        BasedOn="{StaticResource {x:Type SplitButton}}"
+        TargetType="SplitButton">
+        <Setter Property="SplitButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+        <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
+        <Style Selector="^ /template/ Button">
+            <Style Selector="^:pointerover">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^.Primary /template/ Button">
+            <Setter Property="SplitButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
+            </Style>
+        </Style>
+        <Style Selector="^.Secondary /template/ Button">
+            <Setter Property="SplitButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidSecondaryBackground}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidSecondaryPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidSecondaryPressedBackground}" />
+            </Style>
+        </Style>
+        <Style Selector="^.Tertiary /template/ Button">
+            <Setter Property="SplitButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidTertiaryBackground}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidTertiaryPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidTertiaryPressedBackground}" />
+            </Style>
+        </Style>
+        <Style Selector="^.Warning /template/ Button">
+            <Setter Property="SplitButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidWarningBackground}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidWarningPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidWarningPressedBackground}" />
+            </Style>
+        </Style>
+        <Style Selector="^.Danger /template/ Button">
+            <Setter Property="SplitButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidDangerBackground}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidDangerPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidDangerPressedBackground}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:disabled /template/ Button">
+            <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
+            <Setter Property="SplitButton.Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="BorderlessSplitButton"
+        BasedOn="{StaticResource {x:Type SplitButton}}"
+        TargetType="SplitButton">
+        <Setter Property="SplitButton.Background" Value="Transparent" />
+        <Setter Property="SplitButton.BorderBrush" Value="Transparent" />
+        <Style Selector="^:disabled /template/ Button">
+            <Setter Property="SplitButton.BorderBrush" Value="Transparent" />
+            <Setter Property="SplitButton.Background" Value="Transparent" />
+            <Setter Property="SplitButton.Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/TextBlock.axaml

@@ -10,9 +10,6 @@
     <ControlTheme x:Key="{x:Type TextBlock}" TargetType="TextBlock">
         <!--<Setter Property="TextBlock.Foreground" Value="{DynamicResource TextBlockDefaultForeground}" />-->
         <Setter Property="TextBlock.FontSize" Value="{DynamicResource TextBlockFontSize}" />
-        <Style Selector="^:disabled">
-            <Setter Property="TextBlock.Foreground" Value="{DynamicResource TextBlockDisabledForeground}" />
-        </Style>
         <Style Selector="^.Secondary">
             <Setter Property="TextBlock.Foreground" Value="{DynamicResource TextBlockSecondaryForeground}" />
         </Style>
@@ -40,6 +37,17 @@
         <Style Selector="^.Delete">
             <Setter Property="TextBlock.TextDecorations" Value="StrikeThrough" />
         </Style>
+        <Style Selector="^.Underline.Delete">
+            <Setter Property="TextBlock.TextDecorations">
+                <TextDecorationCollection>
+                    <TextDecoration Location="Underline" />
+                    <TextDecoration Location="Strikethrough" />
+                </TextDecorationCollection>
+            </Setter>
+        </Style>
+        <Style Selector="^:disabled">
+            <Setter Property="TextBlock.Foreground" Value="{DynamicResource TextBlockDisabledForeground}" />
+        </Style>
     </ControlTheme>
     <ControlTheme
         x:Key="TitleTextBlock"
@@ -64,5 +72,8 @@
         <Style Selector="^.H6">
             <Setter Property="TextBlock.FontSize" Value="{DynamicResource TextBlockTitleH6FontSize}" />
         </Style>
+        <Style Selector="^:disabled">
+            <Setter Property="SelectableTextBlock.Foreground" Value="{DynamicResource TextBlockDisabledForeground}" />
+        </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/TextBox.axaml

@@ -61,7 +61,7 @@
                     </ControlTemplate>
                 </Setter>
                 <Style Selector="^:pointerover">
-                    <Setter Property="Button.Foreground" Value="{DynamicResource TextBoxButtonPointerOverForeground}" />
+                    <Setter Property="Button.Foreground" Value="{DynamicResource TextBoxButtonPointeroverForeground}" />
                 </Style>
             </ControlTheme>
             <ControlTheme x:Key="InputToggleButton" TargetType="ToggleButton">
@@ -94,7 +94,7 @@
         <Setter Property="TextBox.BorderThickness" Value="{DynamicResource TextBoxBorderThickness}" />
         <Setter Property="TextBox.CornerRadius" Value="{DynamicResource TextBoxDefaultCornerRadius}" />
         <Setter Property="TextBox.FontSize" Value="14" />
-        <Setter Property="TextBox.Cursor" Value="IBeam" />
+        <Setter Property="TextBox.Cursor" Value="Ibeam" />
         <Setter Property="TextBox.CaretBrush" Value="{DynamicResource TextBoxTextCaretBrush}" />
         <Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxWrapperDefaultHeight}" />
         <Setter Property="TextBox.Padding" Value="{DynamicResource TextBoxContentPadding}" />

src/Semi.Avalonia/Controls/TimePicker.axaml

@@ -96,8 +96,7 @@
                                 <PathIcon
                                     Width="12"
                                     Height="12"
-                                    Data="{DynamicResource DateTimePickerAcceptGlyph}"
-                                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
+                                    Data="{DynamicResource DateTimePickerAcceptGlyph}" />
                             </Button>
                             <Button
                                 Name="PART_DismissButton"
@@ -109,8 +108,7 @@
                                 <PathIcon
                                     Width="12"
                                     Height="12"
-                                    Data="{DynamicResource DateTimePickerDismissGlyph}"
-                                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
+                                    Data="{DynamicResource DateTimePickerDismissGlyph}" />
                             </Button>
                             <Rectangle
                                 Grid.ColumnSpan="2"
@@ -235,7 +233,7 @@
                     <Popup
                         Name="PART_Popup"
                         IsLightDismissEnabled="True"
-                        PlacementMode="Bottom"
+                        Placement="Bottom"
                         PlacementTarget="{TemplateBinding}"
                         WindowManagerAddShadowHint="False">
                         <TimePickerPresenter Name="PART_PickerPresenter" />

src/Semi.Avalonia/Controls/ToggleButton.axaml

@@ -4,17 +4,17 @@
     x:CompileBindings="True">
     <Design.PreviewWith>
         <StackPanel Margin="20">
-            <ToggleButton>Toggle</ToggleButton>
+            <ToggleButton Classes="Primary">Toggle</ToggleButton>
             <ToggleButton Classes="Secondary">Toggle</ToggleButton>
             <ToggleButton Classes="Tertiary">Toggle</ToggleButton>
             <ToggleButton Classes="Warning">Toggle</ToggleButton>
-            <ToggleButton Classes="Error">Toggle</ToggleButton>
+            <ToggleButton Classes="Danger">Toggle</ToggleButton>
 
-            <ToggleButton IsThreeState="True">Toggle 3</ToggleButton>
+            <ToggleButton Classes="Primary" IsThreeState="True">Toggle 3</ToggleButton>
             <ToggleButton Classes="Secondary" IsThreeState="True">Toggle 3</ToggleButton>
             <ToggleButton Classes="Tertiary" IsThreeState="True">Toggle 3</ToggleButton>
             <ToggleButton Classes="Warning" IsThreeState="True">Toggle 3</ToggleButton>
-            <ToggleButton Classes="Error" IsThreeState="True">Toggle 3</ToggleButton>
+            <ToggleButton Classes="Danger" IsThreeState="True">Toggle 3</ToggleButton>
         </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type ToggleButton}" TargetType="ToggleButton">
@@ -30,6 +30,7 @@
         <Setter Property="ToggleButton.HorizontalContentAlignment" Value="Center" />
         <Setter Property="ToggleButton.VerticalContentAlignment" Value="Center" />
         <Setter Property="ToggleButton.MinHeight" Value="12" />
+        <Setter Property="ToggleButton.Cursor" Value="Hand" />
         <Setter Property="ToggleButton.Template">
             <ControlTemplate TargetType="ToggleButton">
                 <ContentPresenter
@@ -54,25 +55,21 @@
             <Setter Property="RenderTransform" Value="scale(0.98)" />
         </Style>
 
-        <Style Selector="^.Large">
-            <Setter Property="ToggleButton.Padding" Value="{DynamicResource ButtonLargePadding}" />
-        </Style>
-        <Style Selector="^.Small">
-            <Setter Property="ToggleButton.Padding" Value="{DynamicResource ButtonSmallPadding}" />
-        </Style>
-
-
         <Style Selector="^:pointerover">
             <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonDefaultPointeroverBackground}" />
         </Style>
+
         <Style Selector="^:pressed">
             <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonDefaultPressedBackground}" />
         </Style>
+
         <Style Selector="^:disabled">
-            <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDefaultDisabledForeground}" />
-            <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonDefaultDisabledBackground}" />
+            <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonDefaultDisabledBorderBrush}" />
         </Style>
 
+        <Style Selector="^.Primary">
+            <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDefaultPrimaryForeground}" />
+        </Style>
         <Style Selector="^.Secondary">
             <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDefaultSecondaryForeground}" />
         </Style>
@@ -82,13 +79,16 @@
         <Style Selector="^.Warning">
             <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDefaultWarningForeground}" />
         </Style>
-        <Style Selector="^.Error">
-            <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDefaultErrorForeground}" />
+        <Style Selector="^.Danger">
+            <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDefaultDangerForeground}" />
         </Style>
 
         <Style Selector="^:checked">
             <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonCheckedForeground}" />
             <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonPrimaryCheckedBackground}" />
+            <Style Selector="^.Primary">
+                <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonPrimaryCheckedBackground}" />
+            </Style>
             <Style Selector="^.Secondary">
                 <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonSecondaryCheckedBackground}" />
             </Style>
@@ -98,11 +98,14 @@
             <Style Selector="^.Warning">
                 <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonWarningCheckedBackground}" />
             </Style>
-            <Style Selector="^.Error">
-                <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonErrorCheckedBackground}" />
+            <Style Selector="^.Danger">
+                <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonDangerCheckedBackground}" />
             </Style>
             <Style Selector="^:pointerover">
                 <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonPrimaryCheckedPointeroverBackground}" />
+                <Style Selector="^.Primary">
+                    <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonPrimaryCheckedPointeroverBackground}" />
+                </Style>
                 <Style Selector="^.Secondary">
                     <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonSecondaryCheckedPointeroverBackground}" />
                 </Style>
@@ -112,12 +115,15 @@
                 <Style Selector="^.Warning">
                     <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonWarningCheckedPointeroverBackground}" />
                 </Style>
-                <Style Selector="^.Error">
-                    <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonErrorCheckedPointeroverBackground}" />
+                <Style Selector="^.Danger">
+                    <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonDangerCheckedPointeroverBackground}" />
                 </Style>
             </Style>
             <Style Selector="^:pressed">
                 <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonPrimaryCheckedPressedBackground}" />
+                <Style Selector="^.Primary">
+                    <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonPrimaryCheckedPressedBackground}" />
+                </Style>
                 <Style Selector="^.Secondary">
                     <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonSecondaryCheckedPressedBackground}" />
                 </Style>
@@ -127,15 +133,23 @@
                 <Style Selector="^.Warning">
                     <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonWarningCheckedPressedBackground}" />
                 </Style>
-                <Style Selector="^.Error">
-                    <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonErrorCheckedPressedBackground}" />
+                <Style Selector="^.Danger">
+                    <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonDangerCheckedPressedBackground}" />
                 </Style>
             </Style>
+            <Style Selector="^:disabled">
+                <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonDefaultDisabledBorderBrush}" />
+            </Style>
         </Style>
+
         <Style Selector="^:indeterminate">
             <Setter Property="ToggleButton.BorderThickness" Value="1" />
             <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonPrimaryIndeterminateBorderBrush}" />
             <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonPrimaryIndeterminateBackground}" />
+            <Style Selector="^.Primary">
+                <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonPrimaryIndeterminateBackground}" />
+                <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonPrimaryIndeterminateBorderBrush}" />
+            </Style>
             <Style Selector="^.Secondary">
                 <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonSecondaryIndeterminateBackground}" />
                 <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonSecondaryIndeterminateBorderBrush}" />
@@ -148,41 +162,73 @@
                 <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonWarningIndeterminateBackground}" />
                 <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonWarningIndeterminateBorderBrush}" />
             </Style>
-            <Style Selector="^.Error">
-                <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonErrorIndeterminateBackground}" />
-                <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonErrorIndeterminateBorderBrush}" />
+            <Style Selector="^.Danger">
+                <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonDangerIndeterminateBackground}" />
+                <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonDangerIndeterminateBorderBrush}" />
             </Style>
             <Style Selector="^:pointerover">
                 <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonPrimaryIndeterminatePointeroverBorderBrush}" />
+                <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonPrimaryIndeterminatePointeroverForeground}" />
+                <Style Selector="^.Primary">
+                    <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonPrimaryIndeterminatePointeroverBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonPrimaryIndeterminatePointeroverForeground}" />
+                </Style>
                 <Style Selector="^.Secondary">
                     <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonSecondaryIndeterminatePointeroverBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonSecondaryIndeterminatePointeroverForeground}" />
                 </Style>
                 <Style Selector="^.Tertiary">
                     <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonTertiaryIndeterminatePointeroverBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonTertiaryIndeterminatePointeroverForeground}" />
                 </Style>
                 <Style Selector="^.Warning">
                     <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonWarningIndeterminatePointeroverBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonWarningIndeterminatePointeroverForeground}" />
                 </Style>
-                <Style Selector="^.Error">
-                    <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonErrorIndeterminatePointeroverBorderBrush}" />
+                <Style Selector="^.Danger">
+                    <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonDangerIndeterminatePointeroverBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDangerIndeterminatePointeroverForeground}" />
                 </Style>
             </Style>
             <Style Selector="^:pressed">
                 <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonPrimaryIndeterminatePressedBorderBrush}" />
+                <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonPrimaryIndeterminatePressedBorderBrush}" />
+                <Style Selector="^.Primary">
+                    <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonPrimaryIndeterminatePressedBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonPrimaryIndeterminatePressedForeground}" />
+                </Style>
                 <Style Selector="^.Secondary">
                     <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonSecondaryIndeterminatePressedBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonSecondaryIndeterminatePressedForeground}" />
                 </Style>
                 <Style Selector="^.Tertiary">
                     <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonTertiaryIndeterminatePressedBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonTertiaryIndeterminatePressedForeground}" />
                 </Style>
                 <Style Selector="^.Warning">
                     <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonWarningIndeterminatePressedBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonWarningIndeterminatePressedForeground}" />
                 </Style>
-                <Style Selector="^.Error">
-                    <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonErrorIndeterminatePressedBorderBrush}" />
+                <Style Selector="^.Danger">
+                    <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonDangerIndeterminatePressedBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDangerIndeterminatePressedForeground}" />
                 </Style>
             </Style>
+            <Style Selector="^:disabled">
+                <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonIndeterminateDisabledBorderBrush}" />
+            </Style>
         </Style>
 
+        <Style Selector="^:disabled">
+            <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDefaultDisabledForeground}" />
+            <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonDefaultDisabledBackground}" />
+        </Style>
+
+        <Style Selector="^.Large">
+            <Setter Property="ToggleButton.Padding" Value="{DynamicResource ButtonLargePadding}" />
+        </Style>
+        <Style Selector="^.Small">
+            <Setter Property="ToggleButton.Padding" Value="{DynamicResource ButtonSmallPadding}" />
+        </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/ToggleSwitch.axaml

@@ -11,12 +11,10 @@
         </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type ToggleSwitch}" TargetType="ToggleSwitch">
-        <Setter Property="Foreground" Value="{DynamicResource ToggleSwitchContentForeground}" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ToggleSwitch">
                 <Grid
@@ -30,6 +28,8 @@
                         VerticalAlignment="Top"
                         Content="{TemplateBinding Content}"
                         ContentTemplate="{TemplateBinding ContentTemplate}"
+                        IsVisible="{TemplateBinding Content,
+                                                    Converter={x:Static ObjectConverters.IsNotNull}}"
                         RecognizesAccessKey="True" />
                     <Grid
                         Grid.Row="1"
@@ -126,7 +126,7 @@
                 <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedDefaultBackground}" />
             </Style>
             <Style Selector="^:pointerover /template/ Border#SwitchBackgroundBorder">
-                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedPointerOverBackground}" />
+                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedPointeroverBackground}" />
             </Style>
             <Style Selector="^:pressed /template/ Border#SwitchBackgroundBorder">
                 <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedPressedBackground}" />
@@ -149,7 +149,7 @@
                 <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedDefaultBackground}" />
             </Style>
             <Style Selector="^:pointerover /template/ Border#SwitchBackgroundBorder">
-                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedPointerOverBackground}" />
+                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedPointeroverBackground}" />
             </Style>
             <Style Selector="^:pressed /template/ Border#SwitchBackgroundBorder">
                 <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedPressedBackground}" />
@@ -158,7 +158,102 @@
                 <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedDisabledBackground}" />
             </Style>
         </Style>
-
-
     </ControlTheme>
-</ResourceDictionary>
+
+    <ControlTheme
+        x:Key="ButtonToggleSwitch"
+        BasedOn="{StaticResource {x:Type ToggleSwitch}}"
+        TargetType="ToggleSwitch">
+        <Setter Property="Padding" Value="8" />
+        <Setter Property="CornerRadius" Value="3" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ToggleSwitch">
+                <Border
+                    Name="Background"
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    Cursor="Hand">
+                    <Grid ColumnDefinitions="Auto">
+                        <Grid x:Name="PART_SwitchKnob" />
+                        <Grid x:Name="PART_MovingKnobs" />
+                        <ContentPresenter
+                            x:Name="PART_OnContentPresenter"
+                            Margin="{DynamicResource ToggleSwitchOnContentMargin}"
+                            Content="{TemplateBinding OnContent}"
+                            ContentTemplate="{TemplateBinding OnContentTemplate}" />
+                        <ContentPresenter
+                            x:Name="PART_OffContentPresenter"
+                            Margin="{DynamicResource ToggleSwitchOnContentMargin}"
+                            Content="{TemplateBinding OffContent}"
+                            ContentTemplate="{TemplateBinding OffContentTemplate}" />
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover">
+            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
+        </Style>
+        <Style Selector="^:pressed">
+            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="SimpleToggleSwitch"
+        BasedOn="{StaticResource {x:Type ToggleSwitch}}"
+        TargetType="ToggleSwitch">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ToggleSwitch">
+                <Grid
+                    Background="{TemplateBinding Background}"
+                    Cursor="Hand"
+                    RowDefinitions="*">
+                    <Grid
+                        Grid.Row="0"
+                        Background="Transparent"
+                        ColumnDefinitions="Auto, *">
+                        <Grid
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
+                            TemplatedControl.IsTemplateFocusTarget="True" />
+                        <Border
+                            Name="SwitchBackgroundBorder"
+                            Grid.Column="0"
+                            Width="40"
+                            Height="20"
+                            CornerRadius="100">
+                            <Border.Transitions>
+                                <Transitions>
+                                    <BrushTransition Property="Background" Duration="0:0:0.2" />
+                                </Transitions>
+                            </Border.Transitions>
+                        </Border>
+                        <Canvas
+                            x:Name="PART_SwitchKnob"
+                            Grid.Column="0"
+                            Width="20"
+                            Height="20"
+                            HorizontalAlignment="Left">
+                            <Grid
+                                x:Name="PART_MovingKnobs"
+                                Width="20"
+                                Height="20">
+                                <Border
+                                    x:Name="SwitchKnobIndicator"
+                                    Width="14"
+                                    Height="14"
+                                    Background="White"
+                                    BorderBrush="{DynamicResource ToggleSwitchIndicatorBorderBrush}"
+                                    BorderThickness="0.5"
+                                    BoxShadow="0 0 1 1 #222E3238"
+                                    CornerRadius="100" />
+                            </Grid>
+                        </Canvas>
+                    </Grid>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/TreeView.axaml

@@ -93,7 +93,6 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type TreeViewItem}" TargetType="TreeViewItem">
-        <Setter Property="TreeViewItem.Padding" Value="0" />
         <Setter Property="TreeViewItem.Background" Value="{DynamicResource TreeViewItemDefaultBackground}" />
         <Setter Property="TreeViewItem.Foreground" Value="{DynamicResource TreeViewItemDefaultForeground}" />
         <Setter Property="TreeViewItem.CornerRadius" Value="3" />
@@ -144,9 +143,9 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  PointerOver state  -->
+        <!--  Pointerover state  -->
         <Style Selector="^ /template/ Border#PART_LayoutRoot:pointerover">
-            <Setter Property="Background" Value="{DynamicResource TreeViewItemPointerOverBackground}" />
+            <Setter Property="Background" Value="{DynamicResource TreeViewItemPointeroverBackground}" />
         </Style>
 
         <!--  Pressed state  -->

src/Semi.Avalonia/Converters/ItemToObjectConverter.cs

@@ -3,22 +3,23 @@ using System.Collections.Generic;
 using System.Globalization;
 using System.Linq;
 using Avalonia.Collections;
+using Avalonia.Controls;
 using Avalonia.Data.Converters;
 
 namespace Semi.Avalonia.Converters;
 
 public class ItemToObjectConverter: IValueConverter
 {
-    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
-        if (value is AvaloniaList<object> list)
+        if (value is ItemCollection list)
         {
             return list.Select(a => new object());
         }
         return new List<object>();
     }
 
-    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
         throw new NotImplementedException();
     }

src/Semi.Avalonia/Semi.Avalonia.csproj

@@ -1,10 +1,10 @@
 <Project Sdk="Microsoft.NET.Sdk">
   
-  <Import Project="../Package.props"/>
+  <Import Project="../Package.props" />
   
   <PropertyGroup>
     <Title>Semi.Avalonia</Title>
-    <PackageReleaseNotes>Adapt borderless design, Add Native AOT support. bug fixes.</PackageReleaseNotes>
+    <PackageReleaseNotes>Update to Avalonia 11.0.0-preview7</PackageReleaseNotes>
   </PropertyGroup>
 
   <ItemGroup>

src/Semi.Avalonia/Themes/Dark/Calendar.axaml

@@ -47,4 +47,5 @@
     <SolidColorBrush x:Key="CalendarItemCalendarDayButtonInactiveForeground" Opacity="0.62" Color="#F9F9F9" />
 
     <sys:Double x:Key="CalendarMinWidth">240</sys:Double>
+    <sys:Double x:Key="CalendarMinHeight">250</sys:Double>
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Dark/CalendarDatePicker.axaml

@@ -1,6 +1,7 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--    -->
     <SolidColorBrush x:Key="CalendarDatePickerIconForeground" Opacity="0.62" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="CalendarDatePickerForeground" Color="#F9F9F9" />
     <SolidColorBrush x:Key="CalendarDatePickerIconPointeroverForeground" Color="#F9F9F9" />
     <PathGeometry x:Key="CalendarDatePickerIconGlyph">M4 20V8H20V20H4ZM2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20V4ZM6 10.5C6 10.2239 6.22386 10 6.5 10H8.5C8.77614 10 9 10.2239 9 10.5V12.5C9 12.7761 8.77614 13 8.5 13H6.5C6.22386 13 6 12.7761 6 12.5V10.5ZM6.5 15C6.22386 15 6 15.2239 6 15.5V17.5C6 17.7761 6.22386 18 6.5 18H8.5C8.77614 18 9 17.7761 9 17.5V15.5C9 15.2239 8.77614 15 8.5 15H6.5ZM10.5 10.5C10.5 10.2239 10.7239 10 11 10H13C13.2761 10 13.5 10.2239 13.5 10.5V12.5C13.5 12.7761 13.2761 13 13 13H11C10.7239 13 10.5 12.7761 10.5 12.5V10.5ZM11 15C10.7239 15 10.5 15.2239 10.5 15.5V17.5C10.5 17.7761 10.7239 18 11 18H13C13.2761 18 13.5 17.7761 13.5 17.5V15.5C13.5 15.2239 13.2761 15 13 15H11ZM15 10.5C15 10.2239 15.2239 10 15.5 10H17.5C17.7761 10 18 10.2239 18 10.5V12.5C18 12.7761 17.7761 13 17.5 13H15.5C15.2239 13 15 12.7761 15 12.5V10.5ZM15.5 15C15.2239 15 15 15.2239 15 15.5V17.5C15 17.7761 15.2239 18 15.5 18H17.5C17.7761 18 18 17.7761 18 17.5V15.5C18 15.2239 17.7761 15 17.5 15H15.5Z</PathGeometry>
     <SolidColorBrush x:Key="CalendarDatePickerBackground" Opacity="0.12" Color="White" />
@@ -10,7 +11,7 @@
     <Thickness x:Key="CalendarDatePickerBorderThickness">1</Thickness>
     <CornerRadius x:Key="CalendarDatePickerCornerRadius">3</CornerRadius>
     <SolidColorBrush x:Key="CalendarDatePickerFocusBorderBrush" Color="#54A9FF" />
-    <SolidColorBrush x:Key="CalendarDatePickerDisabledBackground" Color="#1C1F23" />
+    <SolidColorBrush x:Key="CalendarDatePickerDisabledBackground" Opacity="0.04" Color="#E6E8EA" />
     <SolidColorBrush x:Key="CalendarDatePickerDisabledBorderBrush" Color="Transparent" />
     <SolidColorBrush x:Key="CalendarDatePickerDisabledIconForeground" Opacity="0.4" Color="#E6E8EA" />
     <BoxShadows x:Key="CalendarDatePickerPopupBoxShadows">0 0 8 0 #1AFFFFFF</BoxShadows>

src/Semi.Avalonia/Themes/Dark/CheckBox.axaml

@@ -2,42 +2,54 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:sys="clr-namespace:System;assembly=System.Runtime">
-    <SolidColorBrush x:Key="CheckboxForeground" Color="#F9F9F9" />
-    <SolidColorBrush x:Key="CheckboxDisabledForeground" Opacity="0.35" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="CheckBoxForeground" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="CheckBoxDisabledForeground" Opacity="0.35" Color="#F9F9F9" />
 
-    <SolidColorBrush x:Key="CheckboxGlyphFill" Color="#16161A" />
-    <SolidColorBrush x:Key="CheckboxGlyphDisabledFill" Color="#16161A" />
+    <SolidColorBrush x:Key="CheckBoxGlyphFill" Color="White" />
+    <SolidColorBrush x:Key="CheckBoxGlyphDisabledFill" Color="White" />
 
-    <SolidColorBrush x:Key="CheckboxDefaultBackground" Color="Transparent" />
-    <SolidColorBrush x:Key="CheckboxDefaultBorderBrush" Opacity="0.35" Color="#F9F9F9" />
-    <SolidColorBrush x:Key="CheckboxPointOverBackground" Opacity="0.12" Color="White" />
-    <SolidColorBrush x:Key="CheckboxPointOverBorderBrush" Color="#54A9FF" />
-    <SolidColorBrush x:Key="CheckboxPressedBackground" Color="#A9D7FF" />
-    <SolidColorBrush x:Key="CheckboxPressedBorderBrush" Color="#A9D7FF" />
+    <SolidColorBrush x:Key="CheckBoxDefaultBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="CheckBoxDefaultBorderBrush" Opacity="0.35" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="CheckBoxPointeroverBackground" Opacity="0.12" Color="White" />
+    <SolidColorBrush x:Key="CheckBoxPointeroverBorderBrush" Color="#54A9FF" />
+    <SolidColorBrush x:Key="CheckBoxPressedBackground" Color="#A9D7FF" />
+    <SolidColorBrush x:Key="CheckBoxPressedBorderBrush" Color="#A9D7FF" />
 
-    <SolidColorBrush x:Key="CheckboxCheckedDefaultBackground" Color="#54A9FF" />
-    <SolidColorBrush x:Key="CheckboxCheckedDefaultBorderBrush" Color="#54A9FF" />
-    <SolidColorBrush x:Key="CheckboxCheckedPointOverBackground" Color="#7FC1FF" />
-    <SolidColorBrush x:Key="CheckboxCheckedPointOverBorderBrush" Color="#7FC1FF" />
-    <SolidColorBrush x:Key="CheckboxCheckedPressedBackground" Color="#A9D7FF" />
-    <SolidColorBrush x:Key="CheckboxCheckedPressedBorderBrush" Color="#A9D7FF" />
+    <SolidColorBrush x:Key="CheckBoxCheckedDefaultBackground" Color="#54A9FF" />
+    <SolidColorBrush x:Key="CheckBoxCheckedDefaultBorderBrush" Color="#54A9FF" />
+    <SolidColorBrush x:Key="CheckBoxCheckedPointeroverBackground" Color="#7FC1FF" />
+    <SolidColorBrush x:Key="CheckBoxCheckedPointeroverBorderBrush" Color="#7FC1FF" />
+    <SolidColorBrush x:Key="CheckBoxCheckedPressedBackground" Color="#A9D7FF" />
+    <SolidColorBrush x:Key="CheckBoxCheckedPressedBorderBrush" Color="#A9D7FF" />
 
-    <SolidColorBrush x:Key="CheckboxDefaultDisabledBackground" Opacity="0.04" Color="#E6E8EA" />
-    <SolidColorBrush x:Key="CheckboxDefaultDisabledBorderBrush" Opacity="0.08" Color="#F9F9F9" />
-    <SolidColorBrush x:Key="CheckboxCheckedDisabledBackground" Color="#135cb8" />
-    <SolidColorBrush x:Key="CheckboxCheckedDisabledBorderBrush" Color="#135cb8" />
+    <SolidColorBrush x:Key="CheckBoxDefaultDisabledBackground" Opacity="0.04" Color="#E6E8EA" />
+    <SolidColorBrush x:Key="CheckBoxDefaultDisabledBorderBrush" Opacity="0.08" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="CheckBoxCheckedDisabledBackground" Color="#135cb8" />
+    <SolidColorBrush x:Key="CheckBoxCheckedDisabledBorderBrush" Color="#135cb8" />
 
-    <sys:Double x:Key="CheckboxFontSize">14</sys:Double>
-    <sys:Double x:Key="CheckboxBoxWidth">16</sys:Double>
-    <sys:Double x:Key="CheckboxBoxHeight">16</sys:Double>
-    <sys:Double x:Key="CheckboxBoxGlyphWidth">12</sys:Double>
-    <sys:Double x:Key="CheckboxBoxGlyphHeight">12</sys:Double>
-    <FontWeight x:Key="CheckboxFontWeight">400</FontWeight>
+    <sys:Double x:Key="CheckBoxFontSize">14</sys:Double>
+    <sys:Double x:Key="CheckBoxBoxWidth">16</sys:Double>
+    <sys:Double x:Key="CheckBoxBoxHeight">16</sys:Double>
+    <sys:Double x:Key="CheckBoxBoxGlyphWidth">10</sys:Double>
+    <sys:Double x:Key="CheckBoxBoxGlyphHeight">10</sys:Double>
+    <FontWeight x:Key="CheckBoxFontWeight">400</FontWeight>
 
-    <CornerRadius x:Key="CheckboxBoxCornerRadius">3</CornerRadius>
-    <Thickness x:Key="CheckboxContentMargin">8 0 0 0</Thickness>
-    <Thickness x:Key="CheckboxBoxBorderThickness">1</Thickness>
+    <CornerRadius x:Key="CheckBoxBoxCornerRadius">3</CornerRadius>
+    <Thickness x:Key="CheckBoxContentMargin">8 0 0 0</Thickness>
+    <Thickness x:Key="CheckBoxBoxBorderThickness">1</Thickness>
 
     <PathGeometry x:Key="CheckBoxCheckGlyph">M17.4111 7.30848C18.0692 7.81171 18.1947 8.75312 17.6915 9.41119L11.1915 17.9112C10.909 18.2806 10.4711 18.4981 10.0061 18.5C9.54105 18.5019 9.10143 18.288 8.81592 17.9209L5.31592 13.4209C4.80731 12.767 4.92512 11.8246 5.57904 11.316C6.23296 10.8074 7.17537 10.9252 7.68398 11.5791L9.98988 14.5438L15.3084 7.58884C15.8116 6.93077 16.7531 6.80525 17.4111 7.30848Z</PathGeometry>
     <PathGeometry x:Key="CheckBoxIndeterminateGlyph">M5 12.5C5 11.6716 5.67157 11 6.5 11H17.5C18.3284 11 19 11.6716 19 12.5C19 13.3284 18.3284 14 17.5 14H6.5C5.67157 14 5 13.3284 5 12.5Z</PathGeometry>
+
+    <SolidColorBrush x:Key="CheckBoxCardCheckedBackground" Opacity="0.2" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="CheckBoxCardCheckedBorderBrush" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="CheckBoxCardCheckedDisabledBorderBrush" Color="#FF135CB8" />
+    <SolidColorBrush x:Key="CheckBoxCardPointeroverBackground" Opacity="0.05" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="CheckBoxCardPressedBackground" Opacity="0.09" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="CheckBoxCardCheckedPointeroverBorderBrush" Color="#FF7FC1FF" />
+    <SolidColorBrush x:Key="CheckBoxCardCheckedPressedBorderBrush" Color="#FFA9D7FF" />
+
+    <Thickness x:Key="CheckBoxCardBorderThickness">1</Thickness>
+    <Thickness x:Key="CheckBoxCardPadding">16</Thickness>
+    <CornerRadius x:Key="CheckBoxCardCornerRadius">3</CornerRadius>
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Dark/ComboBox.axaml

@@ -1,16 +1,16 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <SolidColorBrush x:Key="ComboBoxSelectorBackground" Opacity="0.12" Color="White" />
-    <SolidColorBrush x:Key="ComboBoxSelectorPointerOverBackground" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="ComboBoxSelectorPointeroverBackground" Opacity="0.16" Color="White" />
     <SolidColorBrush x:Key="ComboBoxSelectorPressedBackground" Opacity="0.20" Color="White" />
     <SolidColorBrush x:Key="ComboBoxSelectorDisabledBackground" Opacity="0.04" Color="#E6E8EA" />
     <SolidColorBrush x:Key="ComboBoxSelectorBorderBrush" Color="Transparent" />
-    <SolidColorBrush x:Key="ComboBoxSelectorPointerOverBorderBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="ComboBoxSelectorPointeroverBorderBrush" Color="Transparent" />
     <SolidColorBrush x:Key="ComboBoxSelectorPressedBorderBrush" Color="#A9D7FF" />
 
     <CornerRadius x:Key="ComboBoxSelectorCornerRadius">3</CornerRadius>
 
     <SolidColorBrush x:Key="ComboBoxIconDefaultForeground" Opacity="0.62" Color="#F9F9F9" />
-    <SolidColorBrush x:Key="ComboBoxIconPointerOverForeground" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="ComboBoxIconPointeroverForeground" Color="#F9F9F9" />
     <SolidColorBrush x:Key="ComboBoxIconPressedForeground" Color="#F9F9F9" />
     <SolidColorBrush x:Key="ComboBoxIconDisabledForeground" Opacity="0.35" Color="#F9F9F9" />
 
@@ -27,10 +27,10 @@
     <SolidColorBrush x:Key="ComboBoxItemForeground" Color="#F9F9F9" />
 
     <SolidColorBrush x:Key="ComboBoxItemBackground" Color="Transparent" />
-    <SolidColorBrush x:Key="ComboBoxItemPointerOverBackground" Opacity="0.12" Color="White" />
+    <SolidColorBrush x:Key="ComboBoxItemPointeroverBackground" Opacity="0.12" Color="White" />
     <SolidColorBrush x:Key="ComboBoxItemPressedBackground" Opacity="0.16" Color="White" />
     <SolidColorBrush x:Key="ComboBoxItemSelectedBackground" Color="#053170" />
-    <SolidColorBrush x:Key="ComboBoxItemSelectedPointerOverBackground" Color="#0A4694" />
+    <SolidColorBrush x:Key="ComboBoxItemSelectedPointeroverBackground" Color="#0A4694" />
 
     <SolidColorBrush x:Key="ComboBoxItemDisabledBackground" Color="Transparent" />
     <SolidColorBrush x:Key="ComboBoxItemSelectedDisabledBackground" Opacity="0.04" Color="#E6E8EA" />
@@ -39,8 +39,8 @@
     </PathGeometry>
 
     <x:Double x:Key="ComboBoxDefaultHeight">32</x:Double>
-    <x:Double x:Key="ComboBoxLargeHeight">24</x:Double>
-    <x:Double x:Key="ComboBoxSmallHeight">40</x:Double>
+    <x:Double x:Key="ComboBoxSmallHeight">24</x:Double>
+    <x:Double x:Key="ComboBoxLargeHeight">40</x:Double>
 
     <SolidColorBrush x:Key="ComboBoxSelectorBorderedBackground" Color="Transparent" />
     <SolidColorBrush x:Key="ComboBoxSelectorBorderedBorderBrush" Opacity="0.12" Color="White" />

src/Semi.Avalonia/Themes/Dark/Dark.axaml

@@ -15,7 +15,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/ComboBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/DatePicker.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/DateTimePickerShared.axaml" />
-        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/DropdownButton.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/DropDownButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/Expander.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/GridSplitter.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/Label.axaml" />

src/Semi.Avalonia/Themes/Dark/DateTimePickerShared.axaml

@@ -20,7 +20,7 @@
     <PathGeometry x:Key="DateTimePickerDismissGlyph">M17.6568 19.7782C18.2426 20.3639 19.1924 20.3639 19.7782 19.7782C20.3639 19.1924 20.3639 18.2426 19.7782 17.6568L14.1213 12L19.7782 6.34313C20.3639 5.75734 20.3639 4.8076 19.7782 4.22181C19.1924 3.63602 18.2426 3.63602 17.6568 4.22181L12 9.87866L6.34313 4.22181C5.75734 3.63602 4.8076 3.63602 4.22181 4.22181C3.63602 4.8076 3.63602 5.75734 4.22181 6.34313L9.87866 12L4.22181 17.6568C3.63602 18.2426 3.63602 19.1924 4.22181 19.7782C4.8076 20.3639 5.75734 20.3639 6.34313 19.7782L12 14.1213L17.6568 19.7782Z</PathGeometry>
 
     <SolidColorBrush x:Key="DateTimePickerSeparatorBackground" Opacity="0.08" Color="#F9F9F9" />
-    <sys:Double x:Key="DateTimePickerListBoxItemHeight">28</sys:Double>
+    <sys:Double x:Key="DateTimePickerListBoxItemHeight">30</sys:Double>
 
 
     <SolidColorBrush x:Key="DateTimePickerButtonBorderBrush" Color="Transparent" />
@@ -31,8 +31,8 @@
     <SolidColorBrush x:Key="DateTimePickerEmptyForeground" Opacity="0.5" Color="#F9F9F9" />
 
     <SolidColorBrush x:Key="DateTimePickerButtonPointeroverBackground" Opacity="0.16" Color="White" />
-    <SolidColorBrush x:Key="DateTimePickerButtonDisabledBorderBrush" Color="#1C1F23" />
-    <SolidColorBrush x:Key="DateTimePickerButtonDisabledBackground" Color="#1C1F23" />
+    <SolidColorBrush x:Key="DateTimePickerButtonDisabledBorderBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="DateTimePickerButtonDisabledBackground" Opacity="0.04" Color="#E6E8EA" />
     <SolidColorBrush x:Key="DateTimePickerButtonDisabledIconForeground" Opacity="0.4" Color="#E6E8EA" />
 
     <BoxShadows x:Key="DateTimePickerFlyoutBoxShadow">0 0 8 0 #1AFFFFFF</BoxShadows>

src/Semi.Avalonia/Themes/Dark/DropDownButton.axaml

@@ -1,4 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Add Resources Here  -->
-    <PathGeometry x:Key="DropdownButtonIconGlyph">M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z</PathGeometry>
+    <PathGeometry x:Key="DropDownButtonIconGlyph">M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z</PathGeometry>
 </ResourceDictionary>