Merge branch 'main' into release

Preview 8

.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.3
+dotnet add package Semi.Avalonia --version 0.1.0-preview8
 ```
 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-preview8
+dotnet add package Semi.Avalonia.DataGrid --version 0.1.0-preview8
 ```
 ```xaml
 <Application.Styles>
@@ -42,10 +42,18 @@ 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    |
+| 0.1.0-preview8.x    | 11.0-preview8    |
+
+**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

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-preview8</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,15 +19,14 @@
                         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>
-                                            <DataTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <controls:ColorItemControl
                                                     Width="40"
                                                     Height="20"
-                                                    x:DataType="viewModels:ColorItemViewModel"
                                                     Background="{Binding Brush}"
                                                     CornerRadius="3" />
                                             </DataTemplate>
@@ -35,11 +34,10 @@
                                     </DataGridTemplateColumn>
                                     <DataGridTemplateColumn Width="*" Header="ResourceKey">
                                         <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
                                                     Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
-                                                    x:DataType="viewModels:ColorItemViewModel"
                                                     Text="{Binding ResourceKey}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
@@ -47,28 +45,26 @@
                                     <DataGridTextColumn
                                         Width="*"
                                         x:DataType="viewModels:ColorItemViewModel"
-                                        Binding="{Binding ColorDisplayName}"
+                                        Binding="{ReflectionBinding ColorDisplayName}"
                                         CanUserSort="False"
                                         Header="Name" />
                                     <DataGridTemplateColumn Width="100" Header="Hex">
                                         <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
                                                     Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
-                                                    x:DataType="viewModels:ColorItemViewModel"
                                                     Text="{Binding Hex}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
                                     <DataGridTemplateColumn Width="80" Header="Opacity">
                                         <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
                                                     Margin="12,0,12,0"
                                                     HorizontalAlignment="Right"
                                                     VerticalAlignment="Center"
-                                                    x:DataType="viewModels:ColorItemViewModel"
                                                     Text="{Binding Brush.Opacity}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
@@ -77,15 +73,14 @@
                             </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>
-                                            <DataTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <controls:ColorItemControl
                                                     Width="40"
                                                     Height="20"
-                                                    x:DataType="viewModels:ColorItemViewModel"
                                                     Background="{Binding Brush}"
                                                     CornerRadius="3" />
                                             </DataTemplate>
@@ -93,11 +88,10 @@
                                     </DataGridTemplateColumn>
                                     <DataGridTemplateColumn Width="*" Header="ResourceKey">
                                         <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
                                                     Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
-                                                    x:DataType="viewModels:ColorItemViewModel"
                                                     Text="{Binding ResourceKey}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
@@ -105,28 +99,26 @@
                                     <DataGridTextColumn
                                         Width="*"
                                         x:DataType="viewModels:ColorItemViewModel"
-                                        Binding="{Binding ColorDisplayName}"
+                                        Binding="{ReflectionBinding ColorDisplayName}"
                                         CanUserSort="False"
                                         Header="Name" />
                                     <DataGridTemplateColumn Width="100" Header="Hex">
                                         <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
                                                     Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
-                                                    x:DataType="viewModels:ColorItemViewModel"
                                                     Text="{Binding Hex}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
                                     <DataGridTemplateColumn Width="80" Header="Opacity">
                                         <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
                                                     Margin="12,0,12,0"
                                                     HorizontalAlignment="Right"
                                                     VerticalAlignment="Center"
-                                                    x:DataType="viewModels:ColorItemViewModel"
                                                     Text="{Binding Brush.Opacity}" />
                                             </DataTemplate>
                                         </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

@@ -13,6 +13,7 @@
             <Button Classes="Primary">Primary</Button>
             <Button Classes="Secondary">Secondary</Button>
             <Button Classes="Tertiary">Tertiary</Button>
+            <Button Classes="Success">Success</Button>
             <Button Classes="Warning">Warning</Button>
             <Button Classes="Danger">Danger</Button>
             <Button Classes="Primary" IsEnabled="False">Danger</Button>
@@ -22,6 +23,7 @@
             <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
             <Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
             <Button Classes="Tertiary" Theme="{DynamicResource SolidButton}">Tertiary</Button>
+            <Button Classes="Success" Theme="{DynamicResource SolidButton}">Success</Button>
             <Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
             <Button Classes="Danger" Theme="{DynamicResource SolidButton}">Danger</Button>
             <Button
@@ -36,6 +38,7 @@
             <Button Classes="Primary" Theme="{DynamicResource BorderlessButton}">Primary</Button>
             <Button Classes="Secondary" Theme="{DynamicResource BorderlessButton}">Secondary</Button>
             <Button Classes="Tertiary" Theme="{DynamicResource BorderlessButton}">Tertiary</Button>
+            <Button Classes="Success" Theme="{DynamicResource BorderlessButton}">Success</Button>
             <Button Classes="Warning" Theme="{DynamicResource BorderlessButton}">Warning</Button>
             <Button Classes="Danger" Theme="{DynamicResource BorderlessButton}">Danger</Button>
             <Button
@@ -45,7 +48,7 @@
                 Danger
             </Button>
         </StackPanel>
-        <TextBlock>DropdownButton</TextBlock>
+        <TextBlock>DropDownButton</TextBlock>
         <StackPanel Orientation="Horizontal" Spacing="8">
             <DropDownButton Content="Submit">
                 <DropDownButton.Flyout>
@@ -55,7 +58,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 +66,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" />
@@ -83,6 +86,7 @@
             </SplitButton>
             <SplitButton Classes="Secondary" Content="Submit" />
             <SplitButton Classes="Tertiary" Content="Submit" />
+            <SplitButton Classes="Success" Content="Submit" />
             <SplitButton Classes="Warning" Content="Submit" />
             <SplitButton Classes="Danger" Content="Submit" />
             <SplitButton
@@ -101,6 +105,7 @@
             </ToggleSplitButton>
             <ToggleSplitButton Classes="Secondary" Content="Submit" />
             <ToggleSplitButton Classes="Tertiary" Content="Submit" />
+            <ToggleSplitButton Classes="Success" Content="Submit" />
             <ToggleSplitButton Classes="Warning" Content="Submit" />
             <ToggleSplitButton Classes="Danger" Content="Submit" />
             <ToggleSplitButton

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

@@ -8,21 +8,26 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <ScrollViewer HorizontalScrollBarVisibility="Auto">
-        <StackPanel HorizontalAlignment="Left">
-            <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>
+        <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="Vertical">
+            <StackPanel Orientation="Horizontal">
                 <CheckBox Width="300" Theme="{DynamicResource CardCheckBox}">
                     <StackPanel>
                         <TextBlock FontWeight="Bold">复选框标题</TextBlock>
@@ -38,6 +43,18 @@
                         <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"
@@ -57,17 +74,6 @@
                         <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                     </StackPanel>
                 </CheckBox>
-                <CheckBox
-                    Width="300"
-                    IsChecked="{x:Null}"
-                    IsEnabled="True"
-                    IsThreeState="True"
-                    Theme="{DynamicResource CardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
                 <CheckBox
                     Width="300"
                     IsChecked="{x:Null}"
@@ -81,7 +87,7 @@
                 </CheckBox>
             </StackPanel>
             <TextBlock Margin="0,16" Text="PureCardCheckBox" />
-            <StackPanel Orientation="Vertical">
+            <StackPanel Orientation="Horizontal">
                 <CheckBox Width="300" Theme="{DynamicResource PureCardCheckBox}">
                     <StackPanel>
                         <TextBlock FontWeight="Bold">复选框标题</TextBlock>
@@ -97,6 +103,19 @@
                         <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"
@@ -116,17 +135,6 @@
                         <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>
                 <CheckBox
                     Width="300"
                     IsChecked="{x:Null}"
@@ -141,4 +149,4 @@
             </StackPanel>
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</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/DataValidationErrorsDemo.axaml

@@ -0,0 +1,83 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.DataValidationErrorsDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:system="clr-namespace:System;assembly=netstandard"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <ScrollViewer>
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
+            <AutoCompleteBox Width="300">
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </AutoCompleteBox>
+            <AutoCompleteBox Width="300" Classes="Large">
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </AutoCompleteBox>
+            <AutoCompleteBox Width="300" Classes="Small">
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </AutoCompleteBox>
+            <CalendarDatePicker Width="300">
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </CalendarDatePicker>
+            <ComboBox Width="300">
+                <ComboBoxItem>AAA</ComboBoxItem>
+                <ComboBoxItem>BBB</ComboBoxItem>
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </ComboBox>
+            <DatePicker Width="300">
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </DatePicker>
+            <NumericUpDown Width="300">
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </NumericUpDown>
+            <Slider Width="300">
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </Slider>
+            <TimePicker Width="300">
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </TimePicker>
+            <TextBox
+                Width="300"
+                InnerLeftContent="http://"
+                InnerRightContent=".com">
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </TextBox>
+            <TextBox
+                Width="300"
+                InnerLeftContent="http://"
+                InnerRightContent=".com">
+                <TextBox.Styles>
+                    <Style Selector="TextBox /template/ DataValidationErrors">
+                        <Setter Property="Theme" Value="{DynamicResource TooltipDataValidationErrors}" />
+                    </Style>
+                </TextBox.Styles>
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </TextBox>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>

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

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

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"
@@ -113,6 +113,44 @@
                 <Flyout Content="BottomEdgeAlignedRight" Placement="BottomEdgeAlignedRight" />
             </Button.Flyout>
         </Button>
+
+        <Button
+            Grid.Row="2"
+            Grid.Column="2"
+            Content="Center">
+            <Button.Flyout>
+                <Flyout Content="Center" Placement="Center" />
+            </Button.Flyout>
+        </Button>
+
+        <Button
+            Grid.Row="5"
+            Grid.Column="2" Content="LightFlyout">
+            <Button.Flyout>
+                <Flyout FlyoutPresenterTheme="{StaticResource LightFlyout}" Placement="Top">
+                    <StackPanel>
+                        <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                        <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                        <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                        <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
+                        <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                        <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                        <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                        <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                        <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                        <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                        <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                        <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                        <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
+                        <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                        <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                        <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                        <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
+                    </StackPanel>
+                </Flyout>
+            </Button.Flyout>
+        </Button>
     </Grid>
 
-</UserControl>
+
+</UserControl>

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

@@ -13,6 +13,7 @@
                 <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
                 <Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
                 <Button Classes="Tertiary" Theme="{DynamicResource SolidButton}">Tertiary</Button>
+                <Button Classes="Success" Theme="{DynamicResource SolidButton}">Success</Button>
                 <Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
                 <Button Classes="Danger" Theme="{DynamicResource SolidButton}">Danger</Button>
                 <Button
@@ -47,27 +48,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,7 +171,7 @@
                 </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>
@@ -105,7 +180,7 @@
                 <TimePicker />
                 <CalendarDatePicker />
             </StackPanel>
-            <Grid ColumnDefinitions="* * *">
+            <Grid ColumnDefinitions="*, *, *">
                 <Border Theme="{StaticResource CardBorder}">
                     <TextBlock>Card</TextBlock>
                 </Border>
@@ -157,4 +232,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/ScrollViewerDemo.axaml

@@ -0,0 +1,33 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.ScrollViewerDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel>
+        <ScrollViewer
+            Width="200"
+            Height="200"
+            Margin="10"
+            HorizontalScrollBarVisibility="Auto">
+            <Rectangle
+                Width="300"
+                Height="300"
+                Fill="#FEFBCB" />
+        </ScrollViewer>
+        <ScrollViewer
+            Width="200"
+            Height="200"
+            Margin="10"
+            HorizontalScrollBarVisibility="Auto"
+            Theme="{DynamicResource StaticScrollViewer}">
+            <Rectangle
+                Width="300"
+                Height="300"
+                Fill="#FEFBCB" />
+        </ScrollViewer>
+    </StackPanel>
+</UserControl>

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

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

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

@@ -4,6 +4,7 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:system="clr-namespace:System;assembly=netstandard"
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">

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,39 @@
     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="Success">Success</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="Success" IsChecked="True">Success</ToggleButton>
+            <ToggleButton Classes="Warning" IsChecked="True">Warning</ToggleButton>
+            <ToggleButton Classes="Danger" IsChecked="True">Danger</ToggleButton>
+            <ToggleButton Classes="Danger" IsChecked="True" IsEnabled="False">Danger</ToggleButton>
+        </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="Success" IsThreeState="True" IsChecked="{x:Null}">Success</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/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/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

@@ -105,6 +105,9 @@
             <TabItem Header="ComboBox">
                 <pages:ComboBoxDemo />
             </TabItem>
+            <TabItem Header="DataValidationErrors">
+                <pages:DataValidationErrorsDemo />
+            </TabItem>
             <TabItem Header="DataGrid">
                 <pages:DataGridDemo />
             </TabItem>
@@ -150,6 +153,9 @@
             <TabItem Header="RepeatButton">
                 <pages:RepeatButtonDemo />
             </TabItem>
+            <TabItem Header="ScrollViewer">
+                <pages:ScrollViewerDemo />
+            </TabItem>
             <TabItem Header="Slider">
                 <pages:SliderDemo />
             </TabItem>

src/Package.props

@@ -3,10 +3,11 @@
         <TargetFrameworks>net6.0;netstandard2.0</TargetFrameworks>
         <Nullable>enable</Nullable>
         <LangVersion>10</LangVersion>
-        <Version>0.1.0-preview5.4</Version>
+        <Version>0.1.0-preview8</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-preview8</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.
@@ -167,7 +167,7 @@
                                                 Orientation="Vertical">
                                                 <primitives:ColorSlider.IsVisible>
                                                     <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                        <ReflectionBinding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                                     </MultiBinding>
                                                 </primitives:ColorSlider.IsVisible>
                                             </primitives:ColorSlider>
@@ -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">
@@ -323,6 +323,7 @@
                                                 Margin="0,0,12,0"
                                                 VerticalAlignment="Center"
                                                 AllowSpin="True"
+                                                Classes="Small"
                                                 IsVisible="{TemplateBinding IsComponentTextInputVisible}"
                                                 Maximum="{Binding Maximum, ElementName=Component1Slider}"
                                                 Minimum="{Binding Minimum, ElementName=Component1Slider}"
@@ -353,6 +354,7 @@
                                                 Margin="0,0,12,0"
                                                 VerticalAlignment="Center"
                                                 AllowSpin="True"
+                                                Classes="Small"
                                                 IsVisible="{TemplateBinding IsComponentTextInputVisible}"
                                                 Maximum="{Binding Maximum, ElementName=Component2Slider}"
                                                 Minimum="{Binding Minimum, ElementName=Component2Slider}"
@@ -383,6 +385,7 @@
                                                 Margin="0,0,12,0"
                                                 VerticalAlignment="Center"
                                                 AllowSpin="True"
+                                                Classes="Small"
                                                 IsVisible="{TemplateBinding IsComponentTextInputVisible}"
                                                 Maximum="{Binding Maximum, ElementName=Component3Slider}"
                                                 Minimum="{Binding Minimum, ElementName=Component3Slider}"
@@ -413,6 +416,7 @@
                                                 Margin="0,0,12,0"
                                                 VerticalAlignment="Center"
                                                 AllowSpin="True"
+                                                Classes="Small"
                                                 IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                                 Maximum="{Binding Maximum, ElementName=AlphaComponentSlider}"
                                                 Minimum="{Binding Minimum, ElementName=AlphaComponentSlider}"
@@ -421,8 +425,8 @@
                                                 Value="{Binding Value, ElementName=AlphaComponentSlider}">
                                                 <NumericUpDown.IsVisible>
                                                     <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                                        <Binding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                        <ReflectionBinding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                        <ReflectionBinding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                                     </MultiBinding>
                                                 </NumericUpDown.IsVisible>
                                             </NumericUpDown>
@@ -443,8 +447,8 @@
                                                 TickFrequency="1">
                                                 <primitives:ColorSlider.IsVisible>
                                                     <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                                        <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                        <ReflectionBinding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                        <ReflectionBinding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                                     </MultiBinding>
                                                 </primitives:ColorSlider.IsVisible>
                                             </primitives:ColorSlider>

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

@@ -259,7 +259,7 @@
                                     Orientation="Vertical">
                                     <primitives:ColorSlider.IsVisible>
                                         <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <ReflectionBinding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                         </MultiBinding>
                                     </primitives:ColorSlider.IsVisible>
                                 </primitives:ColorSlider>
@@ -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">
@@ -387,6 +387,7 @@
                                     Margin="0,0,12,0"
                                     VerticalAlignment="Center"
                                     AllowSpin="True"
+                                    Classes="Small"
                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}"
                                     Maximum="{Binding Maximum, ElementName=Component1Slider}"
                                     Minimum="{Binding Minimum, ElementName=Component1Slider}"
@@ -417,6 +418,7 @@
                                     Margin="0,0,12,0"
                                     VerticalAlignment="Center"
                                     AllowSpin="True"
+                                    Classes="Small"
                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}"
                                     Maximum="{Binding Maximum, ElementName=Component2Slider}"
                                     Minimum="{Binding Minimum, ElementName=Component2Slider}"
@@ -447,6 +449,7 @@
                                     Margin="0,0,12,0"
                                     VerticalAlignment="Center"
                                     AllowSpin="True"
+                                    Classes="Small"
                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}"
                                     Maximum="{Binding Maximum, ElementName=Component3Slider}"
                                     Minimum="{Binding Minimum, ElementName=Component3Slider}"
@@ -477,6 +480,7 @@
                                     Margin="0,0,12,0"
                                     VerticalAlignment="Center"
                                     AllowSpin="True"
+                                    Classes="Small"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                     Maximum="{Binding Maximum, ElementName=AlphaComponentSlider}"
                                     Minimum="{Binding Minimum, ElementName=AlphaComponentSlider}"
@@ -485,8 +489,8 @@
                                     Value="{Binding Value, ElementName=AlphaComponentSlider}">
                                     <NumericUpDown.IsVisible>
                                         <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                            <Binding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <ReflectionBinding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <ReflectionBinding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                         </MultiBinding>
                                     </NumericUpDown.IsVisible>
                                 </NumericUpDown>
@@ -507,8 +511,8 @@
                                     TickFrequency="1">
                                     <primitives:ColorSlider.IsVisible>
                                         <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                            <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <ReflectionBinding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <ReflectionBinding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                         </MultiBinding>
                                     </primitives:ColorSlider.IsVisible>
                                 </primitives:ColorSlider>

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-preview8</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/DataGrid.axaml

@@ -14,6 +14,13 @@
         BasedOn="{StaticResource {x:Type TextBox}}"
         TargetType="TextBox">
         <Setter Property="VerticalAlignment" Value="Stretch" />
+        <Setter Property="MinHeight" Value="20" />
+        <Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
+            <Setter Property="MinHeight" Value="20" />
+        </Style>
+        <Style Selector="^:error:focus /template/ Border#PART_ContentPresenterBorder">
+            <Setter Property="Border.BorderBrush" Value="Transparent" />
+        </Style>
         <Style Selector="^ /template/ DataValidationErrors">
             <Setter Property="Theme" Value="{DynamicResource TooltipDataValidationErrors}" />
         </Style>

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-preview8</PackageReleaseNotes>
     </PropertyGroup>
 
     <ItemGroup>

src/Semi.Avalonia/Controls/AutoCompleteBox.axaml

@@ -12,35 +12,38 @@
         <Setter Property="AutoCompleteBox.MaxDropDownHeight" Value="{DynamicResource AutoCompleteMaxDropdownHeight}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="AutoCompleteBox">
-                <Panel>
-                    <TextBox
-                        Name="PART_TextBox"
-                        VerticalAlignment="Center"
-                        DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
-                        Watermark="{TemplateBinding Watermark}" />
-                    <Popup
-                        Name="PART_Popup"
-                        MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
-                        MaxHeight="{TemplateBinding MaxDropDownHeight}"
-                        IsLightDismissEnabled="True"
-                        PlacementTarget="{TemplateBinding}">
-                        <Border
-                            Margin="{DynamicResource AutoCompleteBoxPopupMargin}"
-                            HorizontalAlignment="Stretch"
-                            Background="{DynamicResource AutoCompleteBoxPopupBackground}"
-                            BorderBrush="{DynamicResource AutoCompleteBoxPopupBorderBrush}"
-                            BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
-                            BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
-                            CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
-                            <ListBox
-                                Name="PART_SelectingItemsControl"
-                                Foreground="{TemplateBinding Foreground}"
-                                ItemTemplate="{TemplateBinding ItemTemplate}"
-                                ScrollViewer.HorizontalScrollBarVisibility="Auto"
-                                ScrollViewer.VerticalScrollBarVisibility="Auto" />
-                        </Border>
-                    </Popup>
-                </Panel>
+                <DataValidationErrors>
+                    <Panel>
+                        <TextBox
+                            Name="PART_TextBox"
+                            VerticalAlignment="Center"
+                            DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
+                            Theme="{DynamicResource NonErrorTextBox}"
+                            Watermark="{TemplateBinding Watermark}" />
+                        <Popup
+                            Name="PART_Popup"
+                            MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
+                            MaxHeight="{TemplateBinding MaxDropDownHeight}"
+                            IsLightDismissEnabled="True"
+                            PlacementTarget="{TemplateBinding}">
+                            <Border
+                                Margin="{DynamicResource AutoCompleteBoxPopupMargin}"
+                                HorizontalAlignment="Stretch"
+                                Background="{DynamicResource AutoCompleteBoxPopupBackground}"
+                                BorderBrush="{DynamicResource AutoCompleteBoxPopupBorderBrush}"
+                                BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
+                                BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
+                                CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
+                                <ListBox
+                                    Name="PART_SelectingItemsControl"
+                                    Foreground="{TemplateBinding Foreground}"
+                                    ItemTemplate="{TemplateBinding ItemTemplate}"
+                                    ScrollViewer.HorizontalScrollBarVisibility="Auto"
+                                    ScrollViewer.VerticalScrollBarVisibility="Auto" />
+                            </Border>
+                        </Popup>
+                    </Panel>
+                </DataValidationErrors>
             </ControlTemplate>
         </Setter>
 

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
@@ -53,6 +54,9 @@
         <Style Selector="^.Tertiary">
             <Setter Property="Button.Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
         </Style>
+        <Style Selector="^.Success">
+            <Setter Property="Button.Foreground" Value="{DynamicResource ButtonDefaultSuccessForeground}" />
+        </Style>
         <Style Selector="^.Warning">
             <Setter Property="Button.Foreground" Value="{DynamicResource ButtonDefaultWarningForeground}" />
         </Style>
@@ -140,6 +144,19 @@
                 <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidTertiaryPressedBorderBrush}" />
             </Style>
         </Style>
+        <Style Selector="^.Success">
+            <Setter Property="Button.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidSuccessBackground}" />
+            <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidSuccessBorderBrush}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidSuccessPointeroverBackground}" />
+                <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidSuccessPointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidSuccessPressedBackground}" />
+                <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidSuccessPressedBorderBrush}" />
+            </Style>
+        </Style>
         <Style Selector="^.Warning">
             <Setter Property="Button.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
             <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidWarningBackground}" />

src/Semi.Avalonia/Controls/CalendarDatePicker.axaml

@@ -34,104 +34,108 @@
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="CalendarDatePicker.MinHeight" Value="{DynamicResource CalendarDatePickerDefaultHeight}" />
         <Setter Property="Padding" Value="8 0" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CalendarDatePicker">
-                <Panel
-                    x:Name="LayoutRoot"
-                    HorizontalAlignment="Stretch"
-                    VerticalAlignment="Stretch">
-                    <Border
-                        x:Name="Background"
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}">
-                        <Grid
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Center"
-                            ColumnDefinitions="*,Auto">
-                            <TextBox
-                                Name="PART_TextBox"
-                                Grid.Column="0"
-                                MinHeight="{DynamicResource CalendarDatePickerInnerDefaultHeight}"
+                <DataValidationErrors>
+                    <Panel
+                        x:Name="LayoutRoot"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch">
+                        <Border
+                            x:Name="Background"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}">
+                            <Grid
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Center"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                Background="Transparent"
-                                BorderBrush="Transparent"
-                                BorderThickness="0"
-                                CornerRadius="{TemplateBinding CornerRadius}"
-                                Foreground="{TemplateBinding Foreground}"
-                                UseFloatingWatermark="{TemplateBinding UseFloatingWatermark}"
-                                Watermark="{TemplateBinding Watermark}">
-                                <TextBox.Styles>
-                                    <Style Selector="TextBox#PART_TextBox:pointerover /template/ Border#PART_ContentPresenterBorder">
-                                        <!--  By default the TextBox has its own focused state, override this to disable it here  -->
-                                        <Setter Property="Background" Value="Transparent" />
-                                        <Setter Property="BorderBrush" Value="Transparent" />
-                                        <Setter Property="BorderThickness" Value="0" />
-                                    </Style>
-                                    <Style Selector="TextBox#PART_TextBox:focus /template/ Border#PART_ContentPresenterBorder">
-                                        <!--  By default the TextBox has its own focused state, override this to disable it here  -->
-                                        <Setter Property="Background" Value="Transparent" />
-                                        <Setter Property="BorderBrush" Value="Transparent" />
-                                        <Setter Property="BorderThickness" Value="0" />
-                                    </Style>
-                                    <Style Selector="TextBox#PART_TextBox:disabled">
-                                        <Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
-                                            <!--  By default the TextBox has its own disabled state, override this to make the border background show through  -->
+                                ColumnDefinitions="*,Auto">
+                                <TextBox
+                                    Name="PART_TextBox"
+                                    Grid.Column="0"
+                                    MinHeight="{DynamicResource CalendarDatePickerDefaultHeight}"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                    Background="Transparent"
+                                    BorderBrush="Transparent"
+                                    BorderThickness="0"
+                                    CornerRadius="{TemplateBinding CornerRadius}"
+                                    Foreground="{TemplateBinding Foreground}"
+                                    Theme="{DynamicResource NonErrorTextBox}"
+                                    UseFloatingWatermark="{TemplateBinding UseFloatingWatermark}"
+                                    Watermark="{TemplateBinding Watermark}">
+                                    <TextBox.Styles>
+                                        <Style Selector="TextBox#PART_TextBox:pointerover /template/ Border#PART_ContentPresenterBorder">
+                                            <!--  By default the TextBox has its own focused state, override this to disable it here  -->
                                             <Setter Property="Background" Value="Transparent" />
                                             <Setter Property="BorderBrush" Value="Transparent" />
+                                            <Setter Property="BorderThickness" Value="0" />
                                         </Style>
-                                        <Style Selector="^ /template/ TextBlock#PART_Watermark">
-                                            <Setter Property="TextElement.Foreground" Value="{DynamicResource CalendarDatePickerTextForegroundDisabled}" />
+                                        <Style Selector="TextBox#PART_TextBox:focus /template/ Border#PART_ContentPresenterBorder">
+                                            <!--  By default the TextBox has its own focused state, override this to disable it here  -->
+                                            <Setter Property="Background" Value="Transparent" />
+                                            <Setter Property="BorderBrush" Value="Transparent" />
+                                            <Setter Property="BorderThickness" Value="0" />
                                         </Style>
-                                    </Style>
-                                </TextBox.Styles>
-                            </TextBox>
-                            <Button
-                                Name="PART_Button"
-                                Grid.Column="1"
-                                Padding="0,0,8,0"
-                                Cursor="Hand"
-                                Focusable="False"
-                                Theme="{DynamicResource CalendarDatePickerButton}" />
-                            <Popup
-                                Name="PART_Popup"
-                                HorizontalOffset="-8"
-                                IsLightDismissEnabled="True"
-                                PlacementTarget="{TemplateBinding}"
-                                VerticalOffset="-4">
-                                <Border Margin="8" BoxShadow="{DynamicResource CalendarDatePickerPopupBoxShadows}">
-                                    <Calendar
-                                        Name="PART_Calendar"
-                                        DisplayDate="{TemplateBinding DisplayDate}"
-                                        DisplayDateEnd="{TemplateBinding DisplayDateEnd}"
-                                        DisplayDateStart="{TemplateBinding DisplayDateStart}"
-                                        FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
-                                        IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
-                                        SelectedDate="{TemplateBinding SelectedDate,
-                                                                       Mode=TwoWay}" />
-                                </Border>
-                            </Popup>
-                        </Grid>
-                    </Border>
+                                        <Style Selector="TextBox#PART_TextBox:disabled">
+                                            <Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
+                                                <!--  By default the TextBox has its own disabled state, override this to make the border background show through  -->
+                                                <Setter Property="Background" Value="Transparent" />
+                                                <Setter Property="BorderBrush" Value="Transparent" />
+                                            </Style>
+                                        </Style>
+                                    </TextBox.Styles>
+                                </TextBox>
+                                <Button
+                                    Name="PART_Button"
+                                    Grid.Column="1"
+                                    Padding="0,0,8,0"
+                                    Cursor="Hand"
+                                    Focusable="False"
+                                    Theme="{DynamicResource CalendarDatePickerButton}" />
+                                <Popup
+                                    Name="PART_Popup"
+                                    HorizontalOffset="-8"
+                                    IsLightDismissEnabled="True"
+                                    PlacementTarget="{TemplateBinding}"
+                                    VerticalOffset="-4">
+                                    <Border
+                                        Margin="8"
+                                        Background="Transparent"
+                                        BoxShadow="{DynamicResource CalendarDatePickerPopupBoxShadows}"
+                                        CornerRadius="{DynamicResource CalendarCornerRadius}">
+                                        <Calendar
+                                            Name="PART_Calendar"
+                                            BorderThickness="0"
+                                            CornerRadius="{Binding $parent[Border].CornerRadius}"
+                                            DisplayDate="{TemplateBinding DisplayDate}"
+                                            DisplayDateEnd="{TemplateBinding DisplayDateEnd}"
+                                            DisplayDateStart="{TemplateBinding DisplayDateStart}"
+                                            FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
+                                            IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
+                                            SelectedDate="{TemplateBinding SelectedDate,
+                                                                           Mode=TwoWay}" />
+                                    </Border>
+                                </Popup>
+                            </Grid>
+                        </Border>
+
+                    </Panel>
+                </DataValidationErrors>
 
-                </Panel>
             </ControlTemplate>
         </Setter>
 
         <Style Selector="^.Large">
-            <Setter Property="CalendarDatePicker.MinHeight" Value="{DynamicResource CalendarDatePickerLargeHeight}" />
             <Style Selector="^ /template/ TextBox#PART_TextBox">
                 <Setter Property="TextBox.MinHeight" Value="{DynamicResource CalendarDatePickerInnerLargeHeight}" />
             </Style>
         </Style>
         <Style Selector="^.Small">
-            <Setter Property="CalendarDatePicker.MinHeight" Value="{DynamicResource CalendarDatePickerSmallHeight}" />
             <Style Selector="^ /template/ TextBox#PART_TextBox">
                 <Setter Property="TextBox.MinHeight" Value="{DynamicResource CalendarDatePickerInnerSmallHeight}" />
             </Style>
@@ -163,6 +167,25 @@
             <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerFocusBorderBrush}" />
         </Style>
 
+        <Style Selector="^:error">
+            <Style Selector="^ /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pressed /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:focus-within /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+            </Style>
+        </Style>
+
         <Style Selector="^.Bordered">
             <Style Selector="^ Border#Background">
                 <Setter Property="Border.Background" Value="{DynamicResource CalendarDatePickerBorderedDefaultBackground}" />
@@ -186,6 +209,24 @@
                     <Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerDisabledIconForeground}" />
                 </Style>
             </Style>
+            <Style Selector="^:error">
+                <Style Selector="^ /template/ Border#Background">
+                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsBorderBrush}" />
+                </Style>
+                <Style Selector="^:pointerover /template/ Border#Background">
+                    <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                    <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsPointerOverBorderBrush}" />
+                </Style>
+                <Style Selector="^:pressed /template/ Border#Background">
+                    <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
+                    <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsPressedBorderBrush}" />
+                </Style>
+                <Style Selector="^:focus-within /template/ Border#Background">
+                    <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+                    <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+                </Style>
+            </Style>
         </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/Carousel.axaml

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

src/Semi.Avalonia/Controls/CheckBox.axaml

@@ -64,11 +64,11 @@
             </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>
 
@@ -102,11 +102,11 @@
                 <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>
 
@@ -145,11 +145,11 @@
                 <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>
 
@@ -180,6 +180,7 @@
 
     <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}" />
@@ -193,7 +194,11 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
+                    <Grid
+                        x:Name="RootGrid"
+                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                        ColumnDefinitions="Auto,*">
                         <Grid Grid.Column="0" VerticalAlignment="Top">
                             <Border
                                 x:Name="NormalRectangle"
@@ -215,7 +220,6 @@
                             x:Name="ContentPresenter"
                             Grid.Column="1"
                             Margin="8,0,0,0"
-                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalAlignment="Center"
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
@@ -228,10 +232,10 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  Unchecked PointerOver State  -->
+        <!--  Unchecked Pointerover State  -->
         <Style Selector="^:pointerover">
             <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointOverBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^ /template/ Border#RootBorder">
                 <Setter Property="Background" Value="{DynamicResource CheckBoxCardPointeroverBackground}" />
@@ -274,11 +278,11 @@
                 <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 Selector="^ /template/ Border#RootBorder">
                     <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
@@ -329,11 +333,11 @@
                 <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 Selector="^ /template/ Border#RootBorder">
                     <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
@@ -376,88 +380,82 @@
         <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">
-                <Border
-                    Name="RootBorder"
+                <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}"
-                    CornerRadius="{TemplateBinding CornerRadius}">
-                    <ContentPresenter
-                        x:Name="ContentPresenter"
-                        Grid.Column="1"
-                        Margin="8,0,0,0"
-                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        VerticalAlignment="Center"
-                        Content="{TemplateBinding Content}"
-                        ContentTemplate="{TemplateBinding ContentTemplate}"
-                        IsVisible="{TemplateBinding Content,
-                                                    Converter={x:Static ObjectConverters.IsNotNull}}"
-                        RecognizesAccessKey="True"
-                        TextWrapping="Wrap" />
-                </Border>
+                    Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    RecognizesAccessKey="True"
+                    UseLayoutRounding="False" />
             </ControlTemplate>
         </Setter>
 
-        <!--  Unchecked PointerOver State  -->
+        <!--  Unchecked Pointerover State  -->
         <Style Selector="^:pointerover">
-            <Style Selector="^ /template/ Border#RootBorder">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="Background" Value="{DynamicResource CheckBoxCardPointeroverBackground}" />
             </Style>
         </Style>
 
         <!--  Unchecked Pressed State  -->
         <Style Selector="^:pressed">
-            <Style Selector="^ /template/ Border#RootBorder">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="Background" Value="{DynamicResource CheckBoxCardPressedBackground}" />
             </Style>
         </Style>
 
         <!--  Unchecked Disabled state  -->
         <Style Selector="^:disabled">
-            <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
             </Style>
         </Style>
 
         <Style Selector="^:checked">
-            <Style Selector="^ /template/ Border#RootBorder">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
                 <Setter Property="Background" Value="{DynamicResource CheckBoxCardCheckedBackground}" />
             </Style>
-            <Style Selector="^:pointerover /template/ Border#RootBorder">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
             </Style>
-            <Style Selector="^:pressed /template/ Border#RootBorder">
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPressedBorderBrush}" />
             </Style>
             <!--  Checked Disabled State  -->
             <Style Selector="^:disabled">
-                <Style Selector="^ /template/ Border#RootBorder">
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                     <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
                 </Style>
-                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                     <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
                 </Style>
             </Style>
         </Style>
 
         <Style Selector="^:indeterminate">
-            <!--  Checked Disabled State  -->
-            <Style Selector="^ /template/ Border#RootBorder">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
             </Style>
-            <Style Selector="^:pointerover /template/ Border#RootBorder">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
             </Style>
-            <Style Selector="^:pressed /template/ Border#RootBorder">
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPressedBorderBrush}" />
             </Style>
             <Style Selector="^:disabled">
-                <Style Selector="^ /template/ Border#RootBorder">
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                     <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
                 </Style>
             </Style>

src/Semi.Avalonia/Controls/ComboBox.axaml

@@ -31,14 +31,11 @@
         <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" />
         <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
-        <Setter Property="MinHeight" Value="{DynamicResource ComboBoxDefaultHeight}" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="HorizontalAlignment" Value="Left" />
@@ -47,105 +44,109 @@
         <Setter Property="PlaceholderForeground" Value="{DynamicResource ComboBoxPlaceHolderForeground}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ComboBox">
-                <Grid ColumnDefinitions="*,32">
-                    <Border
-                        x:Name="Background"
-                        Grid.Column="0"
-                        Grid.ColumnSpan="2"
-                        MinWidth="{DynamicResource ComboBoxThemeMinWidth}"
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}" />
-                    <TextBlock
-                        x:Name="PlaceholderTextBlock"
-                        Grid.Column="0"
-                        Margin="{TemplateBinding Padding}"
-                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                        IsVisible="{TemplateBinding SelectionBoxItem,
-                                                    Converter={x:Static ObjectConverters.IsNull}}"
-                        Opacity="0.3"
-                        Text="{TemplateBinding PlaceholderText}" />
-                    <ContentPresenter
-                        x:Name="ContentPresenter"
-                        Grid.Column="0"
-                        Margin="{TemplateBinding Padding}"
-                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                        Content="{TemplateBinding SelectionBoxItem}"
-                        ContentTemplate="{TemplateBinding ItemTemplate}" />
-
-                    <Border
-                        x:Name="DropDownOverlay"
-                        Grid.Column="1"
-                        Width="30"
-                        Margin="0,1,1,1"
-                        HorizontalAlignment="Right"
-                        Background="Transparent"
-                        IsVisible="False" />
-
-                    <PathIcon
-                        x:Name="DropDownGlyph"
-                        Grid.Column="1"
-                        Width="12"
-                        Height="12"
-                        Margin="0,0,10,0"
-                        HorizontalAlignment="Right"
-                        VerticalAlignment="Center"
-                        Data="{DynamicResource ComboBoxIcon}"
-                        Foreground="{DynamicResource ComboBoxIconDefaultForeground}"
-                        IsHitTestVisible="False"
-                        UseLayoutRounding="False" />
-
-                    <Popup
-                        Name="PART_Popup"
-                        Grid.Column="0"
-                        MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
-                        MaxHeight="{TemplateBinding MaxDropDownHeight}"
-                        ClipToBounds="False"
-                        InheritsTransform="True"
-                        IsLightDismissEnabled="True"
-                        IsOpen="{TemplateBinding IsDropDownOpen,
-                                                 Mode=TwoWay}"
-                        PlacementTarget="Background"
-                        WindowManagerAddShadowHint="False">
+                <DataValidationErrors>
+                    <Grid ColumnDefinitions="*,32">
                         <Border
-                            x:Name="PopupBorder"
-                            Margin="0,4"
-                            HorizontalAlignment="Stretch"
-                            Background="{DynamicResource ComboBoxPopupBackground}"
-                            BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
-                            BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}"
-                            BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
-                            ClipToBounds="True"
-                            CornerRadius="6">
-                            <ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
-                                <ItemsPresenter
-                                    Name="PART_ItemsPresenter"
-                                    Margin="{DynamicResource ComboBoxDropdownContentMargin}"
-                                    ItemsPanel="{TemplateBinding ItemsPanel}" />
-                            </ScrollViewer>
-                        </Border>
-                    </Popup>
-                </Grid>
+                            x:Name="Background"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
+                            MinHeight="{DynamicResource ComboBoxDefaultHeight}"
+                            MinWidth="{DynamicResource ComboBoxThemeMinWidth}"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}" />
+                        <TextBlock
+                            x:Name="PlaceholderTextBlock"
+                            Grid.Column="0"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Foreground="{TemplateBinding Foreground}"
+                            IsVisible="{TemplateBinding SelectionBoxItem,Converter={x:Static ObjectConverters.IsNull}}"
+                            Opacity="0.3"
+                            Text="{TemplateBinding PlaceholderText}" />
+                        <ContentPresenter
+                            x:Name="ContentPresenter"
+                            Grid.Column="0"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding SelectionBoxItem}"
+                            ContentTemplate="{TemplateBinding ItemTemplate}" />
+
+                        <Border
+                            x:Name="DropDownOverlay"
+                            Grid.Column="1"
+                            Width="30"
+                            Margin="0,1,1,1"
+                            HorizontalAlignment="Right"
+                            Background="Transparent"
+                            IsVisible="False" />
+
+                        <PathIcon
+                            x:Name="DropDownGlyph"
+                            Grid.Column="1"
+                            Width="12"
+                            Height="12"
+                            Margin="0,0,10,0"
+                            HorizontalAlignment="Right"
+                            VerticalAlignment="Center"
+                            Data="{DynamicResource ComboBoxIcon}"
+                            Foreground="{DynamicResource ComboBoxIconDefaultForeground}"
+                            IsHitTestVisible="False"
+                            UseLayoutRounding="False" />
+
+                        <Popup
+                            Name="PART_Popup"
+                            Grid.Column="0"
+                            MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
+                            MaxHeight="{TemplateBinding MaxDropDownHeight}"
+                            ClipToBounds="False"
+                            InheritsTransform="True"
+                            IsLightDismissEnabled="True"
+                            IsOpen="{TemplateBinding IsDropDownOpen,Mode=TwoWay}"
+                            PlacementTarget="Background"
+                            WindowManagerAddShadowHint="False">
+                            <Border
+                                x:Name="PopupBorder"
+                                Margin="0,4"
+                                HorizontalAlignment="Stretch"
+                                Background="{DynamicResource ComboBoxPopupBackground}"
+                                BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
+                                BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}"
+                                BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
+                                ClipToBounds="True"
+                                CornerRadius="6">
+                                <ScrollViewer
+                                    HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                                    VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                                    <ItemsPresenter
+                                        Name="PART_ItemsPresenter"
+                                        Margin="{DynamicResource ComboBoxDropdownContentMargin}"
+                                        ItemsPanel="{TemplateBinding ItemsPanel}" />
+                                </ScrollViewer>
+                            </Border>
+                        </Popup>
+                    </Grid>
+                </DataValidationErrors>
             </ControlTemplate>
         </Setter>
 
-        <Style Selector="^.Large">
+        <Style Selector="^.Large /template/ Border#Background">
             <Setter Property="ComboBox.MinHeight" Value="{DynamicResource ComboBoxLargeHeight}" />
         </Style>
-        <Style Selector="^.Small">
+        <Style Selector="^.Small /template/ Border#Background">
             <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  -->
@@ -174,6 +175,25 @@
                 <Setter Property="Foreground" Value="{DynamicResource ComboBoxIconDisabledForeground}" />
             </Style>
         </Style>
+        <!--  Error State  -->
+        <Style Selector="^:error">
+            <Style Selector="^ /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pressed /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:focus /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+            </Style>
+        </Style>
+
         <Style Selector="^.Bordered">
             <Style Selector="^ /template/ Border#Background">
                 <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorBorderedBackground}" />
@@ -202,6 +222,24 @@
                     <Setter Property="Foreground" Value="{DynamicResource ComboBoxIconDisabledForeground}" />
                 </Style>
             </Style>
+            <Style Selector="^:error">
+                <Style Selector="^ /template/ Border#Background">
+                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsBorderBrush}" />
+                </Style>
+                <Style Selector="^:pointerover /template/ Border#Background">
+                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsPointerOverBorderBrush}" />
+                </Style>
+                <Style Selector="^:pressed /template/ Border#Background">
+                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsPressedBorderBrush}" />
+                </Style>
+                <Style Selector="^:focus /template/ Border#Background">
+                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+                </Style>
+            </Style>
         </Style>
     </ControlTheme>
 
@@ -228,7 +266,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 +285,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/ContextMenu.axaml

@@ -18,7 +18,7 @@
                 <Border
                     MinHeight="{TemplateBinding MinHeight}"
                     MaxWidth="{TemplateBinding MaxWidth}"
-                    Margin="0,4"
+                    Margin="4"
                     Padding="{TemplateBinding Padding}"
                     HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                     Background="{TemplateBinding Background}"
@@ -26,7 +26,7 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     BoxShadow="{DynamicResource MenuFlyoutBorderBoxShadow}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <ScrollViewer Theme="{StaticResource MenuScrollViewer}">
+                    <ScrollViewer Theme="{DynamicResource MenuScrollViewer}">
                         <ItemsPresenter
                             Name="PART_ItemsPresenter"
                             Grid.IsSharedSizeScope="True"

src/Semi.Avalonia/Controls/Controls.axaml

@@ -16,9 +16,11 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ComboBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ContentControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ContextMenu.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/DataValidationErrors.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/DataValidationErrors.axaml

@@ -0,0 +1,108 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:collections="clr-namespace:System.Collections;assembly=netstandard">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="{x:Type DataValidationErrors}" TargetType="DataValidationErrors">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="DataValidationErrors">
+                <DockPanel LastChildFill="True">
+                    <ContentControl
+                        x:Name="InlineDataValidationContentControl"
+                        Margin="0,4,0,0"
+                        Content="{Binding (DataValidationErrors.Errors)}"
+                        ContentTemplate="{TemplateBinding ErrorTemplate}"
+                        DataContext="{TemplateBinding Owner}"
+                        DockPanel.Dock="Bottom"
+                        IsVisible="{Binding (DataValidationErrors.HasErrors)}" />
+                    <ContentPresenter
+                        Name="PART_ContentPresenter"
+                        Padding="{TemplateBinding Padding}"
+                        Background="{TemplateBinding Background}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                </DockPanel>
+            </ControlTemplate>
+        </Setter>
+        <Setter Property="ErrorTemplate">
+            <DataTemplate>
+                <ItemsControl
+                    x:DataType="DataValidationErrors"
+                    Foreground="{DynamicResource DataValidationErrorsForeground}"
+                    ItemsSource="{Binding}">
+                    <ItemsControl.Styles>
+                        <Style Selector="TextBlock">
+                            <Setter Property="TextWrapping" Value="Wrap" />
+                        </Style>
+                    </ItemsControl.Styles>
+                </ItemsControl>
+            </DataTemplate>
+        </Setter>
+    </ControlTheme>
+    <ControlTheme x:Key="SilentDataValidationErrors" TargetType="DataValidationErrors">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="DataValidationErrors">
+                <ContentPresenter
+                    Name="PART_ContentPresenter"
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="TooltipDataValidationErrors" TargetType="DataValidationErrors">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="DataValidationErrors">
+                <DockPanel LastChildFill="True">
+                    <ContentControl
+                        Content="{Binding (DataValidationErrors.Errors)}"
+                        ContentTemplate="{TemplateBinding ErrorTemplate}"
+                        DataContext="{TemplateBinding Owner}"
+                        DockPanel.Dock="Right"
+                        IsVisible="{Binding (DataValidationErrors.HasErrors)}" />
+                    <ContentPresenter
+                        Name="PART_ContentPresenter"
+                        Padding="{TemplateBinding Padding}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                </DockPanel>
+            </ControlTemplate>
+        </Setter>
+        <Setter Property="ErrorTemplate">
+            <DataTemplate>
+                <Panel Name="PART_InlineErrorTemplatePanel" Background="Transparent">
+                    <Panel.Styles>
+                        <Style Selector="Panel#PART_InlineErrorTemplatePanel">
+                            <Setter Property="Margin" Value="8,0" />
+                        </Style>
+                        <Style Selector="Panel#PART_InlineErrorTemplatePanel ToolTip">
+                            <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsForeground}" />
+                        </Style>
+                        <Style Selector="Panel#PART_InlineErrorTemplatePanel ToolTip TextBlock">
+                            <Setter Property="TextWrapping" Value="Wrap" />
+                        </Style>
+                    </Panel.Styles>
+                    <ToolTip.Tip>
+                        <ItemsControl x:DataType="collections:IEnumerable" ItemsSource="{Binding}" />
+                    </ToolTip.Tip>
+                    <Path
+                        Width="14"
+                        Height="14"
+                        Data="M14,7 A7,7 0 0,0 0,7 M0,7 A7,7 0 1,0 14,7 M7,3l0,5 M7,9l0,2"
+                        Stroke="{DynamicResource DataValidationErrorsForeground}"
+                        StrokeThickness="2" />
+                </Panel>
+            </DataTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

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"
@@ -127,7 +125,6 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type DatePicker}" TargetType="DatePicker">
-        <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonDefaultHeight}" />
         <Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonForeground}" />
         <Setter Property="Background" Value="{DynamicResource DateTimePickerButtonBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerButtonBorderBrush}" />
@@ -137,90 +134,94 @@
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="Template">
             <ControlTemplate TargetType="DatePicker">
-                <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
-                    <Button
-                        Name="PART_FlyoutButton"
-                        Width="298"
-                        MinWidth="298"
-                        HorizontalAlignment="Stretch"
-                        VerticalAlignment="Stretch"
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}"
-                        Cursor="Hand"
-                        Foreground="{TemplateBinding Foreground}"
-                        IsEnabled="{TemplateBinding IsEnabled}"
-                        Theme="{StaticResource DateTimePickerFlyoutButton}">
-                        <Grid ColumnDefinitions="*, Auto">
-                            <Grid
-                                Name="PART_ButtonContentGrid"
-                                Grid.Column="0"
-                                VerticalAlignment="Center"
-                                ColumnDefinitions="78*,Auto,132*,Auto,78*">
-                                <TextBlock
-                                    Name="PART_DayTextBlock"
-                                    Padding="12,4"
-                                    HorizontalAlignment="Center"
+                <DataValidationErrors>
+                    <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
+                        <Button
+                            Name="PART_FlyoutButton"
+                            Width="298"
+                            MinWidth="298"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            Cursor="Hand"
+                            DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
+                            Foreground="{TemplateBinding Foreground}"
+                            IsEnabled="{TemplateBinding IsEnabled}"
+                            MinHeight="{DynamicResource DateTimePickerButtonDefaultHeight}"
+                            Theme="{StaticResource DateTimePickerFlyoutButton}">
+                            <Grid ColumnDefinitions="*, Auto">
+                                <Grid
+                                    Name="PART_ButtonContentGrid"
+                                    Grid.Column="0"
                                     VerticalAlignment="Center"
-                                    FontFamily="{TemplateBinding FontFamily}"
-                                    FontSize="{TemplateBinding FontSize}"
-                                    FontWeight="{TemplateBinding FontWeight}"
-                                    Text="day" />
-                                <TextBlock
-                                    Name="PART_MonthTextBlock"
-                                    Padding="12,4"
-                                    VerticalAlignment="Center"
-                                    FontFamily="{TemplateBinding FontFamily}"
-                                    FontSize="{TemplateBinding FontSize}"
-                                    FontWeight="{TemplateBinding FontWeight}"
-                                    Text="month"
-                                    TextAlignment="Left" />
-                                <TextBlock
-                                    Name="PART_YearTextBlock"
-                                    Padding="12,4"
-                                    HorizontalAlignment="Center"
-                                    VerticalAlignment="Center"
-                                    FontFamily="{TemplateBinding FontFamily}"
-                                    FontSize="{TemplateBinding FontSize}"
-                                    FontWeight="{TemplateBinding FontWeight}"
-                                    Text="year" />
-                                <Rectangle
-                                    x:Name="PART_FirstSpacer"
+                                    ColumnDefinitions="78*,Auto,132*,Auto,78*">
+                                    <TextBlock
+                                        Name="PART_DayTextBlock"
+                                        Padding="12,4"
+                                        HorizontalAlignment="Center"
+                                        VerticalAlignment="Center"
+                                        FontFamily="{TemplateBinding FontFamily}"
+                                        FontSize="{TemplateBinding FontSize}"
+                                        FontWeight="{TemplateBinding FontWeight}"
+                                        Text="day" />
+                                    <TextBlock
+                                        Name="PART_MonthTextBlock"
+                                        Padding="12,4"
+                                        VerticalAlignment="Center"
+                                        FontFamily="{TemplateBinding FontFamily}"
+                                        FontSize="{TemplateBinding FontSize}"
+                                        FontWeight="{TemplateBinding FontWeight}"
+                                        Text="month"
+                                        TextAlignment="Left" />
+                                    <TextBlock
+                                        Name="PART_YearTextBlock"
+                                        Padding="12,4"
+                                        HorizontalAlignment="Center"
+                                        VerticalAlignment="Center"
+                                        FontFamily="{TemplateBinding FontFamily}"
+                                        FontSize="{TemplateBinding FontSize}"
+                                        FontWeight="{TemplateBinding FontWeight}"
+                                        Text="year" />
+                                    <Rectangle
+                                        x:Name="PART_FirstSpacer"
+                                        Grid.Column="1"
+                                        Width="1"
+                                        Margin="0,4"
+                                        HorizontalAlignment="Center"
+                                        Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                    <Rectangle
+                                        x:Name="PART_SecondSpacer"
+                                        Grid.Column="3"
+                                        Width="1"
+                                        Margin="0,4"
+                                        HorizontalAlignment="Center"
+                                        Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                </Grid>
+                                <PathIcon
+                                    Name="PART_Icon"
                                     Grid.Column="1"
-                                    Width="1"
-                                    Margin="0,4"
-                                    HorizontalAlignment="Center"
-                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
-                                <Rectangle
-                                    x:Name="PART_SecondSpacer"
-                                    Grid.Column="3"
-                                    Width="1"
-                                    Margin="0,4"
-                                    HorizontalAlignment="Center"
-                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                    Width="16"
+                                    Height="16"
+                                    Margin="0,0,8,0"
+                                    Data="{DynamicResource DatePickerIconGlyph}"
+                                    Foreground="{DynamicResource DateTimePickerIconForeground}" />
                             </Grid>
-                            <PathIcon
-                                Name="PART_Icon"
-                                Grid.Column="1"
-                                Width="16"
-                                Height="16"
-                                Margin="0,0,8,0"
-                                Data="{DynamicResource DatePickerIconGlyph}"
-                                Foreground="{DynamicResource DateTimePickerIconForeground}" />
-                        </Grid>
-                    </Button>
+                        </Button>
 
-                    <Popup
-                        Name="PART_Popup"
-                        IsLightDismissEnabled="True"
-                        PlacementMode="Bottom"
-                        PlacementTarget="{TemplateBinding}"
-                        WindowManagerAddShadowHint="False">
-                        <DatePickerPresenter Name="PART_PickerPresenter" />
-                    </Popup>
+                        <Popup
+                            Name="PART_Popup"
+                            IsLightDismissEnabled="True"
+                            Placement="Bottom"
+                            PlacementTarget="{TemplateBinding}"
+                            WindowManagerAddShadowHint="False">
+                            <DatePickerPresenter Name="PART_PickerPresenter" />
+                        </Popup>
 
-                </Grid>
+                    </Grid>
+                </DataValidationErrors>
             </ControlTemplate>
         </Setter>
 
@@ -232,10 +233,10 @@
         <Style Selector="^:hasnodate /template/ Button#PART_FlyoutButton TextBlock">
             <Setter Property="Foreground" Value="{DynamicResource DateTimePickerEmptyForeground}" />
         </Style>
-        <Style Selector="^.Large">
+        <Style Selector="^.Large /template/ Button#PART_FlyoutButton">
             <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonLargeHeight}" />
         </Style>
-        <Style Selector="^.Small">
+        <Style Selector="^.Small /template/ Button#PART_FlyoutButton">
             <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonSmallHeight}" />
         </Style>
     </ControlTheme>

src/Semi.Avalonia/Controls/DateTimePickerShared.axaml

@@ -30,6 +30,25 @@
             <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerButtonDisabledBorderBrush}" />
             <Setter Property="Background" Value="{DynamicResource DateTimePickerButtonDisabledBackground}" />
         </Style>
+
+        <Style Selector="^:error">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:focus /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+            </Style>
+        </Style>
     </ControlTheme>
 
     <!--  Theme for the items displayed in the selectors  -->
@@ -103,8 +122,7 @@
                     Height="8"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
-                    Data="{DynamicResource DateTimePickerButtonUpGlyph}"
-                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
+                    Data="{DynamicResource DateTimePickerButtonUpGlyph}" />
             </Template>
         </Setter>
     </ControlTheme>
@@ -125,8 +143,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>
@@ -65,6 +66,9 @@
         <Style Selector="^.Tertiary">
             <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
         </Style>
+        <Style Selector="^.Success">
+            <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonDefaultSuccessForeground}" />
+        </Style>
         <Style Selector="^.Warning">
             <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonDefaultWarningForeground}" />
         </Style>
@@ -96,7 +100,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 +113,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 +141,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>
@@ -188,6 +193,19 @@
                 <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidTertiaryPressedBorderBrush}" />
             </Style>
         </Style>
+        <Style Selector="^.Success">
+            <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidSuccessBackground}" />
+            <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidSuccessBorderBrush}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidSuccessPointeroverBackground}" />
+                <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidSuccessPointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidSuccessPressedBackground}" />
+                <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidSuccessPressedBorderBrush}" />
+            </Style>
+        </Style>
         <Style Selector="^.Warning">
             <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
             <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidWarningBackground}" />
@@ -223,7 +241,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/FlyoutPresenter.axaml

@@ -20,11 +20,11 @@
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
         <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
         <Setter Property="FlyoutPresenter.CornerRadius" Value="{DynamicResource FlyoutCornerRadius}" />
-        <Setter Property="FlyoutPresenter.Margin" Value="4" />
         <Setter Property="FlyoutPresenter.Template">
             <ControlTemplate TargetType="FlyoutPresenter">
                 <Border
                     Name="LayoutRoot"
+                    Margin="4"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -46,4 +46,48 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
+
+    <ControlTheme x:Key="LightFlyout" TargetType="FlyoutPresenter">
+        <Setter Property="FlyoutPresenter.HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="FlyoutPresenter.VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="FlyoutPresenter.UseLayoutRounding" Value="False" />
+        <Setter Property="FlyoutPresenter.FontWeight" Value="{DynamicResource FlyoutFontWeight}" />
+        <Setter Property="FlyoutPresenter.Background" Value="Transparent" />
+        <Setter Property="FlyoutPresenter.BorderBrush" Value="Transparent" />
+        <Setter Property="FlyoutPresenter.BorderThickness" Value="0" />
+        <Setter Property="FlyoutPresenter.Padding" Value="{DynamicResource FlyoutPadding}" />
+        <Setter Property="FlyoutPresenter.MinWidth" Value="{DynamicResource FlyoutMinWidth}" />
+        <Setter Property="FlyoutPresenter.MaxWidth" Value="{DynamicResource FlyoutMaxWidth}" />
+        <Setter Property="FlyoutPresenter.MinHeight" Value="{DynamicResource FlyoutMinHeight}" />
+        <Setter Property="FlyoutPresenter.MaxHeight" Value="{DynamicResource FlyoutMaxHeight}" />
+        <Setter Property="FlyoutPresenter.Foreground" Value="{DynamicResource FlyoutForeground}" />
+        <Setter Property="FlyoutPresenter.ClipToBounds" Value="False" />
+        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
+        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+        <Setter Property="FlyoutPresenter.CornerRadius" Value="{DynamicResource FlyoutCornerRadius}" />
+        <Setter Property="FlyoutPresenter.Margin" Value="4" />
+        <Setter Property="FlyoutPresenter.Template">
+            <ControlTemplate TargetType="FlyoutPresenter">
+                <Border
+                    Name="LayoutRoot"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    ClipToBounds="False"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    UseLayoutRounding="False">
+                    <ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                        <ContentPresenter
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            HorizontalContentAlignment="Stretch"
+                            VerticalContentAlignment="Stretch"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}" />
+                    </ScrollViewer>
+                </Border>
+            </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/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

@@ -1,6 +1,7 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="using:Semi.Avalonia.Converters"
     xmlns:dialogs="clr-namespace:Avalonia.Dialogs;assembly=Avalonia.Dialogs"
     xmlns:internal="clr-namespace:Avalonia.Dialogs.Internal;assembly=Avalonia.Dialogs"
     x:CompileBindings="True">
@@ -14,11 +15,11 @@
         </Border>
     </Design.PreviewWith>
 
-    <internal:ResourceSelectorConverter x:Key="Icons">
+    <converters:KeyToPathConverter x:Key="Icons">
         <PathGeometry x:Key="Icon_Folder">M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z</PathGeometry>
         <PathGeometry x:Key="Icon_File">M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M15,18V16H6V18H15M18,14V12H6V14H18Z</PathGeometry>
         <PathGeometry x:Key="Icon_Volume">M6,2H18A2,2 0 0,1 20,4V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2M12,4A6,6 0 0,0 6,10C6,13.31 8.69,16 12.1,16L11.22,13.77C10.95,13.29 11.11,12.68 11.59,12.4L12.45,11.9C12.93,11.63 13.54,11.79 13.82,12.27L15.74,14.69C17.12,13.59 18,11.9 18,10A6,6 0 0,0 12,4M12,9A1,1 0 0,1 13,10A1,1 0 0,1 12,11A1,1 0 0,1 11,10A1,1 0 0,1 12,9M7,18A1,1 0 0,0 6,19A1,1 0 0,0 7,20A1,1 0 0,0 8,19A1,1 0 0,0 7,18M12.09,13.27L14.58,19.58L17.17,18.08L12.95,12.77L12.09,13.27Z</PathGeometry>
-    </internal:ResourceSelectorConverter>
+    </converters:KeyToPathConverter>
     <ControlTheme x:Key="{x:Type dialogs:ManagedFileChooser}" TargetType="dialogs:ManagedFileChooser">
         <Setter Property="dialogs:ManagedFileChooser.Template">
             <ControlTemplate x:DataType="internal:ManagedFileChooserViewModel" TargetType="dialogs:ManagedFileChooser">
@@ -31,7 +32,7 @@
                         <ListBox
                             x:Name="PART_QuickLinks"
                             Focusable="False"
-                            Items="{Binding QuickLinks}"
+                            ItemsSource="{Binding QuickLinks}"
                             SelectedIndex="{Binding QuickLinksSelectedIndex}">
                             <ListBox.ItemTemplate>
                                 <DataTemplate>
@@ -74,7 +75,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 +143,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

@@ -27,10 +27,10 @@
                         RenderTransform="{x:Null}">
                         <RepeatButton.IsVisible>
                             <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}" ConverterParameter="0">
-                                <Binding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
                             </MultiBinding>
                         </RepeatButton.IsVisible>
                         <PathIcon
@@ -50,10 +50,10 @@
                         RenderTransform="{x:Null}">
                         <RepeatButton.IsVisible>
                             <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}" ConverterParameter="100">
-                                <Binding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
                             </MultiBinding>
                         </RepeatButton.IsVisible>
                         <PathIcon
@@ -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/MenuFlyoutPresenter.axaml

@@ -13,31 +13,26 @@
         <Setter Property="MenuFlyoutPresenter.Foreground" Value="{DynamicResource TextBlockDefaultForeground}" />
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
         <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
-        <Setter Property="MenuFlyoutPresenter.Margin" Value="4" />
-        <Setter Property="MenuFlyoutPresenter.CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
+        <Setter Property="MenuFlyoutPresenter.CornerRadius" Value="{DynamicResource MenuFlyoutCornerRadius}" />
         <Setter Property="MenuFlyoutPresenter.Template">
             <ControlTemplate TargetType="MenuFlyoutPresenter">
                 <Border
                     Name="LayoutRoot"
-                    MinWidth="{DynamicResource MenuFlyoutMinWidth}"
-                    MinHeight="{DynamicResource MenuFlyoutMinHeight}"
-                    MaxWidth="{DynamicResource MenuFlyoutMaxWidth}"
-                    MaxHeight="{DynamicResource MenuFlyoutMaxHeight}"
-                    Margin="8"
-                    Padding="{DynamicResource MenuFlyoutPadding}"
-                    HorizontalAlignment="Stretch"
-                    Background="{DynamicResource MenuFlyoutBackground}"
-                    BorderBrush="{DynamicResource MenuFlyoutBorderBrush}"
-                    BorderThickness="{DynamicResource MenuFlyoutBorderThickness}"
+                    Margin="4"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
                     BoxShadow="{DynamicResource MenuFlyoutBorderBoxShadow}"
-                    CornerRadius="{DynamicResource MenuFlyoutCornerRadius}">
+                    ClipToBounds="False"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    UseLayoutRounding="False">
                     <ScrollViewer
                         HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                         Theme="{StaticResource MenuScrollViewer}"
                         VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                         <ItemsPresenter
                             Name="PART_ItemsPresenter"
-                            Margin="{DynamicResource MenuFlyoutScrollerMargin}"
+                            Margin="{TemplateBinding Padding}"
                             Grid.IsSharedSizeScope="True"
                             ItemsPanel="{TemplateBinding ItemsPanel}"
                             KeyboardNavigation.TabNavigation="Continue" />

src/Semi.Avalonia/Controls/NumericUpDown.axaml

@@ -8,32 +8,64 @@
         <Setter Property="NumericUpDown.CornerRadius" Value="{DynamicResource NumericUpDownCornerRadius}" />
         <Setter Property="NumericUpDown.Template">
             <ControlTemplate TargetType="NumericUpDown">
-                <ButtonSpinner
-                    Name="PART_Spinner"
-                    MinWidth="0"
-                    HorizontalContentAlignment="Stretch"
-                    VerticalContentAlignment="Stretch"
-                    AllowSpin="{TemplateBinding AllowSpin}"
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
-                    ButtonSpinnerLocation="{TemplateBinding ButtonSpinnerLocation}"
-                    ShowButtonSpinner="{TemplateBinding ShowButtonSpinner}">
-                    <TextBox
-                        Name="PART_TextBox"
-                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                        AcceptsReturn="False"
-                        CornerRadius="{TemplateBinding CornerRadius}"
-                        FontSize="{TemplateBinding FontSize}"
-                        Foreground="{TemplateBinding Foreground}"
-                        IsReadOnly="{TemplateBinding IsReadOnly}"
-                        Text="{TemplateBinding Text}"
-                        TextWrapping="NoWrap"
-                        Watermark="{TemplateBinding Watermark}" />
-                </ButtonSpinner>
+                <DataValidationErrors>
+                    <ButtonSpinner
+                        Name="PART_Spinner"
+                        MinWidth="0"
+                        HorizontalContentAlignment="Stretch"
+                        VerticalContentAlignment="Stretch"
+                        AllowSpin="{TemplateBinding AllowSpin}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        ButtonSpinnerLocation="{TemplateBinding ButtonSpinnerLocation}"
+                        ShowButtonSpinner="{TemplateBinding ShowButtonSpinner}">
+                        <TextBox
+                            Name="PART_TextBox"
+                            Height="{TemplateBinding Height}"
+                            MinHeight="{DynamicResource NumericUpDownWrapperDefaultHeight}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            AcceptsReturn="False"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            DataValidationErrors.Errors="{ReflectionBinding $parent[NumericUpDown].(DataValidationErrors.Errors)}"
+                            FontSize="{TemplateBinding FontSize}"
+                            Foreground="{TemplateBinding Foreground}"
+                            IsReadOnly="{TemplateBinding IsReadOnly}"
+                            Text="{TemplateBinding Text}"
+                            TextWrapping="NoWrap"
+                            Theme="{DynamicResource NonErrorTextBox}"
+                            Watermark="{TemplateBinding Watermark}" />
+                    </ButtonSpinner>
+                </DataValidationErrors>
             </ControlTemplate>
         </Setter>
+
+        <Style Selector="^.Large /template/ TextBox#PART_TextBox">
+            <Setter Property="MinHeight" Value="{DynamicResource NumericUpDownWrapperLargeHeight}" />
+        </Style>
+        <Style Selector="^.Small /template/ TextBox#PART_TextBox">
+            <Setter Property="MinHeight" Value="{DynamicResource NumericUpDownWrapperSmallHeight}" />
+        </Style>
+
+        <Style Selector="^:error">
+            <Style Selector="^ /template/ TextBox#PART_TextBox">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pointerover /template/ TextBox#PART_TextBox">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pressed /template/ TextBox#PART_TextBox">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:focus /template/ TextBox#PART_TextBox">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+            </Style>
+        </Style>
     </ControlTheme>
 
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/ProgressBar.axaml

@@ -158,7 +158,7 @@
                             <TextBlock.Text>
                                 <MultiBinding Converter="{StaticResource StringFormatConverter}">
                                     <TemplateBinding Property="ProgressTextFormat" />
-                                    <Binding Path="Value" RelativeSource="{RelativeSource TemplatedParent}" />
+                                    <ReflectionBinding Path="Value" RelativeSource="{RelativeSource TemplatedParent}" />
                                     <TemplateBinding Property="Percentage" />
                                     <TemplateBinding Property="Minimum" />
                                     <TemplateBinding Property="Maximum" />
@@ -211,13 +211,13 @@
             <Style.Animations>
                 <Animation IterationCount="Infinite" Duration="0:0:2">
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
-                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationStartPosition}" />
+                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationStartPosition}" />
                     </KeyFrame>
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.5">
-                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
+                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
                     </KeyFrame>
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
-                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
+                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
                     </KeyFrame>
                 </Animation>
             </Style.Animations>
@@ -226,13 +226,13 @@
             <Style.Animations>
                 <Animation IterationCount="Infinite" Duration="0:0:2">
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
-                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
+                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
                     </KeyFrame>
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0.75">
-                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
+                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
                     </KeyFrame>
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
-                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationEndPosition}" />
+                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationEndPosition}" />
                     </KeyFrame>
                 </Animation>
             </Style.Animations>
@@ -241,13 +241,13 @@
             <Style.Animations>
                 <Animation IterationCount="Infinite" Duration="0:0:2">
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
-                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationStartPosition}" />
+                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationStartPosition}" />
                     </KeyFrame>
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.5">
-                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
+                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
                     </KeyFrame>
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
-                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
+                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
                     </KeyFrame>
                 </Animation>
             </Style.Animations>
@@ -256,28 +256,28 @@
             <Style.Animations>
                 <Animation IterationCount="Infinite" Duration="0:0:2">
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
-                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
+                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
                     </KeyFrame>
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0.75">
-                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
+                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
                     </KeyFrame>
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
-                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationEndPosition}" />
+                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationEndPosition}" />
                     </KeyFrame>
                 </Animation>
             </Style.Animations>
         </Style>
         <Style Selector="^:horizontal /template/ Border#IndeterminateProgressBarIndicator">
-            <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerWidth}" />
+            <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerWidth}" />
         </Style>
         <Style Selector="^:horizontal /template/ Border#IndeterminateProgressBarIndicator2">
-            <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2Width}" />
+            <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2Width}" />
         </Style>
         <Style Selector="^:vertical /template/ Border#IndeterminateProgressBarIndicator">
-            <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerWidth}" />
+            <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerWidth}" />
         </Style>
         <Style Selector="^:vertical /template/ Border#IndeterminateProgressBarIndicator2">
-            <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2Width}" />
+            <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2Width}" />
         </Style>
         <Style Selector="^.Left">
             <Style Selector="^:horizontal /template/ LayoutTransformControl#PART_LayoutTransformControl">

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
@@ -48,6 +49,9 @@
         <Style Selector="^.Tertiary">
             <Setter Property="RepeatButton.Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
         </Style>
+        <Style Selector="^.Success">
+            <Setter Property="RepeatButton.Foreground" Value="{DynamicResource ButtonDefaultSuccessForeground}" />
+        </Style>
         <Style Selector="^.Warning">
             <Setter Property="RepeatButton.Foreground" Value="{DynamicResource ButtonDefaultWarningForeground}" />
         </Style>
@@ -126,6 +130,19 @@
                 <Setter Property="RepeatButton.BorderBrush" Value="{DynamicResource ButtonSolidTertiaryPressedBorderBrush}" />
             </Style>
         </Style>
+        <Style Selector="^.Success">
+            <Setter Property="RepeatButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="RepeatButton.Background" Value="{DynamicResource ButtonSolidSuccessBackground}" />
+            <Setter Property="RepeatButton.BorderBrush" Value="{DynamicResource ButtonSolidSuccessBorderBrush}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="RepeatButton.Background" Value="{DynamicResource ButtonSolidSuccessPointeroverBackground}" />
+                <Setter Property="RepeatButton.BorderBrush" Value="{DynamicResource ButtonSolidSuccessPointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="RepeatButton.Background" Value="{DynamicResource ButtonSolidSuccessPressedBackground}" />
+                <Setter Property="RepeatButton.BorderBrush" Value="{DynamicResource ButtonSolidSuccessPressedBorderBrush}" />
+            </Style>
+        </Style>
         <Style Selector="^.Warning">
             <Setter Property="RepeatButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
             <Setter Property="RepeatButton.Background" Value="{DynamicResource ButtonSolidWarningBackground}" />

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>
@@ -208,50 +208,33 @@
                 <Grid ColumnDefinitions="*,Auto" RowDefinitions="*,Auto">
                     <ScrollContentPresenter
                         Name="PART_ContentPresenter"
+                        Grid.RowSpan="2"
+                        Grid.ColumnSpan="2"
                         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"
@@ -260,15 +243,54 @@
             </ControlTemplate>
         </Setter>
         <Style Selector="^:pointerover">
-            <Style Selector="^ /template/ ScrollBar#horizontalScrollBar">
+            <Style Selector="^ /template/ ScrollBar#PART_HorizontalScrollBar">
                 <Setter Property="Opacity" Value="1" />
             </Style>
-            <Style Selector="^ /template/ ScrollBar#verticalScrollBar">
+            <Style Selector="^ /template/ ScrollBar#PART_VerticalScrollBar">
                 <Setter Property="Opacity" Value="1" />
             </Style>
         </Style>
     </ControlTheme>
 
+    <ControlTheme x:Key="StaticScrollViewer" TargetType="ScrollViewer">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ScrollViewer">
+                <Grid ColumnDefinitions="*,Auto" RowDefinitions="*,Auto">
+                    <ScrollContentPresenter
+                        Name="PART_ContentPresenter"
+                        Padding="{TemplateBinding Padding}"
+                        Background="{TemplateBinding Background}"
+                        HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
+                        HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
+                        VerticalSnapPointsAlignment="{TemplateBinding VerticalSnapPointsAlignment}"
+                        VerticalSnapPointsType="{TemplateBinding VerticalSnapPointsType}">
+                        <ScrollContentPresenter.GestureRecognizers>
+                            <ScrollGestureRecognizer
+                                CanHorizontallyScroll="{Binding CanHorizontallyScroll, ElementName=PART_ContentPresenter}"
+                                CanVerticallyScroll="{Binding CanVerticallyScroll, ElementName=PART_ContentPresenter}"
+                                IsScrollInertiaEnabled="{Binding IsScrollInertiaEnabled, RelativeSource={RelativeSource TemplatedParent}}" />
+                        </ScrollContentPresenter.GestureRecognizers>
+                    </ScrollContentPresenter>
+                    <ScrollBar
+                        Name="PART_HorizontalScrollBar"
+                        Grid.Row="1"
+                        Grid.Column="0"
+                        Orientation="Horizontal" />
+                    <ScrollBar
+                        Name="PART_VerticalScrollBar"
+                        Grid.Row="0"
+                        Grid.Column="1"
+                        Orientation="Vertical" />
+                    <Panel
+                        Grid.Row="1"
+                        Grid.Column="1"
+                        Background="{DynamicResource ColorScrollBarBackground}" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
     <ControlTheme x:Key="SimpleMenuScrollViewer" TargetType="ScrollViewer">
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="Template">
@@ -281,10 +303,10 @@
                         DockPanel.Dock="Top">
                         <RepeatButton.IsVisible>
                             <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}" ConverterParameter="0">
-                                <Binding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
                             </MultiBinding>
                         </RepeatButton.IsVisible>
                         <Path Data="M 0 4 L 8 4 L 4 0 Z" />
@@ -296,26 +318,15 @@
                         DockPanel.Dock="Bottom">
                         <RepeatButton.IsVisible>
                             <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}" ConverterParameter="100">
-                                <Binding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
                             </MultiBinding>
                         </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 +335,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/Slider.axaml

@@ -60,10 +60,10 @@
                     CornerRadius="{TemplateBinding CornerRadius}" />
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:pointerover /template/ Border">
+        <Style Selector="^:pointerover">
             <Setter Property="BorderBrush" Value="{DynamicResource SliderThumbPointeroverBorderBrush}" />
         </Style>
-        <Style Selector="^:pressed /template/ Border">
+        <Style Selector="^:pressed">
             <Setter Property="BorderBrush" Value="{DynamicResource SliderThumbPressedBorderBrush}" />
         </Style>
     </ControlTheme>
@@ -75,165 +75,155 @@
         <Style Selector="^:horizontal">
             <Setter Property="Template">
                 <ControlTemplate TargetType="Slider">
-                    <Border
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}">
+                    <DataValidationErrors>
                         <Grid
                             x:Name="SliderContainer"
                             Margin="{TemplateBinding Padding}"
-                            Background="Transparent">
+                            Background="Transparent"
+                            RowDefinitions="Auto,Auto,Auto">
                             <Grid.Styles>
                                 <Style Selector="TickBar">
                                     <Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
                                 </Style>
                             </Grid.Styles>
-                            <Grid x:Name="HorizontalTemplate" RowDefinitions="Auto,Auto,Auto">
-                                <TickBar
-                                    Name="TopTickBar"
-                                    Grid.Row="0"
-                                    Height="{DynamicResource SliderTickHorizontalHeight}"
-                                    Margin="0,0,0,4"
-                                    VerticalAlignment="Bottom"
-                                    Fill="{DynamicResource SliderTickForeground}"
-                                    IsVisible="False"
-                                    Maximum="{TemplateBinding Slider.Maximum}"
-                                    Minimum="{TemplateBinding Slider.Minimum}"
-                                    Orientation="{TemplateBinding Slider.Orientation}"
-                                    Placement="Top"
-                                    TickFrequency="{TemplateBinding Slider.TickFrequency}"
-                                    Ticks="{TemplateBinding Ticks}" />
-                                <TickBar
-                                    Name="BottomTickBar"
-                                    Grid.Row="2"
-                                    Height="{DynamicResource SliderTickHorizontalHeight}"
-                                    Margin="0,4,0,0"
-                                    VerticalAlignment="Top"
-                                    Fill="{DynamicResource SliderTickForeground}"
-                                    IsVisible="False"
-                                    Maximum="{TemplateBinding Slider.Maximum}"
-                                    Minimum="{TemplateBinding Slider.Minimum}"
-                                    Orientation="{TemplateBinding Slider.Orientation}"
-                                    Placement="Bottom"
-                                    TickFrequency="{TemplateBinding Slider.TickFrequency}"
-                                    Ticks="{TemplateBinding Ticks}" />
-                                <Track
-                                    Name="PART_Track"
-                                    Grid.Row="1"
-                                    IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
-                                    Maximum="{TemplateBinding Maximum}"
-                                    Minimum="{TemplateBinding Minimum}"
-                                    Orientation="Horizontal"
-                                    Value="{TemplateBinding Value,
-                                                            Mode=TwoWay}">
-                                    <Track.DecreaseButton>
-                                        <RepeatButton
-                                            Name="PART_DecreaseButton"
-                                            Background="{TemplateBinding Foreground}"
-                                            Focusable="False"
-                                            Theme="{StaticResource SliderHorizontalRepeatButton}" />
-                                    </Track.DecreaseButton>
-                                    <Track.IncreaseButton>
-                                        <RepeatButton
-                                            Name="PART_IncreaseButton"
-                                            Background="{TemplateBinding Background}"
-                                            Focusable="False"
-                                            Theme="{StaticResource SliderHorizontalRepeatButton}" />
-                                    </Track.IncreaseButton>
-                                    <Thumb
-                                        Name="thumb"
-                                        Width="{DynamicResource SliderThumbWidth}"
-                                        Height="{DynamicResource SliderThumbHeight}"
-                                        DataContext="{TemplateBinding Value}"
-                                        Theme="{StaticResource SliderThumbTheme}" />
-                                </Track>
-                            </Grid>
+                            <TickBar
+                                Name="TopTickBar"
+                                Grid.Row="0"
+                                Height="{DynamicResource SliderTickHorizontalHeight}"
+                                Margin="0,0,0,4"
+                                VerticalAlignment="Bottom"
+                                Fill="{DynamicResource SliderTickForeground}"
+                                IsVisible="False"
+                                Maximum="{TemplateBinding Slider.Maximum}"
+                                Minimum="{TemplateBinding Slider.Minimum}"
+                                Orientation="{TemplateBinding Slider.Orientation}"
+                                Placement="Top"
+                                TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                Ticks="{TemplateBinding Ticks}" />
+                            <TickBar
+                                Name="BottomTickBar"
+                                Grid.Row="2"
+                                Height="{DynamicResource SliderTickHorizontalHeight}"
+                                Margin="0,4,0,0"
+                                VerticalAlignment="Top"
+                                Fill="{DynamicResource SliderTickForeground}"
+                                IsVisible="False"
+                                Maximum="{TemplateBinding Slider.Maximum}"
+                                Minimum="{TemplateBinding Slider.Minimum}"
+                                Orientation="{TemplateBinding Slider.Orientation}"
+                                Placement="Bottom"
+                                TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                Ticks="{TemplateBinding Ticks}" />
+                            <Track
+                                Name="PART_Track"
+                                Grid.Row="1"
+                                IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                                Maximum="{TemplateBinding Maximum}"
+                                Minimum="{TemplateBinding Minimum}"
+                                Orientation="Horizontal"
+                                Value="{TemplateBinding Value,
+                                                        Mode=TwoWay}">
+                                <Track.DecreaseButton>
+                                    <RepeatButton
+                                        Name="PART_DecreaseButton"
+                                        Background="{TemplateBinding Foreground}"
+                                        Focusable="False"
+                                        Theme="{StaticResource SliderHorizontalRepeatButton}" />
+                                </Track.DecreaseButton>
+                                <Track.IncreaseButton>
+                                    <RepeatButton
+                                        Name="PART_IncreaseButton"
+                                        Background="{TemplateBinding Background}"
+                                        Focusable="False"
+                                        Theme="{StaticResource SliderHorizontalRepeatButton}" />
+                                </Track.IncreaseButton>
+                                <Thumb
+                                    Name="thumb"
+                                    Width="{DynamicResource SliderThumbWidth}"
+                                    Height="{DynamicResource SliderThumbHeight}"
+                                    DataContext="{TemplateBinding Value}"
+                                    Theme="{StaticResource SliderThumbTheme}" />
+                            </Track>
                         </Grid>
-                    </Border>
+                    </DataValidationErrors>
                 </ControlTemplate>
             </Setter>
         </Style>
         <Style Selector="^:vertical">
             <Setter Property="Template">
                 <ControlTemplate>
-                    <Border
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}">
+                    <DataValidationErrors>
                         <Grid
                             x:Name="SliderContainer"
+                            MinWidth="{DynamicResource SliderVerticalWidth}"
                             Margin="{TemplateBinding Padding}"
-                            Background="{DynamicResource SliderContainerBackground}">
+                            Background="{DynamicResource SliderContainerBackground}"
+                            ColumnDefinitions="Auto,Auto,Auto">
                             <Grid.Styles>
                                 <Style Selector="TickBar">
                                     <Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
                                 </Style>
                             </Grid.Styles>
-                            <Grid
-                                x:Name="VerticalTemplate"
-                                MinWidth="{DynamicResource SliderVerticalWidth}"
-                                ColumnDefinitions="Auto,Auto,Auto">
-                                <TickBar
-                                    Name="LeftTickBar"
-                                    Grid.Column="0"
-                                    Width="{DynamicResource SliderTickVerticalWidth}"
-                                    Margin="0,0,4,0"
-                                    HorizontalAlignment="Right"
-                                    Fill="{DynamicResource SliderTickForeground}"
-                                    IsVisible="False"
-                                    Maximum="{TemplateBinding Slider.Maximum}"
-                                    Minimum="{TemplateBinding Slider.Minimum}"
-                                    Orientation="{TemplateBinding Slider.Orientation}"
-                                    Placement="Left"
-                                    TickFrequency="{TemplateBinding Slider.TickFrequency}"
-                                    Ticks="{TemplateBinding Ticks}" />
-                                <TickBar
-                                    Name="RightTickBar"
-                                    Grid.Column="2"
-                                    Width="{DynamicResource SliderTickVerticalWidth}"
-                                    Margin="4,0,0,0"
-                                    HorizontalAlignment="Left"
-                                    Fill="{DynamicResource SliderTickForeground}"
-                                    IsVisible="False"
-                                    Maximum="{TemplateBinding Slider.Maximum}"
-                                    Minimum="{TemplateBinding Slider.Minimum}"
-                                    Orientation="{TemplateBinding Slider.Orientation}"
-                                    Placement="Right"
-                                    TickFrequency="{TemplateBinding Slider.TickFrequency}"
-                                    Ticks="{TemplateBinding Ticks}" />
-                                <Track
-                                    Name="PART_Track"
-                                    Grid.Column="1"
-                                    IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
-                                    Maximum="{TemplateBinding Maximum}"
-                                    Minimum="{TemplateBinding Minimum}"
-                                    Orientation="Vertical"
-                                    Value="{TemplateBinding Value,
-                                                            Mode=TwoWay}">
-                                    <Track.DecreaseButton>
-                                        <RepeatButton
-                                            Name="PART_DecreaseButton"
-                                            Background="{TemplateBinding Foreground}"
-                                            Focusable="False"
-                                            Theme="{StaticResource SliderVerticalRepeatButton}" />
-                                    </Track.DecreaseButton>
-                                    <Track.IncreaseButton>
-                                        <RepeatButton
-                                            Name="PART_IncreaseButton"
-                                            Background="{TemplateBinding Background}"
-                                            Focusable="False"
-                                            Theme="{StaticResource SliderVerticalRepeatButton}" />
-                                    </Track.IncreaseButton>
-                                    <Thumb
-                                        Name="thumb"
-                                        Width="{DynamicResource SliderThumbWidth}"
-                                        Height="{DynamicResource SliderThumbHeight}"
-                                        DataContext="{TemplateBinding Value}"
-                                        Theme="{StaticResource SliderThumbTheme}" />
-                                </Track>
-                            </Grid>
+                            <TickBar
+                                Name="LeftTickBar"
+                                Grid.Column="0"
+                                Width="{DynamicResource SliderTickVerticalWidth}"
+                                Margin="0,0,4,0"
+                                HorizontalAlignment="Right"
+                                Fill="{DynamicResource SliderTickForeground}"
+                                IsVisible="False"
+                                Maximum="{TemplateBinding Slider.Maximum}"
+                                Minimum="{TemplateBinding Slider.Minimum}"
+                                Orientation="{TemplateBinding Slider.Orientation}"
+                                Placement="Left"
+                                TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                Ticks="{TemplateBinding Ticks}" />
+                            <TickBar
+                                Name="RightTickBar"
+                                Grid.Column="2"
+                                Width="{DynamicResource SliderTickVerticalWidth}"
+                                Margin="4,0,0,0"
+                                HorizontalAlignment="Left"
+                                Fill="{DynamicResource SliderTickForeground}"
+                                IsVisible="False"
+                                Maximum="{TemplateBinding Slider.Maximum}"
+                                Minimum="{TemplateBinding Slider.Minimum}"
+                                Orientation="{TemplateBinding Slider.Orientation}"
+                                Placement="Right"
+                                TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                Ticks="{TemplateBinding Ticks}" />
+                            <Track
+                                Name="PART_Track"
+                                Grid.Column="1"
+                                IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                                Maximum="{TemplateBinding Maximum}"
+                                Minimum="{TemplateBinding Minimum}"
+                                Orientation="Vertical"
+                                Value="{TemplateBinding Value,
+                                                        Mode=TwoWay}">
+                                <Track.DecreaseButton>
+                                    <RepeatButton
+                                        Name="PART_DecreaseButton"
+                                        Background="{TemplateBinding Foreground}"
+                                        Focusable="False"
+                                        Theme="{StaticResource SliderVerticalRepeatButton}" />
+                                </Track.DecreaseButton>
+                                <Track.IncreaseButton>
+                                    <RepeatButton
+                                        Name="PART_IncreaseButton"
+                                        Background="{TemplateBinding Background}"
+                                        Focusable="False"
+                                        Theme="{StaticResource SliderVerticalRepeatButton}" />
+                                </Track.IncreaseButton>
+                                <Thumb
+                                    Name="thumb"
+                                    Width="{DynamicResource SliderThumbWidth}"
+                                    Height="{DynamicResource SliderThumbHeight}"
+                                    DataContext="{TemplateBinding Value}"
+                                    Theme="{StaticResource SliderThumbTheme}" />
+                            </Track>
                         </Grid>
-                    </Border>
+                    </DataValidationErrors>
                 </ControlTemplate>
             </Setter>
         </Style>
@@ -263,6 +253,10 @@
             <Setter Property="IsVisible" Value="True" />
         </Style>
 
+        <Style Selector="^:error /template/ Thumb#thumb">
+            <Setter Property="Thumb.BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+        </Style>
+
         <!--  Disabled State  -->
 
         <Style Selector="^:disabled">

src/Semi.Avalonia/Controls/SplitButton.axaml

@@ -82,6 +82,9 @@
         <Style Selector="^.Tertiary /template/ Button">
             <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
         </Style>
+        <Style Selector="^.Success /template/ Button">
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultSuccessForeground}" />
+        </Style>
         <Style Selector="^.Warning /template/ Button">
             <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultWarningForeground}" />
         </Style>
@@ -101,6 +104,10 @@
                 <Setter Property="Background" Value="{DynamicResource ButtonSolidTertiaryBackground}" />
                 <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
             </Style>
+            <Style Selector="^.Success /template/ Button">
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidSuccessBackground}" />
+                <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            </Style>
             <Style Selector="^.Warning /template/ Button">
                 <Setter Property="Background" Value="{DynamicResource ButtonSolidWarningBackground}" />
                 <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
@@ -110,10 +117,110 @@
                 <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="^.Success /template/ Button">
+            <Setter Property="SplitButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidSuccessBackground}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidSuccessPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidSuccessPressedBackground}" />
+            </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/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,9 +94,8 @@
         <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}" />
         <Setter Property="TextBox.VerticalContentAlignment" Value="Center" />
         <Setter Property="TextBox.FocusAdorner" Value="{x:Null}" />
@@ -104,79 +103,82 @@
         <Setter Property="TextBox.ContextFlyout" Value="{StaticResource DefaultTextBoxContextFlyout}" />
         <Setter Property="TextBox.Template">
             <ControlTemplate TargetType="TextBox">
-                <Border
-                    Name="PART_ContentPresenterBorder"
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
-                    CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid Margin="{TemplateBinding Padding}" ColumnDefinitions="Auto,*,Auto, Auto, Auto">
-                        <ContentPresenter
-                            Grid.Column="0"
-                            Padding="{DynamicResource TextBoxInnerLeftContentPadding}"
-                            VerticalAlignment="Center"
-                            Content="{TemplateBinding InnerLeftContent}"
-                            Foreground="{DynamicResource TextBoxInnerForeground}"
-                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerLeftContent, Converter={x:Static ObjectConverters.IsNotNull}}" />
-                        <ScrollViewer
-                            Grid.Column="1"
-                            AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
-                            HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
-                            IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
-                            VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
-                            <Panel>
-                                <TextBlock
-                                    Name="PART_Watermark"
-                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                                    IsVisible="{TemplateBinding Text,
-                                                                Converter={x:Static StringConverters.IsNullOrEmpty}}"
-                                    Opacity="0.5"
-                                    Text="{TemplateBinding Watermark}"
-                                    TextAlignment="{TemplateBinding TextAlignment}"
-                                    TextWrapping="{TemplateBinding TextWrapping}" />
-                                <TextPresenter
-                                    Name="PART_TextPresenter"
-                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                                    CaretBrush="{TemplateBinding CaretBrush}"
-                                    CaretIndex="{TemplateBinding CaretIndex}"
-                                    LineHeight="{TemplateBinding LineHeight}"
-                                    PasswordChar="{TemplateBinding PasswordChar}"
-                                    RevealPassword="{TemplateBinding RevealPassword}"
-                                    SelectionBrush="{TemplateBinding SelectionBrush}"
-                                    SelectionEnd="{TemplateBinding SelectionEnd}"
-                                    SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
-                                    SelectionStart="{TemplateBinding SelectionStart}"
-                                    Text="{TemplateBinding Text,
-                                                           Mode=TwoWay}"
-                                    TextAlignment="{TemplateBinding TextAlignment}"
-                                    TextWrapping="{TemplateBinding TextWrapping}" />
-                            </Panel>
-                        </ScrollViewer>
-                        <Button
-                            Name="PART_ClearButton"
-                            Grid.Column="2"
-                            Command="{Binding $parent[TextBox].Clear}"
-                            IsVisible="False"
-                            Theme="{StaticResource InputClearButton}" />
-                        <ToggleButton
-                            Name="PART_RevealButton"
-                            Grid.Column="3"
-                            Margin="4,0,0,0"
-                            IsChecked="{TemplateBinding RevealPassword,
-                                                        Mode=TwoWay}"
-                            IsVisible="False"
-                            Theme="{StaticResource InputToggleButton}" />
-                        <ContentPresenter
-                            Grid.Column="4"
-                            Padding="{DynamicResource TextBoxInnerRightContentPadding}"
-                            VerticalAlignment="Center"
-                            Content="{TemplateBinding InnerRightContent}"
-                            Foreground="{DynamicResource TextBoxInnerForeground}"
-                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerRightContent, Converter={x:Static ObjectConverters.IsNotNull}}" />
-                    </Grid>
-                </Border>
+                <DataValidationErrors>
+                    <Border
+                        Name="PART_ContentPresenterBorder"
+                        MinHeight="{DynamicResource TextBoxWrapperDefaultHeight}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid Margin="{TemplateBinding Padding}" ColumnDefinitions="Auto,*,Auto, Auto, Auto">
+                            <ContentPresenter
+                                Grid.Column="0"
+                                Padding="{DynamicResource TextBoxInnerLeftContentPadding}"
+                                VerticalAlignment="Center"
+                                Content="{TemplateBinding InnerLeftContent}"
+                                Foreground="{DynamicResource TextBoxInnerForeground}"
+                                IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerLeftContent, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                            <ScrollViewer
+                                Grid.Column="1"
+                                AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
+                                HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
+                                IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
+                                VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
+                                <Panel>
+                                    <TextBlock
+                                        Name="PART_Watermark"
+                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                        IsVisible="{TemplateBinding Text,
+                                                                    Converter={x:Static StringConverters.IsNullOrEmpty}}"
+                                        Opacity="0.5"
+                                        Text="{TemplateBinding Watermark}"
+                                        TextAlignment="{TemplateBinding TextAlignment}"
+                                        TextWrapping="{TemplateBinding TextWrapping}" />
+                                    <TextPresenter
+                                        Name="PART_TextPresenter"
+                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                        CaretBrush="{TemplateBinding CaretBrush}"
+                                        CaretIndex="{TemplateBinding CaretIndex}"
+                                        LineHeight="{TemplateBinding LineHeight}"
+                                        PasswordChar="{TemplateBinding PasswordChar}"
+                                        RevealPassword="{TemplateBinding RevealPassword}"
+                                        SelectionBrush="{TemplateBinding SelectionBrush}"
+                                        SelectionEnd="{TemplateBinding SelectionEnd}"
+                                        SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
+                                        SelectionStart="{TemplateBinding SelectionStart}"
+                                        Text="{TemplateBinding Text,
+                                                               Mode=TwoWay}"
+                                        TextAlignment="{TemplateBinding TextAlignment}"
+                                        TextWrapping="{TemplateBinding TextWrapping}" />
+                                </Panel>
+                            </ScrollViewer>
+                            <Button
+                                Name="PART_ClearButton"
+                                Grid.Column="2"
+                                Command="{Binding $parent[TextBox].Clear}"
+                                IsVisible="False"
+                                Theme="{StaticResource InputClearButton}" />
+                            <ToggleButton
+                                Name="PART_RevealButton"
+                                Grid.Column="3"
+                                Margin="4,0,0,0"
+                                IsChecked="{TemplateBinding RevealPassword,
+                                                            Mode=TwoWay}"
+                                IsVisible="False"
+                                Theme="{StaticResource InputToggleButton}" />
+                            <ContentPresenter
+                                Grid.Column="4"
+                                Padding="{DynamicResource TextBoxInnerRightContentPadding}"
+                                VerticalAlignment="Center"
+                                Content="{TemplateBinding InnerRightContent}"
+                                Foreground="{DynamicResource TextBoxInnerForeground}"
+                                IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerRightContent, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                        </Grid>
+                    </Border>
+                </DataValidationErrors>
             </ControlTemplate>
         </Setter>
 
@@ -196,6 +198,26 @@
         <Style Selector="^:disabled">
             <Setter Property="TextBox.Foreground" Value="{DynamicResource TextBoxDisabledForeground}" />
         </Style>
+
+        <Style Selector="^:error">
+            <Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Border#PART_ContentPresenterBorder">
+                <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                <Setter Property="Border.BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pressed /template/ Border#PART_ContentPresenterBorder">
+                <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
+                <Setter Property="Border.BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:focus /template/ Border#PART_ContentPresenterBorder">
+                <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+                <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+            </Style>
+        </Style>
+
         <Style Selector="^.clearButton, ^.ClearButton">
             <Style Selector="^[AcceptsReturn=False][IsReadOnly=False]:focus:not(:empty) /template/ Button#PART_ClearButton">
                 <Setter Property="Button.IsVisible" Value="True" />
@@ -209,11 +231,11 @@
                 <Setter Property="ToggleButton.IsVisible" Value="True" />
             </Style>
         </Style>
-        <Style Selector="^.Large">
-            <Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxWrapperLargeHeight}" />
+        <Style Selector="^.Large /template/ Border#PART_ContentPresenterBorder">
+            <Setter Property="MinHeight" Value="{DynamicResource TextBoxWrapperLargeHeight}" />
         </Style>
-        <Style Selector="^.Small">
-            <Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxWrapperSmallHeight}" />
+        <Style Selector="^.Small /template/ Border#PART_ContentPresenterBorder">
+            <Setter Property="MinHeight" Value="{DynamicResource TextBoxWrapperSmallHeight}" />
         </Style>
 
         <Style Selector="^.Bordered">
@@ -231,6 +253,139 @@
                 <Setter Property="TextBox.Background" Value="{DynamicResource TextBoxDisabledBackground}" />
                 <Setter Property="TextBox.BorderBrush" Value="{DynamicResource TextBoxDisabledBorderBrush}" />
             </Style>
+
+            <Style Selector="^:error">
+                <Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
+                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsBorderBrush}" />
+                </Style>
+                <Style Selector="^:pointerover /template/ Border#PART_ContentPresenterBorder">
+                    <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                    <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsPointerOverBorderBrush}" />
+                </Style>
+                <Style Selector="^:pressed /template/ Border#PART_ContentPresenterBorder">
+                    <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
+                    <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsPressedBorderBrush}" />
+                </Style>
+                <Style Selector="^:focus /template/ Border#PART_ContentPresenterBorder">
+                    <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+                    <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+                </Style>
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="NonErrorTextBox" TargetType="TextBox">
+        <Setter Property="TextBox.Foreground" Value="{DynamicResource TextBoxForeground}" />
+        <Setter Property="TextBox.Background" Value="{DynamicResource TextBoxDefaultBackground}" />
+        <Setter Property="TextBox.BorderBrush" Value="{DynamicResource TextBoxDefaultBorderBrush}" />
+        <Setter Property="TextBox.SelectionBrush" Value="{DynamicResource TextBoxSelectionBackground}" />
+        <Setter Property="TextBox.SelectionForegroundBrush" Value="{DynamicResource TextBoxSelectionForeground}" />
+        <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.CaretBrush" Value="{DynamicResource TextBoxTextCaretBrush}" />
+        <Setter Property="TextBox.Padding" Value="{DynamicResource TextBoxContentPadding}" />
+        <Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxWrapperDefaultHeight}" />
+        <Setter Property="TextBox.VerticalContentAlignment" Value="Center" />
+        <Setter Property="TextBox.FocusAdorner" Value="{x:Null}" />
+        <Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
+        <Setter Property="TextBox.ContextFlyout" Value="{StaticResource DefaultTextBoxContextFlyout}" />
+        <Setter Property="TextBox.Template">
+            <ControlTemplate TargetType="TextBox">
+                <DataValidationErrors Theme="{DynamicResource SilentDataValidationErrors}">
+                    <Border
+                        Name="PART_ContentPresenterBorder"
+                        MinHeight="{TemplateBinding MinHeight}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid Margin="{TemplateBinding Padding}" ColumnDefinitions="Auto, *">
+                            <ContentPresenter
+                                Grid.Column="0"
+                                Padding="{DynamicResource TextBoxInnerLeftContentPadding}"
+                                VerticalAlignment="Center"
+                                Content="{TemplateBinding InnerLeftContent}"
+                                Foreground="{DynamicResource TextBoxInnerForeground}"
+                                IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerLeftContent, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                            <ScrollViewer
+                                Grid.Column="1"
+                                AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
+                                HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
+                                IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
+                                VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
+                                <Panel>
+                                    <TextBlock
+                                        Name="PART_Watermark"
+                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                        IsVisible="{TemplateBinding Text,
+                                                                    Converter={x:Static StringConverters.IsNullOrEmpty}}"
+                                        Opacity="0.5"
+                                        Text="{TemplateBinding Watermark}"
+                                        TextAlignment="{TemplateBinding TextAlignment}"
+                                        TextWrapping="{TemplateBinding TextWrapping}" />
+                                    <TextPresenter
+                                        Name="PART_TextPresenter"
+                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                        CaretBrush="{TemplateBinding CaretBrush}"
+                                        CaretIndex="{TemplateBinding CaretIndex}"
+                                        LineHeight="{TemplateBinding LineHeight}"
+                                        PasswordChar="{TemplateBinding PasswordChar}"
+                                        RevealPassword="{TemplateBinding RevealPassword}"
+                                        SelectionBrush="{TemplateBinding SelectionBrush}"
+                                        SelectionEnd="{TemplateBinding SelectionEnd}"
+                                        SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
+                                        SelectionStart="{TemplateBinding SelectionStart}"
+                                        Text="{TemplateBinding Text,
+                                                               Mode=TwoWay}"
+                                        TextAlignment="{TemplateBinding TextAlignment}"
+                                        TextWrapping="{TemplateBinding TextWrapping}" />
+                                </Panel>
+                            </ScrollViewer>
+                        </Grid>
+                    </Border>
+                </DataValidationErrors>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:pointerover /template/ Border#PART_ContentPresenterBorder">
+            <Setter Property="Border.Background" Value="{DynamicResource TextBoxPointeroverBackground}" />
+        </Style>
+        <Style Selector="^:pressed /template/ Border#PART_ContentPresenterBorder">
+            <Setter Property="Border.Background" Value="{DynamicResource TextBoxPressedBackground}" />
+        </Style>
+        <Style Selector="^:focus /template/ Border#PART_ContentPresenterBorder">
+            <Setter Property="Border.BorderBrush" Value="{DynamicResource TextBoxFocusBorderBrush}" />
+        </Style>
+        <Style Selector="^:disabled /template/ Border#PART_ContentPresenterBorder">
+            <Setter Property="Border.BorderBrush" Value="{DynamicResource TextBoxDisabledBorderBrush}" />
+            <Setter Property="Border.Background" Value="{DynamicResource TextBoxDisabledBackground}" />
+        </Style>
+        <Style Selector="^:disabled">
+            <Setter Property="TextBox.Foreground" Value="{DynamicResource TextBoxDisabledForeground}" />
+        </Style>
+
+        <Style Selector="^:error">
+            <Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Border#PART_ContentPresenterBorder">
+                <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                <Setter Property="Border.BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pressed /template/ Border#PART_ContentPresenterBorder">
+                <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
+                <Setter Property="Border.BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:focus /template/ Border#PART_ContentPresenterBorder">
+                <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+                <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+            </Style>
         </Style>
     </ControlTheme>
 </ResourceDictionary>

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"
@@ -131,7 +129,6 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type TimePicker}" TargetType="TimePicker">
-        <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonDefaultHeight}" />
         <Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonForeground}" />
         <Setter Property="Background" Value="{DynamicResource DateTimePickerButtonBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerButtonBorderBrush}" />
@@ -141,106 +138,110 @@
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="Template">
             <ControlTemplate>
-                <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
-                    <Button
-                        x:Name="PART_FlyoutButton"
-                        Width="242"
-                        MinWidth="242"
-                        HorizontalAlignment="Stretch"
-                        VerticalAlignment="Stretch"
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}"
-                        Cursor="Hand"
-                        Foreground="{TemplateBinding Foreground}"
-                        IsEnabled="{TemplateBinding IsEnabled}"
-                        Theme="{StaticResource DateTimePickerFlyoutButton}">
-                        <Grid ColumnDefinitions="*, Auto">
-                            <Grid Name="PART_FlyoutButtonContentGrid" Grid.Column="0">
-                                <!--  Ignore col defs here, set in code  -->
-                                <Border
-                                    x:Name="PART_FirstPickerHost"
-                                    Grid.Column="0"
-                                    HorizontalAlignment="Stretch"
-                                    VerticalAlignment="Stretch">
-                                    <TextBlock
-                                        x:Name="PART_HourTextBlock"
-                                        Padding="12,4"
-                                        HorizontalAlignment="Center"
-                                        VerticalAlignment="Center"
-                                        FontFamily="{TemplateBinding FontFamily}"
-                                        FontSize="{TemplateBinding FontSize}"
-                                        FontWeight="{TemplateBinding FontWeight}" />
-                                </Border>
+                <DataValidationErrors>
+                    <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
+                        <Button
+                            x:Name="PART_FlyoutButton"
+                            Width="242"
+                            MinWidth="242"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            Cursor="Hand"
+                            DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
+                            Foreground="{TemplateBinding Foreground}"
+                            IsEnabled="{TemplateBinding IsEnabled}"
+                            MinHeight="{DynamicResource DateTimePickerButtonDefaultHeight}"
+                            Theme="{StaticResource DateTimePickerFlyoutButton}">
+                            <Grid ColumnDefinitions="*, Auto">
+                                <Grid Name="PART_FlyoutButtonContentGrid" Grid.Column="0">
+                                    <!--  Ignore col defs here, set in code  -->
+                                    <Border
+                                        x:Name="PART_FirstPickerHost"
+                                        Grid.Column="0"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch">
+                                        <TextBlock
+                                            x:Name="PART_HourTextBlock"
+                                            Padding="12,4"
+                                            HorizontalAlignment="Center"
+                                            VerticalAlignment="Center"
+                                            FontFamily="{TemplateBinding FontFamily}"
+                                            FontSize="{TemplateBinding FontSize}"
+                                            FontWeight="{TemplateBinding FontWeight}" />
+                                    </Border>
 
-                                <Rectangle
-                                    Name="PART_FirstColumnDivider"
+                                    <Rectangle
+                                        Name="PART_FirstColumnDivider"
+                                        Grid.Column="1"
+                                        Width="1"
+                                        Margin="0,4"
+                                        HorizontalAlignment="Center"
+                                        Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+
+                                    <Border
+                                        x:Name="PART_SecondPickerHost"
+                                        Grid.Column="2"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch">
+                                        <TextBlock
+                                            x:Name="PART_MinuteTextBlock"
+                                            Padding="12,4"
+                                            HorizontalAlignment="Center"
+                                            VerticalAlignment="Center"
+                                            FontFamily="{TemplateBinding FontFamily}"
+                                            FontSize="{TemplateBinding FontSize}"
+                                            FontWeight="{TemplateBinding FontWeight}" />
+                                    </Border>
+
+                                    <Rectangle
+                                        Name="PART_SecondColumnDivider"
+                                        Grid.Column="3"
+                                        Width="1"
+                                        Margin="0,4"
+                                        HorizontalAlignment="Center"
+                                        Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+
+                                    <Border
+                                        x:Name="PART_ThirdPickerHost"
+                                        Grid.Column="4"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch">
+                                        <TextBlock
+                                            x:Name="PART_PeriodTextBlock"
+                                            Padding="12,4"
+                                            HorizontalAlignment="Center"
+                                            VerticalAlignment="Center"
+                                            FontFamily="{TemplateBinding FontFamily}"
+                                            FontSize="{TemplateBinding FontSize}"
+                                            FontWeight="{TemplateBinding FontWeight}" />
+                                    </Border>
+                                </Grid>
+                                <PathIcon
+                                    Name="PART_Icon"
                                     Grid.Column="1"
-                                    Width="1"
-                                    Margin="0,4"
-                                    HorizontalAlignment="Center"
-                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
-
-                                <Border
-                                    x:Name="PART_SecondPickerHost"
-                                    Grid.Column="2"
-                                    HorizontalAlignment="Stretch"
-                                    VerticalAlignment="Stretch">
-                                    <TextBlock
-                                        x:Name="PART_MinuteTextBlock"
-                                        Padding="12,4"
-                                        HorizontalAlignment="Center"
-                                        VerticalAlignment="Center"
-                                        FontFamily="{TemplateBinding FontFamily}"
-                                        FontSize="{TemplateBinding FontSize}"
-                                        FontWeight="{TemplateBinding FontWeight}" />
-                                </Border>
-
-                                <Rectangle
-                                    Name="PART_SecondColumnDivider"
-                                    Grid.Column="3"
-                                    Width="1"
-                                    Margin="0,4"
-                                    HorizontalAlignment="Center"
-                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
-
-                                <Border
-                                    x:Name="PART_ThirdPickerHost"
-                                    Grid.Column="4"
-                                    HorizontalAlignment="Stretch"
-                                    VerticalAlignment="Stretch">
-                                    <TextBlock
-                                        x:Name="PART_PeriodTextBlock"
-                                        Padding="12,4"
-                                        HorizontalAlignment="Center"
-                                        VerticalAlignment="Center"
-                                        FontFamily="{TemplateBinding FontFamily}"
-                                        FontSize="{TemplateBinding FontSize}"
-                                        FontWeight="{TemplateBinding FontWeight}" />
-                                </Border>
+                                    Width="16"
+                                    Height="16"
+                                    Margin="0,0,8,0"
+                                    Data="{DynamicResource TimePickerIconGlyph}"
+                                    Foreground="{DynamicResource DateTimePickerIconForeground}" />
                             </Grid>
-                            <PathIcon
-                                Name="PART_Icon"
-                                Grid.Column="1"
-                                Width="16"
-                                Height="16"
-                                Margin="0,0,8,0"
-                                Data="{DynamicResource TimePickerIconGlyph}"
-                                Foreground="{DynamicResource DateTimePickerIconForeground}" />
-                        </Grid>
 
-                    </Button>
+                        </Button>
 
-                    <Popup
-                        Name="PART_Popup"
-                        IsLightDismissEnabled="True"
-                        PlacementMode="Bottom"
-                        PlacementTarget="{TemplateBinding}"
-                        WindowManagerAddShadowHint="False">
-                        <TimePickerPresenter Name="PART_PickerPresenter" />
-                    </Popup>
-                </Grid>
+                        <Popup
+                            Name="PART_Popup"
+                            IsLightDismissEnabled="True"
+                            Placement="Bottom"
+                            PlacementTarget="{TemplateBinding}"
+                            WindowManagerAddShadowHint="False">
+                            <TimePickerPresenter Name="PART_PickerPresenter" />
+                        </Popup>
+                    </Grid>
+                </DataValidationErrors>
             </ControlTemplate>
         </Setter>
 
@@ -252,10 +253,10 @@
             <Setter Property="Foreground" Value="{DynamicResource DateTimePickerEmptyForeground}" />
         </Style>
 
-        <Style Selector="^.Large">
+        <Style Selector="^.Large /template/ Button#PART_FlyoutButton">
             <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonLargeHeight}" />
         </Style>
-        <Style Selector="^.Small">
+        <Style Selector="^.Small /template/ Button#PART_FlyoutButton">
             <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonSmallHeight}" />
         </Style>
     </ControlTheme>

src/Semi.Avalonia/Controls/ToggleButton.axaml

@@ -4,17 +4,19 @@
     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="Success">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="Success" 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 +32,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,88 +57,113 @@
             <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>
         <Style Selector="^.Tertiary">
             <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDefaultTertiaryForeground}" />
         </Style>
+        <Style Selector="^.Success">
+            <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDefaultSuccessForeground}" />
+        </Style>
         <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>
             <Style Selector="^.Tertiary">
                 <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonTertiaryCheckedBackground}" />
             </Style>
+            <Style Selector="^.Success">
+                <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonSuccessCheckedBackground}" />
+            </Style>
             <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>
                 <Style Selector="^.Tertiary">
                     <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonTertiaryCheckedPointeroverBackground}" />
                 </Style>
+                <Style Selector="^.Success">
+                    <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonSuccessCheckedPointeroverBackground}" />
+                </Style>
                 <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>
                 <Style Selector="^.Tertiary">
                     <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonTertiaryCheckedPressedBackground}" />
                 </Style>
+                <Style Selector="^.Success">
+                    <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonSuccessCheckedPressedBackground}" />
+                </Style>
                 <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}" />
@@ -144,45 +172,89 @@
                 <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonTertiaryIndeterminateBackground}" />
                 <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonTertiaryIndeterminateBorderBrush}" />
             </Style>
+            <Style Selector="^.Success">
+                <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonSuccessIndeterminateBackground}" />
+                <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonSuccessIndeterminateBorderBrush}" />
+            </Style>
             <Style Selector="^.Warning">
                 <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="^.Success">
+                    <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonSuccessIndeterminatePointeroverBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonSuccessIndeterminatePointeroverForeground}" />
                 </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="^.Success">
+                    <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonSuccessIndeterminatePressedBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonSuccessIndeterminatePressedForeground}" />
                 </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
@@ -128,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}" />
@@ -151,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}" />

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,6 +3,7 @@ using System.Collections.Generic;
 using System.Globalization;
 using System.Linq;
 using Avalonia.Collections;
+using Avalonia.Controls;
 using Avalonia.Data.Converters;
 
 namespace Semi.Avalonia.Converters;
@@ -11,9 +12,9 @@ public class ItemToObjectConverter: IValueConverter
 {
     public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
-        if (value is AvaloniaList<object> list)
+        if (value is int i)
         {
-            return list.Select(a => new object());
+            return Enumerable.Repeat(new object(), i).ToList();
         }
         return new List<object>();
     }

src/Semi.Avalonia/Converters/KeyToPathConverter.cs

@@ -0,0 +1,26 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using Avalonia;
+using Avalonia.Data.Converters;
+using Avalonia.Metadata;
+
+namespace Semi.Avalonia.Converters;
+
+public class KeyToPathConverter: IValueConverter
+{
+    [Content]
+    public IDictionary<string, object?> Resources { get; } = new Dictionary<string, object?>();
+    
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if(value is string s && Resources.TryGetValue(s, out var v))
+            return v;
+        return AvaloniaProperty.UnsetValue;
+    }
+
+    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>Add new CheckBox Theme, Bug fixes. </PackageReleaseNotes>
+    <PackageReleaseNotes>Update to Avalonia 11.0.0-preview8</PackageReleaseNotes>
   </PropertyGroup>
 
   <ItemGroup>

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

@@ -18,6 +18,7 @@
     <SolidColorBrush x:Key="ButtonDefaultPrimaryForeground" Color="#54A9FF" />
     <SolidColorBrush x:Key="ButtonDefaultSecondaryForeground" Color="#40B4F3" />
     <SolidColorBrush x:Key="ButtonDefaultTertiaryForeground" Color="#888D92" />
+    <SolidColorBrush x:Key="ButtonDefaultSuccessForeground" Color="#5DC264" />
     <SolidColorBrush x:Key="ButtonDefaultWarningForeground" Color="#FFAE43" />
     <SolidColorBrush x:Key="ButtonDefaultDangerForeground" Color="#FC725A" />
     <SolidColorBrush x:Key="ButtonDefaultDisabledForeground" Opacity="0.35" Color="#F9F9F9" />
@@ -50,6 +51,10 @@
     <SolidColorBrush x:Key="ButtonSolidTertiaryPointeroverBackground" Color="#A7ABB0" />
     <SolidColorBrush x:Key="ButtonSolidTertiaryPressedBackground" Color="#C6CACD" />
 
+    <SolidColorBrush x:Key="ButtonSolidSuccessBackground" Color="#5DC264" />
+    <SolidColorBrush x:Key="ButtonSolidSuccessPointeroverBackground" Color="#7FD184" />
+    <SolidColorBrush x:Key="ButtonSolidSuccessPressedBackground" Color="#A6E1A8" />
+
     <SolidColorBrush x:Key="ButtonSolidWarningBackground" Color="#FFAE43" />
     <SolidColorBrush x:Key="ButtonSolidWarningPointeroverBackground" Color="#FFC772" />
     <SolidColorBrush x:Key="ButtonSolidWarningPressedBackground" Color="#FFDDA1" />
@@ -72,6 +77,10 @@
     <SolidColorBrush x:Key="ButtonSolidTertiaryPointeroverBorderBrush" Color="#A7ABB0" />
     <SolidColorBrush x:Key="ButtonSolidTertiaryPressedBorderBrush" Color="#C6CACD" />
 
+    <SolidColorBrush x:Key="ButtonSolidSuccessBorderBrush" Color="#5DC264" />
+    <SolidColorBrush x:Key="ButtonSolidSuccessPointeroverBorderBrush" Color="#7FD184" />
+    <SolidColorBrush x:Key="ButtonSolidSuccessPressedBorderBrush" Color="#A6E1A8" />
+
     <SolidColorBrush x:Key="ButtonSolidWarningBorderBrush" Color="#FFAE43" />
     <SolidColorBrush x:Key="ButtonSolidWarningPointeroverBorderBrush" Color="#FFC772" />
     <SolidColorBrush x:Key="ButtonSolidWarningPressedBorderBrush" Color="#FFDDA1" />

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" />

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

@@ -10,15 +10,15 @@
 
     <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="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="CheckBoxCheckedPointeroverBackground" Color="#7FC1FF" />
+    <SolidColorBrush x:Key="CheckBoxCheckedPointeroverBorderBrush" Color="#7FC1FF" />
     <SolidColorBrush x:Key="CheckBoxCheckedPressedBackground" Color="#A9D7FF" />
     <SolidColorBrush x:Key="CheckBoxCheckedPressedBorderBrush" Color="#A9D7FF" />
 

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" />