misc: bump version.

20240329 backport

.github/workflows/Pack.yml

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

.github/workflows/deploy.yml

@@ -0,0 +1,53 @@
+name: Deploy to GitHub Pages
+
+env:
+  PROJECT_PATH: demo/Semi.Avalonia.Demo.Web/Semi.Avalonia.Demo.Web.csproj
+  OUTPUT_PATH: demo/Semi.Avalonia.Demo.Web/bin/Release/net7.0/browser-wasm/AppBundle
+on:
+  push:
+    branches: [ "action/deploy" ]
+  pull_request:
+    branches: [ "action/deploy" ]
+
+jobs:
+  deploy-to-github-pages:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4.1.1
+
+      - name: Setup .NET 7
+        uses: actions/setup-dotnet@v4
+        with:
+          dotnet-version: 7.0.405
+
+      - name: Install wasm-tools
+        run: dotnet workload install wasm-tools wasm-tools-net7
+
+      - name: Install DotNetCompress
+        run: dotnet tool install --global DotNetCompress --version 3.0.0 --no-cache
+
+      - name: Publish .NET Project
+        run: dotnet publish $PROJECT_PATH -c Release -o release --nologo
+
+      - name: Change base-tag in index.html
+        run: sed -i 's/<base href="\/" \/>/<base href="\/Semi.Avalonia\/" \/>/g' $OUTPUT_PATH/index.html
+
+      - name: copy index.html to 404.html
+        run: cp $OUTPUT_PATH/index.html $OUTPUT_PATH/404.html
+
+      - name: Compress Output using Brotli
+        run: DotNetCompress -d $OUTPUT_PATH -p "*.dll" "*.js" "*.wasm" --format br --threads 4
+
+      - name: Compress Output using GZip
+        run: DotNetCompress -d $OUTPUT_PATH -p "*.dll" "*.js" "*.wasm" --format gz --threads 4
+
+      - name: Add .nojekyll file
+        run: touch $OUTPUT_PATH/.nojekyll
+
+      - name: Commit wwwroot to GitHub Pages
+        uses: JamesIves/github-pages-deploy-action@v4.5.0
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages
+          FOLDER: ${{ env.OUTPUT_PATH }}

.run/SC-Single.run.xml

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

README.md

@@ -1,14 +1,71 @@
 # 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.
+# How to Use
 
-![Cover](./docs/cover.png)
+## Installation
+```bash
+dotnet add package Semi.Avalonia --version 11.0.7
+```
+Include Semi Design Styles in application:
 
-## Requirement
+```xaml
+<Application.Styles>
+    <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
+</Application.Styles>
+```
 
-Avalonia V11
+That's all. 
 
+ColorPicker, DataGrid and TreeDataGrid are distributed in separated packages. Please install if you need. 
+```bash
+dotnet add package Semi.Avalonia.ColorPicker --version 11.0.7
+dotnet add package Semi.Avalonia.DataGrid --version 11.0.7
+dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.7
+```
+```xaml
+<Application.Styles>
+    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/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 |
+|:--------------------|:-----------------|
+| 11.0.7              | 11.0.7           |
+| 11.0.1              | <=11.0.6         |
+
+## TODO
+* 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,18 @@ 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
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.Demo.Drm", "demo\Semi.Avalonia.Demo.Drm\Semi.Avalonia.Demo.Drm.csproj", "{86D93406-412A-4429-93B2-92AAD0407784}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.TreeDataGrid", "src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj", "{398D2998-0835-41F5-99A3-608CAB8051E2}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.TreeDataGrid.Demo", "demo\Semi.Avalonia.TreeDataGrid.Demo\Semi.Avalonia.TreeDataGrid.Demo.csproj", "{6178B545-4BB6-458C-A27C-EE11F3885D38}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -41,6 +54,31 @@ 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
+		{86D93406-412A-4429-93B2-92AAD0407784}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{86D93406-412A-4429-93B2-92AAD0407784}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{86D93406-412A-4429-93B2-92AAD0407784}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{86D93406-412A-4429-93B2-92AAD0407784}.Release|Any CPU.Build.0 = Release|Any CPU
+		{398D2998-0835-41F5-99A3-608CAB8051E2}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{398D2998-0835-41F5-99A3-608CAB8051E2}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{398D2998-0835-41F5-99A3-608CAB8051E2}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{398D2998-0835-41F5-99A3-608CAB8051E2}.Release|Any CPU.Build.0 = Release|Any CPU
+		{6178B545-4BB6-458C-A27C-EE11F3885D38}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{6178B545-4BB6-458C-A27C-EE11F3885D38}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{6178B545-4BB6-458C-A27C-EE11F3885D38}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{6178B545-4BB6-458C-A27C-EE11F3885D38}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -49,6 +87,9 @@ 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}
+		{86D93406-412A-4429-93B2-92AAD0407784} = {43091528-9509-43CB-A003-9C5C11E96DD6}
+		{6178B545-4BB6-458C-A27C-EE11F3885D38} = {43091528-9509-43CB-A003-9C5C11E96DD6}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {7CA41ED3-2CED-40CC-AA21-28C3B42B1E86}

demo/Directory.Build.props

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,9 +0,0 @@
-<Application
-    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">
-    <Application.Styles>
-        <StyleInclude Source="avares://Semi.Avalonia/Themes/DarkTheme.axaml" />
-    </Application.Styles>
-</Application>

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

@@ -1,7 +1,9 @@
-using System;
-using Avalonia;
+using Avalonia;
 using Avalonia.Dialogs;
 using Avalonia.Media;
+using System;
+using System.Linq;
+using System.Threading;
 
 namespace Semi.Avalonia.Demo.Desktop;
 

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="11.0.0-preview5" />
+        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.999-cibuild0029384-beta" />
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
     </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.Drm/Program.cs

@@ -0,0 +1,53 @@
+using System;
+using System.Globalization;
+using System.Linq;
+using System.Threading;
+using Avalonia;
+
+namespace Semi.Avalonia.Demo.Drm;
+
+class Program
+{
+    // Initialization code. Don't use any Avalonia, third-party APIs or any
+    // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
+    // yet and stuff might break.
+    [STAThread]
+    public static int Main(string[] args)
+    {
+        var builder = BuildAvaloniaApp();
+
+        double GetScaling()
+        {
+            var idx = Array.IndexOf(args, "--scaling");
+            if (idx != 0 && args.Length > idx + 1 &&
+                double.TryParse(args[idx + 1], NumberStyles.Any, CultureInfo.InvariantCulture, out var scaling))
+                return scaling;
+            return 1;
+        }
+
+        if (args.Contains("--drm"))
+        {
+            SilenceConsole();
+            return builder.StartLinuxDrm(args: args, card: "/dev/dri/card1", scaling: GetScaling());
+        }
+
+        return builder.StartWithClassicDesktopLifetime(args);
+    }
+
+    // Avalonia configuration, don't remove; also used by visual designer.
+    public static AppBuilder BuildAvaloniaApp()
+        => AppBuilder.Configure<App>()
+            .UsePlatformDetect()
+            .LogToTrace();
+
+    private static void SilenceConsole()
+    {
+        new Thread(() =>
+            {
+                Console.CursorVisible = false;
+                while (true)
+                    Console.ReadKey(true);
+            })
+            { IsBackground = true }.Start();
+    }
+}

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

@@ -0,0 +1,22 @@
+<Project Sdk="Microsoft.NET.Sdk">
+  <PropertyGroup>
+    <OutputType>WinExe</OutputType>
+    <TargetFramework>net7.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
+    <ApplicationManifest>app.manifest</ApplicationManifest>
+  </PropertyGroup>
+
+
+  <ItemGroup>
+    <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
+    <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
+    <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
+    <PackageReference Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)" />
+  </ItemGroup>
+
+
+  <ItemGroup>
+    <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
+  </ItemGroup>
+</Project>

demo/Semi.Avalonia.Demo.Drm/app.manifest

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1">
+  <!-- This manifest is used on Windows only.
+       Don't remove it as it might cause problems with window transparency and embeded controls.
+       For more details visit https://learn.microsoft.com/en-us/windows/win32/sbscs/application-manifests -->
+  <assemblyIdentity version="1.0.0.0" name="Semi.Avalonia.Demo.Drm.Desktop"/>
+
+  <compatibility xmlns="urn:schemas-microsoft-com:compatibility.v1">
+    <application>
+      <!-- A list of the Windows versions that this application has been tested on
+           and is designed to work with. Uncomment the appropriate elements
+           and Windows will automatically select the most compatible environment. -->
+
+      <!-- Windows 10 -->
+      <supportedOS Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}" />
+    </application>
+  </compatibility>
+</assembly>

demo/Semi.Avalonia.Demo.Drm/使用方法.md

@@ -0,0 +1,77 @@
+# DRM启动步骤
+
+(Ubuntu18.04Server版本 虚拟机测试OK)  
+(Orange Pi Zero2 Ubuntu20.04-arm64 测试OK)
+
+Avalonia官方参考文档：https://docs.avaloniaui.net/docs/next/guides/platforms/rpi/running-on-raspbian-lite-via-drm
+
+1.Linux端运行命令  
+```
+sudo apt update  
+sudo apt upgrade  
+sudo reboot  
+sudo apt - get install libgbm1 libgl1 - mesa - dri libegl1 - mesa libinput10
+```
+
+2.安装测试工具测试(出现一个彩色立方体说明环境安装完成)  
+```
+sudo apt-get install kmscube
+sudo kmscube
+```
+
+3.安装.net运行时(参考网址：https://learn.microsoft.com/zh-cn/dotnet/core/install/linux?WT.mc_id=dotnet-35129-website)
+
+4.新建一个Avalonia项目，nuget里面添加Avalonia.LinuxFramebuffer包
+
+5.添加StartLinuxDrm代码(不知道怎么添加看Semi.Avalonia.Demo.Drm项目代码)
+
+6.发布程序到Linux(安装.net，怎么运行这些省略)
+            
+7.运行 ./Semi.Avalonia.Demo.Drm --drm
+
+## 报错处理：
+
+1. 报错内容
+
+>Unhandled exception. Avalonia.Markup.Xaml.XamlLoadException: No precompiled XAML found for avares://Semi.Avalonia/Themes/Light/Light.axaml (baseUri: avares://Semi.Avalonia/Themes/Index.axaml), make sure to specify x:Class and include your XAML file as AvaloniaResource
+
+ 解决方法：
+>如果使用Semi发布文件不要裁剪，如果裁剪会报错
+         
+
+2. 报错内容
+>Unhandled exception. System.TypeInitializationException: The type initializer for 'SkiaSharp.SKImageInfo' threw an exception.**
+    **--->System.DllNotFoundException: Unable to load shared library 'libSkiaSharp' or one of its dependencies.In order to help diagnose loading problems, consider setting the LD_DEBUG environment variable: liblibSkiaSharp: cannot open shared object file: No such file or directory
+    at SkiaSharp.SkiaApi.sk_colortype_get_default_8888()
+    at SkiaSharp.SKImageInfo..cctor()
+
+解决方法：
+>Linux命令行安装一下 apt-get install -y libfontconfig1  
+参考网址：https://github.com/mono/SkiaSharp/issues/509
+
+3. 报错内容
+>Permission denied
+
+解决方法：  
+>sudo chmod +x ./Semi.Avalonia.Demo.Drm
+
+4. 报错内容
+>Unhandled exception. System.ComponentModel.Win32Exception (95): drmModeGetResources failed
+at Avalonia.LinuxFramebuffer.Output.DrmResources..ctor(Int32 fd, Boolean connectorsForceProbe) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 91
+at Avalonia.LinuxFramebuffer.Output.DrmCard.GetResources(Boolean connectorsForceProbe) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 171
+at Avalonia.LinuxFramebuffer.Output.DrmOutput..ctor(String path, Boolean connectorsForceProbe, DrmOutputOptions options) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmOutput.cs:line 60
+at LinuxFramebufferPlatformExtensions.StartLinuxDrm(AppBuilder builder, String[] args, String card, Double scaling, IInputBackend inputBackend) in /_/src/Linux/Avalonia.LinuxFramebuffer/LinuxFramebufferPlatform.cs:line 166
+at Semi.Avalonia.Demo.Drm.Program.Main(String[] args)
+
+解决方法：
+>`program.cs`的显卡路径错误，可能不是`dev/dri/card1`，看在`dev/dri`目录下有无其他的显卡如`card0`。
+
+5. 报错内容
+>Unhandled exception. System.ComponentModel.Win32Exception (2): Couldn't open /dev/dri/card1
+at Avalonia.LinuxFramebuffer.Output.DrmCard..ctor(String ) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 167
+at Avalonia.LinuxFramebuffer.Output.DrmOutput..ctor(String , Boolean , DrmOutputOptions ) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmOutput.cs:line 58
+at LinuxFramebufferPlatformExtensions.StartLinuxDrm(AppBuilder, String[], String , Double , IInputBackend ) in /_/src/Linux/Avalonia.LinuxFramebuffer/LinuxFramebufferPlatform.cs:line 166
+at Semi.Avalonia.Demo.Drm.Program.Main(String[])
+
+解决办法：
+>找不到显卡路径`dev/dri/card1`，可能是显卡挂载到别的文件夹下了，待解决。

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

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

demo/Semi.Avalonia.Demo.Web/AppBundle/app.css

@@ -1,4 +1,11 @@
-/* HTML styles for the splash screen */
+:root {
+    --sat: env(safe-area-inset-top);
+    --sar: env(safe-area-inset-right);
+    --sab: env(safe-area-inset-bottom);
+    --sal: env(safe-area-inset-left);
+}
+
+/* HTML styles for the splash screen */
 
 .highlight {
     color: white;

demo/Semi.Avalonia.Demo.Web/AppBundle/index.html

@@ -10,7 +10,6 @@
     <link rel="modulepreload" href="./dotnet.js" />
     <link rel="modulepreload" href="./avalonia.js" />
     <link rel="stylesheet" href="./app.css" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
 </head>
 
 <body style="margin: 0px; overflow: hidden">

demo/Semi.Avalonia.Demo.Web/AppBundle/main.js

@@ -1,5 +1,4 @@
 import { dotnet } from './dotnet.js'
-import { registerAvaloniaModule } from './avalonia.js';
 
 const is_browser = typeof window != "undefined";
 if (!is_browser) throw new Error(`Expected to be running in a browser`);
@@ -9,8 +8,6 @@ const dotnetRuntime = await dotnet
     .withApplicationArgumentsFromQuery()
     .create();
 
-await registerAvaloniaModule(dotnetRuntime);
-
 const config = dotnetRuntime.getConfig();
 
 await dotnetRuntime.runMainAndExit(config.mainAssemblyName, [window.location.search]);

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

@@ -1,17 +1,16 @@
 using System.Runtime.Versioning;
+using System.Threading.Tasks;
 using Avalonia;
-using Avalonia.Media;
-using Semi.Avalonia.Demo.Web;
 using Avalonia.Browser;
 
 [assembly: SupportedOSPlatform("browser")]
 
+namespace Semi.Avalonia.Demo.Web;
+
 internal partial class Program
 {
-    private static void Main(string[] args)
-    {
-        BuildAvaloniaApp().SetupBrowserApp("out");
-    }
+    private static async Task Main(string[] args) => await BuildAvaloniaApp()
+        .StartBrowserAppAsync("out");
 
     public static AppBuilder BuildAvaloniaApp()
         => AppBuilder.Configure<App>();

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

@@ -11,19 +11,10 @@
     </ItemGroup>
 
     <ItemGroup>
-      <None Remove="Assets\SourceHanSansCN-Regular.otf" />
+        <PackageReference Include="Avalonia.Browser" Version="$(AvaloniaVersion)" />
     </ItemGroup>
 
     <ItemGroup>
-      <AvaloniaResource Include="Assets\SourceHanSansCN-Regular.otf" />
-    </ItemGroup>
-
-    <ItemGroup>
-        <PackageReference Include="Avalonia.Browser" Version="11.0.0-preview5" />
-        <PackageReference Include="Avalonia.Themes.Fluent" Version="11.0.0-preview5" />
-    </ItemGroup>
-
-    <ItemGroup>
-      <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
+        <ProjectReference Include="..\Semi.Avalonia.Demo\Semi.Avalonia.Demo.csproj" />
     </ItemGroup>
 </Project>

demo/Semi.Avalonia.Demo/App.axaml

@@ -0,0 +1,14 @@
+<Application
+    x:Class="Semi.Avalonia.Demo.App"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:semi="https://irihi.tech/semi">
+    <Application.Styles>
+        <!-- You can still reference in old way. 
+        <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
+         -->
+        <semi:SemiTheme Locale="zh-CN"/>
+        <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+        <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+    </Application.Styles>
+</Application>

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

@@ -3,7 +3,7 @@ using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Markup.Xaml;
 using Semi.Avalonia.Demo.Views;
 
-namespace Semi.Avalonia.Demo.Web;
+namespace Semi.Avalonia.Demo;
 
 public partial class App : Application
 {
@@ -14,10 +14,16 @@ public partial class App : Application
 
     public override void OnFrameworkInitializationCompleted()
     {
-        if (ApplicationLifetime is ISingleViewApplicationLifetime singleViewPlatform)
+        switch (ApplicationLifetime)
         {
-            singleViewPlatform.MainView = new MainView();
+            case IClassicDesktopStyleApplicationLifetime desktop:
+                desktop.MainWindow = new MainWindow();
+                break;
+            case ISingleViewApplicationLifetime singleView:
+                singleView.MainView = new MainView();
+                break;
         }
+
         base.OnFrameworkInitializationCompleted();
     }
 }

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

@@ -0,0 +1,132 @@
+<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">
+    <StreamGeometry x:Key="CopyIcon">M5 7C3.89543 7 3 7.89543 3 9V19C3 20.1046 3.89543 21 5 21H15C16.1046 21 17 20.1046 17 19V9C17 7.89543 16.1046 7 15 7H5Z,M7 4C7 2.89543 7.89543 2 9 2H20C21.1046 2 22 2.89543 22 4V15C22 16.1046 21.1046 17 20 17H19V8C19 6 18 5 16 5H7V4Z</StreamGeometry>
+    <ControlTheme x:Key="{x:Type controls:ColorDetailControl}" TargetType="controls:ColorDetailControl">
+        <!--  Add Resources Here  -->
+        <Setter Property="controls:ColorDetailControl.Template">
+            <ControlTemplate TargetType="controls:ColorDetailControl">
+                <StackPanel>
+                    <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-2 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>
+                        <SelectableTextBlock
+                            Grid.Row="2"
+                            Grid.Column="0"
+                            VerticalAlignment="Center"
+                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            Text="{TemplateBinding ColorResourceKey}" />
+                        <Button
+                            Grid.Row="2"
+                            Grid.Column="1"
+                            Classes="Tertiary"
+                            Command="{Binding $parent[controls:ColorDetailControl].Copy}"
+                            CommandParameter="{x:Static controls:ColorDetailControl.KEY_ColorResourceKey}"
+                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            Theme="{DynamicResource BorderlessButton}">
+                            <PathIcon
+                                Width="12"
+                                Height="12"
+                                Data="{StaticResource CopyIcon}"
+                                Foreground="{Binding $parent[Button].Foreground}" />
+                        </Button>
+
+                        <!--  Row 3-4 HEX  -->
+                        <TextBlock
+                            Grid.Row="3"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
+                            Margin="4,8,0,0"
+                            VerticalAlignment="Center"
+                            Classes="Tertiary"
+                            Text="ARGB" />
+                        <SelectableTextBlock
+                            Grid.Row="4"
+                            Grid.Column="0"
+                            VerticalAlignment="Center"
+                            Text="{TemplateBinding Hex}" />
+                        <Button
+                            Grid.Row="4"
+                            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 5-6 Opacity  -->
+                        <TextBlock
+                            Grid.Row="5"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
+                            Margin="4,8,0,0"
+                            VerticalAlignment="Center"
+                            Classes="Tertiary"
+                            Text="Opacity" />
+                        <SelectableTextBlock
+                            Grid.Row="6"
+                            Grid.Column="0"
+                            VerticalAlignment="Center"
+                            Text="{TemplateBinding OpacityNumber}" />
+                        <Button
+                            Grid.Row="6"
+                            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,107 @@
+using System.Globalization;
+using Avalonia;
+using Avalonia.Controls;
+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 const string KEY_ColorResourceKey = "ColorResourceKey";
+    
+    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 StyledProperty<string?> ColorResourceKeyProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
+        nameof(ColorResourceKey));
+
+    public string? ColorResourceKey
+    {
+        get => GetValue(ColorResourceKeyProperty);
+        set => SetValue(ColorResourceKeyProperty, value);
+    }
+
+    public static readonly DirectProperty<ColorDetailControl, string?> HexProperty = AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(
+        nameof(Hex), o => o.Hex);
+    private string? _hex;
+    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;
+                case KEY_ColorResourceKey: text = ColorResourceKey;
+                    break;
+                default: text = string.Empty; break;
+            }
+        }
+
+        var toplevel = TopLevel.GetTopLevel(this);
+        if (toplevel?.Clipboard is { } 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,134 @@
+<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" ItemsSource="{TemplateBinding LightColors}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="70" Header="Color">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <controls:ColorItemControl
+                                                    Width="40"
+                                                    Height="20"
+                                                    Background="{Binding Brush}"
+                                                    CornerRadius="3" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ColorItemViewModel"
+                                        Binding="{ReflectionBinding ColorDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Name" />
+                                    <DataGridTemplateColumn Width="100" Header="Hex">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Hex}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="80" Header="Opacity">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    HorizontalAlignment="Right"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Brush.Opacity}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                        <TabItem Header="Dark">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkColors}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="70" Header="Color">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <controls:ColorItemControl
+                                                    Width="40"
+                                                    Height="20"
+                                                    Background="{Binding Brush}"
+                                                    CornerRadius="3" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ColorItemViewModel"
+                                        Binding="{ReflectionBinding ColorDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Name" />
+                                    <DataGridTemplateColumn Width="100" Header="Hex">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Hex}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="80" Header="Opacity">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    HorizontalAlignment="Right"
+                                                    VerticalAlignment="Center"
+                                                    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
+            ItemsSource="{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
-            Items="{Binding States}"
-            Theme="{StaticResource BorderlessAutoCompleteBox}"
-            ValueMemberBinding="{Binding Name, x:DataType=local:StateData}">
+            Classes="Large"
+            ItemsSource="{Binding States}"
+            ValueMemberBinding="{ReflectionBinding Name}">
+            <AutoCompleteBox.ItemTemplate>
+                <DataTemplate DataType="local:StateData">
+                    <TextBlock Text="{Binding Name}" />
+                </DataTemplate>
+            </AutoCompleteBox.ItemTemplate>
+        </AutoCompleteBox>
+        <AutoCompleteBox
+            Classes="Small"
+            ItemsSource="{Binding States}"
+            ValueMemberBinding="{ReflectionBinding Name}">
+            <AutoCompleteBox.ItemTemplate>
+                <DataTemplate DataType="local:StateData">
+                    <TextBlock Text="{Binding Name}" />
+                </DataTemplate>
+            </AutoCompleteBox.ItemTemplate>
+        </AutoCompleteBox>
+        <AutoCompleteBox
+            Classes="Bordered"
+            ItemsSource="{Binding States}"
+            ValueMemberBinding="{ReflectionBinding Name}">
+            <AutoCompleteBox.ItemTemplate>
+                <DataTemplate DataType="local:StateData">
+                    <TextBlock Text="{Binding Name}" />
+                </DataTemplate>
+            </AutoCompleteBox.ItemTemplate>
+        </AutoCompleteBox>
+        <AutoCompleteBox
+            IsEnabled="False"
+            ItemsSource="{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,15 +7,13 @@
     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>
             <Button Classes="Secondary">Secondary</Button>
             <Button Classes="Tertiary">Tertiary</Button>
+            <Button Classes="Success">Success</Button>
             <Button Classes="Warning">Warning</Button>
             <Button Classes="Danger">Danger</Button>
             <Button Classes="Primary" IsEnabled="False">Danger</Button>
@@ -25,6 +23,7 @@
             <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
             <Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
             <Button Classes="Tertiary" Theme="{DynamicResource SolidButton}">Tertiary</Button>
+            <Button Classes="Success" Theme="{DynamicResource SolidButton}">Success</Button>
             <Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
             <Button Classes="Danger" Theme="{DynamicResource SolidButton}">Danger</Button>
             <Button
@@ -39,6 +38,7 @@
             <Button Classes="Primary" Theme="{DynamicResource BorderlessButton}">Primary</Button>
             <Button Classes="Secondary" Theme="{DynamicResource BorderlessButton}">Secondary</Button>
             <Button Classes="Tertiary" Theme="{DynamicResource BorderlessButton}">Tertiary</Button>
+            <Button Classes="Success" Theme="{DynamicResource BorderlessButton}">Success</Button>
             <Button Classes="Warning" Theme="{DynamicResource BorderlessButton}">Warning</Button>
             <Button Classes="Danger" Theme="{DynamicResource BorderlessButton}">Danger</Button>
             <Button
@@ -48,8 +48,8 @@
                 Danger
             </Button>
         </StackPanel>
-        <TextBlock>DropdownButton</TextBlock>
-        <StackPanel Orientation="Horizontal">
+        <TextBlock>DropDownButton</TextBlock>
+        <StackPanel Orientation="Horizontal" Spacing="8">
             <DropDownButton Content="Submit">
                 <DropDownButton.Flyout>
                     <MenuFlyout Placement="BottomEdgeAlignedRight">
@@ -58,7 +58,7 @@
                     </MenuFlyout>
                 </DropDownButton.Flyout>
             </DropDownButton>
-            <DropDownButton Content="Submit" Theme="{DynamicResource SolidDropdownButton}">
+            <DropDownButton Content="Submit" Theme="{DynamicResource SolidDropDownButton}">
                 <DropDownButton.Flyout>
                     <MenuFlyout Placement="BottomEdgeAlignedRight">
                         <MenuItem Header="Submit All" />
@@ -66,7 +66,7 @@
                     </MenuFlyout>
                 </DropDownButton.Flyout>
             </DropDownButton>
-            <DropDownButton Content="Submit" Theme="{DynamicResource BorderlessDropdownButton}">
+            <DropDownButton Content="Submit" Theme="{DynamicResource BorderlessDropDownButton}">
                 <DropDownButton.Flyout>
                     <MenuFlyout Placement="BottomEdgeAlignedRight">
                         <MenuItem Header="Submit All" />
@@ -75,7 +75,7 @@
                 </DropDownButton.Flyout>
             </DropDownButton>
         </StackPanel>
-        <StackPanel Orientation="Horizontal">
+        <StackPanel Orientation="Horizontal" Spacing="8">
             <SplitButton Content="Submit">
                 <SplitButton.Flyout>
                     <MenuFlyout Placement="BottomEdgeAlignedRight">
@@ -86,6 +86,7 @@
             </SplitButton>
             <SplitButton Classes="Secondary" Content="Submit" />
             <SplitButton Classes="Tertiary" Content="Submit" />
+            <SplitButton Classes="Success" Content="Submit" />
             <SplitButton Classes="Warning" Content="Submit" />
             <SplitButton Classes="Danger" Content="Submit" />
             <SplitButton
@@ -93,7 +94,7 @@
                 Content="Submit"
                 IsEnabled="False" />
         </StackPanel>
-        <StackPanel Orientation="Horizontal">
+        <StackPanel Orientation="Horizontal" Spacing="8">
             <ToggleSplitButton Content="Submit">
                 <ToggleSplitButton.Flyout>
                     <MenuFlyout Placement="BottomEdgeAlignedRight">
@@ -104,6 +105,7 @@
             </ToggleSplitButton>
             <ToggleSplitButton Classes="Secondary" Content="Submit" />
             <ToggleSplitButton Classes="Tertiary" Content="Submit" />
+            <ToggleSplitButton Classes="Success" Content="Submit" />
             <ToggleSplitButton Classes="Warning" Content="Submit" />
             <ToggleSplitButton Classes="Danger" Content="Submit" />
             <ToggleSplitButton

demo/Semi.Avalonia.Demo/Pages/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}"
@@ -20,8 +17,7 @@
             <TextBlock
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center"
-                Background="Gray"
-                Text="Everest" />
+                Text="A.S.I.A" />
         </ButtonSpinner>
         <ButtonSpinner
             Height="30"
@@ -33,8 +29,7 @@
             <TextBlock
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center"
-                Background="Gray"
-                Text="Everest" />
+                Text="A.S.I.A" />
         </ButtonSpinner>
     </StackPanel>
 </UserControl>

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

@@ -36,15 +36,20 @@ public partial class ButtonSpinnerDemo : UserControl
 
     private readonly string[] _mountains = new[]
     {
-        "Everest",
-        "K2 (Mount Godwin Austen)",
-        "Kangchenjunga",
-        "Lhotse",
-        "Makalu",
-        "Cho Oyu",
-        "Dhaulagiri",
-        "Manaslu",
-        "Nanga Parbat",
-        "Annapurna"
+        "A.S.I.A",
+        "饕餮人间",
+        "七步咙咚呛",
+        "大惊小怪",
+        "The ONE",
+        "以梦为马 (壮志骄阳版)",
+        "emo了",
+        "一眼万年",
+        "冲刺吧",
+        "爱的赏味期限",
+        "COSMIC ANTHEM / 手紙",
+        "世界晚安",
+        "明年也要好好长大",
+        "320万年前",
+        "W.O.R.L.D.",
     };
 }

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

@@ -7,8 +7,12 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="20" Spacing="20">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <CalendarDatePicker />
+        <CalendarDatePicker Classes="ClearButton" Width="200" />
+        <CalendarDatePicker Width="500" />
+        <CalendarDatePicker Classes="Large" />
+        <CalendarDatePicker Classes="Small" />
         <CalendarDatePicker
             Name="DatePicker2"
             Margin="0,0,0,8"
@@ -21,5 +25,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,67 @@
     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" />
+            <Setter Property="Foreground" Value="#1C1F23" />
+        </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>
+        <Carousel Classes="Columnar Left" 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,120 @@
     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>
-</UserControl>
+    <ScrollViewer HorizontalScrollBarVisibility="Auto">
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
+            <TextBlock Text="CheckBox" />
+            <StackPanel Orientation="Horizontal">
+                <CheckBox>Unchecked</CheckBox>
+                <CheckBox IsChecked="True">Checked</CheckBox>
+                <CheckBox IsChecked="{x:Null}" IsThreeState="True">Indeterminate</CheckBox>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <CheckBox IsEnabled="False">Unchecked</CheckBox>
+                <CheckBox IsChecked="True" IsEnabled="False">Checked</CheckBox>
+                <CheckBox
+                    IsChecked="{x:Null}"
+                    IsEnabled="False"
+                    IsThreeState="True">
+                    Indeterminate
+                </CheckBox>
+            </StackPanel>
+            <CheckBox Width="120" HorizontalAlignment="Left">Checkbox should wrap its text</CheckBox>
+            <TextBlock Text="SimpleCheckBox" />
+            <StackPanel Orientation="Horizontal">
+                <CheckBox Theme="{StaticResource SimpleCheckBox}" />
+                <CheckBox IsChecked="True" Theme="{StaticResource SimpleCheckBox}" />
+                <CheckBox
+                    IsChecked="{x:Null}"
+                    IsThreeState="True"
+                    Theme="{StaticResource SimpleCheckBox}" />
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <CheckBox IsEnabled="False" Theme="{StaticResource SimpleCheckBox}" />
+                <CheckBox
+                    IsChecked="True"
+                    IsEnabled="False"
+                    Theme="{StaticResource SimpleCheckBox}" />
+                <CheckBox
+                    IsChecked="{x:Null}"
+                    IsEnabled="False"
+                    IsThreeState="True"
+                    Theme="{StaticResource SimpleCheckBox}" />
+            </StackPanel>
+            <TextBlock Text="CardCheckBox" />
+            <StackPanel Orientation="Horizontal">
+                <StackPanel.Styles>
+                    <Style Selector="CheckBox">
+                        <Setter Property="Width" Value="150" />
+                        <Setter Property="Margin" Value="8" />
+                    </Style>
+                </StackPanel.Styles>
+                <CheckBox
+                    Content="Windows"
+                    IsChecked="True"
+                    Theme="{DynamicResource CardCheckBox}" />
+                <CheckBox
+                    Content="macOS"
+                    IsChecked="True"
+                    IsEnabled="False"
+                    Theme="{DynamicResource CardCheckBox}" />
+                <CheckBox
+                    Content="Linux"
+                    IsChecked="True"
+                    Theme="{DynamicResource CardCheckBox}" />
+                <CheckBox
+                    Content="iOS"
+                    IsChecked="{x:Null}"
+                    IsThreeState="True"
+                    Theme="{DynamicResource CardCheckBox}" />
+                <CheckBox
+                    Content="Android"
+                    IsChecked="{x:Null}"
+                    IsThreeState="True"
+                    Theme="{DynamicResource CardCheckBox}" />
+                <CheckBox
+                    Content="Wasm"
+                    IsChecked="False"
+                    IsThreeState="True"
+                    Theme="{DynamicResource CardCheckBox}" />
+            </StackPanel>
+            <TextBlock Text="PureCardCheckBox" />
+            <StackPanel Orientation="Horizontal">
+                <StackPanel.Styles>
+                    <Style Selector="CheckBox">
+                        <Setter Property="Width" Value="150" />
+                        <Setter Property="Margin" Value="8" />
+                    </Style>
+                </StackPanel.Styles>
+                <CheckBox
+                    Content="Windows"
+                    IsChecked="True"
+                    Theme="{DynamicResource PureCardCheckBox}" />
+                <CheckBox
+                    Content="macOS"
+                    IsChecked="True"
+                    IsEnabled="False"
+                    Theme="{DynamicResource PureCardCheckBox}" />
+                <CheckBox
+                    Content="Linux"
+                    IsChecked="True"
+                    Theme="{DynamicResource PureCardCheckBox}" />
+                <CheckBox
+                    Content="iOS"
+                    IsChecked="{x:Null}"
+                    IsThreeState="True"
+                    Theme="{DynamicResource PureCardCheckBox}" />
+                <CheckBox
+                    Content="Android"
+                    IsChecked="{x:Null}"
+                    IsThreeState="True"
+                    Theme="{DynamicResource PureCardCheckBox}" />
+                <CheckBox
+                    Content="Wasm"
+                    IsChecked="False"
+                    IsThreeState="True"
+                    Theme="{DynamicResource PureCardCheckBox}" />
+            </StackPanel>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>

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

@@ -0,0 +1,34 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker;assembly=Semi.Avalonia.ColorPicker"
+    xmlns:controls="using:Avalonia.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    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 Palette="{DynamicResource SemiColorPalette}" />
+        </StackPanel>
+        <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
+            <ColorPicker ColorSpectrumShape="Ring">
+                <ColorPicker.Palette>
+                    <controls:FlatHalfColorPalette />
+                </ColorPicker.Palette>
+            </ColorPicker>
+            <ColorPicker ColorSpectrumShape="Box">
+                <ColorPicker.Palette>
+                    <colorPicker:SemiColorLightPalette />
+                </ColorPicker.Palette>
+            </ColorPicker>
+        </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,68 @@
     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>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
+        </ComboBox>
+        <ComboBox Width="150" Classes="ClearButton">
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
         </ComboBox>
         <ComboBox Width="150" PlaceholderText="Please Select">
-            <TextBlock>AAA</TextBlock>
-            <TextBlock>BBB</TextBlock>
-            <TextBlock>CCC</TextBlock>
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
         </ComboBox>
         <ComboBox Width="150" IsEnabled="False">
-            <TextBlock>AAA</TextBlock>
-            <TextBlock>BBB</TextBlock>
-            <TextBlock>CCC</TextBlock>
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
+        </ComboBox>
+        <ComboBox
+            Width="150"
+            Classes="Large"
+            IsEnabled="False">
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
+        </ComboBox>
+        <ComboBox Width="150" Classes="Small">
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
+        </ComboBox>
+        <ComboBox Width="150" Classes="Bordered">
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
+        </ComboBox>
+        <ComboBox
+            Width="150"
+            Classes="Bordered"
+            IsEnabled="False">
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</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,175 @@
+<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"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels;assembly=Semi.Avalonia.Demo"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:DataGridDemoViewModel"
+    mc:Ignorable="d">
+    <TabControl>
+        <TabItem Header="DataGrid">
+           <Grid RowDefinitions="Auto, *">
+               <ToggleSwitch Grid.Row="0" Content="Disable" Name="DisableToggle"></ToggleSwitch>
+               <DataGrid Grid.Row="1"
+                         Margin="8"
+                         CanUserReorderColumns="True"
+                         CanUserResizeColumns="True"
+                         CanUserSortColumns="True"
+                         HeadersVisibility="All"
+                         IsReadOnly="True"
+                         IsEnabled="{Binding #DisableToggle.IsChecked}"
+                         ItemsSource="{Binding GridData1}">
+                   <DataGrid.Columns>
+                       <DataGridTextColumn
+                           Width="6*"
+                           x:DataType="vm:Song"
+                           Binding="{Binding Title}"
+                           Header="Title" />
+                       <DataGridTextColumn
+                           Width="6*"
+                           x:DataType="vm:Song"
+                           Binding="{Binding Artist}"
+                           Header="Artist" />
+                       <DataGridTextColumn
+                           Width="6*"
+                           x:DataType="vm:Song"
+                           Binding="{Binding Album}"
+                           Header="Album" />
+                       <DataGridTemplateColumn Header="Duration" SortMemberPath="Duration">
+                           <DataGridTemplateColumn.CellTemplate>
+                               <DataTemplate>
+                                   <TextBlock
+                                       Margin="8,0,0,0"
+                                       VerticalAlignment="Center"
+                                       Text="{Binding Duration}" />
+                               </DataTemplate>
+                           </DataGridTemplateColumn.CellTemplate>
+                       </DataGridTemplateColumn>
+                   </DataGrid.Columns>
+
+               </DataGrid>
+               
+           </Grid>
+        </TabItem>
+        <TabItem Header="Grouping">
+            <DataGrid
+                Margin="8"
+                CanUserReorderColumns="True"
+                CanUserResizeColumns="True"
+                CanUserSortColumns="True"
+                HeadersVisibility="All"
+                IsReadOnly="True"
+                ItemsSource="{Binding GridData2}">
+                <DataGrid.Columns>
+                    <DataGridTextColumn
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Title}"
+                        Header="Title" />
+                    <DataGridTextColumn
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Artist}"
+                        Header="Artist" />
+                    <DataGridTextColumn
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Album}"
+                        Header="Album" />
+                    <DataGridTemplateColumn
+                        x:DataType="vm:Song"
+                        Header="Duration"
+                        SortMemberPath="Duration">
+                        <DataGridTemplateColumn.CellTemplate>
+                            <DataTemplate x:DataType="vm:Song">
+                                <TextBlock
+                                    Margin="8,0,0,0"
+                                    VerticalAlignment="Center"
+                                    Text="{Binding Duration}" />
+                            </DataTemplate>
+                        </DataGridTemplateColumn.CellTemplate>
+                    </DataGridTemplateColumn>
+                </DataGrid.Columns>
+            </DataGrid>
+        </TabItem>
+        <TabItem x:Name="EditableTab" Header="Editable">
+            <Grid Margin="8" 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>
+                <DataGrid
+                    Grid.Row="1"
+                    Margin="8"
+                    ItemsSource="{Binding GridData3}">
+                    <DataGrid.Columns>
+                        <DataGridCheckBoxColumn
+                            Width="2*"
+                            Binding="{Binding IsSelected}"
+                            Header="Select"
+                            IsThreeState="{Binding #IsThreeStateCheckBox.IsChecked, Mode=OneWay}" />
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:SongViewModel"
+                            Binding="{Binding Title}"
+                            FontSize="{Binding #FontSizeSlider.Value, Mode=OneWay}"
+                            Header="Title" />
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:SongViewModel"
+                            Binding="{Binding Artist}"
+                            Header="Artist" />
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:SongViewModel"
+                            Binding="{Binding Album}"
+                            Header="Album" />
+                        <DataGridTemplateColumn Width="2*" Header="Comments">
+                            <DataGridTemplateColumn.CellTemplate>
+                                <DataTemplate>
+                                    <TextBlock
+                                        HorizontalAlignment="Center"
+                                        VerticalAlignment="Center"
+                                        Text="{Binding CountOfComment}" />
+                                </DataTemplate>
+                            </DataGridTemplateColumn.CellTemplate>
+                            <DataGridTemplateColumn.CellEditingTemplate>
+                                <DataTemplate>
+                                    <NumericUpDown
+                                        HorizontalAlignment="Stretch"
+                                        FormatString="N0"
+                                        Minimum="0"
+                                        Value="{Binding CountOfComment}" />
+                                </DataTemplate>
+                            </DataGridTemplateColumn.CellEditingTemplate>
+                        </DataGridTemplateColumn>
+                    </DataGrid.Columns>
+                </DataGrid>
+                <Button
+                    Grid.Row="2"
+                    Margin="12,0,12,12"
+                    HorizontalAlignment="Right"
+                    Command="{Binding AddCommand}"
+                    Content="Add" />
+            </Grid>
+        </TabItem>
+    </TabControl>
+</UserControl>

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

@@ -0,0 +1,27 @@
+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;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class DataGridDemo : UserControl
+{
+    public DataGridDemo()
+    {
+        InitializeComponent();
+        DataContext = new DataGridDemoViewModel();
+    }
+}

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

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

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

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

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

@@ -7,9 +7,12 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="20" Spacing="20">
+    <StackPanel Spacing="20">
         <DatePicker />
+        <DatePicker Classes="ClearButton" />
         <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!" />
@@ -15,15 +19,18 @@
                 <Button Content="Hello Avalonia World!" />
             </Expander>
         </StackPanel>
-        <Grid ColumnDefinitions="* *">
+        <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/FlyoutDemo.axaml

@@ -15,8 +15,8 @@
     <Grid
         HorizontalAlignment="Center"
         VerticalAlignment="Center"
-        ColumnDefinitions="* * * * *"
-        RowDefinitions="* * * * *">
+        ColumnDefinitions="*, *, *, *, *"
+        RowDefinitions="*, *, *, *, *, *">
         <Button
             Grid.Row="0"
             Grid.Column="1"
@@ -113,6 +113,44 @@
                 <Flyout Content="BottomEdgeAlignedRight" Placement="BottomEdgeAlignedRight" />
             </Button.Flyout>
         </Button>
+
+        <Button
+            Grid.Row="2"
+            Grid.Column="2"
+            Content="Center">
+            <Button.Flyout>
+                <Flyout Content="Center" Placement="Center" />
+            </Button.Flyout>
+        </Button>
+
+        <Button
+            Grid.Row="5"
+            Grid.Column="2" Content="LightFlyout">
+            <Button.Flyout>
+                <Flyout FlyoutPresenterTheme="{StaticResource LightFlyout}" Placement="Top">
+                    <StackPanel>
+                        <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
+                        <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                        <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                        <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                        <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                        <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                        <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                        <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                        <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                        <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
+                        <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                        <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                        <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                        <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                        <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                        <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                        <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
+                    </StackPanel>
+                </Flyout>
+            </Button.Flyout>
+        </Button>
     </Grid>
 
-</UserControl>
+
+</UserControl>

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

@@ -0,0 +1,39 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Semi.Avalonia.Demo.Pages.HeaderedContentControlDemo">
+    <ScrollViewer>
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
+            <TextBlock>Default Theme</TextBlock>
+            <WrapPanel ItemWidth="400">
+                <HeaderedContentControl
+                    Header="This is the text header!"
+                    BorderBrush="Gray"
+                    BorderThickness="1"
+                    CornerRadius="4">
+                    <TextBlock Text="Some content" />
+                </HeaderedContentControl>
+                <HeaderedContentControl Header="This is the image header!">
+                    <Image Source="/Assets/WORLD.png" />
+                </HeaderedContentControl>
+                <HeaderedContentControl>
+                    <HeaderedContentControl.Header>
+                        <Image Source="/Assets/WORLD.png" />
+                    </HeaderedContentControl.Header>
+                    <TextBlock Text="This is the content. But the header can also be non textual" />
+                </HeaderedContentControl>
+            </WrapPanel>
+            <TextBlock>GroupBox Theme</TextBlock>
+            <HeaderedContentControl
+                HorizontalAlignment="Left"
+                Theme="{DynamicResource GroupBox}"
+                Header="Semi Design"
+                Width="400"
+                Height="200">
+                <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</TextBlock>
+            </HeaderedContentControl>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>

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

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

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

@@ -1,78 +1,226 @@
 <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">
-    <StackPanel
-        Width="500" Margin="20"
-        HorizontalAlignment="Left" Spacing="20">
-        <StackPanel.Styles>
-            <Style Selector="Label">
-                <Setter Property="Margin" Value="4" />
-            </Style>
-        </StackPanel.Styles>
-        <WrapPanel>
-            <Label Theme="{StaticResource TagLabel}">Label</Label>
-            <Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
-            <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
-            <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
-        </WrapPanel>
-        <WrapPanel>
-            <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-            <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-            <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-            <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
-            <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-            <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-            <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-            <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-            <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-            <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
-            <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
-            <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-            <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
-            <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
-            <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
-            <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
-            <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
-        </WrapPanel>
-        <WrapPanel>
-            <Label Classes="Ghost Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-            <Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-            <Label Classes="Ghost Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-            <Label Classes="Ghost Green" Theme="{StaticResource TagLabel}">Green</Label>
-            <Label Classes="Ghost Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-            <Label Classes="Ghost Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-            <Label Classes="Ghost LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-            <Label Classes="Ghost LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-            <Label Classes="Ghost Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-            <Label Classes="Ghost Orange" Theme="{StaticResource TagLabel}">Orange</Label>
-            <Label Classes="Ghost Pink" Theme="{StaticResource TagLabel}">Pink</Label>
-            <Label Classes="Ghost Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-            <Label Classes="Ghost Red" Theme="{StaticResource TagLabel}">Red</Label>
-            <Label Classes="Ghost Teal" Theme="{StaticResource TagLabel}">Teal</Label>
-            <Label Classes="Ghost Violet" Theme="{StaticResource TagLabel}">Violet</Label>
-            <Label Classes="Ghost Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
-            <Label Classes="Ghost White" Theme="{StaticResource TagLabel}">White</Label>
-        </WrapPanel>
-        <WrapPanel>
-            <Label Classes="Solid Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-            <Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-            <Label Classes="Solid Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-            <Label Classes="Solid Green" Theme="{StaticResource TagLabel}">Green</Label>
-            <Label Classes="Solid Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-            <Label Classes="Solid Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-            <Label Classes="Solid LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-            <Label Classes="Solid LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-            <Label Classes="Solid Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-            <Label Classes="Solid Orange" Theme="{StaticResource TagLabel}">Orange</Label>
-            <Label Classes="Solid Pink" Theme="{StaticResource TagLabel}">Pink</Label>
-            <Label Classes="Solid Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-            <Label Classes="Solid Red" Theme="{StaticResource TagLabel}">Red</Label>
-            <Label Classes="Solid Teal" Theme="{StaticResource TagLabel}">Teal</Label>
-            <Label Classes="Solid Violet" Theme="{StaticResource TagLabel}">Violet</Label>
-            <Label Classes="Solid Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
-            <Label Classes="Solid White" Theme="{StaticResource TagLabel}">White</Label>
-        </WrapPanel>
-    </StackPanel>
+    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">
+    <ScrollViewer>
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
+            <StackPanel.Styles>
+                <Style Selector="Label">
+                    <Setter Property="Margin" Value="4" />
+                </Style>
+            </StackPanel.Styles>
+            <ScrollViewer HorizontalScrollBarVisibility="Auto">
+                <StackPanel Orientation="Horizontal">
+                    <StackPanel.Styles>
+                        <Style Selector="Label, TextBlock">
+                            <Setter Property="VerticalAlignment" Value="Center" />
+                            <Setter Property="Margin" Value="4" />
+                        </Style>
+                    </StackPanel.Styles>
+                    <HeaderedContentControl
+                        Width="400"
+                        Height="400"
+                        Margin="16"
+                        VerticalAlignment="Top"
+                        Header="Default Theme"
+                        Theme="{DynamicResource GroupBox}">
+                        <Grid
+                            VerticalAlignment="Top"
+                            ColumnDefinitions="Auto, *"
+                            RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
+                            <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
+                            <TextBlock Grid.Row="2" Grid.Column="0">-</TextBlock>
+                            <TextBlock Grid.Row="3" Grid.Column="0">Secondary</TextBlock>
+                            <TextBlock Grid.Row="4" Grid.Column="0">Tertiary</TextBlock>
+                            <TextBlock Grid.Row="5" Grid.Column="0">Quaternary</TextBlock>
+                            <TextBlock Grid.Row="6" Grid.Column="0">Success</TextBlock>
+                            <TextBlock Grid.Row="7" Grid.Column="0">Warning</TextBlock>
+                            <TextBlock Grid.Row="8" Grid.Column="0">Danger</TextBlock>
+                            <TextBlock Grid.Row="9" Grid.Column="0">Mark</TextBlock>
+                            <TextBlock Grid.Row="10" Grid.Column="0">Code</TextBlock>
+                            <Label Grid.Row="2" Grid.Column="1">Text</Label>
+                            <Label
+                                Grid.Row="3"
+                                Grid.Column="1"
+                                Classes="Secondary">
+                                Secondary
+                            </Label>
+                            <Label
+                                Grid.Row="4"
+                                Grid.Column="1"
+                                Classes="Tertiary">
+                                Tertiary
+                            </Label>
+                            <Label
+                                Grid.Row="5"
+                                Grid.Column="1"
+                                Classes="Quaternary">
+                                Quaternary
+                            </Label>
+                            <Label
+                                Grid.Row="6"
+                                Grid.Column="1"
+                                Classes="Success">
+                                Success
+                            </Label>
+                            <Label
+                                Grid.Row="7"
+                                Grid.Column="1"
+                                Classes="Warning">
+                                Warning
+                            </Label>
+                            <Label
+                                Grid.Row="8"
+                                Grid.Column="1"
+                                Classes="Danger">
+                                Danger
+                            </Label>
+                            <Label
+                                Grid.Row="9"
+                                Grid.Column="1"
+                                Classes="Mark">
+                                Default Mark
+                            </Label>
+                            <Label
+                                Grid.Row="10"
+                                Grid.Column="1"
+                                Classes="Code">
+                                Code
+                            </Label>
+                        </Grid>
+                    </HeaderedContentControl>
+                    <HeaderedContentControl
+                        Width="400"
+                        Height="400"
+                        Margin="16"
+                        VerticalAlignment="Top"
+                        Header="Theme: TitleLabel"
+                        Theme="{DynamicResource GroupBox}">
+                        <Grid
+                            VerticalAlignment="Top"
+                            ColumnDefinitions="Auto, *"
+                            RowDefinitions="*,*,*,*,*,*,*,*">
+                            <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
+                            <TextBlock Grid.Row="2" Grid.Column="0">H1</TextBlock>
+                            <TextBlock Grid.Row="3" Grid.Column="0">H2</TextBlock>
+                            <TextBlock Grid.Row="4" Grid.Column="0">H3</TextBlock>
+                            <TextBlock Grid.Row="5" Grid.Column="0">H4</TextBlock>
+                            <TextBlock Grid.Row="6" Grid.Column="0">H5</TextBlock>
+                            <TextBlock Grid.Row="7" Grid.Column="0">H6</TextBlock>
+                            <Label
+                                Grid.Row="2"
+                                Grid.Column="1"
+                                Classes="H1"
+                                Theme="{StaticResource TitleLabel}">
+                                Header 1
+                            </Label>
+                            <Label
+                                Grid.Row="3"
+                                Grid.Column="1"
+                                Classes="H2"
+                                Theme="{StaticResource TitleLabel}">
+                                Header 2
+                            </Label>
+                            <Label
+                                Grid.Row="4"
+                                Grid.Column="1"
+                                Classes="H3"
+                                Theme="{StaticResource TitleLabel}">
+                                Header 3
+                            </Label>
+                            <Label
+                                Grid.Row="5"
+                                Grid.Column="1"
+                                Classes="H4"
+                                Theme="{StaticResource TitleLabel}">
+                                Header 4
+                            </Label>
+                            <Label
+                                Grid.Row="6"
+                                Grid.Column="1"
+                                Classes="H5"
+                                Theme="{StaticResource TitleLabel}">
+                                Header 5
+                            </Label>
+                            <Label
+                                Grid.Row="7"
+                                Grid.Column="1"
+                                Classes="H6"
+                                Theme="{StaticResource TitleLabel}">
+                                Header 6
+                            </Label>
+                        </Grid>
+                    </HeaderedContentControl>
+                </StackPanel>
+            </ScrollViewer>
+            <WrapPanel>
+                <Label Theme="{StaticResource TagLabel}">Label</Label>
+                <Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
+                <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
+                <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
+            </WrapPanel>
+            <WrapPanel>
+                <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
+                <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
+                <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
+            </WrapPanel>
+            <WrapPanel>
+                <Label Classes="Ghost Red" Theme="{StaticResource TagLabel}">Red</Label>
+                <Label Classes="Ghost Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                <Label Classes="Ghost Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                <Label Classes="Ghost Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                <Label Classes="Ghost Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                <Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                <Label Classes="Ghost LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                <Label Classes="Ghost Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                <Label Classes="Ghost Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                <Label Classes="Ghost Green" Theme="{StaticResource TagLabel}">Green</Label>
+                <Label Classes="Ghost LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                <Label Classes="Ghost Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                <Label Classes="Ghost Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                <Label Classes="Ghost Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                <Label Classes="Ghost Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                <Label Classes="Ghost Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                <Label Classes="Ghost White" Theme="{StaticResource TagLabel}">White</Label>
+            </WrapPanel>
+            <WrapPanel>
+                <Label Classes="Solid Red" Theme="{StaticResource TagLabel}">Red</Label>
+                <Label Classes="Solid Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                <Label Classes="Solid Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                <Label Classes="Solid Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                <Label Classes="Solid Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                <Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                <Label Classes="Solid LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                <Label Classes="Solid Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                <Label Classes="Solid Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                <Label Classes="Solid Green" Theme="{StaticResource TagLabel}">Green</Label>
+                <Label Classes="Solid LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                <Label Classes="Solid Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                <Label Classes="Solid Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                <Label Classes="Solid Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                <Label Classes="Solid Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                <Label Classes="Solid Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                <Label Classes="Solid White" Theme="{StaticResource TagLabel}">White</Label>
+            </WrapPanel>
+        </StackPanel>
+    </ScrollViewer>
 </UserControl>

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

@@ -4,22 +4,145 @@
     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"
+    xmlns:local="clr-namespace:Semi.Avalonia.Demo.Pages"
+    d:DesignHeight="900"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <ListBox Margin="20">
-        <ListBoxItem>Item 1</ListBoxItem>
-        <ListBoxItem>Item 2</ListBoxItem>
-        <ListBoxItem IsEnabled="False">Item 3</ListBoxItem>
-        <ListBoxItem>Item 4</ListBoxItem>
-        <ListBoxItem>Item 5</ListBoxItem>
-        <ListBoxItem>Item 6</ListBoxItem>
-        <ListBoxItem>Item 7</ListBoxItem>
-        <ListBoxItem IsEnabled="False">Item 8</ListBoxItem>
-        <ListBoxItem>Item 9</ListBoxItem>
-        <ListBoxItem>Item 10</ListBoxItem>
-        <ListBoxItem>Item 11</ListBoxItem>
-        <ListBoxItem>Item 12</ListBoxItem>
-        <ListBoxItem>Item 13</ListBoxItem>
-    </ListBox>
-</UserControl>
+    <ScrollViewer>
+        <Grid ColumnDefinitions="*,*,*">
+            <HeaderedContentControl
+                Grid.Column="0"
+                Theme="{StaticResource GroupBox}"
+                Header="Default">
+                <ScrollViewer>
+                    <StackPanel Spacing="20">
+                        <TextBlock Text="Theme: Default"/>
+                        <ListBox ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
+                        <ListBox IsEnabled="False">
+                            <ListBoxItem IsSelected="True">Avalonia</ListBoxItem>
+                            <ListBoxItem>WPF</ListBoxItem>
+                        </ListBox>
+                    </StackPanel>
+                </ScrollViewer>
+            </HeaderedContentControl>
+
+            <HeaderedContentControl
+                Grid.Column="1"
+                Theme="{DynamicResource GroupBox}"
+                Header="RadioGroupListBox">
+                <StackPanel Spacing="20">
+                    <TextBlock Text="Theme: RadioGroupListBox"/>
+                    <ListBox
+                        Theme="{DynamicResource RadioGroupListBox}"
+                        ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
+                    <ListBox Theme="{DynamicResource RadioGroupListBox}" IsEnabled="False">
+                        <ListBoxItem>Avalonia</ListBoxItem>
+                        <ListBoxItem IsSelected="True">WPF</ListBoxItem>
+                    </ListBox>
+
+                    <TextBlock Text="Theme: ButtonRadioGroupListBox"/>
+                    <StackPanel Orientation="Horizontal">
+                        <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                            <ListBox Theme="{DynamicResource ButtonRadioGroupListBox}">
+                                <ListBoxItem Classes="Small" IsSelected="True">Small 1</ListBoxItem>
+                                <ListBoxItem Classes="Small">Small 2</ListBoxItem>
+                            </ListBox>
+                        </Border>
+                        <Border
+                            Margin="8,0"
+                            HorizontalAlignment="Left"
+                            Theme="{StaticResource RadioButtonGroupBorder}">
+                            <ListBox Theme="{DynamicResource ButtonRadioGroupListBox}" IsEnabled="False">
+                                <ListBoxItem Classes="Small" IsSelected="True">Small 1</ListBoxItem>
+                                <ListBoxItem Classes="Small">Small 2</ListBoxItem>
+                            </ListBox>
+                        </Border>
+                    </StackPanel>
+                    <StackPanel Orientation="Horizontal">
+                        <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                            <ListBox Theme="{DynamicResource ButtonRadioGroupListBox}">
+                                <ListBoxItem IsSelected="True">Default 1</ListBoxItem>
+                                <ListBoxItem>Default 2</ListBoxItem>
+                            </ListBox>
+                        </Border>
+                        <Border
+                            Margin="8,0"
+                            HorizontalAlignment="Left"
+                            Theme="{StaticResource RadioButtonGroupBorder}">
+                            <ListBox Theme="{DynamicResource ButtonRadioGroupListBox}" IsEnabled="False">
+                                <ListBoxItem IsSelected="True">Default 1</ListBoxItem>
+                                <ListBoxItem>Default 2</ListBoxItem>
+                            </ListBox>
+                        </Border>
+                    </StackPanel>
+                    <StackPanel Orientation="Horizontal">
+                        <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                            <ListBox Theme="{DynamicResource ButtonRadioGroupListBox}">
+                                <ListBoxItem Classes="Large" IsSelected="True">Small 1</ListBoxItem>
+                                <ListBoxItem Classes="Large">Small 2</ListBoxItem>
+                            </ListBox>
+                        </Border>
+                        <Border
+                            Margin="8,0"
+                            HorizontalAlignment="Left"
+                            Theme="{StaticResource RadioButtonGroupBorder}">
+                            <ListBox Theme="{DynamicResource ButtonRadioGroupListBox}" IsEnabled="False">
+                                <ListBoxItem Classes="Large" IsSelected="True">Small 1</ListBoxItem>
+                                <ListBoxItem Classes="Large">Small 2</ListBoxItem>
+                            </ListBox>
+                        </Border>
+                    </StackPanel>
+
+                    <TextBlock Text="Theme: CardRadioGroupListBox"/>
+                    <ListBox Theme="{DynamicResource CardRadioGroupListBox}"
+                             ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
+                    <ListBox Theme="{DynamicResource CardRadioGroupListBox}" IsEnabled="False">
+                        <ListBoxItem IsSelected="True">Avalonia</ListBoxItem>
+                        <ListBoxItem>WPF</ListBoxItem>
+                    </ListBox>
+
+                    <TextBlock Text="Theme: PureCardRadioGroupListBox"/>
+                    <ListBox Theme="{DynamicResource PureCardRadioGroupListBox}"
+                             ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
+                    <ListBox Theme="{DynamicResource PureCardRadioGroupListBox}" IsEnabled="False">
+                        <ListBoxItem>Avalonia</ListBoxItem>
+                        <ListBoxItem IsSelected="True">WPF</ListBoxItem>
+                    </ListBox>
+                </StackPanel>
+            </HeaderedContentControl>
+
+            <HeaderedContentControl
+                Grid.Column="2"
+                Theme="{DynamicResource GroupBox}"
+                Header="CheckGroupListBox">
+                <ScrollViewer>
+                    <StackPanel Spacing="20">
+                        <TextBlock Text="Theme: CheckGroupListBox"/>
+                        <ListBox
+                            SelectionMode="Multiple"
+                            Theme="{DynamicResource CheckGroupListBox}"
+                            ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
+                        <ListBox Theme="{DynamicResource CheckGroupListBox}"
+                                 SelectionMode="Multiple"
+                                 IsEnabled="False">
+                            <ListBoxItem IsSelected="True">Avalonia</ListBoxItem>
+                            <ListBoxItem>WPF</ListBoxItem>
+                        </ListBox>
+
+                        <TextBlock Text="Theme: CardCheckGroupListBox"/>
+                        <ListBox
+                            SelectionMode="Multiple"
+                            Theme="{DynamicResource CardCheckGroupListBox}"
+                            ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
+                        <ListBox Theme="{DynamicResource CardCheckGroupListBox}"
+                                 SelectionMode="Multiple"
+                                 IsEnabled="False">
+                            <ListBoxItem>Avalonia</ListBoxItem>
+                            <ListBoxItem IsSelected="True">WPF</ListBoxItem>
+                        </ListBox>
+                    </StackPanel>
+                </ScrollViewer>
+            </HeaderedContentControl>
+        </Grid>
+    </ScrollViewer>
+</UserControl>

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

@@ -1,6 +1,6 @@
-using Avalonia;
+using System.Collections;
+using System.Collections.Generic;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -10,4 +10,6 @@ public partial class ListBoxDemo : UserControl
     {
         InitializeComponent();
     }
+
+    public IEnumerable Items { get; set; } = new List<string> { "Ding", "Otter", "Husky", "Mr.17", "Cass", };
 }

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,8 @@
     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="Default" />
         <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

@@ -2,17 +2,14 @@ using System;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Notifications;
-using Avalonia.Controls.Presenters;
 using Avalonia.Interactivity;
-using Avalonia.Markup.Xaml;
-using Avalonia.VisualTree;
-using Semi.Avalonia.Demo.Views;
 
 namespace Semi.Avalonia.Demo.Pages;
 
 public partial class NotificationDemo : UserControl
 {
     private WindowNotificationManager? _manager;
+
     public NotificationDemo()
     {
         InitializeComponent();
@@ -22,14 +19,16 @@ public partial class NotificationDemo : UserControl
     {
         base.OnAttachedToVisualTree(e);
         var topLevel = TopLevel.GetTopLevel(this);
-        _manager = new WindowNotificationManager(topLevel){ MaxItems = 3};
+        _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))
+        if (sender is Button b && b.Content is string s)
         {
-            _manager?.Show(new Notification(t.ToString(), "This is message", t));
+            _manager?.Show(Enum.TryParse<NotificationType>(s, out NotificationType t)
+                ? new Notification(t.ToString(), "This is message", t)
+                : new Notification(s, "This is message"));
         }
     }
 }

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

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

@@ -2,161 +2,403 @@
     x:Class="Semi.Avalonia.Demo.Pages.Overview"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="clr-namespace:Avalonia.Markup.Xaml.Converters;assembly=Avalonia.Markup.Xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="clr-namespace:Semi.Avalonia.Demo.Pages"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     d:DesignHeight="1000"
-    d:DesignWidth="800"
+    d:DesignWidth="1920"
     mc:Ignorable="d">
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <converters:ColorToBrushConverter x:Key="ColorToBrushConverter" />
+        </ResourceDictionary>
+    </UserControl.Resources>
+    <UserControl.Styles>
+        <Style Selector="Border.CodeBlock">
+            <Setter Property="BorderBrush" Value="{DynamicResource SemiColorBorder}" />
+            <Setter Property="Padding" Value="16" />
+            <Setter Property="CornerRadius" Value="6" />
+            <Setter Property="Background" Value="{DynamicResource SemiColorFill0}" />
+        </Style>
+    </UserControl.Styles>
     <ScrollViewer HorizontalScrollBarVisibility="Auto">
-        <StackPanel Margin="10" Spacing="5">
+        <StackPanel Margin="20">
+            <StackPanel
+                Margin="20"
+                HorizontalAlignment="Center"
+                Orientation="Horizontal">
+                <PathIcon
+                    Width="32"
+                    Height="32"
+                    Data="M10.6201 17.5C6.06377 17.5 2.37012 13.8063 2.37012 9.25C2.37012 4.69365 6.06377 1 10.6201 1V17.5ZM13.3701 6.5C17.9265 6.5 21.6201 10.1936 21.6201 14.75C21.6201 19.3063 17.9265 23 13.3701 23V6.5Z" />
+                <PathIcon
+                    Width="10"
+                    Height="10"
+                    Margin="20,0"
+                    Data="M20.5 13.5C21.3284 13.5 22 12.8284 22 12C22 11.1716 21.3284 10.5 20.5 10.5L13.5 10.5L13.5 3.5C13.5 2.67157 12.8284 2 12 2C11.1716 2 10.5 2.67157 10.5 3.5L10.5 10.5L3.5 10.5C2.67157 10.5 2 11.1716 2 12C2 12.8284 2.67157 13.5 3.5 13.5L10.5 13.5V20.5C10.5 21.3284 11.1716 22 12 22C12.8284 22 13.5 21.3284 13.5 20.5V13.5L20.5 13.5Z" />
+                <Image Width="32" Height="32">
+                    <Image.Source>
+                        <DrawingImage>
+                            <DrawingGroup>
+                                <GeometryDrawing Brush="#8B44AC" Geometry="M74.8535 85.8231C75.0263 85.8231 75.1954 85.8231 75.3679 85.8231C80.7347 85.8231 85.1439 81.8027 85.7614 76.6019L85.8357 41.7604C85.2255 18.5931 66.2537 0 42.9393 0C19.2399 0 0.02771 19.2122 0.02771 42.9116C0.02771 66.3573 18.8309 85.418 42.18 85.8231H74.8535Z" />
+                                <GeometryDrawing Brush="#F9F9FB" Geometry="M43.0585 14.6143C29.5513 14.6143 18.2555 24.082 15.4454 36.7432C18.1357 37.4975 20.1087 39.9679 20.1087 42.8992C20.1087 45.8305 18.1357 48.301 15.4454 49.0552C18.2555 61.7164 29.5513 71.1842 43.0585 71.1842C47.9754 71.1842 52.5993 69.9296 56.6276 67.723V70.9926H71.3435V44.0716C71.3569 43.7138 71.3435 43.2603 71.3435 42.8992C71.3435 27.2779 58.6799 14.6143 43.0585 14.6143ZM29.5096 42.8992C29.5096 35.4164 35.5757 29.3503 43.0585 29.3503C50.5414 29.3503 56.6074 35.4164 56.6074 42.8992C56.6074 50.3821 50.5414 56.4481 43.0585 56.4481C35.5757 56.4481 29.5096 50.3821 29.5096 42.8992Z" />
+                                <GeometryDrawing Brush="#F9F9FB" Geometry="M18.105 42.8805C18.105 45.3803 16.0785 47.4068 13.5787 47.4068C11.0789 47.4068 9.05237 45.3803 9.05237 42.8805C9.05237 40.3807 11.0789 38.3542 13.5787 38.3542C16.0785 38.3542 18.105 40.3807 18.105 42.8805Z" />
+                            </DrawingGroup>
+                        </DrawingImage>
+                    </Image.Source>
+                </Image>
+            </StackPanel>
             <TextBlock
                 HorizontalAlignment="Center"
-                Classes="H4"
-                Text="Welcome to Semi Avalonia"
-                Theme="{StaticResource TitleTextBlock}" />
-
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
-                <Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
-                <Button Classes="Tertiary" Theme="{DynamicResource SolidButton}">Tertiary</Button>
-                <Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
-                <Button Classes="Danger" Theme="{DynamicResource SolidButton}">Danger</Button>
-                <Button
-                    Classes="Primary"
-                    IsEnabled="False"
-                    Theme="{DynamicResource SolidButton}">
-                    Danger
-                </Button>
+                Classes="H1"
+                Text="Semi Avalonia"
+                Theme="{DynamicResource TitleTextBlock}" />
+            <TextBlock
+                MaxWidth="600"
+                Margin="0,20,0,0"
+                HorizontalAlignment="Center"
+                Classes="Secondary"
+                Text="AvaloniaUI Theme inspired by Semi Design. An easy-to-customize modern design system that helps designers and developers create high-quality products."
+                TextWrapping="Wrap" />
+            <StackPanel
+                Margin="0,10,0,0"
+                HorizontalAlignment="Center"
+                Orientation="Horizontal">
+                <TextBlock
+                    Margin="12,0"
+                    FontWeight="600"
+                    Text="Modern" />
+                <TextBlock
+                    Margin="12,0"
+                    FontWeight="600"
+                    Foreground="{Binding #color.Color, Converter={StaticResource ColorToBrushConverter}, Mode=TwoWay}"
+                    Text="Flexible" />
+                <TextBlock
+                    Margin="12,0"
+                    FontWeight="600"
+                    Text="Simple" />
             </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <Label Theme="{StaticResource TagLabel}">Label</Label>
-                <Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
-                <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
-                <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
-            </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <Label Classes="Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
-                <Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
-                <Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
-            </StackPanel>
-            <StackPanel Orientation="Horizontal">
-                <StackPanel
-                    Margin="0,0,16,0"
-                    VerticalAlignment="Center"
-                    Orientation="Horizontal">
-                    <RadioButton Margin="0,0,8,0">Option 1</RadioButton>
-                    <RadioButton>Option 2</RadioButton>
-                </StackPanel>
-                <Border VerticalAlignment="Center" Theme="{StaticResource RadioButtonGroupBorder}">
+            <StackPanel HorizontalAlignment="Center">
+                <StackPanel>
                     <StackPanel Orientation="Horizontal">
-                        <RadioButton IsChecked="True" Theme="{StaticResource ButtonRadioButton}">选项 1</RadioButton>
-                        <RadioButton Theme="{StaticResource ButtonRadioButton}">选项 2</RadioButton>
-                    </StackPanel>
-                </Border>
-                <RadioButton Margin="4" Theme="{StaticResource CardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">Option 1</TextBlock>
-                        <TextBlock Classes="Tertiary">Description 1</TextBlock>
-                    </StackPanel>
-                </RadioButton>
-                <RadioButton
-                    Margin="4"
-                    IsChecked="True"
-                    Theme="{StaticResource CardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">Option 2</TextBlock>
-                        <TextBlock Classes="Tertiary">Description 2</TextBlock>
-                    </StackPanel>
-                </RadioButton>
-            </StackPanel>
-            <StackPanel Orientation="Horizontal" />
-            <StackPanel Orientation="Horizontal">
-                <CheckBox Margin="0,0,8,0">Avalonia</CheckBox>
-                <CheckBox Margin="0,0,8,0" IsChecked="True">WPF</CheckBox>
-                <CheckBox IsChecked="{x:Null}" IsThreeState="True">UWP</CheckBox>
-            </StackPanel>
-            <StackPanel Orientation="Horizontal">
-                <ToggleSwitch
-                    Content="Content"
-                    OffContent="No"
-                    OnContent="Yes" />
-                <ProgressBar
-                    Classes="Right"
-                    ShowProgressText="True"
-                    Value="20" />
-                <Slider
-                    Width="200"
-                    Margin="30,0"
-                    Orientation="Horizontal"
-                    Value="30" />
-            </StackPanel>
-            <TabControl>
-                <TabItem Header="Tab 1">
-                    <TextBlock Margin="8">Tab Content 1</TextBlock>
-                </TabItem>
-                <TabItem Header="Tab 2">
-                    <TextBlock Margin="8">Tab Content 2</TextBlock>
-                </TabItem>
-                <TabItem Header="Tab 3">
-                    <TextBlock Margin="8">Tab Content 3</TextBlock>
-                </TabItem>
-            </TabControl>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <ComboBox Width="200" PlaceholderText="Please Select" />
-                <DatePicker />
-                <TimePicker />
-                <CalendarDatePicker />
-            </StackPanel>
-            <Grid ColumnDefinitions="* * *">
-                <Border Theme="{StaticResource CardBorder}">
-                    <TextBlock>Card</TextBlock>
-                </Border>
-                <Border
-                    Grid.Column="1"
-                    Classes="Hover"
-                    Theme="{StaticResource CardBorder}">
-                    <TextBlock>Shadow on hover</TextBlock>
-                </Border>
-                <Border
-                    Grid.Column="2"
-                    Classes="Shadow"
-                    Theme="{StaticResource CardBorder}">
-                    <TextBlock>Shadow</TextBlock>
-                </Border>
-            </Grid>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <TextBox
-                    Width="200"
-                    InnerLeftContent="http://"
-                    InnerRightContent=".com" />
-                <TextBox
-                    Width="200"
-                    Classes="revealPasswordButton"
-                    PasswordChar="*"
-                    Text="Avalonia" />
+                        <StackPanel Margin="16,0">
+                            <Button
+                                Margin="0,8"
+                                Classes="Primary"
+                                Content="Primary"
+                                Theme="{DynamicResource SolidButton}" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Secondary"
+                                Content="Secondary"
+                                Theme="{DynamicResource SolidButton}" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Tertiary"
+                                Content="Tertiary"
+                                Theme="{DynamicResource SolidButton}" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Success"
+                                Content="Success"
+                                Theme="{DynamicResource SolidButton}" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Warning"
+                                Content="Warning"
+                                Theme="{DynamicResource SolidButton}" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Danger"
+                                Content="Danger"
+                                Theme="{DynamicResource SolidButton}" />
+                        </StackPanel>
+                        <Calendar Margin="16,0" />
+                        <StackPanel Margin="16,0">
+                            <TextBox
+                                Width="300"
+                                Margin="0,12"
+                                InnerLeftContent="https://"
+                                InnerRightContent=".com" />
+                            <DatePicker Width="300" Margin="0,12" />
+                            <CalendarDatePicker Width="300" Margin="0,12" />
+                            <NumericUpDown Width="300" Margin="0,12" />
+                            <ComboBox Width="300" Margin="0,12">
+                                <ComboBoxItem>Avalonia</ComboBoxItem>
+                                <ComboBoxItem>Semi Design</ComboBoxItem>
+                                <ComboBoxItem>IRIHI Technology</ComboBoxItem>
+                            </ComboBox>
+                        </StackPanel>
+                        <StackPanel>
+                            <UniformGrid HorizontalAlignment="Center" Columns="3">
+                                <UniformGrid.Styles>
+                                    <Style Selector="CheckBox">
+                                        <Setter Property="Margin" Value="4" />
+                                    </Style>
+                                </UniformGrid.Styles>
+                                <CheckBox Content="Windows" IsChecked="True" />
+                                <CheckBox Content="macOS" IsChecked="True" />
+                                <CheckBox Content="Linux" IsChecked="True" />
+                                <CheckBox
+                                    Content="iOS"
+                                    IsChecked="{x:Null}"
+                                    IsThreeState="True" />
+                                <CheckBox
+                                    Content="Android"
+                                    IsChecked="{x:Null}"
+                                    IsThreeState="True" />
+                                <CheckBox
+                                    Content="Wasm"
+                                    IsChecked="{x:Null}"
+                                    IsThreeState="True" />
+                            </UniformGrid>
+                            <UniformGrid HorizontalAlignment="Center" Columns="3">
+                                <UniformGrid.Styles>
+                                    <Style Selector="CheckBox">
+                                        <Setter Property="Margin" Value="4" />
+                                    </Style>
+                                </UniformGrid.Styles>
+                                <CheckBox
+                                    Content="Windows"
+                                    IsChecked="True"
+                                    Theme="{DynamicResource CardCheckBox}" />
+                                <CheckBox
+                                    Content="macOS"
+                                    IsChecked="True"
+                                    Theme="{DynamicResource CardCheckBox}" />
+                                <CheckBox
+                                    Content="Linux"
+                                    IsChecked="True"
+                                    Theme="{DynamicResource CardCheckBox}" />
+                                <CheckBox
+                                    Content="iOS"
+                                    IsChecked="{x:Null}"
+                                    IsThreeState="True"
+                                    Theme="{DynamicResource CardCheckBox}" />
+                                <CheckBox
+                                    Content="Android"
+                                    IsChecked="{x:Null}"
+                                    IsThreeState="True"
+                                    Theme="{DynamicResource CardCheckBox}" />
+                                <CheckBox
+                                    Content="Wasm"
+                                    IsChecked="{x:Null}"
+                                    IsThreeState="True"
+                                    Theme="{DynamicResource CardCheckBox}" />
+                            </UniformGrid>
+                        </StackPanel>
 
-            </StackPanel>
+                    </StackPanel>
+                    <StackPanel Orientation="Horizontal">
+                        <StackPanel Margin="16,0">
+                            <Button
+                                Margin="0,8"
+                                Classes="Primary"
+                                Content="Primary" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Secondary"
+                                Content="Secondary" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Tertiary"
+                                Content="Tertiary" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Success"
+                                Content="Success" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Warning"
+                                Content="Warning" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Danger"
+                                Content="Danger" />
+                        </StackPanel>
+                        <ColorView
+                            Name="color"
+                            VerticalAlignment="Top"
+                            Palette="{DynamicResource SemiColorPalette}"
+                            SelectedIndex="2"
+                            Color="#8B44AC" />
+                        <StackPanel Width="300" Margin="8">
+                            <StackPanel Orientation="Horizontal">
+                                <Slider
+                                    Name="slider"
+                                    Width="200"
+                                    Margin="16"
+                                    Maximum="100"
+                                    Minimum="0" />
+                                <ToggleSwitch Name="three" IsChecked="True" />
+                            </StackPanel>
+                            <UniformGrid Columns="2">
+                                <ProgressBar
+                                    Width="100"
+                                    MinWidth="100"
+                                    Margin="0,16"
+                                    IsIndeterminate="{Binding #three.IsChecked}"
+                                    ShowProgressText="True"
+                                    Value="{Binding #slider.Value}" />
+                                <ProgressBar
+                                    Width="100"
+                                    Height="100"
+                                    IsIndeterminate="{Binding #three.IsChecked}"
+                                    ShowProgressText="True"
+                                    Theme="{DynamicResource ProgressRing}"
+                                    Value="{Binding #slider.Value}" />
+                            </UniformGrid>
+                            <TabStrip Margin="0,8">
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                            </TabStrip>
+                            <Menu Margin="0,8">
+                                <MenuItem Header="Menu 1">
+                                    <MenuItem Header="SubMenu 1" />
+                                    <MenuItem Header="SubMenu 2" />
+                                    <MenuItem Header="SubMenu 3" />
+                                </MenuItem>
+                                <MenuItem Header="Menu 2">
+                                    <MenuItem Header="SubMenu 1" />
+                                    <MenuItem Header="SubMenu 2" />
+                                    <MenuItem Header="SubMenu 3" />
+                                    <MenuItem Header="SubMenu 4">
+                                        <MenuItem Header="SubMenu 1" />
+                                        <MenuItem Header="SubMenu 2" />
+                                        <MenuItem Header="SubMenu 3" />
+                                    </MenuItem>
+                                </MenuItem>
+                                <MenuItem Header="Menu 3" />
+                            </Menu>
 
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <TreeView>
-                    <TreeViewItem Header="Level 1" IsExpanded="True">
-                        <TreeViewItem Header="Level 2" />
-                        <TreeViewItem Header="Level 2" />
-                        <TreeViewItem Header="Level 2" IsExpanded="True">
-                            <TreeViewItem Header="Level 3" />
-                            <TreeViewItem Header="Level 3" />
-                        </TreeViewItem>
-                    </TreeViewItem>
-                </TreeView>
-                <ListBox SelectedIndex="3">
-                    <TextBlock>List Item 1</TextBlock>
-                    <TextBlock>List Item 2</TextBlock>
-                    <TextBlock>List Item 3</TextBlock>
-                    <TextBlock>List Item 4</TextBlock>
-                    <TextBlock>List Item 5</TextBlock>
-                </ListBox>
-                <Calendar />
+                        </StackPanel>
+                        <StackPanel Margin="8">
+
+                            <UniformGrid HorizontalAlignment="Center" Columns="3">
+                                <UniformGrid.Styles>
+                                    <Style Selector="RadioButton">
+                                        <Setter Property="Margin" Value="4" />
+                                        <Setter Property="HorizontalAlignment" Value="Center" />
+                                    </Style>
+                                </UniformGrid.Styles>
+                                <RadioButton Content="Avalonia" IsChecked="True" />
+                                <RadioButton Content="WPF" />
+                                <RadioButton Content="Xamarin" />
+                            </UniformGrid>
+                            <UniformGrid HorizontalAlignment="Center" Columns="3">
+                                <UniformGrid.Styles>
+                                    <Style Selector="RadioButton">
+                                        <Setter Property="Margin" Value="4" />
+                                        <Setter Property="HorizontalAlignment" Value="Center" />
+                                    </Style>
+                                </UniformGrid.Styles>
+                                <RadioButton
+                                    Content="Avalonia"
+                                    IsChecked="True"
+                                    Theme="{DynamicResource CardRadioButton}" />
+                                <RadioButton Content="WPF" Theme="{DynamicResource CardRadioButton}" />
+                                <RadioButton Content="Xamarin" Theme="{DynamicResource CardRadioButton}" />
+                            </UniformGrid>
+                            <WrapPanel Width="300">
+                                <WrapPanel.Styles>
+                                    <Style Selector="Label">
+                                        <Setter Property="Margin" Value="4" />
+                                        <Setter Property="HorizontalContentAlignment" Value="Center" />
+                                    </Style>
+                                </WrapPanel.Styles>
+                                <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
+                                <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                                <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                                <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                                <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                                <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                                <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                                <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                                <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                                <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
+                                <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                                <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                                <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                                <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                                <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                                <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                                <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
+                                <Label Classes="Large" Theme="{StaticResource TagLabel}">Large</Label>
+                                <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle</Label>
+                            </WrapPanel>
+                        </StackPanel>
+                    </StackPanel>
+                </StackPanel>
+                <TextBlock
+                    Margin="0,32,0,16"
+                    Classes="H5"
+                    Text="Start to install"
+                    Theme="{DynamicResource TitleTextBlock}" />
+                <TabControl Padding="8">
+                    <TabItem Header="Main">
+                        <StackPanel>
+                            <TextBlock Text="Install via nuget: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].MainInstall}" />
+                            </Border>
+                            <TextBlock Text="Reference styles: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock
+                                    FontFamily="Consolas"
+                                    Text="{Binding $parent[local:Overview].MainStyle}"
+                                    TextWrapping="Wrap" />
+                            </Border>
+                        </StackPanel>
+                    </TabItem>
+                    <TabItem Header="ColorPicker">
+                        <StackPanel>
+                            <TextBlock Text="Install via nuget: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].ColorPickerInstall}" />
+                            </Border>
+                            <TextBlock Text="Reference styles: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock
+                                    FontFamily="Consolas"
+                                    Text="{Binding $parent[local:Overview].ColorPickerStyle}"
+                                    TextWrapping="Wrap" />
+                            </Border>
+                        </StackPanel>
+                    </TabItem>
+                    <TabItem Header="DataGrid">
+                        <StackPanel>
+                            <TextBlock Text="Install via nuget: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].DataGridInstall}" />
+                            </Border>
+                            <TextBlock Text="Reference styles: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock
+                                    FontFamily="Consolas"
+                                    Text="{Binding $parent[local:Overview].DataGridStyle}"
+                                    TextWrapping="Wrap" />
+                            </Border>
+                        </StackPanel>
+                    </TabItem>
+                    <TabItem Header="TreeDataGrid">
+                        <StackPanel>
+                            <TextBlock Text="Install via nuget: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].TreeDataGridInstall}" />
+                            </Border>
+                            <TextBlock Text="Reference styles: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock
+                                    FontFamily="Consolas"
+                                    Text="{Binding $parent[local:Overview].TreeDataGridStyle}"
+                                    TextWrapping="Wrap" />
+                            </Border>
+                        </StackPanel>
+                    </TabItem>
+                </TabControl>
             </StackPanel>
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>

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,36 @@ public partial class Overview : UserControl
     {
         InitializeComponent();
     }
+
+    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.0.7";
+
+    public string MainStyle { get; set; } = """
+<Application.Styles>
+    <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
+</Application.Styles>
+""";
+
+    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.0.7";
+
+    public string ColorPickerStyle { get; set; } = """
+<Application.Styles>
+    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+</Application.Styles>
+""";
+
+    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.0.7";
+
+    public string DataGridStyle { get; set; } = """
+<Application.Styles>
+    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+</Application.Styles>
+""";
+
+    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.7";
+
+    public string TreeDataGridStyle { get; set; } = """
+<Application.Styles>
+    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
+</Application.Styles>
+""";
 }

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

@@ -0,0 +1,130 @@
+<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}"
+                            ColorResourceKey="{Binding SelectedColor.ColorResourceKey}"
+                            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" ItemsSource="{Binding LightLists}">
+                                <ItemsControl.ItemsPanel>
+                                    <ItemsPanelTemplate>
+                                        <WrapPanel Orientation="Horizontal" />
+                                    </ItemsPanelTemplate>
+                                </ItemsControl.ItemsPanel>
+                                <ItemsControl.ItemTemplate>
+                                    <DataTemplate x:DataType="viewModels:ColorListViewModel">
+                                        <ItemsControl Margin="4,0" ItemsSource="{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" ItemsSource="{Binding DarkLists}">
+                                <ItemsControl.ItemsPanel>
+                                    <ItemsPanelTemplate>
+                                        <WrapPanel Orientation="Horizontal" />
+                                    </ItemsPanelTemplate>
+                                </ItemsControl.ItemsPanel>
+                                <ItemsControl.ItemTemplate>
+                                    <DataTemplate x:DataType="viewModels:ColorListViewModel">
+                                        <ItemsControl Margin="4,0" ItemsSource="{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 ItemsSource="{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/PathIconDemo.axaml

@@ -0,0 +1,22 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.PathIconDemo"
+    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" >
+        <TextBlock Text="Size"></TextBlock>
+        <Slider Name="width" Minimum="0" Maximum="100" Value="20" Width="300"></Slider>
+        <ToggleSwitch Name="active" Content="Active"></ToggleSwitch>
+        <PathIcon
+            Classes.Active="{Binding ElementName=active, Path=IsChecked}"
+            BorderBrush="{DynamicResource SemiRed6}"
+            Width="{Binding #width.Value}"
+            Height="{Binding #width.Value}"
+            Data="M12 3L2 12H5V20H19V12H22L12 3M13 18H11V16H13V18M13 14H11V8H13V14Z"
+            Foreground="{DynamicResource SemiBlue6}" />
+    </StackPanel>
+</UserControl>

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

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

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

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

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

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

demo/Semi.Avalonia.Demo/Pages/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,16 +1,19 @@
-<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>
             <RepeatButton Classes="Secondary">Secondary</RepeatButton>
             <RepeatButton Classes="Tertiary">Tertiary</RepeatButton>
+            <RepeatButton Classes="Success">Success</RepeatButton>
             <RepeatButton Classes="Warning">Warning</RepeatButton>
             <RepeatButton Classes="Danger">Danger</RepeatButton>
             <RepeatButton Classes="Primary" IsEnabled="False">Danger</RepeatButton>
@@ -20,18 +23,30 @@
             <RepeatButton Classes="Primary" Theme="{DynamicResource SolidRepeatButton}">Primary</RepeatButton>
             <RepeatButton Classes="Secondary" Theme="{DynamicResource SolidRepeatButton}">Secondary</RepeatButton>
             <RepeatButton Classes="Tertiary" Theme="{DynamicResource SolidRepeatButton}">Tertiary</RepeatButton>
+            <RepeatButton Classes="Success" Theme="{DynamicResource SolidRepeatButton}">Success</RepeatButton>
             <RepeatButton Classes="Warning" Theme="{DynamicResource SolidRepeatButton}">Warning</RepeatButton>
             <RepeatButton Classes="Danger" Theme="{DynamicResource SolidRepeatButton}">Danger</RepeatButton>
-            <RepeatButton 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">
             <RepeatButton Classes="Primary" Theme="{DynamicResource BorderlessRepeatButton}">Primary</RepeatButton>
             <RepeatButton Classes="Secondary" Theme="{DynamicResource BorderlessRepeatButton}">Secondary</RepeatButton>
             <RepeatButton Classes="Tertiary" Theme="{DynamicResource BorderlessRepeatButton}">Tertiary</RepeatButton>
+            <RepeatButton Classes="Success" Theme="{DynamicResource BorderlessRepeatButton}">Success</RepeatButton>
             <RepeatButton Classes="Warning" Theme="{DynamicResource BorderlessRepeatButton}">Warning</RepeatButton>
             <RepeatButton Classes="Danger" Theme="{DynamicResource BorderlessRepeatButton}">Danger</RepeatButton>
-            <RepeatButton 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/ScrollViewerDemo.axaml

@@ -0,0 +1,75 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.ScrollViewerDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <ScrollViewer>
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
+            <ScrollViewer
+                Width="200"
+                Height="200"
+                Margin="10"
+                HorizontalScrollBarVisibility="Auto">
+                <Grid RowDefinitions="Auto,Auto"
+                      ColumnDefinitions="Auto,Auto"
+                      Width="300" Height="300">
+                    <Rectangle
+                        Grid.Row="0" Grid.Column="0"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiYellow2}" />
+                    <Rectangle
+                        Grid.Row="0" Grid.Column="1"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiBlue2}" />
+                    <Rectangle
+                        Grid.Row="1" Grid.Column="0"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiPink2}" />
+                    <Rectangle
+                        Grid.Row="1" Grid.Column="1"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiGreen2}" />
+                </Grid>
+            </ScrollViewer>
+            <ScrollViewer
+                Width="200"
+                Height="200"
+                Margin="10"
+                HorizontalScrollBarVisibility="Auto"
+                Theme="{DynamicResource StaticScrollViewer}">
+                <Grid RowDefinitions="Auto,Auto"
+                      ColumnDefinitions="Auto,Auto"
+                      Width="300" Height="300">
+                    <Rectangle
+                        Grid.Row="0" Grid.Column="0"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiYellow2}" />
+                    <Rectangle
+                        Grid.Row="0" Grid.Column="1"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiBlue2}" />
+                    <Rectangle
+                        Grid.Row="1" Grid.Column="0"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiPink2}" />
+                    <Rectangle
+                        Grid.Row="1" Grid.Column="1"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiGreen2}" />
+                </Grid>
+            </ScrollViewer>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>

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

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

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

@@ -0,0 +1,163 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.SelectableTextBlockDemo"
+    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 HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
+        <StackPanel Orientation="Horizontal">
+            <StackPanel.Styles>
+                <Style Selector="SelectableTextBlock">
+                    <Setter Property="VerticalAlignment" Value="Center" />
+                    <Setter Property="Margin" Value="4" />
+                </Style>
+            </StackPanel.Styles>
+            <HeaderedContentControl
+                Width="400"
+                Height="400"
+                Margin="16"
+                VerticalAlignment="Top"
+                Header="Default Theme"
+                Theme="{DynamicResource GroupBox}">
+                <Grid
+                    VerticalAlignment="Top"
+                    ColumnDefinitions="Auto, *"
+                    RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
+                    <SelectableTextBlock Grid.Row="1" Grid.Column="0">Classes</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="2" Grid.Column="0">-</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="3" Grid.Column="0">Secondary</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="4" Grid.Column="0">Tertiary</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="5" Grid.Column="0">Quaternary</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">Success</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">Warning</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="8" Grid.Column="0">Danger</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="9" Grid.Column="0">Mark</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="10" Grid.Column="0">Underline</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="11" Grid.Column="0">Delete</SelectableTextBlock>
+
+                    <SelectableTextBlock Grid.Row="2" Grid.Column="1">Text</SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="3"
+                        Grid.Column="1"
+                        Classes="Secondary">
+                        Secondary
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="4"
+                        Grid.Column="1"
+                        Classes="Tertiary">
+                        Tertiary
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="5"
+                        Grid.Column="1"
+                        Classes="Quaternary">
+                        Quaternary
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="6"
+                        Grid.Column="1"
+                        Classes="Success">
+                        Success
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="7"
+                        Grid.Column="1"
+                        Classes="Warning">
+                        Warning
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="8"
+                        Grid.Column="1"
+                        Classes="Danger">
+                        Danger
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="9"
+                        Grid.Column="1"
+                        Classes="Mark">
+                        Default Mark
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="10"
+                        Grid.Column="1"
+                        Classes="Underline">
+                        Underline
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="11"
+                        Grid.Column="1"
+                        Classes="Delete">
+                        Delete
+                    </SelectableTextBlock>
+                </Grid>
+            </HeaderedContentControl>
+            <HeaderedContentControl
+                Width="400"
+                Height="400"
+                Margin="16"
+                VerticalAlignment="Top"
+                Header="Theme: TitleSelectableTextBlock"
+                Theme="{DynamicResource GroupBox}">
+                <Grid
+                    VerticalAlignment="Top"
+                    Background="{Binding}"
+                    ColumnDefinitions="Auto, *"
+                    RowDefinitions="*,*,*,*,*,*,*,*">
+                    <SelectableTextBlock Grid.Row="1" Grid.Column="0">Classes</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="2" Grid.Column="0">H1</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="3" Grid.Column="0">H2</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="4" Grid.Column="0">H3</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="5" Grid.Column="0">H4</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">H5</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">H6</SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="2"
+                        Grid.Column="1"
+                        Classes="H1"
+                        Theme="{StaticResource TitleSelectableTextBlock}">
+                        Header 1
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="3"
+                        Grid.Column="1"
+                        Classes="H2"
+                        Theme="{StaticResource TitleSelectableTextBlock}">
+                        Header 2
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="4"
+                        Grid.Column="1"
+                        Classes="H3"
+                        Theme="{StaticResource TitleSelectableTextBlock}">
+                        Header 3
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="5"
+                        Grid.Column="1"
+                        Classes="H4"
+                        Theme="{StaticResource TitleSelectableTextBlock}">
+                        Header 4
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="6"
+                        Grid.Column="1"
+                        Classes="H5"
+                        Theme="{StaticResource TitleSelectableTextBlock}">
+                        Header 5
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="7"
+                        Grid.Column="1"
+                        Classes="H6"
+                        Theme="{StaticResource TitleSelectableTextBlock}">
+                        Header 6
+                    </SelectableTextBlock>
+                </Grid>
+            </HeaderedContentControl>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>

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

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

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

@@ -4,149 +4,194 @@
     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"
+    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+    d:DesignHeight="1000"
     d:DesignWidth="800"
     mc:Ignorable="d">
+    <Design.DataContext>
+        <pages:SplitViewDemoViewModel />
+    </Design.DataContext>
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <StreamGeometry x:Key="NavigationMenuExpandIconGlyph">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</StreamGeometry>
+        </ResourceDictionary>
+    </UserControl.Resources>
     <Border>
         <Grid ColumnDefinitions="*,400">
-            <StackPanel
-                Grid.Column="1"
-                Margin="5"
-                Orientation="Vertical"
-                Spacing="4">
-                <ToggleButton
-                    Name="PaneOpenButton"
-                    Content="IsPaneOpen"
-                    IsChecked="{Binding IsPaneOpen, ElementName=SplitView}" />
+            <Border Grid.Column="1" VerticalAlignment="Top" Margin="10 0 0 0">
+                <Grid RowDefinitions="*, *, *, *, *, *" ColumnDefinitions="Auto, *">
+                    <Label
+                        Grid.Row="0" Grid.Column="0"
+                        VerticalAlignment="Center"
+                        Content="IsPaneOpen" />
+                    <ToggleSwitch
+                        Grid.Row="0" Grid.Column="1"
+                        Name="PaneOpenButton"
+                        IsChecked="{Binding #SplitView.IsPaneOpen}" />
 
-                <ToggleButton
-                    Name="UseLightDismissOverlayModeButton"
-                    Content="UseLightDismissOverlayMode"
-                    IsChecked="{Binding UseLightDismissOverlayMode, ElementName=SplitView}" />
+                    <Label
+                        Grid.Row="1" Grid.Column="0"
+                        VerticalAlignment="Center"
+                        Content="UseLightDismissOverlayMode" />
+                    <ToggleSwitch
+                        Grid.Row="1" Grid.Column="1"
+                        Name="UseLightDismissOverlayModeButton"
+                        IsChecked="{Binding #SplitView.UseLightDismissOverlayMode}" />
 
-                <ToggleSwitch
-                    Content="Placement"
-                    IsChecked="{Binding !IsLeft}"
-                    OffContent="Left"
-                    OnContent="Right" />
+                    <Label
+                        Grid.Row="2" Grid.Column="0"
+                        VerticalAlignment="Center"
+                        Content="Placement" />
+                    <ToggleSwitch
+                        Grid.Row="2" Grid.Column="1"
+                        OffContent="Left"
+                        OnContent="Right"
+                        IsChecked="{Binding #SplitView.PanePlacement, Mode=OneWayToSource}" />
 
-                <TextBlock Text="DisplayMode" />
-                <ComboBox
-                    Name="DisplayModeSelector"
-                    Width="170"
-                    Margin="10"
-                    SelectedIndex="{Binding DisplayMode}">
-                    <ComboBoxItem>Inline</ComboBoxItem>
-                    <ComboBoxItem>CompactInline</ComboBoxItem>
-                    <ComboBoxItem>Overlay</ComboBoxItem>
-                    <ComboBoxItem>CompactOverlay</ComboBoxItem>
-                </ComboBox>
+                    <Label
+                        Grid.Row="3" Grid.Column="0"
+                        VerticalAlignment="Center"
+                        Content="DisplayMode" />
+                    <ComboBox
+                        Grid.Row="3" Grid.Column="1"
+                        Name="DisplayModeSelector"
+                        HorizontalAlignment="Stretch"
+                        ItemsSource="{Binding DisplayModes}"
+                        SelectedIndex="{Binding #SplitView.DisplayMode}" />
 
-                <TextBlock Text="PaneBackground" />
-                <ComboBox
-                    Name="PaneBackgroundSelector"
-                    Width="170"
-                    Margin="10"
-                    SelectedIndex="0">
-                    <ComboBoxItem Tag="White">White</ComboBoxItem>
-                    <ComboBoxItem Tag="Red">Red</ComboBoxItem>
-                    <ComboBoxItem Tag="Blue">Blue</ComboBoxItem>
-                    <ComboBoxItem Tag="Green">Green</ComboBoxItem>
-                </ComboBox>
+                    <Label
+                        Grid.Row="4" Grid.Column="0"
+                        VerticalAlignment="Center"
+                        Content="{Binding #CompactPaneLengthSlider.Value, StringFormat='{}CompactPaneLength: {0}'}" />
+                    <Slider
+                        Grid.Row="4" Grid.Column="1"
+                        Name="CompactPaneLengthSlider"
+                        Maximum="128"
+                        Minimum="0"
+                        TickFrequency="1"
+                        IsSnapToTickEnabled="True"
+                        Value="{Binding #SplitView.CompactPaneLength}" />
 
-                <TextBlock Text="{Binding Value, ElementName=OpenPaneLengthSlider, StringFormat='{}OpenPaneLength: {0}'}" />
-                <Slider
-                    Name="OpenPaneLengthSlider"
-                    Width="150"
-                    Maximum="500"
-                    Minimum="128"
-                    Value="256" />
-
-                <TextBlock Text="{Binding Value, ElementName=CompactPaneLengthSlider, StringFormat='{}CompactPaneLength: {0}'}" />
-                <Slider
-                    Name="CompactPaneLengthSlider"
-                    Width="150"
-                    Maximum="128"
-                    Minimum="24"
-                    Value="48" />
-            </StackPanel>
-            <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}" BorderThickness="1">
-                <!--  {Binding SelectedItem.Tag, ElementName=PaneBackgroundSelector}  -->
+                    <Label
+                        Grid.Row="5" Grid.Column="0"
+                        VerticalAlignment="Center"
+                        Content="{Binding #OpenPaneLengthSlider.Value,StringFormat='{}OpenPaneLength: {0}'}" />
+                    <Slider
+                        Grid.Row="5" Grid.Column="1"
+                        Name="OpenPaneLengthSlider"
+                        Maximum="500"
+                        Minimum="128"
+                        TickFrequency="1"
+                        IsSnapToTickEnabled="True"
+                        Value="{Binding #SplitView.OpenPaneLength}" />
+                </Grid>
+            </Border>
+            <Border
+                Grid.Column="0"
+                BorderBrush="{DynamicResource SemiGrey1}"
+                BorderThickness="1">
                 <SplitView
                     Name="SplitView"
-                    CompactPaneLength="{Binding Value, ElementName=CompactPaneLengthSlider}"
                     DisplayMode="CompactOverlay"
-                    OpenPaneLength="{Binding Value, ElementName=OpenPaneLengthSlider}"
-                    PaneBackground="{Binding SelectedItem.Tag, ElementName=PaneBackgroundSelector}"
-                    PanePlacement="{Binding PanePlacement}">
+                    CompactPaneLength="48"
+                    OpenPaneLength="256">
+                    <SplitView.Background>
+                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                            <GradientStop Color="#6b4c1b" Offset="0" />
+                            <GradientStop Color="#291e10" Offset="1" />
+                        </LinearGradientBrush>
+                    </SplitView.Background>
                     <SplitView.Pane>
-                        <Grid RowDefinitions="Auto,Auto,*,Auto">
+                        <Grid RowDefinitions="Auto,*,Auto">
                             <TextBlock
+                                Grid.Row="0"
                                 Name="PaneHeader"
-                                Margin="5,12,0,0"
+                                Margin="8,12"
                                 FontWeight="Bold"
-                                Text="PANE CONTENT" />
-                            <ComboBox Grid.Row="1" Width="150">
-                                <ComboBoxItem Content="Item1" />
-                                <ComboBoxItem Content="Item2" />
-                                <ComboBoxItem Content="Item3" />
-                            </ComboBox>
-                            <ListBoxItem
+                                Text="Playlist" />
+                            <ListBox
+                                Grid.Row="1"
+                                ItemsSource="{Binding Songs}" />
+                            <ToggleSwitch
                                 Grid.Row="2"
-                                Margin="0,10"
-                                VerticalAlignment="Top">
-                                <StackPanel Orientation="Horizontal">
-                                    <!--  Path glyph from materialdesignicons.com  -->
-                                    <Border Width="48">
-                                        <Viewbox
-                                            Width="24"
-                                            Height="24"
-                                            HorizontalAlignment="Left">
-                                            <Canvas Width="24" Height="24">
-                                                <Path Data="M16 17V19H2V17S2 13 9 13 16 17 16 17M12.5 7.5A3.5 3.5 0 1 0 9 11A3.5 3.5 0 0 0 12.5 7.5M15.94 13A5.32 5.32 0 0 1 18 17V19H22V17S22 13.37 15.94 13M15 4A3.39 3.39 0 0 0 13.07 4.59A5 5 0 0 1 13.07 10.41A3.39 3.39 0 0 0 15 11A3.5 3.5 0 0 0 15 4Z" Fill="{DynamicResource SystemControlForegroundBaseHighBrush}" />
-                                            </Canvas>
-                                        </Viewbox>
-                                    </Border>
-                                    <TextBlock VerticalAlignment="Center" Text="People" />
-                                </StackPanel>
-                            </ListBoxItem>
-                            <TextBlock
-                                Grid.Row="3"
-                                Margin="60,12"
-                                Text="Item at bottom" />
+                                Theme="{DynamicResource ButtonToggleSwitch}"
+                                IsChecked="{Binding #SplitView.IsPaneOpen}">
+                                <ToggleSwitch.OnContent>
+                                    <PathIcon
+                                        Width="16"
+                                        Height="16"
+                                        Data="{StaticResource NavigationMenuExpandIconGlyph}" />
+                                </ToggleSwitch.OnContent>
+                                <ToggleSwitch.OffContent>
+                                    <PathIcon
+                                        Width="16"
+                                        Height="16"
+                                        Data="{StaticResource NavigationMenuExpandIconGlyph}" />
+                                </ToggleSwitch.OffContent>
+                            </ToggleSwitch>
                         </Grid>
                     </SplitView.Pane>
 
-                    <Grid>
-                        <Grid.Styles>
-                            <Style Selector="TextBlock">
-                                <Setter Property="FontSize" Value="14" />
-                                <Setter Property="FontWeight" Value="700" />
+                    <Panel>
+                        <Panel.Styles>
+                            <Style Selector="Image#AlbumCover">
+                                <Style.Animations>
+                                    <Animation IterationCount="Infinite" Duration="0:0:40">
+                                        <KeyFrame Cue="0%">
+                                            <Setter Property="RotateTransform.Angle" Value="0" />
+                                        </KeyFrame>
+                                        <KeyFrame Cue="100%">
+                                            <Setter Property="RotateTransform.Angle" Value="360" />
+                                        </KeyFrame>
+                                    </Animation>
+                                </Style.Animations>
                             </Style>
-                        </Grid.Styles>
-                        <TextBlock
-                            HorizontalAlignment="Center"
-                            VerticalAlignment="Center"
-                            Text="SplitViewContent" />
-                        <TextBlock Text="SplitViewContent" TextAlignment="Left" />
-                        <TextBlock
-                            HorizontalAlignment="Right"
-                            Text="SplitViewContent"
-                            TextAlignment="Left" />
-                        <TextBlock
-                            VerticalAlignment="Bottom"
-                            Text="SplitViewContent"
-                            TextAlignment="Left" />
-                        <TextBlock
-                            HorizontalAlignment="Right"
-                            VerticalAlignment="Bottom"
-                            Text="SplitViewContent"
-                            TextAlignment="Left" />
-                    </Grid>
+                        </Panel.Styles>
+                        <Image
+                            Source="/Assets/WORLD.png"
+                            Name="AlbumCover"
+                            Width="200"
+                            Height="200" />
+                        <Arc
+                            Width="290"
+                            Height="290"
+                            StartAngle="0"
+                            SweepAngle="360"
+                            StrokeJoin="Round"
+                            StrokeLineCap="Round"
+                            StrokeThickness="45">
+                            <Arc.Stroke>
+                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
+                                    <GradientStop Color="#010101" Offset="0" />
+                                    <GradientStop Color="#363636" Offset="0.5" />
+                                    <GradientStop Color="#010101" Offset="1" />
+                                </LinearGradientBrush>
+                            </Arc.Stroke>
+                        </Arc>
+                        <Arc
+                            Width="294"
+                            Height="294"
+                            StartAngle="0"
+                            SweepAngle="360"
+                            StrokeJoin="Round"
+                            StrokeLineCap="Round"
+                            StrokeThickness="4"
+                            Stroke="Black" />
+                        <Arc
+                            Width="310"
+                            Height="310"
+                            StartAngle="0"
+                            SweepAngle="360"
+                            StrokeJoin="Round"
+                            StrokeLineCap="Round"
+                            StrokeThickness="10"
+                            Stroke="#C6CACD"
+                            Opacity="0.1" />
+                    </Panel>
 
                 </SplitView>
             </Border>
 
         </Grid>
     </Border>
-</UserControl>
+</UserControl>

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

@@ -1,6 +1,7 @@
-using Avalonia;
+using System.Collections.ObjectModel;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
+using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -9,10 +10,35 @@ public partial class SplitViewDemo : UserControl
     public SplitViewDemo()
     {
         InitializeComponent();
+        this.DataContext = new SplitViewDemoViewModel();
     }
 
     private void InitializeComponent()
     {
         AvaloniaXamlLoader.Load(this);
     }
+}
+
+public class SplitViewDemoViewModel : ObservableObject
+{
+    public ObservableCollection<string> Songs { get; set; } =
+    [
+        "320万年前",
+        "隐德来希",
+        "孔明",
+        "锦鲤卟噜噜",
+        "指鹿为马",
+        "热带季风Remix",
+        "加州梦境",
+        "渐近自由",
+        "世界所有的烂漫",
+    ];
+
+    public ObservableCollection<SplitViewDisplayMode> DisplayModes { get; set; } =
+    [
+        SplitViewDisplayMode.Inline,
+        SplitViewDisplayMode.CompactInline,
+        SplitViewDisplayMode.Overlay,
+        SplitViewDisplayMode.CompactOverlay,
+    ];
 }

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

@@ -4,63 +4,92 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels;assembly=Semi.Avalonia.Demo"
     d:DesignHeight="450"
     d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:TabControlDemoViewModel"
     mc:Ignorable="d">
-    <StackPanel>
-        <Border Theme="{StaticResource CardBorder}">
-            <TabControl TabStripPlacement="Top">
-                <TabItem Content="Hello 1" Header="Tab 1" />
-                <TabItem Content="Hello 2" Header="Tab 2" />
-                <TabItem Content="Hello 3" Header="Tab 3" />
-                <TabItem Content="中文内容" Header="中文中文" />
-                <TabItem
-                    Content="Hello 4"
-                    Header="Tab 4"
-                    IsEnabled="False" />
-            </TabControl>
-        </Border>
-        <Border Theme="{StaticResource CardBorder}">
-            <TabControl TabStripPlacement="Left">
-                <TabItem Content="Hello 1" Header="Tab 1" />
-                <TabItem Content="Hello 2" Header="Tab 2" />
-                <TabItem Content="Hello 3" Header="Tab 3" />
-                <TabItem Content="中文内容" Header="中文中文" />
-                <TabItem
-                    Content="Hello 4"
-                    Header="Tab 4"
-                    IsEnabled="False" />
-            </TabControl>
-        </Border>
-        <Border Theme="{StaticResource CardBorder}">
-            <TabControl TabStripPlacement="Right">
-                <TabItem Content="Hello 1" Header="Tab 1" />
-                <TabItem Content="Hello 2" Header="Tab 2" />
-                <TabItem Content="Hello 3" Header="Tab 3" />
-                <TabItem Content="中文内容" Header="中文中文" />
-                <TabItem
-                    Content="Hello 4"
-                    Header="Tab 4"
-                    IsEnabled="False" />
-            </TabControl>
-        </Border>
-        <Border Theme="{StaticResource CardBorder}">
-            <TabControl TabStripPlacement="Bottom">
-                <TabItem Content="Hello 1" Header="Tab 1" />
-                <TabItem Content="Hello 2" Header="Tab 2" />
-                <TabItem Content="Hello 3" Header="Tab 3" />
-                <TabItem Content="中文内容" Header="中文中文" />
-                <TabItem
-                    Content="Hello 4"
-                    Header="Tab 4"
-                    IsEnabled="False" />
-            </TabControl>
-        </Border>
-        <Border Theme="{StaticResource CardBorder}">
-            <TabStrip>
-                <TabStripItem>Tab 1</TabStripItem>
-                <TabStripItem>Tab 2</TabStripItem>
-            </TabStrip>
-        </Border>
-    </StackPanel>
+    <ScrollViewer>
+        <StackPanel Spacing="20">
+            <Border Theme="{StaticResource CardBorder}">
+                <TabControl TabStripPlacement="Top">
+                    <TabItem Content="Hello 1" Header="Tab 1" />
+                    <TabItem Content="Hello 2" Header="Tab 2" />
+                    <TabItem Content="Hello 3" Header="Tab 3" />
+                    <TabItem Content="中文内容" Header="中文中文" />
+                    <TabItem
+                        Content="Hello 4"
+                        Header="Tab 4"
+                        IsEnabled="False" />
+                </TabControl>
+            </Border>
+            <Border Theme="{StaticResource CardBorder}">
+                <TabControl TabStripPlacement="Left">
+                    <TabItem Content="Hello 1" Header="Tab 1" />
+                    <TabItem Content="Hello 2" Header="Tab 2" />
+                    <TabItem Content="Hello 3" Header="Tab 3" />
+                    <TabItem Content="中文内容" Header="中文中文" />
+                    <TabItem
+                        Content="Hello 4"
+                        Header="Tab 4"
+                        IsEnabled="False" />
+                </TabControl>
+            </Border>
+            <Border Theme="{StaticResource CardBorder}">
+                <TabControl TabStripPlacement="Right">
+                    <TabItem Content="Hello 1" Header="Tab 1" />
+                    <TabItem Content="Hello 2" Header="Tab 2" />
+                    <TabItem Content="Hello 3" Header="Tab 3" />
+                    <TabItem Content="中文内容" Header="中文中文" />
+                    <TabItem
+                        Content="Hello 4"
+                        Header="Tab 4"
+                        IsEnabled="False" />
+                </TabControl>
+            </Border>
+            <Border Theme="{StaticResource CardBorder}">
+                <TabControl TabStripPlacement="Bottom">
+                    <TabItem Content="Hello 1" Header="Tab 1" />
+                    <TabItem Content="Hello 2" Header="Tab 2" />
+                    <TabItem Content="Hello 3" Header="Tab 3" />
+                    <TabItem Content="中文内容" Header="中文中文" />
+                    <TabItem
+                        Content="Hello 4"
+                        Header="Tab 4"
+                        IsEnabled="False" />
+                </TabControl>
+            </Border>
+            <Border Theme="{StaticResource CardBorder}">
+                <TabStrip>
+                    <TabStripItem>Tab 1</TabStripItem>
+                    <TabStripItem>Tab 2</TabStripItem>
+                </TabStrip>
+            </Border>
+            <Border Height="300" Theme="{DynamicResource CardBorder}">
+                <TabControl
+                    ItemsSource="{Binding Items}"
+                    TabStripPlacement="Top"
+                    Theme="{DynamicResource ScrollTabControl}" />
+            </Border>
+            <Border Height="300" Theme="{DynamicResource CardBorder}">
+                <TabControl
+                    ItemsSource="{Binding Items}"
+                    TabStripPlacement="Left"
+                    Theme="{DynamicResource ScrollTabControl}" />
+            </Border>
+            <Border Height="300" Theme="{DynamicResource CardBorder}">
+                <TabControl
+                    ItemsSource="{Binding Items}"
+                    TabStripPlacement="Bottom"
+                    Theme="{DynamicResource ScrollTabControl}" />
+            </Border>
+            <Border Height="300" Theme="{DynamicResource CardBorder}">
+                <TabControl
+                    ItemsSource="{Binding Items}"
+                    TabStripPlacement="Right"
+                    Theme="{DynamicResource ScrollTabControl}" />
+            </Border>
+        </StackPanel>
+    </ScrollViewer>
 </UserControl>

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

@@ -1,6 +1,7 @@
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
+using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -9,5 +10,6 @@ public partial class TabControlDemo : UserControl
     public TabControlDemo()
     {
         InitializeComponent();
+        this.DataContext = new TabControlDemoViewModel();
     }
 }

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

@@ -1,76 +1,163 @@
 <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">
-    <StackPanel Orientation="Horizontal">
-        <StackPanel
-            Margin="20" HorizontalAlignment="Left"
-            Spacing="5">
-            <TextBlock>Styles for TextBlock</TextBlock>
-            <TextBlock Classes="H1" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
-            <TextBlock Classes="H2" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
-            <TextBlock Classes="H3" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
-            <TextBlock Classes="H4" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
-            <TextBlock Classes="H5" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
-            <TextBlock Classes="H6" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
+    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">
+    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
+        <StackPanel Orientation="Horizontal">
+            <StackPanel.Styles>
+                <Style Selector="TextBlock">
+                    <Setter Property="VerticalAlignment" Value="Center" />
+                    <Setter Property="Margin" Value="4" />
+                </Style>
+            </StackPanel.Styles>
+            <HeaderedContentControl
+                Width="400"
+                Height="400"
+                Margin="16"
+                VerticalAlignment="Top"
+                Header="Default Theme"
+                Theme="{DynamicResource GroupBox}">
+                <Grid
+                    VerticalAlignment="Top"
+                    ColumnDefinitions="Auto, *"
+                    RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
+                    <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
+                    <TextBlock Grid.Row="2" Grid.Column="0">-</TextBlock>
+                    <TextBlock Grid.Row="3" Grid.Column="0">Secondary</TextBlock>
+                    <TextBlock Grid.Row="4" Grid.Column="0">Tertiary</TextBlock>
+                    <TextBlock Grid.Row="5" Grid.Column="0">Quaternary</TextBlock>
+                    <TextBlock Grid.Row="6" Grid.Column="0">Success</TextBlock>
+                    <TextBlock Grid.Row="7" Grid.Column="0">Warning</TextBlock>
+                    <TextBlock Grid.Row="8" Grid.Column="0">Danger</TextBlock>
+                    <TextBlock Grid.Row="9" Grid.Column="0">Mark</TextBlock>
+                    <TextBlock Grid.Row="10" Grid.Column="0">Underline</TextBlock>
+                    <TextBlock Grid.Row="11" Grid.Column="0">Delete</TextBlock>
 
-            <TextBlock>Text</TextBlock>
-            <TextBlock Classes="Secondary">Secondary</TextBlock>
-            <TextBlock Classes="Tertiary">Tertiary</TextBlock>
-            <TextBlock Classes="Quaternary">Quaternary</TextBlock>
-            <TextBlock Classes="Warning">Warning</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>
-        </StackPanel>
-        <StackPanel
-            Margin="20" HorizontalAlignment="Left"
-            Spacing="5">
-            <TextBlock>Styles for SelectableTextBlock</TextBlock>
-            <SelectableTextBlock Classes="H1" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
-            <SelectableTextBlock Classes="H2" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
-            <SelectableTextBlock Classes="H3" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
-            <SelectableTextBlock Classes="H4" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
-            <SelectableTextBlock Classes="H5" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
-            <SelectableTextBlock Classes="H6" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
+                    <TextBlock Grid.Row="2" Grid.Column="1">Text</TextBlock>
+                    <TextBlock
+                        Grid.Row="3"
+                        Grid.Column="1"
+                        Classes="Secondary">
+                        Secondary
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="4"
+                        Grid.Column="1"
+                        Classes="Tertiary">
+                        Tertiary
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="5"
+                        Grid.Column="1"
+                        Classes="Quaternary">
+                        Quaternary
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="6"
+                        Grid.Column="1"
+                        Classes="Success">
+                        Success
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="7"
+                        Grid.Column="1"
+                        Classes="Warning">
+                        Warning
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="8"
+                        Grid.Column="1"
+                        Classes="Danger">
+                        Danger
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="9"
+                        Grid.Column="1"
+                        Classes="Mark">
+                        Default Mark
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="10"
+                        Grid.Column="1"
+                        Classes="Underline">
+                        Underline
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="11"
+                        Grid.Column="1"
+                        Classes="Delete">
+                        Delete
+                    </TextBlock>
+                </Grid>
+            </HeaderedContentControl>
+            <HeaderedContentControl
+                Width="400"
+                Height="400"
+                Margin="16"
+                VerticalAlignment="Top"
+                Header="Theme: TitleTextBlock"
+                Theme="{DynamicResource GroupBox}">
+                <Grid
+                    VerticalAlignment="Top"
+                    ColumnDefinitions="Auto, *"
+                    RowDefinitions="*,*,*,*,*,*,*,*">
+                    <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
+                    <TextBlock Grid.Row="2" Grid.Column="0">H1</TextBlock>
+                    <TextBlock Grid.Row="3" Grid.Column="0">H2</TextBlock>
+                    <TextBlock Grid.Row="4" Grid.Column="0">H3</TextBlock>
+                    <TextBlock Grid.Row="5" Grid.Column="0">H4</TextBlock>
+                    <TextBlock Grid.Row="6" Grid.Column="0">H5</TextBlock>
+                    <TextBlock Grid.Row="7" Grid.Column="0">H6</TextBlock>
+                    <TextBlock
+                        Grid.Row="2"
+                        Grid.Column="1"
+                        Classes="H1"
+                        Theme="{StaticResource TitleTextBlock}">
+                        Header 1
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="3"
+                        Grid.Column="1"
+                        Classes="H2"
+                        Theme="{StaticResource TitleTextBlock}">
+                        Header 2
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="4"
+                        Grid.Column="1"
+                        Classes="H3"
+                        Theme="{StaticResource TitleTextBlock}">
+                        Header 3
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="5"
+                        Grid.Column="1"
+                        Classes="H4"
+                        Theme="{StaticResource TitleTextBlock}">
+                        Header 4
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="6"
+                        Grid.Column="1"
+                        Classes="H5"
+                        Theme="{StaticResource TitleTextBlock}">
+                        Header 5
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="7"
+                        Grid.Column="1"
+                        Classes="H6"
+                        Theme="{StaticResource TitleTextBlock}">
+                        Header 6
+                    </TextBlock>
+                </Grid>
 
-            <SelectableTextBlock>Text</SelectableTextBlock>
-            <SelectableTextBlock Classes="Secondary">Secondary</SelectableTextBlock>
-            <SelectableTextBlock Classes="Tertiary">Tertiary</SelectableTextBlock>
-            <SelectableTextBlock Classes="Quaternary">Quaternary</SelectableTextBlock>
-            <SelectableTextBlock Classes="Warning">Warning</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>
+            </HeaderedContentControl>
         </StackPanel>
-        <StackPanel
-            Margin="20" HorizontalAlignment="Left"
-            Spacing="5">
-            <TextBlock>Styles for Label</TextBlock>
-            <Label Classes="H1" Theme="{StaticResource TitleLabel}">Header 1</Label>
-            <Label Classes="H2" Theme="{StaticResource TitleLabel}">Header 1</Label>
-            <Label Classes="H3" Theme="{StaticResource TitleLabel}">Header 1</Label>
-            <Label Classes="H4" Theme="{StaticResource TitleLabel}">Header 1</Label>
-            <Label Classes="H5" Theme="{StaticResource TitleLabel}">Header 1</Label>
-            <Label Classes="H6" Theme="{StaticResource TitleLabel}">Header 1</Label>
-
-            <Label>Text</Label>
-            <Label Classes="Secondary">Secondary</Label>
-            <Label Classes="Tertiary">Tertiary</Label>
-            <Label Classes="Quaternary">Quaternary</Label>
-            <Label Classes="Warning">Warning</Label>
-            <Label Classes="Danger">Danger</Label>
-            <Label Classes="Success">Success</Label>
-            <Label IsEnabled="False">Disabled</Label>
-            <Label Classes="Mark">Default Mark</Label>
-            <Label Classes="Code">Example Code</Label>
-        </StackPanel>
-    </StackPanel>
+    </ScrollViewer>
 </UserControl>

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

@@ -1,26 +1,48 @@
 <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"
+    xmlns:system="clr-namespace:System;assembly=netstandard"
+    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" />
+            <TextBox Width="300" Classes="TextArea" />
         </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,13 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="20" Spacing="20">
+    <StackPanel Spacing="20">
         <TimePicker />
+        <TimePicker Classes="ClearButton" />
         <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,23 +7,39 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="20">
-        <TextBlock Text="Toggle Button" />
+    <StackPanel Spacing="20">
+        <TextBlock Text="Toggle Button (Default)" />
         <StackPanel Orientation="Horizontal" Spacing="20">
-            <ToggleButton>Primary</ToggleButton>
+            <ToggleButton>Default</ToggleButton>
+            <ToggleButton Classes="Primary">Primary</ToggleButton>
             <ToggleButton Classes="Secondary">Secondary</ToggleButton>
             <ToggleButton Classes="Tertiary">Tertiary</ToggleButton>
+            <ToggleButton Classes="Success">Success</ToggleButton>
             <ToggleButton Classes="Warning">Warning</ToggleButton>
-            <ToggleButton Classes="Error">Error</ToggleButton>
+            <ToggleButton Classes="Danger">Danger</ToggleButton>
+            <ToggleButton Classes="Danger" IsEnabled="False">Danger</ToggleButton>
         </StackPanel>
-
-        <TextBlock Margin="0,20,0,0" Text="Toggle Button Three State" />
+        <TextBlock Text="Toggle Button Checked State" />
         <StackPanel Orientation="Horizontal" Spacing="20">
-            <ToggleButton Name="button" IsThreeState="True">Primary</ToggleButton>
-            <ToggleButton Classes="Secondary" IsThreeState="True">Secondary</ToggleButton>
-            <ToggleButton Classes="Tertiary" IsThreeState="True">Tertiary</ToggleButton>
-            <ToggleButton Classes="Warning" IsThreeState="True">Warning</ToggleButton>
-            <ToggleButton Classes="Error" IsThreeState="True">Error</ToggleButton>
+            <ToggleButton IsChecked="True">Default</ToggleButton>
+            <ToggleButton Classes="Primary" IsChecked="True">Primary</ToggleButton>
+            <ToggleButton Classes="Secondary" IsChecked="True">Secondary</ToggleButton>
+            <ToggleButton Classes="Tertiary" IsChecked="True">Tertiary</ToggleButton>
+            <ToggleButton Classes="Success" IsChecked="True">Success</ToggleButton>
+            <ToggleButton Classes="Warning" IsChecked="True">Warning</ToggleButton>
+            <ToggleButton Classes="Danger" IsChecked="True">Danger</ToggleButton>
+            <ToggleButton Classes="Danger" IsChecked="True" IsEnabled="False">Danger</ToggleButton>
+        </StackPanel>
+        <TextBlock Text="Toggle Button Three State" />
+        <StackPanel Orientation="Horizontal" Spacing="20">
+            <ToggleButton IsThreeState="True" IsChecked="{x:Null}">Default</ToggleButton>
+            <ToggleButton Classes="Primary" IsThreeState="True" IsChecked="{x:Null}">Primary</ToggleButton>
+            <ToggleButton Classes="Secondary" IsThreeState="True" IsChecked="{x:Null}">Secondary</ToggleButton>
+            <ToggleButton Classes="Tertiary" IsThreeState="True" IsChecked="{x:Null}">Tertiary</ToggleButton>
+            <ToggleButton Classes="Success" IsThreeState="True" IsChecked="{x:Null}">Success</ToggleButton>
+            <ToggleButton Classes="Warning" IsThreeState="True" IsChecked="{x:Null}">Warning</ToggleButton>
+            <ToggleButton Classes="Danger" IsThreeState="True" IsChecked="{x:Null}">Danger</ToggleButton>
+            <ToggleButton Classes="Danger" IsThreeState="True" IsChecked="{x:Null}" IsEnabled="False">Danger</ToggleButton>
         </StackPanel>
     </StackPanel>
-</UserControl>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/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/Pages/ToolTipDemo.axaml

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

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

@@ -1,42 +1,82 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.TreeViewDemo" xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="450"
-    d:DesignWidth="800" mc:Ignorable="d">
-    <Panel>
-        <TreeView>
-            <TreeViewItem Header="Level 1">
-                <TreeViewItem Header="Level 2" />
-                <TreeViewItem Header="Level 2" />
-                <TreeViewItem Header="Level 2" />
-                <TreeViewItem Header="Level 2" />
-                <TreeViewItem Header="Level 2">
-                    <TreeViewItem Header="Level 3" />
-                    <TreeViewItem Header="Level 3" />
-                    <TreeViewItem>
-                        <TreeViewItem.Header>
-                            <StackPanel>
-                                <TextBlock>Layer 1</TextBlock>
-                                <TextBlock>Layer 2</TextBlock>
-                                <TextBlock>Layer 3</TextBlock>
-                            </StackPanel>
-                        </TreeViewItem.Header>
-                        <TreeViewItem Header="Level 4" />
-                        <TreeViewItem Header="Level 4" />
-                        <TreeViewItem Header="Level 4" />
-                        <TreeViewItem Header="Level 4" />
-                        <TreeViewItem Header="Level 4" />
-                        <TreeViewItem Header="Level 4" />
+    x:Class="Semi.Avalonia.Demo.Pages.TreeViewDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:models="using:Semi.Avalonia.Demo.Pages"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.Pages"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:TreeViewVm"
+    mc:Ignorable="d">
+
+    <Grid ColumnDefinitions="*,*,*">
+
+        <Border Theme="{StaticResource CardBorder}">
+            <TreeView>
+                <TreeViewItem Header="Level 1">
+                    <TreeViewItem Header="Level 2" />
+                    <TreeViewItem Header="Level 2" />
+                    <TreeViewItem Header="Level 2" />
+                    <TreeViewItem Header="Level 2" />
+                    <TreeViewItem Header="Level 2">
+                        <TreeViewItem Header="Level 3" />
+                        <TreeViewItem Header="Level 3" />
+                        <TreeViewItem>
+                            <TreeViewItem.Header>
+                                <StackPanel>
+                                    <TextBlock>Layer 1</TextBlock>
+                                    <TextBlock>Layer 2</TextBlock>
+                                    <TextBlock>Layer 3</TextBlock>
+                                </StackPanel>
+                            </TreeViewItem.Header>
+                            <TreeViewItem Header="Level 4" />
+                            <TreeViewItem Header="Level 4" />
+                            <TreeViewItem Header="Level 4" />
+                            <TreeViewItem Header="Level 4" />
+                            <TreeViewItem Header="Level 4" />
+                            <TreeViewItem Header="Level 4" />
+                        </TreeViewItem>
+                        <TreeViewItem Header="Level 3" />
+                        <TreeViewItem Header="Level 3" />
+                        <TreeViewItem Header="Level 3" />
+                        <TreeViewItem Header="Level 3" />
+                        <TreeViewItem Header="Level 3" />
+                        <TreeViewItem Header="Level 3" />
+                        <TreeViewItem Header="Level 3" />
                     </TreeViewItem>
-                    <TreeViewItem Header="Level 3" />
-                    <TreeViewItem Header="Level 3" />
-                    <TreeViewItem Header="Level 3" />
-                    <TreeViewItem Header="Level 3" />
-                    <TreeViewItem Header="Level 3" />
-                    <TreeViewItem Header="Level 3" />
-                    <TreeViewItem Header="Level 3" />
                 </TreeViewItem>
-            </TreeViewItem>
-        </TreeView>
-    </Panel>
+            </TreeView>
+        </Border>
+
+        <Border Grid.Column="1" Theme="{StaticResource CardBorder}">
+            <TreeView Margin="0,10" ItemsSource="{Binding Items}">
+                <TreeView.ItemTemplate>
+                    <TreeDataTemplate ItemsSource="{Binding Items}">
+                        <TextBlock Text="{Binding Name}" />
+                    </TreeDataTemplate>
+                </TreeView.ItemTemplate>
+            </TreeView>
+        </Border>
+
+        <Border Grid.Column="2" Theme="{StaticResource CardBorder}">
+            <TreeView ItemsSource="{Binding MultipleLevelItems}">
+                <TreeView.DataTemplates>
+                    <TreeDataTemplate DataType="models:FirstItem" ItemsSource="{Binding SecondItems}">
+                        <TextBlock Text="{Binding Name}" />
+                    </TreeDataTemplate>
+                    <TreeDataTemplate DataType="models:SecondItem" ItemsSource="{Binding ThirdItemItems}">
+                        <TextBlock Text="{Binding Name}" />
+                    </TreeDataTemplate>
+                    <TreeDataTemplate DataType="models:ThirdItem">
+                        <TextBlock Text="{Binding Name}" />
+                    </TreeDataTemplate>
+                </TreeView.DataTemplates>
+            </TreeView>
+        </Border>
+
+    </Grid>
+
 </UserControl>

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

@@ -1,6 +1,8 @@
+using System.Collections.ObjectModel;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
+using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -9,5 +11,76 @@ public partial class TreeViewDemo : UserControl
     public TreeViewDemo()
     {
         InitializeComponent();
+        this.DataContext = new TreeViewVm();
     }
-}
+}
+
+public class TreeViewVm : ObservableObject
+{
+    public ObservableCollection<TreeViewItemVm> Items { get; set; }
+
+    public ObservableCollection<FirstItem>? MultipleLevelItems { get; set; }
+
+    public TreeViewVm()
+    {
+        Items = new ObservableCollection<TreeViewItemVm>()
+        {
+            new TreeViewItemVm() {Name = "Item 1", Id = "1"},
+            new TreeViewItemVm() {Name = "Item 2", Id = "2"},
+            new TreeViewItemVm() {Name = "Item 3", Id = "3", Items = new ObservableCollection<TreeViewItemVm>()
+            {
+                new TreeViewItemVm() {Name = "Item 3.1", Id = "3.1"},
+                new TreeViewItemVm() {Name = "Item 3.2", Id = "3.2"},
+                new TreeViewItemVm() {Name = "Item 3.3", Id = "3.3"},
+            },
+            },
+        };
+
+        MultipleLevelItems = new();
+        for (int i = 1; i < 6; i++)
+        {
+            FirstItem firstItem = new FirstItem { Id = i, Name = $"FirstItem {i}" };
+            firstItem.SecondItems = new();
+            for (int j = 1; j < 6; j++)
+            {
+                SecondItem secondItem = new SecondItem { Id = j, Name = $"SecondItem {j}" };
+                secondItem.ThirdItemItems = new();
+                for (int k = 1; k < 6; k++)
+                {
+                    ThirdItem thirdItem = new ThirdItem { Id = k, Name = $"ThirdItem {k}" };
+                    secondItem.ThirdItemItems.Add(thirdItem);
+                }
+                firstItem.SecondItems.Add(secondItem);
+            }
+            MultipleLevelItems.Add(firstItem);
+        }
+    }
+}
+
+public partial class TreeViewItemVm : ObservableObject
+{
+    public ObservableCollection<TreeViewItemVm> Items { get; set; }
+    public string Name { get; set; }
+    public string Id { get; set; }
+}
+
+public class ItemBase
+{
+    public int Id { get; set; }
+    public string? Name { get; set; }
+}
+public class FirstItem : ItemBase
+{
+    public ObservableCollection<SecondItem>? SecondItems { get; set; }
+}
+public class SecondItem : ItemBase
+{
+    public ObservableCollection<ThirdItem>? ThirdItemItems { get; set; }
+
+}
+public class ThirdItem : ItemBase
+{
+}
+
+
+

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

@@ -4,48 +4,23 @@
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
     </PropertyGroup>
-
+    
     <ItemGroup>
         <AvaloniaResource Include="Assets\**" />
         <TrimmerRootDescriptor Include="Roots.xml" />
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia" Version="11.0.0-preview5" />
+        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(AvaloniaVersion)" />
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.999-cibuild0029384-beta" />
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
         <PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.0" />
-        <PackageReference Include="XamlNameReferenceGenerator" Version="1.5.1" />
-    </ItemGroup>
-
-    <ItemGroup>
-      <AdditionalFiles Include="Pages\AutoCompleteBoxDemo.axaml" />
-      <AdditionalFiles Include="Pages\BorderDemo.axaml" />
-      <AdditionalFiles Include="Pages\ButtonDemo.axaml" />
-      <AdditionalFiles Include="Pages\CheckBoxDemo.axaml" />
-      <AdditionalFiles Include="Pages\ComboBoxDemo.axaml" />
-      <AdditionalFiles Include="Pages\ExpanderDemo.axaml" />
-      <AdditionalFiles Include="Pages\FlyoutDemo.axaml" />
-      <AdditionalFiles Include="Pages\LabelDemo.axaml" />
-      <AdditionalFiles Include="Pages\ListBoxDemo.axaml" />
-      <AdditionalFiles Include="Pages\NotificationDemo.axaml" />
-      <AdditionalFiles Include="Pages\Overview.axaml" />
-      <AdditionalFiles Include="Pages\ProgressBarDemo.axaml" />
-      <AdditionalFiles Include="Pages\RadioButtonDemo.axaml" />
-      <AdditionalFiles Include="Pages\RepeatButtonDemo.axaml" />
-      <AdditionalFiles Include="Pages\TabControlDemo.axaml" />
-      <AdditionalFiles Include="Pages\TextBlockDemo.axaml" />
-      <AdditionalFiles Include="Pages\TextBoxDemo.axaml" />
-      <AdditionalFiles Include="Pages\ToggleButtonDemo.axaml" />
-      <AdditionalFiles Include="Pages\ToggleSwitchDemo.axaml" />
-      <AdditionalFiles Include="Pages\TreeViewDemo.axaml" />
     </ItemGroup>
 
     <ItemGroup>
+      <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="Width" Value="1" />
+            <Setter Property="VerticalAlignment" Value="Stretch" />
+            <Setter Property="HorizontalAlignment" Value="Left" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>