Merge pull request #217 from irihitech/11.0

feat: upgrade to v11.

.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

@@ -5,13 +5,11 @@
 
 Avalonia Theme inspired by Semi Design
 
-> Semi.Avalonia is still in very early stage. Please don't use in production.
-
 # How to Use
 
 ## Installation
 ```bash
-dotnet add package Semi.Avalonia --version 0.1.0-preview5.2
+dotnet add package Semi.Avalonia --version 11.0.0-rc1
 ```
 Include Semi Design Styles in application:
 
@@ -25,8 +23,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.ColorPicker --version 11.0.0-rc1
-dotnet add package Semi.Avalonia.DataGrid --version 0.1.0-preview5.2
+dotnet add package Semi.Avalonia.DataGrid --version 11.0.0-rc1
 ```
 ```xaml
 <Application.Styles>
@@ -42,15 +40,36 @@ https://github.com/irihitech/Semi.Avalonia/releases
 
 ## Version compatibility
 
-| Semi Design Version | Avalonia Version|
+| Semi Design Version | Avalonia Version |
-|:--------------------|:---|
+|:--------------------|:-----------------|
-| 0.1.0-preview3      |11.0-preview4|
+| 11.0.0-rc1          | 11.0.0-rc1.1     |
-| 0.1.0-preview5.x    |11.0-preview5|
+| 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
 * FocusAdorner
 
+## Credits
+
+[Semi Design](https://semi.design/)
+
+[Avalonia](https://github.com/AvaloniaUI/Avalonia)
+
+[FluentAvalonia](https://github.com/amwx/FluentAvalonia)
+
+[Material Design Icons](https://pictogrammers.com/library/mdi/)
+
+[CommunityToolKit](https://github.com/CommunityToolkit/dotnet)
+
 ## Screenshot
 
 Light Mode

Semi.Avalonia.sln

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

demo/Directory.Build.props

@@ -1,6 +1,6 @@
 <Project>
   <PropertyGroup>
     <Nullable>enable</Nullable>
-    <AvaloniaVersion>11.0.0-preview4</AvaloniaVersion>
+    <AvaloniaVersion>11.0.0</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: AvaloniaMainActivity<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.Browser" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.Themes.Fluent" Version="11.0.0-preview5" />
+        <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="*, *, *, *, *, *">
+                    <Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *, *, *, *, *, *">
-                        <!--  Row 0-1 ResourceKey  -->
+                        <!--  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>
-
+                        <SelectableTextBlock
-                        <!--  Row 2-3 HEX  -->
-                        <TextBlock
                             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;
+    private IEnumerable? _lightColors;
-    public 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;
+    private IEnumerable? _darkColors;
-    public 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/CalendarDatePickerDemo.axaml

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

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

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

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

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

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

@@ -2,6 +2,7 @@
     x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker;assembly=Semi.Avalonia.ColorPicker"
     xmlns:controls="using:Avalonia.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
@@ -15,11 +16,7 @@
             Spacing="20">
             <ColorView ColorSpectrumShape="Ring" />
             <ColorView ColorSpectrumShape="Box" />
-            <ColorView>
+            <ColorView Palette="{DynamicResource SemiColorPalette}" />
-                <ColorView.Palette>
-                    <controls:MaterialColorPalette />
-                </ColorView.Palette>
-            </ColorView>
         </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="* * * * *"
+        ColumnDefinitions="*, *, *, *, *"
-        RowDefinitions="* * * * *">
+        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/HeaderedContentControlDemo.axaml

@@ -0,0 +1,14 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Semi.Avalonia.Demo.Pages.HeaderedContentControlDemo">
+    <ScrollViewer>
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
+            <HeaderedContentControl Theme="{DynamicResource GroupBox}" Header="Semi Design">
+                <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</TextBlock>
+            </HeaderedContentControl>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>

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

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

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 Orientation="Horizontal">
-                    <StackPanel>
+                    <RadioButton Margin="4" Theme="{StaticResource CardRadioButton}">
-                        <TextBlock FontWeight="Bold">Option 1</TextBlock>
+                        <StackPanel>
-                        <TextBlock Classes="Tertiary">Description 1</TextBlock>
+                            <TextBlock FontWeight="Bold">Option 1</TextBlock>
-                    </StackPanel>
+                            <TextBlock Classes="Tertiary">Description 1</TextBlock>
-                </RadioButton>
+                        </StackPanel>
-                <RadioButton
+                    </RadioButton>
-                    Margin="4"
+                    <RadioButton
-                    IsChecked="True"
+                        Margin="4"
-                    Theme="{StaticResource CardRadioButton}">
+                        IsChecked="True"
-                    <StackPanel>
+                        Theme="{StaticResource CardRadioButton}">
-                        <TextBlock FontWeight="Bold">Option 2</TextBlock>
+                        <StackPanel>
-                        <TextBlock Classes="Tertiary">Description 2</TextBlock>
+                            <TextBlock FontWeight="Bold">Option 2</TextBlock>
-                    </StackPanel>
+                            <TextBlock Classes="Tertiary">Description 2</TextBlock>
-                </RadioButton>
+                        </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>
+                <StackPanel Orientation="Horizontal">
-                <CheckBox Margin="0,0,8,0" IsChecked="True">WPF</CheckBox>
+                    <CheckBox Margin="0,0,8,0">Avalonia</CheckBox>
-                <CheckBox IsChecked="{x:Null}" IsThreeState="True">UWP</CheckBox>
+                    <CheckBox Margin="0,0,8,0" IsChecked="True">WPF</CheckBox>
+                    <CheckBox IsChecked="{x:Null}" IsThreeState="True">UWP</CheckBox>
+                </StackPanel>
+                <StackPanel Orientation="Horizontal">
+                    <CheckBox Margin="4" Theme="{StaticResource CardCheckBox}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 1</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 1</TextBlock>
+                        </StackPanel>
+                    </CheckBox>
+                    <CheckBox
+                        Margin="4"
+                        IsChecked="True"
+                        Theme="{StaticResource CardCheckBox}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 2</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 2</TextBlock>
+                        </StackPanel>
+                    </CheckBox>
+                    <CheckBox
+                        Margin="4"
+                        IsChecked="{x:Null}"
+                        IsThreeState="True"
+                        Theme="{StaticResource CardCheckBox}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 3</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 3</TextBlock>
+                        </StackPanel>
+                    </CheckBox>
+                </StackPanel>
+                <StackPanel Orientation="Horizontal">
+                    <CheckBox Margin="4" Theme="{StaticResource PureCardCheckBox}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 1</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 1</TextBlock>
+                        </StackPanel>
+                    </CheckBox>
+                    <CheckBox
+                        Margin="4"
+                        IsChecked="True"
+                        Theme="{StaticResource PureCardCheckBox}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 2</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 2</TextBlock>
+                        </StackPanel>
+                    </CheckBox>
+                    <CheckBox
+                        Margin="4"
+                        IsChecked="{x:Null}"
+                        IsThreeState="True"
+                        Theme="{StaticResource PureCardCheckBox}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 3</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 3</TextBlock>
+                        </StackPanel>
+                    </CheckBox>
+                </StackPanel>
             </StackPanel>
             <StackPanel Orientation="Horizontal">
                 <ToggleSwitch
@@ -96,12 +171,16 @@
                 </TabItem>
             </TabControl>
             <StackPanel Orientation="Horizontal" Spacing="20">
-                <ComboBox Width="200" PlaceholderText="Please Select" />
+                <ComboBox Width="200" PlaceholderText="Please Select">
+                    <ComboBoxItem>Item 1</ComboBoxItem>
+                    <ComboBoxItem>Item 2</ComboBoxItem>
+                    <ComboBoxItem>Item 3</ComboBoxItem>
+                </ComboBox>
                 <DatePicker />
                 <TimePicker />
                 <CalendarDatePicker />
             </StackPanel>
-            <Grid ColumnDefinitions="* * *">
+            <Grid ColumnDefinitions="*, *, *">
                 <Border Theme="{StaticResource CardBorder}">
                     <TextBlock>Card</TextBlock>
                 </Border>
@@ -153,4 +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/ProgressBarDemo.axaml

@@ -7,114 +7,159 @@
     d:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel HorizontalAlignment="Left" Spacing="20">
+    <ScrollViewer>
-        <ProgressBar
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
-            Width="200"
+            <StackPanel
-            Maximum="100"
+                HorizontalAlignment="Left"
-            Minimum="0"
+                Orientation="Horizontal"
-            ShowProgressText="True"
+                Spacing="20">
-            Value="20" />
+                <ProgressBar
-        <ProgressBar
+                    Width="100"
-            Width="200"
+                    Height="100"
-            IsIndeterminate="True"
+                    Maximum="{Binding #slider.Maximum}"
-            Maximum="100"
+                    Minimum="{Binding #slider.Minimum}"
-            Minimum="0"
+                    Theme="{DynamicResource ProgressRing}"
-            ShowProgressText="True"
+                    Value="{Binding #slider.Value}"
-            Value="20" />
+                    ShowProgressText="True"/>
-        <ProgressBar
+                <ProgressBar
-            Width="200"
+                    Width="100"
-            Classes="Left"
+                    Height="100"
-            IsIndeterminate="True"
+                    IsIndeterminate="True"
-            Maximum="100"
+                    Maximum="{Binding #slider.Maximum}"
-            Minimum="0"
+                    Minimum="{Binding #slider.Minimum}"
-            ShowProgressText="True"
+                    Theme="{DynamicResource ProgressRing}"
-            Value="20" />
+                    ShowProgressText="True"/>
-        <ProgressBar
+            </StackPanel>
-            Width="200"
+            <Slider
-            Classes="Left"
+                Name="slider"
-            Maximum="100"
+                Width="300"
-            Minimum="0"
+                IsSnapToTickEnabled="True"
-            ShowProgressText="True"
+                Maximum="100"
-            Value="20" />
+                Minimum="0"
-        <ProgressBar
+                TickFrequency="10" />
-            Width="200"
+            <ProgressBar
-            Classes="Right"
+                Width="200"
-            Maximum="100"
+                Maximum="100"
-            Minimum="0"
+                Minimum="0"
-            ShowProgressText="True"
+                ShowProgressText="True"
-            Value="20" />
+                Value="{Binding #slider.Value}" />
-        <StackPanel
+            <ProgressBar
-            HorizontalAlignment="Left"
+                Width="200"
-            Orientation="Horizontal"
+                IsIndeterminate="True"
-            Spacing="20">
-            <ProgressBar
-                Classes="Left"
                 Maximum="100"
                 Minimum="0"
-                Orientation="Vertical"
                 ShowProgressText="True"
                 Value="20" />
             <ProgressBar
+                Width="200"
+                Classes="Left"
+                IsIndeterminate="True"
+                Maximum="100"
+                Minimum="0"
+                ShowProgressText="True"
+                Value="20" />
+            <ProgressBar
+                Width="200"
+                Classes="Left"
+                Maximum="100"
+                Minimum="0"
+                ShowProgressText="True"
+                Value="20" />
+            <ProgressBar
+                Width="200"
                 Classes="Right"
                 Maximum="100"
                 Minimum="0"
-                Orientation="Vertical"
                 ShowProgressText="True"
                 Value="20" />
+            <StackPanel
+                HorizontalAlignment="Left"
+                Orientation="Horizontal"
+                Spacing="20">
+                <ProgressBar
+                    Classes="Left"
+                    Maximum="100"
+                    Minimum="0"
+                    Orientation="Vertical"
+                    ShowProgressText="True"
+                    Value="20" />
+                <ProgressBar
+                    Classes="Right"
+                    Maximum="100"
+                    Minimum="0"
+                    Orientation="Vertical"
+                    ShowProgressText="True"
+                    Value="20" />
+                <ProgressBar
+                    Maximum="100"
+                    Minimum="0"
+                    Orientation="Vertical"
+                    ShowProgressText="True"
+                    Value="20" />
+                <ProgressBar
+                    Classes="Left"
+                    Maximum="100"
+                    Minimum="0"
+                    Orientation="Vertical"
+                    ShowProgressText="False"
+                    Value="20" />
+                <ProgressBar
+                    IsIndeterminate="True"
+                    Maximum="100"
+                    Minimum="0"
+                    Orientation="Vertical"
+                    ShowProgressText="True"
+                    Value="20" />
+                <ProgressBar
+                    IsIndeterminate="True"
+                    Maximum="100"
+                    Minimum="0"
+                    Orientation="Vertical"
+                    ShowProgressText="False"
+                    Value="20" />
+            </StackPanel>
             <ProgressBar
+                Width="200"
+                Classes="Primary"
                 Maximum="100"
                 Minimum="0"
-                Orientation="Vertical"
                 ShowProgressText="True"
-                Value="20" />
+                Value="60" />
             <ProgressBar
-                Classes="Left"
+                Width="200"
+                Classes="Secondary"
                 Maximum="100"
                 Minimum="0"
-                Orientation="Vertical"
-                ShowProgressText="False"
-                Value="20" />
-            <ProgressBar
-                IsIndeterminate="True"
-                Maximum="100"
-                Minimum="0"
-                Orientation="Vertical"
                 ShowProgressText="True"
-                Value="20" />
+                Value="60" />
             <ProgressBar
-                IsIndeterminate="True"
+                Width="200"
+                Classes="Tertiary"
                 Maximum="100"
                 Minimum="0"
-                Orientation="Vertical"
+                ShowProgressText="True"
-                ShowProgressText="False"
+                Value="60" />
-                Value="20" />
+            <ProgressBar
+                Width="200"
+                Classes="Success"
+                Maximum="100"
+                Minimum="0"
+                ShowProgressText="True"
+                Value="60" />
+            <ProgressBar
+                Width="200"
+                Classes="Warning"
+                Maximum="100"
+                Minimum="0"
+                ShowProgressText="True"
+                Value="60" />
+            <ProgressBar
+                Width="200"
+                Classes="Error"
+                Maximum="100"
+                Minimum="0"
+                ShowProgressText="True"
+                Value="60" />
         </StackPanel>
-        <ProgressBar
+    </ScrollViewer>
-            Width="200"
+</UserControl>
-            Classes="Success"
-            Maximum="100"
-            Minimum="0"
-            ShowProgressText="True"
-            Value="60" />
-        <ProgressBar
-            Width="200"
-            Classes="Warning"
-            Maximum="100"
-            Minimum="0"
-            ShowProgressText="True"
-            Value="60" />
-        <ProgressBar
-            Width="200"
-            Classes="Error"
-            Maximum="100"
-            Minimum="0"
-            ShowProgressText="True"
-            Value="60" />
-        <ProgressBar
-            Width="200"
-            Maximum="100"
-            Minimum="0"
-            ShowProgressText="True"
-            Value="60" />
-    </StackPanel>
-</UserControl>

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

@@ -5,73 +5,184 @@
     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">
+    <ScrollViewer>
-        <TextBlock Text="Radio Buttons" />
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
-        <StackPanel>
+            <TextBlock Text="Radio Buttons" />
-            <RadioButton>111</RadioButton>
-            <RadioButton>222</RadioButton>
-            <RadioButton>333</RadioButton>
-        </StackPanel>
-        <TextBlock Text="Radio Button as Button" />
-        <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
             <StackPanel Orientation="Horizontal">
-                <RadioButton Classes="Small" Theme="{DynamicResource ButtonRadioButton}">小1</RadioButton>
+                <RadioButton>Unchecked</RadioButton>
-                <RadioButton Classes="Small" Theme="{DynamicResource ButtonRadioButton}">小2</RadioButton>
+                <RadioButton IsChecked="True">Checked</RadioButton>
             </StackPanel>
-        </Border>
-        <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
             <StackPanel Orientation="Horizontal">
-                <RadioButton Theme="{DynamicResource ButtonRadioButton}">默认1</RadioButton>
+                <RadioButton IsEnabled="False">Unchecked</RadioButton>
-                <RadioButton Theme="{DynamicResource ButtonRadioButton}">默认2</RadioButton>
+                <RadioButton IsChecked="True" IsEnabled="False">Checked</RadioButton>
             </StackPanel>
-        </Border>
+            <TextBlock Text="Radio Button as Button" />
-        <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
             <StackPanel Orientation="Horizontal">
-                <RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大1</RadioButton>
+                <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
-                <RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大2</RadioButton>
+                    <StackPanel Orientation="Horizontal">
+                        <RadioButton Classes="Small" Theme="{DynamicResource ButtonRadioButton}">小1</RadioButton>
+                        <RadioButton
+                            Classes="Small"
+                            IsChecked="True"
+                            Theme="{DynamicResource ButtonRadioButton}">
+                            小2
+                        </RadioButton>
+                    </StackPanel>
+                </Border>
+                <Border
+                    Margin="8,0"
+                    HorizontalAlignment="Left"
+                    Theme="{StaticResource RadioButtonGroupBorder}">
+                    <StackPanel Orientation="Horizontal">
+                        <RadioButton
+                            Classes="Small"
+                            IsEnabled="False"
+                            Theme="{DynamicResource ButtonRadioButton}">
+                            小1
+                        </RadioButton>
+                        <RadioButton
+                            Classes="Small"
+                            IsChecked="True"
+                            IsEnabled="False"
+                            Theme="{DynamicResource ButtonRadioButton}">
+                            小2
+                        </RadioButton>
+                    </StackPanel>
+                </Border>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                    <StackPanel Orientation="Horizontal">
+                        <RadioButton Theme="{DynamicResource ButtonRadioButton}">默认1</RadioButton>
+                        <RadioButton IsChecked="True" Theme="{DynamicResource ButtonRadioButton}">默认2</RadioButton>
+                    </StackPanel>
+                </Border>
+                <Border
+                    Margin="8,0"
+                    HorizontalAlignment="Left"
+                    Theme="{StaticResource RadioButtonGroupBorder}">
+                    <StackPanel Orientation="Horizontal">
+                        <RadioButton IsEnabled="False" Theme="{DynamicResource ButtonRadioButton}">默认1</RadioButton>
+                        <RadioButton
+                            IsChecked="True"
+                            IsEnabled="False"
+                            Theme="{DynamicResource ButtonRadioButton}">
+                            默认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"
+                            IsChecked="True"
+                            Theme="{DynamicResource ButtonRadioButton}">
+                            大2
+                        </RadioButton>
+                    </StackPanel>
+                </Border>
+                <Border
+                    Margin="8,0"
+                    HorizontalAlignment="Left"
+                    Theme="{StaticResource RadioButtonGroupBorder}">
+                    <StackPanel Orientation="Horizontal">
+                        <RadioButton
+                            Classes="Large"
+                            IsEnabled="False"
+                            Theme="{DynamicResource ButtonRadioButton}">
+                            大1
+                        </RadioButton>
+                        <RadioButton
+                            Classes="Large"
+                            IsChecked="True"
+                            IsEnabled="False"
+                            Theme="{DynamicResource ButtonRadioButton}">
+                            大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
+                    Width="300"
+                    IsChecked="True"
+                    Theme="{DynamicResource CardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </RadioButton>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <RadioButton
+                    Width="300"
+                    IsEnabled="False"
+                    Theme="{DynamicResource CardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </RadioButton>
+                <RadioButton
+                    Width="300"
+                    IsChecked="True"
+                    IsEnabled="False"
+                    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"
+                    IsChecked="True"
+                    Theme="{DynamicResource PureCardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </RadioButton>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <RadioButton
+                    Width="300"
+                    IsEnabled="False"
+                    Theme="{DynamicResource PureCardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </RadioButton>
+                <RadioButton
+                    Width="300"
+                    IsChecked="True"
+                    IsEnabled="False"
+                    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" />
+    </ScrollViewer>
-        <StackPanel Orientation="Horizontal">
+</UserControl>
-            <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>

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

@@ -13,6 +13,7 @@
             <RepeatButton Classes="Primary">Primary</RepeatButton>
             <RepeatButton Classes="Secondary">Secondary</RepeatButton>
             <RepeatButton Classes="Tertiary">Tertiary</RepeatButton>
+            <RepeatButton Classes="Success">Success</RepeatButton>
             <RepeatButton Classes="Warning">Warning</RepeatButton>
             <RepeatButton Classes="Danger">Danger</RepeatButton>
             <RepeatButton Classes="Primary" IsEnabled="False">Danger</RepeatButton>
@@ -22,6 +23,7 @@
             <RepeatButton Classes="Primary" Theme="{DynamicResource SolidRepeatButton}">Primary</RepeatButton>
             <RepeatButton Classes="Secondary" Theme="{DynamicResource SolidRepeatButton}">Secondary</RepeatButton>
             <RepeatButton Classes="Tertiary" Theme="{DynamicResource SolidRepeatButton}">Tertiary</RepeatButton>
+            <RepeatButton Classes="Success" Theme="{DynamicResource SolidRepeatButton}">Success</RepeatButton>
             <RepeatButton Classes="Warning" Theme="{DynamicResource SolidRepeatButton}">Warning</RepeatButton>
             <RepeatButton Classes="Danger" Theme="{DynamicResource SolidRepeatButton}">Danger</RepeatButton>
             <RepeatButton
@@ -36,6 +38,7 @@
             <RepeatButton Classes="Primary" Theme="{DynamicResource BorderlessRepeatButton}">Primary</RepeatButton>
             <RepeatButton Classes="Secondary" Theme="{DynamicResource BorderlessRepeatButton}">Secondary</RepeatButton>
             <RepeatButton Classes="Tertiary" Theme="{DynamicResource BorderlessRepeatButton}">Tertiary</RepeatButton>
+            <RepeatButton Classes="Success" Theme="{DynamicResource BorderlessRepeatButton}">Success</RepeatButton>
             <RepeatButton Classes="Warning" Theme="{DynamicResource BorderlessRepeatButton}">Warning</RepeatButton>
             <RepeatButton Classes="Danger" Theme="{DynamicResource BorderlessRepeatButton}">Danger</RepeatButton>
             <RepeatButton

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="{DynamicResource SemiYellow2}" />
+        </ScrollViewer>
+        <ScrollViewer
+            Width="200"
+            Height="200"
+            Margin="10"
+            HorizontalScrollBarVisibility="Auto"
+            Theme="{DynamicResource StaticScrollViewer}">
+            <Rectangle
+                Width="300"
+                Height="300"
+                Fill="{DynamicResource SemiYellow2}" />
+        </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/SliderDemo.axaml

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

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

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

demo/Semi.Avalonia.Demo/Pages/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 = scope.ActualThemeVariant == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
-        {
-            scope.RequestedThemeVariant = ThemeVariant.Default;
-            _variant = ThemeVariant.Default;
-        }
-        else
-        {
-            scope.RequestedThemeVariant = ThemeVariant.Dark;
-            _variant = ThemeVariant.Dark;
-        }
     }
 }

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

@@ -7,23 +7,39 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel>
+    <StackPanel Spacing="20">
-        <TextBlock Text="Toggle Button" />
+        <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 Text="Toggle Button Checked State" />
-        <TextBlock Margin="0,20,0,0" Text="Toggle Button Three State" />
         <StackPanel Orientation="Horizontal" Spacing="20">
-            <ToggleButton Name="button" IsThreeState="True">Primary</ToggleButton>
+            <ToggleButton IsChecked="True">Default</ToggleButton>
-            <ToggleButton Classes="Secondary" IsThreeState="True">Secondary</ToggleButton>
+            <ToggleButton Classes="Primary" IsChecked="True">Primary</ToggleButton>
-            <ToggleButton Classes="Tertiary" IsThreeState="True">Tertiary</ToggleButton>
+            <ToggleButton Classes="Secondary" IsChecked="True">Secondary</ToggleButton>
-            <ToggleButton Classes="Warning" IsThreeState="True">Warning</ToggleButton>
+            <ToggleButton Classes="Tertiary" IsChecked="True">Tertiary</ToggleButton>
-            <ToggleButton Classes="Error" IsThreeState="True">Error</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/ToggleSwitchDemo.axaml

@@ -24,5 +24,26 @@
             IsEnabled="False"
             OffContent="OffContent"
             OnContent="OnContent" />
+        <ToggleSwitch
+            Theme="{DynamicResource SimpleToggleSwitch}"
+            Content="Content"
+            OffContent="OffContent"
+            OnContent="OnContent" />
+        <ToggleSwitch Theme="{DynamicResource ButtonToggleSwitch}">
+            <ToggleSwitch.OnContent>
+                <PathIcon
+                    Width="16"
+                    Height="16"
+                    Data="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13"
+                    Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
+            </ToggleSwitch.OnContent>
+            <ToggleSwitch.OffContent>
+                <PathIcon
+                    Width="16"
+                    Height="16"
+                    Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z"
+                    Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
+            </ToggleSwitch.OffContent>
+        </ToggleSwitch>
     </StackPanel>
-</UserControl>
+</UserControl>

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

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

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

@@ -1,9 +1,16 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.TreeViewDemo" xmlns="https://github.com/avaloniaui"
+    x:Class="Semi.Avalonia.Demo.Pages.TreeViewDemo"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns="https://github.com/avaloniaui"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="450"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    d:DesignWidth="800" mc:Ignorable="d">
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    <Panel>
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.Pages"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:TreeViewVm"
+    mc:Ignorable="d">
+    <StackPanel HorizontalAlignment="Left">
         <TreeView>
             <TreeViewItem Header="Level 1">
                 <TreeViewItem Header="Level 2" />
@@ -38,5 +45,12 @@
                 </TreeViewItem>
             </TreeViewItem>
         </TreeView>
-    </Panel>
+        <TreeView ItemsSource="{Binding Items}">
+            <TreeView.ItemTemplate>
+                <TreeDataTemplate ItemsSource="{Binding Items}">
+                    <TextBlock Text="{Binding Name}" />
+                </TreeDataTemplate>
+            </TreeView.ItemTemplate>
+        </TreeView>
+    </StackPanel>
 </UserControl>

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

@@ -1,6 +1,8 @@
+using System.Collections.ObjectModel;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
+using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -9,5 +11,34 @@ public partial class TreeViewDemo : UserControl
     public TreeViewDemo()
     {
         InitializeComponent();
+        this.DataContext = new TreeViewVm();
     }
+}
+
+public class TreeViewVm : ObservableObject
+{
+    public ObservableCollection<TreeViewItemVm> Items { get; set; }
+
+    public TreeViewVm()
+    {
+        Items = new ObservableCollection<TreeViewItemVm>()
+        {
+            new TreeViewItemVm() {Name = "Item 1", Id = "1"},
+            new TreeViewItemVm() {Name = "Item 2", Id = "2"},
+            new TreeViewItemVm() {Name = "Item 3", Id = "3", Items = new ObservableCollection<TreeViewItemVm>()
+            {
+                new TreeViewItemVm() {Name = "Item 3.1", Id = "3.1"},
+                new TreeViewItemVm() {Name = "Item 3.2", Id = "3.2"},
+                new TreeViewItemVm() {Name = "Item 3.3", Id = "3.3"},
+            },
+            },
+        };
+    }
+}
+
+public partial class TreeViewItemVm : ObservableObject
+{
+    public ObservableCollection<TreeViewItemVm> Items { get; set; }
+    public string Name { get; set; }
+    public string Id { get; set; }
 }

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

@@ -4,42 +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" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.Controls.DataGrid" Version="11.0.0-preview5" />
+        <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>
-      <AdditionalFiles Include="Pages\AutoCompleteBoxDemo.axaml" />
-      <AdditionalFiles Include="Pages\BorderDemo.axaml" />
-      <AdditionalFiles Include="Pages\ButtonDemo.axaml" />
-      <AdditionalFiles Include="Pages\CheckBoxDemo.axaml" />
-      <AdditionalFiles Include="Pages\ComboBoxDemo.axaml" />
-      <AdditionalFiles Include="Pages\ExpanderDemo.axaml" />
-      <AdditionalFiles Include="Pages\FlyoutDemo.axaml" />
-      <AdditionalFiles Include="Pages\LabelDemo.axaml" />
-      <AdditionalFiles Include="Pages\ListBoxDemo.axaml" />
-      <AdditionalFiles Include="Pages\NotificationDemo.axaml" />
-      <AdditionalFiles Include="Pages\Overview.axaml" />
-      <AdditionalFiles Include="Pages\ProgressBarDemo.axaml" />
-      <AdditionalFiles Include="Pages\RadioButtonDemo.axaml" />
-      <AdditionalFiles Include="Pages\RepeatButtonDemo.axaml" />
-      <AdditionalFiles Include="Pages\TabControlDemo.axaml" />
-      <AdditionalFiles Include="Pages\TextBlockDemo.axaml" />
-      <AdditionalFiles Include="Pages\TextBoxDemo.axaml" />
-      <AdditionalFiles Include="Pages\ToggleButtonDemo.axaml" />
-      <AdditionalFiles Include="Pages\ToggleSwitchDemo.axaml" />
-      <AdditionalFiles Include="Pages\TreeViewDemo.axaml" />
     </ItemGroup>
 
     <ItemGroup>

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

@@ -1,35 +1,5 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Add Resources Here  -->
-    <ControlTheme x:Key="ThemeToggleButton" TargetType="ToggleButton">
-        <Setter Property="ToggleButton.Template">
-            <ControlTemplate TargetType="ToggleButton">
-                <Border
-                    Name="Background"
-                    Padding="8"
-                    Background="{TemplateBinding Background}"
-                    CornerRadius="3">
-                    <PathIcon
-                        Name="Icon"
-                        Width="16"
-                        Height="16"
-                        Data="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13"
-                        Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                </Border>
-            </ControlTemplate>
-        </Setter>
-        <Style Selector="^:pointerover">
-            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
-        </Style>
-        <Style Selector="^:pressed">
-            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
-        </Style>
-        <Style Selector="^:checked">
-            <Style Selector="^ /template/ PathIcon">
-                <Setter Property="PathIcon.Data" Value="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z" />
-            </Style>
-        </Style>
-    </ControlTheme>
-
     <ControlTheme x:Key="SplitViewToggleButton" TargetType="ToggleButton">
         <Setter Property="ToggleButton.Template">
             <ControlTemplate TargetType="ToggleButton">

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

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

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

@@ -38,10 +38,26 @@
                         Classes="Secondary"
                         Text="{Binding #tab.SelectedItem.Header}" />
                 </StackPanel>
-                <ToggleButton
+                <ToggleSwitch
                     Grid.Column="1"
+                    Padding="4"
                     IsCheckedChanged="ToggleButton_OnIsCheckedChanged"
-                    Theme="{DynamicResource ThemeToggleButton}" />
+                    Theme="{DynamicResource ButtonToggleSwitch}">
+                    <ToggleSwitch.OnContent>
+                        <PathIcon
+                            Width="16"
+                            Height="16"
+                            Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z"
+                            Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
+                    </ToggleSwitch.OnContent>
+                    <ToggleSwitch.OffContent>
+                        <PathIcon
+                            Width="16"
+                            Height="16"
+                            Data="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13"
+                            Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
+                    </ToggleSwitch.OffContent>
+                </ToggleSwitch>
             </Grid>
 
         </Border>
@@ -89,6 +105,9 @@
             <TabItem Header="ComboBox">
                 <pages:ComboBoxDemo />
             </TabItem>
+            <TabItem Header="DataValidationErrors">
+                <pages:DataValidationErrorsDemo />
+            </TabItem>
             <TabItem Header="DataGrid">
                 <pages:DataGridDemo />
             </TabItem>
@@ -104,6 +123,9 @@
             <TabItem Header="GridSplitter">
                 <pages:GridSplitter />
             </TabItem>
+            <TabItem Header="HeaderedContentControl">
+                <pages:HeaderedContentControlDemo />
+            </TabItem>
             <TabItem Header="Label">
                 <pages:LabelDemo />
             </TabItem>
@@ -134,6 +156,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.2</Version>
+        <Version>11.0.0</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</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.
@@ -135,8 +135,8 @@
                                                 ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}"
                                                 ColorModel="Hsva"
                                                 HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
-                                                IsAlphaMaxForced="True"
+                                                IsAlphaVisible="True"
-                                                IsSaturationValueMaxForced="False"
+                                                IsPerceptive="False"
                                                 IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                                 Orientation="Vertical" />
                                             <primitives:ColorSpectrum
@@ -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}" />
+                                                        <ReflectionBinding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                                        <Binding Path="IsComponentTextInputVisible" 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}" />
+                                                        <ReflectionBinding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                                        <Binding Path="IsComponentSliderVisible" 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

@@ -227,8 +227,8 @@
                                     ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}"
                                     ColorModel="Hsva"
                                     HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
-                                    IsAlphaMaxForced="True"
+                                    IsAlphaVisible="True"
-                                    IsSaturationValueMaxForced="False"
+                                    IsPerceptive="False"
                                     IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                     Orientation="Vertical" />
                                 <primitives:ColorSpectrum
@@ -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}" />
+                                            <ReflectionBinding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                            <Binding Path="IsComponentTextInputVisible" 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}" />
+                                            <ReflectionBinding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                            <Binding Path="IsComponentSliderVisible" 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" />
+                <MergeResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.ColorPicker/Light.axaml" />
-                <ResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.ColorPicker/Dark.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-rc1</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" />
+                <MergeResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.DataGrid/Light.axaml" />
-                <ResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.DataGrid/Dark.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-rc1</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>
+                <DataValidationErrors>
-                    <TextBox
+                    <Panel>
-                        Name="PART_TextBox"
+                        <TextBox
-                        VerticalAlignment="Center"
+                            Name="PART_TextBox"
-                        DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
+                            VerticalAlignment="Center"
-                        Watermark="{TemplateBinding Watermark}" />
+                            DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
-                    <Popup
+                            Theme="{DynamicResource NonErrorTextBox}"
-                        Name="PART_Popup"
+                            Watermark="{TemplateBinding Watermark}" />
-                        MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
+                        <Popup
-                        MaxHeight="{TemplateBinding MaxDropDownHeight}"
+                            Name="PART_Popup"
-                        IsLightDismissEnabled="True"
+                            MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
-                        PlacementTarget="{TemplateBinding}">
+                            MaxHeight="{TemplateBinding MaxDropDownHeight}"
-                        <Border
+                            IsLightDismissEnabled="True"
-                            Margin="{DynamicResource AutoCompleteBoxPopupMargin}"
+                            PlacementTarget="{TemplateBinding}">
-                            HorizontalAlignment="Stretch"
+                            <Border
-                            Background="{DynamicResource AutoCompleteBoxPopupBackground}"
+                                Margin="{DynamicResource AutoCompleteBoxPopupMargin}"
-                            BorderBrush="{DynamicResource AutoCompleteBoxPopupBorderBrush}"
+                                HorizontalAlignment="Stretch"
-                            BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
+                                Background="{DynamicResource AutoCompleteBoxPopupBackground}"
-                            BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
+                                BorderBrush="{DynamicResource AutoCompleteBoxPopupBorderBrush}"
-                            CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
+                                BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
-                            <ListBox
+                                BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
-                                Name="PART_SelectingItemsControl"
+                                CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
-                                Foreground="{TemplateBinding Foreground}"
+                                <ListBox
-                                ItemTemplate="{TemplateBinding ItemTemplate}"
+                                    Name="PART_SelectingItemsControl"
-                                ScrollViewer.HorizontalScrollBarVisibility="Auto"
+                                    Foreground="{TemplateBinding Foreground}"
-                                ScrollViewer.VerticalScrollBarVisibility="Auto" />
+                                    ItemTemplate="{TemplateBinding ItemTemplate}"
-                        </Border>
+                                    ScrollViewer.HorizontalScrollBarVisibility="Auto"
-                    </Popup>
+                                    ScrollViewer.VerticalScrollBarVisibility="Auto" />
-                </Panel>
+                            </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/Calendar.axaml

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

src/Semi.Avalonia/Controls/CalendarDatePicker.axaml

@@ -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
+                <DataValidationErrors>
-                    x:Name="LayoutRoot"
+                    <Panel
-                    HorizontalAlignment="Stretch"
+                        x:Name="LayoutRoot"
-                    VerticalAlignment="Stretch">
+                        HorizontalAlignment="Stretch"
-                    <Border
+                        VerticalAlignment="Stretch">
-                        x:Name="Background"
+                        <Border
-                        Background="{TemplateBinding Background}"
+                            x:Name="Background"
-                        BorderBrush="{TemplateBinding BorderBrush}"
+                            Background="{TemplateBinding Background}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
-                        CornerRadius="{TemplateBinding CornerRadius}">
+                            BorderThickness="{TemplateBinding BorderThickness}"
-                        <Grid
+                            CornerRadius="{TemplateBinding CornerRadius}">
-                            HorizontalAlignment="Left"
+                            <Grid
-                            VerticalAlignment="Center"
-                            ColumnDefinitions="*,Auto">
-                            <TextBox
-                                Name="PART_TextBox"
-                                Grid.Column="0"
-                                MinHeight="{DynamicResource CalendarDatePickerInnerDefaultHeight}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Center"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                ColumnDefinitions="*,Auto">
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                <TextBox
-                                Background="Transparent"
+                                    Name="PART_TextBox"
-                                BorderBrush="Transparent"
+                                    Grid.Column="0"
-                                BorderThickness="0"
+                                    MinHeight="{DynamicResource CalendarDatePickerDefaultHeight}"
-                                CornerRadius="{TemplateBinding CornerRadius}"
+                                    HorizontalAlignment="Stretch"
-                                Foreground="{TemplateBinding Foreground}"
+                                    VerticalAlignment="Center"
-                                UseFloatingWatermark="{TemplateBinding UseFloatingWatermark}"
+                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                Watermark="{TemplateBinding Watermark}">
+                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                <TextBox.Styles>
+                                    Background="Transparent"
-                                    <Style Selector="TextBox#PART_TextBox:pointerover /template/ Border#PART_ContentPresenterBorder">
+                                    BorderBrush="Transparent"
-                                        <!--  By default the TextBox has its own focused state, override this to disable it here  -->
+                                    BorderThickness="0"
-                                        <Setter Property="Background" Value="Transparent" />
+                                    CornerRadius="{TemplateBinding CornerRadius}"
-                                        <Setter Property="BorderBrush" Value="Transparent" />
+                                    Foreground="{TemplateBinding Foreground}"
-                                        <Setter Property="BorderThickness" Value="0" />
+                                    Theme="{DynamicResource NonErrorTextBox}"
-                                    </Style>
+                                    UseFloatingWatermark="{TemplateBinding UseFloatingWatermark}"
-                                    <Style Selector="TextBox#PART_TextBox:focus /template/ Border#PART_ContentPresenterBorder">
+                                    Watermark="{TemplateBinding Watermark}">
-                                        <!--  By default the TextBox has its own focused state, override this to disable it here  -->
+                                    <TextBox.Styles>
-                                        <Setter Property="Background" Value="Transparent" />
+                                        <Style Selector="TextBox#PART_TextBox:pointerover /template/ Border#PART_ContentPresenterBorder">
-                                        <Setter Property="BorderBrush" Value="Transparent" />
+                                            <!--  By default the TextBox has its own focused state, override this to disable it here  -->
-                                        <Setter Property="BorderThickness" Value="0" />
-                                    </Style>
-                                    <Style Selector="TextBox#PART_TextBox:disabled">
-                                        <Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
-                                            <!--  By default the TextBox has its own disabled state, override this to make the border background show through  -->
                                             <Setter Property="Background" Value="Transparent" />
                                             <Setter Property="BorderBrush" Value="Transparent" />
+                                            <Setter Property="BorderThickness" Value="0" />
                                         </Style>
-                                        <Style Selector="^ /template/ TextBlock#PART_Watermark">
+                                        <Style Selector="TextBox#PART_TextBox:focus /template/ Border#PART_ContentPresenterBorder">
-                                            <Setter Property="TextElement.Foreground" Value="{DynamicResource CalendarDatePickerTextForegroundDisabled}" />
+                                            <!--  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>
+                                        <Style Selector="TextBox#PART_TextBox:disabled">
-                                </TextBox.Styles>
+                                            <Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
-                            </TextBox>
+                                                <!--  By default the TextBox has its own disabled state, override this to make the border background show through  -->
-                            <Button
+                                                <Setter Property="Background" Value="Transparent" />
-                                Name="PART_Button"
+                                                <Setter Property="BorderBrush" Value="Transparent" />
-                                Grid.Column="1"
+                                            </Style>
-                                Padding="0,0,8,0"
+                                        </Style>
-                                Cursor="Hand"
+                                    </TextBox.Styles>
-                                Focusable="False"
+                                </TextBox>
-                                Theme="{DynamicResource CalendarDatePickerButton}" />
+                                <Button
-                            <Popup
+                                    Name="PART_Button"
-                                Name="PART_Popup"
+                                    Grid.Column="1"
-                                HorizontalOffset="-8"
+                                    Padding="0,0,8,0"
-                                IsLightDismissEnabled="True"
+                                    Cursor="Hand"
-                                PlacementTarget="{TemplateBinding}"
+                                    Focusable="False"
-                                VerticalOffset="-4">
+                                    Theme="{DynamicResource CalendarDatePickerButton}" />
-                                <Border Margin="8" BoxShadow="{DynamicResource CalendarDatePickerPopupBoxShadows}">
+                                <Popup
-                                    <Calendar
+                                    Name="PART_Popup"
-                                        Name="PART_Calendar"
+                                    HorizontalOffset="-8"
-                                        DisplayDate="{TemplateBinding DisplayDate}"
+                                    IsLightDismissEnabled="True"
-                                        DisplayDateEnd="{TemplateBinding DisplayDateEnd}"
+                                    PlacementTarget="{TemplateBinding}"
-                                        DisplayDateStart="{TemplateBinding DisplayDateStart}"
+                                    VerticalOffset="-4">
-                                        FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
+                                    <Border
-                                        IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
+                                        Margin="8"
-                                        SelectedDate="{TemplateBinding SelectedDate,
+                                        Background="Transparent"
-                                                                       Mode=TwoWay}" />
+                                        BoxShadow="{DynamicResource CalendarDatePickerPopupBoxShadows}"
-                                </Border>
+                                        CornerRadius="{DynamicResource CalendarCornerRadius}">
-                            </Popup>
+                                        <Calendar
-                        </Grid>
+                                            Name="PART_Calendar"
-                    </Border>
+                                            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/CaptionButtons.axaml

@@ -9,10 +9,11 @@
         <Setter Property="BorderBrush" Value="{DynamicResource CaptionButtonPressedBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource CaptionButtonForeground}" />
         <Setter Property="CornerRadius" Value="6" />
-        <Setter Property="Margin" Value="4" />
+        <Setter Property="Margin" Value="0, 4" />
         <Setter Property="Padding" Value="4" />
         <Setter Property="Height" Value="28" />
         <Setter Property="Width" Value="28" />
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="VerticalAlignment" Value="Stretch" />
         <Setter Property="Template">
             <ControlTemplate TargetType="Button">
@@ -36,6 +37,7 @@
 
     <ControlTheme x:Key="{x:Type CaptionButtons}" TargetType="CaptionButtons">
         <Setter Property="Foreground" Value="{DynamicResource CaptionButtonForeground}" />
+        <Setter Property="Margin" Value="0 0 4 0" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CaptionButtons">
                 <StackPanel
@@ -51,7 +53,7 @@
                             Data="{DynamicResource WindowExpandGlyph}"
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>
-                    <Button x:Name="PART_MinimiseButton" Theme="{StaticResource CaptionButton}">
+                    <Button x:Name="PART_MinimizeButton" Theme="{StaticResource CaptionButton}">
                         <PathIcon
                             Width="12"
                             Height="12"
@@ -97,7 +99,7 @@
         <Style Selector="^:fullscreen /template/ Button#PART_RestoreButton">
             <Setter Property="IsVisible" Value="False" />
         </Style>
-        <Style Selector="^:fullscreen /template/ Button#PART_MinimiseButton">
+        <Style Selector="^:fullscreen /template/ Button#PART_MinimizeButton">
             <Setter Property="IsVisible" Value="False" />
         </Style>
     </ControlTheme>

src/Semi.Avalonia/Controls/Carousel.axaml

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

src/Semi.Avalonia/Controls/CheckBox.axaml

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

src/Semi.Avalonia/Controls/ComboBox.axaml

@@ -31,121 +31,120 @@
         <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" />
         <Setter Property="VerticalAlignment" Value="Top" />
-        <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
-        <Setter Property="PlaceholderForeground" Value="{DynamicResource ComboBoxPlaceHolderForeground}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ComboBox">
-                <Grid ColumnDefinitions="*,32">
+                <DataValidationErrors>
-                    <Border
+                    <Grid ColumnDefinitions="*,32">
-                        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">
                         <Border
-                            x:Name="PopupBorder"
+                            x:Name="Background"
-                            Margin="0,4"
+                            Grid.Column="0"
-                            HorizontalAlignment="Stretch"
+                            Grid.ColumnSpan="2"
-                            Background="{DynamicResource ComboBoxPopupBackground}"
+                            MinWidth="{DynamicResource ComboBoxThemeMinWidth}"
-                            BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
+                            MinHeight="{DynamicResource ComboBoxDefaultHeight}"
-                            BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}"
+                            Background="{TemplateBinding Background}"
-                            BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
-                            ClipToBounds="True"
+                            BorderThickness="{TemplateBinding BorderThickness}"
-                            CornerRadius="6">
+                            CornerRadius="{TemplateBinding CornerRadius}" />
-                            <ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                        <TextBlock
-                                <ItemsPresenter
+                            x:Name="PlaceholderTextBlock"
-                                    Name="PART_ItemsPresenter"
+                            Grid.Column="0"
-                                    Margin="{DynamicResource ComboBoxDropdownContentMargin}"
+                            Margin="{TemplateBinding Padding}"
-                                    ItemsPanel="{TemplateBinding ItemsPanel}" />
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            </ScrollViewer>
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                        </Border>
+                            Foreground="{TemplateBinding Foreground}"
-                    </Popup>
+                            IsVisible="{TemplateBinding SelectionBoxItem,
-                </Grid>
+                                                        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="Background" Value="{DynamicResource ComboBoxSelectorPointeroverBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorPointerOverBorderBrush}" />
+            <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 +173,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 +220,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 +264,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 +283,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,12 +16,15 @@
         <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" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/HeaderedContentControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ItemsControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Label.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ListBox.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}"
+                                    Data="{DynamicResource DateTimePickerAcceptGlyph}" />
-                                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
                             </Button>
                             <Button
                                 Name="PART_DismissButton"
@@ -105,8 +104,7 @@
                                 <PathIcon
                                     Width="12"
                                     Height="12"
-                                    Data="{DynamicResource DateTimePickerDismissGlyph}"
+                                    Data="{DynamicResource DateTimePickerDismissGlyph}" />
-                                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
                             </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}">
+                <DataValidationErrors>
-                    <Button
+                    <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
-                        Name="PART_FlyoutButton"
+                        <Button
-                        Width="298"
+                            Name="PART_FlyoutButton"
-                        MinWidth="298"
+                            Width="298"
-                        HorizontalAlignment="Stretch"
+                            MinWidth="298"
-                        VerticalAlignment="Stretch"
+                            HorizontalAlignment="Stretch"
-                        Background="{TemplateBinding Background}"
+                            VerticalAlignment="Stretch"
-                        BorderBrush="{TemplateBinding BorderBrush}"
+                            Background="{TemplateBinding Background}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
-                        CornerRadius="{TemplateBinding CornerRadius}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
-                        Cursor="Hand"
+                            CornerRadius="{TemplateBinding CornerRadius}"
-                        Foreground="{TemplateBinding Foreground}"
+                            Cursor="Hand"
-                        IsEnabled="{TemplateBinding IsEnabled}"
+                            DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
-                        Theme="{StaticResource DateTimePickerFlyoutButton}">
+                            Foreground="{TemplateBinding Foreground}"
-                        <Grid ColumnDefinitions="*, Auto">
+                            IsEnabled="{TemplateBinding IsEnabled}"
-                            <Grid
+                            MinHeight="{DynamicResource DateTimePickerButtonDefaultHeight}"
-                                Name="PART_ButtonContentGrid"
+                            Theme="{StaticResource DateTimePickerFlyoutButton}">
-                                Grid.Column="0"
+                            <Grid ColumnDefinitions="*, Auto">
-                                VerticalAlignment="Center"
+                                <Grid
-                                ColumnDefinitions="78*,Auto,132*,Auto,78*">
+                                    Name="PART_ButtonContentGrid"
-                                <TextBlock
+                                    Grid.Column="0"
-                                    Name="PART_DayTextBlock"
-                                    Padding="12,4"
-                                    HorizontalAlignment="Center"
                                     VerticalAlignment="Center"
-                                    FontFamily="{TemplateBinding FontFamily}"
+                                    ColumnDefinitions="78*,Auto,132*,Auto,78*">
-                                    FontSize="{TemplateBinding FontSize}"
+                                    <TextBlock
-                                    FontWeight="{TemplateBinding FontWeight}"
+                                        Name="PART_DayTextBlock"
-                                    Text="day" />
+                                        Padding="12,4"
-                                <TextBlock
+                                        HorizontalAlignment="Center"
-                                    Name="PART_MonthTextBlock"
+                                        VerticalAlignment="Center"
-                                    Padding="12,4"
+                                        FontFamily="{TemplateBinding FontFamily}"
-                                    VerticalAlignment="Center"
+                                        FontSize="{TemplateBinding FontSize}"
-                                    FontFamily="{TemplateBinding FontFamily}"
+                                        FontWeight="{TemplateBinding FontWeight}"
-                                    FontSize="{TemplateBinding FontSize}"
+                                        Text="day" />
-                                    FontWeight="{TemplateBinding FontWeight}"
+                                    <TextBlock
-                                    Text="month"
+                                        Name="PART_MonthTextBlock"
-                                    TextAlignment="Left" />
+                                        Padding="12,4"
-                                <TextBlock
+                                        VerticalAlignment="Center"
-                                    Name="PART_YearTextBlock"
+                                        FontFamily="{TemplateBinding FontFamily}"
-                                    Padding="12,4"
+                                        FontSize="{TemplateBinding FontSize}"
-                                    HorizontalAlignment="Center"
+                                        FontWeight="{TemplateBinding FontWeight}"
-                                    VerticalAlignment="Center"
+                                        Text="month"
-                                    FontFamily="{TemplateBinding FontFamily}"
+                                        TextAlignment="Left" />
-                                    FontSize="{TemplateBinding FontSize}"
+                                    <TextBlock
-                                    FontWeight="{TemplateBinding FontWeight}"
+                                        Name="PART_YearTextBlock"
-                                    Text="year" />
+                                        Padding="12,4"
-                                <Rectangle
+                                        HorizontalAlignment="Center"
-                                    x:Name="PART_FirstSpacer"
+                                        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"
+                                    Width="16"
-                                    Margin="0,4"
+                                    Height="16"
-                                    HorizontalAlignment="Center"
+                                    Margin="0,0,8,0"
-                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                    Data="{DynamicResource DatePickerIconGlyph}"
-                                <Rectangle
+                                    Foreground="{DynamicResource DateTimePickerIconForeground}" />
-                                    x:Name="PART_SecondSpacer"
-                                    Grid.Column="3"
-                                    Width="1"
-                                    Margin="0,4"
-                                    HorizontalAlignment="Center"
-                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                             </Grid>
-                            <PathIcon
+                        </Button>
-                                Name="PART_Icon"
-                                Grid.Column="1"
-                                Width="16"
-                                Height="16"
-                                Margin="0,0,8,0"
-                                Data="{DynamicResource DatePickerIconGlyph}"
-                                Foreground="{DynamicResource DateTimePickerIconForeground}" />
-                        </Grid>
-                    </Button>
 
-                    <Popup
+                        <Popup
-                        Name="PART_Popup"
+                            Name="PART_Popup"
-                        IsLightDismissEnabled="True"
+                            IsLightDismissEnabled="True"
-                        PlacementMode="Bottom"
+                            Placement="Bottom"
-                        PlacementTarget="{TemplateBinding}"
+                            PlacementTarget="{TemplateBinding}"
-                        WindowManagerAddShadowHint="False">
+                            WindowManagerAddShadowHint="False">
-                        <DatePickerPresenter Name="PART_PickerPresenter" />
+                            <DatePickerPresenter Name="PART_PickerPresenter" />
-                    </Popup>
+                        </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}"
+                    Data="{DynamicResource DateTimePickerButtonUpGlyph}" />
-                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
             </Template>
         </Setter>
     </ControlTheme>
@@ -125,8 +143,7 @@
                     Height="8"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
-                    Data="{DynamicResource DateTimePickerButtonDownGlyph}"
+                    Data="{DynamicResource DateTimePickerButtonDownGlyph}" />
-                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
             </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}"
+                            Data="{DynamicResource DropDownButtonIconGlyph}"
-                            Foreground="{DynamicResource ComboBoxDropDownGlyphForeground}"
+                            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}"
+                            Data="{DynamicResource DropDownButtonIconGlyph}"
-                            Foreground="{DynamicResource ComboBoxDropDownGlyphForeground}"
+                            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/HeaderedContentControl.axaml

@@ -0,0 +1,49 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    x:CompileBindings="True">
+    <ControlTheme x:Key="GroupBox" TargetType="HeaderedContentControl">
+        <Setter Property="Background" Value="{DynamicResource HeaderedContentControlDefaultBackground}" />
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="BorderBrush" Value="{DynamicResource HeaderedContentControlDefaultBorderBrush}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource HeaderedContentControlCornerRadius}" />
+        <Setter Property="Width" Value="400" />
+        <Setter Property="Height" Value="200" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="HorizontalContentAlignment" Value="Left" />
+        <Setter Property="VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="HeaderedContentControl">
+                <Border
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Stretch"
+                    Width="{TemplateBinding Width}"
+                    Height="{TemplateBinding Height}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    BorderThickness="{TemplateBinding BorderThickness}">
+                    <Grid RowDefinitions="Auto,Auto,*">
+                        <ContentPresenter
+                            Grid.Row="0"
+                            FontWeight="Bold"
+                            HorizontalAlignment="Left"
+                            VerticalAlignment="Stretch"
+                            Content="{TemplateBinding Header}"
+                            ContentTemplate="{TemplateBinding HeaderTemplate}"
+                            Margin="16" />
+                        <Rectangle
+                            Grid.Row="1"
+                            Fill="{TemplateBinding BorderBrush}"
+                            Height="1" />
+                        <ContentPresenter
+                            Grid.Row="2"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            Margin="16" />
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Label.axaml

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

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}" />
+                                <ReflectionBinding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Viewport.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}" />
+                                <ReflectionBinding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Viewport.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}"
+                        HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
-                        CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
+                        HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
-                        Content="{TemplateBinding Content}"
+                        VerticalSnapPointsAlignment="{TemplateBinding VerticalSnapPointsAlignment}"
-                        Extent="{TemplateBinding Extent,
+                        VerticalSnapPointsType="{TemplateBinding VerticalSnapPointsType}">
-                                                 Mode=TwoWay}"
-                        Viewport="{TemplateBinding Viewport,
-                                                   Mode=TwoWay}"
-                        Offset="{TemplateBinding Offset,
-                                                 Mode=TwoWay}">
                         <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 MenuFlyoutCornerRadius}" />
-        <Setter Property="MenuFlyoutPresenter.CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
         <Setter Property="MenuFlyoutPresenter.Template">
             <ControlTemplate TargetType="MenuFlyoutPresenter">
                 <Border
                     Name="LayoutRoot"
-                    MinWidth="{DynamicResource MenuFlyoutMinWidth}"
+                    Margin="4"
-                    MinHeight="{DynamicResource MenuFlyoutMinHeight}"
+                    Background="{TemplateBinding Background}"
-                    MaxWidth="{DynamicResource MenuFlyoutMaxWidth}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
-                    MaxHeight="{DynamicResource MenuFlyoutMaxHeight}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
-                    Margin="8"
-                    Padding="{DynamicResource MenuFlyoutPadding}"
-                    HorizontalAlignment="Stretch"
-                    Background="{DynamicResource MenuFlyoutBackground}"
-                    BorderBrush="{DynamicResource MenuFlyoutBorderBrush}"
-                    BorderThickness="{DynamicResource MenuFlyoutBorderThickness}"
                     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
+                <DataValidationErrors>
-                    Name="PART_Spinner"
+                    <ButtonSpinner
-                    MinWidth="0"
+                        Name="PART_Spinner"
-                    HorizontalContentAlignment="Stretch"
+                        MinWidth="0"
-                    VerticalContentAlignment="Stretch"
+                        HorizontalContentAlignment="Stretch"
-                    AllowSpin="{TemplateBinding AllowSpin}"
+                        VerticalContentAlignment="Stretch"
-                    Background="{TemplateBinding Background}"
+                        AllowSpin="{TemplateBinding AllowSpin}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
+                        Background="{TemplateBinding Background}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
-                    ButtonSpinnerLocation="{TemplateBinding ButtonSpinnerLocation}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
-                    ShowButtonSpinner="{TemplateBinding ShowButtonSpinner}">
+                        ButtonSpinnerLocation="{TemplateBinding ButtonSpinnerLocation}"
-                    <TextBox
+                        ShowButtonSpinner="{TemplateBinding ShowButtonSpinner}">
-                        Name="PART_TextBox"
+                        <TextBox
-                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            Name="PART_TextBox"
-                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Height="{TemplateBinding Height}"
-                        AcceptsReturn="False"
+                            MinHeight="{DynamicResource NumericUpDownWrapperDefaultHeight}"
-                        CornerRadius="{TemplateBinding CornerRadius}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        FontSize="{TemplateBinding FontSize}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                        Foreground="{TemplateBinding Foreground}"
+                            AcceptsReturn="False"
-                        IsReadOnly="{TemplateBinding IsReadOnly}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
-                        Text="{TemplateBinding Text}"
+                            DataValidationErrors.Errors="{ReflectionBinding $parent[NumericUpDown].(DataValidationErrors.Errors)}"
-                        TextWrapping="NoWrap"
+                            FontSize="{TemplateBinding FontSize}"
-                        Watermark="{TemplateBinding Watermark}" />
+                            Foreground="{TemplateBinding Foreground}"
-                </ButtonSpinner>
+                            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

@@ -2,6 +2,7 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:converters="using:Avalonia.Controls.Converters"
+    xmlns:semiConverters="clr-namespace:Semi.Avalonia.Converters"
     x:CompileBindings="True">
     <Design.PreviewWith>
         <StackPanel Margin="20" Spacing="20">
@@ -158,7 +159,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" />
@@ -169,15 +170,24 @@
                 </Grid>
             </ControlTemplate>
         </Setter>
+        <Style Selector="^.Primary">
+            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarPrimaryForeground}" />
+        </Style>
+        <Style Selector="^.Secondary">
+            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarSecondaryForeground}" />
+        </Style>
+        <Style Selector="^.Tertiary">
+            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarTertiaryForeground}" />
+        </Style>
+        <Style Selector="^.Success">
+            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarSuccessForeground}" />
+        </Style>
         <Style Selector="^.Warning">
             <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarWarningForeground}" />
         </Style>
         <Style Selector="^.Error">
             <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarErrorForeground}" />
         </Style>
-        <Style Selector="^.Success">
-            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarSuccessForeground}" />
-        </Style>
         <Style Selector="^:horizontal /template/ Border#PART_Indicator">
             <Setter Property="HorizontalAlignment" Value="Left" />
             <Setter Property="VerticalAlignment" Value="Stretch" />
@@ -211,13 +221,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 +236,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 +251,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 +266,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">
@@ -326,4 +336,105 @@
             </Style>
         </Style>
     </ControlTheme>
+
+    <semiConverters:PositionToAngleConverter x:Key="AngleConverter" />
+
+    <ControlTheme x:Key="ProgressRing" TargetType="ProgressBar">
+        <Setter Property="Foreground" Value="{DynamicResource ProgressBarIndicatorBrush}" />
+        <Setter Property="Background" Value="{DynamicResource ProgressBarBackground}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ProgressBar">
+                <Panel>
+                    <Border Name="PART_Indicator" />
+                    <Arc
+                        Name="Background"
+                        RenderOptions.EdgeMode="Antialias"
+                        StartAngle="-90"
+                        Stroke="{TemplateBinding Background}"
+                        StrokeJoin="Round"
+                        StrokeLineCap="Round"
+                        StrokeThickness="6"
+                        SweepAngle="360" />
+                    <Arc
+                        Name="Indicator"
+                        RenderOptions.EdgeMode="Antialias"
+                        StartAngle="-90"
+                        Stroke="{TemplateBinding Foreground}"
+                        StrokeJoin="Round"
+                        StrokeLineCap="Round"
+                        StrokeThickness="6"
+                        SweepAngle="{TemplateBinding Percentage,
+                                                     Converter={StaticResource AngleConverter}}" />
+                    <Arc
+                        Name="IndeterminateIndicator"
+                        Opacity="0"
+                        RenderOptions.EdgeMode="Antialias"
+                        StartAngle="-90"
+                        Stroke="{TemplateBinding Foreground}"
+                        StrokeJoin="Round"
+                        StrokeLineCap="Round"
+                        StrokeThickness="6"
+                        SweepAngle="{TemplateBinding Percentage,
+                                                     Converter={StaticResource AngleConverter}}" />
+                    <TextBlock
+                        Name="PART_ProgressText"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        FontWeight="{DynamicResource ProgressBarTextFontWeight}"
+                        Foreground="{DynamicResource ProgressBarTextForeground}"
+                        IsVisible="{TemplateBinding ShowProgressText}">
+                        <TextBlock.Text>
+                            <MultiBinding Converter="{StaticResource StringFormatConverter}">
+                                <TemplateBinding Property="ProgressTextFormat" />
+                                <TemplateBinding Property="Value" />
+                                <TemplateBinding Property="Percentage" />
+                                <TemplateBinding Property="Minimum" />
+                                <TemplateBinding Property="Maximum" />
+                            </MultiBinding>
+                        </TextBlock.Text>
+                    </TextBlock>
+                </Panel>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^.Primary">
+            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarPrimaryForeground}" />
+        </Style>
+        <Style Selector="^.Secondary">
+            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarSecondaryForeground}" />
+        </Style>
+        <Style Selector="^.Tertiary">
+            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarTertiaryForeground}" />
+        </Style>
+        <Style Selector="^.Success">
+            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarSuccessForeground}" />
+        </Style>
+        <Style Selector="^.Warning">
+            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarWarningForeground}" />
+        </Style>
+        <Style Selector="^.Error">
+            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarErrorForeground}" />
+        </Style>
+        <Style Selector="^:indeterminate /template/ Arc#Indicator">
+            <Setter Property="Opacity" Value="0" />
+        </Style>
+        <Style Selector="^:indeterminate /template/ Arc#IndeterminateIndicator">
+            <Setter Property="Opacity" Value="1" />
+            <Style.Animations>
+                <Animation IterationCount="Infinite" Duration="0:0:2">
+                    <KeyFrame KeyTime="0:0:0">
+                        <Setter Property="StartAngle" Value="-90" />
+                        <Setter Property="SweepAngle" Value="20" />
+                    </KeyFrame>
+                    <KeyFrame KeyTime="0:0:1.5">
+                        <Setter Property="StartAngle" Value="90" />
+                        <Setter Property="SweepAngle" Value="160" />
+                    </KeyFrame>
+                    <KeyFrame KeyTime="0:0:2">
+                        <Setter Property="StartAngle" Value="270" />
+                        <Setter Property="SweepAngle" Value="20" />
+                    </KeyFrame>
+                </Animation>
+            </Style.Animations>
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/RadioButton.axaml

@@ -24,6 +24,10 @@
         <Setter Property="RadioButton.HorizontalContentAlignment" Value="Left" />
         <Setter Property="RadioButton.VerticalContentAlignment" Value="Center" />
         <Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonFontSize}" />
+        <Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonBoxCornerRadius}" />
+        <Setter Property="RadioButton.Foreground" Value="{DynamicResource RadioButtonForeground}" />
+        <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonDefaultBackground}" />
+        <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonDefaultBorderBrush}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="RadioButton">
                 <Border
@@ -35,7 +39,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 +76,7 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  PointerOver State  -->
+        <!--  Unchecked 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>
         <Style Selector="^:unchecked">
             <Style Selector="^ /template/ Ellipse#OuterEllipse">
                 <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" />
@@ -111,32 +85,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}" />
+            <!--  Unchecked Pointerover State  -->
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDisabledBackground}" />
+            <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}" />
+            <!--  Unchecked Disabled state  -->
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPointOverBackground}" />
+            <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">
+        </Style>
-                <Setter Property="Ellipse.Opacity" Value="0" />
+
+        <!--  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">
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
+                <Setter Property="Ellipse.Opacity" Value="1" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPressedBackground}" />
             </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 +200,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 +232,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 +247,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 +275,6 @@
                         <ContentPresenter
                             Name="PART_ContentPresenter"
                             Grid.Column="1"
-                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
@@ -242,7 +287,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 +345,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}" />
+            <!--  Checked Pointerover State  -->
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
-            </Style>
-            <Style Selector="^:disabled /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="1" />
-            </Style>
             <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="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
-                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointOverBackground}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
                 </Style>
                 <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointOverBorderBrush}" />
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
-                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointOverBackground}" />
+                    <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 +373,22 @@
                     <Setter Property="Ellipse.Opacity" Value="1" />
                 </Style>
             </Style>
-        </Style>
+
-        <Style Selector="^:unchecked">
+            <!--  Checked Disabled State  -->
-            <Style Selector="^ /template/ Ellipse#OuterEllipse">
+            <Style Selector="^:disabled">
-                <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}" />
                 <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="^ /template/ Border#RootBorder">
-            <Style Selector="^:pressed">
+                    <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
-                <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPressedBackground}" />
+                    <Setter Property="Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
-                <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
                 </Style>
-                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                    <Setter Property="Ellipse.Opacity" Value="0" />
+                    <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
                 </Style>
             </Style>
         </Style>
@@ -324,10 +397,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 +417,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

@@ -21,6 +21,22 @@
             <dialog:ManagedFileChooser />
         </StackPanel>
     </Design.PreviewWith>
+    <ControlTheme x:Key="ScrollBarRepeatButton" TargetType="{x:Type RepeatButton}">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Foreground" Value="Gray" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
+                    <ContentPresenter
+                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                        Content="{TemplateBinding Content}"
+                        Foreground="{TemplateBinding Foreground}" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
     <ControlTheme x:Key="{x:Type ScrollBar}" TargetType="ScrollBar">
         <Setter Property="Cursor" Value="Arrow" />
         <Style Selector="^:horizontal">
@@ -34,11 +50,14 @@
                                 Grid.Row="0"
                                 Grid.Column="0"
                                 MinWidth="{DynamicResource ScrollBarThickness}"
+                                Padding="4,0"
                                 VerticalAlignment="Center"
-                                Classes="repeat"
+                                Focusable="False"
-                                CornerRadius="0"
+                                Theme="{DynamicResource ScrollBarRepeatButton}">
-                                Focusable="False">
+                                <PathIcon
-                                <Path Data="M 4 0 L 4 8 L 0 4 Z" />
+                                    Width="10"
+                                    Height="10"
+                                    Data="{DynamicResource ScrollBarLeftGlyph}" />
                             </RepeatButton>
                             <Track
                                 Grid.Column="1"
@@ -54,9 +73,9 @@
                                         MinWidth="0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
-                                        Classes="repeattrack"
                                         CornerRadius="0"
-                                        Focusable="False" />
+                                        Focusable="False"
+                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
                                 </Track.DecreaseButton>
                                 <Track.IncreaseButton>
                                     <RepeatButton
@@ -64,9 +83,9 @@
                                         MinWidth="0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
-                                        Classes="repeattrack"
                                         CornerRadius="0"
-                                        Focusable="False" />
+                                        Focusable="False"
+                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
                                 </Track.IncreaseButton>
                                 <Thumb Name="thumb" />
                             </Track>
@@ -74,11 +93,15 @@
                                 Name="PART_LineDownButton"
                                 Grid.Column="2"
                                 MinWidth="{DynamicResource ScrollBarThickness}"
+                                Padding="4,0"
                                 VerticalAlignment="Center"
-                                Classes="repeat"
+                                VerticalContentAlignment="Center"
-                                CornerRadius="0"
+                                Focusable="False"
-                                Focusable="False">
+                                Theme="{DynamicResource ScrollBarRepeatButton}">
-                                <Path Data="M 0 0 L 4 4 L 0 8 Z" />
+                                <PathIcon
+                                    Width="10"
+                                    Height="10"
+                                    Data="{DynamicResource ScrollBarRightGlyph}" />
                             </RepeatButton>
                         </Grid>
                     </Border>
@@ -95,11 +118,16 @@
                                 Name="PART_LineUpButton"
                                 Grid.Row="0"
                                 MinHeight="{DynamicResource ScrollBarThickness}"
-                                HorizontalAlignment="Center"
+                                Padding="0,4"
-                                Classes="repeat"
+                                VerticalAlignment="Center"
-                                CornerRadius="0"
+                                HorizontalContentAlignment="Center"
-                                Focusable="False">
+                                VerticalContentAlignment="Center"
-                                <Path Data="M 0 4 L 8 4 L 4 0 Z" />
+                                Focusable="False"
+                                Theme="{DynamicResource ScrollBarRepeatButton}">
+                                <PathIcon
+                                    Width="10"
+                                    Height="10"
+                                    Data="{DynamicResource ScrollBarUpGlyph}" />
                             </RepeatButton>
                             <Track
                                 Grid.Row="1"
@@ -116,9 +144,9 @@
                                         MinHeight="0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
-                                        Classes="repeattrack"
                                         CornerRadius="0"
-                                        Focusable="False" />
+                                        Focusable="False"
+                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
                                 </Track.DecreaseButton>
                                 <Track.IncreaseButton>
                                     <RepeatButton
@@ -126,9 +154,9 @@
                                         MinHeight="0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
-                                        Classes="repeattrack"
                                         CornerRadius="0"
-                                        Focusable="False" />
+                                        Focusable="False"
+                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
                                 </Track.IncreaseButton>
                                 <Thumb Name="thumb" />
                             </Track>
@@ -136,11 +164,15 @@
                                 Name="PART_LineDownButton"
                                 Grid.Row="2"
                                 MinHeight="{DynamicResource ScrollBarThickness}"
-                                HorizontalAlignment="Center"
+                                Padding="0,4"
-                                Classes="repeat"
+                                HorizontalContentAlignment="Center"
-                                CornerRadius="0"
+                                VerticalContentAlignment="Center"
-                                Focusable="False">
+                                Focusable="False"
-                                <Path Data="M 0 0 L 4 4 L 8 0 Z" />
+                                Theme="{DynamicResource ScrollBarRepeatButton}">
+                                <PathIcon
+                                    Width="10"
+                                    Height="10"
+                                    Data="{DynamicResource ScrollBarDownGlyph}" />
                             </RepeatButton>
                         </Grid>
                     </Border>
@@ -161,10 +193,7 @@
             </Setter>
         </Style>
         <Style Selector="^ /template/ Thumb#thumb:pointerover">
-            <Setter Property="Background" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ScrollBarThumbPointeroverForeground}" />
-        </Style>
-        <Style Selector="^ /template/ Thumb#thumb:pressed">
-            <Setter Property="Background" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
         </Style>
         <Style Selector="^:horizontal /template/ Thumb#thumb">
             <Setter Property="MinWidth" Value="{DynamicResource ScrollBarThickness}" />
@@ -174,30 +203,14 @@
             <Setter Property="MinHeight" Value="{DynamicResource ScrollBarThickness}" />
             <Setter Property="Width" Value="{DynamicResource ScrollBarThumbThickness}" />
         </Style>
-        <Style Selector="^ /template/ RepeatButton.repeat">
+        <Style Selector="^ /template/ RepeatButton &gt; PathIcon">
-            <Setter Property="Padding" Value="2" />
+            <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
-            <Setter Property="BorderThickness" Value="0" />
         </Style>
-        <Style Selector="^ /template/ RepeatButton.repeattrack">
+        <Style Selector="^ /template/ RepeatButton:pointerover &gt; PathIcon">
-            <Setter Property="Background" Value="Transparent" />
+            <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonPointeroverForeground}" />
-            <Setter Property="Template">
-                <ControlTemplate TargetType="RepeatButton">
-                    <Border Background="{TemplateBinding Background}" />
-                </ControlTemplate>
-            </Setter>
-            <Style Selector="^:pointerover">
-                <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
-            </Style>
-            <Style Selector="^:pressed">
-                <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
-            </Style>
         </Style>
-
+        <Style Selector="^ /template/ RepeatButton:pressed &gt; PathIcon">
-        <Style Selector="^ /template/ RepeatButton &gt; Path">
+            <Setter Property="RenderTransform" Value="scale(0.92)" />
-            <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
-        </Style>
-        <Style Selector="^ /template/ RepeatButton:pointerover &gt; Path">
-            <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonPointerOverForeground}" />
         </Style>
 
     </ControlTheme>
@@ -208,50 +221,34 @@
                 <Grid ColumnDefinitions="*,Auto" RowDefinitions="*,Auto">
                     <ScrollContentPresenter
                         Name="PART_ContentPresenter"
+                        Grid.RowSpan="2"
+                        Grid.ColumnSpan="2"
                         Padding="{TemplateBinding Padding}"
                         Background="{TemplateBinding Background}"
-                        CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
+                        HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
-                        CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
+                        HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
-                        Content="{TemplateBinding Content}"
+                        ScrollViewer.IsScrollInertiaEnabled="{TemplateBinding IsScrollInertiaEnabled}"
-                        Extent="{TemplateBinding Extent,
+                        VerticalSnapPointsAlignment="{TemplateBinding VerticalSnapPointsAlignment}"
-                                                 Mode=TwoWay}"
+                        VerticalSnapPointsType="{TemplateBinding VerticalSnapPointsType}">
-                        IsScrollChainingEnabled="{TemplateBinding IsScrollChainingEnabled}"
-                        Viewport="{TemplateBinding Viewport,
-                                                   Mode=TwoWay}"
-                        Offset="{TemplateBinding Offset,
-                                                 Mode=TwoWay}">
                         <ScrollContentPresenter.GestureRecognizers>
-                            <ScrollGestureRecognizer CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}" CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" />
+                            <ScrollGestureRecognizer
+                                CanHorizontallyScroll="{Binding CanHorizontallyScroll, ElementName=PART_ContentPresenter}"
+                                CanVerticallyScroll="{Binding CanVerticallyScroll, ElementName=PART_ContentPresenter}"
+                                IsScrollInertiaEnabled="{Binding (ScrollViewer.IsScrollInertiaEnabled), ElementName=PART_ContentPresenter}" />
                         </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"
+                        Orientation="Horizontal" />
-                        SmallChange="{Binding SmallChange.Width, RelativeSource={RelativeSource TemplatedParent}}"
-                        ViewportSize="{TemplateBinding HorizontalScrollBarViewportSize}"
-                        Visibility="{TemplateBinding HorizontalScrollBarVisibility}"
-                        Value="{TemplateBinding HorizontalScrollBarValue,
-                                                Mode=TwoWay}" />
                     <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"
+                        Orientation="Vertical" />
-                        SmallChange="{Binding SmallChange.Height, RelativeSource={RelativeSource TemplatedParent}}"
-                        ViewportSize="{TemplateBinding VerticalScrollBarViewportSize}"
-                        Visibility="{TemplateBinding VerticalScrollBarVisibility}"
-                        Value="{TemplateBinding VerticalScrollBarValue,
-                                                Mode=TwoWay}" />
                     <Panel
                         Grid.Row="1"
                         Grid.Column="1"
@@ -260,15 +257,55 @@
             </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}"
+                        ScrollViewer.IsScrollInertiaEnabled="{TemplateBinding IsScrollInertiaEnabled}"
+                        VerticalSnapPointsAlignment="{TemplateBinding VerticalSnapPointsAlignment}"
+                        VerticalSnapPointsType="{TemplateBinding VerticalSnapPointsType}">
+                        <ScrollContentPresenter.GestureRecognizers>
+                            <ScrollGestureRecognizer
+                                CanHorizontallyScroll="{Binding CanHorizontallyScroll, ElementName=PART_ContentPresenter}"
+                                CanVerticallyScroll="{Binding CanVerticallyScroll, ElementName=PART_ContentPresenter}"
+                                IsScrollInertiaEnabled="{Binding (ScrollViewer.IsScrollInertiaEnabled), ElementName=PART_ContentPresenter}" />
+                        </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 +318,10 @@
                         DockPanel.Dock="Top">
                         <RepeatButton.IsVisible>
                             <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}" ConverterParameter="0">
-                                <Binding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Viewport.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 +333,15 @@
                         DockPanel.Dock="Bottom">
                         <RepeatButton.IsVisible>
                             <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}" ConverterParameter="100">
-                                <Binding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Viewport.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
+                    <ScrollContentPresenter Name="PART_ContentPresenter" Margin="{TemplateBinding Padding}" />
-                        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}" />
                 </DockPanel>
             </ControlTemplate>
         </Setter>
@@ -324,7 +350,7 @@
         </Style>
 
         <Style Selector="^ /template/ RepeatButton:pointerover &gt; Path">
-            <Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonPointerOverForeground}" />
+            <Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonPointeroverForeground}" />
         </Style>
     </ControlTheme>
 </ResourceDictionary>