Merge pull request #141 from irihitech/140-menu-open

Various fixes after preview 6

README.md

@@ -1,14 +1,73 @@
 # Semi.Avalonia
 
+[![Semi Avalonia](https://img.shields.io/nuget/v/Semi.Avalonia.svg?color=red&style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia/)
+[![Semi Avalonia](https://img.shields.io/nuget/dt/Semi.Avalonia.svg?style=flat-square)](https://www.nuget.org/packages/Semi.Avalonia/)
+
 Avalonia Theme inspired by Semi Design
 
 > Semi.Avalonia is still in very early stage. Please don't use in production.
-> 
-> Dark theme is not designed at all. Please don't use that.
 
-![Cover](./docs/cover.png)
+# How to Use
 
-## Requirement
+## Installation
+```bash
+dotnet add package Semi.Avalonia --version 0.1.0-preview6
+```
+Include Semi Design Styles in application:
 
-Avalonia V11
+```xaml
+<Application.Styles>
+    <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
+</Application.Styles>
+```
 
+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-preview6
+dotnet add package Semi.Avalonia.DataGrid --version 0.1.0-preview6
+```
+```xaml
+<Application.Styles>
+    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+</Application.Styles>
+```
+
+## Demo
+
+You can always download demo executable to play around with Semi Avalonia Themes.
+https://github.com/irihitech/Semi.Avalonia/releases
+
+## Version compatibility
+
+| Semi Design Version | Avalonia Version |
+|:--------------------|:-----------------|
+| 0.1.0-preview3      | 11.0-preview4    |
+| 0.1.0-preview5.x    | 11.0-preview5    |
+| 0.1.0-preview6.x    | 11.0-preview6    |
+
+## 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
+![Light](./docs/Light.png)
+
+Dark Mode
+![Dark](./docs/Dark.png)

Semi.Avalonia.sln

@@ -9,6 +9,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Files", "Solution
 	ProjectSection(SolutionItems) = preProject
 		demo\Directory.Build.props = demo\Directory.Build.props
 		demo\global.json = demo\global.json
+		src\Package.props = src\Package.props
 	EndProjectSection
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Demo", "Demo", "{43091528-9509-43CB-A003-9C5C11E96DD6}"
@@ -19,6 +20,12 @@ 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("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.DataGrid", "src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj", "{8A90C292-8761-4F70-8E1F-EFC097FEADB3}"
+EndProject
+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
 		Debug|Any CPU = Debug|Any CPU
@@ -41,6 +48,19 @@ Global
 		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0}.Release|Any CPU.Build.0 = Release|Any CPU
+		{8A90C292-8761-4F70-8E1F-EFC097FEADB3}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{8A90C292-8761-4F70-8E1F-EFC097FEADB3}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{8A90C292-8761-4F70-8E1F-EFC097FEADB3}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{8A90C292-8761-4F70-8E1F-EFC097FEADB3}.Release|Any CPU.Build.0 = Release|Any CPU
+		{0B64C2F2-FDCD-48E4-AB9D-7CCC63B006CA}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{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
@@ -49,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/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,23 @@
+<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>
+
+    <ItemGroup>
+      <PackageReference Include="Avalonia.Android" Version="11.0.0-preview6" />
+    </ItemGroup>
+
+    <ItemGroup>
+      <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
+    </ItemGroup>
+    
+</Project>

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

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

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

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

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

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

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

@@ -2,8 +2,12 @@
     x:Class="Semi.Avalonia.Demo.Desktop.App"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Semi.Avalonia.Demo.Desktop">
+    xmlns:local="using:Semi.Avalonia.Demo.Desktop"
+    RequestedThemeVariant="Light">
     <Application.Styles>
-        <StyleInclude Source="avares://Semi.Avalonia/Themes/LightTheme.axaml" />
+        <!--<StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />-->
+        <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.Desktop/App.axaml.cs

@@ -1,6 +1,7 @@
 using Avalonia;
 using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Markup.Xaml;
+using Avalonia.Styling;
 using Semi.Avalonia.Demo.Views;
 
 namespace Semi.Avalonia.Demo.Desktop;

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

@@ -1,5 +1,6 @@
 using System;
 using Avalonia;
+using Avalonia.Dialogs;
 using Avalonia.Media;
 
 namespace Semi.Avalonia.Demo.Desktop;
@@ -26,7 +27,8 @@ class Program
     // Avalonia configuration, don't remove; also used by visual designer.
     public static AppBuilder BuildAvaloniaApp()
         => AppBuilder.Configure<App>()
+            .UseManagedSystemDialogs()
             .UsePlatformDetect()
-            .With(new Win32PlatformOptions(){ UseCompositor = false})
+            .With(new Win32PlatformOptions())
             .LogToTrace();
 }

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

@@ -4,16 +4,25 @@
         <TargetFramework>net7.0</TargetFramework>
         <Nullable>enable</Nullable>
         <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
+        <!-- Uncomment below to enable Native AOT compilation-->
+        <!--
+        <PublishAot>true</PublishAot>
+        <IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>
+        -->
     </PropertyGroup>
 
     <PropertyGroup>
         <ApplicationManifest>app.manifest</ApplicationManifest>
     </PropertyGroup>
+    
+    <ItemGroup>
+        <RdXmlFile Include="rd.xml"/>
+    </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia.Desktop" Version="11.0.0-preview6" />
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.0-preview6" />
     </ItemGroup>
 
     <ItemGroup>

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

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

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

@@ -4,7 +4,7 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:Semi.Avalonia.Demo.Web">
     <Application.Styles>
-        <FluentTheme Mode="Light" />
+        <FluentTheme />
         <StyleInclude Source="avares://Semi.Avalonia/Themes/LightTheme.axaml" />
     </Application.Styles>
 </Application>

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

@@ -1,25 +1,17 @@
 using System.Runtime.Versioning;
 using Avalonia;
 using Avalonia.Media;
-using Avalonia.Web;
 using Semi.Avalonia.Demo.Web;
+using Avalonia.Browser;
 
 [assembly: SupportedOSPlatform("browser")]
 
 internal partial class Program
 {
-    private static void Main(string[] args) => BuildAvaloniaApp()
-        .With(new FontManagerOptions
-        {
-            FontFallbacks = new[]
-            {
-                new FontFallback
-                {
-                    FontFamily = new FontFamily("avares://Semi.Avalonia.Demo.Web/Assets/SourceHanSansCN-Regular.otf#Source Han Sans CN")
-                }
-            }
-        })
-        .SetupBrowserApp("out");
+    private static void Main(string[] args)
+    {
+        BuildAvaloniaApp(); //.SetupBrowserApp("out");
+    }
 
     public static AppBuilder BuildAvaloniaApp()
         => AppBuilder.Configure<App>();

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

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

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

@@ -0,0 +1,112 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    x:CompileBindings="True"
+    x:DataType="viewModels:ColorItemViewModel">
+    <PathGeometry x:Key="CopyIcon">M5 7C3.89543 7 3 7.89543 3 9V19C3 20.1046 3.89543 21 5 21H15C16.1046 21 17 20.1046 17 19V9C17 7.89543 16.1046 7 15 7H5Z,M7 4C7 2.89543 7.89543 2 9 2H20C21.1046 2 22 2.89543 22 4V15C22 16.1046 21.1046 17 20 17H19V8C19 6 18 5 16 5H7V4Z</PathGeometry>
+    <ControlTheme x:Key="{x:Type controls:ColorDetailControl}" TargetType="controls:ColorDetailControl">
+        <!--  Add Resources Here  -->
+        <Setter Property="controls:ColorDetailControl.Template">
+            <ControlTemplate TargetType="controls:ColorDetailControl">
+                <StackPanel>
+                    <TextBlock
+                        Margin="0,0,0,8"
+                        Classes="H5"
+                        Text="{TemplateBinding ResourceName}"
+                        Theme="{DynamicResource TitleTextBlock}" />
+                    <Border
+                        Height="100"
+                        HorizontalAlignment="Stretch"
+                        Background="{TemplateBinding Background}"
+                        CornerRadius="6" />
+                    <Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *, *, *, *, *">
+                        <!--  Row 0-1 ResourceKey  -->
+                        <TextBlock
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
+                            Margin="4,8,0,0"
+                            VerticalAlignment="Center"
+                            Classes="Tertiary"
+                            Text="ResourceKey" />
+                        <SelectableTextBlock
+                            Grid.Row="1"
+                            Grid.Column="0"
+                            VerticalAlignment="Center"
+                            Text="{TemplateBinding ResourceKey}" />
+                        <Button
+                            Grid.Row="1"
+                            Grid.Column="1"
+                            Classes="Tertiary"
+                            Command="{Binding $parent[controls:ColorDetailControl].Copy}"
+                            CommandParameter="{x:Static controls:ColorDetailControl.KEY_ResourceKey}"
+                            Theme="{DynamicResource BorderlessButton}">
+                            <PathIcon
+                                Width="12"
+                                Height="12"
+                                Data="{StaticResource CopyIcon}"
+                                Foreground="{Binding $parent[Button].Foreground}" />
+                        </Button>
+
+                        <!--  Row 2-3 HEX  -->
+                        <TextBlock
+                            Grid.Row="2"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
+                            Margin="4,8,0,0"
+                            VerticalAlignment="Center"
+                            Classes="Tertiary"
+                            Text="ARGB" />
+                        <SelectableTextBlock
+                            Grid.Row="3"
+                            Grid.Column="0"
+                            VerticalAlignment="Center"
+                            Text="{TemplateBinding Hex}" />
+                        <Button
+                            Grid.Row="3"
+                            Grid.Column="1"
+                            Classes="Tertiary"
+                            Command="{Binding $parent[controls:ColorDetailControl].Copy}"
+                            CommandParameter="{x:Static controls:ColorDetailControl.KEY_Hex}"
+                            Theme="{DynamicResource BorderlessButton}">
+                            <PathIcon
+                                Width="12"
+                                Height="12"
+                                Data="{StaticResource CopyIcon}"
+                                Foreground="{Binding $parent[Button].Foreground}" />
+                        </Button>
+
+                        <!--  Row 4-5 Opacity  -->
+                        <TextBlock
+                            Grid.Row="4"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
+                            Margin="4,8,0,0"
+                            VerticalAlignment="Center"
+                            Classes="Tertiary"
+                            Text="Opacity" />
+                        <SelectableTextBlock
+                            Grid.Row="5"
+                            Grid.Column="0"
+                            VerticalAlignment="Center"
+                            Text="{TemplateBinding OpacityNumber}" />
+                        <Button
+                            Grid.Row="5"
+                            Grid.Column="1"
+                            Classes="Tertiary"
+                            Command="{Binding $parent[controls:ColorDetailControl].Copy}"
+                            CommandParameter="{x:Static controls:ColorDetailControl.KEY_Opacity}"
+                            Theme="{DynamicResource BorderlessButton}">
+                            <PathIcon
+                                Width="12"
+                                Height="12"
+                                Data="{StaticResource CopyIcon}"
+                                Foreground="{Binding $parent[Button].Foreground}" />
+                        </Button>
+                    </Grid>
+                </StackPanel>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

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

@@ -0,0 +1,91 @@
+using System.Globalization;
+using Avalonia;
+using Avalonia.Controls.Primitives;
+using Avalonia.Input.Platform;
+using Avalonia.Media;
+using Avalonia.Media.Immutable;
+
+namespace Semi.Avalonia.Demo.Controls;
+
+public class ColorDetailControl: TemplatedControl
+{
+    public const string KEY_ResourceKey = "ResourceKey";
+    public const string KEY_Hex = "Hex";
+    public const string KEY_Opacity = "Opacity";
+    
+    public static readonly StyledProperty<string?> ResourceKeyProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
+        nameof(ResourceKey));
+    public string? ResourceKey
+    {
+        get => GetValue(ResourceKeyProperty);
+        set => SetValue(ResourceKeyProperty, value);
+    }
+
+    public static readonly StyledProperty<string?> ResourceNameProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
+        nameof(ResourceName));
+
+    public string? ResourceName
+    {
+        get => GetValue(ResourceNameProperty);
+        set => SetValue(ResourceNameProperty, value);
+    }
+
+    public static readonly DirectProperty<ColorDetailControl, string?> HexProperty = AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(
+        nameof(Hex), o => o.Hex);
+    private string? _hex;
+    public string? Hex
+    {
+        get => _hex;
+        private set => SetAndRaise(HexProperty, ref _hex, value);
+    }
+    
+    public static readonly DirectProperty<ColorDetailControl, string?> OpacityNumberProperty = AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(
+        nameof(OpacityNumber), o => o.OpacityNumber);
+    private string? _opacityNumber;
+    public string? OpacityNumber
+    {
+        get => _opacityNumber;
+        private set => SetAndRaise(OpacityNumberProperty, ref _opacityNumber, value);
+    }
+    
+    
+    static ColorDetailControl()
+    {
+        BackgroundProperty.Changed.AddClassHandler<ColorDetailControl>((o, e) => o.OnBackgroundChanged(e));
+    }
+
+    private void OnBackgroundChanged(AvaloniaPropertyChangedEventArgs args)
+    {
+        var color = args.GetNewValue<IBrush>();
+        if (color is ISolidColorBrush b)
+        {
+            Hex = b.Color.ToString().ToUpperInvariant();
+            OpacityNumber = b.Opacity.ToString(CultureInfo.InvariantCulture);
+        }
+    }
+
+    public async void Copy(object o)
+    {
+        string? text = null;
+        if (o is string s)
+        {
+            switch (s)
+            {
+                case KEY_ResourceKey: text = ResourceKey;
+                    break;
+                case KEY_Hex: text = Hex;
+                    break;
+                case KEY_Opacity: text = OpacityNumber;
+                    break;
+                default: text = string.Empty; break;
+            }
+        }
+
+        if (Application.Current is { Clipboard: { } c })
+        {
+            await c.SetTextAsync(text??string.Empty);
+        }
+        
+    }
+    
+}

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

@@ -0,0 +1,48 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Semi.Avalonia.Demo.Controls"
+    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    x:CompileBindings="True"
+    x:DataType="viewModels:ColorItemViewModel">
+    <Design.PreviewWith>
+        <controls:ColorItemControl />
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="{x:Type controls:ColorItemControl}" TargetType="controls:ColorItemControl">
+        <Setter Property="controls:ColorItemControl.Width" Value="120" />
+        <Setter Property="controls:ColorItemControl.Height" Value="60" />
+        <Setter Property="controls:ColorItemControl.Cursor" Value="Hand" />
+        <Setter Property="controls:ColorItemControl.Template">
+            <ControlTemplate TargetType="controls:ColorItemControl">
+                <!--    -->
+                <Border
+                    Width="{TemplateBinding Width}"
+                    Height="{TemplateBinding Height}"
+                    Background="{TemplateBinding Background}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Panel>
+                        <TextBlock
+                            Padding="8"
+                            FontSize="12"
+                            FontWeight="600"
+                            Foreground="{TemplateBinding Foreground}"
+                            Text="{TemplateBinding ColorName}" />
+                        <TextBlock
+                            Name="PART_HexTextBlock"
+                            Padding="8"
+                            VerticalAlignment="Bottom"
+                            FontSize="10"
+                            Foreground="{TemplateBinding Foreground}"
+                            IsVisible="False"
+                            Opacity="0.8"
+                            Text="{TemplateBinding Hex}" />
+                    </Panel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover /template/ TextBlock#PART_HexTextBlock">
+            <Setter Property="TextBlock.IsVisible" Value="True" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

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

@@ -0,0 +1,39 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Input;
+using CommunityToolkit.Mvvm.Messaging;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Controls;
+
+public class ColorItemControl : TemplatedControl
+{
+    public static readonly StyledProperty<string?> ColorNameProperty = AvaloniaProperty.Register<ColorItemControl, string?>(
+        nameof(ColorName));
+
+    public string? ColorName
+    {
+        get => GetValue(ColorNameProperty);
+        set => SetValue(ColorNameProperty, value);
+    }
+
+    public static readonly StyledProperty<string?> HexProperty = AvaloniaProperty.Register<ColorItemControl, string?>(
+        nameof(Hex));
+
+    public string? Hex
+    {
+        get => GetValue(HexProperty);
+        set => SetValue(HexProperty, value);
+    }
+    
+    protected override void OnPointerPressed(PointerPressedEventArgs e)
+    {
+        base.OnPointerPressed(e);
+        if (this.DataContext is ColorItemViewModel v)
+        {
+            WeakReferenceMessenger.Default.Send(v);
+        }
+        
+    }
+}

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

@@ -0,0 +1,142 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    x:CompileBindings="True"
+    x:DataType="viewModels:FunctionalColorGroupViewModel">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="{x:Type controls:FunctionalColorGroupControl}" TargetType="controls:FunctionalColorGroupControl">
+        <!--  Add Resources Here  -->
+        <Setter Property="controls:FunctionalColorGroupControl.Template">
+            <ControlTemplate x:DataType="viewModels:FunctionalColorGroupViewModel" TargetType="controls:FunctionalColorGroupControl">
+                <Grid RowDefinitions="Auto, *">
+                    <TextBlock
+                        Grid.Row="0"
+                        Margin="0,16,0,0"
+                        Classes="H3"
+                        Text="{TemplateBinding Title}"
+                        Theme="{DynamicResource TitleTextBlock}" />
+                    <TabControl Grid.Row="1">
+                        <TabItem Header="Light">
+                            <DataGrid IsReadOnly="True" Items="{TemplateBinding LightColors}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="70" Header="Color">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate>
+                                                <controls:ColorItemControl
+                                                    Width="40"
+                                                    Height="20"
+                                                    x:DataType="viewModels:ColorItemViewModel"
+                                                    Background="{Binding Brush}"
+                                                    CornerRadius="3" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate>
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    x:DataType="viewModels:ColorItemViewModel"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ColorItemViewModel"
+                                        Binding="{Binding ColorDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Name" />
+                                    <DataGridTemplateColumn Width="100" Header="Hex">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate>
+                                                <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>
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    HorizontalAlignment="Right"
+                                                    VerticalAlignment="Center"
+                                                    x:DataType="viewModels:ColorItemViewModel"
+                                                    Text="{Binding Brush.Opacity}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                        <TabItem Header="Dark">
+                            <DataGrid IsReadOnly="True" Items="{TemplateBinding DarkColors}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="70" Header="Color">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate>
+                                                <controls:ColorItemControl
+                                                    Width="40"
+                                                    Height="20"
+                                                    x:DataType="viewModels:ColorItemViewModel"
+                                                    Background="{Binding Brush}"
+                                                    CornerRadius="3" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate>
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    x:DataType="viewModels:ColorItemViewModel"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ColorItemViewModel"
+                                        Binding="{Binding ColorDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Name" />
+                                    <DataGridTemplateColumn Width="100" Header="Hex">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate>
+                                                <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>
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    HorizontalAlignment="Right"
+                                                    VerticalAlignment="Center"
+                                                    x:DataType="viewModels:ColorItemViewModel"
+                                                    Text="{Binding Brush.Opacity}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                    </TabControl>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

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

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

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

@@ -7,20 +7,22 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     d:DesignHeight="450"
     d:DesignWidth="800"
+    x:CompileBindings="False"
+    x:DataType="local:AutoCompleteBoxDemoViewModel"
     mc:Ignorable="d">
     <Design.DataContext>
         <local:AutoCompleteBoxDemoViewModel />
     </Design.DataContext>
-    <StackPanel
-        Margin="20"
-        HorizontalAlignment="Left"
-        Spacing="20">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <StackPanel.Styles>
             <Style Selector="AutoCompleteBox">
                 <Setter Property="Width" Value="300" />
             </Style>
         </StackPanel.Styles>
-        <AutoCompleteBox Items="{Binding States}" ValueMemberBinding="{Binding Name, x:DataType=local:StateData}">
+        <AutoCompleteBox
+            Items="{Binding States}"
+            ValueMemberBinding="{Binding Name}"
+            Watermark="Please select a State">
             <AutoCompleteBox.ItemTemplate>
                 <DataTemplate DataType="local:StateData">
                     <TextBlock Text="{Binding Name}" />
@@ -28,9 +30,40 @@
             </AutoCompleteBox.ItemTemplate>
         </AutoCompleteBox>
         <AutoCompleteBox
+            Classes="Large"
             Items="{Binding States}"
-            Theme="{StaticResource BorderlessAutoCompleteBox}"
-            ValueMemberBinding="{Binding Name, x:DataType=local:StateData}">
+            ValueMemberBinding="{ReflectionBinding Name}">
+            <AutoCompleteBox.ItemTemplate>
+                <DataTemplate DataType="local:StateData">
+                    <TextBlock Text="{Binding Name}" />
+                </DataTemplate>
+            </AutoCompleteBox.ItemTemplate>
+        </AutoCompleteBox>
+        <AutoCompleteBox
+            Classes="Small"
+            Items="{Binding States}"
+            ValueMemberBinding="{ReflectionBinding Name}">
+            <AutoCompleteBox.ItemTemplate>
+                <DataTemplate DataType="local:StateData">
+                    <TextBlock Text="{Binding Name}" />
+                </DataTemplate>
+            </AutoCompleteBox.ItemTemplate>
+        </AutoCompleteBox>
+        <AutoCompleteBox
+            Classes="Bordered"
+            Items="{Binding States}"
+            ValueMemberBinding="{ReflectionBinding Name}">
+            <AutoCompleteBox.ItemTemplate>
+                <DataTemplate DataType="local:StateData">
+                    <TextBlock Text="{Binding Name}" />
+                </DataTemplate>
+            </AutoCompleteBox.ItemTemplate>
+        </AutoCompleteBox>
+        <AutoCompleteBox
+            IsEnabled="False"
+            Items="{Binding States}"
+            ValueMemberBinding="{ReflectionBinding Name}"
+            Watermark="Disabled">
             <AutoCompleteBox.ItemTemplate>
                 <DataTemplate DataType="local:StateData">
                     <TextBlock Text="{Binding Name}" />

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

@@ -1,9 +1,13 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.BorderDemo" 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 Margin="20" Spacing="20">
+    x:Class="Semi.Avalonia.Demo.Pages.BorderDemo"
+    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 Spacing="20">
         <Border Theme="{StaticResource CardBorder}">
             <TextBlock>Card</TextBlock>
         </Border>

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

@@ -7,10 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
-        Margin="20"
-        HorizontalAlignment="Left"
-        Spacing="20">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <TextBlock>Light (Default)</TextBlock>
         <StackPanel Orientation="Horizontal" Spacing="20">
             <Button Classes="Primary">Primary</Button>
@@ -49,7 +46,7 @@
             </Button>
         </StackPanel>
         <TextBlock>DropdownButton</TextBlock>
-        <StackPanel Orientation="Horizontal">
+        <StackPanel Orientation="Horizontal" Spacing="8">
             <DropDownButton Content="Submit">
                 <DropDownButton.Flyout>
                     <MenuFlyout Placement="BottomEdgeAlignedRight">
@@ -75,7 +72,7 @@
                 </DropDownButton.Flyout>
             </DropDownButton>
         </StackPanel>
-        <StackPanel Orientation="Horizontal">
+        <StackPanel Orientation="Horizontal" Spacing="8">
             <SplitButton Content="Submit">
                 <SplitButton.Flyout>
                     <MenuFlyout Placement="BottomEdgeAlignedRight">
@@ -93,7 +90,7 @@
                 Content="Submit"
                 IsEnabled="False" />
         </StackPanel>
-        <StackPanel Orientation="Horizontal">
+        <StackPanel Orientation="Horizontal" Spacing="8">
             <ToggleSplitButton Content="Submit">
                 <ToggleSplitButton.Flyout>
                     <MenuFlyout Placement="BottomEdgeAlignedRight">

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

@@ -7,10 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
-        Margin="20"
-        HorizontalAlignment="Left"
-        Spacing="20">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <ButtonSpinner
             Height="30"
             AllowSpin="{Binding #allowSpinCheck.IsChecked}"

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

@@ -7,8 +7,11 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="20" Spacing="20">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <CalendarDatePicker />
+        <CalendarDatePicker Width="500" />
+        <CalendarDatePicker Classes="Large" />
+        <CalendarDatePicker Classes="Small" />
         <CalendarDatePicker
             Name="DatePicker2"
             Margin="0,0,0,8"
@@ -21,5 +24,7 @@
         <CalendarDatePicker Margin="0,0,0,8" Watermark="Watermark" />
 
         <CalendarDatePicker IsEnabled="False" />
+        <CalendarDatePicker Classes="Bordered" />
+        <CalendarDatePicker Classes="Bordered" IsEnabled="False" />
     </StackPanel>
 </UserControl>

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

@@ -10,9 +10,4 @@ public partial class CalendarDatePickerDemo : UserControl
     {
         InitializeComponent();
     }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }

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

@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="20" Spacing="20">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <Calendar />
         <Calendar SelectionMode="SingleRange" />
     </StackPanel>

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

@@ -7,31 +7,49 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
+    <UserControl.Styles>
+        <Style Selector="Border">
+            <Setter Property="Height" Value="200" />
+        </Style>
+        <Style Selector="TextBlock">
+            <Setter Property="HorizontalAlignment" Value="Center" />
+            <Setter Property="VerticalAlignment" Value="Center" />
+        </Style>
+    </UserControl.Styles>
     <StackPanel Spacing="20">
-        <TextBlock Classes="Strong" Text="This is still WIP" />
-        <Grid
-            HorizontalAlignment="Stretch"
-            VerticalAlignment="Top"
-            ColumnDefinitions="Auto, *, Auto">
-            <RepeatButton
-                Name="Previous"
-                Grid.Column="0"
-                Content="Previous" />
-            <Carousel Name="carousel" Grid.Column="1">
-                <Carousel.PageTransition>
-                    <PageSlide Orientation="Horizontal" Duration="0.25" />
-                </Carousel.PageTransition>
+        <Carousel Theme="{DynamicResource FullCarousel}">
+            <Carousel.PageTransition>
+                <PageSlide Orientation="Horizontal" Duration="0.25" />
+            </Carousel.PageTransition>
+            <Border Background="#EAF5FF">
                 <TextBlock Text="Text 1" />
+            </Border>
+            <Border Background="#F9F9F9">
                 <TextBlock Text="Text 2" />
+            </Border>
+            <Border Background="#FFF8EA">
                 <TextBlock Text="Text 3" />
+            </Border>
+            <Border Background="#FEF2ED">
                 <TextBlock Text="Text 4" />
-            </Carousel>
-            <RepeatButton
-                Name="Next"
-                Grid.Column="2"
-                Content="Next" />
-        </Grid>
-
-        <TextBlock Text="{Binding #carousel.SelectedIndex}" />
+            </Border>
+        </Carousel>
+        <Carousel Classes="Line" Theme="{DynamicResource FullCarousel}">
+            <Carousel.PageTransition>
+                <PageSlide Orientation="Horizontal" Duration="0.25" />
+            </Carousel.PageTransition>
+            <Border Background="#EAF5FF">
+                <TextBlock Text="Text 1" />
+            </Border>
+            <Border Background="#F9F9F9">
+                <TextBlock Text="Text 2" />
+            </Border>
+            <Border Background="#FFF8EA">
+                <TextBlock Text="Text 3" />
+            </Border>
+            <Border Background="#FEF2ED">
+                <TextBlock Text="Text 4" />
+            </Border>
+        </Carousel>
     </StackPanel>
 </UserControl>

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

@@ -10,17 +10,5 @@ public partial class CarouselDemo : UserControl
     public CarouselDemo()
     {
         InitializeComponent();
-        Previous.Click += OnPreviousClick;
-        Next.Click += OnNextClick;
-    }
-
-    private void OnPreviousClick(object sender, RoutedEventArgs args)
-    {
-        carousel.Previous();
-    }
-    
-    private void OnNextClick(object sender, RoutedEventArgs args)
-    {
-        carousel.Next();
     }
 }

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

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

@@ -0,0 +1,37 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Avalonia.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel Spacing="20">
+        <StackPanel
+            VerticalAlignment="Top"
+            Orientation="Horizontal"
+            Spacing="20">
+            <ColorView ColorSpectrumShape="Ring" />
+            <ColorView ColorSpectrumShape="Box" />
+            <ColorView>
+                <ColorView.Palette>
+                    <controls:MaterialColorPalette />
+                </ColorView.Palette>
+            </ColorView>
+        </StackPanel>
+        <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
+            <ColorPicker ColorSpectrumShape="Ring">
+                <ColorPicker.Palette>
+                    <controls:FlatHalfColorPalette />
+                </ColorPicker.Palette>
+            </ColorPicker>
+            <ColorPicker ColorSpectrumShape="Box">
+                <ColorPicker.Palette>
+                    <controls:MaterialColorPalette />
+                </ColorPicker.Palette>
+            </ColorPicker>
+        </StackPanel>
+    </StackPanel>
+</UserControl>

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

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

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

@@ -7,21 +7,47 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="20" Spacing="20">
+    <StackPanel Spacing="20">
         <ComboBox Width="150">
-            <TextBlock>AAA</TextBlock>
-            <TextBlock>BBB</TextBlock>
-            <TextBlock>CCC</TextBlock>
+            <ComboBoxItem>AAA</ComboBoxItem>
+            <ComboBoxItem>BBB</ComboBoxItem>
+            <ComboBoxItem>CCC</ComboBoxItem>
         </ComboBox>
         <ComboBox Width="150" PlaceholderText="Please Select">
-            <TextBlock>AAA</TextBlock>
-            <TextBlock>BBB</TextBlock>
-            <TextBlock>CCC</TextBlock>
+            <ComboBoxItem>AAA</ComboBoxItem>
+            <ComboBoxItem>BBB</ComboBoxItem>
+            <ComboBoxItem>CCC</ComboBoxItem>
         </ComboBox>
         <ComboBox Width="150" IsEnabled="False">
-            <TextBlock>AAA</TextBlock>
-            <TextBlock>BBB</TextBlock>
-            <TextBlock>CCC</TextBlock>
+            <ComboBoxItem>AAA</ComboBoxItem>
+            <ComboBoxItem>BBB</ComboBoxItem>
+            <ComboBoxItem>CCC</ComboBoxItem>
+        </ComboBox>
+        <ComboBox
+            Width="150"
+            Classes="Large"
+            IsEnabled="False">
+            <ComboBoxItem>AAA</ComboBoxItem>
+            <ComboBoxItem>BBB</ComboBoxItem>
+            <ComboBoxItem>CCC</ComboBoxItem>
+        </ComboBox>
+        <ComboBox Width="150" Classes="Small">
+            <ComboBoxItem>AAA</ComboBoxItem>
+            <ComboBoxItem>BBB</ComboBoxItem>
+            <ComboBoxItem>CCC</ComboBoxItem>
+        </ComboBox>
+        <ComboBox Width="150" Classes="Bordered">
+            <ComboBoxItem>AAA</ComboBoxItem>
+            <ComboBoxItem>BBB</ComboBoxItem>
+            <ComboBoxItem>CCC</ComboBoxItem>
+        </ComboBox>
+        <ComboBox
+            Width="150"
+            Classes="Bordered"
+            IsEnabled="False">
+            <ComboBoxItem>AAA</ComboBoxItem>
+            <ComboBoxItem>BBB</ComboBoxItem>
+            <ComboBoxItem>CCC</ComboBoxItem>
         </ComboBox>
     </StackPanel>
 </UserControl>

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

@@ -10,9 +10,4 @@ public partial class ComboBoxDemo : UserControl
     {
         InitializeComponent();
     }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }

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

@@ -0,0 +1,195 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.DataGridDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:Semi.Avalonia.Demo.Pages"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <TabControl>
+        <TabItem Header="DataGrid">
+            <DockPanel>
+                <CheckBox
+                    x:Name="ShowGDP"
+                    Content="Toggle GDP Column Visibility"
+                    DockPanel.Dock="Top"
+                    IsChecked="True" />
+                <DataGrid
+                    Name="dataGrid1"
+                    Margin="12"
+                    CanUserReorderColumns="True"
+                    CanUserResizeColumns="True"
+                    CanUserSortColumns="True"
+                    HeadersVisibility="All">
+                    <DataGrid.Columns>
+                        <!--  Using HeaderTemplate  -->
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="local:Country"
+                            Binding="{Binding Name}"
+                            Header="Country or Region" />
+                        <DataGridTextColumn
+                            Width="4*"
+                            x:DataType="local:Country"
+                            Binding="{Binding Region}"
+                            Header="Region" />
+                        <DataGridTextColumn
+                            Width="3*"
+                            x:DataType="local:Country"
+                            Binding="{Binding Population}"
+                            Header="Population" />
+                        <DataGridTextColumn
+                            Width="3*"
+                            x:DataType="local:Country"
+                            Binding="{Binding Area}"
+                            Header="Area" />
+                        <DataGridTextColumn
+                            Width="3*"
+                            MinWidth="200"
+                            x:DataType="local:Country"
+                            Binding="{Binding GDP}"
+                            Header="GDP"
+                            IsVisible="{Binding #ShowGDP.IsChecked}" />
+                    </DataGrid.Columns>
+                    <DataGrid.CellTheme>
+                        <ControlTheme BasedOn="{StaticResource {x:Type DataGridCell}}" TargetType="DataGridCell">
+                            <ControlTheme.Children>
+                                <Style Selector="^:nth-child(1)">
+                                    <Setter Property="FontWeight" Value="Bold" />
+                                </Style>
+                            </ControlTheme.Children>
+                        </ControlTheme>
+                    </DataGrid.CellTheme>
+                    <DataGrid.ColumnHeaderTheme>
+                        <ControlTheme BasedOn="{StaticResource {x:Type DataGridColumnHeader}}" TargetType="DataGridColumnHeader">
+                            <ControlTheme.Children>
+                                <Style Selector="^:nth-child(1)">
+                                    <Setter Property="FontWeight" Value="Bold" />
+                                </Style>
+                            </ControlTheme.Children>
+                        </ControlTheme>
+                    </DataGrid.ColumnHeaderTheme>
+                </DataGrid>
+            </DockPanel>
+        </TabItem>
+        <TabItem Header="Grouping">
+            <DataGrid Name="dataGridGrouping" Margin="12">
+                <DataGrid.Columns>
+                    <DataGridTextColumn
+                        Width="6*"
+                        x:DataType="local:Country"
+                        Binding="{Binding Name}"
+                        Header="Country or Region" />
+                    <DataGridTextColumn
+                        Width="4*"
+                        x:DataType="local:Country"
+                        Binding="{Binding Region}"
+                        Header="Region" />
+                    <DataGridTextColumn
+                        Width="3*"
+                        x:DataType="local:Country"
+                        Binding="{Binding Population}"
+                        DisplayIndex="3"
+                        Header="Population" />
+                    <DataGridTextColumn
+                        Width="3*"
+                        x:DataType="local:Country"
+                        Binding="{Binding Area}"
+                        DisplayIndex="2"
+                        Header="Area" />
+                    <DataGridTextColumn
+                        Width="3*"
+                        x:DataType="local:Country"
+                        Binding="{Binding GDP}"
+                        Header="GDP" />
+                </DataGrid.Columns>
+                <DataGrid.RowTheme>
+                    <ControlTheme BasedOn="{StaticResource {x:Type DataGridRow}}" TargetType="DataGridRow">
+                        <ControlTheme.Children>
+                            <Style Selector="^:nth-child(5n+3)">
+                                <Setter Property="Foreground" Value="Red" />
+                            </Style>
+                            <Style Selector="^:nth-last-child(5n+1)">
+                                <Setter Property="Foreground" Value="Blue" />
+                            </Style>
+                        </ControlTheme.Children>
+                    </ControlTheme>
+                </DataGrid.RowTheme>
+            </DataGrid>
+        </TabItem>
+        <TabItem x:Name="EditableTab" Header="Editable">
+            <Grid RowDefinitions="Auto,*,Auto">
+                <StackPanel
+                    Grid.Row="0"
+                    Orientation="Horizontal"
+                    Spacing="4">
+                    <TextBlock VerticalAlignment="Center" Text="FontSize:" />
+                    <Slider
+                        x:Name="FontSizeSlider"
+                        Width="100"
+                        VerticalAlignment="Center"
+                        Maximum="30"
+                        Minimum="5"
+                        Value="14" />
+                    <CheckBox
+                        x:Name="IsThreeStateCheckBox"
+                        Content="IsThreeState"
+                        IsChecked="False" />
+                </StackPanel>
+                <!--  Example of columns inheriting the data type from the Items source  -->
+                <DataGrid
+                    Name="dataGridEdit"
+                    Grid.Row="1"
+                    Margin="12"
+                    Items="{Binding DataGrid3Source}">
+                    <DataGrid.Columns>
+                        <DataGridTextColumn
+                            Width="2*"
+                            Binding="{Binding FirstName}"
+                            FontSize="{Binding #FontSizeSlider.Value, Mode=OneWay}"
+                            Header="First Name" />
+                        <DataGridTextColumn
+                            Width="2*"
+                            Binding="{Binding LastName}"
+                            FontSize="{Binding #FontSizeSlider.Value, Mode=OneWay}"
+                            Header="Last" />
+                        <DataGridCheckBoxColumn
+                            Width="*"
+                            Binding="{Binding IsBanned}"
+                            Header="Is Banned"
+                            IsThreeState="{Binding #IsThreeStateCheckBox.IsChecked, Mode=OneWay}" />
+                        <DataGridTemplateColumn Header="Age">
+                            <DataGridTemplateColumn.CellTemplate>
+                                <DataTemplate>
+                                    <TextBlock
+                                        HorizontalAlignment="Center"
+                                        VerticalAlignment="Center"
+                                        Text="{Binding Age, StringFormat='{}{0} years'}" />
+                                </DataTemplate>
+                            </DataGridTemplateColumn.CellTemplate>
+                            <DataGridTemplateColumn.CellEditingTemplate>
+                                <DataTemplate>
+                                    <NumericUpDown
+                                        HorizontalAlignment="Stretch"
+                                        FormatString="N0"
+                                        Maximum="120"
+                                        Minimum="0"
+                                        TemplateApplied="NumericUpDown_OnTemplateApplied"
+                                        Value="{Binding Age}" />
+                                </DataTemplate>
+                            </DataGridTemplateColumn.CellEditingTemplate>
+                        </DataGridTemplateColumn>
+                    </DataGrid.Columns>
+                </DataGrid>
+                <Button
+                    Name="btnAdd"
+                    Grid.Row="2"
+                    Margin="12,0,12,12"
+                    HorizontalAlignment="Right"
+                    Content="Add" />
+            </Grid>
+        </TabItem>
+    </TabControl>
+</UserControl>

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

@@ -0,0 +1,508 @@
+using System;
+using System.Collections;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using System.Linq;
+using Avalonia;
+using Avalonia.Collections;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Data;
+using Avalonia.Input;
+using Avalonia.Input.Raw;
+using Avalonia.Markup.Xaml;
+using Avalonia.Threading;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class DataGridDemo : UserControl
+{
+    public DataGridDemo()
+    {
+        InitializeComponent();
+        var dataGridSortDescription = DataGridSortDescription.FromPath(nameof(Country.Region), ListSortDirection.Ascending, new ReversedStringComparer());
+        var collectionView1 = new DataGridCollectionView(Countries.All);
+        collectionView1.SortDescriptions.Add(dataGridSortDescription);
+        var dg1 = this.Get<DataGrid>("dataGrid1");
+        dg1.IsReadOnly = true;
+        dg1.LoadingRow += Dg1_LoadingRow;
+        dg1.Sorting += (s, a) =>
+        {
+            var binding = (a.Column as DataGridBoundColumn)?.Binding as Binding;
+
+            if (binding?.Path is string property
+                && property == dataGridSortDescription.PropertyPath
+                && !collectionView1.SortDescriptions.Contains(dataGridSortDescription))
+            {
+                collectionView1.SortDescriptions.Add(dataGridSortDescription);
+            }
+        };
+        dg1.Items = collectionView1;
+
+        var dg2 = this.Get<DataGrid>("dataGridGrouping");
+        dg2.IsReadOnly = true;
+
+        var collectionView2 = new DataGridCollectionView(Countries.All);
+        collectionView2.GroupDescriptions.Add(new DataGridPathGroupDescription("Region"));
+
+        dg2.Items = collectionView2;
+
+        var dg3 = this.Get<DataGrid>("dataGridEdit");
+        dg3.IsReadOnly = false;
+
+        var list = new ObservableCollection<Person>
+        {
+            new Person { FirstName = "John", LastName = "Doe" , Age = 30},
+            new Person { FirstName = "Elizabeth", LastName = "Thomas", IsBanned = true , Age = 40 },
+            new Person { FirstName = "Zack", LastName = "Ward" , Age = 50 }
+        };
+        DataGrid3Source = list;
+
+        var addButton = this.Get<Button>("btnAdd");
+        addButton.Click += (a, b) => list.Add(new Person());
+
+        DataContext = this;
+    }
+    
+    public IEnumerable<Person> DataGrid3Source { get; }
+        
+    private void Dg1_LoadingRow(object? sender, DataGridRowEventArgs e)
+    {
+        e.Row.Header = e.Row.GetIndex() + 1;
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+
+    private class ReversedStringComparer : IComparer<object>, IComparer
+    {
+        public int Compare(object? x, object? y)
+        {
+            if (x is string left && y is string right)
+            {
+                var reversedLeft = new string(left.Reverse().ToArray());
+                var reversedRight = new string(right.Reverse().ToArray());
+                return reversedLeft.CompareTo(reversedRight);
+            }
+
+            return Comparer.Default.Compare(x, y);
+        }
+    }
+
+    private void NumericUpDown_OnTemplateApplied(object sender, TemplateAppliedEventArgs e)
+    {
+        // We want to focus the TextBox of the NumericUpDown. To do so we search for this control when the template
+        // is applied, but we postpone the action until the control is actually loaded. 
+        if (e.NameScope.Find<TextBox>("PART_TextBox") is {} textBox)
+        {
+            Dispatcher.UIThread.InvokeAsync(() =>
+            {
+                textBox.Focus();
+                textBox.SelectAll();
+            }, DispatcherPriority.Loaded);
+        }
+    }
+}
+
+public class Person : INotifyDataErrorInfo, INotifyPropertyChanged
+    {
+        string _firstName = string.Empty;
+        string _lastName = string.Empty;
+        bool _isBanned;
+        private int _age;
+
+        public string FirstName
+        {
+            get => _firstName;
+            set
+            {
+                _firstName = value;
+                if (string.IsNullOrWhiteSpace(value))
+                    SetError(nameof(FirstName), "First Name Required");
+                else
+                    SetError(nameof(FirstName), null);
+
+                OnPropertyChanged(nameof(FirstName));
+            }
+
+        }
+
+        public string LastName
+        {
+            get => _lastName;
+            set
+            {
+                _lastName = value;
+                if (string.IsNullOrWhiteSpace(value))
+                    SetError(nameof(LastName), "Last Name Required");
+                else
+                    SetError(nameof(LastName), null);
+
+                OnPropertyChanged(nameof(LastName));
+            }
+        }
+
+        public bool IsBanned
+        {
+            get => _isBanned;
+            set
+            {
+                _isBanned = value;
+
+                OnPropertyChanged(nameof(_isBanned));
+            }
+        }
+
+        
+        /// <summary>
+        ///    Gets or sets the age of the person
+        /// </summary>
+        public int Age
+        {
+            get => _age;
+            set
+            {
+                _age = value;
+                OnPropertyChanged(nameof(Age));
+            }
+        }
+
+        Dictionary<string, List<string>> _errorLookup = new Dictionary<string, List<string>>();
+
+        void SetError(string propertyName, string? error)
+        {
+            if (string.IsNullOrEmpty(error))
+            {
+                if (_errorLookup.Remove(propertyName))
+                    OnErrorsChanged(propertyName);
+            }
+            else
+            {
+                if (_errorLookup.TryGetValue(propertyName, out var errorList))
+                {
+                    errorList.Clear();
+                    errorList.Add(error!);
+                }
+                else
+                {
+                    var errors = new List<string> { error! };
+                    _errorLookup.Add(propertyName, errors);
+                }
+
+                OnErrorsChanged(propertyName);
+            }
+        }
+
+        public bool HasErrors => _errorLookup.Count > 0;
+
+        public event EventHandler<DataErrorsChangedEventArgs>? ErrorsChanged;
+        public event PropertyChangedEventHandler? PropertyChanged;
+
+        void OnErrorsChanged(string propertyName)
+        {
+            ErrorsChanged?.Invoke(this, new DataErrorsChangedEventArgs(propertyName));
+        }
+        void OnPropertyChanged(string propertyName)
+        {
+            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+        }
+
+        public IEnumerable GetErrors(string? propertyName)
+        {
+            if (propertyName is { } && _errorLookup.TryGetValue(propertyName, out var errorList))
+                return errorList;
+            else
+                return Array.Empty<object>();
+        }
+    }
+    
+    public static class Countries
+    {
+        static IEnumerable<Country> GetCountries()
+        {
+            yield return new Country("Afghanistan", "ASIA (EX. NEAR EAST)", 31056997, 647500, 48, 0, 23.06, 163.07, 700, 36, 3.2, 46.6, 20.34);
+            yield return new Country("Albania", "EASTERN EUROPE", 3581655, 28748, 124.6, 1.26, -4.93, 21.52, 4500, 86.5, 71.2, 15.11, 5.22);
+            yield return new Country("Algeria", "NORTHERN AFRICA", 32930091, 2381740, 13.8, 0.04, -0.39, 31, 6000, 70, 78.1, 17.14, 4.61);
+            yield return new Country("American Samoa", "OCEANIA", 57794, 199, 290.4, 58.29, -20.71, 9.27, 8000, 97, 259.5, 22.46, 3.27);
+            yield return new Country("Andorra", "WESTERN EUROPE", 71201, 468, 152.1, 0, 6.6, 4.05, 19000, 100, 497.2, 8.71, 6.25);
+            yield return new Country("Angola", "SUB-SAHARAN AFRICA", 12127071, 1246700, 9.7, 0.13, 0, 191.19, 1900, 42, 7.8, 45.11, 24.2);
+            yield return new Country("Anguilla", "LATIN AMER. & CARIB", 13477, 102, 132.1, 59.8, 10.76, 21.03, 8600, 95, 460, 14.17, 5.34);
+            yield return new Country("Antigua & Barbuda", "LATIN AMER. & CARIB", 69108, 443, 156, 34.54, -6.15, 19.46, 11000, 89, 549.9, 16.93, 5.37);
+            yield return new Country("Argentina", "LATIN AMER. & CARIB", 39921833, 2766890, 14.4, 0.18, 0.61, 15.18, 11200, 97.1, 220.4, 16.73, 7.55);
+            yield return new Country("Armenia", "C.W. OF IND. STATES", 2976372, 29800, 99.9, 0, -6.47, 23.28, 3500, 98.6, 195.7, 12.07, 8.23);
+            yield return new Country("Aruba", "LATIN AMER. & CARIB", 71891, 193, 372.5, 35.49, 0, 5.89, 28000, 97, 516.1, 11.03, 6.68);
+            yield return new Country("Australia", "OCEANIA", 20264082, 7686850, 2.6, 0.34, 3.98, 4.69, 29000, 100, 565.5, 12.14, 7.51);
+            yield return new Country("Austria", "WESTERN EUROPE", 8192880, 83870, 97.7, 0, 2, 4.66, 30000, 98, 452.2, 8.74, 9.76);
+            yield return new Country("Azerbaijan", "C.W. OF IND. STATES", 7961619, 86600, 91.9, 0, -4.9, 81.74, 3400, 97, 137.1, 20.74, 9.75);
+            yield return new Country("The Bahamas", "LATIN AMER. & CARIB", 303770, 13940, 21.8, 25.41, -2.2, 25.21, 16700, 95.6, 460.6, 17.57, 9.05);
+            yield return new Country("Bahrain", "NEAR EAST", 698585, 665, 1050.5, 24.21, 1.05, 17.27, 16900, 89.1, 281.3, 17.8, 4.14);
+            yield return new Country("Bangladesh", "ASIA (EX. NEAR EAST)", 147365352, 144000, 1023.4, 0.4, -0.71, 62.6, 1900, 43.1, 7.3, 29.8, 8.27);
+            yield return new Country("Barbados", "LATIN AMER. & CARIB", 279912, 431, 649.5, 22.51, -0.31, 12.5, 15700, 97.4, 481.9, 12.71, 8.67);
+            yield return new Country("Belarus", "C.W. OF IND. STATES", 10293011, 207600, 49.6, 0, 2.54, 13.37, 6100, 99.6, 319.1, 11.16, 14.02);
+            yield return new Country("Belgium", "WESTERN EUROPE", 10379067, 30528, 340, 0.22, 1.23, 4.68, 29100, 98, 462.6, 10.38, 10.27);
+            yield return new Country("Belize", "LATIN AMER. & CARIB", 287730, 22966, 12.5, 1.68, 0, 25.69, 4900, 94.1, 115.7, 28.84, 5.72);
+            yield return new Country("Benin", "SUB-SAHARAN AFRICA", 7862944, 112620, 69.8, 0.11, 0, 85, 1100, 40.9, 9.7, 38.85, 12.22);
+            yield return new Country("Bermuda", "NORTHERN AMERICA", 65773, 53, 1241, 194.34, 2.49, 8.53, 36000, 98, 851.4, 11.4, 7.74);
+            yield return new Country("Bhutan", "ASIA (EX. NEAR EAST)", 2279723, 47000, 48.5, 0, 0, 100.44, 1300, 42.2, 14.3, 33.65, 12.7);
+            yield return new Country("Bolivia", "LATIN AMER. & CARIB", 8989046, 1098580, 8.2, 0, -1.32, 53.11, 2400, 87.2, 71.9, 23.3, 7.53);
+            yield return new Country("Bosnia & Herzegovina", "EASTERN EUROPE", 4498976, 51129, 88, 0.04, 0.31, 21.05, 6100,null, 215.4, 8.77, 8.27);
+            yield return new Country("Botswana", "SUB-SAHARAN AFRICA", 1639833, 600370, 2.7, 0, 0, 54.58, 9000, 79.8, 80.5, 23.08, 29.5);
+            yield return new Country("Brazil", "LATIN AMER. & CARIB", 188078227, 8511965, 22.1, 0.09, -0.03, 29.61, 7600, 86.4, 225.3, 16.56, 6.17);
+            yield return new Country("British Virgin Is.", "LATIN AMER. & CARIB", 23098, 153, 151, 52.29, 10.01, 18.05, 16000, 97.8, 506.5, 14.89, 4.42);
+            yield return new Country("Brunei", "ASIA (EX. NEAR EAST)", 379444, 5770, 65.8, 2.79, 3.59, 12.61, 18600, 93.9, 237.2, 18.79, 3.45);
+            yield return new Country("Bulgaria", "EASTERN EUROPE", 7385367, 110910, 66.6, 0.32, -4.58, 20.55, 7600, 98.6, 336.3, 9.65, 14.27);
+            yield return new Country("Burkina Faso", "SUB-SAHARAN AFRICA", 13902972, 274200, 50.7, 0, 0, 97.57, 1100, 26.6, 7, 45.62, 15.6);
+            yield return new Country("Burma", "ASIA (EX. NEAR EAST)", 47382633, 678500, 69.8, 0.28, -1.8, 67.24, 1800, 85.3, 10.1, 17.91, 9.83);
+            yield return new Country("Burundi", "SUB-SAHARAN AFRICA", 8090068, 27830, 290.7, 0, -0.06, 69.29, 600, 51.6, 3.4, 42.22, 13.46);
+            yield return new Country("Cambodia", "ASIA (EX. NEAR EAST)", 13881427, 181040, 76.7, 0.24, 0, 71.48, 1900, 69.4, 2.6, 26.9, 9.06);
+            yield return new Country("Cameroon", "SUB-SAHARAN AFRICA", 17340702, 475440, 36.5, 0.08, 0, 68.26, 1800, 79, 5.7, 33.89, 13.47);
+            yield return new Country("Canada", "NORTHERN AMERICA", 33098932, 9984670, 3.3, 2.02, 5.96, 4.75, 29800, 97, 552.2, 10.78, 7.8);
+            yield return new Country("Cape Verde", "SUB-SAHARAN AFRICA", 420979, 4033, 104.4, 23.93, -12.07, 47.77, 1400, 76.6, 169.6, 24.87, 6.55);
+            yield return new Country("Cayman Islands", "LATIN AMER. & CARIB", 45436, 262, 173.4, 61.07, 18.75, 8.19, 35000, 98, 836.3, 12.74, 4.89);
+            yield return new Country("Central African Rep.", "SUB-SAHARAN AFRICA", 4303356, 622984, 6.9, 0, 0, 91, 1100, 51, 2.3, 33.91, 18.65);
+            yield return new Country("Chad", "SUB-SAHARAN AFRICA", 9944201, 1284000, 7.7, 0, -0.11, 93.82, 1200, 47.5, 1.3, 45.73, 16.38);
+            yield return new Country("Chile", "LATIN AMER. & CARIB", 16134219, 756950, 21.3, 0.85, 0, 8.8, 9900, 96.2, 213, 15.23, 5.81);
+            yield return new Country("China", "ASIA (EX. NEAR EAST)", 1313973713, 9596960, 136.9, 0.15, -0.4, 24.18, 5000, 90.9, 266.7, 13.25, 6.97);
+            yield return new Country("Colombia", "LATIN AMER. & CARIB", 43593035, 1138910, 38.3, 0.28, -0.31, 20.97, 6300, 92.5, 176.2, 20.48, 5.58);
+            yield return new Country("Comoros", "SUB-SAHARAN AFRICA", 690948, 2170, 318.4, 15.67, 0, 74.93, 700, 56.5, 24.5, 36.93, 8.2);
+            yield return new Country("Congo, Dem.Rep.", "SUB - SAHARAN AFRICA", 62660551, 2345410, 26.7, 0, 0, 94.69, 700, 65.5, 0.2, 43.69, 13.27);
+            yield return new Country("Congo, Repub.of the", "SUB - SAHARAN AFRICA", 3702314, 342000, 10.8, 0.05, -0.17, 93.86, 700, 83.8, 3.7, 42.57, 12.93);
+            yield return new Country("Cook Islands", "OCEANIA", 21388, 240, 89.1, 50,null,null, 5000, 95, 289.9, 21,null);
+            yield return new Country("Costa Rica", "LATIN AMER. & CARIB", 4075261, 51100, 79.8, 2.52, 0.51, 9.95, 9100, 96, 340.7, 18.32, 4.36);
+            yield return new Country("Cote d'Ivoire", "SUB-SAHARAN AFRICA", 17654843, 322460, 54.8, 0.16, -0.07, 90.83, 1400, 50.9, 14.6, 35.11, 14.84);
+            yield return new Country("Croatia", "EASTERN EUROPE", 4494749, 56542, 79.5, 10.32, 1.58, 6.84, 10600, 98.5, 420.4, 9.61, 11.48);
+            yield return new Country("Cuba", "LATIN AMER. & CARIB", 11382820, 110860, 102.7, 3.37, -1.58, 6.33, 2900, 97, 74.7, 11.89, 7.22);
+            yield return new Country("Cyprus", "NEAR EAST", 784301, 9250, 84.8, 7.01, 0.43, 7.18, 19200, 97.6,null, 12.56, 7.68);
+            yield return new Country("Czech Republic", "EASTERN EUROPE", 10235455, 78866, 129.8, 0, 0.97, 3.93, 15700, 99.9, 314.3, 9.02, 10.59);
+            yield return new Country("Denmark", "WESTERN EUROPE", 5450661, 43094, 126.5, 16.97, 2.48, 4.56, 31100, 100, 614.6, 11.13, 10.36);
+            yield return new Country("Djibouti", "SUB-SAHARAN AFRICA", 486530, 23000, 21.2, 1.37, 0, 104.13, 1300, 67.9, 22.8, 39.53, 19.31);
+            yield return new Country("Dominica", "LATIN AMER. & CARIB", 68910, 754, 91.4, 19.63, -13.87, 14.15, 5400, 94, 304.8, 15.27, 6.73);
+            yield return new Country("Dominican Republic", "LATIN AMER. & CARIB", 9183984, 48730, 188.5, 2.64, -3.22, 32.38, 6000, 84.7, 97.4, 23.22, 5.73);
+            yield return new Country("East Timor", "ASIA (EX. NEAR EAST)", 1062777, 15007, 70.8, 4.7, 0, 47.41, 500, 58.6,null, 26.99, 6.24);
+            yield return new Country("Ecuador", "LATIN AMER. & CARIB", 13547510, 283560, 47.8, 0.79, -8.58, 23.66, 3300, 92.5, 125.6, 22.29, 4.23);
+            yield return new Country("Egypt", "NORTHERN AFRICA", 78887007, 1001450, 78.8, 0.24, -0.22, 32.59, 4000, 57.7, 131.8, 22.94, 5.23);
+            yield return new Country("El Salvador", "LATIN AMER. & CARIB", 6822378, 21040, 324.3, 1.46, -3.74, 25.1, 4800, 80.2, 142.4, 26.61, 5.78);
+            yield return new Country("Equatorial Guinea", "SUB-SAHARAN AFRICA", 540109, 28051, 19.3, 1.06, 0, 85.13, 2700, 85.7, 18.5, 35.59, 15.06);
+            yield return new Country("Eritrea", "SUB-SAHARAN AFRICA", 4786994, 121320, 39.5, 1.84, 0, 74.87, 700, 58.6, 7.9, 34.33, 9.6);
+            yield return new Country("Estonia", "BALTICS", 1324333, 45226, 29.3, 8.39, -3.16, 7.87, 12300, 99.8, 333.8, 10.04, 13.25);
+            yield return new Country("Ethiopia", "SUB-SAHARAN AFRICA", 74777981, 1127127, 66.3, 0, 0, 95.32, 700, 42.7, 8.2, 37.98, 14.86);
+            yield return new Country("Faroe Islands", "WESTERN EUROPE", 47246, 1399, 33.8, 79.84, 1.41, 6.24, 22000,null, 503.8, 14.05, 8.7);
+            yield return new Country("Fiji", "OCEANIA", 905949, 18270, 49.6, 6.18, -3.14, 12.62, 5800, 93.7, 112.6, 22.55, 5.65);
+            yield return new Country("Finland", "WESTERN EUROPE", 5231372, 338145, 15.5, 0.37, 0.95, 3.57, 27400, 100, 405.3, 10.45, 9.86);
+            yield return new Country("France", "WESTERN EUROPE", 60876136, 547030, 111.3, 0.63, 0.66, 4.26, 27600, 99, 586.4, 11.99, 9.14);
+            yield return new Country("French Guiana", "LATIN AMER. & CARIB", 199509, 91000, 2.2, 0.42, 6.27, 12.07, 8300, 83, 255.6, 20.46, 4.88);
+            yield return new Country("French Polynesia", "OCEANIA", 274578, 4167, 65.9, 60.6, 2.94, 8.44, 17500, 98, 194.5, 16.68, 4.69);
+            yield return new Country("Gabon", "SUB-SAHARAN AFRICA", 1424906, 267667, 5.3, 0.33, 0, 53.64, 5500, 63.2, 27.4, 36.16, 12.25);
+            yield return new Country("Gambia, The", "SUB - SAHARAN AFRICA", 1641564, 11300, 145.3, 0.71, 1.57, 72.02, 1700, 40.1, 26.8, 39.37, 12.25);
+            yield return new Country("Gaza Strip", "NEAR EAST", 1428757, 360, 3968.8, 11.11, 1.6, 22.93, 600,null, 244.3, 39.45, 3.8);
+            yield return new Country("Georgia", "C.W. OF IND. STATES", 4661473, 69700, 66.9, 0.44, -4.7, 18.59, 2500, 99, 146.6, 10.41, 9.23);
+            yield return new Country("Germany", "WESTERN EUROPE", 82422299, 357021, 230.9, 0.67, 2.18, 4.16, 27600, 99, 667.9, 8.25, 10.62);
+            yield return new Country("Ghana", "SUB-SAHARAN AFRICA", 22409572, 239460, 93.6, 0.23, -0.64, 51.43, 2200, 74.8, 14.4, 30.52, 9.72);
+            yield return new Country("Gibraltar", "WESTERN EUROPE", 27928, 7, 3989.7, 171.43, 0, 5.13, 17500,null, 877.7, 10.74, 9.31);
+            yield return new Country("Greece", "WESTERN EUROPE", 10688058, 131940, 81, 10.37, 2.35, 5.53, 20000, 97.5, 589.7, 9.68, 10.24);
+            yield return new Country("Greenland", "NORTHERN AMERICA", 56361, 2166086, 0, 2.04, -8.37, 15.82, 20000,null, 448.9, 15.93, 7.84);
+            yield return new Country("Grenada", "LATIN AMER. & CARIB", 89703, 344, 260.8, 35.17, -13.92, 14.62, 5000, 98, 364.5, 22.08, 6.88);
+            yield return new Country("Guadeloupe", "LATIN AMER. & CARIB", 452776, 1780, 254.4, 17.19, -0.15, 8.6, 8000, 90, 463.8, 15.05, 6.09);
+            yield return new Country("Guam", "OCEANIA", 171019, 541, 316.1, 23.2, 0, 6.94, 21000, 99, 492, 18.79, 4.48);
+            yield return new Country("Guatemala", "LATIN AMER. & CARIB", 12293545, 108890, 112.9, 0.37, -1.67, 35.93, 4100, 70.6, 92.1, 29.88, 5.2);
+            yield return new Country("Guernsey", "WESTERN EUROPE", 65409, 78, 838.6, 64.1, 3.84, 4.71, 20000,null, 842.4, 8.81, 10.01);
+            yield return new Country("Guinea", "SUB-SAHARAN AFRICA", 9690222, 245857, 39.4, 0.13, -3.06, 90.37, 2100, 35.9, 2.7, 41.76, 15.48);
+            yield return new Country("Guinea-Bissau", "SUB-SAHARAN AFRICA", 1442029, 36120, 39.9, 0.97, -1.57, 107.17, 800, 42.4, 7.4, 37.22, 16.53);
+            yield return new Country("Guyana", "LATIN AMER. & CARIB", 767245, 214970, 3.6, 0.21, -2.07, 33.26, 4000, 98.8, 143.5, 18.28, 8.28);
+            yield return new Country("Haiti", "LATIN AMER. & CARIB", 8308504, 27750, 299.4, 6.38, -3.4, 73.45, 1600, 52.9, 16.9, 36.44, 12.17);
+            yield return new Country("Honduras", "LATIN AMER. & CARIB", 7326496, 112090, 65.4, 0.73, -1.99, 29.32, 2600, 76.2, 67.5, 28.24, 5.28);
+            yield return new Country("Hong Kong", "ASIA (EX. NEAR EAST)", 6940432, 1092, 6355.7, 67.12, 5.24, 2.97, 28800, 93.5, 546.7, 7.29, 6.29);
+            yield return new Country("Hungary", "EASTERN EUROPE", 9981334, 93030, 107.3, 0, 0.86, 8.57, 13900, 99.4, 336.2, 9.72, 13.11);
+            yield return new Country("Iceland", "WESTERN EUROPE", 299388, 103000, 2.9, 4.83, 2.38, 3.31, 30900, 99.9, 647.7, 13.64, 6.72);
+            yield return new Country("India", "ASIA (EX. NEAR EAST)", 1095351995, 3287590, 333.2, 0.21, -0.07, 56.29, 2900, 59.5, 45.4, 22.01, 8.18);
+            yield return new Country("Indonesia", "ASIA (EX. NEAR EAST)", 245452739, 1919440, 127.9, 2.85, 0, 35.6, 3200, 87.9, 52, 20.34, 6.25);
+            yield return new Country("Iran", "ASIA (EX. NEAR EAST)", 68688433, 1648000, 41.7, 0.15, -0.84, 41.58, 7000, 79.4, 276.4, 17, 5.55);
+            yield return new Country("Iraq", "NEAR EAST", 26783383, 437072, 61.3, 0.01, 0, 50.25, 1500, 40.4, 38.6, 31.98, 5.37);
+            yield return new Country("Ireland", "WESTERN EUROPE", 4062235, 70280, 57.8, 2.06, 4.99, 5.39, 29600, 98, 500.5, 14.45, 7.82);
+            yield return new Country("Isle of Man", "WESTERN EUROPE", 75441, 572, 131.9, 27.97, 5.36, 5.93, 21000,null, 676, 11.05, 11.19);
+            yield return new Country("Israel", "NEAR EAST", 6352117, 20770, 305.8, 1.31, 0.68, 7.03, 19800, 95.4, 462.3, 17.97, 6.18);
+            yield return new Country("Italy", "WESTERN EUROPE", 58133509, 301230, 193, 2.52, 2.07, 5.94, 26700, 98.6, 430.9, 8.72, 10.4);
+            yield return new Country("Jamaica", "LATIN AMER. & CARIB", 2758124, 10991, 250.9, 9.3, -4.92, 12.36, 3900, 87.9, 124, 20.82, 6.52);
+            yield return new Country("Japan", "ASIA (EX. NEAR EAST)", 127463611, 377835, 337.4, 7.87, 0, 3.26, 28200, 99, 461.2, 9.37, 9.16);
+            yield return new Country("Jersey", "WESTERN EUROPE", 91084, 116, 785.2, 60.34, 2.76, 5.24, 24800,null, 811.3, 9.3, 9.28);
+            yield return new Country("Jordan", "NEAR EAST", 5906760, 92300, 64, 0.03, 6.59, 17.35, 4300, 91.3, 104.5, 21.25, 2.65);
+            yield return new Country("Kazakhstan", "C.W. OF IND. STATES", 15233244, 2717300, 5.6, 0, -3.35, 29.21, 6300, 98.4, 164.1, 16, 9.42);
+            yield return new Country("Kenya", "SUB-SAHARAN AFRICA", 34707817, 582650, 59.6, 0.09, -0.1, 61.47, 1000, 85.1, 8.1, 39.72, 14.02);
+            yield return new Country("Kiribati", "OCEANIA", 105432, 811, 130, 140.94, 0, 48.52, 800,null, 42.7, 30.65, 8.26);
+            yield return new Country("North Korea", "ASIA(EX.NEAR EAST)", 23113019, 120540, 191.8, 2.07, 0, 24.04, 1300, 99, 42.4, 15.54, 7.13);
+            yield return new Country("South Korea", "ASIA(EX.NEAR EAST)", 48846823, 98480, 496, 2.45, 0, 7.05, 17800, 97.9, 486.1, 10, 5.85);
+            yield return new Country("Kuwait", "NEAR EAST", 2418393, 17820, 135.7, 2.8, 14.18, 9.95, 19000, 83.5, 211, 21.94, 2.41);
+            yield return new Country("Kyrgyzstan", "C.W. OF IND. STATES", 5213898, 198500, 26.3, 0, -2.45, 35.64, 1600, 97, 84, 22.8, 7.08);
+            yield return new Country("Laos", "ASIA (EX. NEAR EAST)", 6368481, 236800, 26.9, 0, 0, 85.22, 1700, 66.4, 14.1, 35.49, 11.55);
+            yield return new Country("Latvia", "BALTICS", 2274735, 64589, 35.2, 0.82, -2.23, 9.55, 10200, 99.8, 321.4, 9.24, 13.66);
+            yield return new Country("Lebanon", "NEAR EAST", 3874050, 10400, 372.5, 2.16, 0, 24.52, 4800, 87.4, 255.6, 18.52, 6.21);
+            yield return new Country("Lesotho", "SUB-SAHARAN AFRICA", 2022331, 30355, 66.6, 0, -0.74, 84.23, 3000, 84.8, 23.7, 24.75, 28.71);
+            yield return new Country("Liberia", "SUB-SAHARAN AFRICA", 3042004, 111370, 27.3, 0.52, 0, 128.87, 1000, 57.5, 2.3, 44.77, 23.1);
+            yield return new Country("Libya", "NORTHERN AFRICA", 5900754, 1759540, 3.4, 0.1, 0, 24.6, 6400, 82.6, 127.1, 26.49, 3.48);
+            yield return new Country("Liechtenstein", "WESTERN EUROPE", 33987, 160, 212.4, 0, 4.85, 4.7, 25000, 100, 585.5, 10.21, 7.18);
+            yield return new Country("Lithuania", "BALTICS", 3585906, 65200, 55, 0.14, -0.71, 6.89, 11400, 99.6, 223.4, 8.75, 10.98);
+            yield return new Country("Luxembourg", "WESTERN EUROPE", 474413, 2586, 183.5, 0, 8.97, 4.81, 55100, 100, 515.4, 11.94, 8.41);
+            yield return new Country("Macau", "ASIA (EX. NEAR EAST)", 453125, 28, 16183, 146.43, 4.86, 4.39, 19400, 94.5, 384.9, 8.48, 4.47);
+            yield return new Country("Macedonia", "EASTERN EUROPE", 2050554, 25333, 80.9, 0, -1.45, 10.09, 6700,null, 260, 12.02, 8.77);
+            yield return new Country("Madagascar", "SUB-SAHARAN AFRICA", 18595469, 587040, 31.7, 0.82, 0, 76.83, 800, 68.9, 3.6, 41.41, 11.11);
+            yield return new Country("Malawi", "SUB-SAHARAN AFRICA", 13013926, 118480, 109.8, 0, 0, 103.32, 600, 62.7, 7.9, 43.13, 19.33);
+            yield return new Country("Malaysia", "ASIA (EX. NEAR EAST)", 24385858, 329750, 74, 1.42, 0, 17.7, 9000, 88.7, 179, 22.86, 5.05);
+            yield return new Country("Maldives", "ASIA (EX. NEAR EAST)", 359008, 300, 1196.7, 214.67, 0, 56.52, 3900, 97.2, 90, 34.81, 7.06);
+            yield return new Country("Mali", "SUB-SAHARAN AFRICA", 11716829, 1240000, 9.5, 0, -0.33, 116.79, 900, 46.4, 6.4, 49.82, 16.89);
+            yield return new Country("Malta", "WESTERN EUROPE", 400214, 316, 1266.5, 62.28, 2.07, 3.89, 17700, 92.8, 505, 10.22, 8.1);
+            yield return new Country("Marshall Islands", "OCEANIA", 60422, 11854, 5.1, 3.12, -6.04, 29.45, 1600, 93.7, 91.2, 33.05, 4.78);
+            yield return new Country("Martinique", "LATIN AMER. & CARIB", 436131, 1100, 396.5, 31.82, -0.05, 7.09, 14400, 97.7, 394.4, 13.74, 6.48);
+            yield return new Country("Mauritania", "SUB-SAHARAN AFRICA", 3177388, 1030700, 3.1, 0.07, 0, 70.89, 1800, 41.7, 12.9, 40.99, 12.16);
+            yield return new Country("Mauritius", "SUB-SAHARAN AFRICA", 1240827, 2040, 608.3, 8.68, -0.9, 15.03, 11400, 85.6, 289.3, 15.43, 6.86);
+            yield return new Country("Mayotte", "SUB-SAHARAN AFRICA", 201234, 374, 538.1, 49.52, 6.78, 62.4, 2600,null, 49.7, 40.95, 7.7);
+            yield return new Country("Mexico", "LATIN AMER. & CARIB", 107449525, 1972550, 54.5, 0.47, -4.87, 20.91, 9000, 92.2, 181.6, 20.69, 4.74);
+            yield return new Country("Micronesia, Fed.St.", "OCEANIA", 108004, 702, 153.9, 870.66, -20.99, 30.21, 2000, 89, 114.8, 24.68, 4.75);
+            yield return new Country("Moldova", "C.W. OF IND. STATES", 4466706, 33843, 132, 0, -0.26, 40.42, 1800, 99.1, 208.1, 15.7, 12.64);
+            yield return new Country("Monaco", "WESTERN EUROPE", 32543, 2, 16271.5, 205, 7.75, 5.43, 27000, 99, 1035.6, 9.19, 12.91);
+            yield return new Country("Mongolia", "ASIA (EX. NEAR EAST)", 2832224, 1564116, 1.8, 0, 0, 53.79, 1800, 97.8, 55.1, 21.59, 6.95);
+            yield return new Country("Montserrat", "LATIN AMER. & CARIB", 9439, 102, 92.5, 39.22, 0, 7.35, 3400, 97,null, 17.59, 7.1);
+            yield return new Country("Morocco", "NORTHERN AFRICA", 33241259, 446550, 74.4, 0.41, -0.98, 41.62, 4000, 51.7, 40.4, 21.98, 5.58);
+            yield return new Country("Mozambique", "SUB-SAHARAN AFRICA", 19686505, 801590, 24.6, 0.31, 0, 130.79, 1200, 47.8, 3.5, 35.18, 21.35);
+            yield return new Country("Namibia", "SUB-SAHARAN AFRICA", 2044147, 825418, 2.5, 0.19, 0, 48.98, 7200, 84, 62.6, 24.32, 18.86);
+            yield return new Country("Nauru", "OCEANIA", 13287, 21, 632.7, 142.86, 0, 9.95, 5000,null, 143, 24.76, 6.7);
+            yield return new Country("Nepal", "ASIA (EX. NEAR EAST)", 28287147, 147181, 192.2, 0, 0, 66.98, 1400, 45.2, 15.9, 30.98, 9.31);
+            yield return new Country("Netherlands", "WESTERN EUROPE", 16491461, 41526, 397.1, 1.09, 2.91, 5.04, 28600, 99, 460.8, 10.9, 8.68);
+            yield return new Country("Netherlands Antilles", "LATIN AMER. & CARIB", 221736, 960, 231, 37.92, -0.41, 10.03, 11400, 96.7, 365.3, 14.78, 6.45);
+            yield return new Country("New Caledonia", "OCEANIA", 219246, 19060, 11.5, 11.83, 0, 7.72, 15000, 91, 252.2, 18.11, 5.69);
+            yield return new Country("New Zealand", "OCEANIA", 4076140, 268680, 15.2, 5.63, 4.05, 5.85, 21600, 99, 441.7, 13.76, 7.53);
+            yield return new Country("Nicaragua", "LATIN AMER. & CARIB", 5570129, 129494, 43, 0.7, -1.22, 29.11, 2300, 67.5, 39.7, 24.51, 4.45);
+            yield return new Country("Niger", "SUB-SAHARAN AFRICA", 12525094, 1267000, 9.9, 0, -0.67, 121.69, 800, 17.6, 1.9, 50.73, 20.91);
+            yield return new Country("Nigeria", "SUB-SAHARAN AFRICA", 131859731, 923768, 142.7, 0.09, 0.26, 98.8, 900, 68, 9.3, 40.43, 16.94);
+            yield return new Country("N. Mariana Islands", "OCEANIA", 82459, 477, 172.9, 310.69, 9.61, 7.11, 12500, 97, 254.7, 19.43, 2.29);
+            yield return new Country("Norway", "WESTERN EUROPE", 4610820, 323802, 14.2, 7.77, 1.74, 3.7, 37800, 100, 461.7, 11.46, 9.4);
+            yield return new Country("Oman", "NEAR EAST", 3102229, 212460, 14.6, 0.98, 0.28, 19.51, 13100, 75.8, 85.5, 36.24, 3.81);
+            yield return new Country("Pakistan", "ASIA (EX. NEAR EAST)", 165803560, 803940, 206.2, 0.13, -2.77, 72.44, 2100, 45.7, 31.8, 29.74, 8.23);
+            yield return new Country("Palau", "OCEANIA", 20579, 458, 44.9, 331.66, 2.85, 14.84, 9000, 92, 325.6, 18.03, 6.8);
+            yield return new Country("Panama", "LATIN AMER. & CARIB", 3191319, 78200, 40.8, 3.18, -0.91, 20.47, 6300, 92.6, 137.9, 21.74, 5.36);
+            yield return new Country("Papua New Guinea", "OCEANIA", 5670544, 462840, 12.3, 1.11, 0, 51.45, 2200, 64.6, 10.9, 29.36, 7.25);
+            yield return new Country("Paraguay", "LATIN AMER. & CARIB", 6506464, 406750, 16, 0, -0.08, 25.63, 4700, 94, 49.2, 29.1, 4.49);
+            yield return new Country("Peru", "LATIN AMER. & CARIB", 28302603, 1285220, 22, 0.19, -1.05, 31.94, 5100, 90.9, 79.5, 20.48, 6.23);
+            yield return new Country("Philippines", "ASIA (EX. NEAR EAST)", 89468677, 300000, 298.2, 12.1, -1.5, 23.51, 4600, 92.6, 38.4, 24.89, 5.41);
+            yield return new Country("Poland", "EASTERN EUROPE", 38536869, 312685, 123.3, 0.16, -0.49, 8.51, 11100, 99.8, 306.3, 9.85, 9.89);
+            yield return new Country("Portugal", "WESTERN EUROPE", 10605870, 92391, 114.8, 1.94, 3.57, 5.05, 18000, 93.3, 399.2, 10.72, 10.5);
+            yield return new Country("Puerto Rico", "LATIN AMER. & CARIB", 3927188, 13790, 284.8, 3.63, -1.46, 8.24, 16800, 94.1, 283.1, 12.77, 7.65);
+            yield return new Country("Qatar", "NEAR EAST", 885359, 11437, 77.4, 4.92, 16.29, 18.61, 21500, 82.5, 232, 15.56, 4.72);
+            yield return new Country("Reunion", "SUB-SAHARAN AFRICA", 787584, 2517, 312.9, 8.22, 0, 7.78, 5800, 88.9, 380.9, 18.9, 5.49);
+            yield return new Country("Romania", "EASTERN EUROPE", 22303552, 237500, 93.9, 0.09, -0.13, 26.43, 7000, 98.4, 196.9, 10.7, 11.77);
+            yield return new Country("Russia", "C.W. OF IND. STATES", 142893540, 17075200, 8.4, 0.22, 1.02, 15.39, 8900, 99.6, 280.6, 9.95, 14.65);
+            yield return new Country("Rwanda", "SUB-SAHARAN AFRICA", 8648248, 26338, 328.4, 0, 0, 91.23, 1300, 70.4, 2.7, 40.37, 16.09);
+            yield return new Country("Saint Helena", "SUB-SAHARAN AFRICA", 7502, 413, 18.2, 14.53, 0, 19, 2500, 97, 293.3, 12.13, 6.53);
+            yield return new Country("Saint Kitts & Nevis", "LATIN AMER. & CARIB", 39129, 261, 149.9, 51.72, -7.11, 14.49, 8800, 97, 638.9, 18.02, 8.33);
+            yield return new Country("Saint Lucia", "LATIN AMER. & CARIB", 168458, 616, 273.5, 25.65, -2.67, 13.53, 5400, 67, 303.3, 19.68, 5.08);
+            yield return new Country("St Pierre & Miquelon", "NORTHERN AMERICA", 7026, 242, 29, 49.59, -4.86, 7.54, 6900, 99, 683.2, 13.52, 6.83);
+            yield return new Country("Saint Vincent and the Grenadines", "LATIN AMER. & CARIB", 117848, 389, 303, 21.59, -7.64, 14.78, 2900, 96, 190.9, 16.18, 5.98);
+            yield return new Country("Samoa", "OCEANIA", 176908, 2944, 60.1, 13.69, -11.7, 27.71, 5600, 99.7, 75.2, 16.43, 6.62);
+            yield return new Country("San Marino", "WESTERN EUROPE", 29251, 61, 479.5, 0, 10.98, 5.73, 34600, 96, 704.3, 10.02, 8.17);
+            yield return new Country("Sao Tome & Principe", "SUB-SAHARAN AFRICA", 193413, 1001, 193.2, 20.88, -2.72, 43.11, 1200, 79.3, 36.2, 40.25, 6.47);
+            yield return new Country("Saudi Arabia", "NEAR EAST", 27019731, 1960582, 13.8, 0.13, -2.71, 13.24, 11800, 78.8, 140.6, 29.34, 2.58);
+            yield return new Country("Senegal", "SUB-SAHARAN AFRICA", 11987121, 196190, 61.1, 0.27, 0.2, 55.51, 1600, 40.2, 22.2, 32.78, 9.42);
+            yield return new Country("Serbia", "EASTERN EUROPE", 9396411, 88361, 106.3, 0, -1.33, 12.89, 2200, 93, 285.8,null,null);
+            yield return new Country("Seychelles", "SUB-SAHARAN AFRICA", 81541, 455, 179.2, 107.91, -5.69, 15.53, 7800, 58, 262.4, 16.03, 6.29);
+            yield return new Country("Sierra Leone", "SUB-SAHARAN AFRICA", 6005250, 71740, 83.7, 0.56, 0, 143.64, 500, 31.4, 4, 45.76, 23.03);
+            yield return new Country("Singapore", "ASIA (EX. NEAR EAST)", 4492150, 693, 6482.2, 27.85, 11.53, 2.29, 23700, 92.5, 411.4, 9.34, 4.28);
+            yield return new Country("Slovakia", "EASTERN EUROPE", 5439448, 48845, 111.4, 0, 0.3, 7.41, 13300,null, 220.1, 10.65, 9.45);
+            yield return new Country("Slovenia", "EASTERN EUROPE", 2010347, 20273, 99.2, 0.23, 1.12, 4.45, 19000, 99.7, 406.1, 8.98, 10.31);
+            yield return new Country("Solomon Islands", "OCEANIA", 552438, 28450, 19.4, 18.67, 0, 21.29, 1700,null, 13.4, 30.01, 3.92);
+            yield return new Country("Somalia", "SUB-SAHARAN AFRICA", 8863338, 637657, 13.9, 0.47, 5.37, 116.7, 500, 37.8, 11.3, 45.13, 16.63);
+            yield return new Country("South Africa", "SUB-SAHARAN AFRICA", 44187637, 1219912, 36.2, 0.23, -0.29, 61.81, 10700, 86.4, 107, 18.2, 22);
+            yield return new Country("Spain", "WESTERN EUROPE", 40397842, 504782, 80, 0.98, 0.99, 4.42, 22000, 97.9, 453.5, 10.06, 9.72);
+            yield return new Country("Sri Lanka", "ASIA (EX. NEAR EAST)", 20222240, 65610, 308.2, 2.04, -1.31, 14.35, 3700, 92.3, 61.5, 15.51, 6.52);
+            yield return new Country("Sudan", "SUB-SAHARAN AFRICA", 41236378, 2505810, 16.5, 0.03, -0.02, 62.5, 1900, 61.1, 16.3, 34.53, 8.97);
+            yield return new Country("Suriname", "LATIN AMER. & CARIB", 439117, 163270, 2.7, 0.24, -8.81, 23.57, 4000, 93, 184.7, 18.02, 7.27);
+            yield return new Country("Swaziland", "SUB-SAHARAN AFRICA", 1136334, 17363, 65.5, 0, 0, 69.27, 4900, 81.6, 30.8, 27.41, 29.74);
+            yield return new Country("Sweden", "WESTERN EUROPE", 9016596, 449964, 20, 0.72, 1.67, 2.77, 26800, 99, 715, 10.27, 10.31);
+            yield return new Country("Switzerland", "WESTERN EUROPE", 7523934, 41290, 182.2, 0, 4.05, 4.39, 32700, 99, 680.9, 9.71, 8.49);
+            yield return new Country("Syria", "NEAR EAST", 18881361, 185180, 102, 0.1, 0, 29.53, 3300, 76.9, 153.8, 27.76, 4.81);
+            yield return new Country("Taiwan", "ASIA (EX. NEAR EAST)", 23036087, 35980, 640.3, 4.35, 0, 6.4, 23400, 96.1, 591, 12.56, 6.48);
+            yield return new Country("Tajikistan", "C.W. OF IND. STATES", 7320815, 143100, 51.2, 0, -2.86, 110.76, 1000, 99.4, 33.5, 32.65, 8.25);
+            yield return new Country("Tanzania", "SUB-SAHARAN AFRICA", 37445392, 945087, 39.6, 0.15, -2.06, 98.54, 600, 78.2, 4, 37.71, 16.39);
+            yield return new Country("Thailand", "ASIA (EX. NEAR EAST)", 64631595, 514000, 125.7, 0.63, 0, 20.48, 7400, 92.6, 108.9, 13.87, 7.04);
+            yield return new Country("Togo", "SUB-SAHARAN AFRICA", 5548702, 56785, 97.7, 0.1, 0, 66.61, 1500, 60.9, 10.6, 37.01, 9.83);
+            yield return new Country("Tonga", "OCEANIA", 114689, 748, 153.3, 56.02, 0, 12.62, 2200, 98.5, 97.7, 25.37, 5.28);
+            yield return new Country("Trinidad & Tobago", "LATIN AMER. & CARIB", 1065842, 5128, 207.9, 7.06, -10.83, 24.31, 9500, 98.6, 303.5, 12.9, 10.57);
+            yield return new Country("Tunisia", "NORTHERN AFRICA", 10175014, 163610, 62.2, 0.7, -0.57, 24.77, 6900, 74.2, 123.6, 15.52, 5.13);
+            yield return new Country("Turkey", "NEAR EAST", 70413958, 780580, 90.2, 0.92, 0, 41.04, 6700, 86.5, 269.5, 16.62, 5.97);
+            yield return new Country("Turkmenistan", "C.W. OF IND. STATES", 5042920, 488100, 10.3, 0, -0.86, 73.08, 5800, 98, 74.6, 27.61, 8.6);
+            yield return new Country("Turks & Caicos Is", "LATIN AMER. & CARIB", 21152, 430, 49.2, 90.47, 11.68, 15.67, 9600, 98, 269.5, 21.84, 4.21);
+            yield return new Country("Tuvalu", "OCEANIA", 11810, 26, 454.2, 92.31, 0, 20.03, 1100,null, 59.3, 22.18, 7.11);
+            yield return new Country("Uganda", "SUB-SAHARAN AFRICA", 28195754, 236040, 119.5, 0, 0, 67.83, 1400, 69.9, 3.6, 47.35, 12.24);
+            yield return new Country("Ukraine", "C.W. OF IND. STATES", 46710816, 603700, 77.4, 0.46, -0.39, 20.34, 5400, 99.7, 259.9, 8.82, 14.39);
+            yield return new Country("United Arab Emirates", "NEAR EAST", 2602713, 82880, 31.4, 1.59, 1.03, 14.51, 23200, 77.9, 475.3, 18.96, 4.4);
+            yield return new Country("United Kingdom", "WESTERN EUROPE", 60609153, 244820, 247.6, 5.08, 2.19, 5.16, 27700, 99, 543.5, 10.71, 10.13);
+            yield return new Country("United States", "NORTHERN AMERICA", 298444215, 9631420, 31, 0.21, 3.41, 6.5, 37800, 97, 898, 14.14, 8.26);
+            yield return new Country("Uruguay", "LATIN AMER. & CARIB", 3431932, 176220, 19.5, 0.37, -0.32, 11.95, 12800, 98, 291.4, 13.91, 9.05);
+            yield return new Country("Uzbekistan", "C.W. OF IND. STATES", 27307134, 447400, 61, 0, -1.72, 71.1, 1700, 99.3, 62.9, 26.36, 7.84);
+            yield return new Country("Vanuatu", "OCEANIA", 208869, 12200, 17.1, 20.72, 0, 55.16, 2900, 53, 32.6, 22.72, 7.82);
+            yield return new Country("Venezuela", "LATIN AMER. & CARIB", 25730435, 912050, 28.2, 0.31, -0.04, 22.2, 4800, 93.4, 140.1, 18.71, 4.92);
+            yield return new Country("Vietnam", "ASIA (EX. NEAR EAST)", 84402966, 329560, 256.1, 1.05, -0.45, 25.95, 2500, 90.3, 187.7, 16.86, 6.22);
+            yield return new Country("Virgin Islands", "LATIN AMER. & CARIB", 108605, 1910, 56.9, 9.84, -8.94, 8.03, 17200,null, 652.8, 13.96, 6.43);
+            yield return new Country("Wallis and Futuna", "OCEANIA", 16025, 274, 58.5, 47.08,null,null, 3700, 50, 118.6,null,null);
+            yield return new Country("West Bank", "NEAR EAST", 2460492, 5860, 419.9, 0, 2.98, 19.62, 800,null, 145.2, 31.67, 3.92);
+            yield return new Country("Yemen", "NEAR EAST", 21456188, 527970, 40.6, 0.36, 0, 61.5, 800, 50.2, 37.2, 42.89, 8.3);
+            yield return new Country("Zambia", "SUB-SAHARAN AFRICA", 11502010, 752614, 15.3, 0, 0, 88.29, 800, 80.6, 8.2, 41, 19.93);
+            yield return new Country("Zimbabwe", "SUB-SAHARAN AFRICA", 12236805, 390580, 31.3, 0, 0, 67.69, 1900, 90.7, 26.8, 28.01, 21.84);
+        }
+
+        static IReadOnlyList<Country>? _all;
+
+        public static IReadOnlyList<Country> All
+        {
+            get
+            {
+                if(_all == null)
+                {
+                    _all = GetCountries().ToList().AsReadOnly();
+                }
+
+                return _all;
+            }
+
+        }
+    }
+    
+public class Country
+{
+    public string Name { get; private set; }
+    public string Region { get; private set; }
+    public int Population { get; private set; }
+    //Square Miles
+    public int Area { get; private set; }
+    //Per Square Mile
+    public double PopulationDensity { get; private set; }
+    //Coast / Area
+    public double CoastLine { get; private set; }
+    public double? NetMigration { get; private set; }
+    //per 1000 births
+    public double? InfantMortality { get; private set; }
+    public int GDP { get; private set; }
+    public double? LiteracyPercent { get; private set; }
+    //per 1000
+    public double? Phones { get; private set; }
+    public double? BirthRate { get; private set; }
+    public double? DeathRate { get; private set; }
+
+    public Country(string name, string region, int population, int area, double density, double coast, double? migration, 
+        double? infantMorality, int gdp, double? literacy, double? phones, double? birth, double? death)
+    {
+        Name = name;
+        Region = region;
+        Population = population;
+        Area = area;
+        PopulationDensity = density;
+        CoastLine = coast;
+        NetMigration = migration;
+        InfantMortality = infantMorality;
+        GDP = gdp;
+        LiteracyPercent = literacy;
+        BirthRate = birth;
+        DeathRate = death;
+    }
+}

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

@@ -7,9 +7,11 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="20" Spacing="20">
+    <StackPanel Spacing="20">
         <DatePicker />
         <DatePicker DayFormat="d (ddd)" YearVisible="False" />
         <DatePicker IsEnabled="False" />
+        <DatePicker Classes="Large" />
+        <DatePicker Classes="Small" />
     </StackPanel>
 </UserControl>

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

@@ -1,6 +1,7 @@
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
+using Avalonia.Media;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -15,4 +16,9 @@ public partial class DatePickerDemo : UserControl
     {
         AvaloniaXamlLoader.Load(this);
     }
+
+    public override void Render(DrawingContext context)
+    {
+        base.Render(context);
+    }
 }

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

@@ -1,9 +1,13 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.ExpanderDemo" 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 Margin="20" Spacing="20">
+    x:Class="Semi.Avalonia.Demo.Pages.ExpanderDemo"
+    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 Spacing="20">
         <StackPanel>
             <Expander Header="Expander 1">
                 <TextBlock Text="Hello Avalonia!" />
@@ -17,13 +21,16 @@
         </StackPanel>
         <Grid ColumnDefinitions="* *">
             <Expander
-                Height="200" ExpandDirection="Right"
+                Height="200"
+                ExpandDirection="Right"
                 Header="Right">
                 <TextBlock>Right Content</TextBlock>
             </Expander>
             <Expander
-                Grid.Column="1" Height="200"
-                HorizontalAlignment="Right" ExpandDirection="Left"
+                Grid.Column="1"
+                Height="200"
+                HorizontalAlignment="Right"
+                ExpandDirection="Left"
                 Header="Left">
                 <TextBlock>Left Content</TextBlock>
             </Expander>

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

@@ -1,11 +1,16 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.LabelDemo" 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">
+    x:Class="Semi.Avalonia.Demo.Pages.LabelDemo"
+    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
-        Width="500" Margin="20"
-        HorizontalAlignment="Left" Spacing="20">
+        Width="500"
+        HorizontalAlignment="Left"
+        Spacing="20">
         <StackPanel.Styles>
             <Style Selector="Label">
                 <Setter Property="Margin" Value="4" />

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

@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <ListBox Margin="20">
+    <ListBox>
         <ListBoxItem>Item 1</ListBoxItem>
         <ListBoxItem>Item 2</ListBoxItem>
         <ListBoxItem IsEnabled="False">Item 3</ListBoxItem>

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

@@ -3,7 +3,6 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:dialogs="clr-namespace:Avalonia.Dialogs;assembly=Avalonia.Dialogs"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     d:DesignHeight="450"
     d:DesignWidth="800"

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

@@ -21,7 +21,8 @@ public partial class ManagedFileChooserDemo : UserControl
 
     private async void OpenFileDialog(object sender, RoutedEventArgs args)
     {
-        IStorageProvider sp = GetStorageProvider();
+        IStorageProvider? sp = GetStorageProvider();
+        if (sp is null) return;
         var result = await sp.OpenFilePickerAsync(new FilePickerOpenOptions()
         {
             Title = "Open File",
@@ -31,7 +32,8 @@ public partial class ManagedFileChooserDemo : UserControl
     }
     private async void SelectFolderDialog(object sender, RoutedEventArgs args)
     {
-        IStorageProvider sp = GetStorageProvider();
+        IStorageProvider? sp = GetStorageProvider();
+        if (sp is null) return;
         var result = await sp.OpenFolderPickerAsync(new FolderPickerOpenOptions()
         {
             Title = "Select Folder",
@@ -40,27 +42,20 @@ public partial class ManagedFileChooserDemo : UserControl
     }
     private async void SaveFileDialog(object sender, RoutedEventArgs args)
     {
-        IStorageProvider sp = GetStorageProvider();
+        IStorageProvider? sp = GetStorageProvider();
+        if (sp is null) return;
         var result = await sp.SaveFilePickerAsync(new FilePickerSaveOptions()
         {
             Title = "Open File",
         });
     }
     
-    private IStorageProvider GetStorageProvider()
+    private IStorageProvider? GetStorageProvider()
     {
-        return new ManagedStorageProvider<Window>(GetWindow(), null);
+        var topLevel = TopLevel.GetTopLevel(this);
+        return topLevel?.StorageProvider;
     }
 
-    private static string FullPathOrName(IStorageItem? item)
-    {
-        if (item is null) return "(null)";
-        return item.TryGetUri(out var uri) ? uri.ToString() : item.Name;
-    }
-
-    Window GetWindow() => this.VisualRoot as Window ?? throw new NullReferenceException("Invalid Owner");
-    TopLevel GetTopLevel() => this.VisualRoot as TopLevel ?? throw new NullReferenceException("Invalid Owner");
-    
     List<FilePickerFileType>? GetFileTypes()
     {
         return new List<FilePickerFileType>

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

@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="20" Spacing="20">
+    <StackPanel Spacing="20">
         <Menu>
             <MenuItem Header="_First">
                 <MenuItem Header="Standard _Menu Item" InputGesture="Ctrl+A" />
@@ -73,7 +73,7 @@
                 <MenuItem Header="Child 19" />
             </MenuItem>
         </Menu>
-        <Border>
+        <Border Theme="{DynamicResource CardBorder}">
             <Border.ContextMenu>
                 <ContextMenu>
                     <MenuItem Header="Standard _Menu Item" InputGesture="Ctrl+A" />
@@ -89,6 +89,7 @@
                     <MenuItem Header="Menu Item with _Checkbox">
                         <MenuItem.Icon>
                             <CheckBox
+                                Padding="0"
                                 BorderThickness="0"
                                 IsChecked="True"
                                 IsHitTestVisible="False" />
@@ -97,9 +98,9 @@
                     <MenuItem Header="Menu Item that won't close on click" StaysOpenOnClick="True" />
                 </ContextMenu>
             </Border.ContextMenu>
-            <TextBlock Text="Context Menu" />
+            <TextBlock Text="Right Click to show Context Menu" />
         </Border>
-        <Border>
+        <Border Theme="{DynamicResource CardBorder}">
             <Border.ContextFlyout>
                 <MenuFlyout>
                     <MenuItem Header="Standard _Menu Item" InputGesture="Ctrl+A" />
@@ -115,6 +116,7 @@
                     <MenuItem Header="Menu Item with _Checkbox">
                         <MenuItem.Icon>
                             <CheckBox
+                                Padding="0"
                                 BorderThickness="0"
                                 IsChecked="True"
                                 IsHitTestVisible="False" />
@@ -122,7 +124,7 @@
                     </MenuItem>
                 </MenuFlyout>
             </Border.ContextFlyout>
-            <TextBlock Text="Context Flyout" />
+            <TextBlock Text="Right Click to show Context Flyout" />
         </Border>
     </StackPanel>
 </UserControl>

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

@@ -7,10 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
-        Margin="300,20,20,20"
-        HorizontalAlignment="Left"
-        Spacing="20">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <Button Click="InfoButton_OnClick" Content="Information" />
         <Button Click="InfoButton_OnClick" Content="Success" />
         <Button Click="InfoButton_OnClick" Content="Warning" />

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

@@ -12,7 +12,7 @@ namespace Semi.Avalonia.Demo.Pages;
 
 public partial class NotificationDemo : UserControl
 {
-    private MainWindow? _window;
+    private WindowNotificationManager? _manager;
     public NotificationDemo()
     {
         InitializeComponent();
@@ -21,14 +21,15 @@ public partial class NotificationDemo : UserControl
     protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
     {
         base.OnAttachedToVisualTree(e);
-        _window = VisualRoot as MainWindow;
+        var topLevel = TopLevel.GetTopLevel(this);
+        _manager = new WindowNotificationManager(topLevel){ MaxItems = 3};
     }
 
     private void InfoButton_OnClick(object? sender, RoutedEventArgs e)
     {
         if (sender is Button b && b.Content is string s && Enum.TryParse<NotificationType>(s, out NotificationType t))
         {
-            _window?.Notify(t);
+            _manager?.Show(new Notification(t.ToString(), "This is message", t));
         }
     }
 }

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

@@ -7,10 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
-        Margin="20"
-        HorizontalAlignment="Left"
-        Spacing="20">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <NumericUpDown
             Width="200"
             Maximum="100"

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

@@ -8,13 +8,7 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <ScrollViewer HorizontalScrollBarVisibility="Auto">
-        <StackPanel Margin="10" Spacing="5">
-            <TextBlock
-                HorizontalAlignment="Center"
-                Classes="H4"
-                Text="Welcome to Semi Avalonia"
-                Theme="{StaticResource TitleTextBlock}" />
-
+        <StackPanel Spacing="5">
             <StackPanel Orientation="Horizontal" Spacing="20">
                 <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
                 <Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
@@ -102,7 +96,11 @@
                 </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 />

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

@@ -1,6 +1,8 @@
 using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Interactivity;
 using Avalonia.Markup.Xaml;
+using Avalonia.Styling;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -10,4 +12,17 @@ public partial class Overview : UserControl
     {
         InitializeComponent();
     }
+
+    private void ToggleButton_OnIsCheckedChanged(object sender, RoutedEventArgs e)
+    {
+        var variant = Application.Current!.RequestedThemeVariant;
+        if (variant?.Key == "Dark")
+        {
+            Application.Current!.RequestedThemeVariant = ThemeVariant.Light;
+        }
+        else
+        {
+            Application.Current!.RequestedThemeVariant = ThemeVariant.Dark;
+        }
+    }
 }

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

@@ -0,0 +1,129 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.PaletteDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="viewModels:PaletteDemoViewModel"
+    mc:Ignorable="d">
+    <Design.DataContext>
+        <viewModels:PaletteDemoViewModel />
+    </Design.DataContext>
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceInclude Source="../Themes/ToggleButton.axaml" />
+                <ResourceInclude Source="../Controls/ColorItemControl.axaml" />
+                <ResourceInclude Source="../Controls/ColorDetailControl.axaml" />
+                <ResourceInclude Source="../Controls/FunctionalColorGroupControl.axaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </UserControl.Resources>
+    <SplitView
+        Name="splitView"
+        CompactPaneLength="50"
+        DisplayMode="CompactInline"
+        IsPaneOpen="{Binding #toggle.IsChecked, Mode=TwoWay}"
+        OpenPaneLength="300"
+        PanePlacement="Right">
+        <SplitView.Pane>
+            <StackPanel>
+                <ToggleButton
+                    Name="toggle"
+                    HorizontalAlignment="Right"
+                    IsChecked="True"
+                    Theme="{DynamicResource SplitViewToggleButton}" />
+                <Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
+                    <Panel>
+                        <TextBlock
+                            IsVisible="{Binding SelectedColor, Converter={x:Static ObjectConverters.IsNull}}"
+                            Text="Click on Color to Check Details"
+                            TextWrapping="Wrap" />
+                        <controls:ColorDetailControl
+                            Background="{Binding SelectedColor.Brush}"
+                            IsVisible="{Binding SelectedColor, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            ResourceKey="{Binding SelectedColor.ResourceKey}"
+                            ResourceName="{Binding SelectedColor.ColorDisplayName}" />
+                    </Panel>
+                </Border>
+            </StackPanel>
+        </SplitView.Pane>
+        <SplitView.Content>
+            <ScrollViewer>
+                <StackPanel Margin="8,0">
+                    <TextBlock
+                        Classes="H3"
+                        Text="Basic Colors"
+                        Theme="{DynamicResource TitleTextBlock}" />
+                    <TabControl>
+                        <TabItem Header="Light">
+                            <ItemsControl Margin="16" Items="{Binding LightLists}">
+                                <ItemsControl.ItemsPanel>
+                                    <ItemsPanelTemplate>
+                                        <WrapPanel Orientation="Horizontal" />
+                                    </ItemsPanelTemplate>
+                                </ItemsControl.ItemsPanel>
+                                <ItemsControl.ItemTemplate>
+                                    <DataTemplate x:DataType="viewModels:ColorListViewModel">
+                                        <ItemsControl Margin="4,0" Items="{Binding Color}">
+                                            <ItemsControl.ItemTemplate>
+                                                <DataTemplate x:DataType="viewModels:ColorItemViewModel">
+                                                    <controls:ColorItemControl
+                                                        Background="{Binding Brush}"
+                                                        ColorName="{Binding ColorDisplayName}"
+                                                        Foreground="{Binding TextBrush}"
+                                                        Hex="{Binding Hex}" />
+                                                </DataTemplate>
+                                            </ItemsControl.ItemTemplate>
+                                        </ItemsControl>
+                                    </DataTemplate>
+                                </ItemsControl.ItemTemplate>
+                            </ItemsControl>
+                        </TabItem>
+                        <TabItem Header="Dark">
+                            <ItemsControl Margin="16" Items="{Binding DarkLists}">
+                                <ItemsControl.ItemsPanel>
+                                    <ItemsPanelTemplate>
+                                        <WrapPanel Orientation="Horizontal" />
+                                    </ItemsPanelTemplate>
+                                </ItemsControl.ItemsPanel>
+                                <ItemsControl.ItemTemplate>
+                                    <DataTemplate x:DataType="viewModels:ColorListViewModel">
+                                        <ItemsControl Margin="4,0" Items="{Binding Color}">
+                                            <ItemsControl.ItemTemplate>
+                                                <DataTemplate x:DataType="viewModels:ColorItemViewModel">
+                                                    <controls:ColorItemControl
+                                                        Background="{Binding Brush}"
+                                                        ColorName="{Binding ColorDisplayName}"
+                                                        Foreground="{Binding TextBrush}"
+                                                        Hex="{Binding Hex}" />
+                                                </DataTemplate>
+                                            </ItemsControl.ItemTemplate>
+                                        </ItemsControl>
+                                    </DataTemplate>
+                                </ItemsControl.ItemTemplate>
+                            </ItemsControl>
+                        </TabItem>
+                    </TabControl>
+
+                    <ItemsControl Items="{Binding FunctionalColors}">
+                        <ItemsControl.ItemTemplate>
+                            <DataTemplate>
+                                <!--    -->
+                                <controls:FunctionalColorGroupControl
+                                    Title="{Binding Title}"
+                                    DarkColors="{Binding DarkColors}"
+                                    LightColors="{Binding LightColors}" />
+                            </DataTemplate>
+                        </ItemsControl.ItemTemplate>
+                    </ItemsControl>
+                </StackPanel>
+            </ScrollViewer>
+        </SplitView.Content>
+    </SplitView>
+</UserControl>

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

@@ -0,0 +1,29 @@
+using System.Threading.Tasks;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Markup.Xaml;
+using Avalonia.Threading;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class PaletteDemo : UserControl
+{
+    public PaletteDemo()
+    {
+        InitializeComponent();
+        
+    }
+
+    protected override async  void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        base.OnApplyTemplate(e);
+        PaletteDemoViewModel? vm = new PaletteDemoViewModel();
+        await Dispatcher.UIThread.InvokeAsync(() =>
+        {
+            vm.InitializeResources();
+        });
+        DataContext = vm;
+    }
+}

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

@@ -7,10 +7,7 @@
     d:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
-        Margin="20"
-        HorizontalAlignment="Left"
-        Spacing="20">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <ProgressBar
             Width="200"
             Maximum="100"

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

@@ -1,10 +1,11 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.RadioButtonDemo" 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">
-    <StackPanel
-        Margin="20" HorizontalAlignment="Left"
-        Spacing="20">
+    x:Class="Semi.Avalonia.Demo.Pages.RadioButtonDemo"
+    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">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <TextBlock Text="Radio Buttons" />
         <StackPanel>
             <RadioButton>111</RadioButton>

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

@@ -0,0 +1,15 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.RefreshContainerDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
+        <RefreshContainer Name="container">
+            <TextBlock Text="Content" />
+        </RefreshContainer>
+    </StackPanel>
+</UserControl>

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

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

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

@@ -1,11 +1,13 @@
-<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.RepeatButtonDemo">
-    <StackPanel Margin="20" HorizontalAlignment="Left" Spacing="20">
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.RepeatButtonDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <TextBlock>Light (Default)</TextBlock>
         <StackPanel Orientation="Horizontal" Spacing="20">
             <RepeatButton Classes="Primary">Primary</RepeatButton>
@@ -22,7 +24,12 @@
             <RepeatButton Classes="Tertiary" Theme="{DynamicResource SolidRepeatButton}">Tertiary</RepeatButton>
             <RepeatButton Classes="Warning" Theme="{DynamicResource SolidRepeatButton}">Warning</RepeatButton>
             <RepeatButton Classes="Danger" Theme="{DynamicResource SolidRepeatButton}">Danger</RepeatButton>
-            <RepeatButton Classes="Primary" IsEnabled="False" Theme="{DynamicResource SolidRepeatButton}">Danger</RepeatButton>
+            <RepeatButton
+                Classes="Primary"
+                IsEnabled="False"
+                Theme="{DynamicResource SolidRepeatButton}">
+                Danger
+            </RepeatButton>
         </StackPanel>
         <TextBlock>Borderless</TextBlock>
         <StackPanel Orientation="Horizontal" Spacing="20">
@@ -31,7 +38,12 @@
             <RepeatButton Classes="Tertiary" Theme="{DynamicResource BorderlessRepeatButton}">Tertiary</RepeatButton>
             <RepeatButton Classes="Warning" Theme="{DynamicResource BorderlessRepeatButton}">Warning</RepeatButton>
             <RepeatButton Classes="Danger" Theme="{DynamicResource BorderlessRepeatButton}">Danger</RepeatButton>
-            <RepeatButton Classes="Primary" IsEnabled="False" Theme="{DynamicResource BorderlessRepeatButton}">Danger</RepeatButton>
+            <RepeatButton
+                Classes="Primary"
+                IsEnabled="False"
+                Theme="{DynamicResource BorderlessRepeatButton}">
+                Danger
+            </RepeatButton>
         </StackPanel>
     </StackPanel>
 </UserControl>

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

@@ -7,10 +7,7 @@
     d:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
-        Margin="20"
-        HorizontalAlignment="Left"
-        Spacing="20">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <Slider
             Width="300"
             Maximum="100"
@@ -65,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"
@@ -74,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/SplitViewDemo.axaml

@@ -11,7 +11,6 @@
         <Grid ColumnDefinitions="*,400">
             <StackPanel
                 Grid.Column="1"
-                Margin="5"
                 Orientation="Vertical"
                 Spacing="4">
                 <ToggleButton
@@ -26,7 +25,6 @@
 
                 <ToggleSwitch
                     Content="Placement"
-                    IsChecked="{Binding !IsLeft}"
                     OffContent="Left"
                     OnContent="Right" />
 

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

@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel>
+    <StackPanel Spacing="20">
         <Border Theme="{StaticResource CardBorder}">
             <TabControl TabStripPlacement="Top">
                 <TabItem Content="Hello 1" Header="Tab 1" />

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

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

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

@@ -1,26 +1,46 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.TextBoxDemo" 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">
+    x:Class="Semi.Avalonia.Demo.Pages.TextBoxDemo"
+    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">
     <ScrollViewer>
         <StackPanel HorizontalAlignment="Left" Spacing="20">
             <TextBox Width="300" />
+            <TextBox Width="300" Classes="Large" />
+            <TextBox Width="300" Classes="Small" />
             <TextBox Width="300" Watermark="Please use this" />
             <TextBox Width="300" InnerLeftContent="http://" />
             <TextBox Width="300" InnerRightContent=".com" />
             <TextBox
-                Width="500" InnerLeftContent="http://"
+                Width="500"
+                InnerLeftContent="http://"
                 InnerRightContent=".com" />
             <TextBox Width="300" Classes="clearButton" />
             <TextBox Width="300" PasswordChar="*" />
             <TextBox
-                Width="300" Classes="revealPasswordButton"
+                Width="300"
+                Classes="revealPasswordButton"
                 PasswordChar="*" />
             <TextBox
-                Width="500" InnerLeftContent="http://"
+                Width="500"
+                InnerLeftContent="http://"
                 InnerRightContent=".com"
-                Theme="{StaticResource BorderlessTextBox}" />
+                IsEnabled="False" />
+            <TextBox
+                Width="500"
+                Classes="Bordered"
+                InnerLeftContent="http://"
+                InnerRightContent=".com" />
+            <TextBox
+                Width="500"
+                Classes="Bordered"
+                InnerLeftContent="http://"
+                InnerRightContent=".com"
+                IsEnabled="False" />
         </StackPanel>
     </ScrollViewer>
 </UserControl>

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

@@ -0,0 +1,21 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.ThemeVariantDemo"
+    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">
+    <Grid>
+        <ThemeVariantScope Name="scope">
+            <Border Theme="{StaticResource CardBorder}">
+                <StackPanel>
+                    <DatePicker />
+                    <CalendarDatePicker />
+                    <ToggleSwitch Content="Switch Theme" IsCheckedChanged="Switch_OnIsCheckedChanged" />
+                </StackPanel>
+            </Border>
+        </ThemeVariantScope>
+    </Grid>
+</UserControl>

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

@@ -0,0 +1,20 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Avalonia.Markup.Xaml;
+using Avalonia.Styling;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class ThemeVariantDemo : UserControl
+{
+    public ThemeVariantDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void Switch_OnIsCheckedChanged(object sender, RoutedEventArgs e)
+    {
+        scope.RequestedThemeVariant = scope.ActualThemeVariant == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
+    }
+}

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

@@ -7,10 +7,12 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="20" Spacing="20">
+    <StackPanel Spacing="20">
         <TimePicker />
         <TimePicker MinuteIncrement="15" />
         <TimePicker ClockIdentifier="24HourClock" />
         <TimePicker ClockIdentifier="12HourClock" IsEnabled="False" />
+        <TimePicker Classes="Large" />
+        <TimePicker Classes="Small" />
     </StackPanel>
 </UserControl>

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

@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="20">
+    <StackPanel>
         <TextBlock Text="Toggle Button" />
         <StackPanel Orientation="Horizontal" Spacing="20">
             <ToggleButton>Primary</ToggleButton>

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

@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="20" Spacing="20">
+    <StackPanel Spacing="20">
         <ToggleSwitch
             Content="Content"
             OffContent="OffContent"
@@ -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/Semi.Avalonia.Demo.csproj

@@ -11,11 +11,11 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia" Version="11.0.0-preview4" />
+        <PackageReference Include="Avalonia" Version="11.0.0-preview6" />
+        <PackageReference Include="Avalonia.Controls.DataGrid" Version="11.0.0-preview6" />
         <!--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-preview4" />
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.0-preview6" />
         <PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.0" />
-        <PackageReference Include="XamlNameReferenceGenerator" Version="1.5.1" />
     </ItemGroup>
 
     <ItemGroup>
@@ -42,10 +42,8 @@
     </ItemGroup>
 
     <ItemGroup>
+      <ProjectReference Include="..\..\src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj" />
+      <ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj" />
       <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj" />
     </ItemGroup>
-
-    <ItemGroup>
-      <Folder Include="ViewModels" />
-    </ItemGroup>
 </Project>

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

@@ -0,0 +1,44 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="NavigationTab" TargetType="TabControl">
+        <Setter Property="TabControl.Template">
+            <!--    -->
+            <ControlTemplate TargetType="TabControl">
+                <Border
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <DockPanel>
+                        <ScrollViewer DockPanel.Dock="Left" VerticalScrollBarVisibility="Auto">
+                            <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
+                                <ItemsPresenter Name="PART_ItemsPresenter">
+                                    <ItemsPresenter.ItemsPanel>
+                                        <ItemsPanelTemplate>
+                                            <StackPanel />
+                                        </ItemsPanelTemplate>
+                                    </ItemsPresenter.ItemsPanel>
+                                </ItemsPresenter>
+                                <Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+                            </Panel>
+                        </ScrollViewer>
+                        <ContentPresenter
+                            Name="PART_SelectedContentHost"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding SelectedContent}"
+                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
+                    </DockPanel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Border.Width" Value="1" />
+            <Setter Property="Border.VerticalAlignment" Value="Stretch" />
+            <Setter Property="Border.HorizontalAlignment" Value="Left" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

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

@@ -0,0 +1,27 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="SplitViewToggleButton" TargetType="ToggleButton">
+        <Setter Property="ToggleButton.Template">
+            <ControlTemplate TargetType="ToggleButton">
+                <Border
+                    Name="Background"
+                    Padding="8"
+                    Background="{TemplateBinding Background}"
+                    CornerRadius="3">
+                    <PathIcon
+                        Name="Icon"
+                        Width="16"
+                        Height="16"
+                        Data="M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z"
+                        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>
+    </ControlTheme>
+</ResourceDictionary>

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

@@ -0,0 +1,349 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using Avalonia.Media;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Messaging;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class PaletteDemoViewModel: ObservableObject
+{
+    private readonly string[] _predefinedColorNames = { "Amber","Blue","Cyan","Green","Grey","Indigo","LightBlue","LightGreen","Lime","Orange","Pink","Purple","Red","Teal","Violet","Yellow" };
+    private IResourceDictionary _lightResourceDictionary;
+    private IResourceDictionary _darkResourceDictionary;
+    
+    private ColorItemViewModel _selectedColor;
+
+    public ColorItemViewModel SelectedColor
+    {
+        get => _selectedColor;
+        set => SetProperty(ref _selectedColor, value);
+    }
+    
+    
+    private ObservableCollection<ColorListViewModel> _lightLists;
+    public ObservableCollection<ColorListViewModel> LightLists
+    {
+        get => _lightLists;
+        set => SetProperty(ref _lightLists, value);
+    }
+    private ObservableCollection<ColorListViewModel> _darkLists;
+    public ObservableCollection<ColorListViewModel> DarkLists
+    {
+        get => _darkLists;
+        set => SetProperty(ref _darkLists, value);
+    }
+
+    public ObservableCollection<FunctionalColorGroupViewModel> FunctionalColors { get; set; } = new();
+
+    public PaletteDemoViewModel()
+    {
+        _lightResourceDictionary = (ResourceDictionary)AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Light/Palette.axaml"));
+        _darkResourceDictionary = (ResourceDictionary)AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Dark/Palette.axaml"));
+        WeakReferenceMessenger.Default.Register<PaletteDemoViewModel, ColorItemViewModel>(this, OnClickColorItem);
+    }
+
+    public void InitializeResources()
+    {
+        InitializePalette();
+        InitializeFunctionalColors();
+    }
+
+    private void InitializePalette()
+    {
+        LightLists = new ObservableCollection<ColorListViewModel>();
+        foreach (var color in _predefinedColorNames)
+        {
+            ColorListViewModel s = new ColorListViewModel();
+            s.Initialize(_lightResourceDictionary, color, true);
+            LightLists.Add(s);
+        }
+        DarkLists = new ObservableCollection<ColorListViewModel>();
+        foreach (var color in _predefinedColorNames)
+        {
+            ColorListViewModel s = new ColorListViewModel();
+            s.Initialize(_darkResourceDictionary, color, false);
+            DarkLists.Add(s);
+        }
+    }
+
+    private void InitializeFunctionalColors()
+    {
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Primary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.PrimaryTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Secondary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SecondaryTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Tertiary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TertiaryTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Information", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.InformationTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Success", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SuccessTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Warning", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.WarningTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Danger", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DangerTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Text", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TextTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Link", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.LinkTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Background", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BackgroundTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Fill", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.FillTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Border", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BorderTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Disabled", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DisabledTokens));
+    }
+    private void OnClickColorItem(PaletteDemoViewModel vm, ColorItemViewModel item)
+    {
+        SelectedColor = item;
+    }
+}
+
+public class ColorListViewModel: ObservableObject
+{
+    private ObservableCollection<ColorItemViewModel>? _colors;
+
+    public ObservableCollection<ColorItemViewModel>? Color
+    {
+        get => _colors;
+        set => SetProperty(ref _colors, value);
+    }
+
+    private string? _seriesName;
+
+    public string? SeriesName
+    {
+        get => _seriesName;
+        set => SetProperty(ref _seriesName, value);
+    }
+    
+    internal void Initialize(IResourceDictionary resourceDictionary, string color, bool light)
+    {
+        SeriesName = color;
+        Color = new ObservableCollection<ColorItemViewModel>();
+        
+        for (int i = 0; i < 10; i++)
+        {
+            var key = "Semi" + color + i;
+            if (resourceDictionary.TryGetValue(key, out var value))
+            {
+                if (value is ISolidColorBrush brush)
+                {
+                    string name = color + " " + i;
+                    var item = new ColorItemViewModel(name, brush, key, light, i);
+                    Color.Add(item);
+                } 
+            }
+        }
+    }
+}
+
+public class ColorItemViewModel : ObservableObject
+{
+
+    private IBrush _brush;
+    public IBrush Brush
+    {
+        get => _brush;
+        set => SetProperty(ref _brush, value);
+    }
+    
+    private IBrush _textBrush;
+    public IBrush TextBrush
+    {
+        get => _textBrush;
+        set => SetProperty(ref _textBrush, value);
+    }
+
+    private string _colorDisplayName;
+    public string ColorDisplayName
+    {
+        get => _colorDisplayName;
+        set => SetProperty(ref _colorDisplayName, value);
+    }
+
+    private string _resourceKey;
+
+    public string ResourceKey
+    {
+        get => _resourceKey;
+        set => SetProperty(ref _resourceKey, value);
+    }
+
+    private string _hex;
+
+    public string Hex
+    {
+        get => _hex;
+        set => SetProperty(ref _hex, value);
+    }
+    
+    public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light, int index)
+    {
+        ColorDisplayName = colorDisplayName;
+        Brush = brush;
+        ResourceKey = resourceKey;
+        Hex = brush.ToString().ToUpperInvariant();
+        if ((light && index < 5) || (!light && index > 5))
+        {
+            TextBrush = Brushes.Black;
+        }
+        else
+        {
+            TextBrush = Brushes.White;
+        }
+    }
+}
+
+public class FunctionalColorGroupViewModel : ObservableObject
+{
+    private string _title;
+    public string Title
+    {
+        get => _title;
+        set => SetProperty(ref _title, value);
+    }
+
+    public ObservableCollection<ColorItemViewModel> LightColors { get; set; } = new();
+    public ObservableCollection<ColorItemViewModel> DarkColors { get; set; } = new();
+
+    public 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 (lightValue is ISolidColorBrush lightBrush)
+                {
+                    LightColors.Add(new ColorItemViewModel(name, lightBrush, key, true, 0));
+                }
+            }
+            if (darkDictionary.TryGetValue(key, out var darkValue))
+            {
+                if (darkValue is ISolidColorBrush darkBrush)
+                {
+                    DarkColors.Add(new ColorItemViewModel(name, darkBrush, key, true, 0));
+                }
+            }
+        }
+    }
+}
+
+public static class ColorTokens
+{
+    public static IReadOnlyList<Tuple<string, string>> PrimaryTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorPrimary", "Primary"),
+        new ("SemiColorPrimaryPointerover", "Primary Pointerover"),
+        new ("SemiColorPrimaryPressed", "Primary Pressed"),
+        new ("SemiColorPrimaryDisabled", "Primary Disabled"),
+        new ("SemiColorPrimaryLight", "Primary Light"),
+        new ("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
+        new ("SemiColorPrimaryLightActive", "Primary Light Active"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> SecondaryTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorSecondary", "Secondary"),
+        new ("SemiColorSecondaryPointerover", "Secondary Pointerover"),
+        new ("SemiColorSecondaryPressed", "Secondary Pressed"),
+        new ("SemiColorSecondaryDisabled", "Secondary Disabled"),
+        new ("SemiColorSecondaryLight", "Secondary Light"),
+        new ("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"),
+        new ("SemiColorSecondaryLightActive", "Secondary Light Active"),
+    };
+    
+    public static IReadOnlyList<Tuple<string, string>> TertiaryTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorTertiary", "Tertiary"),
+        new ("SemiColorTertiaryPointerover", "Tertiary Pointerover"),
+        new ("SemiColorTertiaryPressed", "Tertiary Pressed"),
+        new ("SemiColorTertiaryLight", "Tertiary Light"),
+        new ("SemiColorTertiaryLightPointerover", "Tertiary Light Pointerover"),
+        new ("SemiColorTertiaryLightActive", "Tertiary Light Active"),
+    };
+    
+    public static IReadOnlyList<Tuple<string, string>> InformationTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorInformation", "Information"),
+        new ("SemiColorInformationPointerover", "Information Pointerover"),
+        new ("SemiColorInformationPressed", "Information Pressed"),
+        new ("SemiColorInformationDisabled", "Information Disabled"),
+        new ("SemiColorInformationLight", "Information Light"),
+        new ("SemiColorInformationLightPointerover", "Information Light Pointerover"),
+        new ("SemiColorInformationLightActive", "Information Light Active"),
+    };
+    
+    public static IReadOnlyList<Tuple<string, string>> SuccessTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorSuccess", "Success"),
+        new ("SemiColorSuccessPointerover", "Success Pointerover"),
+        new ("SemiColorSuccessPressed", "Success Pressed"),
+        new ("SemiColorSuccessDisabled", "Success Disabled"),
+        new ("SemiColorSuccessLight", "Success Light"),
+        new ("SemiColorSuccessLightPointerover", "Success Light Pointerover"),
+        new ("SemiColorSuccessLightActive", "Success Light Active"),
+    };
+    
+    public static IReadOnlyList<Tuple<string, string>> WarningTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorWarning", "Warning"),
+        new ("SemiColorWarningPointerover", "Warning Pointerover"),
+        new ("SemiColorWarningPressed", "Warning Pressed"),
+        new ("SemiColorWarningLight", "Warning Light"),
+        new ("SemiColorWarningLightPointerover", "Warning Light Pointerover"),
+        new ("SemiColorWarningLightActive", "Warning Light Active"),
+    };
+    
+    public static IReadOnlyList<Tuple<string, string>> DangerTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorDanger", "Danger"),
+        new ("SemiColorDangerPointerover", "Danger Pointerover"),
+        new ("SemiColorDangerPressed", "Danger Pressed"),
+        new ("SemiColorDangerLight", "Danger Light"),
+        new ("SemiColorDangerLightPointerover", "Danger Light Pointerover"),
+        new ("SemiColorDangerLightActive", "Danger Light Active"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> TextTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorText0", "Text 0"),
+        new ("SemiColorText1", "Text 1"),
+        new ("SemiColorText2", "Text 2"),
+        new ("SemiColorText3", "Text 3"),
+    };
+    
+    public static IReadOnlyList<Tuple<string, string>> LinkTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorLink", "Link"),
+        new ("SemiColorLinkPointerover", "Link Pointerover"),
+        new ("SemiColorLinkActive", "Link Active"),
+        new ("SemiColorLinkVisited", "Link Visited"),
+    };
+    
+    public static IReadOnlyList<Tuple<string, string>> BackgroundTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorBackground0", "Background 0"),
+        new ("SemiColorBackground1", "Background 1"),
+        new ("SemiColorBackground2", "Background 2"),
+        new ("SemiColorBackground3", "Background 3"),
+        new ("SemiColorBackground4", "Background 4"),
+    };
+    
+    public static IReadOnlyList<Tuple<string, string>> FillTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorFill0", "Fill 0"),
+        new ("SemiColorFill1", "Fill 1"),
+        new ("SemiColorFill2", "Fill 2"),
+    };
+    
+    public static IReadOnlyList<Tuple<string, string>> BorderTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorBorder", "Border"),
+    };
+    
+    public static IReadOnlyList<Tuple<string, string>> DisabledTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorDisabledText", "Disabled Text"),
+        new ("SemiColorDisabledBorder", "Disabled Border"),
+        new ("SemiColorDisabledBackground", "Disabled Background"),
+        new ("SemiColorDisabledFill", "Disabled Fill"),
+    };
+    
+}

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

@@ -8,108 +8,182 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <TabControl
-        Margin="8"
-        HorizontalAlignment="Stretch"
-        TabStripPlacement="Left">
-        <TabItem Header="Overview">
-            <pages:Overview />
-        </TabItem>
-        <TabItem Header="AutoCompleteBox">
-            <pages:AutoCompleteBoxDemo />
-        </TabItem>
-        <TabItem Header="Border">
-            <pages:BorderDemo />
-        </TabItem>
-        <TabItem Header="Button">
-            <pages:ButtonDemo />
-        </TabItem>
-        <TabItem Header="ButtonSpinner">
-            <pages:ButtonSpinnerDemo />
-        </TabItem>
-        <TabItem Header="Calendar">
-            <pages:CalendarDemo />
-        </TabItem>
-        <TabItem Header="CalendarDatePicker">
-            <pages:CalendarDatePickerDemo />
-        </TabItem>
-        <TabItem Header="Carousel">
-            <pages:CarouselDemo />
-        </TabItem>
-        <TabItem Header="CheckBox">
-            <pages:CheckBoxDemo />
-        </TabItem>
-        <TabItem Header="ComboBox">
-            <pages:ComboBoxDemo />
-        </TabItem>
-        <TabItem Header="DatePicker">
-            <pages:DatePickerDemo />
-        </TabItem>
-        <TabItem Header="Expander">
-            <pages:ExpanderDemo />
-        </TabItem>
-        <TabItem Header="Flyout">
-            <pages:FlyoutDemo />
-        </TabItem>
-        <TabItem Header="GridSplitter">
-            <pages:GridSplitter />
-        </TabItem>
-        <TabItem Header="Label">
-            <pages:LabelDemo />
-        </TabItem>
-        <TabItem Header="ListBox">
-            <pages:ListBoxDemo />
-        </TabItem>
-        <TabItem Header="ManagedFileChooser">
-            <pages:ManagedFileChooserDemo />
-        </TabItem>
-        <TabItem Header="Menu">
-            <pages:MenuDemo />
-        </TabItem>
-        <TabItem Header="Notification">
-            <pages:NotificationDemo />
-        </TabItem>
-        <TabItem Header="NumericUpDown">
-            <pages:NumericUpDownDemo />
-        </TabItem>
-        <TabItem Header="ProgressBar">
-            <pages:ProgressBarDemo />
-        </TabItem>
-        <TabItem Header="RadioButton">
-            <pages:RadioButtonDemo />
-        </TabItem>
-        <TabItem Header="RepeatButton">
-            <pages:RepeatButtonDemo />
-        </TabItem>
-        <TabItem Header="Slider">
-            <pages:SliderDemo />
-        </TabItem>
-        <TabItem Header="SplitView">
-            <pages:SplitViewDemo />
-        </TabItem>
-        <TabItem Header="TabControl">
-            <pages:TabControlDemo />
-        </TabItem>
-        <TabItem Header="TextBlock">
-            <pages:TextBlockDemo />
-        </TabItem>
-        <TabItem Header="TextBox">
-            <pages:TextBoxDemo />
-        </TabItem>
-        <TabItem Header="TimePicker">
-            <pages:TimePickerDemo />
-        </TabItem>
-        <TabItem Header="ToggleButton">
-            <pages:ToggleButtonDemo />
-        </TabItem>
-        <TabItem Header="ToggleSwitch">
-            <pages:ToggleSwitchDemo />
-        </TabItem>
-        <TabItem Header="ToolTip">
-            <pages:ToolTipDemo />
-        </TabItem>
-        <TabItem Header="TreeView">
-            <pages:TreeViewDemo />
-        </TabItem>
-    </TabControl>
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceInclude Source="../Themes/TabMenu.axaml" />
+                <ResourceInclude Source="../Themes/ToggleButton.axaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </UserControl.Resources>
+    <Grid RowDefinitions="Auto, *">
+        <Border
+            Margin="8"
+            Padding="12,4"
+            Theme="{DynamicResource CardBorder}">
+            <Grid VerticalAlignment="Center" ColumnDefinitions="*, Auto">
+                <StackPanel Grid.Column="0" Orientation="Horizontal">
+                    <TextBlock
+                        VerticalAlignment="Center"
+                        Classes="H6"
+                        Text="Semi Avalonia"
+                        Theme="{DynamicResource TitleTextBlock}" />
+                    <TextBlock
+                        Margin="8,0"
+                        VerticalAlignment="Center"
+                        Text="/" />
+                    <TextBlock
+                        Margin="8,0"
+                        VerticalAlignment="Center"
+                        Classes="Secondary"
+                        Text="{Binding #tab.SelectedItem.Header}" />
+                </StackPanel>
+                <ToggleSwitch
+                    Grid.Column="1"
+                    Padding="4"
+                    IsCheckedChanged="ToggleButton_OnIsCheckedChanged"
+                    Theme="{DynamicResource ButtonToggleSwitch}">
+                    <ToggleSwitch.OnContent>
+                        <PathIcon
+                            Width="16"
+                            Height="16"
+                            Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z"
+                            Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
+                    </ToggleSwitch.OnContent>
+                    <ToggleSwitch.OffContent>
+                        <PathIcon
+                            Width="16"
+                            Height="16"
+                            Data="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13"
+                            Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
+                    </ToggleSwitch.OffContent>
+                </ToggleSwitch>
+            </Grid>
+
+        </Border>
+        <TabControl
+            Name="tab"
+            Grid.Row="1"
+            Margin="8"
+            Padding="20,0,0,0"
+            HorizontalAlignment="Stretch"
+            TabStripPlacement="Left"
+            Theme="{DynamicResource NavigationTab}">
+            <TabItem Header="Overview">
+                <pages:Overview />
+            </TabItem>
+            <TabItem Header="Palette">
+                <pages:PaletteDemo />
+            </TabItem>
+            <TabItem Header="AutoCompleteBox">
+                <pages:AutoCompleteBoxDemo />
+            </TabItem>
+            <TabItem Header="Border">
+                <pages:BorderDemo />
+            </TabItem>
+            <TabItem Header="Button">
+                <pages:ButtonDemo />
+            </TabItem>
+            <TabItem Header="ButtonSpinner">
+                <pages:ButtonSpinnerDemo />
+            </TabItem>
+            <TabItem Header="Calendar">
+                <pages:CalendarDemo />
+            </TabItem>
+            <TabItem Header="CalendarDatePicker">
+                <pages:CalendarDatePickerDemo />
+            </TabItem>
+            <TabItem Header="Carousel">
+                <pages:CarouselDemo />
+            </TabItem>
+            <TabItem Header="CheckBox">
+                <pages:CheckBoxDemo />
+            </TabItem>
+            <TabItem Header="ColorPicker">
+                <pages:ColorPickerDemo />
+            </TabItem>
+            <TabItem Header="ComboBox">
+                <pages:ComboBoxDemo />
+            </TabItem>
+            <TabItem Header="DataGrid">
+                <pages:DataGridDemo />
+            </TabItem>
+            <TabItem Header="DatePicker">
+                <pages:DatePickerDemo />
+            </TabItem>
+            <TabItem Header="Expander">
+                <pages:ExpanderDemo />
+            </TabItem>
+            <TabItem Header="Flyout">
+                <pages:FlyoutDemo />
+            </TabItem>
+            <TabItem Header="GridSplitter">
+                <pages:GridSplitter />
+            </TabItem>
+            <TabItem Header="Label">
+                <pages:LabelDemo />
+            </TabItem>
+            <TabItem Header="ListBox">
+                <pages:ListBoxDemo />
+            </TabItem>
+            <TabItem Header="ManagedFileChooser">
+                <pages:ManagedFileChooserDemo />
+            </TabItem>
+            <TabItem Header="Menu">
+                <pages:MenuDemo />
+            </TabItem>
+            <TabItem Header="Notification">
+                <pages:NotificationDemo />
+            </TabItem>
+            <TabItem Header="NumericUpDown">
+                <pages:NumericUpDownDemo />
+            </TabItem>
+            <TabItem Header="ProgressBar">
+                <pages:ProgressBarDemo />
+            </TabItem>
+            <TabItem Header="RadioButton">
+                <pages:RadioButtonDemo />
+            </TabItem>
+            <TabItem Header="RefreshContainer">
+                <pages:RefreshContainerDemo />
+            </TabItem>
+            <TabItem Header="RepeatButton">
+                <pages:RepeatButtonDemo />
+            </TabItem>
+            <TabItem Header="Slider">
+                <pages:SliderDemo />
+            </TabItem>
+            <TabItem Header="SplitView">
+                <pages:SplitViewDemo />
+            </TabItem>
+            <TabItem Header="TabControl">
+                <pages:TabControlDemo />
+            </TabItem>
+            <TabItem Header="TextBlock">
+                <pages:TextBlockDemo />
+            </TabItem>
+            <TabItem Header="TextBox">
+                <pages:TextBoxDemo />
+            </TabItem>
+            <TabItem Header="ThemeVariantScope">
+                <pages:ThemeVariantDemo />
+            </TabItem>
+            <TabItem Header="TimePicker">
+                <pages:TimePickerDemo />
+            </TabItem>
+            <TabItem Header="ToggleButton">
+                <pages:ToggleButtonDemo />
+            </TabItem>
+            <TabItem Header="ToggleSwitch">
+                <pages:ToggleSwitchDemo />
+            </TabItem>
+            <TabItem Header="ToolTip">
+                <pages:ToolTipDemo />
+            </TabItem>
+            <TabItem Header="TreeView">
+                <pages:TreeViewDemo />
+            </TabItem>
+        </TabControl>
+    </Grid>
+
 </UserControl>

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

@@ -1,4 +1,7 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Avalonia.Styling;
 
 namespace Semi.Avalonia.Demo.Views;
 
@@ -8,4 +11,14 @@ public partial class MainView : UserControl
     {
         InitializeComponent();
     }
+
+    private void ToggleButton_OnIsCheckedChanged(object sender, RoutedEventArgs e)
+    {
+        var app = Application.Current;
+        if (app is not null)
+        {
+            var theme = app.ActualThemeVariant;
+            app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
+        }
+    }
 }

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

@@ -5,19 +5,8 @@ namespace Semi.Avalonia.Demo.Views;
 
 public partial class MainWindow : Window
 {
-    private readonly WindowNotificationManager _manager;
     public MainWindow()
     {
         InitializeComponent();
-        _manager = new WindowNotificationManager(this)
-        {
-            Position = NotificationPosition.TopLeft,
-            MaxItems = 3
-        };
-    }
-    
-    internal void Notify(NotificationType t)
-    {
-        _manager.Show(new Notification(t.ToString(), "This is a notification message", t));
     }
 }

src/Package.props

@@ -0,0 +1,12 @@
+<Project>
+    <PropertyGroup>
+        <TargetFrameworks>net6.0;netstandard2.0</TargetFrameworks>
+        <Nullable>enable</Nullable>
+        <LangVersion>10</LangVersion>
+        <Version>0.1.0-preview6</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-preview6</AvaloniaVersion>
+    </PropertyGroup>
+</Project>

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

@@ -0,0 +1,470 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Avalonia.Controls"
+    xmlns:converters="using:Avalonia.Controls.Converters"
+    xmlns:primitives="using:Avalonia.Controls.Primitives"
+    x:CompileBindings="True">
+    <!--  Add Resources Here  -->
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorView.axaml" />
+    </ResourceDictionary.MergedDictionaries>
+
+    <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
+    <converters:ToBrushConverter x:Key="ToBrushConverter" />
+
+    <ControlTheme x:Key="{x:Type ColorPicker}" TargetType="ColorPicker">
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="Height" Value="32" />
+        <Setter Property="Width" Value="64" />
+        <Setter Property="MinWidth" Value="64" />
+        <Setter Property="Palette">
+            <controls:FluentColorPalette />
+        </Setter>
+        <Setter Property="Template">
+            <ControlTemplate TargetType="{x:Type ColorPicker}">
+                <DropDownButton
+                    Width="{TemplateBinding Width}"
+                    Height="{TemplateBinding Height}"
+                    Padding="0,0,10,0"
+                    HorizontalContentAlignment="Stretch"
+                    VerticalContentAlignment="Stretch"
+                    ClipToBounds="True"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    UseLayoutRounding="False">
+                    <DropDownButton.Styles>
+                        <Style Selector="FlyoutPresenter.nopadding">
+                            <Setter Property="Padding" Value="0" />
+                        </Style>
+                    </DropDownButton.Styles>
+                    <DropDownButton.Content>
+                        <!--  Preview color  -->
+                        <Panel>
+                            <Border
+                                Margin="1,1,0,1"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
+                                CornerRadius="{TemplateBinding CornerRadius,
+                                                               Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+                            <Border
+                                Margin="1,1,0,1"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Background="{TemplateBinding HsvColor,
+                                                             Converter={StaticResource ToBrushConverter}}"
+                                CornerRadius="{TemplateBinding CornerRadius,
+                                                               Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+                        </Panel>
+                    </DropDownButton.Content>
+                    <DropDownButton.Flyout>
+                        <Flyout FlyoutPresenterClasses="nopadding" Placement="AnchorAndGravity">
+
+                            <!--
+                                The following is copy-pasted from the ColorView's control template.
+                                It MUST always be kept in sync with the ColorView (which is master).
+                                Note the only changes are resources specific to the ColorPicker.
+                            -->
+                            <Grid
+                                Name="RootGrid"
+                                Width="300"
+                                Height="300"
+                                RowDefinitions="*,Auto">
+                                <Grid.Styles />
+                                <!--  Backgrounds  -->
+                                <!--  TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}"  -->
+                                <Border
+                                    x:Name="ContentBackgroundBorder"
+                                    Grid.Row="0"
+                                    Grid.RowSpan="2"
+                                    Height="{TemplateBinding Height}"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
+                                    Background="{DynamicResource ColorViewContentBackgroundBrush}"
+                                    BorderBrush="{DynamicResource ColorViewContentBorderBrush}"
+                                    BorderThickness="0,1,0,0"
+                                    CornerRadius="{TemplateBinding CornerRadius}" />
+
+                                <TabControl
+                                    x:Name="PART_TabControl"
+                                    Grid.Row="0"
+                                    Padding="0"
+                                    VerticalAlignment="Stretch"
+                                    HorizontalContentAlignment="Stretch"
+                                    SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
+                                    <TabControl.Styles>
+                                        <Style Selector="TabItem">
+                                            <Setter Property="MinHeight" Value="32" />
+                                        </Style>
+                                        <Style Selector="TabItem:selected">
+                                            <Setter Property="Foreground" Value="{DynamicResource ColorViewTabItemSelectedForeground}" />
+                                        </Style>
+                                    </TabControl.Styles>
+                                    <TabControl.ItemsPanel>
+                                        <ItemsPanelTemplate>
+                                            <UniformGrid Columns="0" Rows="1" />
+                                        </ItemsPanelTemplate>
+                                    </TabControl.ItemsPanel>
+                                    <!--  Spectrum Tab  -->
+                                    <TabItem IsVisible="{TemplateBinding IsColorSpectrumVisible}">
+                                        <TabItem.Header>
+                                            <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                                <PathIcon
+                                                    Width="16"
+                                                    Height="16"
+                                                    Data="{DynamicResource ColorViewSpectrumIconGlyph}"
+                                                    Foreground="{Binding $parent[TabItem].Foreground}" />
+                                            </Border>
+                                        </TabItem.Header>
+                                        <Grid Margin="12" RowDefinitions="*">
+                                            <Grid.ColumnDefinitions>
+                                                <ColumnDefinition Width="Auto" MinWidth="32" />
+                                                <ColumnDefinition Width="*" />
+                                                <ColumnDefinition Width="Auto" MinWidth="32" />
+                                            </Grid.ColumnDefinitions>
+                                            <primitives:ColorSlider
+                                                x:Name="ColorSpectrumThirdComponentSlider"
+                                                Grid.Column="0"
+                                                Margin="0,0,12,0"
+                                                HorizontalAlignment="Center"
+                                                VerticalAlignment="Stretch"
+                                                AutomationProperties.Name="Third Component"
+                                                ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}"
+                                                ColorModel="Hsva"
+                                                HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
+                                                IsAlphaMaxForced="True"
+                                                IsSaturationValueMaxForced="False"
+                                                IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
+                                                Orientation="Vertical" />
+                                            <primitives:ColorSpectrum
+                                                x:Name="ColorSpectrum"
+                                                Grid.Column="1"
+                                                HorizontalAlignment="Stretch"
+                                                VerticalAlignment="Stretch"
+                                                Components="{TemplateBinding ColorSpectrumComponents}"
+                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                MaxHue="{TemplateBinding MaxHue}"
+                                                MaxSaturation="{TemplateBinding MaxSaturation}"
+                                                MaxValue="{TemplateBinding MaxValue}"
+                                                MinHue="{TemplateBinding MinHue}"
+                                                MinSaturation="{TemplateBinding MinSaturation}"
+                                                MinValue="{TemplateBinding MinValue}"
+                                                Shape="{TemplateBinding ColorSpectrumShape}" />
+                                            <primitives:ColorSlider
+                                                x:Name="ColorSpectrumAlphaSlider"
+                                                Grid.Column="2"
+                                                Margin="12,0,0,0"
+                                                HorizontalAlignment="Center"
+                                                VerticalAlignment="Stretch"
+                                                AutomationProperties.Name="Alpha Component"
+                                                ColorComponent="Alpha"
+                                                ColorModel="Hsva"
+                                                HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
+                                                IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                                                Orientation="Vertical">
+                                                <primitives:ColorSlider.IsVisible>
+                                                    <MultiBinding Converter="{x:Static BoolConverters.And}">
+                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                    </MultiBinding>
+                                                </primitives:ColorSlider.IsVisible>
+                                            </primitives:ColorSlider>
+                                        </Grid>
+                                    </TabItem>
+                                    <!--  Palette Tab  -->
+                                    <TabItem IsVisible="{TemplateBinding IsColorPaletteVisible}">
+                                        <TabItem.Header>
+                                            <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                                <PathIcon
+                                                    Width="16"
+                                                    Height="16"
+                                                    Data="{DynamicResource ColorViewPaletteIconGlyph}"
+                                                    Foreground="{Binding $parent[TabItem].Foreground}" />
+                                            </Border>
+                                        </TabItem.Header>
+                                        <ListBox
+                                            Margin="12"
+                                            VerticalAlignment="Stretch"
+                                            ItemContainerTheme="{DynamicResource ColorViewPaletteListBoxItemTheme}"
+                                            Items="{TemplateBinding PaletteColors}"
+                                            SelectedItem="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DoNothingForNullConverter}, Mode=TwoWay}"
+                                            Theme="{DynamicResource ColorViewPaletteListBoxTheme}"
+                                            UseLayoutRounding="False">
+                                            <ListBox.ItemTemplate>
+                                                <DataTemplate DataType="{x:Type Color}">
+                                                    <Border
+                                                        HorizontalAlignment="Stretch"
+                                                        VerticalAlignment="Stretch"
+                                                        AutomationProperties.Name="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
+                                                        ToolTip.Tip="{Binding Converter={StaticResource ColorToDisplayNameConverter}}">
+                                                        <Border.Background>
+                                                            <SolidColorBrush Color="{Binding}" />
+                                                        </Border.Background>
+                                                    </Border>
+                                                </DataTemplate>
+                                            </ListBox.ItemTemplate>
+                                            <ListBox.ItemsPanel>
+                                                <ItemsPanelTemplate>
+                                                    <UniformGrid Columns="{Binding $parent[ColorView].PaletteColumnCount}" />
+                                                </ItemsPanelTemplate>
+                                            </ListBox.ItemsPanel>
+                                        </ListBox>
+                                    </TabItem>
+                                    <!--  Components Tab  -->
+                                    <TabItem IsVisible="{TemplateBinding IsColorComponentsVisible}">
+                                        <TabItem.Header>
+                                            <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                                <PathIcon
+                                                    Width="16"
+                                                    Height="16"
+                                                    Data="{DynamicResource ColorViewComponentsIconGlyph}"
+                                                    Foreground="{Binding $parent[TabItem].Foreground}" />
+                                            </Border>
+                                        </TabItem.Header>
+                                        <Grid
+                                            Margin="12"
+                                            ColumnDefinitions="Auto,*"
+                                            RowDefinitions="Auto,24,1*,1*,1*,1*,12"
+                                            Tag="{TemplateBinding ColorModel}">
+                                            <Grid.Styles>
+                                                <Style Selector="NumericUpDown /template/ TextBox">
+                                                    <Setter Property="InnerLeftContent">
+                                                        <Template>
+                                                            <TextBlock Width="12" Text="{Binding $parent[NumericUpDown].Tag}" />
+                                                        </Template>
+                                                    </Setter>
+                                                </Style>
+                                                <Style Selector="Grid[Tag=Rgba]">
+                                                    <Style Selector="^ NumericUpDown#Component1NumericUpDown">
+                                                        <Setter Property="NumericUpDown.Tag" Value="R" />
+                                                    </Style>
+                                                    <Style Selector="^ NumericUpDown#Component2NumericUpDown">
+                                                        <Setter Property="NumericUpDown.Tag" Value="G" />
+                                                    </Style>
+                                                    <Style Selector="^ NumericUpDown#Component3NumericUpDown">
+                                                        <Setter Property="NumericUpDown.Tag" Value="B" />
+                                                    </Style>
+                                                    <Style Selector="^ NumericUpDown#AlphaComponentNumericUpDown">
+                                                        <Setter Property="NumericUpDown.Tag" Value="A" />
+                                                    </Style>
+                                                </Style>
+                                                <Style Selector="Grid[Tag=Hsva]">
+                                                    <Style Selector="^ NumericUpDown#Component1NumericUpDown">
+                                                        <Setter Property="NumericUpDown.Tag" Value="H" />
+                                                    </Style>
+                                                    <Style Selector="^ NumericUpDown#Component2NumericUpDown">
+                                                        <Setter Property="NumericUpDown.Tag" Value="S" />
+                                                    </Style>
+                                                    <Style Selector="^ NumericUpDown#Component3NumericUpDown">
+                                                        <Setter Property="NumericUpDown.Tag" Value="V" />
+                                                    </Style>
+                                                    <Style Selector="^ NumericUpDown#AlphaComponentNumericUpDown">
+                                                        <Setter Property="NumericUpDown.Tag" Value="A" />
+                                                    </Style>
+                                                </Style>
+                                            </Grid.Styles>
+                                            <!--  Top color model & Hex input  -->
+                                            <Grid
+                                                Grid.Row="0"
+                                                Grid.Column="0"
+                                                Grid.ColumnSpan="2"
+                                                ColumnDefinitions="1*,12,1*">
+                                                <!--  RadioButtonGroup  -->
+                                                <Border
+                                                    Padding="2"
+                                                    Background="{DynamicResource ColorViewRadioButtonPointeroverBackground}"
+                                                    CornerRadius="3">
+                                                    <Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
+                                                        <RadioButton
+                                                            x:Name="RgbRadioButton"
+                                                            Grid.Column="0"
+                                                            HorizontalContentAlignment="Center"
+                                                            VerticalContentAlignment="Center"
+                                                            Content="RGB"
+                                                            CornerRadius="3,0,0,3"
+                                                            IsChecked="{TemplateBinding ColorModel,
+                                                                                        Converter={StaticResource EnumToBoolConverter},
+                                                                                        ConverterParameter={x:Static controls:ColorModel.Rgba},
+                                                                                        Mode=TwoWay}"
+                                                            Theme="{DynamicResource ColorViewRadioButton}" />
+                                                        <RadioButton
+                                                            x:Name="HsvRadioButton"
+                                                            Grid.Column="1"
+                                                            HorizontalContentAlignment="Center"
+                                                            VerticalContentAlignment="Center"
+                                                            Content="HSV"
+                                                            CornerRadius="0,3,3,0"
+                                                            IsChecked="{TemplateBinding ColorModel,
+                                                                                        Converter={StaticResource EnumToBoolConverter},
+                                                                                        ConverterParameter={x:Static controls:ColorModel.Hsva},
+                                                                                        Mode=TwoWay}"
+                                                            Theme="{DynamicResource ColorViewRadioButton}" />
+                                                    </Grid>
+                                                </Border>
+                                                <TextBox
+                                                    x:Name="PART_HexTextBox"
+                                                    Grid.Column="2"
+                                                    Height="32"
+                                                    HorizontalAlignment="Stretch"
+                                                    AutomationProperties.Name="Hexadecimal Color"
+                                                    InnerLeftContent="#"
+                                                    IsVisible="{TemplateBinding IsHexInputVisible}"
+                                                    MaxLength="9" />
+                                            </Grid>
+                                            <!--  Color component editing controls  -->
+                                            <!--  Component 1 RGB:Red HSV:Hue  -->
+                                            <NumericUpDown
+                                                x:Name="Component1NumericUpDown"
+                                                Grid.Row="2"
+                                                Grid.Column="0"
+                                                Width="{DynamicResource ColorViewNumericUpDownWidth}"
+                                                Margin="0,0,12,0"
+                                                VerticalAlignment="Center"
+                                                AllowSpin="True"
+                                                IsVisible="{TemplateBinding IsComponentTextInputVisible}"
+                                                Maximum="{Binding Maximum, ElementName=Component1Slider}"
+                                                Minimum="{Binding Minimum, ElementName=Component1Slider}"
+                                                NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                                ShowButtonSpinner="False"
+                                                Value="{Binding Value, ElementName=Component1Slider}" />
+                                            <primitives:ColorSlider
+                                                x:Name="Component1Slider"
+                                                Grid.Row="2"
+                                                Grid.Column="1"
+                                                HorizontalAlignment="Stretch"
+                                                VerticalAlignment="Center"
+                                                ColorComponent="Component1"
+                                                ColorModel="{TemplateBinding ColorModel,
+                                                                             Mode=OneWay}"
+                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                IsRoundingEnabled="True"
+                                                IsSnapToTickEnabled="True"
+                                                IsVisible="{TemplateBinding IsComponentSliderVisible}"
+                                                Orientation="Horizontal"
+                                                TickFrequency="1" />
+                                            <!--  Component 2 RGB:Green HSV:Saturation  -->
+                                            <NumericUpDown
+                                                x:Name="Component2NumericUpDown"
+                                                Grid.Row="3"
+                                                Grid.Column="0"
+                                                Width="{DynamicResource ColorViewNumericUpDownWidth}"
+                                                Margin="0,0,12,0"
+                                                VerticalAlignment="Center"
+                                                AllowSpin="True"
+                                                IsVisible="{TemplateBinding IsComponentTextInputVisible}"
+                                                Maximum="{Binding Maximum, ElementName=Component2Slider}"
+                                                Minimum="{Binding Minimum, ElementName=Component2Slider}"
+                                                NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                                ShowButtonSpinner="False"
+                                                Value="{Binding Value, ElementName=Component2Slider}" />
+                                            <primitives:ColorSlider
+                                                x:Name="Component2Slider"
+                                                Grid.Row="3"
+                                                Grid.Column="1"
+                                                HorizontalAlignment="Stretch"
+                                                VerticalAlignment="Center"
+                                                ColorComponent="Component2"
+                                                ColorModel="{TemplateBinding ColorModel,
+                                                                             Mode=OneWay}"
+                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                IsRoundingEnabled="True"
+                                                IsSnapToTickEnabled="True"
+                                                IsVisible="{TemplateBinding IsComponentSliderVisible}"
+                                                Orientation="Horizontal"
+                                                TickFrequency="1" />
+                                            <!--  Component 3 RGB:Blue HSV:Value  -->
+                                            <NumericUpDown
+                                                x:Name="Component3NumericUpDown"
+                                                Grid.Row="4"
+                                                Grid.Column="0"
+                                                Width="{DynamicResource ColorViewNumericUpDownWidth}"
+                                                Margin="0,0,12,0"
+                                                VerticalAlignment="Center"
+                                                AllowSpin="True"
+                                                IsVisible="{TemplateBinding IsComponentTextInputVisible}"
+                                                Maximum="{Binding Maximum, ElementName=Component3Slider}"
+                                                Minimum="{Binding Minimum, ElementName=Component3Slider}"
+                                                NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                                ShowButtonSpinner="False"
+                                                Value="{Binding Value, ElementName=Component3Slider}" />
+                                            <primitives:ColorSlider
+                                                x:Name="Component3Slider"
+                                                Grid.Row="4"
+                                                Grid.Column="1"
+                                                HorizontalAlignment="Stretch"
+                                                VerticalAlignment="Center"
+                                                ColorComponent="Component3"
+                                                ColorModel="{TemplateBinding ColorModel,
+                                                                             Mode=OneWay}"
+                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                IsRoundingEnabled="True"
+                                                IsSnapToTickEnabled="True"
+                                                IsVisible="{TemplateBinding IsComponentSliderVisible}"
+                                                Orientation="Horizontal"
+                                                TickFrequency="1" />
+                                            <!--  Alpha Component  -->
+                                            <NumericUpDown
+                                                x:Name="AlphaComponentNumericUpDown"
+                                                Grid.Row="5"
+                                                Grid.Column="0"
+                                                Width="{DynamicResource ColorViewNumericUpDownWidth}"
+                                                Margin="0,0,12,0"
+                                                VerticalAlignment="Center"
+                                                AllowSpin="True"
+                                                IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                                                Maximum="{Binding Maximum, ElementName=AlphaComponentSlider}"
+                                                Minimum="{Binding Minimum, ElementName=AlphaComponentSlider}"
+                                                NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                                ShowButtonSpinner="False"
+                                                Value="{Binding Value, ElementName=AlphaComponentSlider}">
+                                                <NumericUpDown.IsVisible>
+                                                    <MultiBinding Converter="{x:Static BoolConverters.And}">
+                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                        <Binding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                    </MultiBinding>
+                                                </NumericUpDown.IsVisible>
+                                            </NumericUpDown>
+                                            <primitives:ColorSlider
+                                                x:Name="AlphaComponentSlider"
+                                                Grid.Row="5"
+                                                Grid.Column="1"
+                                                HorizontalAlignment="Stretch"
+                                                VerticalAlignment="Center"
+                                                ColorComponent="Alpha"
+                                                ColorModel="{TemplateBinding ColorModel,
+                                                                             Mode=OneWay}"
+                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                                                IsRoundingEnabled="True"
+                                                IsSnapToTickEnabled="True"
+                                                Orientation="Horizontal"
+                                                TickFrequency="1">
+                                                <primitives:ColorSlider.IsVisible>
+                                                    <MultiBinding Converter="{x:Static BoolConverters.And}">
+                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                        <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                    </MultiBinding>
+                                                </primitives:ColorSlider.IsVisible>
+                                            </primitives:ColorSlider>
+                                        </Grid>
+                                    </TabItem>
+                                </TabControl>
+                                <!--  Previewer  -->
+                                <!--  Note that top/bottom margins have -5 to remove for drop shadow padding  -->
+                                <primitives:ColorPreviewer
+                                    Grid.Row="1"
+                                    Margin="12,-5,12,7"
+                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
+                                    IsVisible="{TemplateBinding IsColorPreviewVisible}" />
+                            </Grid>
+                        </Flyout>
+                    </DropDownButton.Flyout>
+                </DropDownButton>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+</ResourceDictionary>

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

@@ -0,0 +1,120 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="using:Avalonia.Controls.Converters"
+    xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
+    x:CompileBindings="True">
+    <!--  Add Resources Here  -->
+    <pc:AccentColorConverter x:Key="AccentColorConverter" />
+    <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
+    <converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight" />
+
+    <ControlTheme x:Key="{x:Type ColorPreviewer}" TargetType="ColorPreviewer">
+        <Setter Property="Height" Value="{DynamicResource ColorPreviewerHeight}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ColorPreviewerCornerRadius}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="{x:Type ColorPreviewer}">
+                <Panel>
+                    <!--  Preview color with accents to the left and right  -->
+                    <Grid ColumnDefinitions="Auto,*,Auto" IsVisible="{TemplateBinding IsAccentColorsVisible}">
+                        <!--  Left accent colors  -->
+                        <Grid
+                            Grid.Column="0"
+                            Width="{DynamicResource ColorPreviewerAccentSectionWidth}"
+                            Height="{DynamicResource ColorPreviewerAccentSectionHeight}"
+                            VerticalAlignment="Center"
+                            ColumnDefinitions="*,*">
+                            <Border
+                                Grid.Column="0"
+                                Grid.ColumnSpan="2"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" />
+                            <Border
+                                x:Name="PART_AccentDecrement2Border"
+                                Grid.Column="0"
+                                Background="{TemplateBinding HsvColor,
+                                                             Converter={StaticResource AccentColorConverter},
+                                                             ConverterParameter='-2'}"
+                                CornerRadius="{TemplateBinding CornerRadius,
+                                                               Converter={StaticResource LeftCornerRadiusFilterConverter}}"
+                                Tag="-2" />
+                            <Border
+                                x:Name="PART_AccentDecrement1Border"
+                                Grid.Column="1"
+                                Background="{TemplateBinding HsvColor,
+                                                             Converter={StaticResource AccentColorConverter},
+                                                             ConverterParameter='-1'}"
+                                Tag="-1" />
+                        </Grid>
+                        <!--  Right accent colors  -->
+                        <Grid
+                            Grid.Column="2"
+                            Width="{DynamicResource ColorPreviewerAccentSectionWidth}"
+                            Height="{DynamicResource ColorPreviewerAccentSectionHeight}"
+                            VerticalAlignment="Center"
+                            ColumnDefinitions="*,*">
+                            <Border
+                                Grid.Column="0"
+                                Grid.ColumnSpan="2"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" />
+                            <Border
+                                x:Name="PART_AccentIncrement1Border"
+                                Grid.Column="0"
+                                Background="{TemplateBinding HsvColor,
+                                                             Converter={StaticResource AccentColorConverter},
+                                                             ConverterParameter='1'}"
+                                Tag="1" />
+                            <Border
+                                x:Name="PART_AccentIncrement2Border"
+                                Grid.Column="1"
+                                Background="{TemplateBinding HsvColor,
+                                                             Converter={StaticResource AccentColorConverter},
+                                                             ConverterParameter='2'}"
+                                CornerRadius="{TemplateBinding CornerRadius,
+                                                               Converter={StaticResource RightCornerRadiusFilterConverter}}"
+                                Tag="2" />
+                        </Grid>
+                        <!--  Preview color: Must be last for drop shadow Z-index  -->
+                        <Border
+                            Grid.Column="1"
+                            Margin="0,8"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            BoxShadow="{DynamicResource ColorPreviewerMainBoxShadow}"
+                            CornerRadius="{TemplateBinding CornerRadius}">
+                            <Panel>
+                                <Border Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" CornerRadius="{TemplateBinding CornerRadius}" />
+                                <Border
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
+                                    Background="{TemplateBinding HsvColor,
+                                                                 Converter={StaticResource ToBrushConverter}}"
+                                    CornerRadius="{TemplateBinding CornerRadius}" />
+                            </Panel>
+                        </Border>
+                    </Grid>
+                    <!--  Only preview color  -->
+                    <Border
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        IsVisible="{TemplateBinding IsAccentColorsVisible,
+                                                    Converter={x:Static BoolConverters.Not}}">
+                        <Panel>
+                            <Border Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" CornerRadius="{TemplateBinding CornerRadius}" />
+                            <Border
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Background="{TemplateBinding HsvColor,
+                                                             Converter={StaticResource ToBrushConverter}}"
+                                CornerRadius="{TemplateBinding CornerRadius}" />
+                        </Panel>
+                    </Border>
+                </Panel>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

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

@@ -0,0 +1,221 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="using:Avalonia.Controls.Converters"
+    x:CompileBindings="True">
+    <!--  Add Resources Here  -->
+
+    <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
+    <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
+
+    <ControlTheme x:Key="ColorSliderThumbTheme" TargetType="Thumb">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ColorSliderDefaultBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource ColorSliderThumbBorderBrush}" />
+        <Setter Property="CornerRadius" Value="999" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate>
+                    <Border
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type ColorSlider}" TargetType="ColorSlider">
+        <Style Selector="^:horizontal">
+            <Setter Property="BorderThickness" Value="0" />
+            <Setter Property="CornerRadius" Value="{DynamicResource ColorSliderCornerRadius}" />
+            <Setter Property="Height" Value="{DynamicResource ColorSliderWidth}" />
+            <Setter Property="Template">
+                <ControlTemplate TargetType="{x:Type ColorSlider}">
+                    <Border
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid Margin="{TemplateBinding Padding}">
+                            <Rectangle
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Rectangle
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Fill="{TemplateBinding Background}"
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Track
+                                Name="PART_Track"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                                Maximum="{TemplateBinding Maximum}"
+                                Minimum="{TemplateBinding Minimum}"
+                                Orientation="Horizontal"
+                                Value="{TemplateBinding Value,
+                                                        Mode=TwoWay}">
+                                <Track.DecreaseButton>
+                                    <RepeatButton
+                                        Name="PART_DecreaseButton"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        Background="Transparent"
+                                        Focusable="False">
+                                        <RepeatButton.Template>
+                                            <ControlTemplate>
+                                                <Border
+                                                    Name="FocusTarget"
+                                                    Margin="0,-8"
+                                                    Background="Transparent" />
+                                            </ControlTemplate>
+                                        </RepeatButton.Template>
+                                    </RepeatButton>
+                                </Track.DecreaseButton>
+                                <Track.IncreaseButton>
+                                    <RepeatButton
+                                        Name="PART_IncreaseButton"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        Background="Transparent"
+                                        Focusable="False">
+                                        <RepeatButton.Template>
+                                            <ControlTemplate>
+                                                <Border
+                                                    Name="FocusTarget"
+                                                    Margin="0,-8"
+                                                    Background="Transparent" />
+                                            </ControlTemplate>
+                                        </RepeatButton.Template>
+                                    </RepeatButton>
+                                </Track.IncreaseButton>
+                                <Thumb
+                                    Name="ColorSliderThumb"
+                                    Width="16"
+                                    Height="16"
+                                    Margin="0"
+                                    Padding="0"
+                                    DataContext="{TemplateBinding Value}"
+                                    Theme="{StaticResource ColorSliderThumbTheme}" />
+                            </Track>
+                        </Grid>
+                    </Border>
+                </ControlTemplate>
+            </Setter>
+        </Style>
+
+        <Style Selector="^:vertical">
+            <Setter Property="BorderThickness" Value="0" />
+            <Setter Property="CornerRadius" Value="{DynamicResource ColorSliderCornerRadius}" />
+            <Setter Property="Width" Value="{DynamicResource ColorSliderWidth}" />
+            <Setter Property="Template">
+                <ControlTemplate TargetType="{x:Type ColorSlider}">
+                    <Border
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid Margin="{TemplateBinding Padding}">
+                            <Rectangle
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Rectangle
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Fill="{TemplateBinding Background}"
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Track
+                                Name="PART_Track"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                                Maximum="{TemplateBinding Maximum}"
+                                Minimum="{TemplateBinding Minimum}"
+                                Orientation="Vertical"
+                                Value="{TemplateBinding Value,
+                                                        Mode=TwoWay}">
+                                <Track.DecreaseButton>
+                                    <RepeatButton
+                                        Name="PART_DecreaseButton"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        Background="Transparent"
+                                        Focusable="False">
+                                        <RepeatButton.Template>
+                                            <ControlTemplate>
+                                                <Border
+                                                    Name="FocusTarget"
+                                                    Margin="0,-8"
+                                                    Background="Transparent" />
+                                            </ControlTemplate>
+                                        </RepeatButton.Template>
+                                    </RepeatButton>
+                                </Track.DecreaseButton>
+                                <Track.IncreaseButton>
+                                    <RepeatButton
+                                        Name="PART_IncreaseButton"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        Background="Transparent"
+                                        Focusable="False">
+                                        <RepeatButton.Template>
+                                            <ControlTemplate>
+                                                <Border
+                                                    Name="FocusTarget"
+                                                    Margin="0,-8"
+                                                    Background="Transparent" />
+                                            </ControlTemplate>
+                                        </RepeatButton.Template>
+                                    </RepeatButton>
+                                </Track.IncreaseButton>
+                                <Thumb
+                                    Name="ColorSliderThumb"
+                                    Width="{TemplateBinding Width}"
+                                    Height="{TemplateBinding Width}"
+                                    Margin="0"
+                                    Padding="0"
+                                    DataContext="{TemplateBinding Value}"
+                                    Theme="{StaticResource ColorSliderThumbTheme}" />
+                            </Track>
+                        </Grid>
+                    </Border>
+                </ControlTemplate>
+            </Setter>
+        </Style>
+
+        <!--  Selector/Thumb Color  -->
+        <Style Selector="^:pointerover /template/ Thumb#ColorSliderThumb">
+            <Setter Property="Opacity" Value="0.75" />
+        </Style>
+        <Style Selector="^:pointerover:dark-selector /template/ Thumb#ColorSliderThumb">
+            <Setter Property="Opacity" Value="0.7" />
+        </Style>
+        <Style Selector="^:pointerover:light-selector /template/ Thumb#ColorSliderThumb">
+            <Setter Property="Opacity" Value="0.8" />
+        </Style>
+
+        <Style Selector="^:dark-selector /template/ Thumb#ColorSliderThumb">
+            <Setter Property="BorderBrush" Value="{DynamicResource ColorSliderDarkBorderBrush}" />
+        </Style>
+        <Style Selector="^:light-selector /template/ Thumb#ColorSliderThumb">
+            <Setter Property="BorderBrush" Value="{DynamicResource ColorSliderLightBorderBrush}" />
+        </Style>
+
+    </ControlTheme>
+</ResourceDictionary>

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

@@ -0,0 +1,167 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Avalonia.Controls"
+    xmlns:converters="using:Avalonia.Controls.Converters"
+    x:CompileBindings="True">
+    <!--  Add Resources Here  -->
+    <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
+    <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
+    <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
+
+
+    <ControlTheme x:Key="{x:Type ColorSpectrum}" TargetType="ColorSpectrum">
+        <Setter Property="CornerRadius" Value="6" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type ColorSpectrum}">
+                    <Panel
+                        x:Name="PART_LayoutRoot"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch">
+                        <Panel
+                            x:Name="PART_SizingPanel"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            ClipToBounds="True">
+                            <Rectangle
+                                x:Name="PART_SpectrumRectangle"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Rectangle
+                                x:Name="PART_SpectrumOverlayRectangle"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Ellipse
+                                x:Name="PART_SpectrumEllipse"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
+                            <Ellipse
+                                x:Name="PART_SpectrumOverlayEllipse"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
+                            <Canvas
+                                x:Name="PART_InputTarget"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Background="Transparent">
+                                <!--  Note: ToolTip.VerticalOffset is for touch devices to keep the tip above fingers  -->
+                                <Panel
+                                    x:Name="PART_SelectionEllipsePanel"
+                                    ToolTip.Placement="Top"
+                                    ToolTip.VerticalOffset="-10">
+                                    <Ellipse
+                                        x:Name="FocusEllipse"
+                                        Margin="-2"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        IsHitTestVisible="False"
+                                        StrokeThickness="2" />
+                                    <Ellipse
+                                        x:Name="SelectionEllipse"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        IsHitTestVisible="False"
+                                        StrokeThickness="2" />
+                                    <ToolTip.Tip>
+                                        <!--  Set in code-behind  -->
+                                    </ToolTip.Tip>
+                                </Panel>
+                            </Canvas>
+                            <Rectangle
+                                x:Name="BorderRectangle"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Ellipse
+                                x:Name="BorderEllipse"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
+                        </Panel>
+                    </Panel>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+
+        <!--  Normal  -->
+        <!--  Separating this allows easier customization in applications  -->
+        <Style Selector="^ /template/ Ellipse#BorderEllipse,                      ^ /template/ Rectangle#BorderRectangle">
+            <Setter Property="Stroke" Value="{DynamicResource ColorSpectrumBorderBrush}" />
+            <Setter Property="StrokeThickness" Value="1" />
+        </Style>
+
+        <!--  Focus  -->
+        <Style Selector="^ /template/ Ellipse#FocusEllipse">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+        <Style Selector="^:focus-visible /template/ Ellipse#FocusEllipse">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+
+        <!--  Selector Color  -->
+        <Style Selector="^ /template/ Ellipse#FocusEllipse">
+            <Setter Property="Stroke" Value="{DynamicResource ColorSliderLightBorderBrush}" />
+        </Style>
+        <Style Selector="^ /template/ Ellipse#SelectionEllipse">
+            <Setter Property="Stroke" Value="{DynamicResource ColorSliderDarkBorderBrush}" />
+        </Style>
+        <Style Selector="^:light-selector /template/ Ellipse#FocusEllipse">
+            <Setter Property="Stroke" Value="{DynamicResource ColorSliderDarkBorderBrush}" />
+        </Style>
+        <Style Selector="^:light-selector /template/ Ellipse#SelectionEllipse">
+            <Setter Property="Stroke" Value="{DynamicResource ColorSliderLightBorderBrush}" />
+        </Style>
+
+        <Style Selector="^:pointerover /template/ Ellipse#SelectionEllipse">
+            <Setter Property="Opacity" Value="0.7" />
+        </Style>
+        <Style Selector="^:pointerover:light-selector /template/ Ellipse#SelectionEllipse">
+            <Setter Property="Opacity" Value="0.8" />
+        </Style>
+
+        <!--  Selector Size  -->
+        <Style Selector="^ /template/ Panel#PART_SelectionEllipsePanel">
+            <Setter Property="Width" Value="16" />
+            <Setter Property="Height" Value="16" />
+        </Style>
+        <Style Selector="^:large-selector /template/ Panel#PART_SelectionEllipsePanel">
+            <Setter Property="Width" Value="48" />
+            <Setter Property="Height" Value="48" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

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

@@ -0,0 +1,558 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Avalonia.Controls"
+    xmlns:converters="using:Avalonia.Controls.Converters"
+    xmlns:globalization="using:System.Globalization"
+    xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
+    xmlns:primitives="using:Avalonia.Controls.Primitives"
+    x:CompileBindings="True">
+    <!--  Add Resources Here  -->
+    <pc:ContrastBrushConverter x:Key="ContrastBrushConverter" />
+    <converters:ColorToDisplayNameConverter x:Key="ColorToDisplayNameConverter" />
+    <converters:ColorToHexConverter x:Key="ColorToHexConverter" />
+    <converters:DoNothingForNullConverter x:Key="DoNothingForNullConverter" />
+    <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
+    <globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
+
+    <VisualBrush
+        x:Key="ColorControlCheckeredBackgroundBrush"
+        DestinationRect="0,0,8,8"
+        Stretch="Uniform"
+        TileMode="Tile">
+        <VisualBrush.Visual>
+            <Image Width="8" Height="8">
+                <Image.Source>
+                    <DrawingImage>
+                        <DrawingImage.Drawing>
+                            <DrawingGroup>
+                                <GeometryDrawing Brush="Transparent" Geometry="M0,0 L2,0 2,2, 0,2Z" />
+                                <GeometryDrawing Brush="#19808080" Geometry="M0,1 L2,1 2,2, 1,2 1,0 0,0Z" />
+                            </DrawingGroup>
+                        </DrawingImage.Drawing>
+                    </DrawingImage>
+                </Image.Source>
+            </Image>
+        </VisualBrush.Visual>
+    </VisualBrush>
+
+    <ControlTheme x:Key="ColorViewPaletteListBoxTheme" TargetType="ListBox">
+        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
+        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+        <Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ListBox">
+                <Border
+                    Name="border"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    ClipToBounds="{TemplateBinding ClipToBounds}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <ScrollViewer
+                        Name="PART_ScrollViewer"
+                        AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
+                        HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
+                        IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
+                        VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
+                        <ItemsPresenter
+                            Name="PART_ItemsPresenter"
+                            Margin="{TemplateBinding Padding}"
+                            ItemsPanel="{TemplateBinding ItemsPanel}" />
+                    </ScrollViewer>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="ColorViewPaletteListBoxItemTheme" TargetType="ListBoxItem">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Padding" Value="0" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="{x:Type ListBoxItem}">
+                <Grid UseLayoutRounding="False">
+                    <ContentPresenter
+                        Name="PART_ContentPresenter"
+                        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}" />
+                    <Rectangle
+                        x:Name="BorderRectangle"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        IsHitTestVisible="False"
+                        StrokeThickness="1" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^ /template/ Rectangle#BorderRectangle">
+            <Setter Property="Stroke" Value="Transparent" />
+            <Setter Property="Opacity" Value="0" />
+        </Style>
+
+        <Style x:DataType="Color" Selector="^:pointerover /template/ Rectangle#BorderRectangle">
+            <Setter Property="Stroke" Value="{Binding Converter={StaticResource ContrastBrushConverter}}" />
+            <Setter Property="Opacity" Value="0.5" />
+        </Style>
+
+        <Style x:DataType="Color" Selector="^:selected /template/ Rectangle#BorderRectangle">
+            <Setter Property="Stroke" Value="{Binding Converter={StaticResource ContrastBrushConverter}}" />
+            <Setter Property="Opacity" Value="1" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="ColorViewRadioButton" TargetType="RadioButton">
+        <Setter Property="RadioButton.Cursor" Value="Hand" />
+        <Setter Property="RadioButton.FontWeight" Value="{DynamicResource ColorViewRadioButtonFontWeight}" />
+        <Setter Property="RadioButton.Padding" Value="{DynamicResource ColorViewRadioButtonPadding}" />
+        <Setter Property="RadioButton.Foreground" Value="{DynamicResource ColorViewRadioButtonForeground}" />
+        <Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonBackground}" />
+        <Setter Property="RadioButton.Template">
+            <ControlTemplate TargetType="RadioButton">
+                <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"
+                    TextElement.FontSize="{TemplateBinding FontSize}"
+                    TextElement.FontWeight="{TemplateBinding FontWeight}"
+                    UseLayoutRounding="False" />
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:checked">
+            <Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonCheckedBackground}" />
+            <Setter Property="RadioButton.Foreground" Value="{DynamicResource ColorViewRadioButtonCheckedForeground}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonCheckedPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonCheckedPressedBackground}" />
+            </Style>
+        </Style>
+        <Style Selector="^:unchecked">
+            <Style Selector="^:pointerover">
+                <Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonPressedBackground}" />
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type ColorView}" TargetType="ColorView">
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="ColorView.Width" Value="300" />
+        <Setter Property="ColorView.Height" Value="300" />
+        <Setter Property="ColorView.Palette">
+            <controls:FluentColorPalette />
+        </Setter>
+        <Setter Property="Template">
+            <ControlTemplate TargetType="{x:Type ColorView}">
+                <Grid RowDefinitions="*,Auto">
+                    <!--  Backgrounds  -->
+                    <!--  TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}"  -->
+                    <Border
+                        x:Name="ContentBackgroundBorder"
+                        Grid.Row="0"
+                        Grid.RowSpan="2"
+                        Height="{TemplateBinding Height}"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{DynamicResource ColorViewContentBackgroundBrush}"
+                        BorderBrush="{DynamicResource ColorViewContentBorderBrush}"
+                        BorderThickness="0,1,0,0"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+
+                    <TabControl
+                        x:Name="PART_TabControl"
+                        Grid.Row="0"
+                        Padding="0"
+                        VerticalAlignment="Stretch"
+                        HorizontalContentAlignment="Stretch"
+                        SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
+                        <TabControl.Styles>
+                            <Style Selector="TabItem">
+                                <Setter Property="MinHeight" Value="32" />
+                            </Style>
+                            <Style Selector="TabItem:selected">
+                                <Setter Property="Foreground" Value="{DynamicResource ColorViewTabItemSelectedForeground}" />
+                            </Style>
+                        </TabControl.Styles>
+                        <TabControl.ItemsPanel>
+                            <ItemsPanelTemplate>
+                                <UniformGrid Columns="0" Rows="1" />
+                            </ItemsPanelTemplate>
+                        </TabControl.ItemsPanel>
+                        <!--  Spectrum Tab  -->
+                        <TabItem IsVisible="{TemplateBinding IsColorSpectrumVisible}">
+                            <TabItem.Header>
+                                <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                    <PathIcon
+                                        Width="16"
+                                        Height="16"
+                                        Data="{DynamicResource ColorViewSpectrumIconGlyph}"
+                                        Foreground="{Binding $parent[TabItem].Foreground}" />
+                                </Border>
+                            </TabItem.Header>
+                            <Grid Margin="12" RowDefinitions="*">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto" MinWidth="32" />
+                                    <ColumnDefinition Width="*" />
+                                    <ColumnDefinition Width="Auto" MinWidth="32" />
+                                </Grid.ColumnDefinitions>
+                                <primitives:ColorSlider
+                                    x:Name="ColorSpectrumThirdComponentSlider"
+                                    Grid.Column="0"
+                                    Margin="0,0,12,0"
+                                    HorizontalAlignment="Center"
+                                    VerticalAlignment="Stretch"
+                                    AutomationProperties.Name="Third Component"
+                                    ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}"
+                                    ColorModel="Hsva"
+                                    HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
+                                    IsAlphaMaxForced="True"
+                                    IsSaturationValueMaxForced="False"
+                                    IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
+                                    Orientation="Vertical" />
+                                <primitives:ColorSpectrum
+                                    x:Name="ColorSpectrum"
+                                    Grid.Column="1"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
+                                    Components="{TemplateBinding ColorSpectrumComponents}"
+                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    MaxHue="{TemplateBinding MaxHue}"
+                                    MaxSaturation="{TemplateBinding MaxSaturation}"
+                                    MaxValue="{TemplateBinding MaxValue}"
+                                    MinHue="{TemplateBinding MinHue}"
+                                    MinSaturation="{TemplateBinding MinSaturation}"
+                                    MinValue="{TemplateBinding MinValue}"
+                                    Shape="{TemplateBinding ColorSpectrumShape}" />
+                                <primitives:ColorSlider
+                                    x:Name="ColorSpectrumAlphaSlider"
+                                    Grid.Column="2"
+                                    Margin="12,0,0,0"
+                                    HorizontalAlignment="Center"
+                                    VerticalAlignment="Stretch"
+                                    AutomationProperties.Name="Alpha Component"
+                                    ColorComponent="Alpha"
+                                    ColorModel="Hsva"
+                                    HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
+                                    IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                                    Orientation="Vertical">
+                                    <primitives:ColorSlider.IsVisible>
+                                        <MultiBinding Converter="{x:Static BoolConverters.And}">
+                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                        </MultiBinding>
+                                    </primitives:ColorSlider.IsVisible>
+                                </primitives:ColorSlider>
+                            </Grid>
+                        </TabItem>
+                        <!--  Palette Tab  -->
+                        <TabItem IsVisible="{TemplateBinding IsColorPaletteVisible}">
+                            <TabItem.Header>
+                                <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                    <PathIcon
+                                        Width="16"
+                                        Height="16"
+                                        Data="{DynamicResource ColorViewPaletteIconGlyph}"
+                                        Foreground="{Binding $parent[TabItem].Foreground}" />
+                                </Border>
+                            </TabItem.Header>
+                            <ListBox
+                                Margin="12"
+                                VerticalAlignment="Stretch"
+                                ItemContainerTheme="{StaticResource ColorViewPaletteListBoxItemTheme}"
+                                Items="{TemplateBinding PaletteColors}"
+                                SelectedItem="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DoNothingForNullConverter}, Mode=TwoWay}"
+                                Theme="{StaticResource ColorViewPaletteListBoxTheme}"
+                                UseLayoutRounding="False">
+                                <ListBox.ItemTemplate>
+                                    <DataTemplate DataType="{x:Type Color}">
+                                        <Border
+                                            HorizontalAlignment="Stretch"
+                                            VerticalAlignment="Stretch"
+                                            AutomationProperties.Name="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
+                                            ToolTip.Tip="{Binding Converter={StaticResource ColorToDisplayNameConverter}}">
+                                            <Border.Background>
+                                                <SolidColorBrush Color="{Binding}" />
+                                            </Border.Background>
+                                        </Border>
+                                    </DataTemplate>
+                                </ListBox.ItemTemplate>
+                                <ListBox.ItemsPanel>
+                                    <ItemsPanelTemplate>
+                                        <UniformGrid Columns="{Binding $parent[ColorView].PaletteColumnCount}" />
+                                    </ItemsPanelTemplate>
+                                </ListBox.ItemsPanel>
+                            </ListBox>
+                        </TabItem>
+                        <!--  Components Tab  -->
+                        <TabItem IsVisible="{TemplateBinding IsColorComponentsVisible}">
+                            <TabItem.Header>
+                                <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                    <PathIcon
+                                        Width="16"
+                                        Height="16"
+                                        Data="{DynamicResource ColorViewComponentsIconGlyph}"
+                                        Foreground="{Binding $parent[TabItem].Foreground}" />
+                                </Border>
+                            </TabItem.Header>
+                            <Grid
+                                Margin="12"
+                                ColumnDefinitions="Auto,*"
+                                RowDefinitions="Auto,24,1*,1*,1*,1*,12"
+                                UseLayoutRounding="False">
+                                <Grid.Styles>
+                                    <Style Selector="NumericUpDown /template/ TextBox">
+                                        <Setter Property="InnerLeftContent">
+                                            <Template>
+                                                <TextBlock Width="12" Text="{Binding $parent[NumericUpDown].Tag}" />
+                                            </Template>
+                                        </Setter>
+                                    </Style>
+                                </Grid.Styles>
+                                <!--  Top color model & Hex input  -->
+                                <Grid
+                                    Grid.Row="0"
+                                    Grid.Column="0"
+                                    Grid.ColumnSpan="2"
+                                    ColumnDefinitions="1*,12,1*">
+                                    <!--  RadioButtonGroup  -->
+                                    <Border
+                                        Padding="2"
+                                        Background="{DynamicResource ColorViewRadioButtonPointeroverBackground}"
+                                        CornerRadius="3">
+                                        <Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
+                                            <RadioButton
+                                                x:Name="RgbRadioButton"
+                                                Grid.Column="0"
+                                                HorizontalContentAlignment="Center"
+                                                VerticalContentAlignment="Center"
+                                                Content="RGB"
+                                                CornerRadius="3,0,0,3"
+                                                IsChecked="{TemplateBinding ColorModel,
+                                                                            Converter={StaticResource EnumToBoolConverter},
+                                                                            ConverterParameter={x:Static controls:ColorModel.Rgba},
+                                                                            Mode=TwoWay}"
+                                                Theme="{DynamicResource ColorViewRadioButton}" />
+                                            <RadioButton
+                                                x:Name="HsvRadioButton"
+                                                Grid.Column="1"
+                                                HorizontalContentAlignment="Center"
+                                                VerticalContentAlignment="Center"
+                                                Content="HSV"
+                                                CornerRadius="0,3,3,0"
+                                                IsChecked="{TemplateBinding ColorModel,
+                                                                            Converter={StaticResource EnumToBoolConverter},
+                                                                            ConverterParameter={x:Static controls:ColorModel.Hsva},
+                                                                            Mode=TwoWay}"
+                                                Theme="{DynamicResource ColorViewRadioButton}" />
+                                        </Grid>
+                                    </Border>
+                                    <TextBox
+                                        x:Name="PART_HexTextBox"
+                                        Grid.Column="2"
+                                        Height="32"
+                                        HorizontalAlignment="Stretch"
+                                        AutomationProperties.Name="Hexadecimal Color"
+                                        InnerLeftContent="#"
+                                        IsVisible="{TemplateBinding IsHexInputVisible}"
+                                        MaxLength="9" />
+                                </Grid>
+                                <!--  Color component editing controls  -->
+                                <!--  Component 1 RGB:Red HSV:Hue  -->
+                                <NumericUpDown
+                                    x:Name="Component1NumericUpDown"
+                                    Grid.Row="2"
+                                    Grid.Column="0"
+                                    Width="{DynamicResource ColorViewNumericUpDownWidth}"
+                                    Margin="0,0,12,0"
+                                    VerticalAlignment="Center"
+                                    AllowSpin="True"
+                                    IsVisible="{TemplateBinding IsComponentTextInputVisible}"
+                                    Maximum="{Binding Maximum, ElementName=Component1Slider}"
+                                    Minimum="{Binding Minimum, ElementName=Component1Slider}"
+                                    NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                    ShowButtonSpinner="False"
+                                    Value="{Binding Value, ElementName=Component1Slider}" />
+                                <primitives:ColorSlider
+                                    x:Name="Component1Slider"
+                                    Grid.Row="2"
+                                    Grid.Column="1"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    ColorComponent="Component1"
+                                    ColorModel="{TemplateBinding ColorModel,
+                                                                 Mode=OneWay}"
+                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    IsRoundingEnabled="True"
+                                    IsSnapToTickEnabled="True"
+                                    IsVisible="{TemplateBinding IsComponentSliderVisible}"
+                                    Orientation="Horizontal"
+                                    TickFrequency="1" />
+                                <!--  Component 2 RGB:Green HSV:Saturation  -->
+                                <NumericUpDown
+                                    x:Name="Component2NumericUpDown"
+                                    Grid.Row="3"
+                                    Grid.Column="0"
+                                    Width="{DynamicResource ColorViewNumericUpDownWidth}"
+                                    Margin="0,0,12,0"
+                                    VerticalAlignment="Center"
+                                    AllowSpin="True"
+                                    IsVisible="{TemplateBinding IsComponentTextInputVisible}"
+                                    Maximum="{Binding Maximum, ElementName=Component2Slider}"
+                                    Minimum="{Binding Minimum, ElementName=Component2Slider}"
+                                    NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                    ShowButtonSpinner="False"
+                                    Value="{Binding Value, ElementName=Component2Slider}" />
+                                <primitives:ColorSlider
+                                    x:Name="Component2Slider"
+                                    Grid.Row="3"
+                                    Grid.Column="1"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    ColorComponent="Component2"
+                                    ColorModel="{TemplateBinding ColorModel,
+                                                                 Mode=OneWay}"
+                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    IsRoundingEnabled="True"
+                                    IsSnapToTickEnabled="True"
+                                    IsVisible="{TemplateBinding IsComponentSliderVisible}"
+                                    Orientation="Horizontal"
+                                    TickFrequency="1" />
+                                <!--  Component 3 RGB:Blue HSV:Value  -->
+                                <NumericUpDown
+                                    x:Name="Component3NumericUpDown"
+                                    Grid.Row="4"
+                                    Grid.Column="0"
+                                    Width="{DynamicResource ColorViewNumericUpDownWidth}"
+                                    Margin="0,0,12,0"
+                                    VerticalAlignment="Center"
+                                    AllowSpin="True"
+                                    IsVisible="{TemplateBinding IsComponentTextInputVisible}"
+                                    Maximum="{Binding Maximum, ElementName=Component3Slider}"
+                                    Minimum="{Binding Minimum, ElementName=Component3Slider}"
+                                    NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                    ShowButtonSpinner="False"
+                                    Value="{Binding Value, ElementName=Component3Slider}" />
+                                <primitives:ColorSlider
+                                    x:Name="Component3Slider"
+                                    Grid.Row="4"
+                                    Grid.Column="1"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    ColorComponent="Component3"
+                                    ColorModel="{TemplateBinding ColorModel,
+                                                                 Mode=OneWay}"
+                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    IsRoundingEnabled="True"
+                                    IsSnapToTickEnabled="True"
+                                    IsVisible="{TemplateBinding IsComponentSliderVisible}"
+                                    Orientation="Horizontal"
+                                    TickFrequency="1" />
+                                <!--  Alpha Component  -->
+                                <NumericUpDown
+                                    x:Name="AlphaComponentNumericUpDown"
+                                    Grid.Row="5"
+                                    Grid.Column="0"
+                                    Width="{DynamicResource ColorViewNumericUpDownWidth}"
+                                    Margin="0,0,12,0"
+                                    VerticalAlignment="Center"
+                                    AllowSpin="True"
+                                    IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                                    Maximum="{Binding Maximum, ElementName=AlphaComponentSlider}"
+                                    Minimum="{Binding Minimum, ElementName=AlphaComponentSlider}"
+                                    NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                    ShowButtonSpinner="False"
+                                    Value="{Binding Value, ElementName=AlphaComponentSlider}">
+                                    <NumericUpDown.IsVisible>
+                                        <MultiBinding Converter="{x:Static BoolConverters.And}">
+                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <Binding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                        </MultiBinding>
+                                    </NumericUpDown.IsVisible>
+                                </NumericUpDown>
+                                <primitives:ColorSlider
+                                    x:Name="AlphaComponentSlider"
+                                    Grid.Row="5"
+                                    Grid.Column="1"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    ColorComponent="Alpha"
+                                    ColorModel="{TemplateBinding ColorModel,
+                                                                 Mode=OneWay}"
+                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                                    IsRoundingEnabled="True"
+                                    IsSnapToTickEnabled="True"
+                                    Orientation="Horizontal"
+                                    TickFrequency="1">
+                                    <primitives:ColorSlider.IsVisible>
+                                        <MultiBinding Converter="{x:Static BoolConverters.And}">
+                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                        </MultiBinding>
+                                    </primitives:ColorSlider.IsVisible>
+                                </primitives:ColorSlider>
+                            </Grid>
+                        </TabItem>
+                    </TabControl>
+                    <!--  Previewer  -->
+                    <!--  Note that top/bottom margins have -5 to remove for drop shadow padding  -->
+                    <primitives:ColorPreviewer
+                        Grid.Row="1"
+                        Margin="12,-5,12,7"
+                        HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                        IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
+                        IsVisible="{TemplateBinding IsColorPreviewVisible}" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^[ColorModel=Rgba]">
+            <Style Selector="^ /template/ NumericUpDown#Component1NumericUpDown">
+                <Setter Property="NumericUpDown.Tag" Value="R" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#Component2NumericUpDown">
+                <Setter Property="NumericUpDown.Tag" Value="G" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#Component3NumericUpDown">
+                <Setter Property="NumericUpDown.Tag" Value="B" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#AlphaComponentNumericUpDown">
+                <Setter Property="NumericUpDown.Tag" Value="A" />
+            </Style>
+        </Style>
+        <Style Selector="^[ColorModel=Hsva]">
+            <Style Selector="^ /template/ NumericUpDown#Component1NumericUpDown">
+                <Setter Property="NumericUpDown.Tag" Value="H" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#Component2NumericUpDown">
+                <Setter Property="NumericUpDown.Tag" Value="S" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#Component3NumericUpDown">
+                <Setter Property="NumericUpDown.Tag" Value="V" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#AlphaComponentNumericUpDown">
+                <Setter Property="NumericUpDown.Tag" Value="A" />
+            </Style>
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Dark.axaml

@@ -0,0 +1,43 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#54A9FF" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="#1C1F23" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonPointeroverBackground" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonPressedBackground" Opacity="0.20" Color="White" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedForeground" Color="White" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedBackground" Color="#54A9FF" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPointeroverBackground" Color="#7FC1FF" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPressedBackground" Color="#A9D7FF" />
+    <FontWeight x:Key="ColorViewRadioButtonFontWeight">600</FontWeight>
+    <Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness>
+    <x:Double x:Key="ColorViewNumericUpDownWidth">70</x:Double>
+
+    <SolidColorBrush x:Key="ColorViewTabItemSelectedForeground" Color="#54A9FF" />
+
+    <PathGeometry x:Key="ColorViewSpectrumIconGlyph">
+        M6.92,19L5,17.08L13.06,9L15,10.94M20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L13.84,6.41L11.91,4.5L10.5,5.91L11.92,7.33L3,16.25V21H7.75L16.67,12.08L18.09,13.5L19.5,12.09L17.58,10.17L20.7,7.05C21.1,6.65 21.1,6 20.71,5.63Z
+    </PathGeometry>
+    <PathGeometry x:Key="ColorViewPaletteIconGlyph">
+        M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z
+    </PathGeometry>
+    <PathGeometry x:Key="ColorViewComponentsIconGlyph">
+        M4 6.5C5.10457 6.5 6 5.60457 6 4.5C6 3.39543 5.10457 2.5 4 2.5C2.89543 2.5 2 3.39543 2 4.5C2 5.60457 2.89543 6.5 4 6.5ZM9.5 3C8.67157 3 8 3.67157 8 4.5C8 5.32843 8.67157 6 9.5 6H20.5C21.3284 6 22 5.32843 22 4.5C22 3.67157 21.3284 3 20.5 3H9.5ZM8 11.5C8 10.6716 8.67157 10 9.5 10H20.5C21.3284 10 22 10.6716 22 11.5C22 12.3284 21.3284 13 20.5 13H9.5C8.67157 13 8 12.3284 8 11.5ZM8 18.5C8 17.6716 8.67157 17 9.5 17H20.5C21.3284 17 22 17.6716 22 18.5C22 19.3284 21.3284 20 20.5 20H9.5C8.67157 20 8 19.3284 8 18.5ZM6 11.5C6 12.6046 5.10457 13.5 4 13.5C2.89543 13.5 2 12.6046 2 11.5C2 10.3954 2.89543 9.5 4 9.5C5.10457 9.5 6 10.3954 6 11.5ZM4 20.5C5.10457 20.5 6 19.6046 6 18.5C6 17.3954 5.10457 16.5 4 16.5C2.89543 16.5 2 17.3954 2 18.5C2 19.6046 2.89543 20.5 4 20.5Z
+    </PathGeometry>
+
+    <SolidColorBrush x:Key="ColorSliderDefaultBorderBrush" Color="Black" />
+    <SolidColorBrush x:Key="ColorSliderLightBorderBrush" Color="White" />
+    <SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />
+
+    <x:Double x:Key="ColorSliderWidth">16</x:Double>
+    <CornerRadius x:Key="ColorSliderCornerRadius">8</CornerRadius>
+    <Thickness x:Key="ColorSliderThumbBorderBrush">2</Thickness>
+
+    <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
+
+    <x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double>
+    <x:Double x:Key="ColorPreviewerAccentSectionHeight">20</x:Double>
+    <x:Double x:Key="ColorPreviewerHeight">48</x:Double>
+    <CornerRadius x:Key="ColorPreviewerCornerRadius">3</CornerRadius>
+
+    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1AFFFFFF</BoxShadows>
+</ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Index.axaml

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

src/Semi.Avalonia.ColorPicker/Light.axaml

@@ -0,0 +1,43 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#0077FA" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="White" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonPressedBackground" Opacity="0.13" Color="#2E3238" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedForeground" Color="White" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedBackground" Color="#0077FA" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPointeroverBackground" Color="#0062D6" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPressedBackground" Color="#004FB3" />
+    <FontWeight x:Key="ColorViewRadioButtonFontWeight">600</FontWeight>
+    <Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness>
+    <x:Double x:Key="ColorViewNumericUpDownWidth">70</x:Double>
+
+    <SolidColorBrush x:Key="ColorViewTabItemSelectedForeground" Color="#0077FA" />
+
+    <PathGeometry x:Key="ColorViewSpectrumIconGlyph">
+        M6.92,19L5,17.08L13.06,9L15,10.94M20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L13.84,6.41L11.91,4.5L10.5,5.91L11.92,7.33L3,16.25V21H7.75L16.67,12.08L18.09,13.5L19.5,12.09L17.58,10.17L20.7,7.05C21.1,6.65 21.1,6 20.71,5.63Z
+    </PathGeometry>
+    <PathGeometry x:Key="ColorViewPaletteIconGlyph">
+        M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z
+    </PathGeometry>
+    <PathGeometry x:Key="ColorViewComponentsIconGlyph">
+        M4 6.5C5.10457 6.5 6 5.60457 6 4.5C6 3.39543 5.10457 2.5 4 2.5C2.89543 2.5 2 3.39543 2 4.5C2 5.60457 2.89543 6.5 4 6.5ZM9.5 3C8.67157 3 8 3.67157 8 4.5C8 5.32843 8.67157 6 9.5 6H20.5C21.3284 6 22 5.32843 22 4.5C22 3.67157 21.3284 3 20.5 3H9.5ZM8 11.5C8 10.6716 8.67157 10 9.5 10H20.5C21.3284 10 22 10.6716 22 11.5C22 12.3284 21.3284 13 20.5 13H9.5C8.67157 13 8 12.3284 8 11.5ZM8 18.5C8 17.6716 8.67157 17 9.5 17H20.5C21.3284 17 22 17.6716 22 18.5C22 19.3284 21.3284 20 20.5 20H9.5C8.67157 20 8 19.3284 8 18.5ZM6 11.5C6 12.6046 5.10457 13.5 4 13.5C2.89543 13.5 2 12.6046 2 11.5C2 10.3954 2.89543 9.5 4 9.5C5.10457 9.5 6 10.3954 6 11.5ZM4 20.5C5.10457 20.5 6 19.6046 6 18.5C6 17.3954 5.10457 16.5 4 16.5C2.89543 16.5 2 17.3954 2 18.5C2 19.6046 2.89543 20.5 4 20.5Z
+    </PathGeometry>
+
+    <SolidColorBrush x:Key="ColorSliderDefaultBorderBrush" Color="Black" />
+    <SolidColorBrush x:Key="ColorSliderLightBorderBrush" Color="White" />
+    <SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />
+
+    <x:Double x:Key="ColorSliderWidth">16</x:Double>
+    <CornerRadius x:Key="ColorSliderCornerRadius">8</CornerRadius>
+    <Thickness x:Key="ColorSliderThumbBorderBrush">2</Thickness>
+
+    <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
+
+    <x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double>
+    <x:Double x:Key="ColorPreviewerAccentSectionHeight">20</x:Double>
+    <x:Double x:Key="ColorPreviewerHeight">48</x:Double>
+    <CornerRadius x:Key="ColorPreviewerCornerRadius">3</CornerRadius>
+
+    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1A000000</BoxShadows>
+</ResourceDictionary>

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

@@ -0,0 +1,15 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+    <Import Project="../Package.props"/>
+
+    <PropertyGroup>
+        <Title>Semi.Avalonia.ColorPicker</Title>
+        <PackageReleaseNotes>Upgrade to Avalonia 11.0.0-preview6.</PackageReleaseNotes>
+    </PropertyGroup>
+
+    <ItemGroup>
+      <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
+      <PackageReference Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)" />
+    </ItemGroup>
+
+</Project>

src/Semi.Avalonia.DataGrid/Dark.axaml

@@ -0,0 +1,43 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="DataGridLineBrush" Opacity="0.08" Color="White" />
+
+    <Thickness x:Key="DataGridCellTextBlockDefaultMargin">12 0</Thickness>
+    <SolidColorBrush x:Key="DataGridCellBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="DataGridCellFocusBorderBrush" Color="#41464C" />
+    <SolidColorBrush x:Key="DataGridCellCurrentBorderBrush" Opacity="0.08" Color="White" />
+    <SolidColorBrush x:Key="DataGridCellErrorBrush" Color="#6C090B" />
+    <x:Double x:Key="DataGridCellMinHeight">32</x:Double>
+    <Thickness x:Key="DataGridCellVisualBorderThickness">1</Thickness>
+    <x:Double x:Key="DataGridCellVisualStrokeThickness">1</x:Double>
+
+
+    <SolidColorBrush x:Key="DataGridColumnHeaderForeground" Opacity="0.62" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="DataGridColumnHeaderBackground" Color="Transparent" />
+    <Thickness x:Key="DataGridColumnHeaderPadding">12 0 0 0</Thickness>
+    <x:Double x:Key="DataGridColumnHeaderMinHeight">32</x:Double>
+    <SolidColorBrush x:Key="DataGridColumnHeaderPointeroverBackground" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="DataGridColumnHeaderPressedBackground" Opacity="0.20" Color="White" />
+
+    <PathGeometry x:Key="DataGridColumnHeaderAscendingGlyph">M6.45096 8.34102L11.247 2.86102C11.3408 2.75361 11.4566 2.66753 11.5865 2.60854C11.7163 2.54956 11.8573 2.51904 12 2.51904C12.1426 2.51904 12.2836 2.54956 12.4135 2.60854C12.5433 2.66753 12.6591 2.75361 12.753 2.86102L17.549 8.34102C18.115 8.98802 17.655 10 16.796 10H7.20396C6.34396 10 5.88496 8.98802 6.45096 8.34102Z</PathGeometry>
+    <PathGeometry x:Key="DataGridColumnHeaderDescendingGlyph">M17.549 15.659L12.753 21.139C12.6591 21.2464 12.5434 21.3325 12.4135 21.3915C12.2836 21.4505 12.1427 21.481 12 21.481C11.8574 21.481 11.7164 21.4505 11.5865 21.3915C11.4566 21.3325 11.3409 21.2464 11.247 21.139L6.45101 15.659C5.88501 15.011 6.34501 14 7.20401 14H16.796C17.656 14 18.115 15.012 17.549 15.659Z</PathGeometry>
+
+    <SolidColorBrush x:Key="DataGridRowBackground" Color="Transparent" />
+    <Thickness x:Key="DataGridRowHeaderMargin">8 0</Thickness>
+
+    <SolidColorBrush x:Key="DataGridRowErrorBackground" Color="#6C090B" />
+    <SolidColorBrush x:Key="DataGridDetailsPresenterBackground" Color="Transparent" />
+
+    <SolidColorBrush x:Key="DataGridRowPointeroverBackground" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="DataGridRowSelectedBackground" Opacity="0.2" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="DataGridRowSelectedPointeroverBackground" Opacity="0.3" Color="#FF54A9FF" />
+
+    <PathGeometry x:Key="DataGridRowGroupHeaderExpandIconGlyph">M7.43934 19.7957C6.85355 19.2099 6.85355 18.2601 7.43934 17.6744L13.0962 12.0175L7.43934 6.36065C6.85355 5.77486 6.85355 4.82511 7.43934 4.23933C8.02513 3.65354 8.97487 3.65354 9.56066 4.23933L16.2782 10.9568C16.864 11.5426 16.864 12.4924 16.2782 13.0782L9.56066 19.7957C8.97487 20.3815 8.02513 20.3815 7.43934 19.7957Z</PathGeometry>
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderExpandIconForeground" Opacity="0.62" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderBackground" Opacity="0.12" Color="White" />
+
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderCurrentBorderBrush" Opacity="0.08" Color="White" />
+    <x:Double x:Key="DataGridRowGroupHeaderVisualStrokeThickness">1</x:Double>
+
+    <SolidColorBrush x:Key="DataGridDisabledBackground" Color="#F9F9F9" />
+</ResourceDictionary>

src/Semi.Avalonia.DataGrid/DataGrid.axaml

@@ -0,0 +1,563 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:collections="using:Avalonia.Collections"
+    x:CompileBindings="True">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="DataGridCellTextBlockTheme" TargetType="TextBlock">
+        <Setter Property="Margin" Value="{DynamicResource DataGridCellTextBlockDefaultMargin}" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="DataGridCellTextBoxTheme"
+        BasedOn="{StaticResource {x:Type TextBox}}"
+        TargetType="TextBox">
+        <Setter Property="VerticalAlignment" Value="Stretch" />
+        <Style Selector="^ /template/ DataValidationErrors">
+            <Setter Property="Theme" Value="{DynamicResource TooltipDataValidationErrors}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type DataGridCell}" TargetType="DataGridCell">
+        <Setter Property="Background" Value="{DynamicResource DataGridCellBackground}" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="MinHeight" Value="{DynamicResource DataGridCellMinHeight}" />
+        <Setter Property="Focusable" Value="False" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border
+                    x:Name="CellBorder"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid x:Name="PART_CellRoot" ColumnDefinitions="*,Auto">
+                        <Rectangle
+                            x:Name="CurrencyVisual"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Fill="Transparent"
+                            IsHitTestVisible="False"
+                            IsVisible="False"
+                            Stroke="{DynamicResource DataGridCellCurrentBorderBrush}"
+                            StrokeThickness="{DynamicResource DataGridCellVisualStrokeThickness}" />
+                        <Panel
+                            x:Name="FocusVisual"
+                            Grid.Column="0"
+                            IsHitTestVisible="False"
+                            IsVisible="False">
+                            <Rectangle
+                                Margin="{DynamicResource DataGridCellVisualBorderThickness}"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Fill="Transparent"
+                                IsHitTestVisible="False"
+                                Stroke="{DynamicResource DataGridCellFocusBorderBrush}"
+                                StrokeThickness="{DynamicResource DataGridCellVisualStrokeThickness}" />
+                        </Panel>
+
+                        <ContentPresenter
+                            Grid.Column="0"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            Foreground="{TemplateBinding Foreground}" />
+
+                        <Rectangle
+                            x:Name="InvalidVisualElement"
+                            Grid.Column="0"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            IsHitTestVisible="False"
+                            IsVisible="False"
+                            Stroke="{DynamicResource DataGridCellErrorBrush}"
+                            StrokeThickness="{DynamicResource DataGridCellVisualStrokeThickness}" />
+
+                        <Rectangle
+                            Name="PART_RightGridLine"
+                            Grid.Column="1"
+                            Width="1"
+                            VerticalAlignment="Stretch"
+                            Fill="{DynamicResource DataGridLineBrush}" />
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:current /template/ Rectangle#CurrencyVisual">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+        <Style Selector="^:focus /template/ Panel#FocusVisual">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+        <Style Selector="^:invalid /template/ Rectangle#InvalidVisualElement">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type DataGridColumnHeader}" TargetType="DataGridColumnHeader">
+        <Setter Property="Foreground" Value="{DynamicResource DataGridColumnHeaderForeground}" />
+        <Setter Property="Background" Value="{DynamicResource DataGridColumnHeaderBackground}" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Focusable" Value="False" />
+        <Setter Property="SeparatorBrush" Value="{DynamicResource DataGridLineBrush}" />
+        <Setter Property="Padding" Value="{DynamicResource DataGridColumnHeaderPadding}" />
+        <Setter Property="MinHeight" Value="{DynamicResource DataGridColumnHeaderMinHeight}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="DataGridColumnHeader">
+                <Border
+                    x:Name="HeaderBorder"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid Name="PART_ColumnHeaderRoot" ColumnDefinitions="*,Auto">
+                        <Border
+                            Name="HeaderBackground"
+                            Grid.ColumnSpan="2"
+                            Margin="4"
+                            CornerRadius="3" />
+                        <Grid
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="Auto" />
+                            </Grid.ColumnDefinitions>
+                            <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
+                            <PathIcon
+                                Name="SortIcon"
+                                Grid.Column="1"
+                                Width="8"
+                                Height="8"
+                                Margin="0,0,8,0"
+                                Foreground="{TemplateBinding Foreground}" />
+                        </Grid>
+                        <Rectangle
+                            Name="VerticalSeparator"
+                            Grid.Column="1"
+                            Width="1"
+                            VerticalAlignment="Stretch"
+                            Fill="{TemplateBinding SeparatorBrush}"
+                            IsVisible="{TemplateBinding AreSeparatorsVisible}" />
+                        <Panel
+                            x:Name="FocusVisual"
+                            Grid.Column="0"
+                            IsHitTestVisible="False"
+                            IsVisible="False">
+                            <Rectangle
+                                Margin="{DynamicResource DataGridCellVisualBorderThickness}"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Fill="Transparent"
+                                IsHitTestVisible="False"
+                                Stroke="{DynamicResource DataGridCellFocusBorderBrush}"
+                                StrokeThickness="{DynamicResource DataGridCellVisualStrokeThickness}" />
+                        </Panel>
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:focus-visible /template/ Grid#FocusVisual">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+
+        <Style Selector="^:pointerover /template/ Border#HeaderBackground">
+            <Setter Property="Background" Value="{DynamicResource DataGridColumnHeaderPointeroverBackground}" />
+        </Style>
+
+        <Style Selector="^:pressed /template/ Border#HeaderBackground">
+            <Setter Property="Background" Value="{DynamicResource DataGridColumnHeaderPressedBackground}" />
+        </Style>
+
+        <Style Selector="^:dragIndicator">
+            <Setter Property="Opacity" Value="0.5" />
+        </Style>
+
+        <Style Selector="^:sortascending /template/ PathIcon#SortIcon">
+            <Setter Property="IsVisible" Value="True" />
+            <Setter Property="Data" Value="{DynamicResource DataGridColumnHeaderAscendingGlyph}" />
+        </Style>
+
+        <Style Selector="^:sortdescending /template/ PathIcon#SortIcon">
+            <Setter Property="IsVisible" Value="True" />
+            <Setter Property="Data" Value="{DynamicResource DataGridColumnHeaderDescendingGlyph}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="DataGridTopLeftColumnHeader"
+        BasedOn="{StaticResource {x:Type DataGridColumnHeader}}"
+        TargetType="DataGridColumnHeader">
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Grid x:Name="TopLeftHeaderRoot" RowDefinitions="*,*,Auto">
+                    <Border
+                        Grid.RowSpan="2"
+                        BorderBrush="{DynamicResource DataGridLineBrush}"
+                        BorderThickness="0,0,1,0" />
+                    <Rectangle
+                        Grid.Row="0"
+                        Grid.RowSpan="2"
+                        Height="1"
+                        VerticalAlignment="Bottom"
+                        Fill="{DynamicResource DataGridLineBrush}"
+                        StrokeThickness="1" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type DataGridRowHeader}" TargetType="DataGridRowHeader">
+        <Setter Property="Focusable" Value="False" />
+        <Setter Property="SeparatorBrush" Value="{DynamicResource DataGridLineBrush}" />
+        <Setter Property="AreSeparatorsVisible" Value="False" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Grid
+                    x:Name="PART_Root"
+                    ColumnDefinitions="Auto,*"
+                    RowDefinitions="*,*,Auto">
+                    <Border
+                        Grid.RowSpan="3"
+                        Grid.ColumnSpan="2"
+                        BorderBrush="{TemplateBinding SeparatorBrush}"
+                        BorderThickness="0,0,1,0">
+                        <Grid Background="{TemplateBinding Background}">
+                            <Rectangle
+                                x:Name="RowInvalidVisualElement"
+                                Fill="{DynamicResource DataGridCellErrorBrush}"
+                                Opacity="0"
+                                Stretch="Fill" />
+                            <Rectangle
+                                x:Name="BackgroundRectangle"
+                                Fill="{DynamicResource DataGridRowBackground}"
+                                Stretch="Fill" />
+                        </Grid>
+                    </Border>
+                    <Rectangle
+                        x:Name="HorizontalSeparator"
+                        Grid.Row="2"
+                        Grid.Column="0"
+                        Grid.ColumnSpan="2"
+                        Height="1"
+                        Margin="1,0,1,0"
+                        HorizontalAlignment="Stretch"
+                        Fill="{TemplateBinding SeparatorBrush}"
+                        IsVisible="{TemplateBinding AreSeparatorsVisible}" />
+
+                    <ContentPresenter
+                        Grid.Row="0"
+                        Grid.RowSpan="2"
+                        Grid.Column="1"
+                        Margin="{DynamicResource DataGridRowHeaderMargin}"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        Content="{TemplateBinding Content}" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type DataGridRow}" TargetType="DataGridRow">
+        <Setter Property="Focusable" Value="False" />
+        <Setter Property="Background" Value="{Binding $parent[DataGrid].RowBackground}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="DataGridRow">
+                <Border
+                    x:Name="RowBorder"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <DataGridFrozenGrid
+                        Name="PART_Root"
+                        ColumnDefinitions="Auto,*"
+                        RowDefinitions="*,Auto,Auto">
+
+                        <Border
+                            Name="BackgroundBorder"
+                            Grid.RowSpan="2"
+                            Grid.ColumnSpan="2"
+                            Margin="2"
+                            Background="{DynamicResource DataGridRowBackground}"
+                            CornerRadius="3" />
+                        <Rectangle
+                            x:Name="InvalidVisualElement"
+                            Grid.ColumnSpan="2"
+                            Fill="{DynamicResource DataGridRowErrorBackground}"
+                            Opacity="0" />
+
+                        <DataGridRowHeader
+                            Name="PART_RowHeader"
+                            Grid.RowSpan="3"
+                            DataGridFrozenGrid.IsFrozen="True" />
+                        <DataGridCellsPresenter
+                            Name="PART_CellsPresenter"
+                            Grid.Column="1"
+                            DataGridFrozenGrid.IsFrozen="True" />
+                        <DataGridDetailsPresenter
+                            Name="PART_DetailsPresenter"
+                            Grid.Row="1"
+                            Grid.Column="1"
+                            Background="{DynamicResource DataGridDetailsPresenterBackground}" />
+                        <Rectangle
+                            Name="PART_BottomGridLine"
+                            Grid.Row="2"
+                            Grid.Column="1"
+                            Height="1"
+                            HorizontalAlignment="Stretch" />
+                    </DataGridFrozenGrid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:invalid">
+            <Style Selector="^ /template/ Rectangle#InvalidVisualElement">
+                <Setter Property="Opacity" Value="0.4" />
+            </Style>
+            <Style Selector="^ /template/ Border#BackgroundBorder">
+                <Setter Property="Opacity" Value="0" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:pointerover /template/ Border#BackgroundBorder">
+            <Setter Property="Background" Value="{DynamicResource DataGridRowPointeroverBackground}" />
+        </Style>
+
+        <Style Selector="^:selected">
+            <Style Selector="^ /template/ Border#BackgroundBorder">
+                <Setter Property="Background" Value="{DynamicResource DataGridRowSelectedBackground}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Border#BackgroundBorder">
+                <Setter Property="Background" Value="{DynamicResource DataGridRowSelectedPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:focus /template/ Border#BackgroundBorder">
+                <Setter Property="Background" Value="{DynamicResource DataGridRowSelectedBackground}" />
+            </Style>
+            <Style Selector="^:pointerover:focus /template/ Border#BackgroundBorder">
+                <Setter Property="Background" Value="{DynamicResource DataGridRowSelectedPointeroverBackground}" />
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="DataGridRowGroupExpanderButtonTheme" TargetType="ToggleButton">
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ToggleButton">
+                <PathIcon
+                    Width="12"
+                    Height="12"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    Background="Transparent"
+                    Data="{DynamicResource DataGridRowGroupHeaderExpandIconGlyph}"
+                    Foreground="{DynamicResource DataGridRowGroupHeaderExpandIconForeground}" />
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:checked /template/ PathIcon">
+            <Setter Property="PathIcon.RenderTransform" Value="rotate(90deg)" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type DataGridRowGroupHeader}" TargetType="DataGridRowGroupHeader">
+        <Setter Property="Focusable" Value="False" />
+        <Setter Property="Background" Value="{DynamicResource DataGridRowGroupHeaderBackground}" />
+        <Setter Property="MinHeight" Value="32" />
+        <Setter Property="Template">
+            <ControlTemplate x:DataType="collections:DataGridCollectionViewGroup" TargetType="DataGridRowGroupHeader">
+                <DataGridFrozenGrid
+                    Name="PART_Root"
+                    MinHeight="{TemplateBinding MinHeight}"
+                    Background="{TemplateBinding Background}"
+                    ColumnDefinitions="Auto,Auto,Auto,Auto,*"
+                    RowDefinitions="*,Auto">
+                    <Rectangle
+                        Name="PART_IndentSpacer"
+                        Grid.Row="0"
+                        Grid.Column="1" />
+                    <ToggleButton
+                        Name="PART_ExpanderButton"
+                        Grid.Row="0"
+                        Grid.Column="2"
+                        Margin="12,0,0,0"
+                        Focusable="False"
+                        Theme="{StaticResource DataGridRowGroupExpanderButtonTheme}" />
+                    <StackPanel
+                        Grid.Row="0"
+                        Grid.Column="3"
+                        Margin="12,0,0,0"
+                        VerticalAlignment="Center"
+                        Orientation="Horizontal">
+                        <TextBlock
+                            Name="PART_PropertyNameElement"
+                            Margin="4,0,0,0"
+                            Foreground="{TemplateBinding Foreground}"
+                            IsVisible="{TemplateBinding IsPropertyNameVisible}" />
+                        <TextBlock
+                            Margin="4,0,0,0"
+                            Foreground="{TemplateBinding Foreground}"
+                            Text="{Binding Key}" />
+                        <TextBlock
+                            Name="PART_ItemCountElement"
+                            Margin="4,0,0,0"
+                            Foreground="{TemplateBinding Foreground}"
+                            IsVisible="{TemplateBinding IsItemCountVisible}" />
+                    </StackPanel>
+
+                    <Rectangle
+                        x:Name="CurrencyVisual"
+                        Grid.Row="0"
+                        Grid.Column="0"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Fill="Transparent"
+                        IsHitTestVisible="False"
+                        IsVisible="False"
+                        Stroke="{DynamicResource DataGridRowGroupHeaderCurrentBorderBrush}"
+                        StrokeThickness="{DynamicResource DataGridRowGroupHeaderVisualStrokeThickness}" />
+                    <Panel
+                        x:Name="FocusVisual"
+                        Grid.Row="0"
+                        Grid.Column="0"
+                        IsHitTestVisible="False"
+                        IsVisible="False">
+                        <Rectangle
+                            Margin="{DynamicResource DataGridCellVisualBorderThickness}"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Fill="Transparent"
+                            IsHitTestVisible="False"
+                            Stroke="{DynamicResource DataGridCellFocusBorderBrush}"
+                            StrokeThickness="{DynamicResource DataGridCellVisualStrokeThickness}" />
+                    </Panel>
+
+                    <DataGridRowHeader
+                        Name="PART_RowHeader"
+                        Grid.Row="0"
+                        Grid.RowSpan="2"
+                        Grid.Column="0"
+                        DataGridFrozenGrid.IsFrozen="True" />
+
+                    <Rectangle
+                        x:Name="PART_BottomGridLine"
+                        Grid.Row="1"
+                        Grid.Column="0"
+                        Grid.ColumnSpan="5"
+                        Height="1"
+                        Fill="{DynamicResource DataGridLineBrush}" />
+                </DataGridFrozenGrid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type DataGrid}" TargetType="DataGrid">
+        <Setter Property="RowBackground" Value="Transparent" />
+        <Setter Property="HeadersVisibility" Value="Column" />
+        <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
+        <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
+        <Setter Property="SelectionMode" Value="Extended" />
+        <Setter Property="GridLinesVisibility" Value="None" />
+        <Setter Property="HorizontalGridLinesBrush" Value="{DynamicResource DataGridLineBrush}" />
+        <Setter Property="VerticalGridLinesBrush" Value="{DynamicResource DataGridLineBrush}" />
+        <Setter Property="DropLocationIndicatorTemplate">
+            <Template>
+                <Rectangle Width="2" Fill="{DynamicResource DataGridDropLocationIndicatorBackground}" />
+            </Template>
+        </Setter>
+        <Setter Property="Template">
+            <ControlTemplate TargetType="DataGrid">
+                <Border
+                    x:Name="DataGridBorder"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid ColumnDefinitions="Auto,*,Auto" RowDefinitions="Auto,*,Auto,Auto">
+                        <DataGridColumnHeader
+                            Name="PART_TopLeftCornerHeader"
+                            Grid.Row="0"
+                            Grid.Column="0"
+                            Theme="{StaticResource DataGridTopLeftColumnHeader}" />
+                        <DataGridColumnHeadersPresenter
+                            Name="PART_ColumnHeadersPresenter"
+                            Grid.Row="0"
+                            Grid.Column="1"
+                            Grid.ColumnSpan="2" />
+                        <Rectangle
+                            Name="PART_ColumnHeadersAndRowsSeparator"
+                            Grid.Row="0"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="3"
+                            Height="1"
+                            VerticalAlignment="Bottom"
+                            Fill="{DynamicResource DataGridLineBrush}" />
+
+                        <DataGridRowsPresenter
+                            Name="PART_RowsPresenter"
+                            Grid.Row="1"
+                            Grid.RowSpan="2"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="3">
+                            <DataGridRowsPresenter.GestureRecognizers>
+                                <ScrollGestureRecognizer CanHorizontallyScroll="True" CanVerticallyScroll="True" />
+                            </DataGridRowsPresenter.GestureRecognizers>
+                        </DataGridRowsPresenter>
+                        <Rectangle
+                            Name="PART_BottomRightCorner"
+                            Grid.Row="2"
+                            Grid.Column="2"
+                            Fill="{DynamicResource DataGridScrollBarsSeparatorBackground}" />
+                        <ScrollBar
+                            Name="PART_VerticalScrollbar"
+                            Grid.Row="1"
+                            Grid.Column="2"
+                            Orientation="Vertical" />
+
+                        <Grid
+                            Grid.Row="2"
+                            Grid.Column="1"
+                            ColumnDefinitions="Auto,*">
+                            <Rectangle Name="PART_FrozenColumnScrollBarSpacer" />
+                            <ScrollBar
+                                Name="PART_HorizontalScrollbar"
+                                Grid.Column="1"
+                                Height="{DynamicResource ScrollBarSize}"
+                                Orientation="Horizontal" />
+                        </Grid>
+                        <Border
+                            x:Name="PART_DisabledVisualElement"
+                            Grid.Row="0"
+                            Grid.RowSpan="4"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="3"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Background="{DynamicResource DataGridDisabledBackground}"
+                            CornerRadius="2"
+                            IsHitTestVisible="False"
+                            IsVisible="{Binding !$parent[DataGrid].IsEnabled}" />
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:empty-columns">
+            <Style Selector="^ /template/ DataGridColumnHeader#PART_TopLeftCornerHeader">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+            <Style Selector="^ /template/ DataGridColumnHeadersPresenter#PART_ColumnHeadersPresenter">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+            <Style Selector="^ /template/ Rectangle#PART_ColumnHeadersAndRowsSeparator">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia.DataGrid/Index.axaml

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

src/Semi.Avalonia.DataGrid/Light.axaml

@@ -0,0 +1,43 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="DataGridLineBrush" Opacity="0.08" Color="#1C1F23" />
+
+    <Thickness x:Key="DataGridCellTextBlockDefaultMargin">12 0</Thickness>
+    <SolidColorBrush x:Key="DataGridCellBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="DataGridCellFocusBorderBrush" Color="#C6CACD" />
+    <SolidColorBrush x:Key="DataGridCellCurrentBorderBrush" Opacity="0.08" Color="#1C1F23" />
+    <SolidColorBrush x:Key="DataGridCellErrorBrush" Color="#FEF2ED" />
+    <x:Double x:Key="DataGridCellMinHeight">32</x:Double>
+    <Thickness x:Key="DataGridCellVisualBorderThickness">1</Thickness>
+    <x:Double x:Key="DataGridCellVisualStrokeThickness">1</x:Double>
+
+
+    <SolidColorBrush x:Key="DataGridColumnHeaderForeground" Opacity="0.62" Color="#1C1F23" />
+    <SolidColorBrush x:Key="DataGridColumnHeaderBackground" Color="Transparent" />
+    <Thickness x:Key="DataGridColumnHeaderPadding">12 0 0 0</Thickness>
+    <x:Double x:Key="DataGridColumnHeaderMinHeight">32</x:Double>
+    <SolidColorBrush x:Key="DataGridColumnHeaderPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="DataGridColumnHeaderPressedBackground" Opacity="0.13" Color="#2E3238" />
+
+    <PathGeometry x:Key="DataGridColumnHeaderAscendingGlyph">M6.45096 8.34102L11.247 2.86102C11.3408 2.75361 11.4566 2.66753 11.5865 2.60854C11.7163 2.54956 11.8573 2.51904 12 2.51904C12.1426 2.51904 12.2836 2.54956 12.4135 2.60854C12.5433 2.66753 12.6591 2.75361 12.753 2.86102L17.549 8.34102C18.115 8.98802 17.655 10 16.796 10H7.20396C6.34396 10 5.88496 8.98802 6.45096 8.34102Z</PathGeometry>
+    <PathGeometry x:Key="DataGridColumnHeaderDescendingGlyph">M17.549 15.659L12.753 21.139C12.6591 21.2464 12.5434 21.3325 12.4135 21.3915C12.2836 21.4505 12.1427 21.481 12 21.481C11.8574 21.481 11.7164 21.4505 11.5865 21.3915C11.4566 21.3325 11.3409 21.2464 11.247 21.139L6.45101 15.659C5.88501 15.011 6.34501 14 7.20401 14H16.796C17.656 14 18.115 15.012 17.549 15.659Z</PathGeometry>
+
+    <SolidColorBrush x:Key="DataGridRowBackground" Color="Transparent" />
+    <Thickness x:Key="DataGridRowHeaderMargin">8 0</Thickness>
+
+    <SolidColorBrush x:Key="DataGridRowErrorBackground" Color="#FEF2ED" />
+    <SolidColorBrush x:Key="DataGridDetailsPresenterBackground" Color="Transparent" />
+
+    <SolidColorBrush x:Key="DataGridRowPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="DataGridRowSelectedBackground" Color="#EAF5FF" />
+    <SolidColorBrush x:Key="DataGridRowSelectedPointeroverBackground" Color="#CBE7FE" />
+
+    <PathGeometry x:Key="DataGridRowGroupHeaderExpandIconGlyph">M7.43934 19.7957C6.85355 19.2099 6.85355 18.2601 7.43934 17.6744L13.0962 12.0175L7.43934 6.36065C6.85355 5.77486 6.85355 4.82511 7.43934 4.23933C8.02513 3.65354 8.97487 3.65354 9.56066 4.23933L16.2782 10.9568C16.864 11.5426 16.864 12.4924 16.2782 13.0782L9.56066 19.7957C8.97487 20.3815 8.02513 20.3815 7.43934 19.7957Z</PathGeometry>
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderExpandIconForeground" Opacity="0.62" Color="#1C1F23" />
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderBackground" Opacity="0.05" Color="#2E3238" />
+
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderCurrentBorderBrush" Opacity="0.08" Color="#1C1F23" />
+    <x:Double x:Key="DataGridRowGroupHeaderVisualStrokeThickness">1</x:Double>
+
+    <SolidColorBrush x:Key="DataGridDisabledBackground" Color="#F9F9F9" />
+</ResourceDictionary>

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

@@ -0,0 +1,15 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+    <Import Project="../Package.props"/>
+    
+    <PropertyGroup>
+        <Title>Semi.Avalonia.DataGrid</Title>
+        <PackageReleaseNotes>Upgrade to Avalonia 11.0.0-preview6.</PackageReleaseNotes>
+    </PropertyGroup>
+
+    <ItemGroup>
+        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(AvaloniaVersion)" />
+    </ItemGroup>
+    
+</Project>

src/Semi.Avalonia/Controls/AutoCompleteBox.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"
+    x:CompileBindings="True">
     <Design.PreviewWith>
         <StackPanel Margin="20" Spacing="20">
             <TextBox Text="Hello" />
@@ -6,22 +9,15 @@
         </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type AutoCompleteBox}" TargetType="AutoCompleteBox">
-        <Setter Property="Background" Value="{DynamicResource AutoCompleteBoxDefaultBackground}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource AutoCompleteBoxDefaultBorderBrush}" />
-        <Setter Property="AutoCompleteBox.MaxDropDownHeight" Value="600" />
-        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="AutoCompleteBox.MaxDropDownHeight" Value="{DynamicResource AutoCompleteMaxDropdownHeight}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="AutoCompleteBox">
                 <Panel>
                     <TextBox
                         Name="PART_TextBox"
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}"
+                        VerticalAlignment="Center"
                         DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
                         Watermark="{TemplateBinding Watermark}" />
-
                     <Popup
                         Name="PART_Popup"
                         MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
@@ -47,18 +43,52 @@
                 </Panel>
             </ControlTemplate>
         </Setter>
+
+        <Style Selector="^.Bordered">
+            <Setter Property="Template">
+                <ControlTemplate TargetType="AutoCompleteBox">
+                    <Panel>
+                        <TextBox
+                            Name="PART_TextBox"
+                            VerticalAlignment="Center"
+                            Classes="Bordered"
+                            DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
+                            Watermark="{TemplateBinding Watermark}" />
+                        <Popup
+                            Name="PART_Popup"
+                            MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
+                            MaxHeight="{TemplateBinding MaxDropDownHeight}"
+                            IsLightDismissEnabled="True"
+                            PlacementTarget="{TemplateBinding}">
+                            <Border
+                                Margin="{DynamicResource AutoCompleteBoxPopupMargin}"
+                                HorizontalAlignment="Stretch"
+                                Background="{DynamicResource AutoCompleteBoxPopupBackground}"
+                                BorderBrush="{DynamicResource AutoCompleteBoxPopupBorderBrush}"
+                                BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
+                                BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
+                                CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
+                                <ListBox
+                                    Name="PART_SelectingItemsControl"
+                                    Foreground="{TemplateBinding Foreground}"
+                                    ItemTemplate="{TemplateBinding ItemTemplate}"
+                                    ScrollViewer.HorizontalScrollBarVisibility="Auto"
+                                    ScrollViewer.VerticalScrollBarVisibility="Auto" />
+                            </Border>
+                        </Popup>
+                    </Panel>
+                </ControlTemplate>
+            </Setter>
+        </Style>
+        <Style Selector="^.Large /template/ TextBox">
+            <Setter Property="TextBox.MinHeight" Value="{DynamicResource AutoCompleteBoxLargeHeight}" />
+        </Style>
+        <Style Selector="^.Small /template/ TextBox">
+            <Setter Property="TextBox.MinHeight" Value="{DynamicResource AutoCompleteBoxSmallHeight}" />
+        </Style>
     </ControlTheme>
 
-    <ControlTheme
-        x:Key="BorderlessAutoCompleteBox"
-        BasedOn="{StaticResource {x:Type AutoCompleteBox}}"
-        TargetType="AutoCompleteBox">
-        <ControlTheme.Children>
-            <Style Selector="^ /template/ TextBox#PART_TextBox">
-                <Setter Property="Theme" Value="{StaticResource BorderlessTextBox}" />
-            </Style>
-        </ControlTheme.Children>
-        <Setter Property="Background" Value="{DynamicResource AutoCompleteBoxBorderlessBackground}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource AutoCompleteBoxBorderlessBorderBrush}" />
-    </ControlTheme>
+
+
+
 </ResourceDictionary>

src/Semi.Avalonia/Controls/Border.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"
+    x:CompileBindings="True">
     <Design.PreviewWith>
         <StackPanel Margin="20" Spacing="20">
             <Border Theme="{StaticResource CardBorder}">
@@ -26,10 +29,10 @@
         <Setter Property="Border.BorderThickness" Value="{DynamicResource ThicknessCardBorderThickness}" />
         <Setter Property="Border.Margin" Value="{DynamicResource ThicknessCardMargin}" />
         <Style Selector="^.Shadow">
-            <Setter Property="Border.BoxShadow" Value="0 0 14 #1A000000" />
+            <Setter Property="Border.BoxShadow" Value="{DynamicResource BorderCardBoxShadow}" />
         </Style>
         <Style Selector="^.Hover:pointerover">
-            <Setter Property="Border.BoxShadow" Value="0 0 14 #1A000000" />
+            <Setter Property="Border.BoxShadow" Value="{DynamicResource BorderCardBoxShadow}" />
         </Style>
 
     </ControlTheme>